-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
386 lines (381 loc) · 17.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
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
<!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" />
<title>Francisco Barros - Software Developer</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600;800&family=Neuton:wght@200;300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="css/showcase.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="https://kit.fontawesome.com/2828f7885a.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" href="img/codebrackets.png" />
</head>
<body>
<!-- End Preloader-->
<!-- Begin Scroll Up Button -->
<form action="#home">
<button id="toTop" title="Go to top">
<i class="fas fa-angle-up"></i>
</button>
</form>
<!-- End Scroll Up Button -->
<!-- Begin Header -->
<div class="header-wrapper" id="home">
<!-- Begin Hero -->
<section class="hero is-large">
<!-- Begin Mobile Nav -->
<nav class="navbar is-transparent is-hidden-desktop">
<!-- Begin Burger Menu -->
<div class="navbar-brand">
<div class="navbar-burger burger" data-target="mobile-nav">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- End Burger Menu -->
<div id="mobile-nav" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item">
<a class="navbar-item" href="#home">Home</a>
</div>
<div class="navbar-item">
<a class="navbar-item" href="#about-me">About & Contact</a>
</div>
<div class="navbar-item">
<a class="navbar-item" href="#services">Services</a>
</div>
<div class="navbar-item">
<a class="navbar-item" href="#soft-skills">Soft Skills</a>
</div>
<div class="navbar-item">
<a class="navbar-item" href="#hard-skills">Hard Skills</a>
</div>
</div>
</div>
</nav>
<!-- End Mobile Nav -->
<!-- Begin Hero Content-->
<div class="hero-body">
<div class="container has-text-centered">
<h2 class="title">Francisco Barros</h2>
<h1 class="subtitle profession">Full-time software engineer</h1>
</div>
</div>
<!-- End Hero Content-->
<!-- Begin Hero Menu -->
<div class="hero-foot ">
<div class="hero-foot--wrapper">
<div class="columns">
<div class="column is-12 hero-menu-desktop has-text-centered">
<ul>
<li class="is-active">
<a href="#home">Home</a>
</li>
<li>
<a href="#about-me">About Me</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#hard-skills">Hard Skills</a>
</li>
<li>
<a href="#soft-skills">Soft Skills</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Hero Menu -->
</section>
<!-- End Hero -->
</div>
<!-- End Header -->
<!-- Begin Main Content -->
<div class="main-content">
<!-- Begin About Me Section -->
<div class="section-light about-me" id="about-me">
<div class="container">
<div class="column is-12 about-me contact">
<h1 class="title has-text-centered section-title">About Me</h1>
</div>
<div class="columns is-multiline">
<div class="column is-three-fifths has-vertically-aligned-content" data-aos="fade-right">
<p class="is-larger"><script type="text/javascript">window.document.write("Francisco Barros, " + Math.trunc((new Date().getTime() - new Date("02/14/1991").getTime()) / (86400000*365)) + " years old");</script></p>
<br />
<p>
Welcome, dear internaut. I hope all is well with you. You have reached the lands of a software engineer working remotely for Talkdesk for the AppConnect team of the Porto office.
In a past life, I studied at Instituto Superior Técnico, where I learned a few programming languages, technologies, and methodologies.
<br><br>
I occasionally work on side projects. These include, among others: developing my own photography portfolio/shop supported by a Django backend, participating in game jams and, assisting my significant half in the making of her own video-game.
<br><br>
Before accomplishing the dream of becoming a software engineer, I completed a bachelor's in Cooking Arts and Restaurant Management. For a while, I worked as a pastry man at the Ritz Lisbon and at Pastelaria Ribeiro (Parede, Cascais).
Then, given my expertise, I accepted a job as deputy chief of operations at H3 Cascais, the famous hamburger chain; A position I held for almost two years.
<br><br>
In my free time, I practice tennis, lift weights, and play video and board games. You may find me playing <i>Magic: The Gathering</i> in a shop near you at some point in time. I'm no hipster, but I do enjoy a good espresso or latte.
Before you read the remaining of my online <i>curriculum vitae</i>, take the chance to see my photographic <a href="https://www.claymemoirs.com/" target="_blank">portfolio</a>.
</p>
<br />
<div class="is-divider"></div>
<div class="columns about-links">
<div class="column">
<p class="heading">
<strong>Email Me</strong>
</p>
<p class="subheading">
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="column">
<p class="heading">
<strong>Ring me</strong>
</p>
<p class="subheading">
(+351) 913 309 132
</p>
</div>
</div>
<div class="columns about-links">
<div class="column">
<p class="heading">
<strong>See my profiles:</strong>
</p>
<p class="subheading">
<a href="https://github.com/FranciscoKloganB?tab=repositories" target="_blank" rel="noopener noreferrer">GitHub</a>,
<a href="https://www.linkedin.com/in/francisco-barros-232631161/" target="_blank" rel="noopener noreferrer">Linkedin</a>
</p>
</div>
</div>
</div>
<div class="column is-two-fifths right-image" data-aos="fade-left">
<figure class="image is-2by3">
<img class="is-rounded" src="img/FBZ_2072.jpg"alt="" />
</figure>
</div>
</div>
</div>
</div>
<!-- End About Me Content -->
<div class="section-dark resume">
<div class="container">
<div class="columns is-multiline" data-aos="fade-in" data-aos-easing="linear">
<div class="column is-12 about-me">
<h1 class="title has-text-centered section-title">
View My Resume
</h1>
<h2 class="subtitle has-text-centered is-hidden-touch">
Obtain more information using the button below.
</h2>
</div>
<div class="column is-three-fifths is-offset-one-fifth">
<div class="button-container">
<form class="has-text-centered" method="GET" action="docs/cv_francisco_barros_en-us-Software-Eng.pdf" target="_blank">
<button class="button">Download Resume <i class="fad fa-download fa-lg"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Begin Services Content -->
<div class="section-color services" id="services">
<div class="container">
<div class="columns is-multiline">
<div class="column is-12 about-me" data-aos="fade-in" data-aos-easing="linear">
<h1 class="title has-text-centered section-title">Services</h1>
<h2 class="subtitle has-text-centered">
Specialized in Cyber-Security, Distributed Systems, Sprinkles of Game Development
</h2>
<br />
</div>
<div class="columns is-12">
<div class="column is-4 has-text-centered" data-aos="fade-in" data-aos-easing="linear">
<i class="fas fa-code fa-3x"></i>
<hr />
<h2>
Scalable, maintainable and, secure backends. I am a capable REST API developer. Bonus experience in video-game development using Unity.
</h2>
</div>
<div class="column is-4 has-text-centered" data-aos="fade-in" data-aos-easing="linear">
<i class="fas fa-paint-brush fa-3x"></i>
<hr />
<h2>
Presentation is not complicated — clean, modern, and responsive designs for your web applications using only JavaScript and CSS frameworks.
</h2>
</div>
<div class="column is-4 has-text-centered" data-aos="fade-in" data-aos-easing="linear">
<i class="fad fa-rocket fa-3x"></i>
<hr />
<h2>
Mentoring and Coaching. Sharing knowledge is a crucial factor in any company. I like teaching as much as I love learning.
</h2>
</div>
</div>
<hr />
</div>
</div>
</div>
<!-- End Services Content -->
<!-- Begin Skills Content -->
<div class="section-dark skills" id="hard-skills">
<div class="container">
<div class="columns is-multiline">
<div class="column is-12 about-me">
<h1 class="title has-text-centered section-title">Hard Skills</h1>
</div>
<div class="column is-6" data-aos="fade-in" data-aos-easing="linear">
<h1>Python 3 — Django, currently studying FastAPI</h1>
<progress class="progress" value="100" max="100"></progress>
<h1> Ruby — Grape and Ruby on Rails</h1>
<progress class="progress" value="100" max="100"></progress>
<h1>JavaScript — jQuery</h1>
<progress class="progress" value="90" max="100"></progress>
<h1>C# — .NET and Unity </h1>
<progress class="progress" value="80" max="100"></progress>
<h1>Java and KotLin - Spring Boot</h1>
<progress class="progress" value="70" max="100"></progress>
<h1>Go</h1>
<progress class="progress" value="30" max="100"></progress>
<h1>Docker and Docker-compose</h1>
<progress class="progress" value="70" max="100"></progress>
</div>
<div class="column is-6" data-aos="fade-in" data-aos-easing="linear">
<h1>Git</h1>
<progress class="progress" value="95" max="100"></progress>
<h1>Agile Development</h1>
<progress class="progress" value="90" max="100"></progress>
<h1>HTML</h1>
<progress class="progress" value="90" max="100"></progress>
<h1>CSS and SCSS — Bulma, Bootstrap</h1>
<progress class="progress" value="80" max="100"></progress>
<h1>Databases — Mongo and Postgres</h1>
<progress class="progress" value="80" max="100"></progress>
<h1>Event — RabbitMQ</h1>
<progress class="progress" value="33" max="100"></progress>
<h1>CI/CD — Gitlab pipeline</h1>
<progress class="progress" value="60" max="100"></progress>
</div>
</div>
</div>
</div>
<!-- End Skills Content -->
<!-- Begin Work Content -->
<div class="section-light skills" id="soft-skills">
<div class="container">
<div class="column is-12 about-me">
<h1 class="title has-text-centered section-title">Soft Skills</h1>
</div>
<div class="columns">
<div class="column is-one-third" data-aos="fade-in" data-aos-easing="linear">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="img/FTB_0015.JPG" alt="Image ">
</figure>
</div>
<header class="card-header">
<p class="card-header-title has-text-centered">
Critical Thinking
</p>
</header>
<div class="card-content">
<div class="main-content">
Computer engineers do more than just programming.
We are, at heart, problem solvers, and my diversified work history made me familiar with both technical as well as social problems.
Photography taught me to criticize myself for achieving better and more consistent results.
Games, such as World of Warcraft, showed me that collaborative thinking makes teams overcome challenges faster.
At the same time, Starcraft and Magic taught me to think strategically for the future.
</div>
</div>
</div>
</div>
<div class="column is-one-third" data-aos="fade-in" data-aos-easing="linear">
<div class="card large">
<div class="card-image">
<figure class="image is-3by2">
<img src="img/FTB_7020.jpg" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title has-text-centered">
Conflict Resolution
</p>
</header>
<div class="card-content">
<div class="main-content">
The projects I have completed on both degrees I undertook have given me a taste of what it is to deal with both conflict and diverse perspectives.
Has a restaurant manager, I often had to solve and handle such situations, both with my peers, subordinates, and clients.
Working in both hospitality and, more recently, in IT fields, further enriched my capacity to handle difficult situations.
</div>
</div>
</div>
</div>
<div class="column is-one-third" data-aos="fade-in" data-aos-easing="linear">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="img/FTB_3854.jpg" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title has-text-centered">
Flexibility
</p>
</header>
<div class="card-content">
<div class="main-content">
Specialists change the world, but flexible people maintain it.
If, like me, you went back to University at the age of twenty-five to fulfill a dream and to be "old" did not stop you from enrolling in a master's degree, you certainly have the required knowledge.
I admit that for me, not everything went as planned, but having an interest in a plethora of extracurricular subjects and being resilient and persistent, makes of those step-backs nothing but small rocks in my path that I adaptively overcome one step at a time.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Work Content -->
</div>
<!-- End Main Content -->
<!-- Begin Footer -->
<div class="footer is-paddingless is-hidden-desktop">
<div class="container has-text-centered is-12">
<p class="has-text-centered">
Template by <a class="is-paddingless" href="https://jgthms.com/" target="_blank">J.Thomas</a>,
modified by <a class="is-paddingless" href="https://github.com/FranciscoKloganB" target="_blank">F.Barros</a>
</p>
<p class="has-text-centered">
Code license: <a class="is-paddingless" href="https://opensource.org/licenses/mit-license.php" target="_blank">MIT</a>,
Content license: <a class="is-paddingless" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY NC SA 4.0</a>
</p>
</div>
</div>
<div class="footer is-paddingless is-hidden-touch is-flex-desktop">
<div class="container has-text-centered is-12">
<p class="has-text-centered">
Template by <a class="is-paddingless" href="https://jgthms.com/" target="_blank">J.Thomas</a>,
modified by <a class="is-paddingless" href="https://github.com/FranciscoKloganB" target="_blank">F.Barros</a> —
Code license: <a class="is-paddingless" href="https://opensource.org/licenses/mit-license.php" target="_blank">MIT</a>,
Content license: <a class="is-paddingless" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY NC SA 4.0</a>
</p>
</div>
</div>
<!-- End Footer -->
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/showcase.js"></script>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init({
easing: "ease-out",
duration: 800,
});
</script>
</body>
</html>