-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (157 loc) · 8.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vatsalya Sharma</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="/Resume/css/styles.css">
<script src="https://kit.fontawesome.com/233335bf61.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Roboto:wght@300&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div id="opening-display">
<div class="container-fluid">
<div class="navbartitle">
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="index.html">
<i class="fa-solid fa-code"></i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#opening-display">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experiences">Experiences</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<h2>Namaste!</h2>
<h2>I am Vatsalya</h2>
<h4>a programmer</h4>
<img class="profile-pic" src="https://cdn-icons-png.flaticon.com/512/921/921006.png" alt="profile-img">
</div>
<div id="about">
<div class="row">
<div class="col-lg-6 personal-pic-div">
<img class="personal-pic" src="images/personal-pic.jpg" alt="personal-pic">
</div>
<div class="col-lg-6 info">
<p>Hey there! My name is Vatsalya Sharma and I am currently a 2nd year student of Electrical Engineering at National Institute of Technology Hamirpur, India. I am an aspiring programmer who loves solving complex mathematical problems as well
as applying the code to solve real world challenges. I am a mere beginner in this world of programming but I aim to improve every singe day and develop a lot of amazing applications in the future. </p>
</div>
</div>
</div>
<div id="skills">
<div class="row">
<div class="skill-image-col col-md-6">
<img class="skill-img skill-img-left cpp-logo-img" src="https://cdn-icons-png.flaticon.com/512/6132/6132222.png" alt="cpp-logo-image">
<div class="image-overlay-left">
<h4 class="overlay-title cpp-title">C++</h4>
<p class="overlay-info">I am learning C++ to improve my logical reasoning and problem solving abilities. I love to understand how applications and systems work, so I practice C++ to have deeper undertanding of programming</p>
</div>
</div>
<div class="skill-image-col col-md-6">
<img class="skill-img skill-img-right webd-logo-img" src="https://cdn-icons-png.flaticon.com/512/1005/1005141.png" alt="cpp-logo-image">
<div class="image-overlay-right">
<h4 class="overlay-title webd-title">Web Developer</h4>
<p class="overlay-info">An aspiring Full Stack Developer , currently learnt till HTML, CSS , BootStrap. I loving creating the front-end of websites that excites and catches the attention of the user.</p>
</div>
</div>
<div class="skill-image-col col-md-6">
<img class="skill-img skill-img-left cpp-logo-img" src="https://cdn-icons-png.flaticon.com/512/5526/5526420.png" alt="cpp-logo-image">
<div class="image-overlay-left">
<h4 class="overlay-title contentwriting-title">Content Writing</h4>
<p class="overlay-info">I like writing poems and write-up(s) as I have passion to express my thoughts onto a sheet of paper. I have written a lot of content for the clubs I'm a part of. Deeper analysis of language always excites me. </p>
</div>
</div>
<div class="skill-image-col col-md-6">
<img class="skill-img skill-img-right cpp-logo-img" src="https://cdn-icons-png.flaticon.com/512/5773/5773875.png" alt="cpp-logo-image">
<div class="image-overlay-right">
<h4 class="overlay-title management-title">Management Skills</h4>
<p class="overlay-info">Through the clubs and societies that I am a part of, I have gained adequate experience in managing events and leading a team.</p>
</div>
</div>
</div>
</div>
<div id="experiences">
<div class="row">
<div class="col-md-6 ojas-col exp-col">
<h2 ojas-title>Executive at Team Ojas</h2>
<h4>I am an executive at Team OJAS, the departmental team of Electrical Department at NIT Hamirpur's technical fest "NIMBUS". Here, I learnt a lot from my seniors about working in a team and co-operating to create brilliant projects.</h4>
</div>
<div class="col-md-6 elsoc-col exp-col">
<h2 elsoc-title>Executive at ELSOC</h2>
<h4>I am a member of ELSOC , the departmental society of Electrical Engineering at NIT Hamirpur. It's an organisation where I am new but I hope to built some insightful projects and conduct some beneficial workshops in the future</h4>
</div>
<div class="col-md-12 cp-col exp-col">
<h2 cp-title>Competitive Programming</h2>
<h4 info-cp>I practice Competitive Programming on various website like CodeChef and Codeforces to improve my reasoning and problem solving abilities</h4>
</div>
</div>
</div>
<div id="contact">
<div class="contact-info">
<h4 class="name">Vatsalya Sharma</h4>
<div class="row">
<div class="col-md-6">
<p>📞:+91 8894676406</p>
</div>
<div class="col-md-6">
<p>📧:[email protected]</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 forms-col">
<form action="mailto:[email protected]" method="post" enctype="text/plain">
<div class="input-group">
<input type="text" id="your-name" required>
<label for="your-name"><i class="fa-solid fa-user"></i> Your Name</label>
</div>
<div class="input-group">
<input type="text" id="your-number" required>
<label for="your-number"><i class="fa-solid fa-phone"></i> Phone no.</label>
</div>
<div class="input-group">
<input type="email" id="your-mail" required>
<label for="your-mail"><i class="fa-solid fa-envelope"></i> Email ID</label>
</div>
<div class="input-group">
<textarea id="message" rows="8" required></textarea>
<label for="message"><i class="fa-solid fa-message"></i> Your Message</label>
</div>
<button type="submit">SUBMIT <i class="fa-solid fa-paper-plane"></i></button>
</form>
</div>
<div class="col-lg-6 icons-col">
<a class="socials" href="https://github.com/vatsalya1102"><i class="fa-brands fa-github fa-4x"></i></a>
<a class="socials" href="https://www.linkedin.com/in/vatsalya-sharma-698811224"><i class="fa-brands fa-linkedin fa-4x"></i></a>
<a class="socials" href="https://www.instagram.com/_._vatsalya_._/"><i class="fa-brands fa-instagram fa-4x"></i></a>
</div>
</div>
</div>
<footer id="footer">
<p class="footer-p">© Copyright Vatsalya Sharma</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>