-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
290 lines (285 loc) · 19.9 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
<!DOCTYPE html>
<html>
<head>
<title>Your friendly neighbourhood geek, Aayush Khanna</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.PNG">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.min.css">
<link rel="stylesheet" type="text/css" href="./styles/main.css">
<link rel="stylesheet" type="text/css" href="./styles/mystory.css">
<link rel="stylesheet" type="text/css" href="./styles/workxp.css">
<link rel="stylesheet" type="text/css" href="./styles/projects.css">
<link rel="stylesheet" type="text/css" href="./styles/contact.css">
<link rel="stylesheet" type="text/css" href="./styles/themes.css">
</head>
<body>
<div class="site">
<div class="container">
<main class="home panel bluebg open">
<header>
<ul class="nav">
<li class="navOption" data-nav="home"><div class="navItem bangers yellow-text black-shadow active">HOME</div></li>
<li class="navOption" data-nav="mystory"><div class="navItem bangers yellow-text black-shadow">MY STORY</div></li>
<li class="navOption" data-nav="workxp"><div class="navItem bangers yellow-text black-shadow">WORK XP</div></li>
<li class="navOption" data-nav="projects"><div class="navItem bangers yellow-text black-shadow">PROJECTS</div></li>
<li class="navOption" data-nav="contact"><div class="navItem bangers yellow-text black-shadow">CONTACT</div></li>
</ul>
</header>
<div class="edition bangers">
<div>42nd collectors issue!</div>
<div class="date"></div>
</div>
<div class="inner">
<h1 class="headline badaboombb yellow-shadow">Hello !</h1>
</div>
<div class="outter">
<p class="centered bangers">I'm Aayush, take a look at my recent adventures. If you like what you see, <span class="bangers yellow-text black-shadow navOption" data-nav="contact">let's get in touch</span> !</p>
</div>
<div class="barcode-text">
<span class="bangers">Direct Edition</span><br/>
<span class="bangers">Rated T</span>
</div>
<img class="barcode" src='./assets/images/barcode.PNG'/>
</main>
<aside class="mystory panel nobg" data-panel="mystory">
<div id="fullpage-mystory">
<div id="menu">
<a href="#page1">1</a>
<a href="#page2">2</a>
<a href="#page3">3</a>
<a href="#page4">4</a>
<a href="#page5">5</a>
<a href="#page6">6</a>
<a href="#page7">7</a>
<a href="#page8">8</a>
</div>
<div class="section" data-anchor="page1">
<div id="mystory-header">
<div class="back-arrow">
<img src="./assets/images/backarrow.svg"/>
<div class="bangers inline">Home</div>
</div>
<h4 class="badaboombb black-shadow">My Story</h4>
</div>
<div class="prologue-wrapper">
<div class="box prologue-box bangers" style="font-size: 38px;">
Ever seen a super-hero movie with a bad ending ?</br></br>
Like the one where the <span class="bad-guys">bad guys</span> win ?
</div>
</div>
<div class="prologue-wrapper">
<div class="box prologue-box2 badaboombb">
<p class="right black-shadow">Yeah neither have I ...</p>
</div>
<div class="box prologue-box1 badaboombb">
But lets rewind a bit here</br></br>
<i class="fas fa-backward tilted"></i></br>
Let me introduce myself...
</div>
</div>
</div>
<div class="section" data-anchor="page2">
<div class="box prologue-box3 badaboombb">
I am the one and only -<span class="captain-levi">Captain Levi</span>
<p class="bottom-right bangers">... Actually that's my super-hero name, my real name is Aayush Khanna.</p>
</div>
</div>
<div class="section" data-anchor="page3">
<div class="intro-wrapper">
<div class="box intro-box1">
<p class="text top-left bangers"> Fall '17 ...</p>
<p class="text bottom-right bangers"> It all started when I was bitten by a radio-active spider during my Web Technologies lecture ...</p>
</div>
<div class="box intro-box2">
<p class="text top-left bangers"> ... and for the past year and a half I've grown a passion for everything web-related!</p>
</div>
<div class="box intro-box3">
<p class="text top-left bangers"> At first, my senses became super responsive to every detail, every annoying bug, every gorgeous design ...</p>
<p class="text bottom-right bangers"> ... Over time my new found powers made me appreciate the web world around me even more !</p>
</div>
</div>
<div class="wides-wrapper">
<div class="box wides-box1">
<div class="boxinner-v2 bangers">USC - Wireless Devices and Systems Group</div>
<p class="text top-right bangers"> Los Angeles</p>
<p class="text bottom-right bangers" style="max-width: 400px;"> ... eager to test my superpowers, I <a href="https://getbootstrap.com/" target="_blank" class="emphasis thin-yellow-shadow">bootstrapped</a> the markup and weaved it with <a href="https://jquery.com/" target="_blank" class="emphasis thin-yellow-shadow">jQuery</a> to saved the day for the WIDES !</p>
</div>
<div class="box prologue-box1 badaboombb">
And I knew -
<span> this was just the beginning !</span>
</div>
</div>
</div>
<div class="section" data-anchor="page4">
<div class="box ict-box1">
<div class="boxinner bangers">USC Institute for Creative Technologies</div>
<p class="text top-right bangers"> Spring '18</p>
<p class="text bottom-left bangers" style="bottom: 5px;"> Impressed by my styles, I got invited to join <span class="strike-through">The Avengers</span> ICT!</p>
<p class="text bottom-right bangers"> ... where I learnt to harness the power of the <a href="https://reactjs.org/" target="_blank" class="emphasis thin-yellow-shadow">React</a>-or with imaculate <a href="https://sass-lang.com/" target="_blank" class="emphasis thin-yellow-shadow">Sass</a> !</p>
</div>
<div class="box hackaday-box1">
<div class="boxinner altrotation bangers"> SupplyFrame HQ</div>
<p class="text top-right bangers"> ... Summer '18</p>
<p class="text bottom-left bangers"> Confident and Prideful of my superpowers, I was chosen to work with the elite to protect the city of <a href="https://hackaday.io/" target="_blank" class="emphasis thin-yellow-shadow">hackaday</a> ...</br>
Here I faced the ultimate challenge, my biggest nemesis - The Back-End! </p>
<p class="text bottom-right bangers"> ... With the entire HQ relying on me, I learnt to navigate the <a href="https://expressjs.com/" target="_blank" class="emphasis thin-yellow-shadow">express</a> voyager over the <a href="https://nodejs.org/" target="_blank" class="emphasis thin-yellow-shadow">node</a>,
got better at weaving the web, and managed to secure the end-point!</p>
</div>
</div>
<div class="section" data-anchor="page5">
<div class="hackaday-wrapper">
<div class="box hackaday-box2">
<p class="text top-left bangers"> Fall '18 ...</p>
<p class="text bottom-right bangers"> caught in-between the stuggles of my secret identity as a grad student, I failed multiple times ... </p>
</div>
<div class="box hackaday-box3 bangers">
... but I never give up
</div>
</div>
<div class="hackaday-wrapper">
<div class="box hackaday-box4">
<p class="text top-left bangers" style="width: 300px;"> I continued to fight the swarm of bugs on the <a href="https://git-scm.com/" target="_blank" class="emphasis thin-yellow-shadow">git</a>, made major commits and revamped the user interface !</p>
<p class="text bottom-right bangers" style="width: max-content"> Most importantly, I leart how important it is to ask for help when in doubt!</p>
</div>
</div>
</div>
<div class="section" data-anchor="page6">
<div class="superhero-wrapper">
<div class="box superhero-box1">
<p class="text top-right bangers"> Spring '19 ...</p>
<p class="text top-left bangers"> I bid goodbye to my alies at the HQ and parted ways </p>
<p class="text bottom-right bangers"> "he's the hero hackaday deserves, but not the one it needs right now ... because he can take it, because he's not a hero..."</p>
</div>
<div class="box superhero-box2">
<p class="text top-left bangers"> "... he's a silent guardian, a watchful protector ..." </p>
<p class="text bottom-right bangers" style="font-size: 24px;"> <span class="strike-through-dk">"the dark knight"</span><br> "the <a href="http://nightwatchjs.org" target="_blank" class="emphasis thin-yellow-shadow">nightwatch</a>" </p>
</div>
</div>
<div class="superhero-wrapper">
<div class="box superhero-box3 badaboombb">
<span>You see, being a hero is not easy</span>
<span>I make mistakes,</span>
<span>and often fail ...</span>
</div>
<div class="box superhero-box4 badaboombb">
... but what makes me a <div style="display: contents; font-size: 36px;">super</div>-hero is the fact that I learn from my mistakes and never give up ! <a href="https://www.youtube.com/watch?v=j5Ef56ofIgo" target="_blank" style="display: contents; line-height: 0;" class="emphasis thin-yellow-shadow">戦い</a>
</div>
</div>
</div>
<div class="section" data-anchor="page7">
<div class="feels-wrapper">
<div class="box feels-box badaboombb" style="font-size: 36px;">
<span> At the end of the day,</span>
<span> Every hero needs someone,</span>
<span> for whom they fight for</span><br><br>
<span> To give them courage, </span>
<span>and make them never lose hope ...</span>
</div>
<div class="box feels-box2 badaboombb">
<p class="text top-left bangers"> Like Martha Kent is to Superman... </p>
</div>
<div class="box feels-box1 badaboombb">
<p class="text bottom-right bangers"> ... Aunt May is to Spiderman... </p>
</div>
</div>
</div>
<div class="section" data-anchor="page8">
<div class="family-wrapper">
<div class="box family-box1">
<p class="text top-left bangers" style="max-width: 300px;"> ... Every hero needs a family ... </p>
</div>
<div class="box family-box2">
<p class="text top-left bangers" style="max-width: 300px;"> ... It's this bond ... </p>
<p class="text bottom-right bangers"> ... that makes them SUPER-heroes </p>
</div>
</div>
<div class="family-wrapper-bottom">
<div class="box prologue-box bangers" style="font-size: 38px;">
It's the real reason why the <span class="bad-guys">bad-guys</span> never win
</div>
</div>
</div>
</div>
</aside>
<aside class="workxp panel nobg" data-panel="workxp">
<div id="fullpage-workxp">
<div class="section">
<div id="workxp-header">
<div class="back-arrow">
<img src="./assets/images/backarrow.svg"/>
<div class="bangers inline">Home</div>
</div>
<h4 class="centered badaboombb yellow-shadow">Work XP</h4>
</div>
<div class="box supplyframe-box1">
<h3 class="supplyframe">Supplyframe</h3>
<div class="box prologue-box1 badaboombb">
At supplyframe I worked on <a href="https://hackaday.io" target="_blank" class="emphasis thin-yellow-shadow">hackaday.io</a></br></br>
</div>
</div>
</div>
<div class="section">
<div class="ict">
<h2>Institute for Creative technologies</h2>
</div>
</div>
</div>
</aside>
<aside class="projects panel pinkbg" data-panel="projects">
<div id="fullpage-projects">
<div class="section">
<div id="projects-header">
<div class="back-arrow">
<img src="./assets/images/backarrow.svg"/>
<div class="bangers inline">Home</div>
</div>
<h4 class="centered badaboombb yellow-shadow">Projects</h4>
</div>
<section class="chimichangas">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60">
<defs>
<filter id="breakup">
<feTurbulence result="TURBULENCE" baseFrequency=".3" numOctaves="1" seed="1" />
<feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="1.0" />
</filter>
</defs>
<text x="18" y="50" dy="0, -1, 1, -2, 1, -3, 0, -2, -2, -3, -3, -2, -2" filter="url(#breakup)">Under Construction !</text>
</svg>
</section>
</div>
</div>
</aside>
<aside class="contact panel greenbg" data-panel="contact">
<div id="contact-header">
<div class="back-arrow">
<img src="./assets/images/backarrow.svg"/>
<div class="bangers inline">Home</div>
</div>
<h4 class="centered badaboombb yellow-shadow">Contact</h4>
</div>
<section class="chimichangas">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60">
<defs>
<filter id="breakup">
<feTurbulence result="TURBULENCE" baseFrequency=".3" numOctaves="1" seed="1" />
<feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="1.0" />
</filter>
</defs>
<text x="18" y="50" dy="0, -1, 1, -2, 1, -3, 0, -2, -2, -3, -3, -2, -2" filter="url(#breakup)">Under Construction !</text>
</svg>
</section>
</aside>
</div>
</div>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="./functionality/fullpage-functionality.js"></script>
</body>
</html>
<!-- <div class="barcode"> -->
<!-- <img class="gif" src='./assets/images/test1.gif'/>