-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (176 loc) · 12.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ECZT75Q4NM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ECZT75Q4NM');
</script>
<!-- Web Thumbnail Stuff -->
<meta property="og:image" content="https://iamsergio.dev/assets/img/web-thumbnail.png" />
<meta property="og:title" content="Sergio Garcia Gallego" />
<meta property="og:description" content="Sergio is a Junior Frontend Developer specializing in all technologies necessary to build spectacular web experiences." />
<meta property="og:url" content="https://iamsergio.dev" />
<meta property="og:image:width" content="1903" />
<meta property="og:image:height" content="895" />
<meta property="og:type" content="website" />
<!-- Twitter Specific Thumbnail Properties -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="https://iamsergio.dev" />
<meta name="twitter:title" content="Sergio Garcia Gallego" />
<meta name="twitter:description" content="Sergio is a Junior Frontend Developer specializing in all technologies necessary to build spectacular web experiences." />
<meta name="twitter:image" content="https://iamsergio.dev/assets/img/web-thumbnail.png" />
<!-- Character Set -->
<meta charset="UTF-8" />
<!-- Compatability -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Viewports -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#FEAC5E" />
<!-- For the Bots -->
<meta name="robots" content="index, follow" />
<!-- Site Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/assets/img/favicon/safari-pinned-tab.svg" color="#FBAA64">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#FFF">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#FFF">
<!-- Site Author -->
<meta name="author" content="Sergio Garcia Gallego">
<!-- Site Title -->
<title>Sergio Garcia Gallego</title>
<!-- Site Description -->
<meta name="description" content="Sergio is a Junior Frontend Developer specializing in all technologies necessary to build spectacular web experiences.">
<!-- Canonical Tag -->
<link rel="canonical" href="https://iamsergio.dev/">
<!-- Internal Links -->
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/assets/css/scrollbar.css">
<link rel="stylesheet" href="/assets/css/responsive.css">
<link rel="stylesheet" href="/assets/css/animate.css">
<!-- External Links -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<!-- Icon Package -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<nav class="fixedtop">
<ul class="left">
<li><a href="#"><svg width="65" height="65" viewBox="0 0 71 71" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.07107 42.4264C3.16582 38.5212 3.16583 32.1895 7.07107 28.2843L28.2843 7.07108C32.1895 3.16583 38.5212 3.16583 42.4264 7.07108L63.6396 28.2843C67.5449 32.1895 67.5449 38.5212 63.6396 42.4264L42.4264 63.6396C38.5212 67.5449 32.1895 67.5449 28.2843 63.6396L7.07107 42.4264Z" fill="url(#paint0_linear_2_6)"/><path d="M35.7051 42.8711H35.7402C36.9824 42.8711 37.9375 42.6191 38.6055 42.1152C39.2852 41.5996 39.625 40.9023 39.625 40.0234C39.625 39.1328 39.3145 38.4238 38.6934 37.8965C38.084 37.3574 36.9824 36.8477 35.3887 36.3672C32.4941 35.5352 30.3789 34.5742 29.043 33.4844C27.7188 32.3828 27.0566 30.9062 27.0566 29.0547C27.0566 27.1914 27.8594 25.6621 29.4648 24.4668C31.0703 23.2715 33.127 22.6738 35.6348 22.6738C38.1543 22.6738 40.2109 23.3418 41.8047 24.6777C43.3984 26.002 44.166 27.666 44.1074 29.6699L44.0898 29.7578H39.6074C39.6074 28.668 39.2441 27.8008 38.5176 27.1562C37.8027 26.5117 36.8242 26.1895 35.582 26.1895C34.3398 26.1895 33.373 26.459 32.6816 26.998C32.002 27.5254 31.6621 28.2051 31.6621 29.0371C31.6621 29.8574 32.0078 30.5195 32.6992 31.0234C33.4023 31.5156 34.668 32.0488 36.4961 32.623C39.1094 33.3496 41.0488 34.2988 42.3145 35.4707C43.5918 36.6309 44.2305 38.166 44.2305 40.0762C44.2305 41.9863 43.457 43.5156 41.9102 44.6641C40.375 45.8008 38.3125 46.3691 35.7227 46.3691C34.0234 46.3691 32.4707 46.0879 31.0645 45.5254C29.6582 44.9512 28.5273 44.0957 27.6719 42.959C26.8164 41.8223 26.4004 40.5039 26.4238 39.0039L26.459 38.8984H30.9414C30.9414 41.5469 32.5293 42.8711 35.7051 42.8711Z" fill="white"/><defs><linearGradient id="paint0_linear_2_6" x1="17.6777" y1="17.6777" x2="53.033" y2="53.033" gradientUnits="userSpaceOnUse"><stop stop-color="#FEAC5E"/><stop offset="0.503125" stop-color="#C779D0"/><stop offset="1" stop-color="#4BC0C8"/></linearGradient></defs></svg></a></li>
</ul>
<ul class="right mono">
<li><i>01.</i><a href="#about" class="pgLinks">About</a></li>
<li><i>02.</i><a href="#experience" class="pgLinks">Experience</a></li>
<li><i>03.</i><a href="#contact" class="pgLinks">Contact</a></li>
<li><a href="/assets/docs/resume/resume.pdf" target="_blank" class="pgLinks" id="last">Resume</a></li>
</ul>
</nav>
<section class="head bg">
<main class="landing">
<div role="doc-subtitle">Hi, my name is</div>
<h1 class="myName"><a href="/assets/docs/resume/resume.pdf" target="_blank">Sergio Garcia <span class="optional">Gallego</span></a></h1>
<h2 class="myJob">and <span id="typewriter"></span><span class="blink"></span></h2>
<p class="myDesc">An ambitious UK-based 18 year old Junior Frontend Developer with 1.5 years of experience. Currently working at <a href="https://purplebeard.co.uk/" target="_blank" rel="noreferrer" class="outLink">PurpleBeard Training <i class="uil uil-external-link-alt"></i></a> with the vision of making IT apprenticeships & training more accessible.</p>
<p class="myDonations">If you enjoy this web experience, consider donating to a cause I hold dear to my heart, the <a href="https://www.rainforesttrust.org" target="_blank" class="outLink">Rainforest Trust <i class="uil uil-external-link-alt"></i></a>, working tirelessly to save the wildlife & ecosystem.</p>
</main>
<div class="inline">
<ul class="social">
<li><a href="https://github.com/sgarciagallego" target="_blank"><i class="uil uil-github-alt" id="github"></i></li>
<li><a href="https://www.linkedin.com/in/sgarciagallego/" target="_blank"><i class="uil uil-linkedin-alt" id="linkedin"></i></a></li>
<li><a href="https://www.rainforesttrust.org/?form=FUNBUNYXEWL" target="_blank"><i class="uil uil-gift" id="donate"></i></a></li>
<li><a href="https://www.instagram.com/s_garciagallego/" target="_blank"><i class="uil uil-instagram" id="instagram"></i></a></li>
<li><a href="https://twitter.com/mrgarciagallego" target="_blank"><i class="uil uil-twitter-alt" id="last"></i></a></li>
</ul>
</div>
</section>
<a name="about"></a>
<section class="about">
<div class="heading">
<i>01.</i><h3>About Me</h3>
</div>
<div class="me">
<div class="longDesc">
<p>Hey there <span class="eWave"></span> I'm Sergio, & my passion lies in tech, preferably where design & UX is involved.</p>
<p>My magnet towards computing began at a young age, when the only way for me to install Minecraft was through a battered laptop running Fedora Linux 18. The challenge of using Xterm to install any application taunted me to learn more I guess.</p>
<p>Fast forward to 2022, and I have had the pleasure to work at <a href="https://vasaveop.com/" target="_blank" rel="noreferrer" class="outLink">a tech start-up <i class="uil uil-external-link-alt"></i></a> and have allowed the opportunity for a bit of <a href="https://meghdhara.co.uk" target="_blank" rel="noreferrer" class="outLink">freelancing <i class="uil uil-external-link-alt"></i></a> as well.</p>
<p>Come present day I am now working for a <a href="https://purplebeard.co.uk/" target="_blank" rel="noreferrer" class="outLink">gov.uk training provider <i class="uil uil-external-link-alt"></i></a>. It has been a real rollercoaster for the time I've been in the industry, & I can't wait to see what comes next!</p>
<p>Here are a few technologies I have been using daily:</p>
<ul class="techSkills">
<li><i class="uil uil-html5-alt" title="HTML5" id="html5"></i></li>
<li><i class="uil uil-css3-simple" title="CSS3" id="css3"></i></li>
<li><i class="uil uil-code-branch" title="Git" id="git"></i></li>
<li><i class="uil uil-java-script" title="JavaScript(ES6)" id="js"></i></li>
<li><i class="uil uil-react" title="React" id="react"></i></li>
</ul>
</div>
<div class="myPic">
<img src="/assets/img/myPic.png" alt="This is a Picture of me!">
</div>
</div>
</section>
<a name="experience"></a>
<section class="experience">
<div class="heading">
<i>02.</i><h3>Experience</h3>
</div>
<div class="timeline">
<div class="card">
<div role="doc-subtitle" class="date">Jan22 - Present</div>
<h4>Junior Frontend Dev & TA <span class="stylechar">@</span> <a href="https://purplebeard.co.uk" target="_blank" rel="noreferrer">PurpleBeard Training ltd.</a></h4>
<ul class="rolePoints">
<li>Working closely with inter-disciplinary teams to achieve set goals.</li>
<li>Maintaining & building code whilst collaborating with team members to efficiently reach deadlines.</li>
<li>Mentoring & assisting apprentices undertaking Introduction to Frontend courses as part of our programs</li>
</ul>
</div>
<div class="card">
<div role="doc-subtitle" class="date">Sep20 - Dec21</div>
<h4>Apprentice Frontend Web Dev <span class="stylechar">@</span> <a href="https://vasaveop.com/" target="_blank" rel="noreferrer">Vasave</a></h4>
<ul class="rolePoints">
<li>Actively worked collaboratively on in house & client projects.</li>
<li>Maintained & built production-level code via modern approaches to achieve set goals.</li>
<li>Kept constant communication with various relevant teams of designers, clients, & content producers daily.</li>
</ul>
</div>
</div>
</section>
<a name="contact"></a>
<section class="contact">
<div class="heading">
<i>03.</i><h3>Contact</h3>
</div>
<div class="contactForm">
<div class="whyContact">
<p>Although I am not actively searching for new work, I am always open to chat about anything! </p>
</div>
<form action="https://formsubmit.co/d7abdea6c189dd7cc96d4eeffd77d5eb" method="POST">
<input type="text" name="Full Name" placeholder="Full Name" required>
<input type="email" name="Email Address" placeholder="Email Address" required>
<input type="tel" name="Phone Number" placeholder="Phone No." required>
<textarea name="Message" cols="30" rows="2" placeholder="Your Message" minlength="25" maxlength="500" required></textarea>
<button type="submit" value="submit">Submit</button>
<input type="hidden" name="_next" value="https://iamsergio.dev/">
<input type="hidden" name="_captcha" value="false">
<input type="text" name="_honey" style="display: none;">
</form>
</div>
</section>
<footer class="allContact">
<p>Build & Design by <a href="mailto:gallegogarciasergio@gmail.com"><span class="copyright"></span> Sergio Garcia Gallego</a></p>
</footer>
<!-- TypeWriter JS -->
<script src="/assets/js/typewriter.js"></script>
<!-- Tidio Chat (until custom ChatBot complete) -->
</body>
</html>