-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (162 loc) · 7.57 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="header">
<nav>
<h1><VAIBHAV></h1>
<ul>
<li><a href="#"><b>HOME</b></a></li>
<li><a href="#about"><b>ABOUT</b></a></li>
<li><a href="#contact"><b>CONTACT</b></a></li>
</ul>
</nav>
<div class="container">
<div class="row">
<div class="header-text">
<h2>Hi!, I am</h2>
<h1>Vaibhav Verma</h1>
<h2>From Economics Dept., IITB</h2>
</div>
<div class="header-img">
<img src="images/me.jpg" alt="">
</div>
</div>
</div>
</div>
<!------------------about----------------->
<div id="about">
<div class="container2">
<div class="row row2">
<div class="about-col-1">
<h1 class="sub-title">About Me</h1>
<br><br>
<p><b>When I first came through across Java in Grade 8th, I was amazed with the
language as we could communicate with computers and softwares in it and even create them.
Since, then I have had passion for coding and therefore I am interested in learning different languages and tech-stacks to create
products/softwares that impact people on a day-to-day basis. Here are some of the languages I know and some of the hobbies that I have.</b></p>
<br><br>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">SKILLS</p>
<p class="tab-links" onclick="opentab('hobbies')">HOBBIES</p>
</div>
<div class="tab-contents active-tab" id="skills">
<img src="images/java.png" class="images">
<img src="images/c++.png" class="images">
<img src="images/html.png" class="images">
<img src="images/css.png" class="images">
<img src="images/js.png" class="images" id="last">
</div>
<div class="tab-contents" id="hobbies">
<div class="card">
<div class="content">
<h2>01</h2>
<h3>Music</h3>
<p>I have learnt classical music and also have performed in a lot of stages across India. I also play guitar and piano, it helps me keep
myself calm and composed. </p>
</div>
</div>
<div class="card">
<div class="content">
<h2>02</h2>
<h3>Sports</h3>
<p>I play a lot of sports namely football, badminton, basketball, etc. I have also played badminton and football at state level. Sports
not only has taught me a lot of life lessons and qualities but also gives me solace where I forget everything and it's only me and the game.
</p>
</div>
</div>
<div class="card">
<div class="content">
<h2>03</h2>
<h3>Exploring new things</h3>
<p>This hobby of mine is not only restricted to exploring new tech-stacks or languages but I also find learning new things
like learning new instruments or exploring a new place interesting.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-----------------------------contact---------------------------->
<div id="contact">
<div class="container">
<h1 class="sub-title">Contact Me</h1>
<div class="row">
<div class="contact-left">
<p><i class="fa-solid fa-envelope"></i> [email protected]</p>
<p><i class="fa-solid fa-phone"></i> 7302169510</p>
<div class="social-icons">
<a href="https://github.com/vaibhav1724"><i class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/vaibhav-verma-736a531b0/"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://www.instagram.com/vaibhav._.verma17/"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" placeholder="Your Message" rows="6"></textarea>
<button type="submit" class="btn">Send</button>
</form>
</div>
</div>
</div>
<div class="copyright">
<p>Made by Vaibhav Verma <i class="fa-solid fa-face-smile"></i> </p>
</div>
</div>
<script>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-contents");
function opentab(tabname){
for (tablink of tablinks) {
tablink.classList.remove("active-link");
}
for (tabcontent of tabcontents) {
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script type="text/javascript" src="vanilla-tilt.js"></script>
<script>
VanillaTilt.init(document.querySelectorAll(".images"), {
max: 25,
speed: 400,
glare: true,
"max-glare":1
});
</script>
<script>
VanillaTilt.init(document.querySelectorAll(".card"), {
max: 25,
speed: 400,
glare: true,
"max-glare":1
});
</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbyTxSGD7tOUzOQYjEAfec7ubfR0oWtvj0M6YrMx4qZ_ArU0NxtsEDic58mxagS8w0BA/exec'
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
alert("The message has been sent successfully");
console.log('Success!', response);
form.reset();
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>