-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (155 loc) · 12.7 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
<!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">
<title>Eric Salvi | A Front-end Developer Portfolio</title>
<meta name="description" content="This is a personal portfolio for Eric Salvi, showcasing his font-end development work and listing out his skills.">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
crossorigin="anonymous" />
<link rel="stylesheet" href="./styles/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
<main>
<div class="switch" data-switch-dark aria-hidden>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5 27C8.59625 27 3 21.4037 3 14.5C3 7.59625 8.59625 2 15.5 2C22.4037 2 28 7.59625 28 14.5C28 21.4037 22.4037 27 15.5 27ZM7.16125 20.0312C7.98286 21.2605 9.06683 22.2923 10.3351 23.0523C11.6034 23.8123 13.0245 24.2816 14.4959 24.4264C15.9674 24.5712 17.4526 24.3879 18.8448 23.8897C20.2369 23.3915 21.5012 22.5908 22.5466 21.5452C23.5921 20.4997 24.3927 19.2353 24.8908 17.8432C25.3888 16.451 25.572 14.9657 25.4271 13.4943C25.2822 12.0228 24.8127 10.6018 24.0526 9.3336C23.2925 8.06538 22.2606 6.98149 21.0312 6.16C21.5702 8.08278 21.5875 10.1144 21.0814 12.0461C20.5752 13.9778 19.5639 15.7398 18.1513 17.1513C16.74 18.5637 14.9781 19.5749 13.0467 20.081C11.1152 20.5872 9.08385 20.57 7.16125 20.0312Z" fill="#2B2B2B"/>
</svg>
</div>
<div class="content-wrapper">
<header>
<div class="header__left">
<h1>I'm Eric Salvi <br><span>Front-end</span> Developer</h1>
<p>My expertise is paying attention to details. I love anything to do with web design and my focus is primarily with front-end development. I am currently learning React.</p>
<a href="mailto:ericsalvi@gmail.com"><div class="btn">contact me <img src="./images/arrow.svg" alt=""></div></a>
</div>
<div class="header__right"><img src="./images/Eric-Salvi-Headshot.jpg" alt="Headshot of Eric Salvi"></div>
</header>
</div>
<div class="content-wrapper">
<section class="portfolio">
<div class="section-header">
<h2>Portfolio</h2>
<p>Check out what I have been working on!</p>
</div>
<ul id="portfolio__filters">
<li><a href="javascript:void(0)" class="filters active" onclick="filterSelection('all')">All Categories</a></li>
<li><a href="javascript:void(0)" class="filters" onclick="filterSelection('css')">CSS</a></li>
<li><a href="javascript:void(0)" class="filters" onclick="filterSelection('js')">JS</a></li>
<li><a href="javascript:void(0)" class="filters" onclick="filterSelection('react')">React</a></li>
<li><a href="javascript:void(0)" class="filters" onclick="filterSelection('api')">API</a></li>
</ul>
<div class="portfolio__container">
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css js api" href="https://www.frontendmentor.io/solutions/advice-generator-app-semantic-html-axios-and-a-whole-lot-of-fun-k_y1ioogCK" target="_blank"><img src="./images/portfolio/advice-generator.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css js react" href="https://www.frontendmentor.io/solutions/dynamic-time-tracking-dashboard-built-w-codux-react-and-ts-OgZdC2ugTB" target="_blank"><img src="./images/portfolio/time-tracking-dashboard.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css js" href="https://www.frontendmentor.io/solutions/interactive-rating-component-github-integration-from-start-to-finish-ToI-qKj8u4" target="_blank"><img src="./images/portfolio/rating-component.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item react api" href="https://netflix-clone-b0ff3.web.app" target="_blank"><img src="./images/portfolio/netflix-clone-react.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css js" href="https://www.frontendmentor.io/solutions/intro-component-solution-mobilefirst-js-flex-fun-submit-message-xxP1qRJV_" target="_blank"><img src="./images/portfolio/sign-up-form.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css js" href="https://www.frontendmentor.io/solutions/sunnyside-agency-lp-solution-scss-js-semantic-html-bem-fun-Dy6SvLBne" target="_blank"><img src="./images/portfolio/sunnyside-creative.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css js" href="https://www.frontendmentor.io/solutions/ping-coming-soon-component-scss-mobilefirst-bem-v5Aq_-oih" target="_blank"><img src="./images/portfolio/ping-launching-soon.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item react api" href="https://hulu-clone-95bde.web.app" target="_blank"><img src="./images/portfolio/hulu-clone-react.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css js" href="https://www.frontendmentor.io/solutions/base-apparel-coming-soon-page-css-js-flex-form-submit-modal-feature-h1vSYv3fi" target="_blank"><img src="./images/portfolio/base-apparel-coming-soon.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item react" href="https://airbnb-clone-6ce3a.firebaseapp.com" target="_blank"><img src="./images/portfolio/airbnb-clone-react.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css" href="https://www.frontendmentor.io/solutions/a-fun-one-single-price-grid-component-made-using-grid-and-rem-units-z30rEVxsw" target="_blank"><img src="./images/portfolio/price-grid.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css" href="https://www.frontendmentor.io/solutions/huddle-landing-page-solution-a-scss-use-first-for-me-D-EVB2lyv" target="_blank"><img src="./images/portfolio/huddle-register.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css" href="https://www.frontendmentor.io/solutions/dynamic-faq-accordion-card-using-absolutely-no-javascript-cBwcop7j9" target="_blank"><img src="./images/portfolio/accordion-card.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css" href="https://www.frontendmentor.io/solutions/social-proof-section-using-flexbox-css-variables-and-rem-units-olkp0I8Ke" target="_blank"><img src="./images/portfolio/social-proof.png" alt=""></a>
<a aria-label="Portfolio item for Eric Salvi" class="portfolio__item css" href="https://www.frontendmentor.io/solutions/four-card-feature-section-using-gaps-within-flexbox-mobilefirst-css-ImSimoRKn" target="_blank"><img src="./images/portfolio/4-card-feature.png" alt=""></a>
</div>
</section>
</div>
<div class="content-wrapper">
<section class="experience">
<div class="section-header">
<h2>Experiences & In Development</h2>
<p>20+ years of tinkering with web design and development.</p>
</div>
<div class="experience__container">
<div class="experience__item">
<h3>Front-end</h3>
<ul>
<li>HTML 5</li>
<li>CSS 3</li>
<li>JavaScript</li>
<li>Bootstrap</li>
<li>HubL</li>
</ul>
</div>
<div class="experience__item">
<h3>Other</h3>
<ul>
<li>SCSS</li>
<li>Flexbox</li>
<li>Grid</li>
<li>BEM</li>
<li>Mobile-first Approach</li>
<li>Accessibility</li>
</ul>
</div>
<div class="experience__item">
<h3>Tools</h3>
<ul>
<li>Visual Studio Code</li>
<li>GitHub</li>
<li>Affinity Designer</li>
<li>Figma</li>
<li>HubSpot CMS</li>
<li>Codux</li>
<li>axe DevTools</li>
</ul>
</div>
<div class="experience__item">
<h3>In Development</h3>
<ul>
<li>React</li>
<li>Tailwind CSS</li>
<li>Styled Components</li>
<li>Node.js</li>
<li>Typescript</li>
<li>APIs</li>
</ul>
</div>
</div>
</section>
</div>
<div class="content-wrapper">
<section class="certification">
<div class="section-header">
<h2>Certifications</h2>
<p>A few of my more recent certifications.</p>
</div>
<div class="certification__container">
<div class="certification__item">
<a href="https://reactforbeginners.com/" target="_blank"><img src="./images/certifications/wes-bos-react-for-beginners-certification.png" alt="certification of react for beginners for Eric Salvi"></a>
</div>
<div class="certification__item">
<a href="https://www.hackerrank.com/certificates/4cf624886caa" target="_blank"><img src="./images/certifications/hackerrank-certification-for-css.png" alt="certification for css for Eric Salvi"></a>
</div>
</div>
</section>
</div>
<div class="content-wrapper">
<footer>
Copyright © 2023 | Eric Salvi
<div class="footer__links">
<a aria-label="A link to Eric Salvi's github profile." href="https://github.com/ericsalvi" target="_blank">
<i class="fab fa-github fa-2x"></i>
</a>
<a aria-label="A link to Eric Salvi's frontend mentor profile." href="https://www.frontendmentor.io/profile/ericsalvi" target="_blank">
<i class="fas fa-user-circle fa-2x"></i>
</a>
<a aria-label="A link to Eric Salvi's LinkedIn profile." href="https://www.linkedin.com/in/eric-salvi-06548872/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="67px" id="Layer_1" version="1.1" viewBox="0 0 67 67" width="67px" xml:space="preserve"><path d="M50.837,48.137V36.425c0-6.275-3.35-9.195-7.816-9.195 c-3.604,0-5.219,1.983-6.119,3.374V27.71h-6.79c0.09,1.917,0,20.427,0,20.427h6.79V36.729c0-0.609,0.044-1.219,0.224-1.655 c0.49-1.22,1.607-2.483,3.482-2.483c2.458,0,3.44,1.873,3.44,4.618v10.929H50.837z M22.959,24.922c2.367,0,3.842-1.57,3.842-3.531 c-0.044-2.003-1.475-3.528-3.797-3.528s-3.841,1.524-3.841,3.528c0,1.961,1.474,3.531,3.753,3.531H22.959z M34,64 C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z M26.354,48.137V27.71h-6.789v20.427 H26.354z" style="fill-rule:evenodd;clip-rule:evenodd;"/></svg>
</a>
</div>
</footer>
</div>
</main>
<script type="text/javascript" src="./scripts/main.js"></script>
</body>
</html>