-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
288 lines (263 loc) · 12.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
<!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" />
<meta name="description" content="Ash is a front-end engineer based in Austin, Texas" />
<title>Front-end developer - Ash Moreno</title>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles/portfolio.css" />
<!-- Bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
<!-- Font Awesome -->
<script
src="https://kit.fontawesome.com/4981a44a7d.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<nav class="d-flex justify-content-between">
<a href="/" title="Homepage">
<img src="images/ash-logo.png" alt="Ash Logo" class="ash-logo rounded d-none d-md-block" />
<img src="images/ash-logo.png" alt="Ash Logo" class="ash-logo rounded d-block d-md-none" />
</a>
<ul class="opacity-75">
<li class="active">
<a href="/" title="Homepage">
Home</a></li>
<li>
<a href="/about.html" title="About ashm-photo">
About</a></li>
<li>
<a href="/work.html" title="Ash's work">
Work</a></li>
<li>
<a href="/contact.html" title="Contact Ash">
Contact</a></li>
</ul>
</nav>
</div>
<div class="hero">
<p>👋🏻 Hello, I am</p>
<h1>Ash Moreno</h1>
<h2 class="mb-5">Front-end developer based in United States</h2>
<div>
<a href="https://drive.google.com/file/d/1HLB5jM-zF-nirLeBSDWec4bLlm1K8hDg/view?usp=sharing" target="_blank" class="btn btn-branding" title="Ash Moreno's Resume">View my resume</a>
</div>
</div>
<p class="text-center m-5">
I started my Front-end Development journey in September 2021 when I came across a free coding introduction from SheCodes.
<br />I decided to check that out and I became hooked.
My passion for Computer Science did not start with that. I was fresh off middle school<br /> and wanted
to pursue
a degree in Computer Science, but coming from a third-world country,
I came across gender inequality when <br />the school did not accept me for the course. I was given the option to take Hotel and Restaurant Management instead.
<br />
<br />
I have no regrets doing just that because, with that, I was able to excel in different roles such as bartender, trainer, and manager. <br />And then destiny decided to take things
into her hand and give me back my first love, Web Development. <br />From the day of that free coding lesson to this very moment, here are the projects I have accomplished.
</p>
<!--AWS Section-->
<div class="container">
<div class="row mb-5">
<div class="col">
<div class="project-description">
<h2 class="mb-5">AWS FlashCards</h2>
<p class="mb-5 text-muted">
I recently accomplished something I had been striving towards for a long time - passing the AWS Cloud Practitioner Exam. It was a long journey, but with the help of my study notes and flashcards, I was able to make it happen.
<br />
Now, I want to share my success with others. I believe that my flashcards can be a valuable tool for anyone looking to take the AWS Cloud Practitioner Exam. That's why I'm making them available to anyone who needs them. I want to help others achieve the same level of success that I did, and I believe that my flashcards are a great starting point.
</p>
<!-- WeTransfer link expires on may 28, 2023 -->
<a href="https://we.tl/t-9PFmkYyhQv" target="_blank" class="btn btn-branding-outline">Download FlashCards</a>
</div>
</div>
<div class="col d-none d-lg-block">
<a href="https://www.credly.com/earner/earned/badge/e5c372f6-5244-43b8-a257-3794697f275e" target="_blank">
<!-- Replace with your badge -->
<img src="images/aws.png" class="img-fluid rounded" alt="AWS Cloud Practitioner Badge" />
</a>
</div>
</div>
<!--Macrame Project Section-->
<div class="container">
<div class="row mb-5">
<div class="col d-none d-lg-block">
<a href="https://ashmoreno-macrame-page.netlify.app" target="_blank">
<img src="images/macrame-app.png" class="img-fluid rounded" alt="Macrame project preview" />
</a>
</div>
<div class="col">
<div class="project-description">
<h2 class="mb-5">Macrame Project</h2>
<p class="mb-5 text-muted">
This landing page is the first project I've done with <a href="https://www.shecodes.io/workshops?coupon_name=ashtoyo#apply" target="_blank" class="shecodes">SheCodes</a> Basic. <br>
I was able to create a website with the use of only HTML and CSS. Here, I showcased a gallery of my handmade macrame creations.
</p>
<a href="https://ashmoreno-macrame-page.netlify.app" target="_blank" class="btn btn-branding-outline">Launch Website</a>
</div>
</div>
</div>
<!--Weather App Section-->
<div class="container">
<div class="row mb-5">
<div class="col">
<div class="project-description">
<h2 class="mb-5">Weather App</h2>
<p class="mb-5 text-muted">
I recreated the weather application I did with Vanilla Javascript using ReactJS. By the use of a Rest API called Open Weather Map, this application is able to give live data.
</p>
<a href="https://ashmoreno-weather-app.netlify.app" target="_blank" class="btn btn-branding-outline">Launch Website</a>
</div>
</div>
<div class="col d-none d-lg-block">
<a href="https://ashmoreno-weather-app.netlify.app" target="_blank">
<img src="images/weather-app.png" class="img-fluid rounded" alt="Weather project preview" />
</a>
</div>
</div>
<!--Dictionary App Section-->
<div class="container">
<div class="row mb-5">
<div class="col d-none d-lg-block">
<a href="https://ashmoreno-dictionary.netlify.app" target="_blank">
<img src="images/dictionary-app.png" class="img-fluid rounded" alt="Dictionary app preview" />
</a>
</div>
<div class="col">
<div class="project-description">
<h2 class="mb-5">Dictionary App</h2>
<p class="mb-5 text-muted">
This Dictionary App is another ReactJS project that I made.
<br />
I used two Rest APIs and one of which is called Dictionary API. I had a lot of fun making this app mainly because the design I used was heavily inspired by my love for Donuts.
</p>
<a href="https://ashmoreno-dictionary.netlify.app" target="_blank" class="btn btn-branding-outline">Launch Website</a>
</div>
</div>
</div>
<!--Media Kit Section-->
<div class="container">
<div class="row mb-5">
<div class="col">
<div class="project-description">
<h2 class="mb-5">Social Media Kit</h2>
<p class="mb-5 text-muted">
I usually get collaborations online, mainly on Instagram, and this media kit is what I use to introduce myself to different brands. I also use it to put affiliate links and shareable codes for my social media audience.
I made this site with HTML and CSS. This is also the first time I used a basic CSS animation using keyframes.
</p>
<a href="https://ashtoyo-media-kit.netlify.app" target="_blank" class="btn btn-branding-outline">Launch Website</a>
</div>
</div>
<div class="col d-none d-lg-block">
<a href="https://ashtoyo-media-kit.netlify.app" target="_blank">
<img src="images/social-kit.png" class="img-fluid rounded" alt="Media Kit project preview" />
</a>
</div>
</div>
<!--Happy Garden Section-->
<div class="container">
<div class="row mb-5">
<div class="col d-none d-lg-block">
<a href="https://elsalvadordali.github.io/green-smile/" target="_blank">
<img src="images/hg-photo.png" class="img-fluid rounded hg-photo" alt="Happy Garden app preview" />
</a>
</div>
<div class="col">
<div class="project-description">
<h2 class="mb-5">Happy Garden</h2>
<p class="mb-5 text-muted">
Happy Garden was built for the GDI Hackathon 2022 - Hack for Health! We were given 48 hours to start and accomplish the project. All team members were first-time hackers, which has proven to be challenging and a rewarding experience for us! The Happy Garden app won and landed third place! 2 days after deployment, it has already garnered almost 100 users!
Team members are mostly front-end developers, leading us to take on different roles and learn new technologies.
</p>
<a href="https://elsalvadordali.github.io/green-smile/" target="_blank" class="btn btn-branding-outline">Launch Website</a>
</div>
</div>
</div>
<!--Digital Detox Section Section-->
<div class="container">
<div class="row mb-5">
<div class="col">
<div class="project-description">
<h2 class="mb-5">Digital Detox App</h2>
<p class="mb-5 text-muted">
The Digital Detox app is designed to help people disconnect from their devices and lead a more mindful life. This app was built using React, a popular JavaScript library for building user interfaces, and Vite, a lightweight development server. By using this app, users can break free from the constant distractions of social media and other digital devices and focus on living a healthier and more intentional life.
</p>
<a href="https://digital-detox.netlify.app" target="_blank" class="btn btn-branding-outline">Launch Website</a>
</div>
</div>
<div class="col d-none d-lg-block">
<a href="https://digital-detox.netlify.app" target="_blank">
<img src="images/digital-detox.png" class="img-fluid rounded" alt="Digital Detox project preview" />
</a>
</div>
</div>
<footer>
<div
class="
contact-box
d-flex
justify-content-between
mb-5
d-none d-md-flex
"
>
<div>
<h3>Work Inquiry</h3>
<p class="text-muted">Let's work together</p>
</div>
<div>
<a href="mailto:hello@ashmoreno.dev" class="btn btn-branding mt-3" title="Contact Ash"
>Contact me</a
>
</div>
</div>
<div class="d-flex justify-content-center mb-5">
<a href="mailto:hello@ashmoreno.dev" class="email-link" title="Email Ash"
>hello@ashmoreno.dev</a
>
</div>
<div class="d-flex justify-content-center">
<div class="social-links">
<a
href="https://www.linkedin.com/in/asthermoreno10/"
target="_blank"
title="LinkedIn Profile"
><i class="fa-brands fa-linkedin"></i
></a>
<a href="https://github.com/AshM10"
target="_blank"
title="Github Profile"
><i class="fa-brands fa-github"></i
></a>
<a href="https://twitter.com/sexy_gravy"
target="_blank"
title="Twitter Profile">
<i class="fa-brands fa-twitter"></i>
</a>
</div>
</div>
<p class="text-center mt-5">
This project was coded by Ash Moreno, and it is <a href="https://github.com/AshM10/ashmoreno-portfolio-project" target="_blank">open-sourced</a> 💜
</p>
</footer>
</div>
</body>
</html>