-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
348 lines (335 loc) · 10.3 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
<!DOCTYPE html>
<html>
<head>
<title>Sebastian Ospina | Portfolio</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="assets/css/main.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">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body class="is-preload">
<!-- LANGUAGE SELECTOR -->
<div class="language">
<h5>LANGUAGE:</h5>
<a href="./index.html">
<img
class="flag"
src="https://hatscripts.github.io/circle-flags/flags/gb.svg"
width="48"
/>
</a>
<a href="./spanish_index.html">
<img
class="flag"
src="https://hatscripts.github.io/circle-flags/flags/es.svg"
width="48"
/>
</a>
</div>
<!-- Wrapper -->
<div id="wrapper">
<!-- Intro -->
<section class="intro">
<header>
<h1>Hi, I'm Sebastian!</h1>
<p>
a software developer - focused on creative and efficient user
experiences that people love.
</p>
<ul class="actions">
<li>
<a href="#first" class="arrow scrolly"
><span class="label">Next</span></a
>
</li>
</ul>
</header>
<div class="content">
<span class="image fill" data-position="center"
><iframe
id="animation"
src="https://my.spline.design/glasstypecopy-dc5f37ea43fb9c54daccbc04206eacb2/"
frameborder="0"
width="100%"
height="100%"
></iframe>
<img id="static" src="images/pic01.jpg" alt="static logo" />
</span>
</div>
</section>
<!-- Section -->
<section id="first">
<header>
<h2>About me</h2>
</header>
<div class="content">
<p>
<strong>I'm a software developer based in Bogotá, Colombia! </strong>
</p>
<p>
I started my professional career by learning 3D modeling design by myself. As a result of that, I had the opportunity to work as a senior designer for 2+ years, where I discovered my passion for design and the ability to materialize every customer's ideas. After that, due to COVID-19, I transitioned into my career as a customer service specialist, providing fast and efficient solutions to my customers.
</p>
<p>
Being always passionate about software engineering, I decided to
transition to web development to start a new phase, taking advantage
of all my designing and customer service experience to provide
<strong>creative, efficient, and characteristic</strong> solutions
and experiences.
</p>
<p>
When I'm not coding, you can find me playing music, working out,
gaming or reading articles about space and science. 🚀
</p>
</div>
</section>
<!-- Section -->
<section id="services">
<header>
<h2>my services & tech skills</h2>
</header>
<div class="content">
<!-- <p class="takenI">
<em>"I can tell you I don't have money. But what I do have, are a very
particular set of skills, skills I have acquired over a very long
career, skills that make me an open
<b>window to all kinds of opportunities</b> for people like you."</em>
<br />
<br />
<span id="quote"> - Taken 😁</span>
<br />
</p> -->
<ul class="feature-icons">
<li class="icon solid fa-mobile-alt">
<strong>Responsive Design</strong><br />I will make sure that your
website is responsive across all devices, it is important that
anyone has an incredible experience from their phone, laptop, or
desktop!
</li>
<li class="icon solid fa-stream">
<strong>Personalization</strong><br />
Let's capture your ideas and portray them on the web! You will
have a website fully customized for you or your company.
</li>
<li class="icon solid fa-file-code">
<strong>Development</strong><br />The website will be built with
HTML, CSS and JavaScript. After this, we will work together to
deploy your website and utilize your domain name.
</li>
<li class="icon solid fa-user-friends">
<strong>Support</strong><br />I will work with you until we create a product that you are proud of, and I will communicate all the progress to you until your website is ready!
</li>
<p class="offer">
I'll be very pleased to offer a chance to small businesses and individuals to be noticed on the internet, whether by creating a fully functional web application from the ground up or updating an existing one, thus saving you time and the headache of trying to set up your internet presence alone!
</p>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>My work</h2>
</header>
<div class="content">
<p>
<strong>This is it!</strong> These are some of the projects that
I've worked on so far:
</p>
<!-- Section -->
<section>
<header>
<h3>Coding Resources API</h3>
<p class="description">
<strong>HTML5, CSS3, JS, Node.js, Express</strong> This API serves educational content for a wide variety of computer science topics, languages and technologies relevant to web development.
</p>
<ul class="actions">
<li>
<a
target="_blank"
href="https://coding-resources-api.herokuapp.com/"
class="button primary"
>View</a
>
</li>
`
</ul>
</header>
<div class="content">
<div class="gallery">
<a href="images/gallery/fulls/02.jpg"
><img src="images/gallery/thumbs/02.jpg" alt=""
/></a>
<a href="images/gallery/fulls/03.jpg"
><img src="images/gallery/thumbs/03.jpg" alt=""
/></a>
</div>
</div>
</section>
<!-- Section -->
<section>
<header>
<h3>Breaking Bad - Infopage</h3>
<p class="description">
<strong>HTML5, CSS3, JS, APIs</strong> - Platform for Breaking Bad fans to find general information about their favorite characters!
</p>
<ul class="actions">
<li>
<a
target="_blank"
href="https://ethodeus.github.io/breaking-bad-info-page/"
class="button primary"
>View</a
>
</li>
`
</ul>
</header>
<div class="content">
<div class="gallery">
<a href="images/gallery/fulls/05.jpg" class="landscape"
><img id='breaking-bad' src="images/gallery/thumbs/05.jpg" alt=""
/></a>
</div>
</div>
</section>
<!-- Section -->
<section>
<header>
<h3>3D Modeling</h3>
<p class="description">
<strong>SketchUp, V-ray</strong> - Some of my 3D modeling work
you can check out.
</p>
<ul class="actions">
<li>
<a
target="_blank"
href="https://www.behance.net/Blackintsub"
class="button primary"
>View More</a
>
</li>
`
</ul>
</header>
<div class="content">
<div class="gallery">
<a href="images/gallery/fulls/08.jpg" class="portrait"
><img src="images/gallery/thumbs/08.jpg" alt=""
/></a>
<a href="images/gallery/fulls/09.jpg" class="portrait"
><img src="images/gallery/thumbs/09.jpg" alt=""
/></a>
<a href="images/gallery/fulls/10.jpg" class="landscape"
><img src="images/gallery/thumbs/10.jpg" alt=""
/></a>
</div>
</div>
</section>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>Let's connect <br />and start a conversation!</h2>
</header>
<div class="content">
<p>
I am currently open to new freelance projects, full-time job
opportunities, and some memes! :)
</p>
<form action="POST" data-netlify="true">
<div class="fields">
<div class="field half">
<input required type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input required
type="email"
name="email"
id="email"
placeholder="Email"
/>
</div>
<div class="field">
<textarea required
name="message"
id="message"
placeholder="Message"
rows="5"
></textarea>
</div>
</div>
<ul class="actions">
<li>
<input required
type="submit"
value="Send Message"
class="button primary"
/>
</li>
</ul>
</form>
</div>
<footer>
<ul class="items">
<li>
<h3>Email</h3>
<a href="mailto:sc.ospc@gmail.com">sc.ospc@gmail.com</a>
</li>
<li>
<h3>Elsewhere</h3>
<ul class="icons">
<li>
<a
target="_blank"
href="https://twitter.com/dev_ethos"
class="icon brands fa-twitter"
><span class="label">Twitter</span></a
>
</li>
<li>
<a
target="_blank"
href="https://www.linkedin.com/in/sebastianocospina/"
class="icon brands fa-linkedin-in"
><span class="label">LinkedIn</span></a
>
</li>
<li>
<a
target="_blank"
href="https://github.com/Ethodeus"
class="icon brands fa-github"
><span class="label">GitHub</span></a
>
</li>
</ul>
</li>
</ul>
</footer>
</section>
<!-- Copyright -->
<div class="copyright">
© Sebastian Ospina. All rights reserved. Design:
<a href="https://html5up.net">HTML5 UP</a>.
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>