generated from JalisoCSP/jekyll-tailwind
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (119 loc) · 6.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
---
---
{% include head.html %}
<body class="bg-white">
<div class="min-h-screen md:flex">
<div class="flex-1">
<div class="mx-auto w-full leading-loose">
<div class="relative bg-white overflow-hidden">
<div class="max-w-screen-xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div class="relative sm:pt-6 px-4 sm:px-6 lg:px-8">
</div>
<div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
</div>
<main class="sm:mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
Craig Petterson
<br>
<span class="text-red-600">
Ruby on Rails
</span>
<span class="text-indigo-600">
Developer
</span>
</h2>
<p class="mt-3 text-base text-gray-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Experienced in leading teams and managing clients to gather information on business requirements, help narrow down the scope of work and deliver quality software that is readable and maintainable.
</p>
<p class="mt-3 text-base text-gray-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Proven ability to train and mentor new developers with my experience writing technical documentation, tutoring and delivering talks.
</p>
<p class="mt-3 text-base text-gray-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
I believe all goals can be achieved with the right mindset.
</p>
<div class="mt-5 sm:mt-8 flex justify-center lg:justify-start">
{% include svg/socials.html %}
</div>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
alt="Profile image of Craig"
src="/assets/images/craig-face.png">
</div>
</div>
{% include header.html %}
<!-- Projects -->
{% include projects.html %}
<!-- END Projects -->
<section class="relative overflow-hidden py-32 bg-gradient-to-r from-indigo-300 via-indigo-600 to-indigo-300">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl sm:leading-10">
Let's chat!
</h3>
<p class="mt-4 max-w-2xl text-xl leading-7 text-white lg:mx-auto">
Book some time to talk directly with me
</p>
</div>
</div>
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/cspetterson/30min" style="min-width:320px;height:700px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->
</section>
<!-- Article -->
<div class="py-12 bg-gray-100">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<p class="text-base leading-6 text-indigo-600 font-semibold tracking-wide uppercase">
Articles
</p>
<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
I've written a few things
</h3>
<p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 lg:mx-auto">
If you have any comments or suggestions — get in touch!
</p>
</div>
<div class="mt-10">
<ul class="md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
{% for post in site.categories['articles'] %}
<li class="list-none mt-10 md:mt-0">
<div class="flex">
<div class="flex-shrink-0">
<a href="{{ post.url }}" class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<!-- Heroicon name: book-open -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
</a>
</div>
<div class="ml-4">
<a href="{{ post.url }}" class="text-lg leading-6 font-medium text-gray-900">
{{ post.title }}
</a>
<p class="mt-2 text-base leading-6 text-gray-600">
{{ post.excerpt | strip_html }}
</p>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<!-- END Articles -->
</div>
</div>
</div>
{% include footer.html %}
</body>