-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
390 lines (330 loc) · 20.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
<html>
<head>
<title>Matthew Marquise</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="arrow.css"/>
<link rel="icon" type="image/x-icon" href="/img/favicon1.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon1.ico"/>
<link rel="apple-touch-icon" href="/img/favicon1.ico">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link rel="image_src" href="/img/hellobanner.jpg" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- MOBILE NAV -->
<div class="hidden-desktop">
<header class="header">
<a href="home" style="text-decoration: none; color: black; font-size: 30px" class="logo">
<img src="/img/mattsmac.png" width="50" height="54" class="d-inline-block align-top" alt="me">
</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu" style="display: block; text-align: center;">
<li class="nav-item"><a href="work" class="nav-link" id="nav">Work</a></li>
<li class="nav-item"><a href="about" class="nav-link" id="nav">About</a></li>
<li class="nav-item"><a href="resume.pdf" class="nav-link" id="nav">Resume</a></li>
<li class="nav-item"><a href="contact" class="nav-link" id="nav">Contact</a></li>
</ul>
</header>
<br><br><br><br>
</div>
<!-- DESKTOP NAV -->
<div class="sidenav hidden-mobile">
<br><br>
<a href="home"><img src="/img/mattsmac.png" width="55" height="60" class="d-inline-block align-top" alt="hi"></a>
<br>
<a href="work"><span class="linkborder">Work</span></a>
<a href="about"><span class="linkborder">About</span></a>
<a href="resume.pdf"><span class="linkborder">Resume</span></a>
<a href="contact"><span class="linkborder">Contact</span></a>
<div class="bottom-left" style="padding-bottom: 15%;">
<div class="row">
<a href="https://www.linkedin.com/in/matthew-marquise-4a688019a/" target="blank"><i class="fa fa-linkedin" style="font-size: 22px;"></i></a>
<a href="https://github.com/MattMarquise" target="blank"><i class="fa fa-github" style="font-size: 22px;"></i></a>
<a href="https://matthewmarquise.medium.com" target="blank"><img width="25" height="25" src="/img/mediumlogo.png"></a>
</div>
</div>
</div>
<!-- MAIN -->
<div class="main">
<h2><span class="wave">👋🏻</span> Hello.</h2>
<h3>I'm Matthew Marquise.</h3>
<p style="font-size: 13px; font-family: 'Roboto Mono', monospace;">
<span class="dot"></span>
Currently Marketing and CX Intern @ CQC
</p>
<div style="font-size: 13px; width: 90%;">
<p>You can call me Matt! As a product designer & front-end developer, I have a strong passion for creating human-centered websites, apps, and software that better the lives of others. <a href="about" class="linkborder2">Learn More About Me →</a></p>
</div>
<br>
<!-- WHAT I'VE BEEN UP TO-->
<h3>What I've been doing lately...</h3>
<img src="/img/islandpropertypromo.png" alt="" width="100%" style="padding: 2%; border-radius: 40px;">
<p style="font-size: 13px; font-family: 'Roboto Mono', monospace; padding-left: 2%;">
I've been working to deisgn and develop a new, modern website for a real estate agency in Maine. <a href="islandproperty" class="linkborder2">Read the case study →</a>
</p>
<br>
<!-- RECENT PROJECTS LIST -->
<h3 style="font-weight: lighter;">Featured Work:</h3>
<div class="row">
<div class="col-sm-6">
<a href="islandproperty">
<div class="card border-0" style="width: 100%;">
<img class="card-img-top border-0 card-hover" src="/img/islandpropertybanner.jpg" alt="Card image cap">
<div class="card-body">
<a></a>
<div class="row col-12">
<div class="col-8 card-text" style="font-size: 12px; padding: 0%; text-decoration: none;">Island Property<br><span style="color: grey;">Research / Design / Development</span></div>
<div class="col-4" align="right" style="font-size: 15px;">
<a href="https://matthewmarquise.medium.com/working-with-island-property-to-bring-a-fresh-modern-look-to-their-website-and-brand-36e2b2874a3e?sk=da61b65800a3701494fa57bce7e7741a" style="text-decoration: none; color: black;" target="blank"><img width="25" height="25" src="/img/mediumlogo.png"></a>
</div>
</div>
</div>
</div>
</a>
<br>
</div>
<div class="col-sm-6">
<a href="streetside">
<div class="card border-0" style="width: 100%;">
<img class="card-img-top border-0 card-hover" src="/img/streetsidebanner2.jpg" alt="Card image cap">
<div class="card-body">
<a></a>
<div class="row col-12">
<div class="col-8 card-text" style="font-size: 12px; padding: 0%; text-decoration: none;">Street Side - Concept<br><span style="color: grey;">Research / Design / Testing / Branding / Graphic Design</span></div>
<div class="col-4" align="right" style="font-size: 15px;">
<a href="https://matthewmarquise.medium.com/street-side-an-app-to-change-how-everyone-eats-at-food-trucks-44f09091b091?sk=ab59dd6993f2a2643b84e5b0df8648c4" style="text-decoration: none; color: black;" target="blank"><img width="25" height="25" src="/img/mediumlogo.png"></a>
</div>
</div>
</div>
</div>
</a>
<br>
</div>
</div>
<div class="center">
<a href="work" class="btn smallborderedbutton">View More →</a>
</div>
<br><br>
<!-- RECENT BLOG POSTS -->
<h3 style="font-weight: lighter;">Featured Blog Posts:</h3>
<div class="row">
<div class="col-sm-6" style="font-size: 12px">
<div class="card border-0" style="width: 100%;">
<img class="card-img-top border border-dark" src="/img/StreetSideBanner.jpg" alt="Card image cap">
<div class="card-body">
<h3>Case Study: Street Side</h3>
<p class="card-text">At the beginning of 2021, I started a project as part of Google’s UX Design Professional Certificate specialization. That project has evolved into an app idea called Street Side that would change the way people order from food trucks, increase the number of people who regularly eat at food trucks, and transform how truck owners operate their business. The origin of the idea...</p>
<div class="row">
<div class="col">
<img src="/img/claps.jpg" alt="Claps" width="16px" height="auto"> 39 Claps
</div>
<div class="col" align="right">
<a href="https://matthewmarquise.medium.com/street-side-an-app-to-change-how-everyone-eats-at-food-trucks-44f09091b091" class="btn btn-sm smallborderedbutton">Read Case Study →</a>
</div>
</div>
<p class="card-text"><small class="text-muted">Jun. 18, 2021</small></p>
</div>
</div>
<br>
</div>
<div class="col-sm-6" style="font-size: 12px">
<div class="card border-0" style="width: 100%;">
<img class="card-img-top border border-dark" src="/img/devtocover1.jpg" alt="Card image cap">
<div class="card-body">
<h3>Implement Dark Mode On Your Website.</h3>
<p class="card-text">Dark Mode is an extremely popular feature to implement into your website using basic HTML, CSS and JS. So why don't you have it on yours yet? In three easy steps...</p>
<div class="row">
<div class="col">
<i class="fa fa-eye" aria-hidden="true"></i> 13,617 Views
</div>
<div class="col" align="right">
<a href="https://dev.to/mattmarquise/implement-dark-mode-on-your-website-5c5a" class="btn btn-sm smallborderedbutton">Read Full Article →</a>
</div>
</div>
<p class="card-text" style="font-size: 12px;"><small class="text-muted">Feb. 25, 2021</small></p>
</div>
</div>
</div>
</div>
<div class="center">
<a href="https://matthewmarquise.medium.com" class="btn smallborderedbutton">Read More on Medium →</a>
</div>
<br>
<div class="container" class="hidden-desktop">
<p class="hidden-desktop" align="center">Connect with Me:</p>
<div class="row" align="center" class="hidden-desktop">
<div class="col">
<a class="hidden-desktop" href="https://www.linkedin.com/in/matthew-marquise-4a688019a/"><i class="fa fa-linkedin" style="font-size: 22px;"></i></a>
</div>
<div class="col">
<a class="hidden-desktop" href="https://github.com/MattMarquise"><i class="fa fa-github" style="font-size: 22px;"></i></a>
</div>
<div class="col">
<a class="hidden-desktop" href="https://dev.to/mattmarquise"><img width="20" height="20" src="https://d2fltix0v2e0sb.cloudfront.net/dev-black.png"></a>
</div>
</div>
</div>
<br>
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"></div>
<br>
<!-- FOOTER -->
<div class="row">
<div class="col-6 col-md-4" style="font-size: 12px;">
<b><u>Skills</u></b>
<br>
<div style="padding: 4%;">
<dl>
<dt>Front-End Development:</dt>
<div style="padding-left: 10px;">
<dd>- Html</dd>
<dd>- CSS</dd>
<dd>- JS</dd>
<dd>- Laravel</dd>
<dd>- Experience using Squarespace, Shopify, and Wix Editor</dd>
<dd>- Responsive Web Design</dd>
<dd>- Rapid Bug Fixes</dd>
</div>
<br>
<dt>UX Design:</dt>
<div style="padding-left: 10px;">
<dd>- Research</dd>
<dd>- Writing</dd>
<dd>- Wireframing</dd>
<dd>- Design</dd>
<dd>- Prototyping</dd>
<dd>- User Centered Research, Design, Testing</dd>
<dd>- Experience using Figma & Adobe Xd</dd>
</div>
<br>
<dt>Marketing:</dt>
<div style="padding-left: 10px;">
<dd>- Social Ad Campaigns</dd>
<dd>- Mailchimp Campaigns</dd>
<dd>- Photography</dd>
<dd>- Graphic Designs</dd>
</div>
<br>
<dt>Other:</dt>
<div style="padding-left: 10px;">
<dd>- Music Producing / Songwriting</dd>
<dd>- Digital Photography & Cinematography</dd>
<dd>- Digital Designs For CNC Machines</dd>
<dd>- Hardcore Tennis Player</dd>
</div>
</dl>
</div>
</div>
<div class="col-6 col-md-4" style="font-size: 12px;">
<b><u>Experience</u></b>
<div style="padding: 4%;">
<dt>Island Property:</dt>
<dd style="color: grey;">Website Designer and Developer <br> Freelance / July - December 2021</dd>
<div style="padding-left: 10px;">
<p>Designed and developed a modern website for Island Property, a real estate and vacation rental agency. Used Wix’s EditorX and database management tools to design and develop a user-centered interface.</p>
<dd>- Product Design</dd>
<dd>- Web Development and Maintenance Using Wix Advanced EditorX Platform</dd>
</div>
<br>
<dt>Custom Quality Covers:</dt>
<dd style="color: grey;">Customer Experience and Marketing, Intern <br> Part-Time / 2020 - Present</dd>
<div style="padding-left: 10px;">
<p>Selected to lead the sales marketing & customer experience (CX) for CQC, utilizing and increasing my knowledge of Mailchimp email campaigns and website development/maintenance with Shopify and Squarespace sites and DNS and CDN management. Enhanced their online presence by scaling social media presence and conducting SEO keyword research by analyzing the target audience.</p>
<dd>- Mailchimp Email Ad Campaigns</dd>
<dd>- Web Development and Maintenance with Shopify and Squarespace</dd>
<dd>- Social Media Ad Campaigns</dd>
<dd>- Digital Designs For CNC Machines</dd>
</div>
<br>
<dt>Raleigh Golf Carts:</dt>
<dd style="color: grey;">Developer & Marketing Intern <br> Part-Time / Dec 2020 - Apr 2021</dd>
<div style="padding-left: 10px;">
<p>Designed & developed a modern, user focused website while using graphic design skills to create high quality advertisements used in various marketing campaigns across their social media profiles.</p>
<dd>- Social Media Ad Campaigns</dd>
<dd>- Web Design & Development</dd>
<dd>- Photography & Graphic Design</dd>
</div>
</div>
</div>
<div class="col-6 col-md-4" style="font-size: 12px;">
<b><u>Education/Certifications</u></b>
<br>
<div style="padding: 4%;">
<p>Google - UX Design Specialization Certification</p>
<p>Google Digital Garage - Fundamentals of Digital Marketing</p>
<p>HubSpot - Content Marketing</p>
<p>Goldsmith's, University of London - Mathematics for Computer Science</p>
<p>Harvard CS50 - Introduction to Computer Science</p>
</div>
<br>
<b><u>Achievements</u></b>
<br>
<div style="padding: 4%;">
<p>Daily UI 100 Day Design Challenge</p>
<p>Hacktoberfest 2021 PR Challenge</p>
<p>Hacktoberfest 2020 PR Challenge</p>
</div>
</div>
</div>
<br><br><br>
<p style="font-size: 12px; color: grey;" align="center">This site is powered by pure HTML, CSS & JS.</p>
</div>
</body>
</html>
<style>
body {
margin: 0;
color: black;
height: 100%;
background-color: white;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none;
color: black;
}
a:hover{
text-decoration: none;
color: black;
}
/* BLACK BORDERED BUTTON */
.borderedbutton {
border: 2px solid black;
background-color: white;
color: black;
padding: 14px 28px;
font-size: 16px;
color: black;
}
.borderedbutton:hover {
background: black;
color:white;
transition: 1s;
}
/* SMALL BLACK BORDERED BUTTON */
.smallborderedbutton {
border: 2px solid black;
background-color: white;
color: black;
padding: 8px 20px;
font-size: 10px;
color: black;
}
.smallborderedbutton:hover {
background: black;
color:white;
transition: 1s;
}
</style>