-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
300 lines (261 loc) · 18.9 KB
/
index.html
File metadata and controls
300 lines (261 loc) · 18.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animesh Saha</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<style>
/* Apply Inter font globally and set smooth scrolling */
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
background-color: #0e1217; /* Very dark background */
}
/* Custom styles for link focus/hover effects */
.nav-link {
transition: color 0.3s, border-bottom 0.3s;
}
.nav-link:hover {
color: #38bdf8; /* Sky blue for hover */
border-bottom: 2px solid #38bdf8;
}
/* Style for the non-functional form submission message box */
/* REMOVED: #message-box is now obsolete as Formspree handles success */
/* --- New CSS for Typewriter Effect --- */
.typing-cursor {
border-right: 2px solid #38bdf8; /* Sky blue cursor */
animation: blink-caret 0.75s step-end infinite;
}
/* The typing effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #38bdf8; }
}
/* --- End New CSS --- */
</style>
</head>
<body class="text-white">
<header class="sticky top-0 z-50 bg-gray-900/95 backdrop-blur-sm shadow-lg">
<nav class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<a href="#hero" class="text-2xl font-bold text-sky-400 hover:text-sky-300 transition duration-300">Animesh Saha</a>
<div class="hidden md:flex space-x-8">
<a href="#about" class="nav-link text-lg text-gray-300 border-b-2 border-transparent">About</a>
<a href="#projects" class="nav-link text-lg text-gray-300 border-b-2 border-transparent">Projects</a>
<a href="#contact" class="nav-link text-lg text-gray-300 border-b-2 border-transparent">Contact</a>
</div>
<button id="menu-button" class="md:hidden text-gray-300 focus:outline-none p-2 rounded-lg hover:bg-gray-800 transition duration-300" aria-label="Toggle navigation menu">
<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>
</nav>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<a href="#about" class="block py-3 px-6 text-gray-300 hover:bg-gray-700 transition duration-300 nav-link-mobile">About</a>
<a href="#projects" class="block py-3 px-6 text-gray-300 hover:bg-gray-700 transition duration-300 nav-link-mobile">Projects</a>
<a href="#contact" class="block py-3 px-6 text-gray-300 hover:bg-gray-700 transition duration-300 nav-link-mobile">Contact</a>
</div>
</header>
<main>
<section id="hero" class="h-screen flex items-center justify-center text-center bg-gray-900 border-b border-gray-700">
<div class="max-w-4xl px-4">
<p class="text-xl sm:text-2xl text-sky-400 mb-4 font-medium">
<span id="typewriter-text"></span>
</p>
<h1 class="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
Building <span class="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-teal-400">Scalable</span> and User-Centric Web Applications
</h1>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#projects" class="py-3 px-8 bg-sky-600 hover:bg-sky-700 text-white font-semibold rounded-xl shadow-lg transform transition duration-300 hover:scale-[1.03]">View My Work</a>
<a href="#contact" class="py-3 px-8 bg-gray-700 hover:bg-gray-600 text-gray-200 font-semibold rounded-xl shadow-lg transform transition duration-300 hover:scale-[1.03]">Get In Touch</a>
</div>
</div>
</section>
<section id="about" class="py-20 lg:py-32 container mx-auto px-4 sm:px-6 lg:px-8 border-b border-gray-700">
<h2 class="text-4xl font-bold text-center mb-16 text-sky-400">About Me</h2>
<div class="flex flex-col lg:flex-row items-center lg:space-x-12">
<div class="lg:w-1/3 mb-8 lg:mb-0 flex justify-center">
<img src="Animesh Saha_9.22.25_NancyJParisi_6667.JPG" alt="Profile Avatar"
class="rounded-full w-48 h-48 sm:w-64 sm:h-64 object-cover border-4 border-sky-500 shadow-2xl transition duration-500 hover:shadow-sky-500/50">
</div>
<div class="lg:w-2/3 text-gray-300 space-y-6">
<p class="text-lg leading-relaxed">
I am currently in my senior year majoring in Computer Science with the specialization in Artificial Intelligence. I am passionate about creating software system with AI/ML to generate impactful solutions.
</p>
<p class="text-lg leading-relaxed">
I have experience in Full Stack development that involves creating a full-fledged platform to recommend users song based on their preferences and listening habits. I also have experience in developing under Agile Software Development principles.
Along with that, my experience expands to the field of Machine Learning where I have several projects, including one Hackathon winning Draw it Back where Computer Vision and Model training were heavily used.
Beyond development, I serve as a Teaching Assistant for CSE 305: Programming Language and Academic Tutor where I teach Python, Java, OOP, Data Structure and Calculus 2.
</p>
<div class="pt-4">
<h3 class="text-xl font-semibold mb-3 text-white">Core Skills:</h3>
<div class="flex flex-wrap gap-3">
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">Python</span>
<span class="bg-teal-600 text-teal-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">React</span>
<span class="bg-indigo-600 text-indigo-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">Java</span>
<span class="bg-yellow-600 text-yellow-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">JavaScript (ES6+)</span> <span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">C</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">PHP</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">OCaml</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">JQuerry</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">Node.js</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">Numpy</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">Tensorflow</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">OpenCV</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">Matplotlib</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">Pandas</span>
<span class="bg-red-600 text-red-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">Streamlit</span>
<span class="bg-green-600 text-green-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">MongoDB</span>
<span class="bg-blue-600 text-blue-100 px-4 py-1 rounded-full text-sm font-medium shadow-md">Cloud (AWS)</span>
</div>
</div>
</div>
</div>
</section>
<section id="projects" class="py-20 lg:py-32 container mx-auto px-4 sm:px-6 lg:px-8 border-b border-gray-700">
<h2 class="text-4xl font-bold text-center mb-16 text-sky-400">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<div class="bg-gray-800 rounded-2xl shadow-xl hover:shadow-sky-500/30 transition duration-300 transform hover:translate-y-[-5px]">
<img src="https://placehold.co/800x450/222d3e/a1a1aa?text=Recognizer" alt="E-commerce Platform" class="w-full h-48 object-cover rounded-t-2xl">
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Facial and Hand Written Digits Recognition</h3>
<p class="text-gray-400 mb-4 text-base">
Built and trained a neural network model from scratch to classify hand-written digits (MNIST) and facial structures with
accuracy of 91% of the testing data
• Implemented a Convolutional Neural Network with ReLU activation that resulted in improved accuracy of 94.6% of the
testing data
• Improved testing accuracy to 96.8% and mitigated overfitting by fine-tuning hyperparameter, L2 regularization,
dimensionality reduction with Kernel PCA </p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-indigo-500 text-xs px-3 py-1 rounded-full">Node.js</span>
<span class="bg-green-500 text-xs px-3 py-1 rounded-full">MongoDB</span>
<span class="bg-yellow-500 text-xs px-3 py-1 rounded-full">Express</span>
</div>
<a href="#" class="inline-block text-sky-400 hover:text-sky-300 font-medium transition duration-300">View Demo →</a>
</div>
</div>
<div class="bg-gray-800 rounded-2xl shadow-xl hover:shadow-sky-500/30 transition duration-300 transform hover:translate-y-[-5px]">
<img src="tbd.png">
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Music Discovery Platform</h3>
<p class="text-gray-400 mb-4 text-base">
Built a full-stack music recommendation application with REST API, using React, PHP, MySQL
• Integrated several Spotify API to predict the most probable recommendation for the users and developed OAuth for user
authentication
• Implemented core user functionalities, including account login, password reset, and playlist creation, with an emphasis on
agile development practices and system design </p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-blue-500 text-xs px-3 py-1 rounded-full">React</span>
<span class="bg-red-500 text-xs px-3 py-1 rounded-full">PHP</span>
<span class="bg-teal-500 text-xs px-3 py-1 rounded-full">MySQL</span>
</div>
<a href="#" class="inline-block text-sky-400 hover:text-sky-300 font-medium transition duration-300">View Demo →</a>
</div>
</div>
<div class="bg-gray-800 rounded-2xl shadow-xl hover:shadow-sky-500/30 transition duration-300 transform hover:translate-y-[-5px]">
<img src="https://placehold.co/800x450/222d3e/a1a1aa?text=Draw+It+Right" alt="Data Visualization Dashboard" class="w-full h-48 object-cover rounded-t-2xl">
<div class="p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Draw it Right</h3>
<p class="text-gray-400 mb-4 text-base">
WINNER, UB Hacking 2024
Created a finger-tracking tool using OpenCV and Mediapipe, allowing gesture-based virtual drawing by detecting specific
finger movements
• Integrated a model to detect and classify user-drawn objects in real time with an accuracy of 92.5%
• Leveraged Streamlit to create an interactive and user-friendly interface for seamless functionality </p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-purple-500 text-xs px-3 py-1 rounded-full">React</span>
<span class="bg-orange-500 text-xs px-3 py-1 rounded-full">D3.js</span>
<span class="bg-gray-500 text-xs px-3 py-1 rounded-full">REST API</span>
</div>
<a href="#" class="inline-block text-sky-400 hover:text-sky-300 font-medium transition duration-300">View Demo →</a>
</div>
</div>
</div>
</section>
<section id="contact" class="py-20 lg:py-32 container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-center mb-16 text-sky-400">Get in Touch</h2>
<div class="max-w-xl mx-auto bg-gray-900 p-8 sm:p-10 rounded-2xl shadow-2xl border border-gray-700">
<p class="text-gray-300 mb-6 text-center">
I’m currently seeking new opportunities! Feel free to reach out.
</p>
<form id="contact-form" action="https://formspree.io/f/yourUniqueHashID" method="POST" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-300 mb-1">Name</label>
<input type="text" id="name" name="name" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-xl focus:ring-sky-500 focus:border-sky-500 text-white placeholder-gray-500 transition duration-300"
placeholder="Your Name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label>
<input type="email" id="email" name="email" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-xl focus:ring-sky-500 focus:border-sky-500 text-white placeholder-gray-500 transition duration-300"
placeholder="your.email@example.com">
</div>
<input type="hidden" name="_replyto">
<div>
<label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label>
<textarea id="message" name="message" rows="4" required
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-xl focus:ring-sky-500 focus:border-sky-500 text-white placeholder-gray-500 resize-none transition duration-300"
placeholder="How can I help you?"></textarea>
</div>
<button type="submit"
class="w-full py-3 px-6 bg-teal-600 hover:bg-teal-700 text-white font-bold rounded-xl shadow-lg transform transition duration-300 hover:scale-[1.01] focus:outline-none focus:ring-4 focus:ring-teal-500/50">
Send Message
</button>
</form>
</div>
</section>
</main>
<footer class="bg-gray-900 border-t border-gray-700 py-6">
<div class="container mx-auto px-4 text-center text-gray-400 text-sm">
<p>© <span id="current-year"></span> Animesh Saha. All rights reserved.</p>
<p class="mt-2">Built with HTML and Tailwind CSS.</p>
</div>
</footer>
<script>
// Get the current year for the footer
document.getElementById('current-year').textContent = new Date().getFullYear();
// 1. Mobile Menu Toggle Logic
const menuButton = document.getElementById('menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const mobileLinks = document.querySelectorAll('.nav-link-mobile');
menuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when a link is clicked
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// 2. Contact Form Submission:
// *** CRITICAL CHANGE: Removed all JavaScript form handling. ***
// The form now relies solely on the HTML 'action' attribute
// to submit data to Formspree, which handles the email sending
// and displays a success page/message after submission.
// 3. Typewriter Effect Logic
function typeWriterEffect() {
const textElement = document.getElementById('typewriter-text');
const text = "Hello, I'm Animesh Saha";
let i = 0;
const speed = 75; // Typing speed in milliseconds
// Add the initial blinking cursor class to show a cursor immediately
textElement.classList.add('typing-cursor');
function type() {
if (i < text.length) {
// Append the next character to the text element
textElement.innerHTML += text.charAt(i);
i++;
// Call the function again after a delay
setTimeout(type, speed);
} else {
// Remove the cursor class once typing is complete
textElement.classList.remove('typing-cursor');
}
}
// Start the typing sequence
type();
}
// Run the typewriter effect when the window loads
window.onload = typeWriterEffect;
</script>
</body>
</html>