-
Notifications
You must be signed in to change notification settings - Fork 1
/
about.html
324 lines (296 loc) · 16.6 KB
/
about.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Ammielle Wambo Becker</title>
<meta name="viewport" content="width=500, initial-scale=1">
<meta name="description" content="Ammielle WB's personal site">
<meta charset="utf-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Moving Letters JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<!-- FontAwesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
<!-- Set Favicon -->
<link rel="icon" type="image/png" href="my-favicon-circle.png"/>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark purple-bg">
<a class="navbar-brand active subtitle" href="index.html">Ammielle Wambo Becker<span class="sr-only">(current)</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Engagements
</a>
<div class="dropdown-menu bg-light" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="academic.html">Academic</a>
<a class="dropdown-item" href="clubs.html">Clubs</a>
<a class="dropdown-item" href="service.html">Service</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="banner">
<h1 class="ml16"><span>A</span><span>b</span><span>o</span><span>u</span><span>t</span></h1>
</div>
<div class="mission text-section white-text">
<h2 class="purple-text subtitle">My mission</h2>
<div class="row">
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body">
<h3 class="card-title">Helping others</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/handshake_1f91d.png" height="30rem" width="30rem" alt="handshake emoji">
<br><br>
<p class="card-text">I find purpose in giving back. Using my skills and available resources, I'll make a positive impact on my community.</p>
<br>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body">
<h3 class="card-title">Becoming knowledgeable</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/electric-light-bulb_1f4a1.png" height="30rem" width="30rem" alt="lightbulb emoji">
<br><br>
<p class="card-text">By being well informed and aware, I can make sense of my surroudings. Thus, I can innovate and brainstorm solutions.</p>
<br>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body">
<h3 class="card-title">Pursuing my curiosity</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/thinking-face_1f914.png" height="30rem" width="30rem" alt="thinking emoji">
<br><br>
<p class="card-text">My love for learning enables me to better understand our world.</p>
<br>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body white-text">
<h3 class="card-title">Reaching my potential</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/rocket_1f680.png" height="30rem" width="30rem" alt="thinking emoji">
<br><br>
<p class="card-text">I'm seizing opportunities that bring me closer to realising my potential.</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="values text-section purple-bg">
<h2 class="subtitle">My values</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link regular-font" id="tenacity-tab" data-toggle="tab" href="#tenacity" role="tab" aria-controls="tenacity" aria-selected="true"><h3>Tenacity</h3></a>
</li>
<li class="nav-item">
<a class="nav-link regular-font" id="reliability-tab" data-toggle="tab" href="#reliability" role="tab" aria-controls="reliability" aria-selected="false"><h3>Reliability</h3></a>
</li>
<li class="nav-item">
<a class="nav-link regular-font" id="open-mindedness-tab" data-toggle="tab" href="#open-mindedness" role="tab" aria-controls="open-mindedness" aria-selected="false"><h3>Open-mindedness</h3></a>
</li>
<li class="nav-item">
<a class="nav-link regular-font" id="ambition-tab" data-toggle="tab" href="#ambition" role="tab" aria-controls="ambition" aria-selected="false"><h3>Ambition</h3></a>
</li>
<li class="nav-item">
<a class="nav-link regular-font" id="growth-tab" data-toggle="tab" href="#growth" role="tab" aria-controls="growth" aria-selected="false"><h3>Growth</h3></a>
</li>
<li class="nav-item">
<a class="nav-link regular-font" id="good-humour-tab" data-toggle="tab" href="#good-humour" role="tab" aria-controls="good-humour" aria-selected="false"><h3>Good humour</h3></a>
</li>
<li class="nav-item">
<a class="nav-link regular-font" id="mindfulness-tab" data-toggle="tab" href="#mindfulness" role="tab" aria-controls="mindfulness" aria-selected="false"><h3>Mindfulness</h3></a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade regular-font" id="tenacity" role="tabpanel" aria-labelledby="tenacity-tab">I'm harnessing my figure-it-out mindset by learning autonomously and practicing determination. I'm resolute in all my endeavours.</div>
<div class="tab-pane fade regular-font" id="reliability" role="tabpanel" aria-labelledby="reliability-tab">I believe in sticking to your commitments and performing consistently well. To stay on top of things and fulfill my promises, I use planners, calendars and reminders.</div>
<div class="tab-pane fade regular-font" id="open-mindedness" role="tabpanel" aria-labelledby="open-mindedness-tab">Because of my willingness to consider new ideas and adjust my opinions, I enjoy having discussions and debates. I welcome change and novelties.</div>
<div class="tab-pane fade regular-font" id="ambition" role="tabpanel" aria-labelledby="ambition-tab">My unrelenting desire to achieve my mission guides my actions. I set high standards and goals, then do everything I can to reach them.</div>
<div class="tab-pane fade regular-font" id="growth" role="tabpanel" aria-labelledby="growth-tab">I strive to be a better person than I was yesterday. By learning and reading, I can improve my skillset and broaden my knowledge.</div>
<div class="tab-pane fade regular-font" id="good-humour" role="tabpanel" aria-labelledby="good-humour-tab">I enter all situations with enthusiasm and optimism. I measure the quality of my day by how much I laughed.</div>
<div class="tab-pane fade regular-font" id="mindfulness" role="tabpanel" aria-labelledby="mindfulness-tab">I practice mindfulness by paying attention to my patterns of thought and opinions. By acknowledging my feelings without judgement, I can better understand myself.</div>
</div>
</div>
<div class="my-interests text-section">
<h2 class="subtitle purple-text">My interests</h2>
<div class="cards">
</div>
<div class="row">
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body">
<h3 class="card-title">Coding</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/female-technologist_1f469-200d-1f4bb.png" height="30rem" width="30rem" alt="computer emoji">
<br><br>
<p class="card-text">In my free time, you'll often find me coding in Python and JS. I'm currently learning C++.</p>
<br>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body">
<h3 class="card-title">Philosophy</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/compass_1f9ed.png" height="30rem" width="30rem" alt="compass emoji">
<br><br>
<p class="card-text">It's in my inquisitive nature to explore the fundamental questions about knowledge, reality and existence.</p>
<br>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body">
<h3 class="card-title">Advocacy</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/speaking-head-in-silhouette_1f5e3.png" height="30rem" width="30rem" alt="speaker emoji">
<br><br>
<p class="card-text">Because of my passion for social justice, I'm outspoken in the fight for equality.</p>
<br>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body">
<h3 class="card-title">Politics</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/scales_2696.png" height="30rem" width="30rem" alt="dna emoji">
<br><br>
<p class="card-text">Politics allow me to be civically engaged and participate in society.</p>
<br>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body">
<h3 class="card-title">Biology</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/dna-double-helix_1f9ec.png" height="30rem" width="30rem" alt="dna emoji">
<br><br>
<p class="card-text">Unlocking key concepts of living organisms could allow us to solve our world's biggest problems.</p>
<br>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card shadow rounded light-blue-bg">
<div class="card-body">
<h3 class="card-title">Reading</h3>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/books_1f4da.png" height="30rem" width="30rem" alt="saturn emoji">
<br><br>
<p class="card-text">Although my favourite genre is historical non-fiction, I devour all stories, novels, articles and papers.</p>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="newsletter gradient-color">
<div id="mc_embed_signup">
<h2 class="white-text">Subscribe to my monthly newsletter</h2>
<form action="https://mailchi.us2.list-manage.com/subscribe/post?u=c436778fbbff034a01a1bd7ac&id=03ed8a9006" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group form-group">
<label for="mce-EMAIL" class="regular-font">Email address</label>
<input type="email" value="" name="EMAIL" class="required email form-control regular-font" id="mce-EMAIL" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c436778fbbff034a01a1bd7ac_03ed8a9006" tabindex="-1" value=""></div>
<div class="clear">
<button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-dark btn-lg regular-font">Submit</button>
</div>
</div>
</form>
</div>
</div>
<footer>
<p class="purple-text">Get in touch</p>
<div class="socials">
<a href="mailto:ammiellewb@gmail.com"><i class="fas fa-envelope fa-2x purple-text"></i></a>
<a href="https://www.linkedin.com/in/ammielle-wb-6538231b2/"><i class="fab fa-linkedin fa-2x purple-text"></i></a>
<a href="https://www.instagram.com/amms.wb/"><i class="fab fa-instagram fa-2x purple-text"></i></a>
<a href="https://twitter.com/ammswb"><i class="fab fa-twitter fa-2x purple-text"></i></a>
<a href="https://www.youtube.com/channel/UCsp5LFDrt9Ut6pkZBvtOaYA"><i class="fab fa-youtube fa-2x purple-text"></i></a>
<a href="https://github.com/ammiellewb"><i class="fab fa-github fa-2x purple-text"></i></a>
<a href="https://medium.com/@amms.wb"><i class="fab fa-medium-m fa-2x purple-text"></i></a>
</div>
<br>
<br>
<div>
<small class="purple-text">© 2020 <a class="purple-text" href="index.html">Ammielle WB</a>. All rights reserved.</small>
</div>
</footer>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
<script type="text/javascript">
var textWrapper = document.querySelector('.ml16');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({
loop: true
})
.add({
targets: '.ml16 .letter',
translateY: [-100, 0],
easing: "easeOutExpo",
duration: 1400,
delay: (el, i) => 30 * i
}).add({
targets: '.ml16',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
// MDB Lightbox Init
$(function() {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
</script>
</body>
</html>