-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
477 lines (431 loc) · 26 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
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
<!--
Hey there!
Thanks for taking the time to take a look at the source code of my website.
Have a great day! :-)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Carolina Knoll - Front-end Web Developer</title>
<meta name="keywords" content="web, design, development, portfolio, front end, front-end, internship, estágio, html, css, html5, css3, jquery, javascript, ux, santa catarina, florianopolis, brazil, brasil">
<meta name="author" content="Carolina Knoll | Front-end Web Developer">
<meta name="description" content="Carolina Knoll - Beginner Front-end Web Developer who also loves UX Design.">
<!-- Favicon -->
<link rel="icon" href="img/favicon.ico">
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="200" class="themed-section nightly-theme">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="fa fa-asterisk"></i> Carolina Knoll <i id="magic-boop" class="fa fa-magic nightly-theme"></i>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home<span class="sr-only">(current)</span></a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<section class="home" id="home">
<div class="container">
<div class="presentation">
<h1 class="presentation-first" data-sr="enter bottom and hustle 100px over 2s"><span>Hi there!</span></h1>
<h1 class="presentation-second" data-sr="wait 0.5s, then enter bottom and hustle 100px over 2s">
Let's share <span id="firstTopic"></span> and make <span id="secondTopic"></span> happen together!
<span><i class="fa fa-rocket"></i></span>
</h1>
<h1 class="presentation-third" data-sr="wait 1s, then enter bottom and hustle 100px over 2s">
I'm <span> Carolina,</span> a <span><span id="thirdTopic"></span></span> youthful learner.
</h1>
<h1 class="presentation-fourth" data-sr="wait 1.5s, then enter bottom and hustle 100px over 2s">
I'm all about <span>frontend</span> tech: <span>React, Sass, you know it. </span>Oh, and making things look pixel-pretty.
<span><i class="fa fa-bar-chart"></i></span>
</h1>
</div>
</div>
</section>
<section class="about" id="about">
<div class="container">
<h2 class="section-title" data-sr="wait 0.1s, then enter bottom and hustle 50px over 2s"><i class="fa fa-asterisk"></i> About me</h2>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
<h2 class="box-heading"><i class="fa fa-asterisk" aria-hidden="true"></i> Introduction</h2>
<p class="box-description">
Hey there! I'm currently starting as a Junior dev.
During my two-year internship, I learned to use various tech tools, and worked remotely on multiple periods of time.
I also practiced English for three months on an international project at work.
</p>
<p class="box-description">
I'm that person who likes to standardize texts, behaviour and styles for components, like buttons and calendars.
I also enjoy working with page responsivity across devices and window/screen sizes.
</p>
<p class="box-description">
When not coding, I feed the mind with Sudoku, reading and Kung Fu,
which helps with discipline and inner/outer awareness while also nurturing happy and healthful mind and body.
</p>
</div>
<div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
<h2 class="box-heading"><i class="fa fa-keyboard-o" aria-hidden="true"></i> Technical Keywords</h2>
<p class="box-description">
#React, #HTML, #CSS/SCSS/SASS, #JavaScript, #jQuery, #Bootstrap, #Highcharts, #i18n,
#classNames, #mdi-react, #moment, #React-Bootstrap, #react-bootstrap-daterangepicker
</p>
</div>
<div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
<h2 class="box-heading">
<i class="fa fa-asterisk" aria-hidden="true"></i> Personality
<a class="description-link" href="http://www.myersbriggs.org/my-mbti-personality-type/mbti-basics/home.htm">MBTI</a> — INFJ
</h2>
<p class="box-description">
INFJ stands for Introversion (I), Intuition (N), Feeling (F), Judgement (J).
</p>
<p class="box-description">
It means that I can speak from the heart, while also being logical.
I tend to follow my intuition and be a more private person, and I will act my best way on achieving meaningful results.
</p>
</div>
<div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
<h2 class="box-heading"><i class="fa fa-bar-chart-o" aria-hidden="true"></i> Personal Growth</h2>
<p class="box-description">As humans, we have a wide variety of strenghts and weaknesses. As we are constantly growing and having new experiences, I find it nice to have something visual to evaluate ourselves and observe how we change throughout the years.</p>
<p class="box-description">This chart was generated after answering Talentoday's <a class="description-link" href="https://www.talentoday.com/">personality questionnaire</a>, which can be taken for free every 6 months.</p>
<div class="graph growth-graph">
<canvas class="growth-chart" id="growthChart" height="200"></canvas>
<img class="growth-chart-img-mythical img-responsive" src="img/personality-chart-mythical.jpg">
<img class="growth-chart-img-nightly img-responsive" src="img/personality-chart-nightly.jpg">
</div>
</div>
<div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
<h2 class="box-heading"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Education</h2>
<p class="box-description">Bachelor's Degree in Information Systems — Estácio de Sá University.</p>
<p class="box-description">Graduated! — December, 2018.</p>
<h2 class="box-heading"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Self-Study Courses</h2>
<a class="box-description profile-links" href="https://www.freecodecamp.com/map">Front-end Development path (ongoing) — FreeCodeCamp</a>
<a class="box-description profile-links" href="https://br.udacity.com/course/responsive-web-design-fundamentals--ud893/">Responsive Web Design Fundamentals — Udacity</a>
<a class="box-description profile-links" href="https://app.pluralsight.com/library/courses/hacking-user-experience/table-of-contents">Hacking the User Experience/UX for Developers — Pluralsight</a>
<a class="box-description profile-links" href="https://app.pluralsight.com/library/courses/cux-designprinciples/table-of-contents">Creating User Experiences: Fundamental Design Principles — Pluralsight</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
<img src="img/profile-image.jpg" class="img-responsive profile-image" alt="">
<h2 class="profile-name">Carolina Knoll 🌻 </h2>
<h4 class="profile-location"><i class="fa fa-map-marker"></i> Florianópolis, SC, Brazil</h4>
<h4 class="box-description">Hopeful frontend developer in bloom. </h4>
<h4 class="box-description"> I believe everyone has the power to help craft a better world. For that, I am learning to do my best. 🌼</h4>
<div class="profile-links-wrapper">
<a class="box-description profile-links" href="mailto:[email protected]"><i class="fa fa-envelope-o"></i> [email protected]</a>
<a class="box-description profile-links" href="https://github.com/carolinaknoll"><i class="fa fa-github-alt"></i> github.com/carolinaknoll</a>
<a class="box-description profile-links" href="https://www.linkedin.com/in/carolinaknoll"><i class="fa fa-linkedin"></i> linkedin.com/in/carolinaknoll</a>
</div>
</div>
<div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
<h2 class="box-heading"><i class="fa fa-bar-chart"></i> Work Culture</h2>
<div class="profile-sliders">
<div class="slider">
<div class="slider-knob slider-knob-one"></div>
</div>
<h4 class="sliders-description-left">formal</h4>
<h4 class="sliders-description-right">informal</h4>
</div>
<div class="profile-sliders">
<div class="slider">
<div class="slider-knob slider-knob-two"></div>
</div>
<h4 class="sliders-description-left">cooperative</h4>
<h4 class="sliders-description-right">competitive</h4>
</div>
<div class="profile-sliders">
<div class="slider">
<div class="slider-knob slider-knob-three"></div>
</div>
<h4 class="sliders-description-left">team-first</h4>
<h4 class="sliders-description-right">individual-first</h4>
</div>
<div class="profile-sliders">
<div class="slider">
<div class="slider-knob slider-knob-four"></div>
</div>
<h4 class="sliders-description-left">pixel-perfect</h4>
<h4 class="sliders-description-right">fast results</h4>
</div>
<div class="profile-sliders">
<div class="slider">
<div class="slider-knob slider-knob-five"></div>
</div>
<h4 class="sliders-description-left">conservative</h4>
<h4 class="sliders-description-right">adaptative</h4>
</div>
</div>
<div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
<h2 class="box-heading"><i class="fa fa-line-chart" aria-hidden="true"></i> CodeWars</h2>
<p class="box-description"> CodeWars helps me practice my logic and problem solving skills with fun exercises, named kata.</p>
<a href="https://www.codewars.com/users/carolinaknoll">
<img class="img-responsive codewars-badge" src="https://www.codewars.com/users/carolinaknoll/badges/large" alt="My CodeWars profile badge">
</a>
</div>
<div class="section-box" data-sr="enter bottom and hustle 50px over 2s">
<h2 class="box-heading"><i class="fa fa-birthday-cake" aria-hidden="true"></i> Hobbies</h2>
<p class="box-description">When not coding or studying, I might most probably be...</p>
<p class="box-description"><i class="fa fa-music"></i> Finding new favorite songs.</p>
<p class="box-description"><i class="fa fa-television"></i> Watching anime and series.</p>
<p class="box-description"><i class="fa fa-pencil-square-o"></i> Reading/writing poetry.</p>
<p class="box-description"><i class="fa fa-rocket"></i> Or maybe just laughing, exploring and discovering new things! <i class="fa fa-smile-o"></i></p>
</div>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<h2 class="section-title" data-sr="wait 0.1s, then enter bottom and hustle 50px over 2s"><i class="fa fa-asterisk"></i> Projects</h2>
<div class="portfolio-projects">
<div class="row">
<div class="column col-xs-12 col-sm-6 col-md-6" data-sr="enter bottom and hustle 50px over 1s, with opacity 0.5">
<div class="portfolio-block">
<div class="portfolio-image">
<img class="img-responsive" src="img/markdown-previewer-project.jpg" width="500" height="225">
</div>
<div class="portfolio-title">
<p><i class="fa fa-asterisk"></i> Markdown Previewer</p>
</div>
<div class="portfolio-description">
<p><i class="fa fa-edit"></i> View the compiled markdown while you type.</p>
</div>
<div class="portfolio-tags">
<p><i class="fa fa-cogs"></i> React, Marked for Markdown Compiling, HTML/CSS.</p>
</div>
<div class="portfolio-links">
<a href="http://carolinaknoll.github.io/markdown-previewer/" class="visit-project">
<p><i class="fa fa-search-plus"></i> Visit project</p></a>
<a href="https://github.com/carolinaknoll/markdown-previewer" class="view-code">
<p><i class="fa fa-code"></i> View code</p></a>
</div>
</div>
</div>
<div class="column col-xs-12 col-sm-6 col-md-6" data-sr="wait 0.4s, then enter bottom and hustle 50px over 1s, with opacity 0.5">
<div class="portfolio-block">
<div class="portfolio-image">
<img class="img-responsive" src="img/awesome-gamified-project.jpg" width="500" height="225">
</div>
<div class="portfolio-title">
<p><i class="fa fa-asterisk"></i> Awesome Gamified.</p>
</div>
<div class="portfolio-description">
<p><i class="fa fa-edit"></i> See and save links from inside of Awesome README files.</p>
</div>
<div class="portfolio-tags">
<p><i class="fa fa-cogs"></i> React, Marked, Axios, Webpack, ESLint, PropTypes.</p>
</div>
<div class="portfolio-links">
<a href="http://carolinaknoll.github.io/awesome-gamified/" class="visit-project">
<p><i class="fa fa-search-plus"></i> Visit project</p></a>
<a href="https://github.com/carolinaknoll/awesome-gamified" class="view-code">
<p><i class="fa fa-code"></i> View code</p></a>
</div>
</div>
</div>
<div class="column col-xs-12 col-sm-6 col-md-6" data-sr="enter bottom and hustle 50px over 1s, with opacity 0.5">
<div class="portfolio-block">
<div class="portfolio-image">
<img class="img-responsive" src="img/wikipedia-viewer-project.jpg" width="500" height="225">
</div>
<div class="portfolio-title">
<p><i class="fa fa-asterisk"></i> Wikipedia Viewer</p>
</div>
<div class="portfolio-description">
<p><i class="fa fa-edit"></i> Search Wikipedia article snippets and random articles.</p>
</div>
<div class="portfolio-tags">
<p><i class="fa fa-cogs"></i> React, Axios, html-react-parser, HTML/CSS, JavaScript.</p>
</div>
<div class="portfolio-links">
<a href="http://carolinaknoll.github.io/wikipedia-viewer/" class="visit-project">
<p><i class="fa fa-search-plus"></i> Visit project</p></a>
<a href="https://github.com/carolinaknoll/wikipedia-viewer" class="view-code">
<p><i class="fa fa-code"></i> View code</p></a>
</div>
</div>
</div>
<div class="column col-xs-12 col-sm-6 col-md-6" data-sr="wait 0.4s, then enter bottom and hustle 50px over 1s, with opacity 0.5">
<div class="portfolio-block">
<div class="portfolio-image">
<img class="img-responsive project-image-flat-web" src="img/javascript-calculator-project.jpg" width="500" height="225">
</div>
<div class="portfolio-title">
<p><i class="fa fa-asterisk"></i> Online JavaScript Calculator.</p>
</div>
<div class="portfolio-description">
<p><i class="fa fa-edit"></i> <a href="https://www.freecodecamp.com/challenges/build-a-javascript-calculator"><span>freeCodeCamp</span></a> frontend project.</p>
</div>
<div class="portfolio-tags">
<p><i class="fa fa-cogs"></i> React, HTML/CSS, JavaScript.</p>
</div>
<div class="portfolio-links">
<a href="http://carolinaknoll.github.io/javascript-calculator/" class="visit-project">
<p><i class="fa fa-search-plus"></i> Visit project</p></a>
<a href="https://github.com/carolinaknoll/javascript-calculator" class="view-code">
<p><i class="fa fa-code"></i> View code</p></a>
</div>
</div>
</div>
<div class="column col-xs-12 col-sm-6 col-md-6" data-sr="enter bottom and hustle 50px over 1s, with opacity 0.5">
<div class="portfolio-block">
<div class="portfolio-image">
<img class="img-responsive" src="img/insight-project.jpg" width="500" height="225">
</div>
<div class="portfolio-title">
<p><i class="fa fa-asterisk"></i> Insight - Follow your dreams.</p>
</div>
<div class="portfolio-description">
<p><i class="fa fa-edit"></i> PSD template to desktop-first code.</p>
</div>
<div class="portfolio-tags">
<p><i class="fa fa-cogs"></i> HTML/CSS, JavaScript.</p>
</div>
<div class="portfolio-links">
<a href="http://carolinaknoll.github.io/insight/" class="visit-project">
<p><i class="fa fa-search-plus"></i> Visit project</p></a>
<a href="https://github.com/carolinaknoll/insight" class="view-code">
<p><i class="fa fa-code"></i> View code</p></a>
</div>
</div>
</div>
<div class="column col-xs-12 col-sm-6 col-md-6" data-sr="wait 0.4s, then enter bottom and hustle 50px over 1s, with opacity 0.5">
<div class="portfolio-block">
<div class="portfolio-image">
<img class="img-responsive" src="img/flat-web-project.jpg" width="500" height="225">
</div>
<div class="portfolio-title">
<p><i class="fa fa-asterisk"></i> Flat Web - Count on us when you need.</p>
</div>
<div class="portfolio-description">
<p><i class="fa fa-edit"></i> PSD template to desktop-first code.</p>
</div>
<div class="portfolio-tags">
<p><i class="fa fa-cogs"></i> HTML/CSS, JavaScript.</p>
</div>
<div class="portfolio-links">
<a href="http://carolinaknoll.github.io/flat-web/" class="visit-project">
<p><i class="fa fa-search-plus"></i> Visit project</p></a>
<a href="https://github.com/carolinaknoll/flat-web" class="view-code">
<p><i class="fa fa-code"></i> View code</p></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<h2 class="section-title" data-sr="wait 0.1s, then enter bottom and hustle 50px over 1s"><i class="fa fa-asterisk"></i> Contact</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6" data-sr="wait 0.3s, then enter bottom and hustle 50px over 1s">
<div class="section-box">
<h2 class="box-heading"><i class="fa fa-heart"></i> Thank you!</h2>
<p class="box-description">Thanks for spending your time here on my website.</p>
<p class="box-description">Time is the most precious thing we have, and once we spend it, we can never get it back.</p>
<p class="box-description">Thanks for sharing yours with me! <i class="fa fa-hand-peace-o" aria-hidden="true"></i></p>
</div>
<div class="section-box">
<h2 class="box-heading"><i class="fa fa-comments"></i> Stay connected</h2>
<p class="box-description">Let's meet and work together! <i class="fa fa-handshake-o" aria-hidden="true"></i></p>
<p class="box-description">If you are interested, you can know more about me and follow my updates through these social sites:</p>
<ul class="social-list">
<li class="social-small-box">
<a href="mailto:[email protected]"><i class="social-icon fa fa-envelope-o"></i></a>
</li>
<li class="social-small-box">
<a href="https://www.linkedin.com/in/carolinaknoll"><i class="social-icon fa fa-linkedin"></i></a>
</li>
<li class="social-small-box">
<a href="https://github.com/carolinaknoll"><i class="social-icon fa fa-github"></i></a>
</li>
<li class="social-small-box">
<a href="https://twitter.com/carolina_knoll"><i class="social-icon fa fa-twitter"></i></a>
</li>
<li class="social-small-box">
<a href="http://codepen.io/carolinaknoll/"><i class="social-icon fa fa-codepen"></i></a>
</li>
<li class="social-small-box">
<a href="http://www.freecodecamp.com/carolinaknoll"><i class="social-icon fa fa-free-code-camp"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6" data-sr="wait 0.5s, then enter bottom and hustle 50px over 1s">
<div class="section-box">
<h2 class="box-heading"><i class="fa fa-rocket"></i> Let's talk about spaceships.</h2>
<p class="box-description">Whichever works best for you, here or via direct e-mail. <br/>...do aliens exist? <i class="fa fa-reddit-alien"></i></p>
<form action="https://formspree.io/[email protected]" method="POST" class="contact-form">
<input type="text" name="name" class="form-input" id="user" placeholder="Hi! I'm...">
<input type="email" name="_replyto" class="form-input" placeholder="My email is...">
<textarea name="text" class="form-input" placeholder="I believe extraterrestrial forms of life are..."></textarea>
<input type="submit" value="Send" class="form-input">
</form>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-top">
<div class="container">
<ul class="social-list">
<li class="social-small-box">
<a href="mailto:[email protected]"><i class="social-icon fa fa-envelope-o"></i></a>
</li>
<li class="social-small-box">
<a href="https://www.linkedin.com/in/carolinaknoll"><i class="social-icon fa fa-linkedin"></i></a>
</li>
<li class="social-small-box">
<a href="https://github.com/carolinaknoll"><i class="social-icon fa fa-github"></i></a>
</li>
<li class="social-small-box">
<a href="https://twitter.com/carolina_knoll"><i class="social-icon fa fa-twitter"></i></a>
</li>
<li class="social-small-box">
<a href="http://codepen.io/carolinaknoll/"><i class="social-icon fa fa-codepen"></i></a>
</li>
<li class="social-small-box">
<a href="http://www.freecodecamp.com/carolinaknoll"><i class="social-icon fa fa-free-code-camp"></i></a>
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>Handcrafted with <i class="fa fa-heart"></i> and <i class="fa fa-coffee"></i> by Carolina Knoll.</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/scrollReveal.min.js"></script>
<script> window.sr = scrollReveal(); </script>
</body>
</html>