-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
277 lines (252 loc) · 8.46 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
<!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" />
<!--CSS Styles -->
<link rel="stylesheet" href="assets/css/style.css" />
<!-- FavIcons -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/Icons/favicon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/Icons/favicon.png"
/>
<!-- Animate CSS CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Jocelyn Mejia | Jr Developer</title>
</head>
<body>
<!-- Navbar -->
<nav>
<h1>Jocelyn Mejia</h1>
<h2>EveStarLITE</h2>
<ul class="navigation">
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>
</button>
</nav>
<!-- Hero Section -->
<section class="hero" id="about">
<img
class="cropped1"
src="assets/Images/IMG_20211031_122434.jpg"
alt="Me"
loading="lazy"
/>
<div class="bio animate__animated animate__shakeX">
<h2 class="bio-title">Ello!</h2>
<p class="bio-text">
Am I a child? Yes- But that's not forever as I will be 18 in two years.
The goal is to have a job before then but if not that gives me 2 years to further
improve my skills and get more hands-on experience through my robotics team and personal fun.
All is fine-
</p>
</div>
</section>
<!-- More about -->
<section class="more-bout-me">
<h2>More About Me</h2>
<p>
I started programming in mid summer 2021. Not that long ago at all but in that
short time I have come a long way. From not understanding basic syntax in c++
to now being ready to help out my team in our upcoming build season!
</p>
<p>
Now am I 100% job ready? No! No one really is as a junior dev. You just kind of
have to start. And I want to hit the ground running-
</p>
<p>
Web development is interesting and I am capable of doing it. You are seeing proof of it-
and I love robotics focused software but I've been studying Android mobile development
I'm close to taking the Google certification. I just need money for the exam fee.
Paradoxically- needing a job to get the certification to get a job :\
</p>
</section>
<!-- Skills section -->
<section class="skills" id="skills">
<h2 class="skill-header">My Top Skills</h2>
<div class="skills-wrapper">
<div class="first-set animate__animated animate__pulse">
<img
src="assets/Icons/C++.png"
alt=""
loading="lazy"
class="icon icon-card"
/>
<img
src="assets/Icons/Git_icon.png"
alt=""
loading="lazy"
class="icon icon-card"
/>
<img
src="assets/Icons/Google.png"
alt=""
loading="lazy"
class="icon icon-card"
/>
</div>
</div>
<p>
Now I only know Git and C++ Because I'm in robotics where I get FIRST hand
experience with both. Though again- build season has not started yet I feel
very confident in my ability to use those two. And soon Python and Java!
</p>
<p>
Now google- I would not be where I am without it. None of us would be if
we're being honest. You don't just learn how to make a nice looking website
in an hour without the endless resources available. I truly believe my
willingness to say "I don't know" and look it up will take me much farther
than I could have gone otherwise
</p>
</section>
<!-- Projects section -->
<section class="projects" id="projects">
<h2 class="projects-title">Some of my Recent Projects</h2>
<div class="projects-container">
<div class="project-container project-card">
<h3 class="project-title">This Website</h3>
<p class="project-details">
This is my first real dabble in HTML and CSS. I thing I did well
</p>
<a href="#" target="_blank" class="project-link" >Link to the github repo</a>
</div>
<div class="project-container project-card">
<h3 class="project-title">C++ Prgramming Challanges</h3>
<p class="project-details">
I haven't done to much but this is something I'm super proud off.
I did it with little help. And I learned a lot with thease exersices!
</p>
<a href="#" target="_blank" class="project-link">Check it Out</a>
</div>
<div class="project-container project-card">
<h3 class="project-title">MORE COMING SOON</h3>
<p class="project-details">
More coming in the near future as I find time to do more and
fully learn how to make Android apps
</p>
<a href="#" target="_blank" class="project-link">Sneak peak at what I'm working on</a>
</div>
</div>
</section>
<!-- Contact section -->
<section class="contact" id="contact">
<h2>Get In Touch With Me</h2>
<div class="contact-form-container">
<div class="contact-form">
<form action="https://formspree.io/f/xyylngw" method="POST">
<div class="form-control">
<label for="name">Name</label>
<input
type="text"
id="name"
name="sender-name"
placeholder="Enter Your Name"
class="input-field"
required
/>
</div>
<div class="form-control">
<label for="email">Email</label>
<input
type="email"
id="email"
name="sender-email"
placeholder="Enter Your Email"
class="input-field"
required
/>
</div>
<div class="form-control">
<label for="message">Message</label>
<textarea
id="message"
cols="60"
rows="10"
placeholder="Enter Your Message"
name="message"
class="input-field"
required
></textarea>
</div>
<input
type="submit"
value="Submit"
id="submit-btn"
class="submit-btn"
/>
</form>
</div>
</div>
</section>
<!-- Social accounts - Fixed to the right -->
<div class="socials">
<a href="#" target="_blank"
><img
src="assets/Icons/Twitter.png"
alt="Twitter"
class="socicon"
/></a>
<a href="#" target="_blank"
><img
src="assets/Icons/instagram.png"
alt="Instagram"
class="socicon"
/></a>
<a href="#" target="_blank"
><img
src="assets/Icons/Linkedin.png"
alt="Linkedin"
class="socicon"
/></a>
<a href="#" target="_blank"
><img
src="assets/Icons/youtube.png"
alt="Youtube"
class="socicon"
/></a>
<a href="#" target="_blank"
><img src="assets/Icons/Github.png"
alt="Github"
class="socicon"
/></a>
</div>
<!-- Scroll to top -->
<i class="scroll-up" id="scroll-up"
><img
src="assets/Icons/favicon.png"
class="socicon up-arrow"
alt="scroll-up"
/></i>
<!-- Footer section -->
<footer>
<p>Thank you for visiting!! E></p>
</footer>
<!-- Website scripts -->
<script src="assets/js/app.js"></script>
<!-- Ion Icons scripts -->
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionIcons/ionIcons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/[email protected]/dist/ionIcons/ionIcons.js"
></script>
</body>
</html>