-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
212 lines (194 loc) · 19.7 KB
/
index.html
File metadata and controls
212 lines (194 loc) · 19.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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sashreek Kumar</title>
<!-- Tailwind CSS for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Lora -->
<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=Lora:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="assets/logo.svg">
<style>
/* Use the Lora font family */
body {
font-family: 'Lora', serif;
}
/* Custom class for a subtle background pattern */
.bg-pattern {
background-color: #f8fafc; /* gray-50 */
}
</style>
</head>
<body class="bg-slate-50 text-slate-800">
<!-- Header & Navigation -->
<header id="header" class="bg-white/80 backdrop-blur-md w-full z-50 pt-4 sticky top-0">
<!-- The container div is constrained on large screens -->
<div class="w-full lg:w-[55%] mx-auto px-6">
<div class="flex items-center justify-between pb-4 border-b border-slate-200">
<a href="#home" class="text-[24px] text-slate-900">Sashreek Kumar</a>
<nav class="hidden md:flex items-center space-x-8">
<a href="#" class="text-slate-600 hover:text-[#387ed1] transition duration-100 text-[18px]">About</a>
<a href="pages\blog.html" class="text-slate-600 hover:text-[#387ed1] transition duration-100 text-[18px]">Blog</a>
<a href="pages/paper_implementations.html" class="text-slate-600 hover:text-[#387ed1] transition duration-100 text-[18px]">Paper Implementations</a>
<a href="pages/projects.html" class="text-slate-600 hover:text-[#387ed1] transition duration-100 text-[18px]">Projects</a>
</nav>
<!-- Mobile Menu Button -->
<button id="mobile-menu-button" class="md:hidden text-slate-800 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden mt-4 bg-white rounded-lg shadow-md">
<a href="#" class="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-t-lg">About</a>
<a href="pages\blog.html" class="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100">Blog</a>
<a href="pages/paper_implementations.html" class="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100">Paper Implementations</a>
<a href="pages/projects.html" class="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-b-lg">Projects</a>
</div>
</div>
</header>
<!-- Page container with Grid layout for large screens -->
<div class="lg:grid lg:grid-cols-[22.5%_55%_22.5%]">
<!-- Left Gutter / PFP Column -->
<aside class="hidden lg:flex justify-end py-16 pr-12">
<div class="sticky top-24 flex flex-col items-center w-48">
<div class="w-48 h-48 rounded-full shadow-xl overflow-hidden">
<img src="assets/pfp.jpeg" alt="Sashreek Kumar" class="w-full h-full object-cover object-[75%_25%] scale-[1.35]">
</div>
<!-- Social Media Icons -->
<div class="flex space-x-6 mt-6">
<!-- X (Twitter) Icon -->
<a target="_blank" href="https://x.com/sashreekkumar" aria-label="X social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>
</a>
<!-- LinkedIn Icon -->
<a target="_blank" href="https://www.linkedin.com/in/sashreek-kumar" aria-label="LinkedIn social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
</a>
<!-- GitHub Icon -->
<a target="_blank" href="https://github.com/Sashreekkumar" aria-label="GitHub social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.165 6.839 9.49.5.092.682-.217.682-.482 0-.237-.009-.868-.014-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.031-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.378.203 2.398.1 2.65.64.7 1.03 1.595 1.03 2.688 0 3.848-2.338 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd"></path></svg>
</a>
<!-- Substack Icon -->
<a target="_blank" href="#" aria-label="Substack social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"></path></svg>
</a>
<!-- Instagram Icon -->
<a target="_blank" href="https://www.instagram.com/camera.crafted/" aria-label="Instagram social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>
</a>
</div>
</div>
</aside>
<!-- Main Content -->
<main>
<!-- About Section -->
<section id="about" class="bg-pattern pt-16 md:pt-16 pb-4">
<div class="px-6">
<!-- Mobile Only Profile Picture -->
<!-- Mobile Only Profile Picture -->
<div class="lg:hidden flex flex-col items-center mb-12">
<div class="w-48 h-48 md:w-56 md:h-56 rounded-full shadow-xl overflow-hidden">
<img src="assets/pfp.jpeg" alt="Sashreek Kumar" class="w-full h-full object-cover object-[75%_25%] scale-[1.35]">
</div>
<div class="flex space-x-6 mt-6">
<a href="https://x.com/sashreekkumar" aria-label="X social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></a>
<a href="https://www.linkedin.com/in/sashreek-kumar" aria-label="LinkedIn social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg></a>
<a href="https://github.com/Sashreekkumar" aria-label="GitHub social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.165 6.839 9.49.5.092.682-.217.682-.482 0-.237-.009-.868-.014-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.031-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.378.203 2.398.1 2.65.64.7 1.03 1.595 1.03 2.688 0 3.848-2.338 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd"></path></svg></a>
<a href="#" aria-label="Substack social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"></path></svg>
</a>
<a href="https://www.instagram.com/camera.crafted/" aria-label="Instagram social media link" class="text-slate-500 hover:text-[#387ed1] transition duration-100">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>
</a>
</div>
</div>
<div class="text-slate-700 text-base leading-relaxed">
<h2 class="text-2xl text-slate-900 mb-6">About</h2>
<p class="mb-6">
I’m Sashreek Kumar, a sophomore at Chaitanya Bharathi Institute of Technology, Hyderabad. My core interests live at the intersection of AI and ML research and systems. I like implementing research papers from scratch to understand what actually works, what breaks, and why. You can find this work in my
<a href="pages/paper_implementations.html" class="text-[#387ed1] hover:underline underline-offset-4 transition duration-150 focus:outline-none focus:underline" aria-label="Research Paper Implementations section" target="_blank"> Research Paper Implementations</a> section.
</p>
<p class="mb-6">
I’ve worked on applied machine learning and computer vision problems, including medical imaging research using YOLO-based pipelines. Outside of code, I write. I <a href="pages/blog.html" class="text-[#387ed1] hover:underline underline-offset-4 transition duration-150 focus:outline-none focus:underline" aria-label="Research Paper Implementations section" target="_blank"> blog</a> about technical topics by breaking them down to first principles, write about books I read, and occasionally publish non-technical pieces about things I’m thinking through or building.
</p>
<p class="mb-6">
I’m also into photography. I like slowing down, observing, and capturing moments, and some of my work lives on <a
href="https://www.instagram.com/camera.crafted/" target="_blank" rel="noopener noreferrer" class="text-[#387ed1] hover:underline underline-offset-4 transition duration-150 focus:outline-none focus:underline" aria-label="camera.crafted on Instagram"> @camera.crafted </a>. I play chess and am a FIDE-rated player. I’m active on <a href=" https://x.com/sashreekkumar" target="_blank" rel="noopener noreferrer" class="text-[#387ed1] hover:underline underline-offset-4 transition duration-150 focus:outline-none focus:underline" aria-label="sashreekkumar on x"> X </a>, where I share ideas, experiments, and things I’m learning, especially around AI, systems, and problem-solving. More broadly, I enjoy stepping out of my comfort zone, whether that’s tackling unfamiliar problems or exploring new fields.
</p>
<a href="https://drive.google.com/file/d/1JY5bShXJUUqIZZttYkEIPq5V77HRnqHP/view?usp=drive_link" target="_blank" download="Sashreek_Kumar_Resume.pdf"
class="inline-flex items-center text-sm border border-gray-300 px-4 py-2 rounded hover:border-[#387ed1] hover:text-[#387ed1] transition duration-200">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
Download Resume
</a>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="bg-white py-4">
<div class="px-6 text-base text-slate-700 leading-relaxed">
<h2 class="text-2xl text-slate-900 mb-8">Experience</h2>
<!-- Experience Item 1 -->
<div class="mb-6">
<h3 class="text-xl font-semibold text-slate-800">AI Research Intern - IIITH Hyderabad IHub-Data</h3>
<p class="text-slate-500 text-sm">October 2025 - December 2025</p>
<p class="mt-2">Developed an end-to-end YOLO-based pipeline for polyp detection and segmentation in colonoscopy videos, including dataset conversion, model training, video-level inference and evaluation, and supporting literature review in computer vision..</p>
</div>
<!-- Experience Item 2 -->
<!-- <div class="mb-6">
<h3 class="text-xl font-semibold text-slate-800">Web Developer - Innovate LLC</h3>
<p class="text-slate-500 text-sm">2018 - 2020</p>
<p class="mt-2">Developed user-facing features for a variety of client websites using modern JavaScript frameworks.</p>
</div>
</div>
</section> -->
<!-- Publications Section -->
<!-- <section id="publications" class="bg-pattern py-4">
<div class="px-6 text-base text-slate-700 leading-relaxed">
<h2 class="text-2xl text-slate-900 mb-8">Publications</h2> -->
<!-- Publication Item 1 -->
<!-- <div class="mb-6">
<a href="#" class="text-xl font-semibold text-indigo-600 hover:text-[#387ed1] hover:underline transition duration-100">The Art of Responsive Design</a>
<p class="mt-1">Published in Web Dev Weekly, this article explores modern CSS techniques for creating fluid, responsive layouts.</p>
</div> -->
<!-- Publication Item 2 -->
<!-- <div class="mb-6">
<a href="#" class="text-xl font-semibold text-indigo-600 hover:text-[#387ed1] hover:underline transition duration-100">JavaScript Performance Deep Dive</a>
<p class="mt-1">A comprehensive guide on optimizing JavaScript for faster web applications, featured on CSS-Tricks.</p> -->
<!-- </div>
</div> -->
</section>
</main>
<!-- Right Gutter (empty) -->
<div class="hidden lg:block"></div>
</div>
<script>
// JavaScript for the mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', (e) => {
e.stopPropagation(); // prevent the document click from firing immediately
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when a link is clicked
const mobileNavLinks = document.querySelectorAll('#mobile-menu a');
mobileNavLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Close mobile menu when clicking outside of it
document.addEventListener('click', (event) => {
const isClickInsideMenu = mobileMenu.contains(event.target);
const isClickOnButton = mobileMenuButton.contains(event.target);
if (!isClickInsideMenu && !isClickOnButton) {
mobileMenu.classList.add('hidden');
}
});
</script>
</body>
</html>