-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
428 lines (340 loc) · 18.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
<!DOCTYPE html>
<html class="h-full bg-white" data-theme="dark" lang="en">
<head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<title>Anjali Sharma</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="icon" href="favicon-32x32.png" type="image/png">
<link rel="shortcut icon" href="favicon-32x32.png" type="image/png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>
</head>
<body class="h-full">
<script src="/main.js"></script>
<header></header>
<nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/images/logo as.jpg" alt="Logo">
<div class="loading">
<svg width="64px" height="48px">
<polyline points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24" id="back"></polyline>
<polyline points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24" id="front"></polyline>
</svg>
</div>
<span class="logoname" >
Anjali sharma
</span>
</a>
<a class="nav-link navbar-item" href="#home">Home</a>
<a class="nav-link navbar-item" href="#skills">Skills</a>
<a class="nav-link navbar-item" href="#about">About</a>
<a class="nav-link navbar-item" href="#projects">Projects</a>
<a class="nav-link navbar-item" href="#contact">Contact</a>
<a class="nav-link navbar-item" href="#resume">Resume</a>
</div>
</nav>
<!-- Hero section start -->
<div id="home">
<section>
<br><br>
<div class="hero-content">
<div class="container">
<input type="checkbox" id="checkbox" />
<label for="checkbox" class="theme">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="" viewBox="0 0 24 24">
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<path
fill=""
d="M17.35 12.7901C17.1686 12.7907 16.9935 12.7229 16.86 12.6001C15.5322 11.411 13.8124 10.7534 12.03 10.7534C10.2476 10.7534 8.52779 11.411 7.19999 12.6001C7.12649 12.6658 7.04075 12.7164 6.94767 12.749C6.85459 12.7816 6.756 12.7955 6.65755 12.7899C6.55909 12.7843 6.4627 12.7594 6.37389 12.7165C6.28508 12.6736 6.2056 12.6137 6.13999 12.5401C6.0109 12.3892 5.94595 12.1939 5.95904 11.9958C5.97212 11.7977 6.06219 11.6126 6.20999 11.4801C7.80752 10.0423 9.88072 9.2467 12.03 9.2467C14.1793 9.2467 16.2525 10.0423 17.85 11.4801C17.9978 11.6126 18.0879 11.7977 18.1009 11.9958C18.114 12.1939 18.0491 12.3892 17.92 12.5401C17.8469 12.6181 17.7586 12.6806 17.6606 12.7236C17.5627 12.7665 17.457 12.7892 17.35 12.7901Z"
></path>
<path
fill=""
d="M20 10C19.811 9.99907 19.6292 9.92777 19.49 9.80002C17.4685 7.87306 14.7828 6.79812 11.99 6.79812C9.19719 6.79812 6.51153 7.87306 4.48999 9.80002C4.42116 9.88186 4.33563 9.94804 4.23912 9.99411C4.14262 10.0402 4.03738 10.0651 3.93046 10.0672C3.82354 10.0692 3.71742 10.0484 3.61921 10.0061C3.521 9.96375 3.43298 9.90092 3.36105 9.82179C3.28911 9.74267 3.23493 9.64907 3.20214 9.54729C3.16934 9.4455 3.15869 9.33788 3.17091 9.23164C3.18312 9.1254 3.21791 9.023 3.27294 8.93131C3.32798 8.83962 3.40198 8.76076 3.48999 8.70002C5.78577 6.52533 8.82774 5.31329 11.99 5.31329C15.1522 5.31329 18.1942 6.52533 20.49 8.70002C20.5994 8.80134 20.6761 8.93298 20.7103 9.07811C20.7446 9.22324 20.7348 9.37527 20.6822 9.5148C20.6296 9.65433 20.5366 9.77502 20.4151 9.86145C20.2936 9.94787 20.1491 9.99612 20 10Z"
></path>
<path
fill=""
d="M9.38 15.64C9.26356 15.64 9.14873 15.6129 9.04459 15.5608C8.94044 15.5088 8.84986 15.4332 8.78 15.34C8.7196 15.2617 8.67551 15.1721 8.65032 15.0765C8.62513 14.9809 8.61936 14.8812 8.63334 14.7834C8.64732 14.6855 8.68078 14.5914 8.73173 14.5067C8.78268 14.4219 8.8501 14.3483 8.93 14.29C9.81277 13.6145 10.8934 13.2485 12.005 13.2485C13.1166 13.2485 14.1972 13.6145 15.08 14.29C15.1588 14.3491 15.2252 14.4232 15.2754 14.5079C15.3255 14.5926 15.3585 14.6865 15.3725 14.784C15.3864 14.8815 15.381 14.9807 15.3565 15.0762C15.3321 15.1716 15.2891 15.2612 15.23 15.34C15.1091 15.497 14.9316 15.6005 14.7355 15.6285C14.5394 15.6565 14.34 15.6068 14.18 15.49C13.5548 15.014 12.7908 14.7561 12.005 14.7561C11.2192 14.7561 10.4551 15.014 9.83 15.49C9.69921 15.5855 9.54193 15.6379 9.38 15.64Z"
></path>
<path
fill=""
d="M12 18.75C11.8011 18.75 11.6103 18.671 11.4697 18.5303C11.329 18.3897 11.25 18.1989 11.25 18C11.25 17.8011 11.329 17.6103 11.4697 17.4697C11.6103 17.329 11.8011 17.25 12 17.25C12.1989 17.25 12.3897 17.329 12.5303 17.4697C12.671 17.6103 12.75 17.8011 12.75 18C12.75 18.1989 12.671 18.3897 12.5303 18.5303C12.3897 18.671 12.1989 18.75 12 18.75Z"
></path>
</g>
</svg>
</span>
</label>
</div>
<div class="container-home ">
<!-- <div class="theme">Toggle Theme</div> -->
<br><br><br><br>
<h3>Hi 👋 , I am </h3>
<!-- <h1 class="text">Anjali Sharma</h1> -->
<button class="namebtn">
Anjali sharma
</button>
<h4 class="subtitle">
I am a <span id="typed-text" data-typist="Student,Cs50 Learner,Coding Enthusiast,Web Developer">web developer</span>
</h4>
<br><br>
<div class="social-link">
<a target="_blank" href="https://twitter.com/AnjaliS57610098"><img class="twitter"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Logo_of_Twitter.svg/512px-Logo_of_Twitter.svg.png?20220821125553"
alt="Twitter Logo"></a>
<a target="_blank" href="https://www.linkedin.com/in/anjali-sharma%F0%9F%A7%91%E2%80%8D%F0%9F%92%BB-760a06238"><img
class="linkdin"
src="https://static-00.iconduck.com/assets.00/linkedin-icon-2048x2048-ya5g47j2.png"
alt="LinkedIn Logo"></a>
<a target="_blank" href="https://stackoverflow.com/users/22125607/anjali-sharma"><img
class="stackoverflow"
src="https://w7.pngwing.com/pngs/305/500/png-transparent-stack-overflow-stack-exchange-computer-programming-software-developer-others-text-stack-logo-thumbnail.png"
alt="Stack Overflow Logo"></a>
<a target="_blank" href="https://github.com/Anjalisharma3463"><img class="github"
src="https://1000logos.net/wp-content/uploads/2021/05/GitHub-logo.png"
alt="GitHub Logo"></a>
<a target="_blank" href="user id: anjalisharma34363"><img
class="discord"
src="https://cdn.logojoy.com/wp-content/uploads/20210422095037/discord-mascot.png"
alt="Discord Logo"></a>
<a target="_blank" href="https://www.reddit.com/user/Anjalisharma3463"><img class="reddit"
src="https://www.redditinc.com/assets/images/site/reddit-logo.png"
alt="Reddit Logo"></a>
<a target="_blank" href="https://leetcode.com/Anjalisharma3463/"><img
class="leetcode"
src="https://res.cloudinary.com/startup-grind/image/upload/c_fill,dpr_2.0,f_auto,g_center,h_1080,q_100,w_1080/v1/gcs/platform-data-dsc/events/LeetCode_logo.png"
alt="Leetcode Logo"></a>
<br>
</div>
<br><br><br>
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var options = {
strings: [
"Student",
"Blockchain & Web3 Enthusiast",
"Cs50 Learner",
"Web Developer",
""
],
typeSpeed: 50, // Typing speed in milliseconds
backSpeed: 25, // Backspacing speed in milliseconds
loop: true // Loop the animation infinitely
};
var typed = new Typed('#typed-text', options);
});
</script>
<div id="about">
<div class="caard">
<h3 class="headings">About</h3>
<div class="img">
<img class="profile-image" src="/images/Screenshot 2023-10-25 151753.png" alt="Anjali Sharma">
</div>
<div class="title">
<p class="name">
Anjali Sharma
<img class="profile-logo" src="https://w7.pngwing.com/pngs/910/897/png-transparent-twitter-verified-badge-hd-logo-thumbnail.png" alt="Verified Badge">
</p>
</div>
<h6 class="all">Hello, I'm <em>Anjali Sharma</em>, a student currently pursuing my studies at <em>Madhav Institute of Technology and Science</em>. I have a deep passion for technology, and I'm wholeheartedly dedicated to my academic pursuits. I'm proud to say that I'm a testament student – when I commit to a course or work, I follow through with unwavering determination.
My belief in myself, hard work, and faith in my efforts are my driving forces. As someone who aspires to excel in the tech world, I'm constantly learning and pushing my boundaries. My journey in coding and technology is fueled by my enthusiasm and relentless curiosity.
I'm excited to see where this path leads me, and I'm committed to making a meaningful impact through my skills and dedication. Join me on my journey as I explore, learn, and contribute to the world of technology.</h6>
</div>
</div>
<br>
<div class="skills" id="skills">
<h6><strong>Skills</strong></h6>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="85" aria-valuemin="0"
aria-valuemax="100">C
</div>
</div>
<br>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100">JavaScript
</div>
</div>
<br>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100">GitHub
</div>
</div>
<br>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100">Git
</div>
</div>
<br>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0"
aria-valuemax="100">C++
</div>
</div>
<br>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100">Python
</div>
</div>
<br>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100">SQL
</div>
</div>
<br>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="85" aria-valuemin="0"
aria-valuemax="100">HTML
</div>
</div>
<br>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100">CSS
</div>
</div>
</div>
</div>
</div>
<div id="projects">
<div class="centered-section">
<h3 class="headings">Projects</h3>
<div class="projects-container">
<div class="card">
<img src="/images/extension_img.jpg " alt="Card Image">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg>
<div class="card__content">
<p class="card__title">Web reading Enhancer & Task Manager </p>
<p class="card__description">🔧 Features:
<br>
Note-saving,
Task management,
Text highlighting,
Text-to-speech
<br />
<small > 🛠️ Technologies Used:
GIT , github
APIs,
JavaScript</small></p>
</div>
</div>
<div class="card">
<img class="w3" src=" /images/portf.jpg " alt="Card Image">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg>
<div class="card__content">
<p class="card__title">Portfolio </p>
<p class="card__description"> This is a portfolio Website . <small > 🛠️ Technologies Used:
HTML , CSS , GIT , GITHUB
JavaScript</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-->
<div id="contact" class="form-wrapper">
<div class="form-container">
<form class="form">
<h1>Contact Me</h1>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="form-submit-btn">Submit</button>
</form>
</div>
</div>
<div class="button-container" id="resume">
<button class="namebtn" >
<a class="button" href=" " download=" ">Download My Resume</a>
</button>
</div>
<br>
<!-- <div id="contact">
<div class="contact-section">
<h1>Get in touch...</h1>
<ul class="contact-list">
<li>Email: [email protected]</li>
<li>Phone: +91 12345 67890</li>
<br>
</ul>
</div>
</div>
-->
<div class="boook">
<div class="book">
<p class="co">
Hii 👋 , Thank you for <br>visiting my Portfolio !
</p>
<div class="cover">
<p>Hover Me</p>
</div>
</div>
</div>
<br>
<footer>
<div class="copyright">
<p class="para">© 2024 Anjali sharma. All rights reserved.</p>
<p class="para">Website: <a href="https://www.johndoe.com">www.johndoe.com</a></p>
</div>
</footer>
</body>
</html>