manish72 commited on
Commit
d1a2d36
·
verified ·
1 Parent(s): bcec917

- Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +550 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio Day Mode
3
- emoji: 🔥
4
- colorFrom: indigo
5
- colorTo: gray
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-day-mode
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,550 @@
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>Manish Gupta 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
+ /* Custom CSS for animations */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+ .animate-fade-in {
16
+ animation: fadeIn 0.8s ease-out forwards;
17
+ }
18
+ .delay-100 { animation-delay: 0.1s; }
19
+ .delay-200 { animation-delay: 0.2s; }
20
+ .delay-300 { animation-delay: 0.3s; }
21
+ .delay-400 { animation-delay: 0.4s; }
22
+
23
+ /* Custom scrollbar */
24
+ ::-webkit-scrollbar {
25
+ width: 8px;
26
+ }
27
+ ::-webkit-scrollbar-track {
28
+ background: #f1f1f1;
29
+ }
30
+ ::-webkit-scrollbar-thumb {
31
+ background: #4f46e5;
32
+ border-radius: 4px;
33
+ }
34
+ ::-webkit-scrollbar-thumb:hover {
35
+ background: #4338ca;
36
+ }
37
+
38
+ /* Gradient text */
39
+ .gradient-text {
40
+ background: linear-gradient(90deg, #4f46e5, #10b981);
41
+ -webkit-background-clip: text;
42
+ background-clip: text;
43
+ color: transparent;
44
+ }
45
+
46
+ /* Card hover effect */
47
+ .project-card:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 font-sans text-gray-800">
54
+ <!-- Navigation -->
55
+ <nav class="fixed w-full bg-white shadow-md z-50">
56
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
57
+ <div class="flex justify-between h-16">
58
+ <div class="flex items-center">
59
+ <span class="text-xl font-bold gradient-text">Manish Gupta</span>
60
+ </div>
61
+ <div class="hidden md:flex items-center space-x-8">
62
+ <a href="#home" class="text-indigo-600 hover:text-indigo-800 transition">Home</a>
63
+ <a href="#about" class="text-gray-600 hover:text-indigo-600 transition">About</a>
64
+ <a href="#experience" class="text-gray-600 hover:text-indigo-600 transition">Experience</a>
65
+ <a href="#education" class="text-gray-600 hover:text-indigo-600 transition">Education</a>
66
+ <a href="#projects" class="text-gray-600 hover:text-indigo-600 transition">Projects</a>
67
+ <a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
68
+ </div>
69
+ <div class="md:hidden flex items-center">
70
+ <button id="menu-toggle" class="text-gray-600 hover:text-indigo-600 focus:outline-none">
71
+ <i class="fas fa-bars text-2xl"></i>
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ <!-- Mobile menu -->
77
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
78
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
79
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50">Home</a>
80
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">About</a>
81
+ <a href="#experience" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">Experience</a>
82
+ <a href="#education" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">Education</a>
83
+ <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">Projects</a>
84
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">Contact</a>
85
+ </div>
86
+ </div>
87
+ </nav>
88
+
89
+ <!-- Hero Section -->
90
+ <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-indigo-50 to-emerald-50">
91
+ <div class="max-w-6xl mx-auto">
92
+ <div class="flex flex-col md:flex-row items-center">
93
+ <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
94
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="gradient-text">jishnu R nair </span></h1>
95
+ <h2 class="text-2xl md:text-3xl font-semibold text-gray-600 mb-6">Data Science & Analytics Professional</h2>
96
+ <p class="text-lg text-gray-600 mb-8">Fresher with passion for data-driven solutions and continuous learning.</p>
97
+ <div class="flex space-x-4">
98
+ <a href="#contact" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg shadow-md transition duration-300 transform hover:scale-105">Contact Me</a>
99
+ <a href="#projects" class="border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg shadow-md transition duration-300 transform hover:scale-105">View Projects</a>
100
+ </div>
101
+ </div>
102
+ <div class="md:w-1/2 flex justify-center animate-fade-in delay-200">
103
+ <div class="relative">
104
+ <img src="https://manish7272.github.io/images/mg_circle_new.png" alt="Manish Gupta" class="w-64 h-64 md:w-80 md:h-80 rounded-full border-4 border-white shadow-xl">
105
+ <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-full shadow-lg">
106
+ <div class="bg-indigo-600 text-white p-3 rounded-full">
107
+ <i class="fas fa-laptop-code text-xl"></i>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </section>
115
+
116
+ <!-- About Section -->
117
+ <section id="about" class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
118
+ <div class="max-w-6xl mx-auto">
119
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2>
120
+ <div class="flex flex-col md:flex-row">
121
+ <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
122
+ <h3 class="text-2xl font-semibold mb-4">Who I Am</h3>
123
+ <p class="text-gray-600 mb-6">My name is Manish Gupta, and I was born and brought up in Jaipur. I graduated with a Bachelor's degree in Electronics and Communication Engineering (ECE) from Arya College of Engineering & IT in Jaipur, achieving a CGPA of 8.67.</p>
124
+ <p class="text-gray-600 mb-6">I am currently enhancing my skills in the field of data science through Imarticus Learning in Jaipur. I am enthusiastic about continuous learning, always eager to explore new things and stay updated.</p>
125
+ <p class="text-gray-600">I believe in constantly improving my skill set to align with current trends. This passion drives me to groom myself professionally.</p>
126
+ </div>
127
+ <div class="md:w-1/2 md:pl-12 animate-fade-in delay-200">
128
+ <h3 class="text-2xl font-semibold mb-6">My Skills</h3>
129
+ <div class="grid grid-cols-2 gap-4">
130
+ <div class="bg-gray-50 p-4 rounded-lg shadow-sm">
131
+ <div class="flex items-center mb-2">
132
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
133
+ <i class="fas fa-code text-indigo-600"></i>
134
+ </div>
135
+ <h4 class="font-medium">Programming</h4>
136
+ </div>
137
+ <p class="text-gray-600 text-sm">Python, SQL</p>
138
+ </div>
139
+ <div class="bg-gray-50 p-4 rounded-lg shadow-sm">
140
+ <div class="flex items-center mb-2">
141
+ <div class="bg-emerald-100 p-2 rounded-full mr-3">
142
+ <i class="fas fa-chart-line text-emerald-600"></i>
143
+ </div>
144
+ <h4 class="font-medium">BI Tools</h4>
145
+ </div>
146
+ <p class="text-gray-600 text-sm">Power BI, Tableau</p>
147
+ </div>
148
+ <div class="bg-gray-50 p-4 rounded-lg shadow-sm">
149
+ <div class="flex items-center mb-2">
150
+ <div class="bg-amber-100 p-2 rounded-full mr-3">
151
+ <i class="fas fa-database text-amber-600"></i>
152
+ </div>
153
+ <h4 class="font-medium">Data Science</h4>
154
+ </div>
155
+ <p class="text-gray-600 text-sm">ML, DL, Statistics</p>
156
+ </div>
157
+ <div class="bg-gray-50 p-4 rounded-lg shadow-sm">
158
+ <div class="flex items-center mb-2">
159
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
160
+ <i class="fas fa-globe text-blue-600"></i>
161
+ </div>
162
+ <h4 class="font-medium">Web Development</h4>
163
+ </div>
164
+ <p class="text-gray-600 text-sm">HTML, CSS, JavaScript</p>
165
+ </div>
166
+ </div>
167
+ <div class="mt-8">
168
+ <h4 class="font-medium mb-3">Interests</h4>
169
+ <div class="flex flex-wrap gap-2">
170
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Traveling</span>
171
+ <span class="bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-sm">Teaching</span>
172
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Learning</span>
173
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Technology</span>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Experience Section -->
182
+ <section id="experience" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
183
+ <div class="max-w-6xl mx-auto">
184
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Work Experience</h2>
185
+
186
+ <div class="space-y-8">
187
+ <!-- EDI Analyst -->
188
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in">
189
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
190
+ <h3 class="text-xl font-semibold">EDI Analyst</h3>
191
+ <span class="text-indigo-600 font-medium">June 2024 - Nov 2024</span>
192
+ </div>
193
+ <div class="flex items-center mb-4">
194
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
195
+ <i class="fas fa-building text-indigo-600"></i>
196
+ </div>
197
+ <h4 class="font-medium">A3logics Pvt. Ltd.</h4>
198
+ </div>
199
+ <p class="text-gray-600 mb-4 italic">"Our mission is to change the world for the better by setting the standards for IT development, cloud computing, supply chain & logistics, artificial intelligence, and deep learning."</p>
200
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
201
+ <li>Handle Maintenance & New plan year file cases for 834 & custom files</li>
202
+ <li>Handle Pref errors</li>
203
+ <li>Set-up the SFTP/FTP Connections</li>
204
+ <li>Tools: Salesforce CRM, Benefit Administration System, Optum, Microsoft Outlook</li>
205
+ </ul>
206
+ </div>
207
+
208
+ <!-- Data Science Intern -->
209
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-100">
210
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
211
+ <h3 class="text-xl font-semibold">Data Science Intern</h3>
212
+ <span class="text-emerald-600 font-medium">Oct 2023 - Dec 2023</span>
213
+ </div>
214
+ <div class="flex items-center mb-4">
215
+ <div class="bg-emerald-100 p-2 rounded-full mr-3">
216
+ <i class="fas fa-chart-bar text-emerald-600"></i>
217
+ </div>
218
+ <h4 class="font-medium">Bharat Intern</h4>
219
+ </div>
220
+ <p class="text-gray-600 mb-4 italic">"Bharat Intern, a pioneering company dedicated to offering enriching virtual internship opportunities for college students."</p>
221
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
222
+ <li>Data Cleaning and Preprocessing</li>
223
+ <li>Develop analytical tools and programs</li>
224
+ <li>Ensure the data quality and integrity in databases</li>
225
+ <li>Enabling accurate recognition of objects within images</li>
226
+ <li>Data Visualization Technique</li>
227
+ </ul>
228
+ </div>
229
+
230
+ <!-- Full Stack Development Internship -->
231
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-200">
232
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
233
+ <h3 class="text-xl font-semibold">Full Stack Development Internship</h3>
234
+ <span class="text-blue-600 font-medium">Nov 2021 - Jan 2022</span>
235
+ </div>
236
+ <div class="flex items-center mb-4">
237
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
238
+ <i class="fas fa-code text-blue-600"></i>
239
+ </div>
240
+ <h4 class="font-medium">Lyriclious - EdTech</h4>
241
+ </div>
242
+ <p class="text-gray-600 mb-4 italic">"India's learning platform" An E-learning platform, providing Training, Internship and courses along with projects in many professional and technical courses.</p>
243
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
244
+ <li>Create and maintain documentation for code and processes</li>
245
+ <li>Develop and maintain responsive web pages</li>
246
+ <li>Optimize applications for maximum speed</li>
247
+ <li>Work with front-end developers to ensure seamless integration</li>
248
+ </ul>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Education Section -->
255
+ <section id="education" class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
256
+ <div class="max-w-6xl mx-auto">
257
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Education</h2>
258
+
259
+ <div class="grid md:grid-cols-2 gap-8">
260
+ <!-- BTech -->
261
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in">
262
+ <div class="flex justify-between items-center mb-4">
263
+ <h3 class="text-xl font-semibold">Bachelor of Technology (BTech)</h3>
264
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">2019-2023</span>
265
+ </div>
266
+ <div class="flex items-center mb-4">
267
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
268
+ <i class="fas fa-university text-indigo-600"></i>
269
+ </div>
270
+ <h4 class="font-medium">Arya College of Engineering & IT, Jaipur</h4>
271
+ </div>
272
+ <p class="text-gray-600 mb-2"><span class="font-medium">Electronics & Communication Engineering (ECE)</span></p>
273
+ <p class="text-gray-600">Grade: First Division With Distinction (CGPA: 8.67)</p>
274
+ </div>
275
+
276
+ <!-- Higher Secondary -->
277
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-100">
278
+ <div class="flex justify-between items-center mb-4">
279
+ <h3 class="text-xl font-semibold">Higher Secondary School</h3>
280
+ <span class="bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-sm">2018-2019</span>
281
+ </div>
282
+ <div class="flex items-center mb-4">
283
+ <div class="bg-emerald-100 p-2 rounded-full mr-3">
284
+ <i class="fas fa-school text-emerald-600"></i>
285
+ </div>
286
+ <h4 class="font-medium">Azad Bal Vidhya Mandir SR SEC School, Mandawar (Dausa)</h4>
287
+ </div>
288
+ <p class="text-gray-600">Grade: First Division</p>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Projects Section -->
295
+ <section id="projects" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
296
+ <div class="max-w-6xl mx-auto">
297
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Projects</h2>
298
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Below are the Data Analytics projects on SQL, Python, Power BI, ML & DL. I love to solve business problems & uncover hidden data stories.</p>
299
+
300
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
301
+ <!-- Bank Loan Analysis -->
302
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in">
303
+ <div class="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
304
+ <i class="fas fa-chart-pie text-white text-6xl"></i>
305
+ </div>
306
+ <div class="p-6">
307
+ <h3 class="text-xl font-semibold mb-2">Bank Loan Analysis</h3>
308
+ <p class="text-gray-600 mb-4">Power BI Dashboard (Finance Domain)</p>
309
+ <p class="text-gray-600 text-sm mb-4">Analyzes loan trends, regional patterns, and distinguishes between good and bad loans for data-driven decision-making.</p>
310
+ <a href="https://github.com/Manish7272/Bank-Loan-Analysis-Dashboard--Finance-Domain" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
311
+ View Project <i class="fas fa-external-link-alt ml-2"></i>
312
+ </a>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- McDonald's Food Analysis -->
317
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in delay-100">
318
+ <div class="h-48 bg-gradient-to-r from-emerald-500 to-teal-600 flex items-center justify-center">
319
+ <i class="fas fa-hamburger text-white text-6xl"></i>
320
+ </div>
321
+ <div class="p-6">
322
+ <h3 class="text-xl font-semibold mb-2">McDonald's Food Analysis</h3>
323
+ <p class="text-gray-600 mb-4">Power BI Dashboard</p>
324
+ <p class="text-gray-600 text-sm mb-4">Analyzes nutrition value of McDonald's food items to help customers plan meals according to their health requirements.</p>
325
+ <a href="https://github.com/Manish7272/McDonald_s-Food-Analysis-Dashboard" target="_blank" class="text-emerald-600 hover:text-emerald-800 font-medium inline-flex items-center">
326
+ View Project <i class="fas fa-external-link-alt ml-2"></i>
327
+ </a>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Supply Chain Optimization -->
332
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in delay-200">
333
+ <div class="h-48 bg-gradient-to-r from-amber-500 to-orange-600 flex items-center justify-center">
334
+ <i class="fas fa-truck text-white text-6xl"></i>
335
+ </div>
336
+ <div class="p-6">
337
+ <h3 class="text-xl font-semibold mb-2">Supply Chain Optimization</h3>
338
+ <p class="text-gray-600 mb-4">Power BI Dashboard (FMCG Domain)</p>
339
+ <p class="text-gray-600 text-sm mb-4">Created a user-friendly PowerBI Dashboard to provide real-time insights for AtliQ Mart's supply chain issues.</p>
340
+ <a href="https://github.com/Manish7272/Supply-Chain-Optimization-Project-Manager" target="_blank" class="text-amber-600 hover:text-amber-800 font-medium inline-flex items-center">
341
+ View Project <i class="fas fa-external-link-alt ml-2"></i>
342
+ </a>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="text-center mt-12 animate-fade-in delay-300">
348
+ <a href="https://github.com/Manish7272" target="_blank" class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50">
349
+ <i class="fab fa-github mr-2 text-xl"></i> View More Projects on GitHub
350
+ </a>
351
+ </div>
352
+ </div>
353
+ </section>
354
+
355
+ <!-- Contact Section -->
356
+ <section id="contact" class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
357
+ <div class="max-w-6xl mx-auto">
358
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Contact Me</h2>
359
+
360
+ <div class="flex flex-col md:flex-row gap-8">
361
+ <div class="md:w-1/2 animate-fade-in">
362
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
363
+ <h3 class="text-xl font-semibold mb-6">Get in Touch</h3>
364
+
365
+ <div class="space-y-6">
366
+ <div class="flex items-start">
367
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
368
+ <i class="fas fa-map-marker-alt text-indigo-600"></i>
369
+ </div>
370
+ <div>
371
+ <h4 class="font-medium">Address</h4>
372
+ <p class="text-gray-600">Jaipur, India</p>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="flex items-start">
377
+ <div class="bg-emerald-100 p-3 rounded-full mr-4">
378
+ <i class="fas fa-envelope text-emerald-600"></i>
379
+ </div>
380
+ <div>
381
+ <h4 class="font-medium">Email</h4>
382
+ <p class="text-gray-600">[email protected]</p>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="flex items-start">
387
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
388
+ <i class="fab fa-github text-blue-600"></i>
389
+ </div>
390
+ <div>
391
+ <h4 class="font-medium">GitHub</h4>
392
+ <a href="https://github.com/Manish7272" target="_blank" class="text-gray-600 hover:text-blue-600">github.com/Manish7272</a>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="mt-8">
398
+ <h4 class="font-medium mb-4">Connect with me</h4>
399
+ <div class="flex space-x-4">
400
+ <a href="#" class="bg-indigo-100 text-indigo-600 p-3 rounded-full hover:bg-indigo-200 transition">
401
+ <i class="fab fa-linkedin-in"></i>
402
+ </a>
403
+ <a href="#" class="bg-blue-100 text-blue-600 p-3 rounded-full hover:bg-blue-200 transition">
404
+ <i class="fab fa-twitter"></i>
405
+ </a>
406
+ <a href="#" class="bg-pink-100 text-pink-600 p-3 rounded-full hover:bg-pink-200 transition">
407
+ <i class="fab fa-instagram"></i>
408
+ </a>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="md:w-1/2 animate-fade-in delay-200">
415
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
416
+ <h3 class="text-xl font-semibold mb-6">Send me a message</h3>
417
+ <form>
418
+ <div class="mb-4">
419
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
420
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
421
+ </div>
422
+ <div class="mb-4">
423
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
424
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
425
+ </div>
426
+ <div class="mb-4">
427
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
428
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
429
+ </div>
430
+ <div class="mb-6">
431
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
432
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
433
+ </div>
434
+ <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
435
+ Send Message
436
+ </button>
437
+ </form>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </section>
443
+
444
+ <!-- Footer -->
445
+ <footer class="bg-gray-900 text-white py-8 px-4 sm:px-6 lg:px-8">
446
+ <div class="max-w-6xl mx-auto">
447
+ <div class="flex flex-col md:flex-row justify-between items-center">
448
+ <div class="mb-6 md:mb-0">
449
+ <h3 class="text-2xl font-bold gradient-text">Manish Gupta</h3>
450
+ <p class="text-gray-400 mt-2">Data Science & Analytics Professional</p>
451
+ </div>
452
+ <div class="flex space-x-6">
453
+ <a href="#home" class="text-gray-400 hover:text-white transition">Home</a>
454
+ <a href="#about" class="text-gray-400 hover:text-white transition">About</a>
455
+ <a href="#projects" class="text-gray-400 hover:text-white transition">Projects</a>
456
+ <a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a>
457
+ </div>
458
+ </div>
459
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
460
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2024 Manish Gupta. All rights reserved.</p>
461
+ <div class="flex space-x-4">
462
+ <a href="#" class="text-gray-400 hover:text-white transition">
463
+ <i class="fab fa-linkedin-in"></i>
464
+ </a>
465
+ <a href="#" class="text-gray-400 hover:text-white transition">
466
+ <i class="fab fa-github"></i>
467
+ </a>
468
+ <a href="#" class="text-gray-400 hover:text-white transition">
469
+ <i class="fab fa-twitter"></i>
470
+ </a>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </footer>
475
+
476
+ <!-- Back to Top Button -->
477
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-indigo-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
478
+ <i class="fas fa-arrow-up"></i>
479
+ </button>
480
+
481
+ <script>
482
+ // Mobile menu toggle
483
+ document.getElementById('menu-toggle').addEventListener('click', function() {
484
+ const menu = document.getElementById('mobile-menu');
485
+ menu.classList.toggle('hidden');
486
+ });
487
+
488
+ // Smooth scrolling for navigation links
489
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
490
+ anchor.addEventListener('click', function(e) {
491
+ e.preventDefault();
492
+
493
+ const targetId = this.getAttribute('href');
494
+ const targetElement = document.querySelector(targetId);
495
+
496
+ if (targetElement) {
497
+ window.scrollTo({
498
+ top: targetElement.offsetTop - 80,
499
+ behavior: 'smooth'
500
+ });
501
+
502
+ // Close mobile menu if open
503
+ const mobileMenu = document.getElementById('mobile-menu');
504
+ if (!mobileMenu.classList.contains('hidden')) {
505
+ mobileMenu.classList.add('hidden');
506
+ }
507
+ }
508
+ });
509
+ });
510
+
511
+ // Back to top button
512
+ const backToTopButton = document.getElementById('back-to-top');
513
+
514
+ window.addEventListener('scroll', function() {
515
+ if (window.pageYOffset > 300) {
516
+ backToTopButton.classList.remove('opacity-0', 'invisible');
517
+ backToTopButton.classList.add('opacity-100', 'visible');
518
+ } else {
519
+ backToTopButton.classList.remove('opacity-100', 'visible');
520
+ backToTopButton.classList.add('opacity-0', 'invisible');
521
+ }
522
+ });
523
+
524
+ backToTopButton.addEventListener('click', function() {
525
+ window.scrollTo({
526
+ top: 0,
527
+ behavior: 'smooth'
528
+ });
529
+ });
530
+
531
+ // Add animation class when elements come into view
532
+ const animateOnScroll = function() {
533
+ const elements = document.querySelectorAll('.animate-fade-in');
534
+
535
+ elements.forEach(element => {
536
+ const elementPosition = element.getBoundingClientRect().top;
537
+ const windowHeight = window.innerHeight;
538
+
539
+ if (elementPosition < windowHeight - 100) {
540
+ element.classList.add('animate-fade-in');
541
+ }
542
+ });
543
+ };
544
+
545
+ // Run once on page load and then on scroll
546
+ animateOnScroll();
547
+ window.addEventListener('scroll', animateOnScroll);
548
+ </script>
549
+ <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=manish72/portfolio-day-mode" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
550
+ </html>