-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
358 lines (337 loc) · 23.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
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
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<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>Pratham c0des!</title>
<!-- favicon -->
<link rel="icon"
type="image/png"
href="undraw_Male_avatar_g98d.png">
<!-- FONTS -->
<style>@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap');</style>
<!-- STYLES -->
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="styles/nav.css">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/project.css">
<script defer src="index.js"></script>
</head>
<body>
<navbar class="nav-bar-container">
<div class="profile">
<a >
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 532 532" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="270.75986" cy="260.93427" r="86.34897" fill="#ffb6b6"/><polygon points="221.18982 360.05209 217.28876 320.6185 295.18982 306.05209 341.18982 418.05209 261.18982 510.05209 204.18982 398.05209 221.18982 360.05209" fill="#ffb6b6"/><path d="M216.0374,340.35736l17.03111,3.84802s-13.38821-42.45453-8.84396-46.50766c4.54427-4.05316,15.68007,2.33328,15.68007,2.33328l11.70201,13.1199,14.25394-14.51239s15.47495-19.2421,21.53397-24.6463-3.67319-25.46364-3.67319-25.46364c0,0,89.89185-24.23923,56.44299-67.83968,0,0-19.61093-34.18452-25.99734-23.04871-6.38641,11.1358-14.00162-6.55013-14.00162-6.55013l-23.25381,4.42198s-45.89429-27.06042-89.45331,30.82959c-43.55902,57.89003,28.57916,154.01572,28.57916,154.01572h-.00002Z" fill="#2f2e41"/><path d="M433.16003,472.95001c-47.19,38.26001-105.57001,59.04999-167.16003,59.04999-56.23999,0-109.81-17.33997-154.62-49.47998,.08002-.84003,.16003-1.66998,.23004-2.5,1.19-13,2.25-25.64001,2.94995-36.12,2.71002-40.69,97.64001-67.81,97.64001-67.81,0,0,.42999,.42999,1.29004,1.17999,5.23999,4.59998,26.50995,21.27997,63.81,25.94,33.25995,4.15997,44.20996-15.57001,47.51996-25.02002,1-2.88,1.30005-4.81,1.30005-4.81l97.63995,46.10999c6.37,9.10004,8.86005,28.70001,9.35004,50.73004,.01996,.90997,.03998,1.81,.04999,2.72998Z" fill="#5c69ff"/><path d="M454.09003,77.91003C403.85004,27.66998,337.05005,0,266,0S128.15002,27.66998,77.91003,77.91003C27.67004,128.15002,0,194.95001,0,266c0,64.85004,23.05005,126.16003,65.29004,174.57001,4.02997,4.63,8.23999,9.14001,12.62,13.52002,1.02997,1.02997,2.07001,2.06,3.12,3.06,2.79999,2.70996,5.65002,5.35999,8.54999,7.92999,1.76001,1.57001,3.54004,3.10999,5.34003,4.62,1.40997,1.19,2.82001,2.35999,4.25,3.51001,.02997,.02997,.04999,.04999,.07996,.07001,3.97003,3.19995,8.01001,6.27997,12.13,9.23999,44.81,32.14001,98.37999,49.47998,154.61998,49.47998,61.59003,0,119.97003-20.78998,167.16003-59.04999,3.84998-3.12,7.62-6.35999,11.32001-9.71002,3.26996-2.95996,6.46997-6.01001,9.60999-9.14996,.98999-.98999,1.97998-1.98999,2.95001-3,2.70001-2.78003,5.32001-5.61005,7.88-8.48004,43.37-48.71997,67.07996-110.83997,67.07996-176.60999,0-71.04999-27.66998-137.84998-77.90997-188.08997Zm10.17999,362.20997c-2.5,2.84003-5.06,5.64001-7.67999,8.37-4.08002,4.25-8.28998,8.37-12.64001,12.34003-1.64996,1.52002-3.32001,3-5.01001,4.46997-1.91998,1.67004-3.85999,3.31-5.82996,4.92004-15.53003,12.75-32.54004,23.75-50.73004,32.70996-7.19,3.54999-14.56,6.78003-22.09998,9.67004-29.28998,11.23999-61.08002,17.39996-94.28003,17.39996-32.03998,0-62.75995-5.73999-91.19-16.23999-11.66998-4.29999-22.94995-9.40997-33.77997-15.26001-1.59003-.85999-3.16998-1.72998-4.73999-2.62-8.26001-4.67999-16.25-9.78998-23.91998-15.31-.25-.17999-.51001-.37-.76001-.54999-5.46002-3.94-10.77002-8.09003-15.90002-12.45001-1.88-1.59003-3.73999-3.20001-5.57001-4.84998-2.97998-2.65002-5.89996-5.38-8.75-8.18005-5.39996-5.28998-10.56-10.79999-15.48999-16.52997C26.09003,391.77002,2,331.65002,2,266,2,120.42999,120.43005,2,266,2s264,118.42999,264,264c0,66.66003-24.82996,127.62-65.72998,174.12Z" fill="#3f3d56"/></svg>
</a>
</div>
<div class="nav-links">
<button onclick="scrollHome()"><div class="nav-elements">HOME</div></button>
<button onclick="scrollProjects()" > <div class="nav-elements">PROJECTS</div></button>
<button onclick="scrollConnect()"> <div class="nav-elements">CONNECT</div></button>
<a href="./hire.html"> <div class="nav-elements">HIRE ME</div></a>
<div class="ham-menu">
<img onclick="ham()" src="essentials/menu-light.png" alt="menu">
</div>
</div>
<div class="ham-links" id="ham-menu-id">
<a onclick="scrollHome(), ham()" class="ham-elements"><div >HOME</div></a>
<a onclick="scrollProjects(), ham()" class="ham-elements"> <div>PROJECTS</div></a>
<a onclick="scrollConnect(), ham()" class="ham-elements"> <div>CONNECT</div></a>
<a href="./hire.html" class="ham-elements"> <div>HIRE ME</div></a>
</div>
</navbar>
<main class="main-container">
<img width="100%" src="essentials/space.gif" alt="">
<div class="absolute">
<div class="heading">Prathmesh Kale</div>
<div class="subtxt">
Working in Design and Development. <br>A Computer science student with a foot in design and vision with big dreams in my head.
</div>
</div>
<a href="./hire.html">Download C.V</a>
</main>
<about class="about-container">
<div class="first margin-top">
<div class="about">
<div class="head">ABOUT</div>
<p>I am a 21.y.o Software developer interested in Web Development and Machine learning based in India!
I focus mostly learning through projects and I am facinated by cool new technologies.
I am a determined life long learner, completely creative and solution seeking person.
</p>
</div>
<div class="book-img-container">
<img class="book-img" src="essentials/man-reading-book (2).jpg" alt="">
</div>
</div>
<div class="projects-head">
<a href="./projects.html">MY PROJECTS</a>
<p class="projects-subtxt">Click to see all 👆🏼</p>
</div>
<div class="first">
<div class="scroller">
<ul class="tag-list scroller__inner">
<li>
<div class="card">
Chessable
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/Chessable">
<img src="essentials/chessable.png" alt="Chessable">
</a>
</div>
</li>
<li>
<div class="card">
Mental health platform
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/Mental-Health-Platform">
<img src="essentials/mental health.png" alt="mental health">
</a>
</div>
</li>
<li>
<div class="card">
Mini calculator
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/Mini-calculator">
<img src="essentials/calculator.png" alt="calcy">
</a>
</div>
</li>
<li>
<div class="card"`>
DripAnime - Apparel Store
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/DripAnime">
<img src="essentials/dripanime.png" alt="DripAnime">
</a>
</div>
</li>
<li>
<div class="card">
Instagram clone
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/Instagram-clone">
<img src="essentials/instagram.png" alt="instagram">
</a>
</div>
</li>
<li>
<div class="card">
9anime clone
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/9anime-clone">
<img src="essentials/9anime.png" alt="9anime">
</a>
</div>
</li>
<li>
<div class="card">
Todos List - Full stack app
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/TODOs-list">
<img src="essentials/todolist.png" alt="todolist">
</a>
</div>
</li>
<!-- halftime -->
<li>
<div class="card">
Chessable
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/Chessable">
<img src="essentials/chessable.png" alt="Chessable">
</a>
</div>
</li>
<li>
<div class="card">
Mental health platform
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/Mental-Health-Platform">
<img src="essentials/mental health.png" alt="mental health">
</a>
</div>
</li>
<li>
<div class="card">
Mini calculator
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/Mini-calculator">
<img src="essentials/calculator.png" alt="calcy">
</a>
</div>
</li>
<li>
<div class="card"`>
DripAnime - Apparel Store
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/DripAnime">
<img src="essentials/dripanime.png" alt="DripAnime">
</a>
</div>
</li>
<li>
<div class="card">
Instagram clone
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/Instagram-clone">
<img src="essentials/instagram.png" alt="instagram">
</a>
</div>
</li>
<li>
<div class="card">
9anime clone
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/9anime-clone">
<img src="essentials/9anime.png" alt="9anime">
</a>
</div>
</li>
<li>
<div class="card">
Todos List - Full stack app
<a class="pro-img-container" target="_blank" href="https://github.com/prathmesh-ka-github/TODOs-list">
<img src="essentials/todolist.png" alt="todolist">
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="first">
<div class="hobby-img-container">
<img class="hobby-img" src="essentials/hiking.jpg" alt="">
</div>
<div class="hobbys">
<div class="head">INFORMAL ME</div>
<p>There are many things that interest me aside from coding! <br>
I really enjoy -
<ul>
<li>Hiking</li>
<li>Photography</li>
<li>Stargazing</li>
<li>Playing Guitar</li>
<li>Bike rides</li>
<li>Sketching</li>
<li>Reading Books</li>
<li>Weight lifting</li>
<li>Learing new skills</li>
</ul>
</p>
</div>
</div>
<div class="tags-container">
<div class="head">TECHNOLOGIES</div>
<div class="tags">
<div class="tag">C</div>
<div class="tag">Java</div>
<div class="tag">Python</div>
<div class="tag">HTML</div>
<div class="tag">CSS</div>
<div class="tag">JavaScript</div>
<div class="tag">TypeScript</div>
<div class="tag">ReactJS</div>
<div class="tag">TailwindCSS</div>
<div class="tag">Bootstrap5</div>
<div class="tag">MongoDB</div>
<div class="tag">PostgreSQL</div>
<div class="tag">MySQL</div>
<div class="tag">ExpressJS</div>
<div class="tag">NodeJS</div>
<div class="tag">Docker</div>
<div class="tag">Git</div>
<div class="tag">Figma</div>
<div class="tag">Adobe Photoshop</div>
<div class="tag">Adobe Illustrator</div>
</div>
</div>
<div class="first">
<div class="socials">
<div class="head">LET'S SOCIALIZE!</div>
<p>
I'd love to talk and geek out on projects and other cool stuff!!
<div class="linkss-container">
<div>
<a class="linkss" target="_blank" href="https://www.linkedin.com/in/prathmesh-kale-a1713623a/">
<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"
width="100px" height="100px"><path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M10.496,8.403 c0.842,0,1.403,0.561,1.403,1.309c0,0.748-0.561,1.309-1.496,1.309C9.561,11.022,9,10.46,9,9.712C9,8.964,9.561,8.403,10.496,8.403z M12,20H9v-8h3V20z M22,20h-2.824v-4.372c0-1.209-0.753-1.488-1.035-1.488s-1.224,0.186-1.224,1.488c0,0.186,0,4.372,0,4.372H14v-8 h2.918v1.116C17.294,12.465,18.047,12,19.459,12C20.871,12,22,13.116,22,15.628V20z"/></svg>
</a>
<a class="linkss" target="_blank" href="https://github.com/prathmesh-ka-github">
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"
width="100px" height="100px"><path d="M32 6C17.641 6 6 17.641 6 32c0 12.277 8.512 22.56 19.955 25.286-.592-.141-1.179-.299-1.755-.479V50.85c0 0-.975.325-2.275.325-3.637 0-5.148-3.245-5.525-4.875-.229-.993-.827-1.934-1.469-2.509-.767-.684-1.126-.686-1.131-.92-.01-.491.658-.471.975-.471 1.625 0 2.857 1.729 3.429 2.623 1.417 2.207 2.938 2.577 3.721 2.577.975 0 1.817-.146 2.397-.426.268-1.888 1.108-3.57 2.478-4.774-6.097-1.219-10.4-4.716-10.4-10.4 0-2.928 1.175-5.619 3.133-7.792C19.333 23.641 19 22.494 19 20.625c0-1.235.086-2.751.65-4.225 0 0 3.708.026 7.205 3.338C28.469 19.268 30.196 19 32 19s3.531.268 5.145.738c3.497-3.312 7.205-3.338 7.205-3.338.567 1.474.65 2.99.65 4.225 0 2.015-.268 3.19-.432 3.697C46.466 26.475 47.6 29.124 47.6 32c0 5.684-4.303 9.181-10.4 10.4 1.628 1.43 2.6 3.513 2.6 5.85v8.557c-.576.181-1.162.338-1.755.479C49.488 54.56 58 44.277 58 32 58 17.641 46.359 6 32 6zM33.813 57.93C33.214 57.972 32.61 58 32 58 32.61 58 33.213 57.971 33.813 57.93zM37.786 57.346c-1.164.265-2.357.451-3.575.554C35.429 57.797 36.622 57.61 37.786 57.346zM32 58c-.61 0-1.214-.028-1.813-.07C30.787 57.971 31.39 58 32 58zM29.788 57.9c-1.217-.103-2.411-.289-3.574-.554C27.378 57.61 28.571 57.797 29.788 57.9z"/></svg>
</a>
</div>
<div>
<a class="linkss" target="_blank" href="discordapp.com/users/482164041100427264">
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"
width="105px" height="105px"><path d="M 41.625 10.769531 C 37.644531 7.566406 31.347656 7.023438 31.078125 7.003906 C 30.660156 6.96875 30.261719 7.203125 30.089844 7.589844 C 30.074219 7.613281 29.9375 7.929688 29.785156 8.421875 C 32.417969 8.867188 35.652344 9.761719 38.578125 11.578125 C 39.046875 11.867188 39.191406 12.484375 38.902344 12.953125 C 38.710938 13.261719 38.386719 13.429688 38.050781 13.429688 C 37.871094 13.429688 37.6875 13.378906 37.523438 13.277344 C 32.492188 10.15625 26.210938 10 25 10 C 23.789063 10 17.503906 10.15625 12.476563 13.277344 C 12.007813 13.570313 11.390625 13.425781 11.101563 12.957031 C 10.808594 12.484375 10.953125 11.871094 11.421875 11.578125 C 14.347656 9.765625 17.582031 8.867188 20.214844 8.425781 C 20.0625 7.929688 19.925781 7.617188 19.914063 7.589844 C 19.738281 7.203125 19.34375 6.960938 18.921875 7.003906 C 18.652344 7.023438 12.355469 7.566406 8.320313 10.8125 C 6.214844 12.761719 2 24.152344 2 34 C 2 34.175781 2.046875 34.34375 2.132813 34.496094 C 5.039063 39.605469 12.972656 40.941406 14.78125 41 C 14.789063 41 14.800781 41 14.8125 41 C 15.132813 41 15.433594 40.847656 15.621094 40.589844 L 17.449219 38.074219 C 12.515625 36.800781 9.996094 34.636719 9.851563 34.507813 C 9.4375 34.144531 9.398438 33.511719 9.765625 33.097656 C 10.128906 32.683594 10.761719 32.644531 11.175781 33.007813 C 11.234375 33.0625 15.875 37 25 37 C 34.140625 37 38.78125 33.046875 38.828125 33.007813 C 39.242188 32.648438 39.871094 32.683594 40.238281 33.101563 C 40.601563 33.515625 40.5625 34.144531 40.148438 34.507813 C 40.003906 34.636719 37.484375 36.800781 32.550781 38.074219 L 34.378906 40.589844 C 34.566406 40.847656 34.867188 41 35.1875 41 C 35.199219 41 35.210938 41 35.21875 41 C 37.027344 40.941406 44.960938 39.605469 47.867188 34.496094 C 47.953125 34.34375 48 34.175781 48 34 C 48 24.152344 43.785156 12.761719 41.625 10.769531 Z M 18.5 30 C 16.566406 30 15 28.210938 15 26 C 15 23.789063 16.566406 22 18.5 22 C 20.433594 22 22 23.789063 22 26 C 22 28.210938 20.433594 30 18.5 30 Z M 31.5 30 C 29.566406 30 28 28.210938 28 26 C 28 23.789063 29.566406 22 31.5 22 C 33.433594 22 35 23.789063 35 26 C 35 28.210938 33.433594 30 31.5 30 Z"/></svg>
</a>
<a class="linkss" target="_blank" href="https://www.instagram.com/_wings_like_eagles_/">
<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"
width="90px" height="90px"> <path d="M 16 3 C 8.83 3 3 8.83 3 16 L 3 34 C 3 41.17 8.83 47 16 47 L 34 47 C 41.17 47 47 41.17 47 34 L 47 16 C 47 8.83 41.17 3 34 3 L 16 3 z M 37 11 C 38.1 11 39 11.9 39 13 C 39 14.1 38.1 15 37 15 C 35.9 15 35 14.1 35 13 C 35 11.9 35.9 11 37 11 z M 25 14 C 31.07 14 36 18.93 36 25 C 36 31.07 31.07 36 25 36 C 18.93 36 14 31.07 14 25 C 14 18.93 18.93 14 25 14 z M 25 16 C 20.04 16 16 20.04 16 25 C 16 29.96 20.04 34 25 34 C 29.96 34 34 29.96 34 25 C 34 20.04 29.96 16 25 16 z"/></svg>
</a>
</div>
</div>
</p>
</div>
<div class="social-img-container">
<img class="social-img" src="essentials/socialize.jpg" alt="">
</div>
</div>
</about>
<footer class="footer-container">
<div>Copyright © 2022 - All right reserved by prathmesh-ka-github on Github Pages.</div>
<div class="mail">
<a href="mailto:connect.prathmeshkale@outlook.com" target="_blank">
connect.prathmeshkale@outlook.com
</a>
</div>
</footer>
<div class="loader-container" id="loader-container"
<div class="loader">
<div class="rotatingLoader"></div>
</div>
</div>
</body>
<script>
window.addEventListener('scroll', (e) => {
console.log(window.pageYOffset)
// projects Yoffset is 1090
})
function scrollConnect(){
window.scrollBy({
top: 10000,
behavior:'smooth'
});
}
function scrollHome(){
window.scrollBy({
top: -10000,
behavior:'smooth'
});
}
function scrollProjects(){
if (window.screen.width < 600) {
if (window.pageYOffset<780) {
let scrollto = 780 - window.pageYOffset;
window.scrollBy({top: scrollto, behavior:'smooth'})
console.warn(scrollto)
}
else if (window.pageYOffset > 780){
let scrollto = window.pageYOffset - 780;
window.scrollBy({top: -scrollto, behavior:'smooth'})
console.warn(scrollto)
}
} else {
if (window.pageYOffset<1340) {
let scrollto = 1340 - window.pageYOffset;
window.scrollBy({top: scrollto, behavior:'smooth'})
console.warn(scrollto)
}
else if (window.pageYOffset > 1340){
let scrollto = window.pageYOffset - 1340;
window.scrollBy({top: -scrollto, behavior:'smooth'})
console.warn(scrollto)
}
}
}
var loader = document.getElementById("loader-container");
window.addEventListener("load",function(){
setTimeout(function(){
loader.style.opacity = "0";
},300);
setTimeout(function(){
loader.style.display = "none";
},700);
})
</script>
</html>