-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·268 lines (224 loc) · 13.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=" freelance web developer and ux designer" content="portafolio web developer website">
<meta name="keywords" content="HTML, CSS, JavaScript, Web developer, freelance web developer, ux design,digital marketing">
<meta name="author" content="Isabella Macchiavello">
<meta name="description" content="Isabella macchiavello freelance web developer and seo specialist.Email me to collaborate.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="f3pFVlJaKk5eGoCz0QWBGVIT9c2B93eW2KddBt81vGI" />
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- =====BOX ICONS===== -->
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<title> Isabella Macchiavello freelance web developer </title>
</head>
<body>
<!--===== HEADER =====-->
<header class="l-header">
<nav class="nav bd-grid">
<div>
<a href="#" class="nav__logo">Isabella</a>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#skills" class="nav__link">Skills</a></li>
<li class="nav__item"><a href="#work" class="nav__link">Work</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<main class="l-main">
<!--===== HOME =====-->
<section class="home bd-grid" id="home">
<div class="home__data">
<h1 class="home__title">Hi,<br>I'am <span class="home__title-color">Isabella</span><br> a Web Developer</h1>
<a href="mailto:[email protected]" class="button">Contact</a>
</div>
<div class="home__social">
<a href="https://www.linkedin.com/in/isabella-macchivello-223338205/" class="home__social-icon" alt="linkedin icon"><i class='bx bxl-linkedin' target="_blank"></i></a>
<a href= "mailto:[email protected]" class="home__social-icon" alt="gmail icon"><i class="fas fa-envelope"></i></i></a>
<a href="https://github.com/imacchiavello" class="home__social-icon" alt="github icon"><i class='bx bxl-github'target="_blank" ></i></a>
</div>
<div class="home__img">
<img src="./assets/img/1.png" alt="photo of isabella macchiavello young woman with brown hair and brown eyes with blue background">
</div>
</section>
<!--===== ABOUT =====-->
<section class="about section " id="about">
<h2 class="section-title">About</h2>
<div class="about__container bd-grid">
<div class="about__img">
<img src="./assets/img/2.png" alt="cartoon image of young woman isabella Macchiavello with blonde curly hair brown eyes and a red shirt">
</div>
<div>
<h2 class="about__subtitle">I'am Isabella Macchiavello</h2>
<p class="about__text">Since beginning my journey as a Web Developer, Ux designer and digital marketing specialist nearly 3 years ago, I've done remote work for agencies, consulted for startups, and collaborated with talented people to create digital products for both business and consumer use.
<br>I'm quietly confident, naturally curious, and perpetually working on improving my chops one design problem at a time.<br> <br>
I help designers, small agencies and businesses bring their ideas to life. Powered by Figma, VS Code and coffee, I turn your requirements into CMS-ified and ecommerce-ified websites - on time and on budget.
<br>
<br>
I currently am working as a web developer at OrcaSound an NGO open-source company that aims to salvage the population of the orcas in the Pacific. This is where my passion for design and development converge.
<br>
<br>
Outside of work, I enjoy photography, hiking, and a warm cup coffee.</p>
</div>
</div>
</section>
<!--===== SKILLS =====-->
<section>
<div class="row">
<div class="column" style="background-color:white;">
<img src='https://mattfarley.ca/img/icons/designer.svg'alt="illustration of two pens ">
<h2>Designer</h2>
<br>
<p>I value simple content structure, clean minimalistic design patterns, and thoughtful interactions.</p>
<br>
<div id="p1"> <p class="list-title has-text-primary has-text-weight-normal"><strong>Things I enjoy designing</strong></p></div>
<br>
<p>UX, UI, Web, Mobile, Apps, Logos, social media post</p>
<br>
<div id="p1"> <p><strong>Design Tools</strong><p></div>
<br>
<ul>
<li>Figma</li>
<br>
<li>Illustrator</li>
<br>
<li>Adobe InDesign</li>
<br>
<li>Photoshop</li>
</p>
</ul>
</div>
<div class="column" style="background-color:white;">
<img src='https://mattfarley.ca/img/icons/frontend.svg' alt="illustration of a website">
<h2>Web Developer</h2>
<br>
<p>I like to code things from scratch ,and enjoy bringing fully functional ideas to life in the browser.</p>
<br>
<div id="p1"> <p><strong>Languages I speak</strong><p></div>
<br>
<p>HTML, React, Javascript, CSS, Pyhton,
Node.Js</p>
<br>
<div id="p1"><p><strong>Web Dev Tools</strong><p></div>
<ul>
<br>
<li>Visual Studio Code</li>
<br>
<li>Git</li>
<br>
<li>Github</li>
<br>
<li>Terminal</li>
</p>
</ul>
</div>
<div class="column" style="background-color:white;">
<img src='https://mattfarley.ca/img/icons/mentor.svg' alt="book illustration">
<h2>Digital Marketer</h2>
<br>
<p>I create beautiful digital campaigns by leveraging major brands through social media. </p>
<br>
<div id="p1"><p><strong>Main Expertise</strong><p> </div>
<br>
<p>SEO optimization, google ads, content creation</p>
<br>
<div id="p1"> <p> <strong>Tools</strong><p> </div>
<br>
<ul>
<li>Google analytics</li>
<br>
<li>Google Keywords</li>
<br>
<li>MailChimp</li>
<br>
<li>Hootsuit</li>
<br>
</p>
</ul>
</div>
</div>
</section>
<!--===== WORK =====-->
<section class="work section" id="work">
<h2 class="section-title">Work</h2>
<div class="work__container bd-grid">
<div class="work__img">
<a href="https://imacchiavello.github.io/Monzo/"> <img src="https://i.pinimg.com/originals/c6/91/27/c691276ececa8bc6710a31f9d42eba09.png" alt="ux design of an online bank"></a>
</div>
<div class="work__img">
<a href="https://abod-bnb.web.app/" ><img src="https://images.unsplash.com/photo-1505275350441-83dcda8eeef5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=667&q=80" alt="Klassy coffee shop restaurant"> </a>
</div>
<div class="work__img">
<a href="https://oddrationale.com/dart_2048/"> <img src="https://cdn.dribbble.com/users/1615584/screenshots/14153571/media/928565f597ceb537211c71465d3c703d.jpg?compress=1&resize=400x300" alt="iphone application of an ecommerce website"></a>
</div>
<div class="work__img">
<a href="https://imacchiavello.github.io/host_cloud/"> <img src="https://images.unsplash.com/photo-1545239351-ef35f43d514b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80" alt="macbook air "></a>
</div>
<div class="work__img">
<a href="https://appo-music.herokuapp.com/#/browse"> <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=702&q=80" alt="dashboard of stores profits"></a>
</div>
<div class="work__img">
<a href="https://awg2020.org/"> <img src="https://images.pexels.com/photos/159888/pexels-photo-159888.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="Stock market"></a>
</div>
</div>
</section>
<!--===== brands =====-->
<section class="brands">
<div class="brands_img" >
<img src="./assets/img/Screen Shot 2021-03-24 at 14.47.23.png" alt="brands i have work with include design labs, orcasound,briteweb,goodkind,chronicled,redstamp,domanin 7,bloors,serpmetrics">
</div>
</section>
<!--===== CONTACT =====-->
<section class="contact section" id="contact">
<h2 class="section-title">Interested in Collaborating?
<br>
Send me a message
</h2>
<div class="contact__container bd-grid">
<form action="contact" class="contact__form" method="POST" data-netlify="true">
<input type="text" placeholder="Name" class="contact__input">
<input type="mail" placeholder="Email" class="contact__input">
<textarea name="" id="" cols="0" rows="10" class="contact__input"></textarea>
<input type="button" value="Send" class="contact__button button">
</form>
</div>
</section>
</main>
<!--===== FOOTER =====-->
<footer class="footer">
<p class="footer__title">Isabella Macchiavello</p>
<div class="footer__social">
<a href="https://www.facebook.com/isabella.macchiavello/" class="footer__icon"><i class='bx bxl-facebook' ></i></a>
<a href="https://www.instagram.com/i.macchiavello/" class="footer__icon"><i class='bx bxl-instagram' ></i></a>
<a href='https://wa.me/33642852324' target='_blank'><i class= "fa fa-whatsapp"></i></a>
</div>
<p>© 2021 copyright all right reserved Isabella Macchiavello</p>
</footer>
<!--===== SCROLL REVEAL =====-->
<script src="https://unpkg.com/scrollreveal"></script>
<!--===== MAIN JS =====-->
<script src="assets/js/main.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-F5EHCBHKEB"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-F5EHCBHKEB');
</script>
</body>
</html>