-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
298 lines (280 loc) · 15.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
</head>
<body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-width">
<img src="images/avlogo1.jpeg" style="height: 50px; width: 50px; border-radius: 30 px;"/>
<!-- <div class="logo"><a href="#"><span>Vasra</span>folio.</a></div> -->
<ul class="menu">
<li><a href="#home" class="menu-btn">Home</a></li>
<li><a href="#about" class="menu-btn">About</a></li>
<li><a href="#interests" class="menu-btn">Interests</a></li>
<li><a href="#skills" class="menu-btn">Skills</a></li>
<li><a href="#projects" class="menu-btn">Projects</a></li>
<li><a href="#contact" class="menu-btn">Contact</a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello! , My Name is</div>
<div class="text-2">Abijeeth Vasra </div>
<div class="text-3">And I'm a <span class="typing"></span></div>
</div>
</div>
</section>
<!-- about section start -->
<section class="about" id="about">
<div class="max-width">
<h2 class="title" style="color: beige;">About Me!</h2>
<div class="about-content">
<div class="column left">
<img src="images/about_me.jpg" alt="">
</div>
<div class="column right">
<div class="text">I'm Abijeeth and I'm a <span class="typing-2"></span></div>
<p style="color: beige;">I'm an undergrad IT student in my final year at Thiagarajar College of Engineering. I like discovering new technologies. I appreciate figuring out simple answers to complex issues.</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skillss')">Skills</p>
<p class="tab-links" onclick="opentab('education')">Education</p>
<p class="tab-links" onclick="opentab('awards')">Awards and Membership</p>
</div>
<div class="tab-contents active-tab" id="skillss">
<ul>
<li><span>Web Development</span><br>Designing Web Interfaces using various frameworks</li>
<li><span>Machine Learning and AI</span><br>Use Ml models to solve complex problems.</li>
<li><span>App Development</span><br>Design Ui for Apps and to explore backend code.<br></li>
</ul>
</div>
<div class="tab-contents" id = "education">
<ul>
<li><span>2019</span><br>Completed Schooling from Jain Vidyalaya</li>
<li><span>2023</span><br>Will complete My UG degree from TCE</li>
</ul>
</div>
<div class="tab-contents" id = "awards">
<ul>
<li><span>Academic Achiever 2019-2020</span><br>Received Silver Medal of Excellence </li>
<li><span>IUCEE Student Member</span><br>Completed a course in AI</li>
<li><span>3rd Prize in Makethon 2021</span><br>Won 3rd prize in hackathon</li>
<li><span>1st Prize in Beatrix 2021</span><br>Won 1st prize in hackathon at TCE</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Interest section start -->
<section class="interests" id="interests">
<div class="max-width">
<h2 class="title">Things I love!</h2>
<div class="serv-content">
<div class="card">
<div class="box">
<i class="fa fa-mobile"></i>
<div class="text">Trending Tech!</div>
<p>I enjoy learning about new technologies, both from a hardware and software standpoint. I mostly concentrate on products based on more contemporary technologies like IoT, ML, and AI.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">Solving Problems</div>
<p>To address complicated problems effectively is a challenge I enjoy taking on. Without learning, a solution is blind. A problem solution must be simple enough for other developers to understand.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fa fa-tree"></i>
<div class="text">Bonsai Gardening</div>
<p>I enjoy cultivating miniature indoor shrubs and plants. My focus has now shifted to bonsai, which is a small art form of enormous, lovely trees. A single bonsai tree requires years to flourish!</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- skills section start -->
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title" style="color: beige;">My skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">My creative skills</div>
<p>HTML, CSS, and JS are some of the fundamental languages I am familiar with. To develop better websites with it, I am learning some complicated web frameworks like React JS. I am also interested in the data science sector, particularly machine learning. I enjoy utilising machine learning (ML) models to find solutions to issues that humans face on a daily basis, making their jobs easier. I also have a rudimentary understanding of DBs like Mongo DB and MySQL. I'm eager to learn more languages and frameworks as I go!</p>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>HTML</span>
<span>90%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>CSS</span>
<span>60%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>80%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>Machine Learning</span>
<span>75%</span>
</div>
<div class="line php"></div>
</div>
<div class="bars">
<div class="info">
<span>MySQL</span>
<span>70%</span>
</div>
<div class="line mysql"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Project section start -->
<section class="projects" id="projects">
<div class="max-width">
<h2 class="title">My Projects</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="images/grievance.jpg" alt="">
<div class="text" style="color: beige;">Automatic Grievance Registration</div>
<p>
Public complaints must be resolved as soon as possible, which is impossible with the use of typical
paper-work procedures. A CNN-based solution will accelerate the process. In this project, a lightweight
CNN model is integrated into an Android app to quickly and effectively register and save public complaints.
</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/carprice.png" alt="">
<div class="text" style="color: beige;">Car Price Prediction</div>
<p>Before purchasing a new car, many buyers first purchase a used one as a learning tool. There are several factors to take into account while choosing the ideal car, such as the number of miles travelled and the condition of the engine. In this project, a machine learning (ML) model is trained and used to forecast the cost of the car based on inputs from the user. </p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/sentiment.png" alt="">
<div class="text" style="color: beige;">Sentiment Analysis of Customer Reviews</div>
<p>Presently, there are significantly more people making purchases online. There are also many counterfeit goods available. Therefore, this project assists clients in selecting the ideal item from the list by analysing the customer reviews provided by each user who previously purchased this. A sentiment score will be determined based on that.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/found.jpg" alt="">
<div class="text" style="color: beige;">Lost and Found - Website</div>
<p>Items can occasionally get lost, which makes it challenging for the user to locate the lost object. In this project, a portal is developed to assist users in locating lost items. Users who lost anything will submit the information, and someone who discovers it in someplace will give it back to them.</p>
</div>
</div>
</div>
</div>
</section>
<!-- contact section start -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title" style="color: beige;">Contact me</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Get In Touch!</div>
<p>If you get in touch with me, I will be overjoyed. My name, email address, and LinkedIn ID are listed here. Try to get in touch with me.</p>
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Name</div>
<div class="sub-title" style="color:lightgrey">Abijeeth Vasra</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">E-mail</div>
<div class="sub-title" style="color:lightgrey">[email protected]</div>
</div>
</div>
<div class="row">
<i class="fas fa-link"></i>
<div class="info">
<div class="head">LinkedIn</div>
<div class="sub-title" style="color:lightgrey"><a href="https://www.linkedin.com/in/abijeeth-vasra-3057081a2/" style="color: lightgray;">Click to Connect!</a></div>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="text">Message me</div>
<form action="https://getform.io/f/f337b62d-3ad4-41f8-be16-34842aea0b47" method="post">
<div class="fields">
<div class="field name">
<input type="text" name = "Name" placeholder="Name" required>
</div>
<div class="field email">
<input type="email" name = "Email" placeholder="Email" required>
</div>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" name = "Message" placeholder="Message.." required></textarea>
</div>
<div class="button-area">
<button type="submit">Send message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer section start -->
<footer>
<span>Created By <span style="color: beige;">Abijeeth</span> with <i class="fa fa-heart" aria-hidden="true" style="color: crimson;"></i> | <span class="far fa-copyright"></span> 2022 All rights reserved.</span>
</footer>
<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 src="script.js"></script>
</body>
</html>