Hugging Face's logo

Spaces:
Sritejam
/
portfolio-sriteja
Running

App Files Community
Sritejam commited on
Commit
20ab6d0
·
verified ·
1 Parent(s): adba5c3

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +867 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio Sriteja
3
- emoji: 🏆
4
- colorFrom: yellow
5
  colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: portfolio-sriteja
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,867 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sriteja Madishetty | Data Analyst Portfolio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
12
+ }
13
+
14
+ .skill-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 10px 25px rgba(30, 58, 138, 0.2);
17
+ }
18
+
19
+ .project-card:hover .project-overlay {
20
+ opacity: 1;
21
+ }
22
+
23
+ .timeline-item:not(:last-child)::after {
24
+ content: '';
25
+ position: absolute;
26
+ left: 7px;
27
+ top: 24px;
28
+ height: calc(100% - 24px);
29
+ width: 2px;
30
+ background: #e5e7eb;
31
+ }
32
+
33
+ .nav-link {
34
+ position: relative;
35
+ }
36
+
37
+ .nav-link::after {
38
+ content: '';
39
+ position: absolute;
40
+ width: 0;
41
+ height: 2px;
42
+ bottom: -2px;
43
+ left: 0;
44
+ background-color: #1e40af;
45
+ transition: width 0.3s ease;
46
+ }
47
+
48
+ .nav-link:hover::after {
49
+ width: 100%;
50
+ }
51
+
52
+ .tooltip {
53
+ position: relative;
54
+ }
55
+
56
+ .tooltip:hover .tooltip-text {
57
+ visibility: visible;
58
+ opacity: 1;
59
+ }
60
+
61
+ .tooltip-text {
62
+ visibility: hidden;
63
+ opacity: 0;
64
+ position: absolute;
65
+ z-index: 1;
66
+ bottom: 125%;
67
+ left: 50%;
68
+ transform: translateX(-50%);
69
+ background-color: #1e3a8a;
70
+ color: white;
71
+ padding: 0.5rem 1rem;
72
+ border-radius: 6px;
73
+ font-size: 0.875rem;
74
+ white-space: nowrap;
75
+ transition: all 0.3s ease;
76
+ }
77
+
78
+ .tooltip-text::after {
79
+ content: "";
80
+ position: absolute;
81
+ top: 100%;
82
+ left: 50%;
83
+ margin-left: -5px;
84
+ border-width: 5px;
85
+ border-style: solid;
86
+ border-color: #1e3a8a transparent transparent transparent;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="font-sans bg-gray-50 text-gray-800">
91
+ <!-- Navigation -->
92
+ <nav class="fixed w-full bg-white shadow-md z-50">
93
+ <div class="container mx-auto px-6 py-4">
94
+ <div class="flex justify-between items-center">
95
+ <a href="#" class="text-2xl font-bold text-blue-800">Sriteja Madishetty</a>
96
+
97
+ <!-- Mobile menu button -->
98
+ <button id="mobile-menu-button" class="md:hidden focus:outline-none">
99
+ <i class="fas fa-bars text-2xl"></i>
100
+ </button>
101
+
102
+ <!-- Desktop Menu -->
103
+ <div class="hidden md:flex space-x-8">
104
+ <a href="#home" class="nav-link">Home</a>
105
+ <a href="#about" class="nav-link">About</a>
106
+ <a href="#skills" class="nav-link">Skills</a>
107
+ <a href="#projects" class="nav-link">Projects</a>
108
+ <a href="#experience" class="nav-link">Experience</a>
109
+ <a href="#contact" class="nav-link">Contact</a>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Mobile Menu -->
114
+ <div id="mobile-menu" class="md:hidden hidden mt-4">
115
+ <div class="flex flex-col space-y-3">
116
+ <a href="#home" class="nav-link">Home</a>
117
+ <a href="#about" class="nav-link">About</a>
118
+ <a href="#skills" class="nav-link">Skills</a>
119
+ <a href="#projects" class="nav-link">Projects</a>
120
+ <a href="#experience" class="nav-link">Experience</a>
121
+ <a href="#contact" class="nav-link">Contact</a>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </nav>
126
+
127
+ <!-- Hero Section -->
128
+ <section id="home" class="hero-gradient text-white pt-24 pb-20 md:pt-32 md:pb-28">
129
+ <div class="container mx-auto px-6">
130
+ <div class="flex flex-col md:flex-row items-center">
131
+ <div class="md:w-2/3 mb-12 md:mb-0">
132
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
133
+ Hi, I'm <span class="text-blue-200">Sriteja Madishetty</span>
134
+ </h1>
135
+ <h2 class="text-2xl md:text-3xl text-blue-200 mb-8">
136
+ Data Analyst | AI/ML Engineer
137
+ </h2>
138
+ <p class="text-lg mb-8 max-w-lg">
139
+ Transforming complex data into actionable insights with expertise in Python, SQL, and Machine Learning. Passionate about leveraging data to drive business decisions and create impact.
140
+ </p>
141
+ <div class="flex flex-wrap gap-4">
142
+ <a href="#projects" class="bg-white text-blue-800 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">
143
+ View My Work
144
+ </a>
145
+ <a href="#contact" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-800 transition duration-300">
146
+ Contact Me
147
+ </a>
148
+ <a href="#" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-800 transition duration-300">
149
+ Download CV
150
+ </a>
151
+ </div>
152
+ </div>
153
+ <div class="md:w-1/3 flex justify-center">
154
+ <div class="relative">
155
+ <div class="w-64 h-64 md:w-72 md:h-72 bg-blue-700 rounded-full absolute -inset-1 blur-lg opacity-20"></div>
156
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
157
+ alt="Sriteja Madishetty"
158
+ class="rounded-full w-64 h-64 md:w-72 md:h-72 object-cover border-4 border-white shadow-xl relative">
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+
165
+ <!-- About Section -->
166
+ <section id="about" class="py-20 bg-white">
167
+ <div class="container mx-auto px-6">
168
+ <div class="text-center mb-16">
169
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">About Me</h2>
170
+ <div class="w-20 h-1 bg-blue-800 mx-auto"></div>
171
+ </div>
172
+
173
+ <div class="flex flex-col lg:flex-row items-center">
174
+ <div class="lg:w-1/3 mb-8 lg:mb-0 flex justify-center">
175
+ <div class="relative">
176
+ <div class="w-48 h-48 md:w-56 md:h-56 bg-blue-100 rounded-full absolute -inset-1 blur-lg opacity-30"></div>
177
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
178
+ alt="Sriteja Madishetty"
179
+ class="rounded-full w-48 h-48 md:w-56 md:h-56 object-cover border-4 border-blue-100 shadow-lg relative">
180
+ </div>
181
+ </div>
182
+
183
+ <div class="lg:w-2/3 lg:pl-12">
184
+ <h3 class="text-2xl font-semibold mb-6">Data Analyst with Strong Foundations in AI/ML</h3>
185
+ <p class="text-gray-600 mb-6 leading-relaxed">
186
+ I'm a data professional with expertise in data wrangling, visualization, and statistical analysis.
187
+ Experienced in SQL, Python, Tableau, and Excel for generating actionable business insights.
188
+ Adept at working with large datasets, building dashboards, and leveraging analytical models to drive decision-making.
189
+ </p>
190
+ <p class="text-gray-600 mb-6 leading-relaxed">
191
+ My journey in data science began during my computer science undergrad, where I discovered my passion for
192
+ extracting meaningful patterns from complex datasets. I've since honed my skills through advanced education
193
+ and hands-on projects in machine learning and AI.
194
+ </p>
195
+ <p class="text-gray-600 mb-8 leading-relaxed">
196
+ When I'm not analyzing data, you can find me exploring new machine learning techniques, contributing to open-source projects,
197
+ or writing about data science concepts on Medium.
198
+ </p>
199
+
200
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
201
+ <div class="flex items-center bg-blue-50 p-3 rounded-lg">
202
+ <i class="fas fa-phone-alt text-blue-700 mr-3 text-lg"></i>
203
+ <div>
204
+ <h4 class="font-medium text-gray-700">Phone</h4>
205
+ <p class="text-gray-600">+1 661-515-1520</p>
206
+ </div>
207
+ </div>
208
+ <div class="flex items-center bg-blue-50 p-3 rounded-lg">
209
+ <i class="fas fa-envelope text-blue-700 mr-3 text-lg"></i>
210
+ <div>
211
+ <h4 class="font-medium text-gray-700">Email</h4>
212
+ <p class="text-gray-600">madishetty8@gmail.com</p>
213
+ </div>
214
+ </div>
215
+ <div class="flex items-center bg-blue-50 p-3 rounded-lg">
216
+ <i class="fab fa-linkedin-in text-blue-700 mr-3 text-lg"></i>
217
+ <div>
218
+ <h4 class="font-medium text-gray-700">LinkedIn</h4>
219
+ <p class="text-gray-600">linkedin.com/in/sritejamadishetty</p>
220
+ </div>
221
+ </div>
222
+ <div class="flex items-center bg-blue-50 p-3 rounded-lg">
223
+ <i class="fas fa-graduation-cap text-blue-700 mr-3 text-lg"></i>
224
+ <div>
225
+ <h4 class="font-medium text-gray-700">Education</h4>
226
+ <p class="text-gray-600">M.P.S. Data Science, UMBC</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- Skills Section -->
236
+ <section id="skills" class="py-20 bg-gray-50">
237
+ <div class="container mx-auto px-6">
238
+ <div class="text-center mb-16">
239
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Technical Skills</h2>
240
+ <div class="w-20 h-1 bg-blue-800 mx-auto"></div>
241
+ </div>
242
+
243
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
244
+ <!-- Programming Languages -->
245
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md transition duration-300">
246
+ <div class="flex items-center mb-4">
247
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
248
+ <i class="fas fa-code text-blue-700 text-xl"></i>
249
+ </div>
250
+ <h3 class="text-xl font-semibold">Programming Languages</h3>
251
+ </div>
252
+ <div class="flex flex-wrap gap-2">
253
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Python</span>
254
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">R</span>
255
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">SQL</span>
256
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Bash</span>
257
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">C++</span>
258
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Java</span>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Python Libraries -->
263
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md transition duration-300">
264
+ <div class="flex items-center mb-4">
265
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
266
+ <i class="fab fa-python text-blue-700 text-xl"></i>
267
+ </div>
268
+ <h3 class="text-xl font-semibold">Python Libraries</h3>
269
+ </div>
270
+ <div class="flex flex-wrap gap-2">
271
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Pandas</span>
272
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">NumPy</span>
273
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Matplotlib</span>
274
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Seaborn</span>
275
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Scikit-Learn</span>
276
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">TensorFlow</span>
277
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">PyTorch</span>
278
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Hugging Face</span>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Machine Learning -->
283
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md transition duration-300">
284
+ <div class="flex items-center mb-4">
285
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
286
+ <i class="fas fa-brain text-blue-700 text-xl"></i>
287
+ </div>
288
+ <h3 class="text-xl font-semibold">Machine Learning</h3>
289
+ </div>
290
+ <div class="flex flex-wrap gap-2">
291
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Supervised Learning</span>
292
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Unsupervised Learning</span>
293
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Feature Engineering</span>
294
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Hyperparameter Tuning</span>
295
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Model Evaluation</span>
296
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Generative AI</span>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Data Visualization -->
301
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md transition duration-300">
302
+ <div class="flex items-center mb-4">
303
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
304
+ <i class="fas fa-chart-bar text-blue-700 text-xl"></i>
305
+ </div>
306
+ <h3 class="text-xl font-semibold">Data Visualization</h3>
307
+ </div>
308
+ <div class="flex flex-wrap gap-2">
309
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Tableau</span>
310
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Power BI</span>
311
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Plotly</span>
312
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Seaborn</span>
313
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Matplotlib</span>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Big Data & Cloud -->
318
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md transition duration-300">
319
+ <div class="flex items-center mb-4">
320
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
321
+ <i class="fas fa-cloud text-blue-700 text-xl"></i>
322
+ </div>
323
+ <h3 class="text-xl font-semibold">Big Data & Cloud</h3>
324
+ </div>
325
+ <div class="flex flex-wrap gap-2">
326
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">PySpark</span>
327
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Hadoop</span>
328
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">AWS</span>
329
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Azure</span>
330
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Google Cloud</span>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- DevOps & Tools -->
335
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md transition duration-300">
336
+ <div class="flex items-center mb-4">
337
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
338
+ <i class="fas fa-tools text-blue-700 text-xl"></i>
339
+ </div>
340
+ <h3 class="text-xl font-semibold">DevOps & Tools</h3>
341
+ </div>
342
+ <div class="flex flex-wrap gap-2">
343
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Docker</span>
344
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Kubernetes</span>
345
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Jenkins</span>
346
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Git</span>
347
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">MLflow</span>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </section>
353
+
354
+ <!-- Projects Section -->
355
+ <section id="projects" class="py-20 bg-white">
356
+ <div class="container mx-auto px-6">
357
+ <div class="text-center mb-16">
358
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Projects</h2>
359
+ <div class="w-20 h-1 bg-blue-800 mx-auto"></div>
360
+ </div>
361
+
362
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
363
+ <!-- Project 1 -->
364
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg relative">
365
+ <div class="h-48 overflow-hidden">
366
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80"
367
+ alt="LLM-Driven RAG System"
368
+ class="w-full h-full object-cover">
369
+ </div>
370
+ <div class="p-6">
371
+ <div class="flex justify-between items-start mb-2">
372
+ <h3 class="text-xl font-semibold">LLM-Driven RAG System for Query Answering</h3>
373
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Gen AI</span>
374
+ </div>
375
+ <p class="text-gray-600 mb-4">
376
+ Developed a predictive model using word embeddings to extract treatment names from clinical notes, achieving a 94% weighted F1-score on a highly imbalanced dataset.
377
+ </p>
378
+ <div class="flex flex-wrap gap-2 mb-4">
379
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">RAG</span>
380
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">NLP</span>
381
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">SVM</span>
382
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">SMOTE</span>
383
+ </div>
384
+ <div class="project-overlay absolute inset-0 bg-blue-800 bg-opacity-90 flex items-center justify-center opacity-0 transition-opacity duration-300 p-6">
385
+ <div class="text-white">
386
+ <h3 class="text-xl font-bold mb-2">Key Achievements</h3>
387
+ <ul class="list-disc pl-5 space-y-2 text-sm">
388
+ <li>Outperformed traditional SVM models by 12%</li>
389
+ <li>Used pre-trained word embeddings for improved classification</li>
390
+ <li>Addressed class imbalance with SMOTE and stratified sampling</li>
391
+ <li>Applied advanced NLP techniques for robust preprocessing</li>
392
+ </ul>
393
+ <div class="mt-4 flex space-x-3">
394
+ <a href="#" class="text-white hover:text-blue-200">
395
+ <i class="fab fa-github"></i> Code
396
+ </a>
397
+ <a href="#" class="text-white hover:text-blue-200">
398
+ <i class="fas fa-file-alt"></i> Case Study
399
+ </a>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <!-- Project 2 -->
407
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg relative">
408
+ <div class="h-48 overflow-hidden">
409
+ <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
410
+ alt="Employee Attrition Analysis"
411
+ class="w-full h-full object-cover">
412
+ </div>
413
+ <div class="p-6">
414
+ <div class="flex justify-between items-start mb-2">
415
+ <h3 class="text-xl font-semibold">Employee Attrition Analysis</h3>
416
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">ML</span>
417
+ </div>
418
+ <p class="text-gray-600 mb-4">
419
+ Developed an unsupervised model for employee attrition, achieving an 86% weighted F1-score on an imbalanced dataset with 500 clusters.
420
+ </p>
421
+ <div class="flex flex-wrap gap-2 mb-4">
422
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">K-Means</span>
423
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">PCA</span>
424
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">DBSCAN</span>
425
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">SME Insights</span>
426
+ </div>
427
+ <div class="project-overlay absolute inset-0 bg-blue-800 bg-opacity-90 flex items-center justify-center opacity-0 transition-opacity duration-300 p-6">
428
+ <div class="text-white">
429
+ <h3 class="text-xl font-bold mb-2">Key Achievements</h3>
430
+ <ul class="list-disc pl-5 space-y-2 text-sm">
431
+ <li>Performed extensive data cleaning and preprocessing</li>
432
+ <li>Conducted EDA to identify key trends and outliers</li>
433
+ <li>Created 500 clusters with SME guidance</li>
434
+ <li>Demonstrated full ML pipeline expertise</li>
435
+ </ul>
436
+ <div class="mt-4 flex space-x-3">
437
+ <a href="#" class="text-white hover:text-blue-200">
438
+ <i class="fab fa-github"></i> Code
439
+ </a>
440
+ <a href="#" class="text-white hover:text-blue-200">
441
+ <i class="fas fa-file-alt"></i> Case Study
442
+ </a>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Project 3 -->
450
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg relative">
451
+ <div class="h-48 overflow-hidden">
452
+ <img src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
453
+ alt="Stock Trends Analysis"
454
+ class="w-full h-full object-cover">
455
+ </div>
456
+ <div class="p-6">
457
+ <div class="flex justify-between items-start mb-2">
458
+ <h3 class="text-xl font-semibold">Stock Trends Analysis</h3>
459
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Finance</span>
460
+ </div>
461
+ <p class="text-gray-600 mb-4">
462
+ Analyzed stock prices using technical indicators like Moving Averages, RSI, and Bollinger Bands to provide market insights.
463
+ </p>
464
+ <div class="flex flex-wrap gap-2 mb-4">
465
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Python</span>
466
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Pandas</span>
467
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Matplotlib</span>
468
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Seaborn</span>
469
+ </div>
470
+ <div class="project-overlay absolute inset-0 bg-blue-800 bg-opacity-90 flex items-center justify-center opacity-0 transition-opacity duration-300 p-6">
471
+ <div class="text-white">
472
+ <h3 class="text-xl font-bold mb-2">Key Achievements</h3>
473
+ <ul class="list-disc pl-5 space-y-2 text-sm">
474
+ <li>Calculated and visualized key technical indicators</li>
475
+ <li>Provided insights into market trends and volatility</li>
476
+ <li>Demonstrated data analysis in financial markets</li>
477
+ <li>Helped investors make informed decisions</li>
478
+ </ul>
479
+ <div class="mt-4 flex space-x-3">
480
+ <a href="#" class="text-white hover:text-blue-200">
481
+ <i class="fab fa-github"></i> Code
482
+ </a>
483
+ <a href="#" class="text-white hover:text-blue-200">
484
+ <i class="fas fa-file-alt"></i> Case Study
485
+ </a>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+
492
+ <!-- Project 4 -->
493
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg relative">
494
+ <div class="h-48 overflow-hidden">
495
+ <img src="https://images.unsplash.com/photo-1622675363311-3e1904dc1885?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
496
+ alt="Fine-Tuning LLM"
497
+ class="w-full h-full object-cover">
498
+ </div>
499
+ <div class="p-6">
500
+ <div class="flex justify-between items-start mb-2">
501
+ <h3 class="text-xl font-semibold">Fine-Tuning LLM for Treatment Prediction</h3>
502
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">NLP</span>
503
+ </div>
504
+ <p class="text-gray-600 mb-4">
505
+ Fine-tuned Clinical BERT using EHR-trained embeddings for accurate classification and entity recognition from clinical notes.
506
+ </p>
507
+ <div class="flex flex-wrap gap-2 mb-4">
508
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Clinical BERT</span>
509
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Hugging Face</span>
510
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">SVM</span>
511
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">SMOTE</span>
512
+ </div>
513
+ <div class="project-overlay absolute inset-0 bg-blue-800 bg-opacity-90 flex items-center justify-center opacity-0 transition-opacity duration-300 p-6">
514
+ <div class="text-white">
515
+ <h3 class="text-xl font-bold mb-2">Key Achievements</h3>
516
+ <ul class="list-disc pl-5 space-y-2 text-sm">
517
+ <li>Achieved 94% weighted F1-score</li>
518
+ <li>Fine-tuned Clinical BERT with EHR embeddings</li>
519
+ <li>Handled class imbalance effectively</li>
520
+ <li>Applied advanced NLP preprocessing</li>
521
+ </ul>
522
+ <div class="mt-4 flex space-x-3">
523
+ <a href="#" class="text-white hover:text-blue-200">
524
+ <i class="fab fa-github"></i> Code
525
+ </a>
526
+ <a href="#" class="text-white hover:text-blue-200">
527
+ <i class="fas fa-file-alt"></i> Case Study
528
+ </a>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="text-center mt-12">
537
+ <a href="#" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-900 transition">
538
+ View All Projects
539
+ </a>
540
+ </div>
541
+ </div>
542
+ </section>
543
+
544
+ <!-- Experience & Education Section -->
545
+ <section id="experience" class="py-20 bg-gray-50">
546
+ <div class="container mx-auto px-6">
547
+ <div class="text-center mb-16">
548
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Experience & Education</h2>
549
+ <div class="w-20 h-1 bg-blue-800 mx-auto"></div>
550
+ </div>
551
+
552
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
553
+ <!-- Experience -->
554
+ <div>
555
+ <h3 class="text-2xl font-semibold mb-8 flex items-center">
556
+ <i class="fas fa-briefcase text-blue-700 mr-3"></i> Professional Experience
557
+ </h3>
558
+
559
+ <div class="space-y-8 relative">
560
+ <!-- HCLTech -->
561
+ <div class="timeline-item relative pl-8">
562
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-700 border-4 border-blue-100"></div>
563
+ <div class="bg-white p-6 rounded-xl shadow-md">
564
+ <div class="flex justify-between items-start mb-2">
565
+ <h4 class="text-lg font-semibold">Senior Software Engineer</h4>
566
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">02/2022 – 11/2022</span>
567
+ </div>
568
+ <p class="text-gray-600 mb-2">HCLTech, Hyderabad, India</p>
569
+ <ul class="list-disc pl-5 space-y-2 text-sm text-gray-600">
570
+ <li>Optimized SQL queries and ETL workflows for financial reporting</li>
571
+ <li>Developed automation scripts using Shell and Python, improving efficiency</li>
572
+ <li>Built predictive analytics models using Python, pandas, and scikit-learn</li>
573
+ <li>Used NLP to process and extract insights from financial reports</li>
574
+ <li>Developed Tableau dashboards for financial metrics visualization</li>
575
+ </ul>
576
+ </div>
577
+ </div>
578
+
579
+ <!-- Wipro -->
580
+ <div class="timeline-item relative pl-8">
581
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-700 border-4 border-blue-100"></div>
582
+ <div class="bg-white p-6 rounded-xl shadow-md">
583
+ <div class="flex justify-between items-start mb-2">
584
+ <h4 class="text-lg font-semibold">Project Engineer</h4>
585
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">06/2019 – 02/2022</span>
586
+ </div>
587
+ <p class="text-gray-600 mb-2">Wipro, Pune, India</p>
588
+ <ul class="list-disc pl-5 space-y-2 text-sm text-gray-600">
589
+ <li>Developed and maintained Jenkins CI/CD pipelines</li>
590
+ <li>Managed Red Hat Linux servers and configurations</li>
591
+ <li>Implemented log monitoring using ELK Stack</li>
592
+ <li>Automated deployment tasks using Shell scripting</li>
593
+ <li>Created and optimized SQL queries for ETL workflows</li>
594
+ <li>Designed Tableau dashboards for sales trends visualization</li>
595
+ </ul>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+
601
+ <!-- Education -->
602
+ <div>
603
+ <h3 class="text-2xl font-semibold mb-8 flex items-center">
604
+ <i class="fas fa-graduation-cap text-blue-700 mr-3"></i> Education
605
+ </h3>
606
+
607
+ <div class="space-y-8 relative">
608
+ <!-- UMBC -->
609
+ <div class="timeline-item relative pl-8">
610
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-700 border-4 border-blue-100"></div>
611
+ <div class="bg-white p-6 rounded-xl shadow-md">
612
+ <div class="flex justify-between items-start mb-2">
613
+ <h4 class="text-lg font-semibold">Master of Professional Studies (M.P.S.) in Data Science</h4>
614
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">01/2023 – 12/2024</span>
615
+ </div>
616
+ <p class="text-gray-600 mb-2">University of Maryland, Baltimore County, USA</p>
617
+ <ul class="list-disc pl-5 space-y-2 text-sm text-gray-600">
618
+ <li>Specialized in Machine Learning and AI applications</li>
619
+ <li>Coursework: Advanced Data Structures, Statistical Learning, NLP</li>
620
+ <li>Research focus: Generative AI and Retrieval-Augmented Generation</li>
621
+ </ul>
622
+ </div>
623
+ </div>
624
+
625
+ <!-- Malla Reddy -->
626
+ <div class="timeline-item relative pl-8">
627
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-700 border-4 border-blue-100"></div>
628
+ <div class="bg-white p-6 rounded-xl shadow-md">
629
+ <div class="flex justify-between items-start mb-2">
630
+ <h4 class="text-lg font-semibold">Bachelor of Technology (B.Tech) in Computer Science</h4>
631
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">08/2015 – 05/2019</span>
632
+ </div>
633
+ <p class="text-gray-600 mb-2">Malla Reddy Engineering College, Hyderabad, India</p>
634
+ <ul class="list-disc pl-5 space-y-2 text-sm text-gray-600">
635
+ <li>Graduated with First Class Honors</li>
636
+ <li>Coursework: Data Structures, Algorithms, Database Systems</li>
637
+ <li>Final Year Project: Predictive Analytics for Healthcare</li>
638
+ </ul>
639
+ </div>
640
+ </div>
641
+
642
+ <!-- Certifications -->
643
+ <div class="timeline-item relative pl-8">
644
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-700 border-4 border-blue-100"></div>
645
+ <div class="bg-white p-6 rounded-xl shadow-md">
646
+ <h4 class="text-lg font-semibold mb-4">Certifications</h4>
647
+ <div class="space-y-4">
648
+ <div class="flex items-start">
649
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
650
+ <i class="fas fa-certificate text-blue-700"></i>
651
+ </div>
652
+ <div>
653
+ <h5 class="font-medium">Oracle Cloud Infrastructure 2024 Generative AI Professional</h5>
654
+ <p class="text-gray-600 text-sm">Issued: 07/2024</p>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </section>
665
+
666
+ <!-- Contact Section -->
667
+ <section id="contact" class="py-20 bg-white">
668
+ <div class="container mx-auto px-6">
669
+ <div class="text-center mb-16">
670
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In Touch</h2>
671
+ <div class="w-20 h-1 bg-blue-800 mx-auto"></div>
672
+ </div>
673
+
674
+ <div class="flex flex-col lg:flex-row gap-12">
675
+ <div class="lg:w-1/2">
676
+ <h3 class="text-2xl font-semibold mb-6">Contact Information</h3>
677
+ <p class="text-gray-600 mb-8">
678
+ Interested in working together or have questions about my work? Feel free to reach out through any of these channels.
679
+ </p>
680
+
681
+ <div class="space-y-6">
682
+ <div class="flex items-start">
683
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
684
+ <i class="fas fa-map-marker-alt text-blue-700"></i>
685
+ </div>
686
+ <div>
687
+ <h4 class="font-semibold">Location</h4>
688
+ <p class="text-gray-600">Maryland, USA</p>
689
+ </div>
690
+ </div>
691
+
692
+ <div class="flex items-start">
693
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
694
+ <i class="fas fa-envelope text-blue-700"></i>
695
+ </div>
696
+ <div>
697
+ <h4 class="font-semibold">Email</h4>
698
+ <p class="text-gray-600">madishetty8@gmail.com</p>
699
+ </div>
700
+ </div>
701
+
702
+ <div class="flex items-start">
703
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
704
+ <i class="fas fa-phone-alt text-blue-700"></i>
705
+ </div>
706
+ <div>
707
+ <h4 class="font-semibold">Phone</h4>
708
+ <p class="text-gray-600">+1 661-515-1520</p>
709
+ </div>
710
+ </div>
711
+ </div>
712
+
713
+ <div class="mt-12">
714
+ <h4 class="font-semibold mb-4">Connect With Me</h4>
715
+ <div class="flex space-x-4">
716
+ <a href="https://www.linkedin.com/in/sritejamadishetty/" class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center text-blue-700 hover:bg-blue-700 hover:text-white transition">
717
+ <i class="fab fa-linkedin-in text-lg"></i>
718
+ </a>
719
+ <a href="#" class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center text-blue-700 hover:bg-blue-700 hover:text-white transition">
720
+ <i class="fab fa-github text-lg"></i>
721
+ </a>
722
+ <a href="#" class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center text-blue-700 hover:bg-blue-700 hover:text-white transition">
723
+ <i class="fab fa-medium text-lg"></i>
724
+ </a>
725
+ <a href="#" class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center text-blue-700 hover:bg-blue-700 hover:text-white transition">
726
+ <i class="fab fa-twitter text-lg"></i>
727
+ </a>
728
+ </div>
729
+ </div>
730
+ </div>
731
+
732
+ <div class="lg:w-1/2">
733
+ <form class="space-y-6">
734
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
735
+ <div>
736
+ <label for="name" class="block text-gray-700 mb-2">Your Name</label>
737
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="John Doe">
738
+ </div>
739
+
740
+ <div>
741
+ <label for="email" class="block text-gray-700 mb-2">Email Address</label>
742
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="john@example.com">
743
+ </div>
744
+ </div>
745
+
746
+ <div>
747
+ <label for="subject" class="block text-gray-700 mb-2">Subject</label>
748
+ <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Project Inquiry">
749
+ </div>
750
+
751
+ <div>
752
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
753
+ <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Tell me about your project..."></textarea>
754
+ </div>
755
+
756
+ <button type="submit" class="w-full bg-blue-800 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-900 transition">
757
+ Send Message
758
+ </button>
759
+ </form>
760
+ </div>
761
+ </div>
762
+ </div>
763
+ </section>
764
+
765
+ <!-- Footer -->
766
+ <footer class="bg-gray-900 text-white py-12">
767
+ <div class="container mx-auto px-6">
768
+ <div class="flex flex-col md:flex-row justify-between items-center">
769
+ <div class="mb-6 md:mb-0">
770
+ <a href="#" class="text-2xl font-bold text-white">Sriteja Madishetty</a>
771
+ <p class="text-gray-400 mt-2">Data Analyst | AI/ML Engineer</p>
772
+ </div>
773
+
774
+ <div class="flex flex-col items-center md:items-end">
775
+ <div class="flex space-x-6 mb-4">
776
+ <a href="https://www.linkedin.com/in/sritejamadishetty/" class="text-gray-400 hover:text-white transition">
777
+ <i class="fab fa-linkedin-in"></i>
778
+ </a>
779
+ <a href="#" class="text-gray-400 hover:text-white transition">
780
+ <i class="fab fa-github"></i>
781
+ </a>
782
+ <a href="#" class="text-gray-400 hover:text-white transition">
783
+ <i class="fab fa-medium"></i>
784
+ </a>
785
+ <a href="#" class="text-gray-400 hover:text-white transition">
786
+ <i class="fab fa-twitter"></i>
787
+ </a>
788
+ </div>
789
+
790
+ <p class="text-gray-400 text-sm">
791
+ &copy; 2024 Sriteja Madishetty. All rights reserved.
792
+ </p>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </footer>
797
+
798
+ <script>
799
+ // Mobile menu toggle
800
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
801
+ const menu = document.getElementById('mobile-menu');
802
+ menu.classList.toggle('hidden');
803
+ });
804
+
805
+ // Smooth scrolling for navigation links
806
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
807
+ anchor.addEventListener('click', function (e) {
808
+ e.preventDefault();
809
+
810
+ const targetId = this.getAttribute('href');
811
+ const targetElement = document.querySelector(targetId);
812
+
813
+ if (targetElement) {
814
+ window.scrollTo({
815
+ top: targetElement.offsetTop - 80,
816
+ behavior: 'smooth'
817
+ });
818
+
819
+ // Close mobile menu if open
820
+ const mobileMenu = document.getElementById('mobile-menu');
821
+ if (!mobileMenu.classList.contains('hidden')) {
822
+ mobileMenu.classList.add('hidden');
823
+ }
824
+ }
825
+ });
826
+ });
827
+
828
+ // Form submission
829
+ const contactForm = document.querySelector('form');
830
+ if (contactForm) {
831
+ contactForm.addEventListener('submit', function(e) {
832
+ e.preventDefault();
833
+
834
+ // Simple validation
835
+ const name = document.getElementById('name').value;
836
+ const email = document.getElementById('email').value;
837
+ const message = document.getElementById('message').value;
838
+
839
+ if (!name || !email || !message) {
840
+ alert('Please fill in all required fields.');
841
+ return;
842
+ }
843
+
844
+ // Here you would typically send the form data to a server
845
+ alert('Thank you for your message! I will get back to you soon.');
846
+ this.reset();
847
+ });
848
+ }
849
+
850
+ // Tooltip functionality
851
+ const tooltips = document.querySelectorAll('.tooltip');
852
+ tooltips.forEach(tooltip => {
853
+ tooltip.addEventListener('mouseenter', function() {
854
+ const tooltipText = this.querySelector('.tooltip-text');
855
+ tooltipText.style.visibility = 'visible';
856
+ tooltipText.style.opacity = '1';
857
+ });
858
+
859
+ tooltip.addEventListener('mouseleave', function() {
860
+ const tooltipText = this.querySelector('.tooltip-text');
861
+ tooltipText.style.visibility = 'hidden';
862
+ tooltipText.style.opacity = '0';
863
+ });
864
+ });
865
+ </script>
866
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Sritejam/portfolio-sriteja" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
867
+ </html>