-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
308 lines (283 loc) · 17.7 KB
/
index.html
File metadata and controls
308 lines (283 loc) · 17.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🌟 Subhadeep Chatterjee - AI Researcher 🌟</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="stars"></div>
<div class="container">
<header class="rainbow-border">
<marquee behavior="scroll" direction="left" class="marquee-top">
✨ WELCOME TO MY WEBSITE ✨ AI RESEARCHER ✨ IIT ROPAR '23 ✨ UCSD '25 ✨
</marquee>
<h1 class="glitch" data-text="SUBHADEEP CHATTERJEE">SUBHADEEP CHATTERJEE</h1>
<div class="pixel-art">
<pre>
_ _ ___ ___ ___ _ _ ___
/_\ (_) | _ \| __/ __| |_| | |_ _|
/ _ \| | | /| _|\__ \ _ | | | |
_/ \_\_| |_|_\_\___||___/_|_|_| |___|
</pre>
</div>
<nav class="nav-buttons">
<a href="index.html" class="btn active">🏠 HOME</a>
<a href="#about" class="btn">👤 ABOUT</a>
<a href="#publications" class="btn">📚 PAPERS</a>
<a href="projects.html" class="btn">💻 PROJECTS</a>
<a href="#research-interests" class="btn">🔬 RESEARCH</a>
<a href="blog.html" class="btn">📝 BLOG</a>
<a href="resume.pdf" class="btn">📄 RESUME</a>
<a href="#contact" class="btn">📧 CONTACT</a>
<a href="#atabook" class="btn">📧 atabook</a>
<a href="deep_thoughts.html" class="btn">Deep Thoughts</a>
</nav>
</header>
<div class="main-content">
<aside class="sidebar-left">
<div class="widget">
<h3>🎮 STATS</h3>
<div class="counter">
<img src="https://cultofthepartyparrot.com/parrots/hd/parrot.gif" width="30" alt="parrot">
<p>You are visitor #<span class="visitor-count">133742</span></p>
</div>
</div>
<div class="widget">
<h3>🌐 QUICK JUMP</h3>
<ul class="link-list">
<li><a href="#about">About Me</a></li>
<li><a href="#research-interests">Research</a></li>
<li><a href="#publications">Papers</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="widget">
<h3>💾 STATUS</h3>
<p style="font-size: 14px;">
📍 Location: San Diego, CA<br>
💼 Status: <span class="blink" style="color: var(--neon-green);">AVAILABLE</span><br>
🎓 Degrees: 2<br>
☕ Coffee: ∞<br>
😴 Sleep: 404
</p>
</div>
<div class="widget">
<h3>🎵 VIBING TO</h3>
<marquee behavior="scroll" direction="up" height="80" scrollamount="2">
♪ One Punch Man OST ♪
<br><br>
♪ Lofi Hip Hop Beats ♪
<br><br>
♪ Synthwave Mix ♪
<br><br>
♪ Minecraft Music ♪
</marquee>
</div>
<div class="widget">
<h3>💡 RANDOM FACT</h3>
<p style="font-size: 12px; font-style: italic;">
Did you know? Training GPT-3 consumed as much energy as 126 Danish homes use in a year! 🌍⚡
</p>
</div>
</aside>
<main>
<section id="home" class="content-box" style="margin-bottom: 20px;">
<h2 class="section-title">
<span class="blink">►</span> WELCOME <span class="blink">◄</span>
</h2>
<div style="text-align: center; margin: 30px 0;">
<img src="my_photo.jpg" alt="Subhadeep Chatterjee" style="max-width: 400px; width: 100%; border: 3px solid var(--neon-pink); box-shadow: 0 0 20px var(--neon-pink);">
<p style="font-size: 14px; color: var(--neon-yellow); margin-top: 10px;">📸 Pic by Nirabhra Mandal</p>
</div>
<p style="font-size: 22px; text-align: center; color: var(--neon-green); margin: 20px 0;">
This is my website hope you have a wonderful time and I hope you are having a wonderful day.
</p>
<div style="background: rgba(255, 16, 240, 0.1); border: 2px solid var(--neon-pink); padding: 20px; margin: 20px 0;">
<p style="font-size: 20px; font-style: italic; text-align: center; color: var(--neon-pink);">
"Humans are the most powerful creatures, because we have the power to change ourselves"
</p>
<p style="font-size: 18px; text-align: center; color: var(--neon-yellow); margin-top: 10px;">
<strong>- Saitama ( One Punch Man )</strong>
</p>
</div>
</section>
<section id="about" class="content-box" style="margin-bottom: 20px;">
<h2 class="section-title">
<span class="blink">►</span> ABOUT ME <span class="blink">◄</span>
</h2>
<p style="font-size: 20px; line-height: 1.6; color: var(--neon-green);">
Hello fellow traveler, I am an AI researcher that is trying to make AI more intuitive and safe for the environment. I have degrees from <span style="color: var(--neon-pink); text-shadow: 0 0 5px var(--neon-pink);">IIT Ropar, Bachelors '23</span> and <span style="color: var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue);">UCSD, Masters '25</span>. I have multiple AI pipelines for various use cases. You can read more about them <a href="projects.html" style="color: var(--neon-yellow); text-decoration: underline;">here</a>.
</p>
</section>
<section id="research-interests" class="content-box" style="margin-bottom: 20px;">
<h2 class="section-title">
<span class="blink">►</span> RESEARCH INTERESTS <span class="blink">◄</span>
</h2>
<div class="research-grid">
<div class="research-item">
<h3 style="color: var(--neon-pink); font-size: 22px; margin-bottom: 10px;">
🌱 Making AI cheaper and sustainable
</h3>
<p style="font-size: 18px; line-height: 1.5;">
Current ecosystem of Machine learning demands the usage of a lot of resources for training and inference. I have this intense desire to train models using very little resources. This will lead to cheaper prices. I think AI is an amazing technology that has extreme potential. But right now its usage is breaking the environment. I want to find out ways to make it less environment wrecking and more optimal to use. The temperature of the world has increased a lot just because of AI usage. Sustainable AI is extremely important especially if we really even want to use AI, we need to be alive for it.
</p>
</div>
<div class="research-item">
<h3 style="color: var(--neon-blue); font-size: 22px; margin-bottom: 10px;">
⚡ Decreasing inference times
</h3>
<p style="font-size: 18px; line-height: 1.5;">
Inference is important to test AI models out, benchmark them and then eventually use them. For each of these use cases the faster we can get the model to the run the faster we can ineract with it and the more edge cases we can test out. This will eventually lead to faster model evaluation. This is a more mainstream reasoning for faster inference time. The reason I want to work on faster inference time is because I want instant response from the robotic digital assistant that I would be making. I have wrote all about it <a href="blogs/2024-07-23.html" style="color: var(--neon-yellow); text-decoration: underline;">here</a>. But the main idea is keeping the fully trained model inside a hard disk and the inference time is near zero. Its like keeping an offline internet with you. I also have adhd and I want everything to be fast af.
</p>
</div>
<div class="research-item">
<h3 style="color: var(--neon-green); font-size: 22px; margin-bottom: 10px;">
🎯 Controllable learning based models
</h3>
<p style="font-size: 18px; line-height: 1.5;">
Learning based models are quite incoherent. They are unintuitive, unimaginable, not complex yet unexplainable. I would like to remove all the "un" from the words. We know the structure we know the process yet to control the output we generally tend to use hacks. I believe we can fundamentally control the structure and hence the output. The direction that I am most interested in is using logical statements as a definitive structure to guide any learning based system to the exact output. I am currently finishing up a paper with Prof. Sonia Martinez on this topic with application in robotics.
</p>
</div>
<div class="research-item">
<h3 style="color: var(--neon-yellow); font-size: 22px; margin-bottom: 10px;">
🤔 Bruh
</h3>
</div>
</div>
</section>
<section id="publications" class="content-box" style="margin-bottom: 20px;">
<h2 class="section-title">
<span class="blink">►</span> PUBLICATIONS <span class="blink">◄</span>
</h2>
<div style="text-align: center; padding: 40px;">
<p style="font-size: 24px; color: var(--neon-pink); animation: blink 1s infinite;">
📝 Coming soon...
</p>
<p style="font-size: 18px; color: var(--neon-blue); margin-top: 20px;">
Currently working on exciting papers! Check back later! 🚀
</p>
</div>
</section>
<section id="contact" class="content-box">
<h2 class="section-title">
<span class="blink">►</span> CONTACT <span class="blink">◄</span>
</h2>
<div style="text-align: center;">
<p style="font-size: 22px; margin: 20px 0;">
💬 Feel free to dm me on <a href="https://x.com/suga_19__" target="_blank" style="color: var(--neon-blue); text-decoration: underline; text-shadow: 0 0 5px var(--neon-blue);">X (Twitter)</a>
</p>
<p style="font-size: 22px; margin: 20px 0;">
📧 Or shoot me an email at <a href="mailto:suchatterjee@ucsd.edu" style="color: var(--neon-pink); text-decoration: underline; text-shadow: 0 0 5px var(--neon-pink);">suchatterjee@ucsd.edu</a>
</p>
<div style="margin-top: 30px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
<button class="btn" onclick="window.open('https://x.com/suga_19__', '_blank')">🐦 Twitter/X</button>
<button class="btn" onclick="window.location.href='mailto:suchatterjee@ucsd.edu'">✉️ Email</button>
<button class="btn" onclick="window.open('resume.pdf', '_blank')">📄 Resume</button>
</div>
</div>
</section>
<section id="atabook" class = "content-box">
<iframe type="text/html" src="https://suga.atabook.org/" width="100%" height="700" ></iframe>
</section>
</main>
<aside class="sidebar-right">
<div class="widget">
<h3>⚡ TECH STACK</h3>
<div class="button-grid">
<button class="mini-btn">PYTHON</button>
<button class="mini-btn">PyTorch</button>
<button class="mini-btn">ML/AI</button>
<button class="mini-btn">LINUX</button>
<button class="mini-btn">NEOVIM</button>
<button class="mini-btn">ROBOTICS</button>
</div>
</div>
<div class="widget">
<h3>🏆 ACHIEVEMENTS</h3>
<div style="font-size: 24px; line-height: 1.5; text-align: center;">
🎓🥇🚀💡🔥
<br>
⭐🌟✨💫🎯
<br>
🏅🌈🎊🎉🔬
</div>
</div>
<div class="widget">
<h3>📊 SITE STATS</h3>
<p style="font-size: 14px;">
Est: <b>2024</b><br>
Blog Posts: <b>12</b><br>
Projects: <b>∞</b><br>
Ideas/min: <b>42</b><br>
Bugs Fixed: <b>9001</b>
</p>
</div>
<div class="widget">
<h3>🎯 CURRENTLY</h3>
<ul style="list-style: none; padding: 0; font-size: 16px;">
<li>✓ Building AI pipelines</li>
<li>✓ Writing papers</li>
<li>✓ Optimizing models</li>
<li>✓ Saving the planet</li>
<li>⏳ Sleeping... maybe</li>
</ul>
</div>
<div class="widget">
<h3>🌟 FEATURED</h3>
<p style="font-size: 14px;">
<a href="blog.html" style="color: var(--neon-pink);">Latest Blog Post →</a><br><br>
<a href="projects.html" style="color: var(--neon-blue);">Cool Projects →</a><br><br>
<a href="#research-interests" style="color: var(--neon-green);">Research Areas →</a>
</p>
</div>
<div class="widget">
<h3>💾 UNDER CONSTRUCTION</h3>
<img src="https://web.archive.org/web/19970719055617im_/http://www.geocities.com/SiliconValley/Park/6297/construction.gif" width="100%" alt="construction">
<!-- RSS Feed Metadata -->
<link rel="alternate"
type="application/rss+xml"
title="RSS Feed"
href="/rss.xml">
<!-- Visible RSS Link -->
<div style="text-align: center; margin-top: 12px;">
<a href="/rss.xml" target="_blank" style="text-decoration: none;">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/43/Feed-icon.svg"
width="24"
style="vertical-align: middle;">
<span style="font-size: 14px; margin-left: 6px;">
Subscribe via RSS
</span>
</a>
</div>
<p style="font-size: 12px; text-align: center; margin-top: 10px;">
Always improving! 🚧
</p>
</div>
</aside>
</div>
<footer class="rainbow-border">
<marquee behavior="scroll" direction="right" class="marquee-bottom">
🌟 MADE WITH ❤️ AND CAFFEINE 🌟 SUSTAINABLE AI FOR A BETTER TOMORROW 🌟 EST. 2024 🌟
</marquee>
<p>© 2026 Subhadeep Chatterjee. All rights reserved.</p>
<p style="font-size: 14px;">Last updated: <span id="date"></span></p>
<p style="font-size: 10px; margin-top: 10px;">
<img src="https://web.archive.org/web/19970719055617im_/http://www.geocities.com/SiliconValley/Park/6297/ie_logo.gif" width="30" alt="IE" style="vertical-align: middle;">
Best viewed with ANY browser at 1024x768
<img src="https://web.archive.org/web/19970719055617im_/http://www.geocities.com/SiliconValley/Park/6297/netscape.gif" width="30" alt="Netscape" style="vertical-align: middle;">
</p>
</footer>
</div>
<script>
document.getElementById('date').textContent = new Date().toLocaleDateString();
// Visitor counter animation
setInterval(() => {
const counter = document.querySelector('.visitor-count');
const current = parseInt(counter.textContent);
counter.textContent = current + Math.floor(Math.random() * 3);
}, 5000);
</script>
</body>
</html>