-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
387 lines (387 loc) · 15.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Michael Avendano's website." />
<link
rel="icon"
type="image/svg+xml"
href="./src/assets/favicon/favicon.ico"
/>
<link
rel="stylesheet"
as="font"
href="https://fonts.googleapis.com/css?family=Lexend&display=swap"
/>
<link rel="stylesheet" type="text/css" href="./src/styles.css" />
<script
src="https://kit.fontawesome.com/e20ceb0350.js"
crossorigin="anonymous"
></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Michael Avendano's Website</title>
</head>
<body>
<div id="app">
<header>
<div class="mobile-menu-wrapper">
<button aria-label="menu button" class="menu-btn">
<div id="close-icon" class="close-icon" data-state="hide">
<i class="fa-solid fa-xmark"></i>
</div>
<div class="bar" data-state="visible"></div>
<div class="bar" data-state="visible"></div>
<div class="bar" data-state="visible"></div>
</button>
<nav class="mobile-navbar" data-state="close">
<ul class="list--mobile-nav">
<li><a class="link page-nav-link" href="#about">About</a></li>
<li>
<a class="link page-nav-link" href="#experience">Experience</a>
</li>
<li>
<a class="link page-nav-link" href="#projects">Projects</a>
</li>
<li>
<a
class="link link__external social-link__github"
href="https://github.com/avenmia/"
rel="noopener noreferrer"
target="_blank"
>GitHub
</a>
</li>
<li>
<a
class="link link__external social-link__linkedin"
href="https://www.linkedin.com/in/michael-avendano/"
rel="noopener noreferrer"
target="_blank"
>LinkedIn
</a>
</li>
<li>
<a
class="link link__external social-link__stackoverflow"
href="https://stackoverflow.com/users/7331107/avenmia"
rel="noopener noreferrer"
target="_blank"
>Stack Overflow
</a>
</li>
</ul>
</nav>
</div>
<nav class="navbar">
<a
class="navbar__link"
href="https://github.com/avenmia/"
aria-label="GitHub link"
title="GitHub Link"
rel="noopener noreferrer"
target="_blank"
><i class="fa-brands fa-github-square fa-2x navbar__link__icon"></i
></a>
<a
class="navbar__link"
href="https://www.linkedin.com/in/michael-avendano/"
aria-label="LinkedIn link"
title="LinkedIn Link"
rel="noopener noreferrer"
target="_blank"
><i class="fa-brands fa-linkedin fa-2x navbar__link__icon"></i
></a>
<a
class="navbar__link"
href="https://stackoverflow.com/users/7331107/avenmia"
aria-label="Stack Overflow link"
title="Stack Overflow Link"
rel="noopener noreferrer"
target="_blank"
><i class="fa-brands fa-stack-overflow fa-2x navbar__link__icon"></i
></a>
</nav>
<div class="site-title">
<div class="site-title__name"></div>
<h2 class="site-title__job">SOFTWARE ENGINEER</h2>
</div>
<nav class="page-nav">
<a class="page-nav__link" href="#about">ABOUT</a>
<a class="page-nav__link" href="#experience">EXPERIENCE</a>
<a class="page-nav__link" href="#projects">PROJECTS</a>
</nav>
</header>
<main>
<section id="about" class="section section--light">
<div class="page">
<div class="page__container">
<div class="page__item page__item--right about-content">
<div class="page__header page__header--rtl">
<h2 class="page__header__title page__header__title--rtl">
ABOUT
</h2>
<div class="page__header__line"></div>
</div>
<div class="page__content page__content--right">
<p>
Hi! I'm Michael Avendano. I'm based in Honolulu,
Hawaiʻi, currently working at Pangaea Information
Technologies as a full-stack developer. In my spare time, I
also volunteer at Code for Hawaii.
</p>
<p>
My hobbies often revolve around puzzle-solving. Whether it's
through code, chess, or martial arts, I enjoy finding
creative ways to approach problems.
</p>
<p>
Finding new solutions keeps me motivated while the ability
to help others through code inspires me to keep learning.
</p>
</div>
</div>
<div class="page__item page__item--left profilepic">
<div class="background-circle">
<picture>
<source
media="(min-width: 900px)"
srcset="./src/assets/mike_517x517.png"
/>
<source
media="(min-width: 480px)"
srcset="./src/assets/mike_300x300.png"
/>
<source
media="(min-width: 100px)"
srcset="./src/assets/mike_175x175.png"
/>
<img
src="./src/assets/mike.png"
alt="Image of Michael Avendano"
/>
</picture>
</div>
</div>
</div>
</div>
</section>
<section id="experience" class="section section--dark">
<div class="page">
<div class="page__container">
<div class="page__item page__item--left">
<h2
class="page__header__title page__header__title--ltr experience--title"
>
EXPERIENCE
</h2>
<div class="page__header__line page__header__line--ltr"></div>
<section class="page__content page__content--left">
<section class="work__experience">
<h3 class="work__experience__header">Software Engineer</h3>
<h4 class="work__experience__subheader">
Pangaea Information Technology
</h4>
<h5 class="work__experience__date">01-2019 to Present</h5>
<ul>
<li>
Creating RESTful APIs in ASP.NET Core, ASP.NET, and
Node.js with Azure Functions
</li>
<li>
Developing front-end applications with TypeScript &
React.js
</li>
<li>
Working as a back-end developer using C# with ASP.NET
Core and SQL Server
</li>
<li>
Using Test Driven Development to implement features
</li>
</ul>
</section>
<section class="work__experience">
<h3 class="work__experience__header">Volunteer</h3>
<h4 class="work__experience__subheader">Code for Hawaii</h4>
<h5 class="work__experience__date">01-2022 to Present</h5>
<ul>
<li>
Triaging issues and contributing code to the Code for
Hawaii website
</li>
<li>
Onboarding new members by providing tutorials and
familiarizing them with the code base
</li>
<li>Helping facilitate meetings</li>
</ul>
</section>
<section class="work__experience">
<h3 class="work__experience__header">Research Assistant</h3>
<h4 class="work__experience__subheader">
Electronic Visualization Laboratory at University of
Illinois at Chicago
</h4>
<h5 class="work__experience__date">06-2018 to 12-2018</h5>
<ul>
<li>
Gained experience using Node.js and Express.js to handle
data requests primarily utilizing WebSockets
</li>
<li>
Utilized Mongoose to interface with MongoDB to create
schemas and store live data efficiently
</li>
<li>
Worked with various APIs for devices such as microphones
and Z-Wave devices
</li>
</ul>
</section>
</section>
</div>
<div class="page__item page__item--right skills__container">
<div class="page__content--right">
<section class="skills__area">
<h3 class="skills__header">SKILLS</h3>
<section class="skills__item">
<h4 class="skills__item__header">Languages</h4>
<ul class="skills__values--2col">
<li>TypeScript</li>
<li>C#</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
</section>
<section class="skills__item">
<h4 class="skills__item__header">Technologies</h4>
<ul class="skills__values--2col">
<li>Vue.js</li>
<li>React.js</li>
<li>Node.js</li>
<li>ASP.NET Core</li>
<li>CosmosDb</li>
<li>MSSQL Server</li>
</ul>
</section>
<section class="skills-section-styles">
<h4 class="skills__item__header">Coding Styles</h4>
<ul class="skills__values--1col">
<li>Test Driven Development</li>
<li>Object Oriented Programming</li>
</ul>
</section>
</section>
<div class="resume">
<a href="./resume.pdf" download>
<button class="resume__btn">VIEW RESUME</button>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="projects" class="section section--light">
<div class="page">
<div class="page__container page--projects">
<div
class="page__header page__header--rtl page__header--projects"
>
<h2 class="page__header__title page__header__title--rtl">
PROJECTS
</h2>
<div class="page__header__line"></div>
</div>
<div class="page__item page__item--projects project1 proj__img">
<picture>
<source
media="(min-width: 900px)"
srcset="./src/assets/code_500x500.png"
/>
<img
src="./src/assets/code.png"
height="350px"
width="350px"
alt="Picture of HTML code"
class="image__project"
/>
</picture>
</div>
<div class="page__item page__item--projects project1 proj__desc">
<h3 class="project__title">Personal Website</h3>
<a
class="project__link"
href="https://github.com/avenmia/PersonalWebsite"
rel="noopener noreferrer"
target="_blank"
>github.com/avenmia/PersonalWebsite</a
>
<p class="project__info">
This is a website that showcases my projects as well as gives
an introduction to myself. The goal was to create a website
without a JavaScript framework while still prioritizing
performance and accessibility. This was built using the
following:
</p>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>TypeScript</li>
<li>Vite</li>
</ul>
</div>
<div class="page__item page__item--projects project2 proj__img">
<img
class="image__project"
src="./src/assets/quantum_lamps_500x500.png"
height="350px"
width="350px"
alt="Picture of toy whale that is lit up."
/>
</div>
<div class="page__item page__item--projects project2 proj__desc">
<h3 class="project__title">Quantum Lamps</h3>
<a
href="https://github.com/avenmia/quantum-lamps"
rel="noopener noreferrer"
target="_blank"
class="project__link"
>github.com/avenmia/quantum-lamps</a
>
<p class="project__info">
Quantum Lamps was a small IoT project that allows users to
keep lights in sync by moving their respective light. The
color changing was accomplished by using an accelerometer to
map the lamp's orientation to a color. The color code would
then be sent to a server which would relay the color to the
partner light. This was built using the following:
</p>
<ul>
<li>Python3</li>
<li>TypeScript</li>
<li>Docker</li>
<li>Raspberry Pi</li>
<li>NeoPixel Ring</li>
<li>Accelerometer</li>
</ul>
</div>
</div>
</div>
</section>
<section class="footer">
<div>
Website Design by<a
class="link link__external"
href="https://www.hannahmary.co/"
rel="noopener noreferrer"
target="_blank"
>HannahMary.co
</a>
</div>
</section>
</main>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>