-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
304 lines (293 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/cube-icon.png" />
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vaishnavi's Portfolio</title>
</head>
<body>
<div class="experience">
<canvas class="experience-canvas"></canvas>
</div>
<!-- loading section -->
<div class="preloader">
<div class="preloader-wrapper">
<div class="loading">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</div>
<div class="page" asscroll-container>
<div class="page-wrapper" asscroll>
<!-- hero-section -->
<section class="hero">
<div class="hero-wrapper">
<div class="intro-text">Welcome to my portfolio !</div>
<div class="scroll-down">Scroll Down</div>
<div class="arrow-svg-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
height="48"
viewBox="0 -960 960 960"
width="48"
>
<path
d="M480-357q-6 0-11-2t-10-7L261-564q-9-9-9-21t9-21q9-9 21.5-9t21.5 9l176 176 176-176q9-9 21-9t21 9q9 9 9 21.5t-9 21.5L501-366q-5 5-10 7t-11 2Z"
/>
</svg>
</div>
<div class="hero-main">
<h1 class="hero-main-title">Weaving Ideas</h1>
<p class="hero-main-description">Into User Interfaces</p>
</div>
<div class="hero-second">
<h4 class="hero-second-title">Vaishnavi Sharma's</h4>
<p class="hero-second-subtitle">Portfolio</p>
</div>
</div>
</section>
<!-- sections -->
<div class="first-move section-pages"></div>
<!-- first-section -->
<section class="first-section section right">
<div class="progress-wrapper progress-bar-wrapper-right">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h1 class="section-title">About me</h1>
<span class="section-number">01</span>
</div>
<div class="section-detail-wrapper">
<i class="fa-light fa-hand-wave"></i>
<h2 class="section-subheading">
Hello there<span class="emoji">👋</span>! I'm Vaishnavi.
</h2>
<p class="section-text">
I am a passionate web developer hailing from the vibrant city of
Indore, India. With a Bachelor's degree in Technology in Computer
Science, I've honed my skills and cultivated a deep love for
crafting innovative solutions through web development.
</p>
<h2 class="section-subheading">
<span class="material-icons lineup emoji"> code </span>
Code( );
</h2>
<p class="section-text">
<b
>For me, coding isn't just a profession; it's a profound
passion.</b
><br />
I thrive on the challenges it presents and the opportunities it
unlocks for continuous growth. Whether it's mastering new
languages, diving into emerging frameworks, or experimenting with
cutting-edge technologies, I'm always eager to expand my knowledge
and push the boundaries of what's possible.
</p>
<h2 class="section-subheading">
<span class="emoji">🎯</span>Vision for Impact
</h2>
<p class="section-text">
My ultimate aspiration is to make a meaningful impact in the world
of technology. I envision a future where my contributions pave the
way for transformative advancements, enriching the lives of people
globally.
</p>
<h2 class="section-subheading">
Fun fact about me<span class="emoji">😊</span>
</h2>
<p class="section-text">
I love cold-coffee and playing ukulele.<br />
(P.S:- I am also a huge fan of anime.)
</p>
</div>
</section>
<!-- second-section -->
<div class="second-move section-pages"></div>
<section class="second-section section left">
<div class="progress-wrapper progress-bar-wrapper-left">
<div class="progress-bar blue-background"></div>
</div>
<div class="section-intro-wrapper">
<h1 class="section-title">My Creations</h1>
<span class="section-number">02</span>
</div>
<div class="section-detail-wrapper">
<h2 class="heading">Web Development</h2>
<p class="section-text">
I prefer to learn by doing. So, throughout my academic years, I
have developed many web-based projects that helped me enhance my
skills and provide me better understanding of different
technologies. Do check it out 😉!
</p>
<h3 class="section-subheading">Utopia</h3>
<p class="section-text">
"Utopia Fashion E-Store" is a vibrant online platform catering to
the diverse fashion needs of families. To develop this
application, I used
<b>React.js</b>, <b>Express.js</b>, <b>Redux</b>,
<b>Firebase</b>,<b> SCSS</b> and <b>Stripe</b> API's payment
gateway.
</p>
<button class="applink-button" role="button">
<a href="https://utopia-kaito-bot.vercel.app" target="_blank"
>🔗App</a
>
</button>
<h3 class="section-subheading">VS 2.0</h3>
<p class="section-text">
"VS 2.0" is a 3D Room Portfolio Website. This was the first time I
have worked with 3D and I absolutely loved it ❤️. For this
website, I developed a 3D model using <b>Spline</b> and used
<b>Three.js </b>(to render the model and environment),<b>GSAP</b>
(to animate things) and <b>Vanilla javaScript</b> to develop this
beautiful Room Portfolio Website.
</p>
<button class="applink-button" role="button">
<a
href="https://vaishnavi-sharma-portfolio.vercel.app/"
target="_blank"
>🔗App</a
>
</button>
<h3 class="section-subheading">Evento</h3>
<p class="section-text">
This project is a work in progress 🔧, but it is an event
management application that will be developed using
<b>MERN</b> stack to streamline the process of event creation and
registration.
</p>
<button class="applink-button" role="button">
<a href="https://github.com/kaito-bot/Evento" target="_blank"
>🔗GitHub</a
>
</button>
<h3 class="section-subheading">Monsterque</h3>
<p class="section-text">
"Monsterque" is a simple search component featuring an elegant and
intuitive User Interface. Through seamless integration with the
<b>Fetch API</b>, Monsterque swiftly retrieves data from a
third-party API, enabling users to swiftly locate their desired
character. I used <b>React.js</b> to develop this small
application.
</p>
<button class="applink-button" role="button">
<a href="https://monsterque.netlify.app/" target="_blank"
>🔗App</a
>
</button>
<h3 class="section-subheading">HaveSomeWater</h3>
<p class="section-text">
"HaveSomeWater" is a small web application that keeps track of how
much water you drank in the whole day and how much water💧 is
remaining. I developed this small application using <b>HTML</b>,
<b>CSS</b> and <b>JavaScript</b>
</p>
<button class="applink-button" role="button">
<a href="https://havesomewater.netlify.app/" target="_blank"
>🔗App</a
>
</button>
<h3 class="section-subheading">Finansiera</h3>
<p class="section-text">
"Finansiera" is a 🪙 Finance company's landing page. I Developed
this website using
<b>HTML</b> and<b> CSS</b>.
</p>
<button class="applink-button" role="button">
<a href="https://finansiera.netlify.app/" target="_blank">
🔗App
</a>
</button>
<h3 class="section-subheading">Kavai</h3>
<p class="section-text">
"Kavai" is a Hotel's landing page. I Developed this website using
<b>HTML</b> and<b> CSS</b>.
</p>
<but class="applink-button">
<a href="https://kavaihotel.netlify.app/" target="_blank">
🔗App</a
>
</but>
</div>
</section>
<!-- third-section -->
<div class="third-move section-pages"></div>
<section class="third-section section right">
<div class="progress-wrapper progress-bar-wrapper-right">
<div class="progress-bar green-background"></div>
</div>
<div class="section-intro-wrapper">
<h1 class="section-title">Let's Connect 🤝</h1>
<span class="section-number">03</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-subheading">LinkedIn 💼</h3>
<p class="section-text">
Feel free to reach out and connect with me on LinkedIn for
professional networking and collaboration opportunities.
</p>
<button class="connect-button" role="button">
<a
href="https://www.linkedin.com/in/vaishnavi2023/"
target="_blank"
>LinkedIn</a
>
</button>
<h3 class="section-subheading">GitHub 🚀</h3>
<p class="section-text">
Dive into my code repositories and projects on GitHub to explore
my coding journey. Follow me for updates on my latest coding
endeavors and collaborations.
</p>
<button class="connect-button" role="button">
<a href="https://github.com/kaito-bot" target="_blank">GitHub</a>
</button>
<h3 class="section-subheading">Linktree 🌳</h3>
<p class="section-text">
Explore my digital presence and stay updated on my latest
projects, certifications, achievements, and more through my
Linktree profile.
</p>
<button class="connect-button" role="button">
<a href="https://linktr.ee/vaishnavi02sharma" target="_blank"
>Linktree</a
>
</button>
<h3 class="section-subheading">LeetCode 👩🏻💻</h3>
<p class="section-text">
Find me on LeetCode and let's solve problems together!!!
</p>
<button class="connect-button" role="button">
<a href="https://leetcode.com/kaito-bot/" target="_blank"
>LeetCode</a
>
</button>
<h3 class="section-subheading">Instagram ✨</h3>
<p class="section-text">
📸🎶 Apart from coding, I love to sing. You'll find my music
videos and more on my Instagram profile. Follow along for a mix of
tech and tunes!🎵 <b>#CodingAndChords</b>.
</p>
<button class="connect-button" role="button">
<a href="https://www.instagram.com/kavaisha/" target="_blank"
>Instagram</a
>
</button>
</div>
</section>
<div class="blank-space"> </div>
<div class="footer">Made with ❤️ by Vaishnavi Sharma</div>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>