-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
438 lines (435 loc) · 29.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Alex Page's Web Developer Portfolio">
<meta name="author" content="Alex Page">
<link rel="icon" href="./Images/logo.ico" />
<title>Alex Page - Web Developer</title>
<!--
111111111111111111
111111111111111111111111
111111111111111111111111111111
11111111111111111111111111111111
1111111 11111111 1111 1111 1111111
11 11111 11111111 1111 1111 11111 11
111 1111 11111111 1111 1111 1111 111
111 1111 11111111 1111 1111 1111 111
111 1110 11100000000000000001 11 111
11 1 0 110000000000000000000 11 11
1 11 0000000000000000000000000 11 1
1 1 00000000000000000000000011111
11 000000000000000000000000 111
11 000000000000000000000000 11
1 000000000000000000000000 1
000000000000000000000000000000000
0000000000000000000000000000000
0000000000000000000000000
0000000000000000000000000
0000000000000000000000000
00000000000000000000000
00000000 11 00000000
0000 110011 0000
11110111
111111
-->
<!--JQuery-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous">
</script>
<!-- TailwindCSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!--CSS file-->
<link rel="stylesheet" href="./styles.css">
<!--JavaScript file-->
<script src="./JS/script.js"></script>
</head>
<body class="mx-auto">
<header class="">
<section id="header_content" class="min-h-fit py-2 flex-auto md:flex row justify-around items-center mx-auto sm:justify-between">
<div id="md_header" class="flex row justify-between p-3">
<div id="name-container" class="ml-6 mr-auto">
<p id="name" class="flex justify-center items-center text-center">
Alex Page
</p>
</div>
<!-- Expands contact info when viewport is below 768px -->
<button id="sandwich_menu" class="block md:hidden mx-6">
<img id="menu_icn" src="./Images/sandwich-icon-thin.png" onclick="contact();" loading="lazy" alt="menu icon">
</button>
</div>
<!-- Contact section -->
<section id="contact-container" class="flex" name="contact_info">
<div id="contact" class="hidden flex-col mb-3 items-center w-fit md:flex md:mb-0 md:justify-end mx-auto">
<div id="contact_label_container" class="flex justify-center mx-auto mb-3 md:hidden">
<p id="contact_label" class="mb-1">Contact</p>
</div>
<!-- contact content -->
<div class="flex flex-row ml-auto mr-3 justify-center">
<!-- Email info -->
<div class="flex justify-end mx-3 md:mx-6">
<div id="email-container" class="flex justify-around items-center md:my-0 md:text-lg">
<button id="email" onclick="clipboard();" class="flex justify-between items-center static w-max">
<div id="cpy_border" class="mx-3"></div>
<img id="copy_icn" src="https://api.iconify.design/material-symbols:content-copy-rounded.svg?color=%23d8e4ec" class="w-4 md:w-5" loading="lazy" alt="copy"/>
</button>
<p id="alert" class="hidden justify-center absolute"></p>
</div>
</div>
<!-- Github & Linkedin links -->
<nav class="flex justify-end">
<div id="nav_content" class="mx-auto my-auto flex flex-row justify-between">
<div class="mx-3 md:my-3 md:mx-5">
<a href="https://github.com/ImmuneMoon" target="_blank" onclick="gitclick();" aria-label="Github">
<img id="github" src="https://api.iconify.design/octicon:mark-github-16.svg?color=%2300d4b5" class="w-7" loading="lazy" alt="Github"/>
</a>
</div>
<div class="mx-3 md:my-3 md:mx-5">
<a href="https://www.linkedin.com/in/p-alex-j/" target="_blank" onclick="inclick();" aria-label="Linkedin">
<img id="linkedin" src="https://api.iconify.design/akar-icons:linkedinv1-fill.svg?color=%2300d4b5" class="w-7" loading="lazy" alt="Linkedin" />
</a>
</div>
</div>
</nav>
</div>
</div>
</section>
</section>
</header>
<!-- page section scroll links -->
<nav id="pg_nav" class="z-10">
<div id="pg_nav_bkgrnd">
<div id="pg_nav_container" class="grid grid-cols-3 w-80">
<button id="contact_direct" class="py-2 w-auto col-start-1 col-end-2 text-center" onclick="contactNavClick();" aria-label="Contact">Contact</button>
<button id="about_direct" class="py-2 w-auto col-start-2 col-end-3 text-center" onclick="aboutNavClick();" aria-label="About">About</button>
<button id="project_direct" class="py-2 w-auto pr-2 col-start-3 col-end-4 text-center" onclick="projectNavClick();" aria-label="Projects">Projects</button>
</div>
</div>
</nav>
<main class="container mx-auto">
<!-- Resume and known languages -->
<section id="creds_section" class="my-auto">
<div id="creds_container" class="flex justify-center items-center content-center">
<div id="credentials">
<div class="flex justify-center">
<h1 id="intro">Web developer</h1>
</div>
<div class="flex justify-center my-3">
<ul id="skills" class="flex sm:grid sm:gap-6 mx-3 flex-wrap justify-center sm:grid-cols-12">
<li id="htmlang" data-tooltip="HTML">
<img class="lang" src="https://api.iconify.design/akar-icons:html-fill.svg?color=%23cccde0" loading="lazy" alt="HTML" />
</li>
<li id="css" data-tooltip="CSS">
<img class="lang" src="https://api.iconify.design/akar-icons:css-fill.svg?color=%23cccde0" loading="lazy" alt="CSS" />
</li>
<li id="bootstrap" data-tooltip="Bootstrap">
<img class="lang" src="https://api.iconify.design/akar-icons:bootstrap-fill.svg?color=%23cccde0" loading="lazy" alt="Bootstrap" />
</li>
<li id="tailwind" data-tooltip="Tailwind CSS">
<img class="lang" src="https://api.iconify.design/simple-icons:tailwindcss.svg?color=%23cccde0" loading="lazy" alt="TailwindCSS" />
</li>
<li id="javascript" data-tooltip="JavaScript">
<img class="lang" src="https://api.iconify.design/akar-icons:javascript-fill.svg?color=%23cccde0" loading="lazy" alt="JavaScript" />
</li>
<li id="jquery" data-tooltip="JQuery">
<img class="lang" src="https://api.iconify.design/akar-icons:jquery-fill.svg?color=%23cccde0" loading="lazy" alt="JQuery" />
</li>
<li id="react" data-tooltip="ReactJS">
<img class="lang" src="https://api.iconify.design/teenyicons:react-outline.svg?color=%23cccde0" loading="lazy" alt="React" />
</li>
<li id="python" data-tooltip="Python">
<img class="lang" src="https://api.iconify.design/akar-icons:python-fill.svg?color=%23cccde0" loading="lazy" alt="Python" />
</li>
<li id="django" data-tooltip="Django">
<img class="lang" src="https://api.iconify.design/bxl:django.svg?color=%23cccde0" loading="lazy" alt="Django" />
</li>
<li id="flask" data-tooltip="Flask">
<img class="lang" src="https://api.iconify.design/file-icons:flask.svg?color=%23cccde0" loading="lazy" alt="Flask" />
</li>
<li id="sql" data-tooltip="SQLite">
<img class="lang" src="https://api.iconify.design/simple-icons:sqlite.svg?color=%23cccde0" loading="lazy" alt="SQLite" />
</li>
<li id="c_lang" data-tooltip="C-Language">
<img class="lang" src="https://api.iconify.design/mdi:language-c.svg?color=%23cccde0" loading="lazy" alt="C-Lang" />
</li>
</ul>
</div>
<div class="flex justify-center my-7">
<a href="./docs/Alexander_Page_Resume.pdf" target="_blank" aria-label="Resume">
<button id="resume" class="text-lg font-semibold">
Résumé
</button>
</a>
</div>
</div>
</div>
</section>
<!-- About me section, including certificates -->
<section id="about_section" class="flex justify-center items-center m-auto">
<div id="about_container" class="grid grid-cols-1 2xl:grid-cols-2">
<div id="me_text_circle" class="col-span-1 relative z-0">
<div id="me_container" class="my-6 flex flex-col justify-center mx-auto p-6">
<h2 id="about_me" class="text-right absolute">
About Me
</h2>
<p id="me_text" class="text-left absolute">
I'm a Front End Web Developer striving to create efficient websites with an emphasis on good user experience.
I've always been passionate about tech and decided nearly two years ago to pursue a lifelong interest
in coding seriously, so I can be the one crafting technologies people love.
</p>
</div>
</div>
<div id="certs_container" class="flex justify-center col-span-2 mx-auto p-6">
<h2 id="certs_heading" class="text-center absolute z-0">
Certificates 🎓
</h2>
<div id="certs" class="flex flex-col justify-center">
<div id="hx" class="flex justify-start md:justify-end">
<div id="hx_container" class="flex flex-col p-10 mb-8 lg:flex-row">
<div class="flex flex-col">
<div>
<h3 id="hx_title" class="text-center mb-3 mx-auto pb-4 px-5 items-center">
HarvardX
</h3>
<h4 id="hx_desc" class="text-center my-3">
CS50x - Intro to Computer Sci <br>and The Art of Programming
</h4>
</div>
<p id="hx_text" class="text-center mx-auto flex justify-center items-center">
During CS50x, I developed skills in C, Python, SQLite, Flask, Bootstrap, JavaScript and web design. This certificate represents approx. 10 weeks of study; including 10 problem sets, 8 labs, and a final project.
</p>
</div>
<a class="ml-0 mt-7 lg:ml-10 flex justify-center" href="https://certificates.cs50.io/5d48894d-a24d-4232-9b11-6a2881d503d2.pdf?size=letter" target="_blank" aria-label="CS50x Certificate">
<img id="CS50x" class="max-w-xs" src="./docs/CS50x Certificate (9-25-22).png" loading="lazy" alt="CS50x cert" />
</a>
<div id="click_me_container" class="absolute z-0 flex">
<p id="click_me">Click Me!</p>
<img id="click_me_arrow" class="absolute" src="./Images/clickMe-arrow.png" loading="lazy" alt="Click me arrow" />
</div>
</div>
</div>
<div id="fcc" class="flex flex-col justify-end md:justify-start">
<div id="fcc_container" class="flex flex-col justify-center">
<h3 id="fcc_title" class="text-center mt-12 mx-auto py-2 px-5 items-center">
Freecodecamp
</h3>
<div class="flex flex-col justify-center p-10 lg:flex-row-reverse">
<div class="flex flex-col">
<div>
<h4 id="fcc_desc" class="text-center">
Responsive Web Design
</h4>
</div>
<p id="fcc_text" class="text-center items-center">
During Freecodecamp's responsive web design course, I developed skills in HTML, CSS and learned how to implement them in responsive, accessible websites. This certificate represents approx. 300hrs of coursework; including 5 final projects.
</p>
</div>
<a class="mr-0 mt-7 lg:mr-10 flex justify-center" href="https://www.freecodecamp.org/certification/immunemoon/responsive-web-design" target="_blank" aria-label="Freecodecamp Responsive Web Design Certificate">
<img id="rwd" class="max-w-xs" src="./docs/FreeCodeCamp Responsive Web Design Certificate (8-31-21).png" loading="lazy" alt="Freecodecamp cert" />
</a>
</div>
<div class="flex flex-col p-10 lg:flex-row">
<div class="flex flex-col">
<div>
<h4 id="fcc_desc" class="text-center">
JavaScript Algorithms and Data Structures
</h4>
</div>
<p id="fcc_text" class="text-center items-center">
During Freecodecamp's JavaScript algorithms and data structures course, I developed skills in JavaScript and it's uses in practical programming. This certificate represents approx. 300hrs of coursework; including 5 final projects.
</p>
</div>
<a class="mr-0 mt-7 lg:ml-10 flex justify-center" href="https://www.freecodecamp.org/certification/immunemoon/javascript-algorithms-and-data-structures" target="_blank" aria-label="Freecodecamp JavaScript Algorithms and Data Structures">
<img id="jad" class="max-w-xs" src="./docs/FreeCodeCamp JavaScript Algorithms and Data Structures (04-17-23).png" loading="lazy" alt="Freecodecamp cert" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects section -->
<section id="project_section">
<div id="projects_container">
<div id="proj_head_container">
<h2 id="projects_heading" class="flex justify-center">
Projects
</h2>
</div>
<div id="project_content" class="flex flex-wrap">
<!-- Space Tourism -->
<div id="space_tour_container" class="flex flex-col justify-end my-6 mx-auto relative">
<div id="space_tour_lang" class="grid grid-cols-1 gap-3 w-max m-5 p-2 absolute">
<img class="react" src="https://api.iconify.design/vscode-icons:file-type-reactjs.svg?color=%23cccde0" loading="lazy" alt="ReactJS" />
</div>
<!--
<div id="in_progress" class="flex flex-row justify-between items-center m-5 p-3 absolute">
<img id="construct" class="mr-3" src="https://api.iconify.design/material-symbols:build-circle.svg?color=%23ddde00" loading="lazy" alt="Wrench"/>
<p>
In Progress
</p>
</div>
-->
<h3 id="space_tour_title" class="flex justify-center mx-auto p-2">
Space Tourism Multi-page Website
</h3>
<div id="space_tour_info" class="flex justify-center items-center mx-auto p-3 py-7">
<p class="infotxt">
A multi page space tourism project for Frontendmentor.
</p>
<div class="flex flex-col justify-center">
<a class="mx-auto mb-2" href="https://github.com/ImmuneMoon/space-tourism-website" target="_blank" aria-label="Space tourism React site code">
<button id="space_tour_code">
Code
</button>
</a>
<a class="mx-auto mt-2" href="https://immunemoon.github.io/space-tourism-website/" target="_blank" aria-label="Space tourism React site demo">
<button id="space_tour_challenge">
Demo
</button>
</a>
</div>
</div>
</div>
<!-- URL Scraper -->
<div id="scrape_container" class="flex flex-col justify-end my-6 mx-auto relative">
<div id="scrape_lang" class="grid grid-cols-1 gap-3 w-max m-5 p-2 absolute">
<p class="cheerio">
CheerioJS
</p>
<img class="axios" src="https://api.iconify.design/simple-icons:axios.svg?color=%237000a6" loading="lazy" alt="Axios" />
</div>
<h3 id="scrape_title" class="flex justify-center mx-auto p-2">
Web Page URL Scraper
</h3>
<div id="scrape_info" class="flex justify-center items-center mx-auto p-3 py-7">
<p class="infotxt">
A web scraper that pulls URL's off a given website,
renders them as a list of links and produces a JSON object containing them.
</p>
<div class="flex flex-col justify-center">
<a class="mx-auto mb-2" href="https://github.com/ImmuneMoon/URL-web-scraper" target="_blank" aria-label="Intro section w/ dropdown code">
<button id="scrape_code">
Code
</button>
</a>
<a class="mx-auto mt-2" href="https://youtu.be/q44qvjjfCgM" target="_blank" aria-label="URL scraper video demo">
<button id="scrape_demo">
Video Demo
</button>
</a>
</div>
</div>
</div>
<!-- Intro Section with Dropdown Nav -->
<div id="isdn_container" class="flex flex-col justify-end my-6 mx-auto relative">
<div id="isdn_lang" class="grid grid-cols-1 gap-3 w-max m-5 p-2 absolute">
<img class="tailwind" src="https://api.iconify.design/simple-icons:tailwindcss.svg?color=%2346cefe" loading="lazy" alt="TailwindCSS" />
<img class="jquery" src="https://api.iconify.design/akar-icons:jquery-fill.svg?color=%231fbae8" loading="lazy" alt="JQuery" />
</div>
<h3 id="isdn_title" class="flex justify-center mx-auto p-2">
Intro Section w/ Nav
</h3>
<div id="isdn_info" class="flex justify-center items-center mx-auto p-3 py-7">
<p class="infotxt">
A Intro Section with Dropdown Navigation project for Frontendmentor.
</p>
<div class="flex flex-col justify-center">
<a class="mx-auto mb-2" href="https://github.com/ImmuneMoon/Intro-section-with-dropdown" target="_blank" aria-label="Intro section w/ dropdown code">
<button id="isdn_code">
Code
</button>
</a>
<a class="mx-auto mt-2" href="https://immunemoon.github.io/Intro-section-with-dropdown/" target="_blank" aria-label="Intro section w/ dropdown demo">
<button id="isdn_demo">
Demo
</button>
</a>
</div>
</div>
</div>
<!-- 10,000hr Calculator -->
<div id="ten_k_container" class="flex flex-col justify-end my-6 mx-auto relative">
<div id="ten_lang" class="grid grid-cols-1 gap-3 w-max m-5 p-2 absolute">
<img class="bootstrap" src="https://api.iconify.design/akar-icons:bootstrap-fill.svg?color=%239c3dff" loading="lazy" alt="Bootstrap" />
<img class="jquery" src="https://api.iconify.design/akar-icons:jquery-fill.svg?color=%231fbae8" loading="lazy" alt="JQuery" />
</div>
<h3 id="ten_k_title" class="flex justify-center mx-auto p-2">
The 10,000 Hour Calculator
</h3>
<div id="ten_k_info" class="flex justify-center items-center mx-auto p-3 py-7">
<p class="infotxt">
A calculator for determining how long you have left to reach 10,000 hours in a skill.
</p>
<div class="flex flex-col justify-center">
<a class="mx-auto mb-2" href="https://github.com/ImmuneMoon/10-000-Hour-Calculator" target="_blank" aria-label="10K Calculator code">
<button id="ten_k_code">
Code
</button>
</a>
<a class="mx-auto mt-2" href="https://immunemoon.github.io/10-000-Hour-Calculator/" target="_blank" aria-label="10K Calculator demo">
<button id="ten_k_demo">
Demo
</button>
</a>
</div>
</div>
</div>
<!-- Order Summary Card -->
<div id="order_card_container" class="flex flex-col justify-end my-6 mx-auto">
<h3 id="order_card_title" class="flex justify-center mx-auto p-2">
Order Summary Card
</h3>
<div id="order_card_info" class="flex justify-center items-center mx-auto p-3 py-7">
<p class="infotxt">
A Frontendmentor HTML/CSS order card project.
</p>
<div class="flex flex-col justify-center">
<a class="mx-auto mb-2" href="https://github.com/ImmuneMoon/Order-summary-card" target="_blank" aria-label="Order card code">
<button id="order_card_code">
Code
</button>
</a>
<a class="mx-auto mt-2" href="https://immunemoon.github.io/Order-summary-card/" target="_blank" aria-label="Order card demo">
<button id="order_card_demo">
Demo
</button>
</a>
</div>
</div>
</div>
<!-- Huddle Landing Page -->
<div id="huddle_container" class="flex flex-col justify-end my-6 mx-auto">
<h3 id="huddle_title" class="flex justify-center mx-auto p-2">
Huddle Landing Page
</h3>
<div id="huddle_info" class="flex justify-center items-center mx-auto p-3 py-7">
<p class="infotxt">
A Frontendmentor HTML/CSS landing page project.
</p>
<div class="flex flex-col justify-center">
<a class="mx-auto mb-2" href="https://github.com/ImmuneMoon/Huddle-landing-page" target="_blank" aria-label="Huddle Landing Page code">
<button id="huddle_code">
Code
</button>
</a>
<a class="mx-auto mt-2" href="https://immunemoon.github.io/Huddle-landing-page/huddle-index.html" target="_blank" aria-label="Huddle Landing Page demo">
<button id="huddle_demo">
Demo
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>