-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
475 lines (439 loc) · 24.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
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
<!DOCTYPE html>
<head 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.0">
<meta name="description" content="fac-22 application">
<meta name="keywords" content="fac html">
<meta name="author" content="0bubbles0">
<title>Tue FAC-22 Application Barbara</title>
<link rel="stylesheet" type="text/css" href="resources/styles/styles.css">
<!--Icons Font Awesome 4-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="resources/scripts/scripts.js" defer></script>
</head>
<body class="page-full">
<!--Logo-bar-->
<header class="logo-bar">
<img class="logo-img" src="resources/img/logo/logo1-250-100.png">
<h3 id="logo-bar-title"></h3>
<button class="button" id="button-surprise">Surprise!</button>
</header>
<!--Nav-bar-->
<aside class="nav-bar">
<nav class="nav-flex">
<a class="nav-link no-mobile" href="#c-welcome"><img class="bubble-list"
src="resources/img/logo/bubble-mini.png">Welcome</a>
<a class="nav-link no-mobile" href="#c-intro"><img class="bubble-list"
src="resources/img/logo/bubble-mini.png">Background</a>
<a class="nav-link no-mobile" href="#c-values"><img class="bubble-list"
src="resources/img/logo/bubble-mini.png">Values</a>
<a class="nav-link no-mobile" href="#c-ideas"><img class="bubble-list"
src="resources/img/logo/bubble-mini.png">Ideas</a>
<a class="nav-link no-mobile" href="#c-projects"><img class="bubble-list"
src="resources/img/logo/bubble-mini.png">Projects</a>
<a class="nav-link no-mobile" href="#c-music"><img class="bubble-list"
src="resources/img/logo/bubble-mini.png">BeetBoot</a>
<a class="nav-link no-mobile" href="#c-goals"><img class="bubble-list"
src="resources/img/logo/bubble-mini.png">Coding Goals</a>
<a class="nav-link" href="#c-fac-appl"><img class="bubble-list" src="resources/img/logo/bubble-mini.png">FaC</a>
<a class="nav-link" id="nav-l-profiles" href="#c-profiles"><img class="bubble-list"
src="resources/img/logo/bubble-mini.png">Profiles</a>
</nav>
</aside>
<main class="page-content">
<!--Welcome-->
<section id="c-welcome" class="chapter-creative">
<h1 id="welc-h1" class="ch-hd">Welcome!</h1>
<h2 id="welc-h2-name">My name is <span class="p-bold">Barbara</span> (she/her)</h2>
<p id="welc-hobbies">Some of my favourite <span class="p-bold">activities</span> are playing the violin,
pub-quizzes and knitting (also: making lists)</p>
<p id="welc-dev">Currently, I am working on becoming a <span class="p-bold">Web Developer</span></p>
<img id="welc-img-violin" class="creative-img" src="resources/img/deco/violin-1.jpg" alt="violin">
<img id="welc-img-yarn" class="creative-img no-tablet" src="resources/img/deco/yes-yarn-balls-21-02-22.jpg"
alt="yarn">
<img id="welc-img-bubble-corner" class="creative-img no-mobile" src="resources/img/logo/bordure-right.png"
alt="bubble-corner">
</section>
<!--Background-->
<section id="c-intro" class="chapter-stack">
<h3 class="chapter-stack-heading ch-hd">Background</h3>
<div class="chapter-stack-column">
<h4>During the studies for my <span class="p-bold">BSc Economics at SOAS</span>, University of London
(School
of Oriental and African Studies), I <span class="p-bold">learned</span> to:</h4>
<ul>
<li><span class="p-bold">Research</span> new topics in collaboration as well as independently.</li>
<li><span class="p-bold">Solve</span> real-life <span class="p-bold">problems analytically</span> through
abstract models.</li>
<li>Understand the causes and societal <span class="p-bold">cost of unequal opportunities</span> and unused
potential, as well as
international development issues, incentives and interactions between individuals, businesses and
societies.
</li>
<li>Enjoy the <span class="p-bold">international environment</span> and <span class="p-bold">diversity of
ideas</span> from teachers and
peers, around 50% of us being
international, from all walks of life, cultures, ages, classes and personal identities.</li>
<li>Value the <span class="p-bold">creativity</span> and brain power that can be sparked through <span
class="p-bold">respectful,
open-minded dialogue</span>.</li>
</ul>
</div>
<div class="chapter-stack-column">
<h4><span class="p-bold">Discovering Coding</span> through a coincidental advert for the Google
Grasshopper
app <span class="p-bold">felt</span>:</h4>
<ul>
<li>Immediately <span class="p-bold">comfortable</span> and logical.</li>
<li>Like <span class="p-bold">lightning struck</span> – why had no one shown me this at school?</li>
<li><span class="p-bold">Inviting</span> – I had always assumed it a secret club for teenage boys.</li>
<li><span class="p-bold">Exciting</span> to imagine the life-hacks I might learn to create with a few lines
of
code!</li>
<li>Like a path to get my life unstuck.</li>
</ul>
</div>
</section>
<!--Values-->
<section id="c-values" class="chapter-stack">
<h3 class="chapter-stack-heading ch-hd">Personal Values</h3>
<div class="chapter-stack-column column-low">
<h4>Through improving my <span class="p-bold">coding skills</span>, I hope to:</h4>
<ul>
<li>Contribute in preparing us for a <span class="p-bold">better future</span>.</li>
<li>Play an active part in fully <span class="p-bold">digitising society</span>, opening it up to less
tech-savvy consumers.</li>
<li><span class="p-bold">Support</span> people and organisations already on that path, lend my brain-power
to
<span class="p-bold">“good tech”</span>.
</li>
</ul>
</div>
<div class="chapter-stack-column">
<h4>I wish to contribute to technology that <span class="p-bold">enables people to thrive</span> and is:</h4>
<ul>
<li><span class="p-bold">Accessible & Inclusive:</span> affordable/free, proactively non-biased, open to all
physical and learning
abilities.</li>
<li><span class="p-bold">Sustainable:</span> anticipating impacts on the environment, society, mental and
physical health.</li>
<li><span class="p-bold">Responsible:</span> consensual, considerate of data and consumer protection,
protecting
vulnerable groups,
preventing misinformation.</li>
<li><span class="p-bold">Supportive:</span> strengthening community spirit and personal wellness (financial,
physical, emotional).</li>
<li>Bridging <span class="p-bold">opportunity gaps</span>.</li>
<li>Solving <span class="p-bold">everyday problems</span> for ordinary people.</li>
<li>Easing <span class="p-bold">decision fatigue</span> and the burden of <span class="p-bold">emotional
labour</span>, especially for women
and underfunded
communities.
</li>
</ul>
</div>
</section>
<!--Ideas-->
<section id="c-ideas" class="chapter-stack">
<h3 class="chapter-stack-heading ch-hd">Ideas</h3>
<div class="chapter-stack-column column-low">
<h4>If I could learn the coding skills to <span class="p-bold">solve 4 life problems</span> through apps...
</h4>
<ul>
<li>All available for free, because £1 can be an access barrier.</li>
<li>Information provided by certified professionals in the relevant fields.</li>
<li>Use of assistive (voice) technologies.</li>
<li>Guaranteed data protection – this is tech to serve its users, not exploit them.</li>
</ul>
</div>
<div class="chapter-stack-column carousel-grid">
<article class="carousel-item-container" id="carousel-ideas">
<article class="project-tile idea-tile visible">
<h6 class="project-name">1. Live healthier</h6>
<ul>
<li>For <span class="p-bold">healthier habits</span> with nutrition, exercise, sleep & sustainability</li>
<li>Simple, personalised, realistic</li>
<li>Planning tool for Recipes, Shopping Lists, Meal Plans, Workout-Schedules...</li>
<li>Smart nudges on healthy swaps, seasonal vegetable calendar, rain forecast, carbon footprints...</li>
<li>Potential link-up with your GP/nutritionist.</li>
</ul>
</article>
<article class="project-tile idea-tile hidden">
<h6 class="project-name">2. Private Tutor Bot</h6>
<ul>
<li>School Lessons as fun as gaming</li>
<li>Fully interactive, <span class="p-bold">animated Syllabus</span></li>
<li>Customise lessons, replay explanations at home, get exercise corrections</li>
<li>Accommodate different learning styles, attention spans</li>
<li>Make private tutoring available to every child regardless of family income</li>
</ul>
</article>
<article class="project-tile idea-tile hidden">
<h6 class="project-name">3. Neighbourhood Errands</h6>
<ul>
<li><span class="p-bold">Volunteer Uber</span></li>
<li>For rural areas, seniors, vulnerable people, new parents...</li>
<li>Make giving & asking for help less daunting</li>
<li>Reduce loneliness, connect communities</li>
<li>Safety checks, assistive technology, auto-pay...</li>
</ul>
</article>
<article class="project-tile idea-tile hidden">
<h6 class="project-name">4. Personal Safety</h6>
<ul>
<li><span class="p-bold">Call 999 via safe word</span></li>
<li>For threatening situations (street crime, assault, domestic abuse)</li>
<li>Saying a safe word or signal makes your phone contact a friend or 999</li>
<li>Depending on legality: record GPS location, start audio-recording for evidence</li>
</ul>
</article>
</article>
<button class="button-car button-car-back" id="button-back-ideas">◀</button>
<button class="button-car button-car-next" id="button-next-ideas">▶</button>
</div>
</section>
<!--Projects-->
<section id="c-projects" class="chapter-stack">
<h3 class="chapter-stack-heading ch-hd">Completed Projects</h3>
<div class="chapter-stack-column carousel-grid carousel-mobile">
<!--Projects fcc-->
<h4 class="carousel-head"><span class="p-bold">HTML & CSS</span></h4>
<h5 class="carousel-subhead">FreeCodeCamp "Responsive Web Design"</h5>
<article class="carousel-item-container" id="carousel-fcc">
<a class="project-tile fcc-tile visible" href="https://codepen.io/0Bubbles0/full/mdPXbQr" target="_blank">
<h6 class="project-name">1. Tribute Page</h6>
<img class="project-tile-img" src="resources/img/projects/ffx-small-21may/01-tribute.png"
onerror="this.src='https://raw.githubusercontent.com/0bubbles0/fac-22-application/main/resources/img/projects/ffx-small-21may/01-tribute.png'"
alt="Tribute">
</a>
<a class="project-tile fcc-tile hidden" href="https://codepen.io/0Bubbles0/full/xxRrgeo " target="_blank">
<h6 class="project-name">2. Survry Form</h6>
<img class="project-tile-img" src="resources/img/projects/ffx-small-21may/02-form.png"
onerror="this.src='https://raw.githubusercontent.com/0bubbles0/fac-22-application/main/resources/img/projects/ffx-small-21may/02-form.png'"
alt="Form">
</a>
<a class="project-tile fcc-tile hidden" href="https://codepen.io/0Bubbles0/full/VwmxgWq " target="_blank">
<h6 class="project-name">3. Product Landing Page</h6>
<img class="project-tile-img" src="resources/img/projects/ffx-small-21may/03-landing.png"
onerror="this.src='https://raw.githubusercontent.com/0bubbles0/fac-22-application/main/resources/img/projects/ffx-small-21may/03-landing.png'"
alt="Product Landing">
</a>
<a class="project-tile fcc-tile hidden" href="https://codepen.io/0Bubbles0/full/mdOLvqZ " target="_blank">
<h6 class="project-name">4. Technical Documentation</h6>
<img class="project-tile-img" src="resources/img/projects/ffx-small-21may/04-docu.png"
onerror="this.src='https://raw.githubusercontent.com/0bubbles0/fac-22-application/main/resources/img/projects/ffx-small-21may/04-docu.png'"
alt="Documentation">
</a>
<a class="project-tile fcc-tile hidden" href="https://codepen.io/0Bubbles0/full/bGBmQVP" target="_blank">
<h6 class="project-name">5. Portfolio</h6>
<img class="project-tile-img" src="resources/img/projects/ffx-small-21may/05-pfolio.png"
onerror="this.src='https://raw.githubusercontent.com/0bubbles0/fac-22-application/main/resources/img/projects/ffx-small-21may/05-pfolio.png'"
alt="Portfolio">
</a>
</article>
<button class="button-car button-car-back" id="button-back-fcc">◀</button>
<button class="button-car button-car-next" id="button-next-fcc">▶</button>
</div>
<div class="chapter-stack-column carousel-grid carousel-mobile">
<!--Projects fac-->
<h4 class="carousel-head"><span class="p-bold">HTML & CSS & JavaScript</span></h4>
<h5 class="carousel-subhead">Founders & Coders Coaching Workshops</h5>
<article class="carousel-item-container" id="carousel-fac">
<a class="project-tile fac-tile visible" href="https://codepen.io/0Bubbles0/full/JjEzqLX" target="_blank">
<h6 class="project-name">1. Tribute Page</h6>
<img class="project-tile-img" src="resources/img/projects/ffx-small-21may/11-tribute.png"
onerror="this.src='https://raw.githubusercontent.com/0bubbles0/fac-22-application/main/resources/img/projects/ffx-small-21may/11-tribute.png'"
alt="Tribute">
</a>
<a class="project-tile fac-tile hidden" href="https://codepen.io/0Bubbles0/full/xxgypQd" target="_blank">
<h6 class="project-name">2. DOM Events</h6>
<img class="project-tile-img" src="resources/img/projects/ffx-small-21may/12-events.png"
onerror="this.src='https://raw.githubusercontent.com/0bubbles0/fac-22-application/main/resources/img/projects/ffx-small-21may/12-events.png'"
alt="Dom Events">
</a>
<a class="project-tile fac-tile hidden" href="https://codepen.io/0Bubbles0/full/zYZvbQp" target="_blank">
<h6 class="project-name">3. Button Calculator</h6>
<img class="project-tile-img" src="resources/img/projects/ffx-small-21may/13-button-calc.png"
onerror="this.src='https://raw.githubusercontent.com/0bubbles0/fac-22-application/main/resources/img/projects/ffx-small-21may/13-button-calc.png'"
alt="Button Calculator">
</a>
<a class="project-tile fac-tile hidden" href="https://codepen.io/0Bubbles0/full/oNZBVEK" target="_blank">
<h6 class="project-name">4. Image Carousel</h6>
<img class="project-tile-img" src="ffx-small-21may/"
onerror="this.src='https://raw.githubusercontent.com/0bubbles0/fac-22-application/main/resources/img/projects/ffx-small-21may/14-carousel.png'"
alt="Image Carousel">
</a>
</article>
<button class="button-car button-car-back" id="button-back-fac">◀</button>
<button class="button-car button-car-next" id="button-next-fac">▶</button>
</div>
</section>
<!--Beethoven-->
<section id="c-music" class="chapter-stack">
<h3 class="chapter-stack-heading ch-hd">Beethoven Bootcamp</h3>
<div class="chapter-stack-column column-low">
<p id="music-p">Covid-19 has been a lonely time for passionate amateur orchestra players (especially us
thriving
in the second row)...</p>
<p>So what do you do when your fingers tingle and the feet tap a rhythm?</p>
<form>
<h5>Step 1: Choose your <span class="p-bold">preferred key signature</span>:</h5>
<select id="beethoven-choices" class="select-field hover" name="beethoven-choices">
<option value="-4">♭ ♭ ♭ ♭</option>
<option value="-3">♭ ♭ ♭</option>
<option value="-2">♭ ♭</option>
<option value="-1">♭</option>
<option value="0" selected>♮</option>
<option value="1">♯</option>
<option value="2">♯ ♯</option>
<option value="3">♯ ♯ ♯</option>
<option value="5">♯ ♯ ♯ ♯ ♯</option>
</select>
</form>
<h5>Step 2: Recommended movements from <span class="p-bold">Beethoven Symphonies</span>:</h5>
<p>With links to <span class="p-bold">IMSLP</span> and <span class="p-bold">YouTube</span>
(please respect copyright)</p>
</div>
<div class="chapter-stack-column column-low">
<!--<div id="music-result-container" class="project-tile">-->
<ul id="beethoven-result-display" class="project-tile">
<!-- <li>Play this</li>-->
</ul>
<!--</div>-->
</div>
</section>
<!--Coding Goals-->
<section id="c-goals" class="chapter-stack">
<h3 class="chapter-stack-heading ch-hd">Coding Goals</h3>
<div class="chapter-stack-column column-thin">
<h4>What I hope to work on next</h4>
<h4><span class="p-bold">Improve</span> on:</h4>
<ul>
<li><span class="p-bold">Design</span> Creativity</li>
<li>Using <span class="p-bold">JavaScript</span> in real context</li>
<li>How does a Pop-up work?</li>
</li>
<li>Using Terminal and <span class="p-bold">Version Control</span>
<ul>
<li>Return to previous versions</li>
<li>Use different branches</li>
</ul>
</li>
<li><span class="p-bold">Collaboration</span>
<ul>
<li>Plan Projects</li>
<li>Pair Programming</li>
<li>GitHub</li>
</ul>
</li>
</ul>
</div>
<div class="chapter-stack-column column-thin">
<h4><span class="p-bold">New</span> skills:</h4>
<ul>
<li>Standards for <span class="p-bold">Visual Design</span> & UX</li>
<li>Standards for <span class="p-bold">Accessibility</span> and Assistive Technologies</li>
<li><span class="p-bold">Frameworks</span>
<ul>
<li>Bootstrap</li>
</ul>
</li>
<li><span class="p-bold">Libraries</span></li>
<li><span class="p-bold">Databases</span></li>
<li>Prepare for Coding <span class="p-bold">Interviews</span></li>
<li>Land a <span class="p-bold">Developer job</span></li>
</ul>
</div>
</section>
<!--fac-->
<section id="c-fac-appl" class="chapter-stack">
<h3 class="chapter-stack-heading ch-hd">Why Founders and Coders</h3>
<div class="chapter-stack-column column-low">
<h4>The Structure of the Course and <span class="p-bold">Apprenticeship</span> would provide the invaluable:
</h4>
<ul>
<li>broad coverage of my coding <span class="p-bold">goals</span>.</li>
<li><span class="p-bold">guidance</span> on technical employer interviews during the Pre-apprenticeship
that
could help overcome my confidence issues.</li>
<li><span class="p-bold">financial security</span> and peace of mind to fully immerse myself in the
Bootcamp.
</li>
<li>full package of Bootcamp, certification and 1-2 years of experience to set me on the <span
class="p-bold">career path</span> I
would enjoy.</li>
</ul>
</div>
<div class="chapter-stack-column column-tall">
<h4>A place in this upcoming <span class="p-bold">Cohort 22 in Autumn 2021</span>:</h4>
<ul>
<li>Participating in the <span class="p-bold">Coaching Programme</span> has already felt like a Bootcamp.
</li>
<li>Working in the <span class="p-bold">Dragonfly Study Group</span>, we already had several fantastic
"aha!"
moments.</li>
<li>The last weeks supercharged my <span class="p-bold">progress</span>, <span
class="p-bold">motivation</span> and gave me more <span class="p-bold">support</span> and
<span class="p-bold">confidence</span> on the path to being a developer than I could have imagined.
</li>
<li>It would be an absolute privilege to continue growing in tandem, to keep up the pace, have some <span
class="p-bold">progress accountability</span> and explore <span class="p-bold">collaborating</span> on
projects and GitHub.</li>
<li>It would be exciting and immensely valuable to be able to mix my analytical problem-solving aptitude
with
the fantastic <span class="p-bold">visual design creativity</span> of my fellow current coachees.
</li>
<li>While creating this website, I already considered several times how tasks might have been shared with
partners.</li>
</ul>
</div>
<div class="chapter-stack-column column-tall">
<h4>To continue as part of the <span class="p-bold">community</span>:</h4>
<ul>
<li>It felt <span class="p-bold">safe</span> to be invited to an environment that values <span
class="p-bold">mutual supportiveness</span> over competitiveness. Collaborating with people with
different
life experiences is an opportunity to learn, not a complication!</li>
<li>The special emphasis on <span class="p-bold">pastoral care</span> and <span
class="p-bold">respectful</span> and encouraging communication has made a lasting impact on
how I wish to conduct teamwork, with values and inter-personal dynamics I will be more proactive in
fostering in work environments going forward. </li>
<li>Already, I have greatly benefited from countless <span class="p-bold">alumni</span> and feel inspired
to
continue carrying the torch of <span class="p-bold">mentoring</span>. Because I am convinced that coding
could be a path for others to get themselves out of much stickier life situations than mine.</li>
<li>I would be especially excited to be involved in workshops for complete beginners – writing first HTML
in a
text editor or starting the first Codepen.</li>
</ul>
</div>
</section>
<!--Profiles-->
<section id="c-profiles" class="chapter-creative">
<h3 class="ch-profiles-header ch-hd">Profiles</h3>
<h4 class="ch-profiles-intro">Thank you for reading my story and considering my application to the upcoming
Founders and Coders Cohort 22!<br>You can view my completed course requirements and other coding endeavours
on:
</h4>
<a class="ch-profiles" id="link-github" href="https://github.com/0bubbles0" target="_blank"><i
class="fa fa-github"></i>GitHub Profile</a>
<a class="ch-profiles" id="link-github-repo" href="https://github.com/0bubbles0/fac-22-application"
target="_blank"><i class="fa fa-github"></i>This Repository</a>
<a class="ch-profiles" id="link-fcc" href="https://www.freecodecamp.org/0bubbles0" target="_blank"><i
class="fa fa-free-code-camp"></i>FCC</a>
<a class="ch-profiles" id="link-codewars" href="https://www.codewars.com/users/0bubbles0" target="_blank"><i
class="fa fa-share-square"></i>Codewars</a>
<a class="ch-profiles" id="link-codepen" href="https://codepen.io/0Bubbles0" target="_blank"><i
class="fa fa-codepen"></i>Codepen</a>
<a class="ch-profiles" id="link-repl" href="https://repl.it/@0bubbles01" target="_blank"><i
class="fa fa-pencil-square-o"></i>Repl.it</a>
</section>
</main>
<!--Footer-->
<footer class="page-footer">
<p>Text, Images and Code by © 2021 <bubbles></p>
</footer>
</body>
</html>