-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
547 lines (479 loc) · 25.5 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
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Utsav Shekh</title>
<!-- Favicon-->
<link rel="icon" href="./assets/favicon/favicon.png" type="image/x-icon" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- Font Awesome icons (free version)-->
<!-- <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script> -->
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="./plugins/headline/headline.css">
<link rel="stylesheet" href="./plugins/AOS/aos.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="bodyid">
<div id="overlayer"></div>
<span class="loader">
<span class="loader-inner"></span>
</span>
<!-- navbar -->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#about" onclick="closeNav()">About Me</a>
<a href="#projects" onclick="closeNav()">Projects</a>
<!-- <a href="#" onclick="closeNav()">Resume</a> -->
<a href="#contact" onclick="closeNav()">Contact</a>
</div>
<!-- svg -->
<div>
<img class="object object1" src="assets/icons/icons8-mongodb.svg" alt="" srcset="">
<img class="object object2" src="assets/icons/icons8-css3.svg" alt="" srcset="">
<img class="object object3" src="assets/icons/icons8-flutter.svg" alt="" srcset="">
<img class="object object4" src="assets/icons/icons8-git.svg" alt="" srcset="">
<img class="object object5" src="assets/icons/newgithub.svg" alt="" srcset="">
<img class="object object6" src="assets/icons/icons8-python.svg" alt="" srcset="">
<img class="object object7" src="assets/icons/icons8-angularjs.svg" alt="" srcset="">
<img class="object object8" src="assets/icons/newjs.svg" alt="" srcset="">
<img class="object object9" src="assets/icons/newnode.svg" alt="" srcset="">
<img class="object object10" src="assets/icons/icons8-bootstrap.svg" alt="" srcset="">
<img class="object object11" src="assets/icons/react.svg" alt="" srcset="">
<img class="object object12" src="assets/icons/firebase.svg" alt="" srcset="">
</div>
<!-- header -->
<header class="masthead text-white text-center" id="hdr">
<div class="container d-flex align-items-center flex-column">
<img class="masthead-avatar mb-5" src="assets/img/1611504664286.png" alt="" />
<h1 class="masthead-heading mb-0">Utsav Shekh</h1>
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fa fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<p class="masthead-subheading cd-headline loading-bar font-weight-light mb-0">
<span class="cd-words-wrapper">
<b class="is-visible">Web Developer</b>
<b>Node Js Developer</b>
<b>Angular Developer</b>
</span>
</p>
</div>
</header>
<!-- about section -->
<section id="about">
<p class="h1 mytitle pt-5 mt-5" data-aos="zoom-in" data-aos-duration="500">About me</p>
<div class="container center" id="aboutme">
<div class="row spacing">
<img class="col-10 col-sm-10 col-lg-5 col-md-5 center spacing" src="./assets/icons/user.svg"
data-aos="zoom-in" data-aos-duration="1000">
<div class="col-10 col-sm-10 col-lg-7 col-md-7 center text-center spacing" data-aos="zoom-in"
data-aos-duration="1000">
<h1 class="h1">Hi there!<span class="wave">👋</span></h1>
<h2 class="h2">I am Utsav Shekh</h2>
<p>I am Software Engineet at Crest Data Systems.
I found my interest in Web development and I'm doing my best to learn new things regularly.
Animation attracts me a lot.</p>
</div>
</div>
</div>
</section>
<!-- skills -->
<!-- <section id="skills" class="py-5">
<p class="h1 mytitle pb-3" data-aos="zoom-in" data-aos-duration="500">skills</p>
<div class="items" id="items">
<div class="item item1">HTML</div>
<div class="item item2">CSS</div>
<div class="item item3">JavaScript</div>
<div class="item item4">jQuery</div>
<div class="item item5">Typescript</div>
<div class="item item6">Node.js</div>
<div class="item item7">Express.js</div>
<div class="item item8">Angular</div>
<div class="item item9">Bootstrap</div>
<div class="item item10">Python</div>
<div class="item item11">Django</div>
<div class="item item12">PHP</div>
<div class="item item13">C</div>
<div class="item item14">C++</div>
<div class="item item15">C#</div>
<div class="item item16">Java</div>
<div class="item item17">MySQL</div>
<div class="item item18">MongoDB</div>
<div class="item item19">SQLite</div>
<div class="item item20">EF Core</div>
<div class="item item21">.NET Core</div>
<div class="item item22">ASP.NET</div>
</div>
</section> -->
<!-- skills 3d-->
<section style="height: 600px;width: 100%;margin-bottom: 30px;" id="skills" class="pb-5 pt-2">
<p class="h1 mytitle pb-5" data-aos="zoom-in" data-aos-duration="500">skills</p>
<div id='holder' style="cursor: pointer;"></div>
</section>
<p class="h1 mytitle py-5 my-5" id="projects" data-aos="zoom-in" data-aos-duration="500">Projects</p>
<!-- projects -->
<section id="cd-timeline" class="cd-container">
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/OnlineBiddingSystemPhp"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Online Bidding System - php</h2>
<p>System user can manage bidding , based on time limit set by the product owner, if the bidder bids the
product, contacts are exchanges by the mail. (phpmailer used).</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/OnlineBiddingSystemPython"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Online Bidding System - python(Django)</h2>
<p>System user can manage bidding , based on time limit set by the product owner, if the bidder bids the
product, contacts are exchanges by the mail.</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/FileManagementSystemDotNetCoreMvc"> <i
class="fa fa-github" aria-hidden="true"></i></a>
</div>
<h2>File Management System – Dot Net Core MVC & EF Core</h2>
<p>Authentication/ Authorization using Microsoft ASPNETCORE.Identity, Entity Framework Core and MS SQL
Server
for data storage. CRUD operations using ASP.Net MVC approach.</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/OnlinePizzaOrderingSystem"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Online Pizza Ordering System – MEAN stack</h2>
<p>Admin can manage items(pizza). User management(block-unblock).Admin can Manage Feedback .
Authentication
using Json Web Token. Animation using Animation on Scroll Library. Forgot password(using
nodemailer). Cart
manager to place order. User can manage profile.</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/CanteenManagement"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Canteen Management System ( Real time )– MEAN stack and Flutter app</h2>
<p>WEB: Admin manage items. User management(block-unblock).Authentication using Json Web Token. Forgot
password(using nodemailer). Cart manager to place order. User can Manage Profile. Images are stored
in GCP
bucket .Website is hosted on GCP . As of now backend API is hosted on Heroku. Screen and logo
designed using Canva . Email with
template
to reset password Custom toster designed. Animation using CSS.
MOBILE :Auth ,reset password , cart manager ,Manage profile, flutter_secure_storage and image
caching , paytm payment.</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/SecureQuiz"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Online Secure Quiz System - MEAN Stack</h2>
<p>Three types of users. Admin, Faculty, Students. Admin can block and unblock both users faculty and
students. Faculty can create a quiz, upload quiz, add a question, delete quiz, delete
question,block-unblock
students. Students can not select the text, Question will automatically be changed after one minute,
can not change tab, can not resize tab these are the security features. If the student changes the
tab or resizes it then the quiz will be terminated and the student is blocked, the student cannot
log in again.
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/cocktailApp"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>cocktailApp - Flutter</h2>
<p>My First flutter project. Fetch all data from API and list it down.</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/portfolio"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>My Portfolio</h2>
<p>My personal portfolio made with HTML , CSS , Bootstrap , JavaScript.</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/RealtimeTodoUsingSocket.Io"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Realtime TODO using socket.io - MEAN stack</h2>
<p>Demonstration of <strong>socket.io</strong> </p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/WhatsMessage"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Whats Message</h2>
<p>Based on whatsapp API. Send whatsapp message without saving number of victim</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/voice-todo"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Voice TODO</h2>
<p>Simple todo app in which user can add todo by voice command.</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/Random-Wallpaper"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Random-Wallpaper-Generator</h2>
<p>It will generate random wallpaper. Using unsplash API I have created this application, It is totally
based on javascript. User can download wallpaper.
I have also used Bootstrap for responsiveness.For Http request Axios is used.
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/DontLaugh"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Don't Laugh Challange</h2>
<p>It will generate random jokes. Using free API I have created this application, It is totally
based on javascript.
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/AnonymouslyChat"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Anonymously Chat</h2>
<p>User can chat anonymously in realtime. It is based on socket.io.
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/WhatsBomb"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>WhatsBomb</h2>
<p>Script is made with javascript. It automatically sends particular message and random message in bunch
on whatsapp to the victim. You can send as many messages as you can in particular time interval.
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/Youtube-Ad-Closer"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Youtube-Ad-Closer</h2>
<p>Made a Chrome Extension which will close all adds of youtube automatically. By using this extension
without clicking on skip add button , add will be closed and user can watch youtube without
interrupt.
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/WallpaperSearchAndDownload"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>Get Wallpaper</h2>
<p>This web application allows the user to search for the best HD wallpapers and allows them to download
the image immediately. For this Unsplash API was used.
This project was created with React.
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/BlogIt-Frontend"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>BlogIt MERN stack</h2>
<p>BlogIt is a blogging website. Authentication is done using JSON Web Token. Users can sign in with a
google account. Users can crud operation on their blog and also can post a comment on the blog It is
fully responsive and for storing images Google Cloud Storage Bucket is used. Further, all blogs are
in a mark-down form which makes the writer's task easier, faster, and efficient.
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/spotify-currently-listening"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>spotify-currently-listening</h2>
<p>This project is made using Spotify's API, it is like a mini radio system. In this project, all will
be able to see and listen to the music which I will be playing on my Spotify (Mobile app or from the
web app or desktop app). You can also download the song (30 seconds only). This project was made
using node js , express js and EJS .
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/Git-Me"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>GitMe</h2>
<p>This mini project is made with the help of Github API. It allows users to search any Github user
using a username and the web app will return the searched user profile with the name of users who
didn't give the follow back to the searched user. This project was created with React.
</p>
</div>
</div>
<div class="cd-timeline-block" data-aos="zoom-in" data-aos-duration="1000">
<div class="cd-timeline-img cd-movie">
</div>
<div class="cd-timeline-content">
<div class="overlayproj">
<a href="https://github.com/shekhutsav1962001/React-Redux-Todo"> <i class="fa fa-github"
aria-hidden="true"></i></a>
</div>
<h2>React-Redux-Todo</h2>
<p>A Simple Todo app made with React and Redux.
</p>
</div>
</div>
</section> <!-- cd-timeline -->
<!-- contact -->
<section id="contact" class="pt-5 pb-2">
<p class="h1 mytitle pb-3">Let's Connect</p>
<p class="text-center" style="font-size: 18px;">I'm currently looking for any new opportunities. My inbox is
always open. Whether you have a question or just
want to say hi, I'll try my best to get back to you!</p>
<div class="social py-3">
<p><a href="https://www.instagram.com/_._utsav" target="_blank"><img class="socialicon"
src="assets/social/instagram.svg" alt="" srcset=""></a></p>
<p><a href="https://www.linkedin.com/in/utsavshekh" target="_blank"><img class="socialicon"
src="assets/social/icons8-linkedin.svg" alt="" srcset=""></a></p>
<p><a href="https://twitter.com/utsav1519" target="_blank"><img class="socialicon"
src="assets/social/twitter.svg" alt="" srcset=""></a></p>
<p><a href="https://github.com/shekhutsav1962001" target="_blank"><img class="socialicon"
src="assets/social/github.svg" alt="" srcset=""></a></p>
<p><a href="mailto:shekhutsav1962001@gmail.com" target="_blank"><img class="socialicon"
src="assets/social/gmail.svg" alt="" srcset=""></a></p>
<p><a href="https://www.facebook.com/utsav.shekh.5" target="_blank"><img class="socialicon"
src="assets/social/facebook.svg" alt="" srcset=""></a></p>
</div>
</section>
<!-- footer -->
<footer id="footer" style="color: #f1f1f1;">
<p class="text-center py-5" style="margin-bottom: 0;font-size: 15px;">©2021 Copyright: <a
style="color: #f1f1f1;" target="_blank" href="mailto:shekhutsav1962001@gmail.com"> <strong> Utsav Shekh
</strong></a></p>
</footer>
<!-- navbutton -->
<span style="font-size:30px;cursor:pointer" class="navbtn" id="navbtn" onclick="openNav()">☰ </span>
<div class="overlay"></div>
<!-- needful scripts -->
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- font awesome icons -->
<script src='https://use.fontawesome.com/4d74086fc6.js'></script>
<!-- headline plugin -->
<script src="./plugins/headline/headline.js"></script>
<!-- water effect -->
<script src="./plugins/ripples.js"></script>
<!-- cloud -->
<script src='plugins/cloud/jquery.svg3dtagcloud.min.js'></script>
<!-- main script file -->
<script src="js/scripts.js"></script>
<!-- aos -->
<script src="./plugins/AOS/aos.js"></script>
<script type="text/javascript">
AOS.init({
easing: 'ease-in-out-sime'
});
</script>
</body>
</html>