Hugging Face's logo

Spaces:
pratik51
/
data-insights-pro
Running

App Files Community
pratik51 commited on
Commit
2f9a8ca
·
verified ·
1 Parent(s): e59caaa

create a portfolio for a data science major aiming for data analyst with skills containing svg or jpg icons

Browse files

Tech Stack
Framework: Next.js 15 + TypeScript
Styling: Tailwind CSS v4
Deployment: Vercel
Icons: Lucide
Animations: Framer Motion
Features
Clean & Modern Design
SEO Optimized
PWA Ready
Dynamic OG Images: For rich social previews
Component Registry: Easily showcase and document reusable components

Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +463 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Data Insights Pro
3
- emoji: 🌍
4
- colorFrom: red
5
  colorTo: pink
 
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: Data Insights Pro 📊
3
+ colorFrom: yellow
 
4
  colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,464 @@
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>Data Analyst Portfolio | Data Insights Pro</title>
7
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📊</text></svg>">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#1e40af',
17
+ secondary: '#3b82f6',
18
+ accent: '#60a5fa',
19
+ dark: '#0f172a',
20
+ light: '#f8fafc'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+ body {
29
+ font-family: 'Inter', sans-serif;
30
+ background-color: #f8fafc;
31
+ }
32
+ .hero-bg {
33
+ background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
34
+ }
35
+ .skill-card {
36
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
37
+ }
38
+ .skill-card:hover {
39
+ transform: translateY(-5px);
40
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
41
+ }
42
+ .project-card {
43
+ transition: all 0.3s ease;
44
+ }
45
+ .project-card:hover {
46
+ transform: scale(1.02);
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-light text-dark">
51
+ <!-- Header -->
52
+ <header class="fixed w-full bg-white shadow-md z-50">
53
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
54
+ <div class="flex items-center space-x-2">
55
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
56
+ <span class="text-white font-bold text-xl">DS</span>
57
+ </div>
58
+ <h1 class="text-2xl font-bold text-primary">Data Insights Pro</h1>
59
+ </div>
60
+ <nav class="hidden md:flex space-x-8">
61
+ <a href="#about" class="font-medium hover:text-secondary transition-colors">About</a>
62
+ <a href="#skills" class="font-medium hover:text-secondary transition-colors">Skills</a>
63
+ <a href="#projects" class="font-medium hover:text-secondary transition-colors">Projects</a>
64
+ <a href="#experience" class="font-medium hover:text-secondary transition-colors">Experience</a>
65
+ <a href="#contact" class="font-medium hover:text-secondary transition-colors">Contact</a>
66
+ </nav>
67
+ <button id="mobile-menu-button" class="md:hidden text-primary">
68
+ <i data-feather="menu"></i>
69
+ </button>
70
+ </div>
71
+ <!-- Mobile Menu -->
72
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
73
+ <div class="flex flex-col space-y-3">
74
+ <a href="#about" class="font-medium hover:text-secondary transition-colors">About</a>
75
+ <a href="#skills" class="font-medium hover:text-secondary transition-colors">Skills</a>
76
+ <a href="#projects" class="font-medium hover:text-secondary transition-colors">Projects</a>
77
+ <a href="#experience" class="font-medium hover:text-secondary transition-colors">Experience</a>
78
+ <a href="#contact" class="font-medium hover:text-secondary transition-colors">Contact</a>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Hero Section -->
84
+ <section class="hero-bg text-white pt-32 pb-20">
85
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
86
+ <div class="md:w-1/2 mb-10 md:mb-0">
87
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Data Analyst Portfolio</h1>
88
+ <p class="text-xl mb-6">Transforming complex data into actionable insights</p>
89
+ <div class="flex space-x-4">
90
+ <a href="#projects" class="bg-white text-primary px-6 py-3 rounded-lg font-bold hover:bg-accent transition-colors">View Projects</a>
91
+ <a href="#contact" class="border-2 border-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:text-primary transition-colors">Contact Me</a>
92
+ </div>
93
+ </div>
94
+ <div class="md:w-1/2 flex justify-center">
95
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
96
+ <div class="w-56 h-56 md:w-72 md:h-72 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
97
+ <i data-feather="bar-chart-2" class="w-32 h-32 md:w-40 md:h-40"></i>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </section>
103
+
104
+ <!-- About Section -->
105
+ <section id="about" class="py-20 bg-white">
106
+ <div class="container mx-auto px-4">
107
+ <h2 class="text-3xl font-bold mb-12 text-center">About Me</h2>
108
+ <div class="flex flex-col md:flex-row items-center">
109
+ <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
110
+ <div class="w-48 h-48 rounded-full bg-gray-200 border-4 border-secondary flex items-center justify-center">
111
+ <i data-feather="user" class="w-24 h-24 text-gray-500"></i>
112
+ </div>
113
+ </div>
114
+ <div class="md:w-2/3 md:pl-12">
115
+ <h3 class="text-2xl font-semibold mb-4">Data Science Major</h3>
116
+ <p class="text-lg mb-6">I'm a passionate data analyst with expertise in statistical modeling, data visualization, and business intelligence. With a strong foundation in mathematics and programming, I transform raw data into meaningful insights that drive strategic decision-making.</p>
117
+ <div class="grid grid-cols-2 gap-4">
118
+ <div class="flex items-center">
119
+ <i data-feather="map-pin" class="w-5 h-5 mr-2 text-secondary"></i>
120
+ <span>San Francisco, CA</span>
121
+ </div>
122
+ <div class="flex items-center">
123
+ <i data-feather="briefcase" class="w-5 h-5 mr-2 text-secondary"></i>
124
+ <span>Looking for Data Analyst Position</span>
125
+ </div>
126
+ <div class="flex items-center">
127
+ <i data-feather="mail" class="w-5 h-5 mr-2 text-secondary"></i>
128
+ <span>analyst@example.com</span>
129
+ </div>
130
+ <div class="flex items-center">
131
+ <i data-feather="calendar" class="w-5 h-5 mr-2 text-secondary"></i>
132
+ <span>2+ Years Experience</span>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- Skills Section -->
141
+ <section id="skills" class="py-20 bg-gray-50">
142
+ <div class="container mx-auto px-4">
143
+ <h2 class="text-3xl font-bold mb-12 text-center">Technical Skills</h2>
144
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
145
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center">
146
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
147
+ <i data-feather="code" class="w-8 h-8 text-secondary"></i>
148
+ </div>
149
+ <h3 class="font-bold text-lg mb-2">Python</h3>
150
+ <p class="text-center text-gray-600">Pandas, NumPy, Scikit-learn, Matplotlib</p>
151
+ </div>
152
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center">
153
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
154
+ <i data-feather="database" class="w-8 h-8 text-secondary"></i>
155
+ </div>
156
+ <h3 class="font-bold text-lg mb-2">SQL</h3>
157
+ <p class="text-center text-gray-600">PostgreSQL, MySQL, Query Optimization</p>
158
+ </div>
159
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center">
160
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
161
+ <i data-feather="pie-chart" class="w-8 h-8 text-secondary"></i>
162
+ </div>
163
+ <h3 class="font-bold text-lg mb-2">Tableau</h3>
164
+ <p class="text-center text-gray-600">Data Visualization & Dashboard Creation</p>
165
+ </div>
166
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center">
167
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
168
+ <i data-feather="bar-chart" class="w-8 h-8 text-secondary"></i>
169
+ </div>
170
+ <h3 class="font-bold text-lg mb-2">Power BI</h3>
171
+ <p class="text-center text-gray-600">Business Intelligence & Analytics</p>
172
+ </div>
173
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center">
174
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
175
+ <i data-feather="trending-up" class="w-8 h-8 text-secondary"></i>
176
+ </div>
177
+ <h3 class="font-bold text-lg mb-2">Statistics</h3>
178
+ <p class="text-center text-gray-600">Regression, Hypothesis Testing, Probability</p>
179
+ </div>
180
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center">
181
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
182
+ <i data-feather="box" class="w-8 h-8 text-secondary"></i>
183
+ </div>
184
+ <h3 class="font-bold text-lg mb-2">Machine Learning</h3>
185
+ <p class="text-center text-gray-600">Classification, Clustering, Forecasting</p>
186
+ </div>
187
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center">
188
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
189
+ <i data-feather="file-text" class="w-8 h-8 text-secondary"></i>
190
+ </div>
191
+ <h3 class="font-bold text-lg mb-2">R</h3>
192
+ <p class="text-center text-gray-600">Data Analysis, Statistical Modeling</p>
193
+ </div>
194
+ <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center">
195
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
196
+ <i data-feather="cloud" class="w-8 h-8 text-secondary"></i>
197
+ </div>
198
+ <h3 class="font-bold text-lg mb-2">Big Data</h3>
199
+ <p class="text-center text-gray-600">Hadoop, Spark, Data Warehousing</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </section>
204
+
205
+ <!-- Projects Section -->
206
+ <section id="projects" class="py-20 bg-white">
207
+ <div class="container mx-auto px-4">
208
+ <h2 class="text-3xl font-bold mb-12 text-center">Featured Projects</h2>
209
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
210
+ <div class="project-card bg-gray-50 rounded-xl shadow-md overflow-hidden">
211
+ <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
212
+ <i data-feather="trending-up" class="w-16 h-16 text-white"></i>
213
+ </div>
214
+ <div class="p-6">
215
+ <h3 class="font-bold text-xl mb-2">Customer Churn Prediction</h3>
216
+ <p class="text-gray-600 mb-4">Built a machine learning model to predict customer churn with 87% accuracy using Python and scikit-learn.</p>
217
+ <div class="flex flex-wrap gap-2 mb-4">
218
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Python</span>
219
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Machine Learning</span>
220
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Classification</span>
221
+ </div>
222
+ <div class="flex space-x-4">
223
+ <a href="#" class="text-secondary font-medium flex items-center">
224
+ <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View Project
225
+ </a>
226
+ <a href="#" class="text-gray-600 font-medium flex items-center">
227
+ <i data-feather="github" class="w-4 h-4 mr-1"></i> GitHub
228
+ </a>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ <div class="project-card bg-gray-50 rounded-xl shadow-md overflow-hidden">
233
+ <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
234
+ <i data-feather="bar-chart-2" class="w-16 h-16 text-white"></i>
235
+ </div>
236
+ <div class="p-6">
237
+ <h3 class="font-bold text-xl mb-2">Sales Dashboard</h3>
238
+ <p class="text-gray-600 mb-4">Designed an interactive Tableau dashboard to visualize sales trends and KPIs for executive decision-making.</p>
239
+ <div class="flex flex-wrap gap-2 mb-4">
240
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Tableau</span>
241
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Data Visualization</span>
242
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Business Intelligence</span>
243
+ </div>
244
+ <div class="flex space-x-4">
245
+ <a href="#" class="text-secondary font-medium flex items-center">
246
+ <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View Dashboard
247
+ </a>
248
+ <a href="#" class="text-gray-600 font-medium flex items-center">
249
+ <i data-feather="github" class="w-4 h-4 mr-1"></i> GitHub
250
+ </a>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ <div class="project-card bg-gray-50 rounded-xl shadow-md overflow-hidden">
255
+ <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
256
+ <i data-feather="database" class="w-16 h-16 text-white"></i>
257
+ </div>
258
+ <div class="p-6">
259
+ <h3 class="font-bold text-xl mb-2">Web Analytics Pipeline</h3>
260
+ <p class="text-gray-600 mb-4">Developed an automated ETL pipeline to process and analyze web traffic data using Apache Spark.</p>
261
+ <div class="flex flex-wrap gap-2 mb-4">
262
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Apache Spark</span>
263
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">ETL</span>
264
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Big Data</span>
265
+ </div>
266
+ <div class="flex space-x-4">
267
+ <a href="#" class="text-secondary font-medium flex items-center">
268
+ <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View Project
269
+ </a>
270
+ <a href="#" class="text-gray-600 font-medium flex items-center">
271
+ <i data-feather="github" class="w-4 h-4 mr-1"></i> GitHub
272
+ </a>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </section>
279
+
280
+ <!-- Experience Section -->
281
+ <section id="experience" class="py-20 bg-gray-50">
282
+ <div class="container mx-auto px-4">
283
+ <h2 class="text-3xl font-bold mb-12 text-center">Professional Experience</h2>
284
+ <div class="max-w-3xl mx-auto">
285
+ <div class="relative pl-8 pb-12 border-l-2 border-secondary">
286
+ <div class="mb-10 relative">
287
+ <div class="absolute -left-10 w-6 h-6 rounded-full bg-secondary border-4 border-white"></div>
288
+ <div class="bg-white p-6 rounded-lg shadow-md">
289
+ <h3 class="font-bold text-xl mb-1">Data Analyst Intern</h3>
290
+ <div class="flex items-center text-secondary mb-3">
291
+ <i data-feather="briefcase" class="w-4 h-4 mr-2"></i>
292
+ <span>Insights Analytics Inc.</span>
293
+ <span class="mx-2">•</span>
294
+ <span>Jan 2022 - Present</span>
295
+ </div>
296
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
297
+ <li>Conducted statistical analysis on customer behavior data to identify market trends</li>
298
+ <li>Created interactive dashboards reducing reporting time by 40%</li>
299
+ <li>Improved data processing pipeline efficiency by optimizing SQL queries</li>
300
+ </ul>
301
+ </div>
302
+ </div>
303
+ <div class="mb-10 relative">
304
+ <div class="absolute -left-10 w-6 h-6 rounded-full bg-secondary border-4 border-white"></div>
305
+ <div class="bg-white p-6 rounded-lg shadow-md">
306
+ <h3 class="font-bold text-xl mb-1">Junior Data Scientist</h3>
307
+ <div class="flex items-center text-secondary mb-3">
308
+ <i data-feather="briefcase" class="w-4 h-4 mr-2"></i>
309
+ <span>DataForge Solutions</span>
310
+ <span class="mx-2">•</span>
311
+ <span>Jun 2021 - Dec 2021</span>
312
+ </div>
313
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
314
+ <li>Developed predictive models for inventory management with 92% accuracy</li>
315
+ <li>Collaborated with cross-functional teams to deliver data-driven insights</li>
316
+ <li>Automated data cleaning processes saving 15 hours weekly</li>
317
+ </ul>
318
+ </div>
319
+ </div>
320
+ <div class="relative">
321
+ <div class="absolute -left-10 w-6 h-6 rounded-full bg-secondary border-4 border-white"></div>
322
+ <div class="bg-white p-6 rounded-lg shadow-md">
323
+ <h3 class="font-bold text-xl mb-1">Research Assistant</h3>
324
+ <div class="flex items-center text-secondary mb-3">
325
+ <i data-feather="briefcase" class="w-4 h-4 mr-2"></i>
326
+ <span>University Data Lab</span>
327
+ <span class="mx-2">•</span>
328
+ <span>Sep 2020 - May 2021</span>
329
+ </div>
330
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
331
+ <li>Analyzed large datasets for academic research projects</li>
332
+ <li>Visualized complex research findings for publication</li>
333
+ <li>Mentored undergraduate students in data analysis techniques</li>
334
+ </ul>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </section>
341
+
342
+ <!-- Contact Section -->
343
+ <section id="contact" class="py-20 bg-white">
344
+ <div class="container mx-auto px-4">
345
+ <h2 class="text-3xl font-bold mb-12 text-center">Get In Touch</h2>
346
+ <div class="max-w-3xl mx-auto bg-gray-50 rounded-xl shadow-md p-8">
347
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
348
+ <div>
349
+ <h3 class="font-bold text-xl mb-4">Contact Information</h3>
350
+ <div class="space-y-4">
351
+ <div class="flex items-center">
352
+ <i data-feather="mail" class="w-6 h-6 mr-4 text-secondary"></i>
353
+ <span>analyst@example.com</span>
354
+ </div>
355
+ <div class="flex items-center">
356
+ <i data-feather="linkedin" class="w-6 h-6 mr-4 text-secondary"></i>
357
+ <span>linkedin.com/in/data-analyst</span>
358
+ </div>
359
+ <div class="flex items-center">
360
+ <i data-feather="github" class="w-6 h-6 mr-4 text-secondary"></i>
361
+ <span>github.com/data-analyst</span>
362
+ </div>
363
+ <div class="flex items-center">
364
+ <i data-feather="phone" class="w-6 h-6 mr-4 text-secondary"></i>
365
+ <span>+1 (555) 123-4567</span>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ <div>
370
+ <h3 class="font-bold text-xl mb-4">Send a Message</h3>
371
+ <form class="space-y-4">
372
+ <div>
373
+ <input type="text" placeholder="Your Name" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary">
374
+ </div>
375
+ <div>
376
+ <input type="email" placeholder="Your Email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary">
377
+ </div>
378
+ <div>
379
+ <textarea placeholder="Your Message" rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary"></textarea>
380
+ </div>
381
+ <button type="submit" class="w-full bg-secondary text-white py-3 rounded-lg font-bold hover:bg-primary transition-colors">Send Message</button>
382
+ </form>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </section>
388
+
389
+ <!-- Footer -->
390
+ <footer class="py-10 bg-dark text-white">
391
+ <div class="container mx-auto px-4 text-center">
392
+ <div class="flex justify-center space-x-6 mb-6">
393
+ <a href="#" class="hover:text-secondary transition-colors">
394
+ <i data-feather="linkedin"></i>
395
+ </a>
396
+ <a href="#" class="hover:text-secondary transition-colors">
397
+ <i data-feather="github"></i>
398
+ </a>
399
+ <a href="#" class="hover:text-secondary transition-colors">
400
+ <i data-feather="twitter"></i>
401
+ </a>
402
+ <a href="#" class="hover:text-secondary transition-colors">
403
+ <i data-feather="mail"></i>
404
+ </a>
405
+ </div>
406
+ <p class="mb-2">© 2023 Data Insights Pro. All rights reserved.</p>
407
+ <p class="text-gray-400">Transforming data into actionable insights</p>
408
+ </div>
409
+ </footer>
410
+
411
+ <script>
412
+ // Mobile menu toggle
413
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
414
+ const menu = document.getElementById('mobile-menu');
415
+ menu.classList.toggle('hidden');
416
+ });
417
+
418
+ // Smooth scrolling
419
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
420
+ anchor.addEventListener('click', function (e) {
421
+ e.preventDefault();
422
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
423
+ behavior: 'smooth'
424
+ });
425
+ // Close mobile menu if open
426
+ document.getElementById('mobile-menu').classList.add('hidden');
427
+ });
428
+ });
429
+
430
+ // Feather icons initialization
431
+ feather.replace();
432
+
433
+ // Simple animation for skill cards
434
+ const skillCards = document.querySelectorAll('.skill-card');
435
+ skillCards.forEach((card, index) => {
436
+ setTimeout(() => {
437
+ card.style.opacity = '0';
438
+ card.style.transform = 'translateY(20px)';
439
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
440
+
441
+ setTimeout(() => {
442
+ card.style.opacity = '1';
443
+ card.style.transform = 'translateY(0)';
444
+ }, 100);
445
+ }, index * 100);
446
+ });
447
+
448
+ // Project card animations
449
+ const projectCards = document.querySelectorAll('.project-card');
450
+ projectCards.forEach((card, index) => {
451
+ setTimeout(() => {
452
+ card.style.opacity = '0';
453
+ card.style.transform = 'translateY(20px)';
454
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
455
+
456
+ setTimeout(() => {
457
+ card.style.opacity = '1';
458
+ card.style.transform = 'translateY(0)';
459
+ }, 100);
460
+ }, index * 150);
461
+ });
462
+ </script>
463
+ </body>
464
  </html>