-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
261 lines (256 loc) · 10.6 KB
/
about.html
File metadata and controls
261 lines (256 loc) · 10.6 KB
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title>About - Luke Moorman</title>
<meta
name="description"
content="Get to know Luke Moorman as a writer, app developer and all-around passionate human. Learn a bit about his journey towards publishing so far and what keeps him motivated."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="About - Luke Moorman" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https:/lukemoorman.com/about" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-YDJFM0PD8P"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-YDJFM0PD8P");
</script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.form_input_styling {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
</style>
</head>
<body>
<header class="bg-gray-100 py-6 px-8 mb-4 sm:mb-16">
<div class="mx-auto flex justify-between items-center">
<div>
<a href="/"
><span class="font-semibold pr-2 text-xl md:text-2xl"
>Luke Moorman</span
><span class="italic block sm:inline-block"
>Writer / Software Engineer</span
></a
>
</div>
<nav class="hidden tracking-wide lg:flex">
<menu class="text-heading flex space-x-10 tracking-wider">
<h2 class="sr-only" id="navigation">Navigation</h2>
<li><a href="/">Home</a></li>
<li><a class="font-semibold" href="/about">About</a></li>
<li><a href="/books">Books</a></li>
<li><a href="/newsletter">Newsletter</a></li>
</menu>
</nav>
<aside class="flex h-full w-1/2 flex-1 justify-end lg:hidden">
<h2 id="mobile-navigation" class="sr-only">Mobile Navigation</h2>
<label
class="relative z-[9999] cursor-pointer px-3 py-6"
for="mobile-menu"
>
<input class="peer hidden" type="checkbox" id="mobile-menu" />
<div
class="relative z-50 block h-[1px] w-7 bg-black bg-transparent content-[''] before:absolute before:top-[-0.35rem] before:z-50 before:block before:h-full before:w-full before:bg-black before:transition-all before:duration-200 before:ease-out before:content-[''] after:absolute after:right-0 after:bottom-[-0.35rem] after:block after:h-full after:w-full after:bg-black after:transition-all after:duration-200 after:ease-out after:content-[''] peer-checked:bg-transparent before:peer-checked:top-0 before:peer-checked:w-full before:peer-checked:rotate-45 before:peer-checked:transform after:peer-checked:bottom-0 after:peer-checked:w-full after:peer-checked:-rotate-45 after:peer-checked:transform"
></div>
<div
class="fixed inset-0 z-40 hidden h-full w-full bg-black/50 backdrop-blur-sm peer-checked:block"
>
</div>
<div
class="fixed top-0 right-0 z-40 h-full w-full translate-x-full overflow-y-auto overscroll-y-none transition duration-500 peer-checked:translate-x-0"
>
<div
class="float-right min-h-full w-[85%] bg-white px-6 pt-12 shadow-2xl"
>
<menu class="flex-row space-y-2 text-xl mt-12">
<li><a href="/">Home</a></li>
<li><a class="font-semibold" href="/about">About</a></li>
<li><a href="/books">Books</a></li>
<li><a href="/newsletter">Newsletter</a></li>
</menu>
</div>
</div>
</label>
</aside>
</div>
</header>
<main class="px-4 sm:px-16 container mx-auto leading-8 max-w-screen-lg">
<nav class="mb-4">
<a
class="text-blue-500 inline-flex align-middle items-center"
href="javascript:history.back()"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-chevron-left"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"
/>
</svg>
<span class="ml-2">Go Back</span></a
>
</nav>
<h2 class="font-semibold text-4xl md:text-5xl mb-4">About</h2>
<div
id="about"
class="flex-row md:flex justify-between items-center mb-8 flex-row-reverse md:flex-row"
>
<div
class="w-full md:w-3/5 text-xl text-align-center mb-4 md:mb-0 md:pr-4"
>
<p class="mb-4">
<strong>Luke Moorman</strong> lives right outside Nashville with his
wonderful family. He has a sweet dog and two spoiled cats. He’s an
app developer by day and a novelist by night.
</p>
<p class="mb-4">
He's passionate about <a href="/books"><u>writing books</u></a
>, but also loves product analytics, music, songwriting, disaster
relief, ministry & building apps that solve problems and help
people.
</p>
<p class="mb-4">
He'd love to share his writing journey with you as he works to
become a published author. Check out
<u><a href="#newsletter">the newsletter</a></u> for detailed
updates!
</p>
</div>
<img
class="w-auto md:w-2/5 rounded-lg max-h-72 m-auto md:max-h-full"
src="./luke_mountains_435x288.webp"
srcset="
./luke_mountains_435x288.webp 435w,
./luke_mountains_870x576.webp 870w,
./luke_mountains.webp 2048w
"
sizes="(max-width: 1280px) 358px, 2048px"
alt="Image of Luke in the mountains hiking"
/>
</div>
<div class="flex justify-center">
<div
id="newsletter"
class="bg-white p-6 rounded-lg shadow-md w-fit mb-8 text-align-center"
>
<h2 class="font-semibold mb-4">Newsletter</h2>
<div class="flex justify-center">
<iframe
name="dummyframe"
id="dummyframe"
style="display: none"
></iframe>
<form
id="newsletter_form"
method="post"
action="https://docs.google.com/forms/d/e/1FAIpQLScJRkxp4V_eHCX6F1cBj2EltIT_69JRM1BnR9hYDf7eJVX4Ew/formResponse"
target="dummyframe"
onsubmit="document.getElementById('newsletter_form').style.display = 'none'; document.getElementById('newsletter_thank_you_message').style.display = 'block';"
class="flex flex-col sm:flex-row items-center m-auto"
>
<input
type="text"
required
placeholder="First Name"
name="entry.1599506597"
class="block sm:w-auto px-4 py-2 rounded-md sm:rounded-l-md sm:rounded-r-none border border-gray-300 focus:outline-none focus:border-blue-500 box-border mb-2 sm:mb-0"
/>
<input
type="text"
required
placeholder="Last Name"
name="entry.552462981"
class="block sm:w-auto px-4 py-2 rounded-md sm:rounded-l-none sm:rounded-r-none border border-gray-300 focus:outline-none focus:border-blue-500 box-border mb-2 sm:mb-0"
/>
<input
type="email"
required
name="entry.701932968"
placeholder="Email Address"
class="block sm:w-auto px-4 py-2 rounded-md sm:rounded-none border border-gray-300 focus:outline-none focus:border-blue-500 box-border mb-2 sm:mb-0"
/>
<input
type="hidden"
name="entry.1249432161"
value="https://lukemoorman.com/about"
/>
<label class="form_input_styling" for="name"></label>
<input
class="form_input_styling"
autocomplete="off"
type="text"
id="name"
name="entry.915020253"
placeholder="Your last name here"
/>
<button
type="submit"
class="block sm:w-auto bg-blue-600 border border-blue-600 text-white font-semibold py-2 px-4 rounded-md sm:rounded-l-none sm:rounded-r-md hover:bg-blue-700 focus:outline-none focus:bg-blue-700 focus:border-blue-700"
>
Subscribe
</button>
</form>
<div id="newsletter_thank_you_message" style="display: none">
Thank you! 🎉 I look forward to connecting with you.
</div>
</div>
</div>
</div>
<div id="socialbanner" class="mx-auto flex justify-center items-center">
<!-- Instagram -->
<a
class="px-4"
href="https://www.instagram.com/lukemoorman_books"
target="_blank"
>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/100px-Instagram_icon.png"
alt="Instagram app icon"
width="40"
/>
</a>
<!-- Twitter -->
<a class="px-4" href="https://twitter.com/LukeWrites" target="_blank">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/X_logo_2023.svg/100px-X_logo_2023.svg.png"
alt="X app icon"
width="40"
/>
</a>
</div>
<div class="text-gray-500 text-sm mt-4 text-center mb-8">
© <span id="currentYear"></span> Luke Moorman
<script>
document.getElementById("currentYear").innerHTML =
new Date().getFullYear();
</script>
</div>
</main>
</body>
</html>