-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathresources.html
More file actions
271 lines (266 loc) · 11.3 KB
/
resources.html
File metadata and controls
271 lines (266 loc) · 11.3 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
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title>Resources - Luke Moorman</title>
<meta name="description" content="Some resources from my Newsletter." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Resources - Luke Moorman" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https:/lukemoorman.com/resources" />
<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 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 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">
<h2 class="font-semibold text-4xl md:text-5xl mb-4">Resources 📚</h2>
<div
id="resources"
class="flex-row md:flex justify-between items-center mb-8 flex-row-reverse md:flex-row"
>
<div class="w-full text-xl text-align-center mb-4 md:mb-0 md:pr-4">
<p class="mb-4">
Below are some of my favorite resources, as well as little tidbits
I'll link to from my <a href="#newsletter"><u>newsletter</u></a
>.
</p>
<div id="videos">
<h3 class="font-semibold text-xl md:text-2xl mb-4 align-middle">
<span class="mr-2">Videos</span>
<img
class="inline-block"
src="video.svg"
alt="Video icon"
width="32"
/>
</h3>
<ul class="list-disc px-4">
<li id="2020-byu-creative-writing-course" class="mb-4">
<span class="font-semibold inline-block mb-4"
>2020 Creative Writing Lectures at BYU:
<a href="https://youtu.be/0cf-qdZ7GbA?si=586dA72mPxShFd2i"
><u>Youtube Playlist Link</u></a
></span
>
<iframe
class="mb-4 w-full aspect-video max-w-xl"
src="https://www.youtube.com/embed/0cf-qdZ7GbA?si=YTSp2jFzxCAmpp-s"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
<p class="mb-4">
This is one of my favorite classes by one of my favorite
modern fantasy / sci-fi authors
<a href="https://www.brandonsanderson.com/"
><u>Brandon Sanderson</u>.</a
>
</p>
</li>
<li id="bs-promises-and-payoffs-video" class="mb-4">
<span class="font-semibold inline-block mb-4"
>Promises & Payoffs:
<a href="https://www.youtube.com/watch?v=-hO7fM9EHU4"
><u>Youtube Link</u>.</a
></span
>
<iframe
class="mb-4 w-full aspect-video max-w-xl"
src="https://www.youtube.com/embed/-hO7fM9EHU4?si=_UaOq-6ab-aJFbvt"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
<p>
...And if you're just interested in getting started with this
promises & payoffs video is a great example of what the course
is like.
</p>
</li>
</ul>
</div>
</div>
</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>