-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
488 lines (471 loc) · 28.6 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
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
<!DOCTYPE html>
<html lang = "en">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
<meta charset = "UTF-8"/>
<meta name = "author" content = "Kaushik Chatterjee (https://github.com/kchatr)"/>
<meta name = "description" content = "A personal portfolio website, showcasing the skills and achievements of Kaushik Chatterjee" />
<meta http-equiv="Cache-control" content="no-cache">
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
>
<script src="https://kit.fontawesome.com/5d93498de8.js" crossorigin="anonymous"></script>
<script src='main.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://unpkg.com/pattern.css" rel="stylesheet">
<noscript>Your browser does not support or is blocking JavaScript</noscript>
<title>🅚 | 🅒</title>
<link rel="shortcut icon" href="./assets/favicon_io/favicon.ico" type="image/x-icon">
</head>
<body onload = "location.href='#'">
<!-- <div id = "preloader">
<img src = "./img/preloader-svg.svg">
<script>
const preloader = document.querySelector('#preloader');
const fadeEffect = setInterval(() => {
if(!preloader.style.opacity){
preloader.style.opacity = 1;
}
if(preloader.style.opacity > 0){
preloader.style.opacity -= 0.5;
} else {
clearInterval(fadeEffect);
}
}, 100);
window.addEventListener('load', fadeEffect);
</script>
</div> -->
<!--Navbar HTML-->
<nav class = "navbar navbar-expand-lg fixed-top">
<a class = "navbar-brand" href = "#"><Kaushik></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-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 mr-4">
<li class = "nav-item">
<a class = "nav-link" data-value = "about" href = "#about">About
</a>
</li>
<li class = "nav-item">
<a class = "nav-link" data-value = "skills" href = "#skills">Skills</a>
</li>
<li class = "nav-item">
<a class = "nav-link" data-value = "portfolio" href = "#portfolio">Portfolio</a>
</li>
<!-- <li class = "nav-item">
<a class = "nav-link" data-value = "articles" href = "#articles">Articles</a>
</li> -->
<!-- <li class = "nav-item">
<a class = "nav-link" data-value = "achievements" href = "#achievements">Achievements</a>
</li> -->
<li class = "nav-item">
<a class = "nav-link" data-value = "contact-me" href = "#contact">Contact Me</a>
</li>
</ul>
</div>
</nav>
<!--Header HTML-->
<header class = "header">
<div class = "overlay">
<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
<script>
particlesJS.load("particles-js", "./assets/particles.json", function(){
console.log("particles.json load successful...")
})
</script>
</div>
<div class = "container">
<div class = "description">
<h1>Kaushik Chatterjee</h1>
<div><p id = "typing-animation">Software Developer</p></div>
<a href = "#about">
<button class="btn btn-outline-secondary btn-lg">View more</button>
</a>
<!-- <a href="#about" class="btn btn-primary btn-lg" role="button" aria-disabled="true">View more</a> -->
</div>
<!--HTML for the Wave Animation-->
</div>
</header>
<svg class="editorial"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28 "
preserveAspectRatio="none">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0
58-18 88-18s
58 18 88 18
58-18 88-18
58 18 88 18
v44h-352z" />
</defs>
<g class="parallax1">
<use xlink:href="#gentle-wave" x="50" y="3" fill="#f461c1"/>
</g>
<g class="parallax2">
<use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
</g>
<g class="parallax3">
<use xlink:href="#gentle-wave" x="50" y="9" fill="#3461c1"/>
</g>
<g class="parallax4">
<use xlink:href="#gentle-wave" x="50" y="6" fill="#fff"/>
</g>
</svg>
<!--About Me section-->
<a name="about"></a>
<div class = "about">
<div class = "container">
<h1 class = "text-center" id = "about-me">About Me</h1>
<div class = "divider div-transparent div-dot"> </div>
<div class = "row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="pattern-dots-md blue">
<img style="transform:translate(2px, -10px);" src=img/profile-photo.jpg class="img-fluid">
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 desc">
<h3>Kaushik Chatterjee</h3>
<p>I'm Kaushik Chatterjee - a programmer, innovator, and tech enthusiast.
Currently, I am a student at the Woodlands Secondary School as part of their Enhanced Learning program.
I love learning about exponential technologies, currently researching the field of Artificial Intelligence and Machine Learning.
I also have a passion for mathematics and statistics, as well as finance.
I have coded a Monte Carlo Simulation in Python, a cryptocurrency in Java, as well as a program for algorithmic trading and stock analysis..
</p>
<div class = "text-center">
<a href="https://linkedin.com/in/kchatr" target = "_blank" class="btn btn-outline-primary">LinkedIn</a>
</div>
<div class = "resume">
</div>
</div>
</div>
</div>
</div>
<!--Divider to next section-->
<div class = "wave-container">
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#1392db" fill-opacity="1" d="M0,96L60,128C120,160,240,224,360,213.3C480,203,600,117,720,85.3C840,53,960,75,1080,101.3C1200,128,1320,160,1380,176L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg> -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#1392db" fill-opacity="1" d="M0,32L60,48C120,64,240,96,360,138.7C480,181,600,235,720,218.7C840,203,960,117,1080,74.7C1200,32,1320,32,1380,32L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#1392db" fill-opacity="1" d="M0,32L60,64C120,96,240,160,360,176C480,192,600,160,720,122.7C840,85,960,43,1080,53.3C1200,64,1320,128,1380,160L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>
<a name = "skills"></a>
</div>
<!--Skills section-->
<div class = "skills">
<div class = "container">
<h1 class = "text-center">My Skills</h1>
<div class = "divider div-transparent-2 div-dot-2"> </div>
<div class = "row">
<div class = "col-lg-4 col-md-4 col-sm-12 d-flex align-items-stretch">
<div class = "card border-secondary">
<div class = "card-img">
<img src = "./assets/icons/code.svg" alt = "" width = "100" height = "100" class = "card-img-top">
</div>
<div class = "card-body">
<h5 class="card-title">Programming</h5>
<p class = "card-text">
I love programming and have been coding since I was 12. I have competed in the Canadian Computing Competition, Google Code-in, and Google Kickstart.
<br>I am fluent in Python, Java, C#, JavaScript, Go, Octave, HTML5, and CSS3.
<br><br>I've created a variety of projects, which can be seen on my GitHub.
</p>
<a href="https://github.com/kchatr" target = "_blank" class="btn btn-outline-secondary btn-block">GitHub</a>
</div>
</div>
</div>
<div class = "col-lg-4 col-md-4 col-sm-12 d-flex align-items-stretch">
<div class = "card border-secondary">
<div class = "card-img">
<img src = "./assets/icons/gear-fill.svg" alt = "" width = "100" height = "100" class = "card-img-top">
</div>
<div class = "card-body">
<h5 class = "card-title">Machine Learning</h5>
<p class = "card-text">
I'm incredibly passionate about machine learning and data analysis, and fascinated by how they are changing our world.
I'm constantly learning about the field and how its incredible potential can be used.
<br><br>I have written Python programs relating to data science and an image classifier using a Convolutional Neural Network and Microsoft Azure.
</p>
</div>
</div>
</div>
<!-- <div class = "col-md-3 col-lg-3 col-sm-12">
<div class = "card">
<div class = "card-img">
<img src = "./assets/icons/grid-3x3-gap.svg" alt = "" width = "100" height = "100" class = "card-img-top">
</div>
<div class = "card-body">
<h5 class = "card-title">Blockchain</h5>
<p class = "card-text">
Blockchain is a technology that is redefining how we think about storing and manipulating data.
I have created a blockchain in Java,
</p>
</div>
</div>
</div> -->
<div class = "col-lg-4 col-md-4 col-sm-12 d-flex align-items-stretch">
<div class = "card border-secondary rounded">
<div class = "card-img">
<img src = "./assets/icons/bar-chart-fill.svg" alt = "" width = "100" height = "100" class = "card-img-top">
</div>
<div class = "card-body">
<h5 class = "card-title">Mathematics</h5>
<p class = "card-text">
Mathematics is my forte. Combinatorics, Probability, and Calculus are my favourite fields and I am constantly looking to expand my knowledge.
<br><br>I have created numerous mathematical programs in Java and love exploring the beauty of math.
<br><br>I also participate in a variety of math competitions, including Math Kangaroo and contests from the University of Waterloo.
</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".col-lg-4").hover(
function(){
$(this).animate({
marginTop: "-=1%"
}, 200);
},
function(){
$(this).animate({
marginTop: "0%"
}, 200)
}
)
});
</script>
</div>
</div>
</div>
<!--Divider to next section-->
<div class = "wave-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#1392db" fill-opacity="1" d="M0,224L60,192C120,160,240,96,360,85.3C480,75,600,117,720,160C840,203,960,245,1080,266.7C1200,288,1320,288,1380,288L1440,288L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path>
</svg>
<a name = "portfolio"></a>
</div>
<!--Portfolio Section-->
<div class = "portfolio">
<div class = "container">
<h1 class = "text-center">Portfolio</h1>
<div class = "divider div-transparent div-dot"> </div>
<div align = "center">
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button class = "btn btn-primary waves-effect waves-light filter-button" data-filter = "all">All</button>
<button class = "btn btn-primary waves-effect waves-light filter-button" data-filter = "article">Articles</button>
<button class = "btn btn-primary waves-effect waves-light filter-button" data-filter = "project">Projects</button>
<button class = "btn btn-primary waves-effect waves-light filter-button" data-filter = "certificate">Certificates</button>
</div>
</div>
<div class = "row">
<!-- ARTICLES -->
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter article">
<img src = "./img/portfolio/article-1.jpg" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
An introductory article to univariate linear regression and gradient descent in machine learning, looking at the mathematics and intuition behind regression.
<a class = "link-btn" href = https://medium.com/datadriveninvestor/the-essence-of-machine-learning-2650e409584e target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter article">
<img src = "./img/portfolio/article-2.jpg" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
An article that details the mathematics of Bayes' Theorem and its implications in the field of behavioural economics.
<a class = "link-btn" href = https://medium.com/datadriveninvestor/bayes-theorem-and-its-implications-in-behavioural-economics-eb7129afef77 target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter article">
<img src = "/img/portfolio/article-3.jpg" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
An article that provides an introduction to machine learning and a holistic view on its various forms and use cases.
<a class = "link-btn" href = https://medium.com/@kchatr/unearthing-the-layers-of-machine-learning-20b2738758ea target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter article">
<img src = "/img/portfolio/article-4.png" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
An article that explains how to use differential calculus to solve optimization problems, as well as its applications in real world scenarios.
<a class = "link-btn" href = https://medium.com/datadriveninvestor/solving-mathematical-optimization-problems-with-differential-calculus-data-driven-investor-f04b71d7d896 target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<!-- PROJECTS -->
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter project">
<img src = "/img/portfolio/project-2.jpg" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
A local blockchain-based cryptocurrency that was created in Java and uses cryptography and hashing, following protocols similar to Bitcoin.
<a class = "link-btn" href = https://github.com/kchatr/Indicium-Blockchain target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter project">
<img src = "/img/portfolio/project-1.png" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
This is a convolutional neural network (CNN) created in Azure which can accurately identify images of dogs and cats.
<a class = "link-btn" href = https://github.com/kchatr/CNN-ImageClassifier target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter project">
<img src = "/img/portfolio/project-3.png" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
A Monte Carlo simulation in Python which simulates the winnings of a player in a chance-based spinner, akin to roulette.
<a class = "link-btn" href = https://github.com/kchatr/monte-python target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter project">
<img src = "/img/portfolio/project-4.png" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
A web app built in Streamlit that uses the K-means clustering algorithm to compress user uploaded images and contrast the results.
<a class = "link-btn" href = https://github.com/kchatr/kmeans-image-compression target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter project">
<img src = "/img/portfolio/project-5.png" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
A program written in Q# and hosted in Python that uses quantum computing to create truly random numbers between a range set by the user.
<a class = "link-btn" href = https://github.com/kchatr/quantum-rng target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<!-- CERTIFICATES -->
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter certificate">
<img src = "/img/portfolio/certificate-1.jpg" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
<a class = "link-btn" href = https://www.coursera.org/account/accomplishments/certificate/TXMQFUB968N9 target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
<div class = "gallery_product col-lg-4 col-md-4 col-sm-12 filter certificate">
<img src = "/img/portfolio/certificate-2.png" class = "img-responsive">
<div class = "portfolio-overlay">
<div class="portfolio-text">
<a class = "link-btn" href = https://www.kaggle.com/learn/certification/kchatr/deep-learning target = "_blank">
<i class="fas fa-link"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr("data-filter");
if(value == "all"){
$(".filter").show("1000");
} else {
$(".filter").not("." + value).hide("3000");
$(".filter").filter("." + value).show("3000");
}
});
if($(".filter-button").removeClass("active")){
$(this).removeClass("active");
}
$(this).addClass('active');
});
</script>
</div>
<div class = "wave-container">
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#1392db" fill-opacity="1" d="M0,320L48,298.7C96,277,192,235,288,218.7C384,203,480,213,576,192C672,171,768,117,864,122.7C960,128,1056,192,1152,202.7C1248,213,1344,171,1392,149.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#1392db" fill-opacity="1" d="M0,192L80,202.7C160,213,320,235,480,213.3C640,192,800,128,960,133.3C1120,139,1280,213,1360,250.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>
</div>
<a name = "contact"></a>
<div class = "contact-form">
<div class = "container">
<form>
<div class = "row">
<div class = "col-lg-4 col-md-4 col-sm-12">
<h1>Get in Touch</h1>
</div>
<div class = "col-lg-8 col-md-8 col-sm-12 right">
<div class = "form-group">
<input type = "text" class = "form-control form-control-lg" placeholder="Your Name" name = "">
</div>
<div class = "form-group">
<input type = "text" class = "form-control form-control-lg" placeholder="[email protected]" name = "email">
</div>
<div class = "form-group">
<textarea class = "form-control form-control-lg">
</textarea>
</div>
<input type="submit" class="btn btn-light btn-block" value="Send" name="">
</div>
</div>
</form>
</div>
<div class = "social-media">
<a class = "media-btn" href = https://github.com/kchatr target = "_blank">
<i class="fab fa-github-square"></i>
</a>
<a class = "media-btn" href = https://linkedin.com/in/kchatr target = "_blank">
<i class="fab fa-linkedin"></i>
</a>
<a class = "media-btn" href = https://medium.com/@kchatr target = "_blank">
<i class="fab fa-medium"></i>
</a>
</div>
</div>
<footer class = "footer py-2 bg-dark text-white-50">
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://github.com/kchatr">Kaushik Chatterjee</a>
All Rights Reserved.
</div>
</footer>
</body>
</html>