-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
415 lines (415 loc) · 15.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
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
<!DOCTYPE html>
<html lang="en" class="notranslate" translate="no">
<head>
<meta name="description" content="Hey, I'm Jeet." />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="google" content="notranslate" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JEET | Portfolio</title>
<script defer="defer" src="./app.js"></script>
<link href="./main.css" rel="stylesheet" />
</head>
<body>
<div class="loaderContainer">
<span class="progress progress--number"></span>
<span class="progress progress--button">EXPLORE</span>
</div>
<div class="cursor cursor--main">
<div class="octagon"></div>
<span class="cursorLoader"></span>
</div>
<div class="cursor cursor--indication">
<span>CLICK &HOLD</span>
</div>
<div class="cursor cursor--follower">
<div class="octagon"></div>
</div>
<div class="cursor cursor--dot"></div>
<div class="rotateMobileIndication">
<span>PLEASE TURN YOUR SCREEN</span>
</div>
<div class="hamburgerWrapper">
<span class="lineContainer lineContainer--1">
<span class="line line--1"></span>
<span class="line line--2"></span>
</span>
<span class="lineContainer lineContainer--2">
<span class="line line--1"></span>
<span class="line line--2"></span>
</span>
<span class="lineContainer lineContainer--3">
<span class="line line--1"></span>
<span class="line line--2"></span>
</span>
<span class="lineContainer lineContainer--4">
<span class="line line--1"></span>
<span class="line line--2"></span>
</span>
</div>
<div class="menuReveal">
<div class="linkWrapper linkWrapper--1">
<li class="media media--0">CONTACT</li>
<li class="media media--thoma">
<a href="mailto:jeetpatel0070070@gmail.com">Email</a>
</li>
<li class="media media--thoma">
<a href="https://github.com/MAGGIx1404" target="_blank">Github</a>
</li>
<li class="media media--thoma">
<a href="https://dribbble.com/yash12" target="_blank">Dribbble</a>
</li>
</div>
<div class="linkWrapper linkWrapper--2">
<li class="link link--home">
<a class="main">HOME</a>
<a class="mask mask--home" data-splitting="chars">HOME</a>
</li>
<li class="link link--about">
<a class="main">ABOUT</a>
<a class="mask mask--about" data-splitting="chars">ABOUT</a>
</li>
<li class="link link--work">
<a class="main">WORK</a>
<a class="mask mask--work" data-splitting="chars">WORK</a>
</li>
<li class="link link--showreel">
<a class="main">SHOWREEL</a>
<a class="mask mask--showreel" data-splitting="chars">SHOWREEL</a>
</li>
</div>
</div>
<span class="homeLink homeLink--about">ABOUT</span>
<span class="homeLink homeLink--work">WORK</span>
<span class="homeLink homeLink--showreel">SHOWREEL</span>
<div id="app">
<section class="container container--home">
<div class="titleWrapper">
<span class="subtitle subtitle--1">WEB DEVELOPER</span>
<span class="title title--1">JEET</span>
<span class="title title--2">RAMOLIYA</span>
<span class="subtitle subtitle--2">PORTFOLIO</span>
</div>
</section>
<section class="container container--about" data-scroll-section>
<span class="title title--hey">HEY</span>
<div class="aboutWrapper aboutWrapper--1">
<span class="scrollIndication scrollIndication--1">SCROLL DOWN</span>
<span class="scrollIndication scrollIndication--2">SCROLL DOWN</span>
<div class="heySection">
<span>I'M Jeet Ramoliya.</span>
<span>A 17 YO Indian</span>
<span>Web Developer</span>
</div>
</div>
<span class="title title--about"></span>
<div class="aboutWrapper aboutWrapper--2">
<div class="aboutSection">
<p>
I’m passionate about creative and interactive development, design
and motion. I like to combine technology, design, and movement to
create innovative and immersive experiences.
</p>
<p>
Curious and autonomous by nature, I do a lot of monitoring and I’m
constantly seeking to learn new technologies, improve my design
and my way of coding, in order to make my passion my future
profession.
</p>
</div>
<img />
</div>
<span class="title title--course"></span>
<div class="aboutWrapper aboutWrapper--3">
<div class="courseSection courseSection--1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
autem itaque illo voluptatum nulla illum aut quos explicabo
aspernatur odio?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum
nostrum nesciunt enim et, maxime aut beatae soluta voluptatem
culpa, mollitia quas adipisci tenetur. Excepturi sequi ipsam
beatae repudiandae. Illum, reiciendis.
</p>
</div>
<div class="courseSection courseSection--2">
<!-- <p>
After I got graduated, I wanted to go to an audiovisual university
to pursue in motion design and animation. Even though I got
refused, I was still lucky enough to be accepted into an institute
of technology in telecommunication networks.
</p>
<p>
At first glance, the course did not interest me and I was planning
to reassign for the following year. I still played along and spent
all the year in this course, in which I met some great people and
brought new knowledge.
</p>
<p>
I learned a lot about network administration, object-oriented
programming, new knowledge in front-end development and the
discovery of back-end web development, with forms and database
design.
</p>
<p>
At the same time I continued making videos and editing, I learned
the basics of animation, and started manipulating keyframes,
curves and many other tools and plugins. Each one was even more
interesting than the last.
</p> -->
</div>
<div class="courseSection courseSection--3">
<!-- <p>
The previous year opened up my eyes and stirred up my curiosity
about web development. I was still so attracted by design and
video, I decided to join a versatile training in multimedia, to
widen my skills and specialize myself afterwards.
</p>
<p>
During these two years, I discovered and learnt a lot of things,
whether in front/back web development, graphic design, video or
even photography.
</p>
<p>
Very quickly, I decided to create my first portfolio during my
free time. This project was the trigger that made me discover a
real passion for interactive/creative development.
</p>
<p>
It made me understand that a website is not necessarily what
everyone think it is, but that it was so much more than that. But
also that it was possible to combine design, movement and
technologies to create more than just a web page.
</p>
<p>
Since that day, I’m continuously looking to improve, discover and
learn new technologies, in order to push through the boundaries of
each of my projects and turn my ideas into lines of code.
</p> -->
</div>
</div>
<span class="title title--skills"></span>
<div class="aboutWrapper aboutWrapper--4">
<div class="skillsSection skillsSection--1">
<span>WEBDEV</span>
<li>HTML</li>
<li>CSS/SCSS</li>
<li>JavaScript</li>
<li>C</li>
<li>React</li>
<li>React Native</li>
<li>VUE.js</li>
<li>Next.js</li>
<li>Nuxt.js</li>
<li>GitHub</li>
<li>Three.js</li>
<li>Lottie</li>
</div>
<div class="skillsSection skillsSection--2">
<span>DESIGN</span>
<li>XD</li>
<li>Illustrator</li>
<li>Photoshop</li>
<li>Figma</li>
<li>Inkscape</li>
</div>
<div class="skillsSection skillsSection--3">
<span>MOTION</span>
<li>After Effects</li>
<li>Lightroom</li>
<li>Blender</li>
<li>Maya</li>
</div>
</div>
</section>
<section class="container container--work" data-scroll-section>
<div class="projectWrapper projectWrapper--1 skewElem">
<span class="projectName">
ID 2021<span class="mask mask--1" data-splitting="chars"
>ID 2021</span
>
</span>
<span class="projectCat">WEBDEV</span>
</div>
<div class="projectWrapper projectWrapper--2 skewElem">
<span class="projectName">
ASTRALYS<span class="mask mask--2" data-splitting="chars"
>ASTRALYS</span
>
</span>
<span class="projectCat">WEBDEV</span>
</div>
<div class="projectWrapper projectWrapper--3 skewElem">
<span class="projectName">
TERRE DE BOIS<span class="mask mask--3" data-splitting="chars"
>TERRE DE BOIS</span
>
</span>
<span class="projectCat">DESIGN</span>
</div>
<div class="projectWrapper projectWrapper--4 skewElem">
<span class="projectName">
AURIANE<span class="mask mask--4" data-splitting="chars"
>AURIANE</span
>
</span>
<span class="projectCat">WEBDEV</span>
</div>
<div class="projectWrapper projectWrapper--5 skewElem">
<span class="projectName">
CMS FOLIO<span class="mask mask--5" data-splitting="chars"
>CMS FOLIO</span
>
</span>
<span class="projectCat">WEBDEV</span>
</div>
<div class="projectWrapper projectWrapper--6 skewElem">
<span class="projectName">
NEWSPAPER<span class="mask mask--6" data-splitting="chars"
>NEWSPAPER</span
>
</span>
<span class="projectCat">MOTION</span>
</div>
<div class="projectWrapper projectWrapper--7 skewElem">
<span class="projectName">
JAM-ON<span class="mask mask--7" data-splitting="chars"
>JAM-ON</span
>
</span>
<span class="projectCat">DESIGN</span>
</div>
<div class="projectWrapper projectWrapper--8 skewElem">
<span class="projectName">
FOLIO 2020<span class="mask mask--8" data-splitting="chars"
>FOLIO 2020</span
>
</span>
<span class="projectCat">WEBDEV</span>
</div>
<div class="projectWrapper projectWrapper--9 skewElem">
<span class="projectName">
INTERNSHIP<span class="mask mask--9" data-splitting="chars"
>INTERNSHIP</span
>
</span>
<span class="projectCat">MOTION</span>
</div>
<div class="projectWrapper projectWrapper--10 skewElem">
<span class="projectName">
GAMOVORE<span class="mask mask--10" data-splitting="chars"
>GAMOVORE</span
>
</span>
<span class="projectCat">WEBDEV</span>
</div>
<div class="projectWrapper projectWrapper--11 skewElem">
<span class="projectName">
DRESSON<span class="mask mask--11" data-splitting="chars"
>DRESSON</span
>
</span>
<span class="projectCat">DESIGN</span>
</div>
<div class="projectWrapper projectWrapper--12 skewElem">
<span class="projectName">
MMORPION<span class="mask mask--12" data-splitting="chars"
>MMORPION</span
>
</span>
<span class="projectCat">WEBDEV</span>
</div>
<div class="projectWrapper projectWrapper--13 skewElem">
<span class="projectName">
MUSHROOMS<span class="mask mask--13" data-splitting="chars"
>MUSHROOMS</span
>
</span>
<span class="projectCat">DESIGN</span>
</div>
<div class="projectWrapper projectWrapper--14 skewElem">
<span class="projectName">
YASUO<span class="mask mask--14" data-splitting="chars">YASUO</span>
</span>
<span class="projectCat">MOTION</span>
</div>
<div class="projectWrapper projectWrapper--15 skewElem">
<span class="projectName">
FOLIO 2019<span class="mask mask--15" data-splitting="chars"
>FOLIO 2019</span
>
</span>
<span class="projectCat">WEBDEV</span>
</div>
<div class="projectWrapper projectWrapper--16 skewElem">
<span class="projectName">
LA DETTE<span class="mask mask--16" data-splitting="chars"
>LA DETTE</span
>
</span>
<span class="projectCat">MOTION</span>
</div>
<div class="projectWrapper projectWrapper--17 skewElem">
<span class="projectName">
ANIMAYO<span class="mask mask--17" data-splitting="chars"
>ANIMAYO</span
>
</span>
<span class="projectCat">DESIGN</span>
</div>
<div class="projectWrapper projectWrapper--18 skewElem">
<span class="projectName">
OUTRO ID<span class="mask mask--18" data-splitting="chars"
>OUTRO ID</span
>
</span>
<span class="projectCat">MOTION</span>
</div>
<div class="projectWrapper projectWrapper--19 skewElem">
<span class="projectName">
LETTER MASK<span class="mask mask--19" data-splitting="chars"
>LETTER MASK</span
>
</span>
<span class="projectCat">DESIGN</span>
</div>
<div class="projectWrapper projectWrapper--20 skewElem">
<span class="projectName">
MOTION INTRO<span class="mask mask--20" data-splitting="chars"
>MOTION INTRO</span
>
</span>
<span class="projectCat">MOTION</span>
</div>
</section>
<div class="workRevealContainer">
<span class="title title--1"></span>
<div class="titleProject">
<span class="title title--2"></span>
</div>
<div class="workRevealWrapper">
<div class="section section--1">
<p></p>
</div>
<div class="section section--2">
<img />
</div>
</div>
<div class="linkProject"></div>
</div>
<div class="workRevealMask"></div>
</div>
<div class="showreelRevealContainer">
<video></video>
</div>
<div class="musicWrapper">
<canvas class="canvas--music" style="width: 50px; height: 25px"></canvas>
</div>
<canvas class="canvas canvas--main"></canvas>
<canvas class="canvas canvas--noise"></canvas>
</body>
</html>