-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
326 lines (301 loc) · 12.4 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vinita Sahu-Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<div class="scrollToTop-btn">
<i class="fas fa-angle-up"></i>
</div>
<header>
<a href="#" class="brand">Profile.</a>
<div class="menu-btn"></div>
<div class="navigation">
<a href="#main">Home</a>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#services">Services</a>
<a href="#work">Work</a>
<a href="#contact">Contact</a>
</div>
</header>
<section class="main" id="main">
<div class="content">
<h2>Hello, I'm<br><span>Vinita Sahu</span></h2>
<div class="animated-text">
<h3>Web Designer</h3>
<h3>Web Developer</h3>
<h3>Technophile</h3>
</div>
<a href="#work" class="btn">See My Work</a>
<div class="media-icons">
<a href="https://github.com/ByteBug01"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/vinita-sahu/"><i class="fab fa-linkedin"></i></a>
<!-- <a href="#"><i class="fab fa-twitter"></i></a> -->
</div>
</div>
</section>
<section class="about" id="about">
<div class="title reveal">
<h2 class="section-title">About Me</h2>
</div>
<div class="content">
<div class="column col-left reveal">
<div class="img-card">
<img src="images/me.jpg" alt="">
</div>
</div>
<div class="column col-right reveal">
<h2 class="content-title">Hey There! I'm Vinita Sahu</h2>
<p class="paragraph-text">I am an enthusiastic engineering student specializing in Information Technology from NIT Raipur. With a deep passion for problem-solving and a strong affinity for technology, I am driven to make a meaningful impact in the digital realm. I am well-versed in C++, HTML, CSS, JavaScript(Basic). I have also an interest in content writing in various field of learning. Looking ahead, my goal is to combine my technical expertise with innovation to develop cutting-edge solutions that address complex challenges in the corporate world. Ultimately, I aim to contribute to the advancement of technology and positively impact individuals and organizations through my work.</p>
<a href="https://drive.google.com/file/d/1dTkxIKCjk3ZEAWiWgw9P8zP3_qzM1SaD/view?usp=sharing" class="btn">Download CV</a>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="title reveal">
<h2 class="section-title">My Skills</h2>
</div>
<div class="content">
<div class="column col-left reveal">
<h2 class="content-title">My Skills and Experiences</h2>
<p>I possess a profound mastery of C++, Java, HTML, CSS, and JavaScript, encompassing a breadth of knowledge in these programming languages. My unwavering ambition is to acquire comprehensive expertise in essential domains such as Data Structures and Algorithms, Operating Systems, and Object-Oriented Programming. By actively seeking out real-life problems to solve, I strive to contribute to the betterment of our world. Diligently undertaking a multitude of projects, I demonstrate not only a diligent work ethic but also an unwavering commitment to self-improvement. Embracing each day as an opportunity for growth, I derive immense satisfaction from honing my skills and building a robust repertoire.</p>
<a href="https://github.com/ByteBug01" class="btn">See More</a>
</div>
<div class="column col-right reveal">
<div class="bar">
<div class="info">
<span>CPP</span>
<span>95%</span>
</div>
<div class="line CPP"></div>
</div>
<div class="bar">
<div class="info">
<span>HTML</span>
<span>95%</span>
</div>
<div class="line html"></div>
</div>
<div class="bar">
<div class="info">
<span>CSS</span>
<span>60%</span>
</div>
<div class="line css"></div>
</div>
<div class="bar">
<div class="info">
<span>Javascript</span>
<span>55%</span>
</div>
<div class="line javascript"></div>
</div>
<!-- <div class="bar">
<div class="info">
<span>Cpp</span>
<span>80%</span>
</div>
<div class="line jquery"></div>
</div> -->
<div class="bar">
<div class="info">
<span>Java</span>
<span>30%</span>
</div>
<div class="line Java"></div>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="title reveal">
<h2 class="section-title">My Services</h2>
<p>In this section, I delineate my primary areas of interest, where I possess unwavering confidence in delivering exceptional services to employers. These skills constitute my continual focus for improvement and ongoing learning.</p>
</div>
<div class="content">
<div class="card reveal">
<div class="service-icon">
<i class="fas fa-code"></i>
</div>
<div class="info">
<h3>Coding</h3>
<p>I love solving problems. I am well versed with C++ and have a good knowledge of Data Structure abd Algorithm, Object Oriented Programming and Operating System.</p>
</div>
</div>
<div class="card reveal">
<div class="service-icon">
<i class="fas fa-file-code"></i>
</div>
<div class="info">
<h3>Web Development</h3>
<p>I appreciate the transformative power of turning a simple piece of code into a visually captivating website. My comprehensive comprehension of HTML, CSS, and JavaScript enables me to construct stunning websites with finesse and precision.</p>
</div>
</div>
<div class="card reveal">
<div class="service-icon">
<i class="fas fa-palette"></i>
</div>
<div class="info">
<h3>Sketching</h3>
<p>I derive immense pleasure from engaging in pencil sketching, as it allows me to craft extraordinary artworks encompassing diverse genres such as culture, concept art, comic illustrations, landscapes, and abstract sketches. The process of creating sketches instills a deep sense of tranquility within me.</p>
</div>
</div>
<!-- <div class="card reveal">
<div class="service-icon">
<i class="fas fa-edit"></i>
</div>
<div class="info">
<h3>Content Writing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> -->
</div>
</section>
<!-- ...... -->
<section class="work" id="work">
<!--..-->
<div class="title reveal">
<h2 class="section-title">My Works</h2>
</div>
<div class="container">
<div class="ca">
<div class="img">
<img src="images/p1.jpg">
</div>
<div class="top-text">
<div class="name">
SeedGrow Nursery
</div>
<p>
<a href="https://bytebug01.github.io/SeedGrow-Nursery/">Website Link</a>
</p>
</div>
<div class="bottom-text">
<div class="text">
I designed a fully responsive website for a nursery, employing HTML, CSS, and JavaScript. This dynamic online platform empowers customers to effortlessly purchase a diverse range of plants, seeds, and pots, without the necessity of physically visiting the nursery. Through this, individuals can enhance the beauty of their gardens with ease and convenience.
</div>
<div class="btn">
<a href="https://github.com/ByteBug01">Read more</a>
</div>
</div>
</div>
<div class="ca">
<div class="img">
<img src="images/p2.png">
</div>
<div class="top-text">
<div class="name">
Portfolio Website
</div>
<p>
<a href="#">Website Link</a>
</p>
</div>
<div class="bottom-text">
<div class="text">
I crafted a responsive portfolio website utilizing HTML, CSS, and JavaScript. This comprehensive digital platform encompasses all the vital information about my professional journey, skills and projects. By ensuring optimal accessibility, gain valuable insights into my capabilities and expertise.
</div>
<div class="btn">
<a href="https://github.com/ByteBug01">Read more</a>
</div>
</div>
</div>
<div class="ca">
<div class="img">
<img src="images/p33.jpg">
</div>
<div class="top-text">
<div class="name">
KnowYourWeather
</div>
<p>
<a href="https://bytebug01.github.io/Know-Your-Weather/">Website Link</a>
</p>
</div>
<div class="bottom-text">
<div class="text">
Allows users to retrieve weather information for various cities through the utilization of the OpenWeatherMap API. This platform enables individuals to access real-time weather data, offering a view of meteorological conditions across different locations.
</div>
<div class="btn">
<a href="https://github.com/ByteBug01">Read more</a>
</div>
</div>
</div>
</div>
<!--..-->
</section>
<!-- ..... -->
<section class="contact" id="contact">
<div class="title reveal">
<h2 class="section-title">Contact Me</h2>
</div>
<div class="content">
<div class="row">
<div class="card reveal">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="info">
<h3>Address</h3>
<span>Raipur, Chhattisgarh</span>
</div>
</div>
<div class="card reveal">
<div class="contact-icon">
<i class="fas fa-phone"></i>
</div>
<div class="info">
<h3>Phone</h3>
<span>+91 8109125655</span>
</div>
</div>
<div class="card reveal">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="info">
<h3>Email Address</h3>
<span>[email protected]</span>
</div>
</div>
<!-- <div class="card reveal">
<div class="contact-icon">
<i class="fas fa-globe"></i>
</div>
<div class="info">
<h3>Website</h3>
<span>mywebsite.com</span>
</div>
</div> -->
</div>
<div class="row">
<div class="contact-form reveal">
<h3>Message Me!</h3>
<div class="input-box">
<input type="text" name="" value="" placeholder="Name">
</div>
<div class="input-box">
<input type="text" name="" value="" placeholder="Email">
</div>
<div class="input-box">
<textarea name="name" rows="8" cols="80" placeholder="Message"></textarea>
</div>
<div class="input-box">
<input type="submit" class="send-btn" name="" value="Send">
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<span class="footer-title">Thankyou, for Visiting My Website </span>
<p>Designed By <a href="#">Vinita Sahu</a></p>
</footer>
<script src="script.js" charset="utf-8"></script>
</body>
</html>