-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (223 loc) · 11.2 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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
<link rel="stylesheet" href="p1.css" />
<link rel="icon" type="image/png" sizes="32x32" href="./LOGOGSHA.png">
<script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
<nav class="navbar">
<div class="navbar-container container">
<div>
<h1 class="navbar-brand">Sanket Bodake</h1>
</div>
<ul class="menu-items">
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact-me">Contact</a></li>
</ul>
</div>
</nav>
<div class="home-content" id="home-page">
<div class="name">
<h1>Hi, I'm <a>Sharath Kumar</a></h1>
<p>A Web Developer in training.</p>
</div>
<div class="angle-down-icon">
<a href="#about"><i class="fas fa-angle-down"></i></a>
</div>
</div>
</header>
<section class="about-me" id="about">
<div class="container">
<div class="about-content">
<div class="left-content">
<div>
<h1 class="about-heading">About Me</h1>
</div>
<img src="https://i.postimg.cc/Hx4nChpH/fbavatar-1630400663387-6838396024049256103.png" alt="image" />
<p>
Hi Buddy! I'm Sharath Kumar Bollavathri. 2024 B.Tech aspirant, eager to contribute my versatility and
passion to Software Developer.Eagerly incorporating diverse languages and frameworks like Django, Node.js
into my coding repertoire, consistently expanding my web development skills. So, far I've completed 90+ DSA
problems in <a href="https://leetcode.com/b_sharath4997/" style="text-decoration:none ; color: #F1F4FFFF;"
target="_blank"><span>LeetCode </span></a>80+ in <a style="text-decoration:none ;color: #F1F4FFFF;"
href="https://www.codingninjas.com/studio/profile/b_sharath4997" target="_blank"><span>Coding
Ninjas</span></a>
</p>
<div class="work-arrow ">
<p>
<a href="#portfolio"> <i class="fas fa-angle-down fa-stack-2x"></i></a>
</p>
</div>
</div>
<div class="skills">
<div class="right-content">
<div>
<h1 class="skills-heading">My Skills</h1>
</div>
<div class="skills-bar">
<div class="bar">
<div class="info">
<span>PYTHON</span>
</div>
<div class="progress-line"><span class="python"></span></div>
<div class="bar">
<div class="info">
<span>HTML</span>
</div>
<div class="progress-line"><span class="html"></span></div>
<div class="bar">
<div class="info">
<span>CSS</span>
</div>
<div class="progress-line"><span class="css"></span></div>
<div class="bar">
<div class="info">
<span>JAVASCRIPT</span>
</div>
<div class="progress-line"><span class="javascript"></span></div>
<div class="bar">
<div class="info">
<span>ReactJs</span>
</div>
<div class="progress-line"><span class="react"></span></div>
<div class="bar">
<div class="info">
<span>BOOTSTRAP</span>
</div>
<div class="progress-line"><span class="bootstrap"></span></div>
<div class="bar">
<div class="info">
<span>MySQL</span>
</div>
<div class="progress-line"><span class="sql"></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section-->
<section id="portfolio" class="portfolio">
<div class="container">
<h2 class="proj-heading">My Projects</h2>
<div class="portfolio-content">
<div class="proj-1">
<div class="proj1-details">
<img src="./ASL-ScreenShot.png" alt="Project 1">
<h2>American Sign Language Translator</h2>
<p>This project is an American Sign Language translator that uses React for front-end interface
and Blender for 3D animated sign language gestures, facilitating communication between ASL users and
non-signers. It translates text input into ASL gestures displayed through Blender animations.</p>
<button><a href="https://6606d4f4e4397fc6f768151a--roaring-cajeta-f61434.netlify.app/" target="_blank">Live
Demo</a></button>
<button><a href="https://github.com/sharathkumarbollavathri/ASL-translator-using-react-and-blender-"
target="_blank">GitHub</a></button>
</div>
</div>
<div class="proj-2">
<div class="proj2-details">
<img src="./dynamic-formScreenshot.png" alt="Project 2">
<h2>React Dynamic Form</h2>
<p>This project develops dynamic forms using React, enabling users to create and customize forms with
various input types in real-time. It offers a flexible interface for managing the form fields, enhancing
user
interactivity. The solution is ideal for applications requiring adaptable and user-defined form
structures.</p>
<button><a href="https://dynamic-forms-mfb5.vercel.app/" target="_blank">Live Demo</a></button>
<button><a href="https://github.com/sharathkumarbollavathri/Dynamic-Forms"
target="_blank">GitHub</a></button>
</div>
</div>
<div class="proj-3">
<div class="proj3-details">
<img src="./Amazon-clone-screenshot.png" alt="Project 3">
<h2>Amazon Clone</h2>
<p>This project is an Amazon clone built using React, simulating the core functionalities of the Amazon
e-commerce platform. It includes features such as product listings, a shopping cart, user authentication,
and a checkout process. The clone aims to provide a comprehensive understanding of developing complex web
applications with a focus on user experience and functionality.</p>
<button><a href="https://sharathkumarbollavathri.github.io/Amazon-clone/" target="_blank">Live
Demo</a></button>
<button><a href="https://github.com/sharathkumarbollavathri/Amazon-clone"
target="_blank">GitHub</a></button>
</div>
</div>
<div class="proj-4">
<div class="proj4-details">
<img src="./Typeahead-Screenshot.png" alt="Project 4">
<h2>Typeahead (Searchable dropdown)</h2>
<p>This project implements a Typeahead component using React, enhancing user experience by providing
real-time search suggestions as users type. The component is designed to handle large datasets
efficiently, offering fast and accurate autocomplete functionality. This project demonstrates proficiency
in developing interactive and responsive web applications with a focus on performance and usability.</p>
<button><a href="https://typeahead-zeta.vercel.app/" target="_blank">Live Demo</a></button>
<button><a href="https://github.com/sharathkumarbollavathri/Typeahead" target="_blank">GitHub</a></button>
</div>
</div>
<div class="proj-5">
<div class="proj5-details">
<img src="./login-i18next_Screenshot.png" alt="Project 5">
<h2>Login and Register with i18next</h2>
<p>This project features a login and registration system built using React, with internationalization
support provided by i18next. It allows users to create accounts, log in, and switch between multiple
languages seamlessly. This project showcases skills in user authentication, form handling, and
implementing multi-language support in web applications.</p>
<button><a href="https://login-register-i18next.vercel.app/" target="_blank">Live Demo</a></button>
<button><a href="https://github.com/sharathkumarbollavathri/LoginRegister_i18next"
target="_blank">GitHub</a></button>
</div>
</div>
<div class="proj-6">
<div class="proj6-details">
<img src="./calculator-screenshot.png" alt="Project 6">
<h2>Calculator</h2>
<p>This JavaScript-based project is a user-friendly, responsive calculator capable of performing essential
arithmetic operations. With a clean and intuitive interface, it ensures smooth user interaction across
various devices. Its design emphasizes usability & responsiveness, showcasing proficiency in JavaScript
development and user interface design.</p>
<button><a href="https://calculator-murex-two.vercel.app/" target="_blank">Live Demo</a></button>
<button><a href="https://github.com/sharathkumarbollavathri/Calculator" target="_blank">GitHub</a></button>
</div>
</div>
</div>
</div>
</section>
<div class="contact" id="contact-me">
<div class="container">
<div class="contact-content">
<h2>Contact Me</h2>
<p class="mail">
Get in touch with me <i class="fas fa-arrow-right"></i> <a
href="mailto:[email protected]">[email protected]</a>
</p>
<p class="links">Or find me on:</p>
<a href="https://www.linkedin.com/in/sharathkumar-bollavathri/" target="blank"><i class="fab fa-linkedin">
Linkedin</i></a>
<!-- <a href="https://codepen.io/sanketbodke" target="blank"><i class="fab fa-codepen"> CodePen</i></a> -->
<a href="https://github.com/sharathkumarbollavathri" target="blank"><i class="fab fa-github"></i> Github</a>
<!-- <a href="https://dev.to/sanketbodake" target="blank"><i class="fab fa-dev"></i> Dev Community</a> -->
<!-- <a href="https://twitter.com/Sanket46171296" target="blank"><i class="fab fa-twitter"> Twitter</i></a> -->
<a href="https://www.instagram.com/sharath__0901/" target="blank"><i class="fab fa-instagram"></i> Instagram</a>
</div>
</div>
</div>
<!-- JAVASCRIPT -->
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>