-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
459 lines (455 loc) · 16.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
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
<!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, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/60edbeeb9b.js"
crossorigin="anonymous"
></script>
<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=Covered+By+Your+Grace&family=Inter:wght@200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/styles.css" />
<title>Claudia Mena Rieke - Front-end Developer</title>
<meta
name="description"
content="Front-end developer with a passion for sustainability, community, and caring for our oceans. Let's connect to see what we can create together."
/>
</head>
<body>
<nav
class="navbar navbar-expand-lg navbar-light background-color fixed-top"
>
<div class="container-fluid">
<a
class="navbar-brand heading"
href="index.html"
title="Claudia Mena Rieke"
>Claudia Mena Rieke</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a
class="nav-link active heading"
aria-current="page"
href="index.html"
title="Home"
>Home</a
>
</li>
<li class="nav-item">
<a
class="nav-link heading"
href="#about-developer"
title="About Claudia"
>About</a
>
</li>
<li class="nav-item">
<a
class="nav-link heading"
href="#projects"
title="Claudia's Work"
>
Work
</a>
</li>
<li class="nav-item">
<a
class="nav-link heading"
href="#contact-information"
tabindex="-1"
aria-disabled="true"
title="Contact Claudia"
>Contact</a
>
</li>
</ul>
<a
href="Condensed Resume 2023.pdf"
class="btn btn-outline-dark heading button-color"
type="Download"
target="_blank"
title="Resume"
>
Download Resume
</a>
</div>
</div>
</nav>
<div class="max-width-100 container-fluid">
<div class="intro-body top-mobile-breakpoint">
<div class="row">
<div class="col-12 col-lg-8">
<h1>Hi, hola, aloha! I'm Claudia 👋🏽</h1>
<p class="intro">
I'm a front-end developer with a passion for sustainability,
community, and our oceans. I’ve always loved a challenge and
thrive in unfamiliar territory! While looking for a change in my
career trajectory I found that coding was the perfect marriage of
my diverse skill sets and passions. I've chosen to follow the path
of growth with this new career and can't wait to see where it
takes me. I hope we can be on this journey together.
</p>
<div class="location-and-availability">
<i class="fa-solid fa-location-dot"></i> Honolulu, Hawai'i
<br />
<i class="fa-solid fa-circle fa-beat" style="color: #10b981"></i>
Available for new projects
</div>
<div>
<a
href="https://github.com/cmenarieke"
target="_blank"
title="Github"
>
<i
class="fa-brands fa-github social-connect"
style="color: #4b5563"
></i
></a>
<a
href="https://www.linkedin.com/in/claudia-mena-rieke-a3a1b967/"
target="_blank"
title="LinkedIn"
><i class="fa-brands fa-linkedin social-connect"></i
></a>
<a
href="https://www.instagram.com/claudiamenarieke/?hl=en"
target="_blank"
title="Instagram"
><i class="fa-brands fa-instagram social-connect"></i
></a>
</div>
</div>
<div class="col-12 col-lg-4 text-center">
<img src=images/claudiaHiking.jpeg alt="Claudia hiking on Oahu"
class="img-fluid rounded" width="300px" height="600px">
</div>
</div>
</div>
</div>
<div class="contrast-background" id="about-developer">
<div class="container">
<div class="row">
<h2 class="heading text-center pb-3">
Curious about me? Here you have it:
</h2>
<div class="col-12 col-lg-4 d-block text-center">
<img
src="images/gardening.jpg"
alt="Claudia volunteering on the North Shore of Oahu."
class="img-fluid rounded"
width="600x"
height="700px"
/>
</div>
<div class="col-12 col-lg-8">
<p>
I'm Claudia, a lifelong student with a background in
communications and project management. I've always been fascinated
by streamlining processes and finding ways to make things run
smoother. Whether it's simplifying vendor communications or
implementing an automated scheduling system, I love taking
existing processes and making them more efficient.
<br />
<br />
I'm making a career transition into the exciting world of web
development. I'll be completing the SheCodes React course by the
end of October 2023. Through all these courses, I have gained
skils in HTML, CSS, Javascript, Bootstrap, web hosting, Github,
Flexbox, SEO, responsiveness as well as React. With my strong
communication skills and project coordination experience, I'm
excited to bring my abilities to a whole new industry.
<br />
<br />
My ultimate goal? To become a highly skilled software engineer and
continue to grow and learning in my career. When I'm not fully
immersed in code, you can catch me sipping on a delicious oat milk
latte, hiking through Oahu’s tropical forest with my sweet pup, or
participating in a beach clean up - these microplastics are
everywhere! 😩
<br />
<br />
I'm a huge advocate for ocean conservation and fighting plastic
waste. In fact, I'm super interested in taking on projects that
promote environmental activism, like developing software solutions
to protect our beautiful oceans and cut down on plastic pollution.
Let's connect and make some awesome things happen!
</p>
<div class="text-center">
<a
href="Condensed Resume 2023.pdf"
class="btn btn-outline-dark heading button-color mt-3"
type="Download"
target="_blank"
title="Resume"
>
Download Resume
</a>
</div>
</div>
</div>
</div>
</div>
<div class="skills-container mobile-breakpoint">
<h2 class="heading text-center pb-5">
Skills and tools I've been working with
</h2>
<div class="row skills-logos">
<div class="col mb-5">
<i class="fa-brands fa-html5 logo"></i>
<div>HTML</div>
</div>
<div class="col">
<i class="fa-brands fa-css3-alt"></i>
<div>CSS</div>
</div>
<div class="col">
<i class="fa-brands fa-js"></i>
<div>Javascript</div>
</div>
<div class="col">
<i class="fa-brands fa-bootstrap"></i>
<div>Bootstrap</div>
</div>
<div class="col">
<i class="fa-solid fa-globe"></i>
<div>Netlify</div>
</div>
<div class="col">
<i class="fa-brands fa-github"></i>
<div>Github</div>
</div>
<div class="col">
<i class="fa-brands fa-searchengin"></i>
<div>SEO</div>
</div>
<div class="col">
<i class="fa-brands fa-react"></i>
<div>REACT</div>
</div>
<div class="col">
<i class="fa-brands fa-figma"></i>
<div>Figma</div>
</div>
</div>
</div>
<div class="contrast-background" id="projects">
<div class="container">
<h2 class="text-center heading mb-5">
Some of the noteworthy projects I have built:
</h2>
<div class="row">
<div class="col-12 col-lg-8">
<a
href="https://tiny-biscochitos-f61148.netlify.app/"
target="_blank"
>
<img
src="images/weatherProject.png"
alt="snapshot of weather project app"
class="img-fluid rounded"
/>
</a>
</div>
<div class="col-12 col-lg-4">
<h3 class="primary-font weather-app">
<strong>Weather Project</strong>
</h3>
<p>
This was my final project for the SheCodes Plus course. To create
this project, I used HTML, CSS, Bootstrap, Javascript and used an
API to provide real time weather data.
</p>
<div>
<a
href="https://tiny-biscochitos-f61148.netlify.app/"
target="_blank"
title="Weather Project built by Claudia"
><i class="fa-solid fa-arrow-up-right-from-square"> </i
></a>
</div>
</div>
</div>
</div>
</div>
<div class="container skills-container">
<h2 class="heading text-center pb-5">
Here's a quick summary of my most recent certifications
</h2>
<div class="row certification-info rounded p-3">
<div class="col-12 col-lg-4">
<a
href="https://www.shecodes.io/certificates/51b6d3c3b9e03055ab124f86fdbb47a6"
title="SheCodes Responsive Certificate"
>
<img
src="images/SheCodesResponsive.png"
alt="SheCodes Responsive Certification"
class="img-fluid"
width="450px"
/></a>
</div>
<div class="col-12 col-lg-8">
<h5 class="text-center">SheCodes Responsive - August 2023</h5>
<ul class="cert-bullet-points">
<li>
In this course I continued to work on my skills in HTML, CSS,
Bootstrap, Github, and hosting on Netlify.
</li>
<li>I learned about how to improve a page's SEO.</li>
<li>
Using Bootstrap, I learned how to improve the responsiveness of a
website to make it mobile friendly.
</li>
</ul>
</div>
</div>
<div class="row certification-info rounded p-3">
<div class="col-12 col-lg-4">
<a
href="https://www.shecodes.io/certificates/b2a351f1e2246766d686296868228dd7"
target="_blank"
title="SheCodes Plus Certificate"
><img
src="images/sheCodesPlus.png"
alt="SheCodes Plus certificate"
class="img-fluid"
width="450px"
/>
</a>
</div>
<div class="col-12 col-lg-8">
<h5 class="text-center">SheCodes Plus - July 2023</h5>
<ul class="cert-bullet-points">
<li>
I improved my skills in HTML, CSS, Bootstrap and Javascript.
</li>
<li>
I learned about API's and built a weather app that fetched real
time weather data using axios.
</li>
<li>
Building my weather app also taught me how hosting worked and I've
started using GitHub with this project.
</li>
</ul>
</div>
</div>
<div class="row certification-info rounded p-3">
<div class="col-12 col-lg-4">
<a
href="https://www.shecodes.io/certificates/8bddbb6d9c0b86bac58bd8eed9c30e6c"
target="_blank"
title="SheCodes Introduction Certificate"
><img
src="images/shecodes.png"
alt="SheCodes Introduction Certificate"
class="img-fluid"
width="450px"
/>
</a>
</div>
<div class="col-12 col-lg-8">
<h5 class="text-center">
SheCodes Introduction to Coding - May 2022
</h5>
<ul class="cert-bullet-points">
<li>
In this course I was introduced to the basics of HTML, CSS, and
Javascript using VS Code.
</li>
<li>
For the final project of this course, I created a single static
page about coffee.
</li>
<li>
Using Javascript, I was able to have a button at the end of the
page which would prompt the user for their name and email.
</li>
<li>
The last alert used the name inputted and would let them know that
recipes for their favorite coffee drink would be sent to their
email.
</li>
</ul>
</div>
</div>
</div>
<div class="contrast-background" id="contact-information">
<h2 class="heading text-center">Let's Connect</h2>
<p class="text-center">
Feel free to reach out to me if you're looking for a developer, have a
question, or simply want to connect. I always love meeting new people!
</p>
<div class="contact-info mail text-center mt-5">
<i class="fa-regular fa-paper-plane fa-bounce"></i>
<a href="mailto:[email protected]" class="text-center"
>
</div>
<div class="text-center mt-5 primary-font">
You can also find me on these platforms!
</div>
<div class="text-center mb-0">
<a href="https://github.com/cmenarieke" target="_blank" title="Github">
<i
class="fa-brands fa-github social-connect"
style="color: #4b5563"
></i
></a>
<a
href="https://www.linkedin.com/in/claudia-mena-rieke-a3a1b967/"
target="_blank"
title="LinkedIn"
><i class="fa-brands fa-linkedin social-connect"></i
></a>
<a
href="https://www.instagram.com/claudiamenarieke/?hl=en"
target="_blank"
title="Instagram"
><i class="fa-brands fa-instagram social-connect"></i
></a>
</div>
</div>
<footer class="m-5 text-center primary-font">
2023 | This project was
<a href="https://github.com/cmenarieke" target="_blank">coded</a> with 💛
by
<a
href="https://www.linkedin.com/in/claudia-mena-rieke-a3a1b967/"
target="_blank"
>Claudia Mena Rieke.</a
>
</footer>
</body>
</html>