-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
221 lines (202 loc) · 10.2 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
<!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">
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</head>
<body>
<!----------------------------- Header ---------------------------------->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<h1><span>M</span>icaela <span>D</span>iLoreto</h1>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li><a href="#hero" data-after="Home">Home</a></li>
<li><a href="#about" data-after="About">About</a></li>
<li><a href="#services" data-after="Skills">Skills</a></li>
<li><a href="#projects" data-after="Projects">Projects</a></li>
<li><a href="#contact" data-after="Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</section>
<!--------------------------- End Header ------------------------------------>
<!-------------------------- Hero Section ------------------------------------>
<section id="hero">
<div class="hero container">
<div>
<h1>Hi there, <span></span></h1>
<h1>My Name is <span></span></h1>
<h1>Micaela <span></span></h1>
<a href="#projects" type="button" class="cta">Portfolio</a>
</div>
</div>
</section>
<!-------------------------- End Hero Section ---------------------------------->
<!----------------------- About Section ---------------------------------------->
<section id="about">
<div class="about container">
<div class="col-left">
<div class="about-img">
<img src="./images/headshot-new.jpg" alt="img">
</div>
</div>
<div class="col-right">
<h1 class="section-title">About <span>Me</span></h1>
<h2>Front End Developer</h2>
<p>After graduating with my degree in Communications, I decided to pursue my lifelong curiosity
for web development. It was only after taking that leap of courage, & being driven by solely my
passion for learning, that I discovered what I truly enjoy doing. Planning, designing, and building
websites allows me to channel both my creative side along with my hunger for problem-solving. I pride myself
on the work that I do because it is always done with dedication, poise, and accuracy. On a personal level,
I am someone who has always been highly-motivated, self-driven, and hard-working. I am constantly
seeking to improve my skills in any way possible. In addition to this, I have the ability to adapt to any type
of team environment, and at the same time, I also have the ability to work independently while staying on schedule
and meeting tight deadlines.
</p>
<a href="https://drive.google.com/file/d/1lr7BjiJ5EzxVsIuCq1BSQOTqSIJ9uH07/view?usp=sharing" target="_blank" class="cta" id="download">Download Resume</a>
</div>
</div>
</section>
<!--------------------- End About Section --------------------------------->
<!----------------------- Service Section ------------------------------->
<section id="services">
<div class="services container">
<div class="service-top">
<h1 class="section-title">Sk<span>i</span>lls</h1>
</div>
<div class="service-bottom">
<div class="service-item">
<div class="icon"><img src="images/skills-icon.png"></div>
<h2>JavaScript • React • HTML • CSS • Bootstrap • JQuery • Agile • TDD • MVC •
Object Oriented Programming • Responsive Design / Mobile Relational Databases
• Source Control / Git • GitBash • GitHub • Intellij • VSCode</h2>
</div>
<div class="service-item">
<div class="icon"><img src="images/skills-icon.png"></div>
<h2>Creating web and mobile applications, maintaining, optimizing, troubleshooting,
and improving websites, implementation of apps and landing pages from concept through deployment</h2>
</div>
</div>
</div>
</section>
<!----------------------- End Service Section -------------------------->
<!----------------------- Projects Section ----------------------------->
<section id="projects">
<div class="projects container">
<div class="projects-header">
<h1 class="section-title">Recent <span>Projects</span></h1>
</div>
<div class="all-projects">
<div class="project-item">
<div class="project-info">
<h1>Photography Website</h1>
<h2>Responsive photography website with 4 static pages,
parallax effect, lightbox js, and heavy use of
flexbox/grid</h2>
<p>Tech stack: JavaScript, HTML, CSS, VSCode, Git,
GitHub, GitBash, MediaQuery, SCSS
</p>
</div>
<div class="project-img">
<img src="./images/photo-website.PNG" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Health Course</h1>
<h2>A responsive webpage design for BiOptimizers Health Course, utilizing Google Analytics & Google Tag manager.
Received 100+ score on Google Page Speed Insights </h2>
<p>Tech stack: JavaScript, Java, HTML, CSS, Media Query, VSCode, Git, GitHub, GitBash
</p>
</div>
<div class="project-img">
<img src="./images/bioptimizers.PNG" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Weather App</h1>
<h2>Mobile Responsive single page application with changing
background depending on user's typed in location</h2>
<p>Tech stack: React, JavaScript, HTML, CSS, VSCode, Git, GitHub, MediaQuery</p>
</div>
<div class="project-img">
<img src="./images/weather-app.PNG" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Ableton About Page</h1>
<h2>Mobile responsive single-application for music business
website</h2>
<p>Tech stack: JavaScript, HTML, CSS, MediaQuery, VSCode, Git, GitHub</p>
</div>
<div class="project-img">
<img src="./images/abletonPic.PNG" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Muffin Maker Game</h1>
<h2>Single-page application game inspired by Cookie Clicker</h2>
<p>Tech stack: JavaScript, HTML, CSS, VSCode, Git, GitHub</p>
</div>
<div class="project-img">
<img src="./images/Screenshot (4).png" alt="img">
</div>
</div>
</div>
</div>
</section>
<!-------------------- End Projects Section ----------------------------------->
<!---------------------------- Contact Section -------------------------------->
<section id="contact">
<div class="contact container">
<div><h1 class="section-title">Contact <span>Info</span></h1></div>
<div class="contact-items">
<div class="contact-item">
<div class="icon"><img src="./images/phone-icon.png" alt="img"></div>
<div class="contact-info">
<h1>Phone</h1>
<h2>+1 (330) 844 9293</h2>
</div>
</div>
<div class="contact-item">
<div class="icon"><img src="./images//email-icon.png" alt="img"></div>
<div class="contact-info">
<h1>Email</h1>
<h2>micky.diloreto@gmail.com</h2>
</div>
</div>
</div>
</div>
</section>
<!------------------------------- End Contact Section ------------------------------>
<!-- Footer -->
<section id="footer">
<div class="footer container">
<div class="brand"><h1><span>M</span>icaela <span>D</span>iLoreto</h1></div>
<div class="social-icon">
<div class="social-item">
<a href="https://www.linkedin.com/in/micaela-diloreto/"><img src="./images/linkedin-icon.png" alt="img"></a>
</div>
<div class="social-item">
<a href="https://github.com/micaeladiloreto"><img src="./images/github-icon.png" alt="img"></a>
</div>
</div>
<p>Copyright <small>©</small> 2021 DiLoreto | All rights reserved</p>
</div>
</section>
<!----------------------------------- End Footer ---------------------------------------->
<script src="app.js"></script>
</body>
</html>