-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
483 lines (454 loc) · 22.5 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
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
<!DOCTYPE HTML>
<!--
Find the secret? Almost....this is a hint:
What paces back and forth on the OCEAN FLOOR?
A: "a nervous WRECK"
Once you find the secret, you'll receive a passcode - enter it in the form on the contact page to receive a prize!
-->
<html>
<head>
<title>illa island v1.5</title>
<meta charset="utf-8" />
<link rel="icon" href="./assets/icons/favicon-32x32.png">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
</head>
<body class="is-preload">
<!-- Wrapper-->
<div id="wrapper">
<!-- Nav -->
<nav id="nav">
<!-- about tab -->
<a href="#"><img class="icon" src="./assets/icons/wave.png" alt="home tab"><span>About</span></a>
<!-- work tab -->
<a href="#work" class="icon"><img class="icon" src="./assets/icons/projects2.gif" alt="tech tab"><span>Projects</span></a>
<!-- skills tab -->
<a href="#skills" class="icon"><img class="icon" src="./assets/icons/skills2.gif" alt="skills tab"><span>Skills</span></a>
<!-- resume tab -->
<a href="./assets/resume.pdf#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0" target="_blank" class="icon" _blank><img class="icon" src="./assets/icons/resume2.gif" alt="Resume PDF"><span>Resume</span></a>
<!-- art tab -->
<a href="#art" class="icon"><img class="icon" src="./assets/icons/art.png" alt="art tab"><span>Art</span></a>
<!-- contact tab -->
<a href="#contact" class="icon"><img class="icon" src="./assets/icons/contact.png" alt="contact tab"><span>Contact</span></a>
<!-- github tab -->
<a href="https://github.com/lpercivalDEV/" target="_blank" class="icon"><img class="icon" src="./assets/icons/git2.gif" alt="Github link"><span>Github</span></a>
</nav>
<!-- Main -->
<div id="main">
<!-- About -->
<article id="home" class="panel intro">
<header>
<h1>Bienvenidos a illa island</h1>
<p>art, music, ideas, tech - the new wave is coming</p>
</header>
<section id="introLogo">
<img class="pic" src="./assets/illa-logos/onda_wave_vibrant.png" alt="illa island wave logo" />
</section>
</article>
<!-- Work -->
<article id="work" class="panel">
<header>
<h1>Projects</h1>
</header>
<p>From enterprise level projects to small biz clients - I'm finding and creating niche solutions and tinkering with new technologies to create with and have fun.
</p>
<section>
<div id="projects" class="row">
<div class="col-4 col-6-medium col-12-small">
<h2>HacktoberFest 2019</h2>
<a href="https://github.com/digitalocean/hacktoberfest" target="_blank" class="image fit hf19"><img id="biggie_smalls" src="./assets/proyectos/logo-hf19-full.svg" alt="HacktoberFest 2019 Repo"></a>
<span>
<ul>
<li>310k+ Visitors</li>
<li>120k+ Registrations</li>
<li>650+ Global Events</li>
<li>450k+ Opened PRs</li>
<li>60k+ Challenge Winners</li>
</ul>
</span>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>DomEstate Capital</h2>
<a href="https://www.domestatecapital.com/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/dom.jpg" alt="DomEstate Capital"></a>
<p>Real Estate Investment Firm focused on multifamily properties- Tres Studios Client</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Mei Mei's</h2>
<a href="https://www.meimeiboston.com/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/meimei.png" alt="Mei Mei's"></a>
<p>Local family owned, 2nd gen restaurant here in Boston adapting to thrive during the pandemic - Tres Studios Client</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Liability Road Map</h2>
<a href="https://liabilityroadmap.org/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/LRM.png" alt="Liability Road Map"></a>
<p>Global Climate Action Coalition of 14 different organizations educating and influencing policy makers - Tres Studios Client</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Tres Studios</h2>
<a href="https://tresstudios.dev" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/tres_logo.png" alt="Tres Studios"></a>
<p>Tres Studios is a 2 person team dedicated to designing and developing unique solutions for small businesses</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>illa island 1.0</h2>
<a href="https://github.com/lpercivalDEV/old_illaisland" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/jellyfish.png" alt="Old Illa Island Site"></a>
<p>The OG illa island - 1.0 version built from scratch on a 5hr bus ride from new york to boston</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Bodega</h2>
<a href="https://github.com/lpercivalDEV/Bodega" class="image fit" target="_blank" ><img id="biggie_smalls" class="bigPun" src="./assets/icons/bodega2.gif" alt="Bodega App"></a>
<p>A full stack CRUD e-commerce app built with React, MongoDB, and ExpressJS</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Raise 404</h2>
<a href="https://codepen.io/lpercivalDEV/full/GRKEZpm" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/404.png" alt="Raise 404 Page"></a>
<p>A 404 page built using Canvas for the old Raise.dev site. No longer live but I have a demo that is still available to play with.</p>
</div
><div class="col-4 col-6-medium col-12-small">
<h2>Pixabay Image Gallery</h2>
<a href="https://github.com/lpercivalDEV/pixabay-image-gallery" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/pixabay.png" alt="Pixabay Gallery"></a>
<p>An app that uses React, TailwindCSS, and the Pixabay API to generate a searchable image gallery</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>BG Color Picker</h2>
<a href="https://lpercivaldev.github.io/color-selector/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/color.png" alt="BG Color Picker"></a>
<p>An experiment for another app I planned on building out where I would need to select colors from a palette and apply them to the background.</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Poke Tilt</h2>
<a href="https://lpercivaldev.github.io/poke-tilt/" class="image fit" target="_blank" ><img id="biggie_smalls" class="bigPun" src="./assets/proyectos/pokeball.png" alt="Poke Tilt"></a>
<p>Just having fun playing around with Tilt JS and pokemon. Click to see which pokemon you get! GOTTA TILT THEM ALL! POKEMON!</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Three JS Demo</h2>
<a href="https://gdbkk.csb.app/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/3d.png" alt="Three JS Demo"></a>
<p>A simple app with movable 3D objects. I built this while learning how to use ThreeJS in React. Click/drag to play with the shapes.</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Code Cafe</h2>
<a href="https://github.com/lpercivalDEV/code-cafe" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/codecafe.png" alt="Code Cafe"></a>
<p>A full stack point of sale system that allows cafe employees to submit and complete orders.</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Trankila 1.0</h2>
<a href="https://github.com/lpercivalDEV/trankila" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/trankila.png" alt="Trankila Meditation App"></a>
<p>Trankila is a simple meditation app with a visual timer, timer selections, and background videos. This is version 1.0. Version 2.0 is in the works.</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Tic-Tac-Toe with AI</h2>
<a href="https://github.com/lpercivalDEV/AI-Tic-Tac-Toe" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/proyectos/ai.png" alt="Tic-Tac-Toe with AI"></a>
<p>A tic-tac-toe game with an unbeatable AI using the minimax algorithm. The best you can do is tie the AI.</p>
</div>
<!-- END OF PROJECTS -->
</div>
<h1 class="workTitle">Creds</h1>
<div class="row">
<div class="col-4 col-6-medium col-12-small">
<h2>RC Alumna</h2>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>ETH Boston</h2>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>MIT Hack 4 Inclusion</h2>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Harvard REU x 2</h2>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>KHF Art Collective</h2>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Countries Visited</h2>
<h4>8</h4>
</div>
<!-- END OF CREDS -->
</div>
<h1 class="workTitle">SQUAD</h1>
<p class="panas">Mis panas!!! We are great because we stand on the shoulders of giants and get a little help from our friends. </p>
<div class="row squad">
<div class="col-4 col-6-medium col-12-small">
<h2>Resilient Coders</h2>
<a href="https://www.resilientcoders.org/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/squad/rc.png" alt="#"></a>
<p>Training people of color for high growth careers as software engineers, and connecting them with jobs</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>100Devs</h2>
<a href="https://leonnoel.com/100devs/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/squad/100devs.png" alt="#"></a>
<p>Free full stack coding bootcamp where I mentor for those laid off or affected by the pandemic.</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Lavell Wesley</h2>
<a href="https://www.lavellwesley.com/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/squad/kza.png" alt="#"></a>
<p>My partner in crime and design at Tres Studios and a fellow RC grad.</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>KHF</h2>
<a href="https://www.instagram.com/khfworldwide/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/squad/khf-logo.png" alt="#"></a>
<p>A collective of artists, rebels, skaters, and tinkerers just having fun</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>ABAD</h2>
<a href="https://www.instagram.com/abad.la/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/squad/abad.png" alt="#"></a>
<p>Dope custom hand crafted jewelry.</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Not 4 Everyone</h2>
<a href="#" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/squad/not4everyone.jpg" alt="#"></a>
<p>Launching soon</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Birdcatchr</h2>
<a href="https://soundcloud.com/birdcatchr" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/squad/birdcatchr.jpg" alt="#"></a>
<p>Dope music. Nuff said.</p>
</div>
<!-- <div class="col-4 col-6-medium col-12-small">
<h2>Who's Who</h2>
<a href="https://www.instagram.com/whos____who/" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/squad/" alt="#"></a>
<p>1 line description</p>
</div>
<div class="col-4 col-6-medium col-12-small">
<h2>Jerelin</h2>
<a href="#" class="image fit" target="_blank" ><img id="biggie_smalls" src="./assets/squad/" alt="#"></a>
<p>1 line description</p>
</div> -->
</div>
</section>
</article>
<!-- Skills -->
<article id="skills" class="panel">
<header>
<h1>Stats</h1>
</header>
<p>
Full Stack Web Dev with 4+ years of experience.
</p>
<section id="gridBox">
<h2 class="skillTitle">Main Tech</h2>
<div class="row">
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit"> <h4 id="disableBlur">HTML</h4>
<img src="./assets/skills/html.png" alt="">
</span>
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span href="#" class="image fit">
<h4>CSS</h4>
<img src="./assets/skills/css.png" alt=""></span>
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span href="#" class="image fit">
<h4>JavaScript</h4>
<img src="./assets/skills/js.png" alt=""></span>
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>NodeJS</h4>
<img src="./assets/skills/nodejs.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>ExpressJS</h4>
<img src="./assets/skills/express.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>MongoDB</h4>
<img src="./assets/skills/mongodb.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>React</h4>
<img src="./assets/skills/react.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>npm</h4>
<img src="./assets/skills/npm.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>git</h4>
<img src="./assets/skills/git.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>JSON</h4>
<img src="./assets/skills/json.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>Postman</h4>
<img src="./assets/skills/postman.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>APIs</h4>
<img src="./assets/skills/apis.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>Authentication</h4>
<img src="./assets/skills/auth.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>CMS</h4>
<img src="./assets/skills/cms.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>Wordpress</h4>
<img src="./assets/skills/wordpress.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>SquareSpace</h4>
<img src="./assets/skills/squarespace.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>TailwindCSS</h4>
<img id="tailwind" src="./assets/skills/tailwindcss.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit" >
<h4>Bulma</h4>
<img id="bulma" src="./assets/skills/bulma.png" alt="">
</span >
</div>
<!-- END OF MAIN TECH -->
</div>
<h2 class="skillTitle">People Skills</h2>
<div class="row">
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>Client Sourcing</h4>
<img src="./assets/skills/clientSourcing.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>Client Success</h4>
<img src="./assets/skills/clientServices.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>Iterative Design</h4>
<img src="./assets/skills/iterative_design_dev.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>UI/UX</h4>
<img src="./assets/skills/UI-UX.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>Mentoring</h4>
<img src="./assets/skills/mentoring.png" alt=""></span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit">
<h4>Always Learning and Improving</h4>
<img src="./assets/skills/alwaysLearning.png" alt=""></span >
</div>
<!-- END OF PEEPS SKILLS -->
</div>
<h2 class="skillTitle">Additional Tech</h2>
<div class="row">
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit" href="#" >
<h4>SASS</h4>
<img src="./assets/skills/sass.png" alt="">
</span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit" href="#" >
<h4>GatsbyJS</h4>
<img src="./assets/skills/gatsby.png" alt="">
</span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit" href="#" >
<h4>Docker</h4>
<img src="./assets/skills/docker.png" alt="">
</span >
</div>
<div class="skillBox col-4 col-6-medium col-12-small">
<span class="image fit" href="#" >
<h4>Jira</h4>
<img src="./assets/skills/jira.png" alt="">
</span >
</div>
<!-- END OF ADD'L TECH -->
<h2>As a life long learner, this list is not comprehensive and will continue to grow...</h2>
</div>
</section>
<div class="secret">
<h5>Answer this riddle to find the secret...and win a prize...</h5>
<p>What paces back and forth on the ocean floor?</p>
</div>
</article>
<!-- Art -->
<article id="art" class="panel">
<h1>Coming soon...</h1>
<iframe src="https://giphy.com/embed/Q8vZZ6kGS1VFm" width="480" height="341" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
</article>
<!-- Contact -->
<article id="contact" class="panel">
<header>
<h1>Dígame</h1>
</header>
<form action="#" method="post" data-netlify="true" name="positiveContact"
netlify-honeypot="bot-field" data-netlify-recaptcha="true">
<div>
<span class="hidden">
<label>
Don’t fill this out if you’re human: <input name="bot-field" />
</label>
</span>
<div class="row">
<div class="col-6 col-12-medium">
<input type="text" name="name" placeholder="Name" required="true" />
</div>
<div class="col-6 col-12-medium">
<input type="email" name="email" placeholder="Email" required="true" />
</div>
<div class="col-6 col-12-medium">
<input type="text" name="subject" placeholder="Subject" required="true" />
</div>
<div class="col-6 col-12-medium">
<input type="text" name="secret" placeholder="find the secret?" />
</div>
<div class="col-12">
<textarea name="message" placeholder="Message" rows="4" maxlength="250" required="true"></textarea>
<div data-netlify-recaptcha="true"></div>
<input type="submit" value="Submit" required="true"/>
</div>
</div>
</div>
</form>
</article>
</div>
<span>
<a id="onda" href="#contact">
<img src="./assets/icons/shipwreck.png" alt="shipwreck">
</a>
</span>
<section id="sorpresa">
<span id="exit">x</span>
<section id="sorpresaText">
<!-- ???????? -->
</section>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/wave1.js"></script>
<script src="assets/js/onda.js"></script>
</body>
</html>