-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
202 lines (188 loc) · 13.4 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
<!DOCTYPE html>
<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>Shrey Kohli</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Koulen&family=Macondo&family=Roboto+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
</head>
<body>
<!-- This is the start of my navbar element-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top p-1">
<div class="container">
<a href="#" class="navbar-brand" id="hello">SHREY KOHLI</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target = "#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#exper" class="nav-link">Experience</a>
</li>
<li class="nav-item">
<a href="#projects" class="nav-link">Projects</a>
</li>
<li class="nav-item">
<a href="https://drive.google.com/file/d/1QcB_I9jT3hQpovGrRpLjjZ6mxT5ogOAq/view?usp=sharing" class="nav-link">Resume</a>
</li>
<li class="nav-item">
<a href="https://www.linkedin.com/in/shrey-kohli/" class="nav-link">LinkedIn</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- This is the end of my navbar element-->
<!--about section-->
<section class="text-light p-5 p-lg-0 text-center" id="about">
<div class="container">
<!--this is the flexbox-->
<div class="d-md-flex align-items-center justify-content-between">
<div>
<h1 class = "p-1"><span id ="hello_greeting">HELLO THERE, </span></h1>
<h3 class = "p-1">I am Shrey Kohli, a CS student at Michigan State University, a mechatronics research assistant, and a tech enthusiast!</h3>
<a href="https://github.com/shreyko"><button class="btn btn-sm pt-2" id="btn">Github</button></a>
<a href="https://www.linkedin.com/in/shrey-kohli/"><button class="btn btn-sm pt-2" id="btn">LinkedIn</button></a>
<a href="https://drive.google.com/file/d/1QcB_I9jT3hQpovGrRpLjjZ6mxT5ogOAq/view?usp=sharing"><button class="btn btn-sm pt-2" id="btn">Resume</button></a>
</div>
<img class="img-fluid w-40 p-5" src="pfp.png" alt="profile photo"/>
</div>
</div>
</section>
<!--end of about section-->
<!-- This is my experience-->
<section class="text-light p-5 text-center" id="exper">
<div class = "contianer">
<div class="d-md-flex align-items-center justify-content-center">
<h2 class = "p-5"><span id ="hello_greeting">EXPERIENCE</span></h2>
</div>
<div class="row text-center">
<div class="col-md p-4">
<div class="card text-light h-100 d-flex flex-column" id="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title"><span id="hello">Research Assistant (Smart Microsystems Laboratory)</h5>
<p class="card-text p-4">Researching under Dr.Xiaobo Tan at the SML.<br>Research involves accurate navigation and localization in GPS-deprived environments. </p>
<div class="mt-auto" style="display: flex; justify-content: center;">
<a href="https://www.egr.msu.edu/~xbtan/sml_index.html"><button class="btn btn-sm pt-2" id="btn"> Lab Website</button></a>
</div>
</div>
</div>
</div>
<div class="col-md p-4">
<div class="card text-light h-100 d-flex flex-column" id="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title"><span id="hello">Teaching Assistant (CSE 231 @MSU)</h5>
<p class="card-text p-4">Assisting in the teaching of Michigan State University's largest programming class (Introduction to python programming), by collaborating with a team of 46 colleagues. </p>
<div class="mt-auto" style="display: flex; justify-content: center;">
<a href="https://www.cse.msu.edu/~cse231/"><button class="btn btn-sm pt-2" id="btn">Course Website</button></a>
</div>
</div>
</div>
</div>
<div class="col-md p-4">
<div class="card text-light h-100 d-flex flex-column" id="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title"><span id="hello">Student Innovator and Researcher @ National University of Singapore</h5>
<p class="card-text p-3">Collaborated on a research project to reduce road accidents; using deep learning, created an effective personalized surveillance system to monitor the driver and detect negligence.</p>
<div class="mt-auto" style="display: flex; justify-content: center;">
<a href="https://www.corporategurukul.com/school-programme/oncampus/grip"><button class="btn btn-sm pt-2" id="btn">Programme Website </button></a>
</div>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md p-4">
<div class="card text-light h-100 d-flex flex-column" id="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title"><span id="hello">Lead Organizer Spartahack</h5>
<p class="card-text p-4">Involved in the organization and planning of Michigan's Largest and Michigan State University's official hackathon - Spartahack, by serving as the lead of the logistics team. </p>
<div class="mt-auto" style="display: flex; justify-content: center;">
<a href="https://www.spartahack.com/"><button class="btn btn-sm p-2" id="btn">Hackathon Website</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of my experience-->
<!--this is my projects section-->
<section class="text-light p-5 text-center" id="projects">
<div class = "contianer">
<div class="d-md-flex align-items-center justify-content-center">
<h2 class = "p-5"><span id ="hello_greeting">PROJECTS</span></h2>
</div>
<div class="row text-center">
<div class="col-md p-4">
<div class="card text-light h-100 d-flex flex-column" id="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title"><span id="hello">V-ZON (HackMIT top 10)</h5>
<p class="card-text p-4">Created V-ZON, a technological framework to build apps specifically for the visually impaired, that encompasses within it the power to autonomously navigate in 3D space (Visual odometry), perform robust object detection , and help detect obstructions along the way, while allowing speech powered I/O.Secured a top 10 (finalist) spot among 1000 participants and 250 project submissions at MIT's official hackathon.</p>
<div class="mt-auto" style="display: flex; justify-content: center;">
<a href="https://github.com/HackMIT-team/HackMIT_vzon"><button class="btn btn-sm p-2" id="btn">Project Github</button></a>
</div>
</div>
</div>
</div>
<div class="col-md p-4">
<div class="card text-light h-100 d-flex flex-column" id="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title"><span id="hello">Reimagined computer interaction for amputees (Spatahack 1st Place and best community hack)</h5>
<p class="card-text p-4">Created a new and innovative method for amputees to interact with a computer by tracking the motion of an Apriltag in 3D space using OpenCV and Python to simulate the motion of a computer mouse.Secured First Place and won the Best Community Act Hack among 100+ participants from all over the continent at Michigan State University's official hackathon.</p>
<div class="mt-auto" style="display: flex; justify-content: center;">
<a href="https://github.com/Spartahackbestteam/pointer-tracking-space-game"><button class="btn btn-sm p-2" id="btn">Project Github</button></a>
</div>
</div>
</div>
</div>
<div class="col-md p-4">
<div class="card text-light h-100 d-flex flex-column" id="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title"><span id="hello">SPACE ENCOUNTERS - The Game</span></h5>
<p class="card-text p-4">Created a space odyssey shooter game using Unity and C#. Implemented an item shop, multiple weapons, in-game currency, ad sense, and level progression in a comprehensive manner. The game is still under development with a few brush-ups remaining; however, the source code so far is available for free on my Github.</p>
<div class="mt-auto" style="display: flex; justify-content: center;">
<a href="https://github.com/shreyko/SPACE-ENCOUNTERS---A-Unity-game"><button class="btn btn-sm p-2" id="btn">Project Github</button></a>
</div>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md p-4">
<div class="card text-light h-100 d-flex flex-column" id="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title"><span id="hello">Automatic subtitle Generator and overlay on videos</h5>
<p class="card-text p-4">Created a subtitle generator for any video input using Google's natural language processing libraries, the software is also capable of overlaying the results on the video using OpenCV.</p>
<div class="mt-auto" style="display: flex; justify-content: center;">
<a href="https://github.com/shreyko/Video_Subtitle_generator"><button class="btn btn-sm p-2" id="btn">Project Github</button></a>
</div>
</div>
</div>
</div>
<div class="col-md p-4">
<div class="card text-light h-100 d-flex flex-column" id="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title"><span id="hello">Visualizing sorting algorithms</h5>
<p class="card-text p-4">Created a visualizer for different sorting algorithms using pyhton and matplotlip. The user can enter data values as a list and select which sorting algorithm they want to visualize.</p>
<div class="mt-auto" style="display: flex; justify-content: center;">
<a href="https://github.com/shreyko/visualizing-Sorting-algorithms-with-python"><button class="btn btn-sm p-2" id="btn">Project Github</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of my projects section-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>