-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
384 lines (364 loc) · 28.9 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jessica Feliciano | Software Engineer | Scalable Web Applications</title>
<meta name="Jessica Feliciano | Software Engineer | Scalable Web Applications"
content="A full stack Software Engineer building user-centered web applications.">
<meta name="author" content="Jessica Feliciano" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/ico" href="./assets/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
</head>
<body class="bg-white dark:bg-slate-800">
<!-- Navigation Bar Start -->
<div id="hero" class="bg-white dark:bg-slate-800">
<header class="absolute inset-x-0 top-0 z-50">
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1 items-center">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Jessica Feliciano</span>
<img class="h-8 w-auto rounded-full border-2 border-purple-600" src="./assets/jessica-full.png" alt="">
</a>
<p class="text-md pl-4 text-purple-600 font-semibold md:text-2xl">JESSICA FELICIANO</p>
</div>
<div class="flex lg:hidden">
<button id="open-menu-button" type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#hero" class="text-sm font-semibold leading-6 text-gray-900 hover:text-purple-600 dark:text-white">HOME</a>
<a href="#about" class="text-sm font-semibold leading-6 text-gray-900 hover:text-purple-600 dark:text-white">ABOUT</a>
<a href="#projects" class="text-sm font-semibold leading-6 text-gray-900 hover:text-purple-600 dark:text-white">PROJECTS</a>
<a href="#contact" class="text-sm font-semibold leading-6 text-gray-900 hover:text-purple-600 dark:text-white">CONTACT</a>
</div>
<div class="flex ml-4">
<button
id="theme-toggle"
type="button"
class="text-purple-600 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
>
<svg
id="theme-toggle-dark-icon"
class="w-5 h-5 hidden"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
></path>
</svg>
<svg
id="theme-toggle-light-icon"
class="w-5 h-5 hidden"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</nav>
<!-- Mobile menu, show/hide based on menu open state. -->
<div id="mobile-menu" class="hidden" role="dialog" aria-modal="true">
<!-- Background backdrop, show/hide based on slide-over state. -->
<div class="fixed inset-0 z-50"></div>
<div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:bg-slate-800 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Jessica Feliciano</span>
<img class="h-8 w-auto rounded-full" src="./assets/jessica-full.png" alt="">
</a>
<button id="close-menu-button" type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" aria-expanded="false">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<a href="#hero" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 dark:text-slate-400">HOME</a>
<a href="#about" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 dark:text-slate-400">ABOUT</a>
<a href="#projects" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 dark:text-slate-400">PROJECTS</a>
<a href="#contact" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 dark:text-slate-400">CONTACT</a>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<!-- Navigation Bar End -->
<!-- Hero Section Start -->
<div class="relative isolate px-6 pt-14 lg:px-8 dark:bg-slate-800">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div class="sm:mb-8 sm:flex sm:justify-center">
<div class="text-center">
<h1 class="text-6xl font-bold tracking-tight text-gray-900 dark:text-white">Hi, I'm Jessica.</h1>
<p class="mt-6 text-lg leading-8 text-gray-600 dark:text-slate-400">A full stack Software Engineer building user-centered web applications.</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#projects" class="rounded-md w-full md:w-auto bg-purple-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600">See My Projects</a>
</div>
</div>
</div>
<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
<div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
</div>
</div>
<!-- Hero Section End -->
<!-- About Section Start -->
<div id="about" class="bg-white dark:bg-slate-800 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-purple-600 sm:text-4xl">ABOUT ME</h2>
</div>
<div class="columns-2 flex flex-col">
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:max-w-4xl lg:gap-x-20 xl:max-w-none">
<li class="flex flex-col gap-6 xl:flex-row items-center">
<img class="aspect-[4/5] w-52 flex-none rounded-2xl object-cover" src="./assets/jessica-full.png" alt="">
<div class="flex-auto">
<h3 class="text-2xl font-semibold leading-8 tracking-tight text-gray-900 dark:text-white xl:text-left text-center">Jessica Feliciano</h3>
<p class="text-base leading-7 text-gray-600 dark:text-white xl:text-left text-center">Software Engineer</p>
<p class="mt-6 text-base leading-7 text-gray-600 dark:text-slate-400">I'm a Full Stack Software Engineer building user-centered web applications. Checkout some of my work in the Projects section.</p>
<p class="mt-6 text-base leading-7 text-gray-600 dark:text-slate-400">Feel free to Connect on <a href="">LinkedIn</a>.</p>
<p class="mt-6 text-base leading-7 text-gray-600 dark:text-slate-400 mb-4">I'm open to Job opportunities where I can contribute, learn and grow. If you have a good opportunity that matches my skills and experience then don't hesitate to contact me.</p>
<a href="#contact">
<button class="rounded-md w-full md:w-auto bg-purple-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600">Send Message</button>
</a>
</div>
</li>
<li class="flex flex-col gap-6 xl:flex-row">
<div class="flex-auto">
<p class="text-2xl text-left font-semibold dark:text-white text-center">My Skills</p>
<div class="flex flex-wrap">
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">JavaScript</span>
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">React</span>
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">C#</span>
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">NodeJS</span>
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">API Management</span>
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">Microservices</span>
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">Systems Design</span>
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">MongoDB</span>
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">PostgreSQL</span>
<span class="inline-flex items-center rounded-md bg-gray-100 mt-4 mr-4 px-2 py-1 text-xl font-medium text-gray-600 dark:bg-slate-400 dark:text-black">Test Automation</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- About Section End -->
<!-- Projects Section Start -->
<div id="projects" class="bg-gray-100 dark:bg-slate-800 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-7xl sm:text-center">
<h2 class="text-3xl font-bold tracking-tight text-purple-600 sm:text-4xl text-center">PROJECTS</h2>
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
<div class="grid grid-cols-1 gap-y-4 sm:grid-cols-3 sm:gap-x-6 sm:gap-y-10 lg:gap-x-8">
<!-- Project #1 Start -->
<div class="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white dark:bg-slate-400">
<div class="aspect-h-3 aspect-w-4 sm:aspect-none group-hover:opacity-75">
<img src="./assets/video-fetch-logo.png" alt="Video Fetch Logo" class="h-full w-full object-cover object-center sm:h-full sm:w-full">
</div>
<div class="flex flex-1 flex-col space-y-2 p-4">
<h3 class="text-xl font-medium text-gray-900">
<span aria-hidden="true" class="absolute inset-0"></span>
Video Fetch
</h3>
<p class="text-sm text-gray-500 dark:text-black">A simple Python script that allows users to download YouTube videos locally at the highest solution available.</p>
<div class="flex flex-1 flex-col">
<p class="text-sm italic text-gray-500 font-medium dark:text-black">Skills: Python, Scripting</p>
</div>
<a
href="https://github.com/jessfeliciano/Video-Fetch"
class="rounded-md w-full md:w-auto bg-purple-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
target="_blank"
>
<span aria-hidden="true" class="absolute inset-0"></span>
View Project
</a>
</div>
</div>
<!-- Project #1 End -->
<!-- Project #2 Start -->
<div class="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white dark:bg-slate-400">
<div class="aspect-h-3 aspect-w-4 sm:aspect-none group-hover:opacity-75">
<img src="./assets/smart-prep-logo.png" alt="Smart Prep Logo" class="h-full w-full object-cover object-center sm:h-full sm:w-full">
</div>
<div class="flex flex-1 flex-col space-y-2 p-4">
<h3 class="text-xl font-medium text-gray-900">
<span aria-hidden="true" class="absolute inset-0"></span>
SmartPrep
</h3>
<p class="text-sm text-gray-500 dark:text-black">A web app that allows users to select recipes they would like to include in their meal prep and the app will generate a grocery list with all of the ingredients they need based on their recipe selections.</p>
<div class="flex flex-1 flex-col">
<p class="text-sm italic text-gray-500 font-medium dark:text-black">Skills: React, TypeScript, GraphQL, Tailwind CSS</p>
</div>
<a
href="https://github.com/jessfeliciano/SmartPrep"
class="rounded-md w-full md:w-auto bg-purple-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
target="_blank"
>
<span aria-hidden="true" class="absolute inset-0"></span>
View Project
</a>
</div>
</div>
<!-- Project #2 Start -->
<!-- Project #3 Start -->
<div class="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white dark:bg-slate-400">
<div class="aspect-h-3 aspect-w-4 sm:aspect-none group-hover:opacity-75">
<img src="./assets/intervals-logo.png" alt="Running Intervals Logo" class="h-full w-full object-cover object-center sm:h-full sm:w-full">
</div>
<div class="flex flex-1 flex-col space-y-2 p-4">
<h3 class="text-xl font-medium text-gray-900">
<span aria-hidden="true" class="absolute inset-0"></span>
Running Intervals
</h3>
<p class="text-sm text-gray-500 dark:text-black">(alpha version) Running Intervals is a mobile first React app for runners to use on the go. Intervals are 60 seconds long and you will alternate between running and walking. Run for as long as you can and when you're done, you'll be given the amount of time you spent running vs. walking.
</p>
<div class="flex flex-1 flex-col">
<p class="text-sm italic text-gray-500 font-medium dark:text-black">Skills: Typescript, React, Tailwind CSS</p>
</div>
<a
href="https://github.com/jessfeliciano/running-intervals"
class="rounded-md w-full md:w-auto bg-purple-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
target="_blank"
>
<span aria-hidden="true" class="absolute inset-0"></span>
View Project
</a>
</div>
</div>
<!-- Project #3 End -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Projects Section End -->
<!-- Contact Section Start -->
<div id="contact" class="bg-white dark:bg-slate-800 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl sm:text-center">
<h2 class="text-3xl font-bold tracking-tight text-purple-600 sm:text-4xl text-center">CONTACT ME</h2>
<form id="contactForm">
<div class="border-2 rounded-md bg-gray-100 dark:bg-slate-400 p-8 mt-5 mb-10">
<p class="mt-1 text-sm leading-6 text-gray-600">Are you looking to collaborate? Hiring an engineer for your project? Or just wanting connect? Send me a message!</p>
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="col-span-full">
<label for="first-name" class="block text-sm font-medium leading-6 text-left text-gray-900">First name</label>
<div class="mt-2">
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md border-0 py-1.5 pl-2 text-gray-900 dark:bg-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-purple-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="col-span-full">
<label for="last-name" class="block text-sm font-medium leading-6 text-left text-gray-900">Last name</label>
<div class="mt-2">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md border-0 py-1.5 pl-2 text-gray-900 dark:bg-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-purple-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="col-span-full">
<label for="email" class="block text-sm font-medium leading-6 text-left text-gray-900">Email address</label>
<div class="mt-2">
<input id="email" name="email" type="email" autocomplete="email" class="block w-full rounded-md border-0 py-1.5 pl-2 text-gray-900 dark:bg-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-purple-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="col-span-full">
<div class="mt-2">
<label for="message" class="block text-sm font-medium leading-6 text-left text-gray-900">Message</label>
<textarea id="message" name="message" rows="5" class="block w-full rounded-md border-0 py-1.5 pl-2 text-gray-900 dark:bg-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-purple-600 sm:text-sm sm:leading-6"></textarea>
</div>
<p class="mt-3 text-sm leading-6 text-gray-600">Write a few sentences about yourself and your project.</p>
</div>
<div class="mt-6 col-span-full flex items-center justify-center">
<button type="submit" class="rounded-md bg-purple-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600 w-full md:w-auto">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Contact Section End -->
<!-- Footer Section Start -->
<footer class="bg-black" aria-labelledby="footer-heading">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8">
<p class="text-xl text-purple-600">Jessica Feliciano</p>
<p class="text-sm leading-6 text-gray-300">A full stack Software Engineer building scalable and reliable web applications.
</p>
<div class="flex space-x-6">
<a href="https://github.com/jessfeliciano" target="_blank" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="https://www.linkedin.com/in/jessicafeliciano/" target="_blank" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">LinkedIn</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
</svg>
</a>
</div>
</div>
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<a href="#hero">
<h3 class="text-sm font-semibold leading-6 text-gray-300 hover:text-purple-600">HOME</h3>
</a>
</div>
<div class="mt-10 md:mt-0">
<a href="#about">
<h3 class="text-sm font-semibold leading-6 text-gray-300 hover:text-purple-600">ABOUT</h3>
</a> </div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<a href="#projects">
<h3 class="text-sm font-semibold leading-6 text-gray-300 hover:text-purple-600">PROJECTS</h3>
</a> </div>
<div class="mt-10 md:mt-0">
<a href="#contact">
<h3 class="text-sm font-semibold leading-6 text-gray-300 hover:text-purple-600">CONTACT</h3>
</a> </div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24">
<p class="text-xs leading-5 text-gray-500">© 2023 Jessica Feliciano. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Footer Section End -->
<script src="./assets/script.js" defer></script>
</body>
</html>