-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
412 lines (398 loc) · 21.4 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
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
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lee Warrick | Software Engineer</title>
<link rel="shortcut icon" href="assets/images/logo2.png" />
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,700,900" rel="stylesheet">
<link rel="stylesheet" href="./assets/aos/aos.css">
<link rel="stylesheet" href="./style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144549907-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-144549907-1');
</script>
<meta property="og:title" content="Lee Warrick | Software Engineer">
<meta property="og:description" content="Portfolio website for Lee Warrick, Software Engineer. Click to see a sampling of Lee's work, as well as his community contributions.">
<meta property="og:image" content="assets/images/logo2.png">
<meta property="og:url" content="https://leewarrick.com">
<meta name="twitter:card" content="summary">
<meta property="og:site_name" content="Lee Warrick | Software Engineer">
<meta name="twitter:image:alt" content="Logo">
<meta name="twitter:site" content="@leewarrickjr">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"email": "[email protected]",
"image": "https://techjr.s3.amazonaws.com/images/lee.jpg",
"jobTitle": "Software Engineer",
"name": "Lee Warrick",
"alumniOf": "University of Florida",
"birthPlace": "Homestead, FL",
"birthDate": "1987-04-13",
"gender": "male",
"nationality": "American",
"url": "https://www.leewarrick.com",
"sameAs" : [
"https://www.linkedin.com/in/lee-warrick/",
"https://leewarrick.com/blog",
"https://twitter.com/leewarrickjr",
"https://techjr.dev/"]
}
</script>
</head>
<body>
<!-- nav -->
<ul class="row sticky nav x-center">
<li><a href="#top">Top</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="https://techjr.dev">Podcast</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="#connect">Connect</a></li>
</ul>
<!-- main jumbotron with title -->
<header class="jumbotron" id="top">
<div class="row x-center">
<div class="column x-center y-center jumbo-text">
<h1 data-aos="fade-right" data-aos-delay=500>LEE <strong>WARRICK</strong></h1>
<h2 data-aos="fade-left" data-aos-delay=700>Software Engineer</h2>
<p data-aos="fade-up" data-aos-delay=1000><i>I write code, but also try to make writing code better for everyone.</i></p>
</div>
</div>
</header>
<!-- about section -->
<section class="white-box column hiei about-me" id="about">
<div class="row x-center divider"><h2 data-aos="flip-up">About</h2></div>
<div class="row x-center">
<!--
<div class="text-col" data-aos="slide-right">
<h3 class="row y-center x-center">
Meetup
<img src="assets/images/PClogo.png" alt="Project Codex Logo">
</h3>
<p>I founded the Orlando Junior Developers <a class="link" href="https://meetup.com/orlando-juniors">Meetup</a>, affectionately referred to as Project Code Experience, or "Project Codex" for short.</p>
<p>The meetup successfully provided tech talks and workshops for early-career developers in our community to improve their skills and network with other developers.</p>
<h3>Talks 📺</h3>
<p>I've given some talks at work and local meetups that are available to watch on the Project Codex YouTube Channel:</p>
<p>
<ul>
<li><a class="link" href="https://youtu.be/VOtUDGMa0KQ">Progressive Web Apps</a></li>
<li><a class="link" href="https://youtu.be/iVV5aka75Ks">Docker</a></li>
<li><a class="link" href="https://youtu.be/-W2hZadx8fE">Modern Web Development</a></li>
</ul>
</p>
</div>
<div class="text-col" data-aos="fade-up" data-aos-delay=100>
<h3 class="row y-center x-center">
Podcast
<img src="assets/images/techJR-v.png" alt="Tech Jr Logo">
</h3>
<p>I co-host the <a class="link" href="https://techjr.dev">Tech Jr Podcast</a>, designed to inform and support early-career developers with career and technical advice.</p>
<h3 class="row y-center x-center">
Blog
<img src="assets/images/logo2.png" alt="Strings and Things Logo">
</h3>
<p>I write the <a class="link" href="https://leewarrick.com/blog">Strings and Things</a> blog, where I provide technical articles to educate developers and also condense and record my own life lessons and experiences as a developer.</p>
</div>
-->
<div class="text-col" data-aos="slide-right">
<h3 class="row y-center x-center">
Experience 🥇
</h3>
<p>Since 2018, I've been a software engineer and educator with a focus in web development. I have production-level experience across the stack having started in front-end development, transitioning into backend development, and eventually picking up some DevOps experience as well.</p>
<p>As an instructor, I taught full stack web development bootcamps for over 5 years before earning the priviledge of redesigning the web development courses for UF's online Web Design Master's program where I currently teach as an adjunct professor.</p>
</div>
<div class="text-col skills" data-aos="fade-left" data-aos-delay=200>
<h3>Technical Skills 🧠</h3>
<ul>
<li><strong>Go / Golang</strong>,</li>
<li><strong>JavaScript / TypeScript</strong>,</li>
<li><strong>Node</strong>,</li>
<li><strong>GraphQL and REST APIs</strong>,</li>
<li><strong>Docker</strong>,</li>
<li><strong>AWS</strong>,</li>
<li><strong>Terraform</strong>,</li>
<li><strong>PostgreSQL</strong>,</li>
<li><strong>MySQL</strong>,</li>
<li><strong>MongoDB</strong>,</li>
<li><strong>React</strong>,</li>
<li><strong>NextJS</strong>,</li>
<li><strong>Semantic HTML</strong>, and</li>
<li><strong>Modern CSS Layouts</strong>.</li>
</ul>
<p>Why don't you check out some of my work below?</p>
</div>
</div>
</section>
<!-- projects/works -->
<div class="row x-center divider" id="projects"><h2>Projects</h2></div>
<section class="blue-box column x-center y-center">
<a href="https://booker-auth.vercel.app" target="_BLANK">
<h2 data-aos="fade-down">Booker</h2>
</a>
<div class="row x-center y-center">
<div class="work-img-container column x-center y-center">
<a href="https://booker-auth.vercel.app" target="_BLANK">
<img data-aos="flip-right" src="./assets/images/booker-phone.png">
</a>
<a href="https://booker-auth.vercel.app" target="_BLANK">
<img data-aos="flip-down" src="./assets/images/booker-desktop.png">
</a>
</div>
<div class="text-col" data-aos="fade-up-left">
<h3>Full-Stack Book Tracker</h3>
<p>Booker allows you to search for and favorite books using the Google Books API. It includes authentication and a Mongo database to allow for individual personalization for users.</p>
<p>I built this app as an example for one of my web development courses, so I don't have a public repository to share, unfortunately. I <em>can</em> tell you that the app does not use any CSS libraries or React libraries other than NextJS, so all the animations and styling are 100% me!</p>
</div>
</div>
<div class="row icons x-center y-center">
<i class="devicon-react-plain-wordmark"></i>
<i class="devicon-nextjs-plain-wordmark"></i>
<i class="devicon-mongodb-plain-wordmark"></i>
</div>
</section>
<section class="white-box column x-center y-center" id="podcast">
<a href="https://techjr.dev" target="_BLANK">
<h2 data-aos="fade-down">Tech Jr Podcast</h2>
</a>
<div class="row x-center y-center">
<div class="text-col" data-aos="fade-up-right">
<h3>Podcast for Junior Developers</h3>
<p>
Being a Junior Developer is tough. There's impostor syndrome, code reviews, and technology changing faster than you can learn it. And that's if you can even get a job in the first place. Wouldn't it be great if somebody tackled those issues head-on?
</p>
<p>
Eddie Otero and I did! We made the Tech Jr Podcast to help all Junior Developers. Eddie designed the site, and I built it! Our audio files are hosted on AWS S3, the site runs on <a class="link" href="https://gridsome.org">Gridsome</a> (a static-site-generator for Vue), and our RSS is generated at build time by Node.
<br>
Check out the Repo here:
<a href="https://github.com/mynar7/techjr" target="_BLANK">
<i class="devicon-github-plain"></i>
</a>
</p>
</div>
<div class="work-img-container column x-center y-center">
<a href="https://techjr.dev" target="_BLANK">
<img data-aos="flip-right" src="./assets/images/techjrpc.png">
</a>
<a href="https://techjr.dev" target="_BLANK">
<img data-aos="flip-down" src="./assets/images/techjrphone.png">
</a>
</div>
</div>
<div class="row icons x-center y-center">
<i class="devicon-vuejs-plain-wordmark colored"></i>
<img src="/assets/images/gridsome.svg" alt="gridsome">
<i class="devicon-amazonwebservices-plain-wordmark colored"></i>
<i class="devicon-nodejs-plain-wordmark colored"></i>
</div>
</section>
<section class="blue-box column x-center y-center">
<a href="/goaler" target="_BLANK">
<h2 data-aos="fade-down">Goaler</h2>
</a>
<div class="row x-center y-center">
<div class="work-img-container column x-center y-center">
<a href="/goaler" target="_BLANK">
<img data-aos="flip-right" src="./assets/images/goalerphone.png">
</a>
<a href="/goaler" target="_BLANK">
<img data-aos="flip-down" src="./assets/images/goalerpc.png">
</a>
</div>
<div class="text-col" data-aos="fade-up-left">
<h3>Goal Tracking App</h3>
<p>
<i>Goaler</i> is a progressive web app that lets you keep track of all your goals. It allows you to add deadlines, group goals under parent goals, and helps sort your list based on the amount of time left (or past due).
</p>
<p>
This is one of my first big React projects before hooks were introduced. One day I'll migrate those class components to functional components... maybe.
</p>
<br>
Check out the Repo here:
<a href="https://github.com/mynar7/goaler" target="_BLANK">
<i class="devicon-github-plain"></i>
</a>
</p>
</div>
</div>
<div class="row icons x-center y-center">
<i class="devicon-react-plain-wordmark"></i>
<img src="/assets/images/firebase_white.svg" alt="firebase">
<img src="/assets/images/pwa_logo_white.svg" alt="pwa">
</div>
</section>
<!-- This was my first major project, but the FDA killed its medication interactions API
<section class="blue-box column x-center y-center">
<a href="https://my-med-list.herokuapp.com" target="_BLANK">
<h2 data-aos="fade-down">My Meds</h2>
</a>
<div class="row x-center y-center">
<div class="work-img-container column x-center y-center">
<a href="https://my-med-list.herokuapp.com" target="_BLANK">
<img data-aos="flip-right" src="./assets/images/medlistpc.jpg">
</a>
<a href="https://my-med-list.herokuapp.com" target="_BLANK">
<img data-aos="flip-down" src="./assets/images/medlistphone.png">
</a>
</div>
<div class="text-col">
<h3 data-aos="flip-left">Medication Manager and Interaction Finder</h3>
<p data-aos="fade-up-left">
When I worked in the medical field, I often had to transfer a patient's medication list into a charting system.
The challenge I often faced was that patients honestly couldn't remember
what medications they took. Some had more than twenty different medications.
Most folks just had a plastic grocery bag of pill bottles for me to sift through.
</p>
<p data-aos="fade-up-left">
This inspired me to make <i>My Meds</i>. This app lets you create a cloud-based medication list for you to access on
your smartphone or computer. From there you can schedule what time you take each medication, get label information like warnings,
indications, etc. As well as check if there are any dangerous interactions between the medications you take.
<br>
Check out the Repo here:
<a href="https://github.com/mynar7/medlist" target="_BLANK">
<i class="devicon-github-plain"></i>
</a>
</p>
</div>
</div>
<div class="row icons x-center y-center">
<i class="devicon-react-plain-wordmark"></i>
<i class="devicon-nodejs-plain-wordmark"></i>
<i class="devicon-express-original-wordmark"></i>
<i class="devicon-sequelize-plain-wordmark"></i>
<i class="devicon-mysql-plain-wordmark"></i>
</div>
</section>
-->
<section class="white-box column x-center y-center" id="work">
<a href="/blog" target="_BLANK">
<h2 data-aos="fade-up">Strings and Things</h2>
</a>
<div class="row x-center y-center">
<div class="work-img-container column x-center y-center">
<a href="/blog" target="_BLANK">
<img data-aos="flip-left" src="./assets/images/blog-desktop.png">
</a>
<a href="/blog" target="_BLANK">
<img data-aos="flip-up" src="./assets/images/blog-phone.png">
</a>
</div>
<div class="text-col" data-aos="fade-up-left">
<h3>Coding Blog</h3>
<p>
Learning to code is tough; lots of tutorials and guides assume you have a certain level of knowledge as a reader. If you're early in your coding journey, it can be tough to find accessible content to help you learn.
</p>
<p>
That lead me to start a blog. However, I wanted to do more than write about code, I wanted to <em>show</em> code. So I built live, executable, editable code snippets into the blog using Gatsby, React, and MDX. This allows readers to experiment with my examples and really grapple with the concepts I attempt to explain.
<br>
Check out the Repo here:
<a href="https://github.com/mynar7/blog" target="_BLANK">
<i class="devicon-github-plain"></i>
</a>
</p>
</div>
</div>
<div class="row icons x-center y-center">
<i class="devicon-react-original-wordmark colored"></i>
<img src="/assets/images/Gatsby-Logo.svg" alt="gatsby">
<img src="/assets/images/pwa_logo.svg" alt="pwa">
</div>
</section>
<section class="blue-box column x-center y-center" id="work">
<a href="/babelfish" target="_BLANK">
<h2 data-aos="fade-down">Babelfish</h2>
</a>
<div class="row x-center y-center">
<div class="text-col" data-aos="fade-up-right">
<h3>Translation App</h3>
<p>
I'm a bit of a language nerd. I have a degree in Japanese language, and I have never given up on trying to master Japanese.
</p>
<p>
I made Babelfish as an experiment in what web tech can do for language learning. Using experimental Chrome APIs, (and the chrome translation extension web API), I was able to make an app that can translate spoken word into another language, and then speak it back to you! The supported languages and microphone/audio functionality are supported best on chrome, but you can still use it as a quick translation app using the text input field at the bottom.
<br>
Check out the Repo here:
<a href="https://github.com/mynar7/babelfish" target="_BLANK">
<i class="devicon-github-plain"></i>
</a>
</p>
</div>
<div class="work-img-container column x-center y-center">
<a href="/babelfish" target="_BLANK">
<img data-aos="flip-right" src="./assets/images/babelfishphone.png">
</a>
<a href="/babelfish" target="_BLANK">
<img data-aos="flip-down" src="./assets/images/babelfishpc.png">
</a>
</div>
</div>
<div class="row icons x-center y-center">
<i class="devicon-react-original-wordmark"></i>
<i class="devicon-chrome-plain-wordmark"></i>
<img src="/assets/images/Gatsby_Logo_White.svg" alt="gatsby">
<img src="/assets/images/pwa_logo_white.svg" alt="pwa">
</div>
</section>
<!-- connect with me -->
<section class="white-box column connect">
<div class="row x-center divider" id="connect"><h2>Connect</h2></div>
<div class="row split">
<div data-aos="zoom-in-down" class="text-col">
<h3 data-aos="zoom-in-right">Follow</h3>
<!--
<p>Subscribe to my <strong><a href="https://tinyletter.com/leewarrick">Newsletter</a></strong> to get updates on:</p>
-->
<p>Blog: <a href="/blog">Strings and Things</a></p>
<p>
Tech Jr Podcast: <a href="https://techjr.dev">Site</a> /
<a href="https://twitter.com/techjrpodcast">Twitter</a>
</p>
<!--
<p>
Project Codex Meetup:
<a href="https://meetup.com/project-code-experience">Site</a> /
<a href="https://www.youtube.com/channel/UCLcLZk5Ki69EcwlLzDYbnXQ">YouTube</a>
</p>
-->
</div>
<div data-aos="zoom-out-up" class="text-col">
<h3 data-aos="zoom-in-left">Contact</h3>
<p>You can get in touch with me through:</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>
Social:
<!-- <a href="https://twitter.com/leewarrickjr">Twitter</a> / -->
<a href="https://github.com/mynar7">Github</a> /
<a href="https://linkedin.com/in/lee-warrick">LinkedIn</a>
</p>
<p>You can check out my resume
<strong>
<a href="https://docs.google.com/document/d/1NmpfYmOK3QFLTweWKhGfJye295X_uDPcLUaoKSTSj8o">
HERE
</a>
</strong>
</p>
</div>
</div>
</section>
<!-- footer -->
<footer class="row split y-center">
<p class="text-col"></p>
<p>© Lee Warrick <span><script>document.write(new Date().getFullYear())</script></span>. All Rights Reserved.</p>
</footer>
<script src="./assets/aos/aos.js"></script>
<script>
AOS.init({
duration: 1000
});
</script>
</body>
</html>