-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
293 lines (252 loc) · 15.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Renata's website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=devide-width, initial-scale=1.0">
<meta name="description" content="Renata's website application for FAC 2019.">
<meta name="keywords" content="Web development, FAC, 2019">
<link rel="icon" type="image/png" sizes="16x16" href="img/FAC.jpg">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300|Roboto:400,700" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar -->
<div id="nav" class="nav sticky">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
<a href="#banner">HOME</a>
<a href="#code">ABOUT</a>
<a href="#achievements">MY JOURNEY</a>
<a href="#why">WHY</a>
<a href="#track-me">PROGRESS</a>
</div>
</div>
<!-- Banner -->
<div id="str">
<div id="banner" class="banner">
<video src="img/bgvid.mp4" autoplay muted loop></video>
<div class="content effect">
<h1>Welcome</h1>
<p>Scroll down to explore more...</p>
</div>
</div>
</div>
<!-- About me typewriter -->
<div id="code">
<pre id="typewriter" class="blocktext"> <br>
<span class="var-highlight">var</span> aboutMe = {
name: <span class="string-highlight">'Renata'</span>,
age: <span class="string-highlight">22</span>,
location: <span class="string-highlight">'London'</span>,
languages:[<span class="string-highlight">'English'</span>,
<span class="string-highlight">'Spanish'</span>,
<span class="string-highlight">'Czech'</span>],
stack:[<span class="string-highlight">'HTML'</span>,
<span class="string-highlight">'CSS'</span>,
<span class="string-highlight">'Python'</span>],
in progress: <span class="string-highlight">'JavaScript'</span>;
};
</pre>
</div>
<!-- About me -->
<div id="who" class="content-box">
<h1 class="content-title"> WHO AM I? </h1>
<div class="underline"></div>
</div>
<div class="row">
<div class="column" style="box-sizing: border-box;">
<a href="https://github.com/renatajarmova/" target="_blank"><img src="img/renata.png" alt="Avatar" class="avatar" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
<p class="hobbies">Things I like to do: </p>
<div class="wrapper">
<div class="tooltip"><a class="button" href="#popup1"><i class="fas fa-birthday-cake"><br><p>baking</p></i></a>
<span class="tooltiptext">Click me!</span>
</div>
<div id="popup1" class="overlay">
<div id="pop" class="popup">
<a class="close" href="#pop">×</a>
<div class="content">
<img src="img/baking.JPEG" width="100%">
</div>
</div>
</div>
<div class="tooltip"><a class="button" href="#popup2"><i class="fas fa-skiing"><br><p>skiing</p></i></a>
<span class="tooltiptext">Click me!</span>
</div>
<div id="popup2" class="overlay">
<div id="pop" class="popup">
<a class="close" href="#pop">×</a>
<div class="content">
<img src="img/ski.JPEG" width="100%">
</div>
</div>
</div>
<div class="tooltip"><a class="button" href="#popup3"><i class="fas fa-running"><br><p>running</p></i></a>
<span class="tooltiptext">Click me!</span>
</div>
<div id="popup3" class="overlay">
<div id="pop" class="popup">
<a class="close" href="#pop">×</a>
<div class="content">
<img src="img/running.JPEG" width="100%">
</div>
</div>
</div>
<div class="tooltip"><a class="button" href="#popup4"><i class="fas fa-plane-departure"><br><p>traveling</p></i></a>
<span class="tooltiptext">Click me!</span>
</div>
<div id="popup4" class="overlay">
<div id="pop" class="popup">
<a class="close" href="#pop">×</a>
<div class="content">
<img src="img/travel.JPEG" width="100%">
</div>
</div>
</div>
<div class="tooltip"><a class="button" href="#popup5"><i class="fas fa-code"><br><p>coding</p></i></a>
<span class="tooltiptext">Click me!</span>
</div>
<div id="popup5" class="overlay">
<div id="pop" class="popup">
<a class="close" href="#pop">×</a>
<div class="content">
<img src="img/coding.JPEG" width="100%">
</div>
</div>
</div>
</div>
</div>
<div class="column" style="box-sizing: border-box;">
<div id="smaller">
<p>Hi, I'm <span class="purple" style="font-size: 20px;">Renata Guerra</span>! <br><br> I'm half Czech but born and raised in Venezuela and now living in London. I decided to move to the UK due to the current political situation in my home country, which made me leave behind my dream of becoming an Engineer, but luckily, London has been an amazing city full of opportunities (like <span class="purple">FAC</span>) for a passionate woman in tech, like me! <br><br>
To start up my life in the UK, I found a part-time job as a nanny which allowed me enough time to explore the world of coding and boost my interest in technology. I started doing lots of online courses at home...
Since then, I have totally engaged with coding as I love learning new things and coding really suits me as its a never-ending learning process which is really exciting! <br><br>
After a few months of teaching myself the basics, I joined <span class="purple">CodeFirst:Girls</span> courses (which I'll tell you a bit more later...) here's where I realised that becoming a developer is exactly what I want to do - and from then my goal was set. I have studied and learnt new things, looking for more opportunities, knowing about FAC and setting that as my target - now I feel ready and so I am applying for this amazing program as I believe its the best opportunity for me to tackle a career in tech, while being in a supportive environment and being able to grow with and within <span class="purple">FAC</span>. </p>
</div>
</div>
</div>
</div>
<!-- Why coding -->
<div id="why-coding">
<div class="content-box">
<h1 class="content-title"> WHY CODING? </h1>
<div class="underline"></div>
<p>One of the main reasons why I love <span class="purple">coding</span> is because it allows me to express myself in so many different ways, including my creativity, my eagerness to learn, my problem solving skills and my relationship with human languages. Sounds weird? To understand more about how this happens and why I chose coding, have a look at my carousel: </p>
</div>
<!-- Carousel -->
<div id="slides" class="slideshow-container" style="box-sizing: border-box">
<div class="mySlides slide showing fade">
<img src="img/unodos.JPEG" style="width:100%">
<div class="text">CREATIVITY<p>I'm a very crafty person, I love creating new things with my own hands, and coding plays a big roll in boosting my creativity and allowing me to express myself by making my ideas a reality on screen</p></div>
</div>
<div class="mySlides slide fade">
<img src="img/uno.JPEG" style="width:100%">
<div class="text">LEARNING<p>Coding is a continuous learning journey, and that excites me as I really enjoy learning new things and keeping myself updated with the latest technologies</p></div>
</div>
<div class="mySlides slide fade">
<img src="img/unodostres.JPEG" style="width:100%">
<div class="text">LANGUAGES<p>I absolutely love human languages. I speak 3 that allow me to understand multiple others. This ability seems to have also given me the skills to pick up programming languages very quickly too!</p></div>
</div>
<!-- Next/prev/pause buttons -->
<button class="controls prev" id="previous">❮</button>
<button class="controls next" id="next">❯</button>
<button class="controls pause" id="pause">⏸</button>
</div>
</div>
<!-- My Coding Journey -->
<div id="achievements" class="content-box">
<h1 class="content-title"> MY JOURNEY </h1>
<div class="underline"></div>
<p>Throughout <span class="purple">my programming journey</span> so far, which hasn't been too long, I feel I've been able to create some great chunks of code. As an example, this website! But two of my most proudest
projects were the ones I made during my time at the <span class="purple">CodeFirst:Girls</span> courses. Both of these received the award for the
<span class="purple">"Best Final Project"</span> of each cohort course!! After finishing up these courses, I decided that approaching a career in web/software development would be my dream come true. Of course, I thought it would be great for you to see the <span class="purple">passion</span> and <span class="purple">hard-work</span> I put into these, so... Click on them to have a look!</p>
</div>
<div class="row">
<div class="card column" style="box-sizing: border-box;">
<a href="https://renatadev.github.io/the-period-hub/index.html" target="_blank">
<img src="img/theperiodhub.png" alt="The Period Hub" style="width:100%">
<div class="container">
<h3><b>The Period Hub</b></h3>
<p> Website developed by using technologies such as: HTML, CSS (Bootstrap), JavaScript (jQuery), Git, and deployed on GitHub pages. </p>
</div>
</a>
</div>
<div class="card column" style="box-sizing: border-box;">
<a href="https://intense-mesa-48856.herokuapp.com/" target="_blank">
<img src="img/cfgalumni.png" alt="CF:G Alumni" style="width:100%">
<div class="container">
<h3><b>Code First: Alumni</b></h3>
<p> Web application developed by using technologies such as: Python, Flask, Jinja2, CSS (Bootstrap), GitHub, Twitter APIs, and deployed on Heroku. </p>
</div>
</a>
</div>
</div>
<!-- Why FAC -->
<div id="why" class="content-box">
<h1 class="content-title"> WHY FAC? </h1>
<div class="underline"></div>
<div id="smaller">
<p>My principal motivation to have applied to <span class="purple">Founders & Coders</span> is to optimise my inquisitive curiosity about web and software development. I truly believe this is an authentic opportunity for me to develop my expertise and build up my career in a <span class="purple">collaborative team environment</span>. Delivering my fresh ideas and creativity to ensure that I can contribute efficiently to <span class="purple">Founders & Coders mission and future</span> with the help of previous fellows sounds like the best of the chances to explore the industry and settle down in a suitable role in an outstanding team, all of this, after gaining the experience <span class="purple">"hands-on"</span> throughout the 18 weeks at FAC.</p>
<p>Another big reason to choose FAC over other bootcamps is because here I'll not only learn web development, but also will <span class="purple">join an amazing community to make a difference</span>. I love the FAC mission of providing this opportunity to people regardless of their backgrounds and experience. As a bootcamp without the high fees it is an ideal place for me to finally feel that someone believes in <span class="purple">my potential and willingness to learn</span>, and not in my financial situation, type of degree or experience elsewhere. </p>
<p>Becoming part of FAC means the world to me. Being surrounded by people who have the same interests and similar goals is a wonderful way of encouraging each other to succeed, as I strongly believe that by helping others to learn you obtain a better understanding yourself! After teaching myself how to code at home, I now understand the importance of interacting with other people, <span class="purple">sharing and receiving help</span>, making projects in teams and communicating. All these and so much more is what actually makes a <span class="purple">great developer</span>, and I believe <span class="purple">FAC is the perfect place for me</span> to become one!</p>
</div><br><hr><br>
<!-- Quote -->
<div id="blockquote">
<blockquote>
<p>"I see <span class="purple">Founders & Coders</span> as a place to <span class="italic purple">learn</span>, to <span class="italic purple">grow</span>, to <span class="italic purple">explore</span> and to develop not only myself, but those around me."</p>
</blockquote>
</div>
<!-- Facts FAC -->
<br><hr>
<div id="facts" class="content-box">
<h1 class="content-title"> About FAC </h1>
<div class="underline"></div>
<p>Some of my huge list of things I'm looking forward to while (and after) doing FAC, and some other facts that really excite me are:</p><br>
<div class="bg">
<ul id="about-fac" class="about-fac" style="list-style-type:none;">
<li>👬 Pair Programming</li>
<li>👥 Be in a collaborative environment</li>
<li>👋 Meet amazing people</li>
<li>💪 Motivate others while feeling supported too</li>
<li>💻 Learn to test</li>
<li>📚 Learn new technologies</li>
<li>🔁 Mentor the next cohort</li>
<li>💃 Have fun!</li>
</ul>
</div>
</div>
<!-- Track my progress -->
<div id="track-me" class="content-box">
<h1 class="content-title"> TRACK MY PROGRESS </h1>
<div class="underline"></div>
<p>As part of the prerequisites to apply for FAC bootcamp, I accomplished several coding challenges, to have a look at them and track my progress, click on the following buttons:</p>
</div>
<div class="wrapper">
<a href="https://www.freecodecamp.org/renatajarmova" aria-label="FCC profile" target="_blank" class="fab fa-free-code-camp"></a>
<a href="https://github.com/renatadev/FAC" aria-label="GitHub profile" target="_blank" class="fab fa-github"></a>
<a href="https://www.codewars.com/users/renatajarmova" aria-label="Codewars profile" target="_blank" class="fab codewars"> <img src='img/codewars.svg' alt="Codewars Logo"/></a>
<a href="https://www.linkedin.com/in/renatadev/" aria-label="LinkedIn profile" target="_blank" class="fab fa-linkedin"></a>
</div> <br><br>
<!-- Pop up thank you -->
<div class="wrapper">
<a class="button thanks" href="#popup6"><p style="font-size: 12px;">If you made it all the way to the bottom, please click here!</p></a>
<div id="popup6" class="overlay">
<div id="p6" class="popup" style="width: 200px; height: 200px;">
<a class="close" href="#back">×</a>
<div id="back" class="content">
<h3>Thank you for taking your time to go through my website, I really hope you liked it and to see you soon in the interviews :)</h3>
</div>
</div>
</div><br><br>
<!-- Footer -->
<div id="footer" class="footer">
<br><p>Coded with<a href="/" aria-label="Love" class="fa fa-heart" alt="love"></a>by <a class="me" href="https://github.com/renatadev" target="_blank">Renata</a> for : <br>
<a href="https://www.foundersandcoders.com" target="_blank"><img id="fac-logo" src="img/fac-logo.svg" alt="FAC logo" width="150px" height="150px"></a></p>
</div>
<!-- Linking my JS file -->
<script src="js/script.js"></script>
</body>
</html>