Imbatmann commited on
Commit
208b2e3
·
verified ·
1 Parent(s): 3f44410

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +389 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Cv
3
- emoji: 📊
4
- colorFrom: pink
5
- colorTo: indigo
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: my-cv
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
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,389 @@
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>Hari Narayan Sah | Data Scientist</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ }
20
+
21
+ .skill-bar {
22
+ height: 10px;
23
+ border-radius: 5px;
24
+ background-color: #e2e8f0;
25
+ overflow: hidden;
26
+ }
27
+
28
+ .skill-progress {
29
+ height: 100%;
30
+ border-radius: 5px;
31
+ background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
32
+ transition: width 1s ease-in-out;
33
+ }
34
+
35
+ .project-card:hover {
36
+ transform: translateY(-10px);
37
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
38
+ }
39
+
40
+ .timeline-item:not(:last-child)::after {
41
+ content: '';
42
+ position: absolute;
43
+ left: 20px;
44
+ top: 30px;
45
+ height: calc(100% - 30px);
46
+ width: 2px;
47
+ background-color: #667eea;
48
+ }
49
+
50
+ .nav-link {
51
+ position: relative;
52
+ }
53
+
54
+ .nav-link::after {
55
+ content: '';
56
+ position: absolute;
57
+ width: 0;
58
+ height: 2px;
59
+ bottom: 0;
60
+ left: 0;
61
+ background-color: #667eea;
62
+ transition: width 0.3s ease;
63
+ }
64
+
65
+ .nav-link:hover::after {
66
+ width: 100%;
67
+ }
68
+
69
+ .active::after {
70
+ width: 100%;
71
+ }
72
+
73
+ .profile-video {
74
+ object-fit: cover;
75
+ width: 100%;
76
+ height: 100%;
77
+ }
78
+
79
+ .video-container {
80
+ position: relative;
81
+ overflow: hidden;
82
+ border-radius: 50%;
83
+ width: 100%;
84
+ height: 100%;
85
+ border: 4px solid white;
86
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-gray-50 text-gray-800">
91
+ <!-- Navigation -->
92
+ <nav class="fixed w-full bg-white shadow-md z-50">
93
+ <div class="max-w-6xl mx-auto px-4">
94
+ <div class="flex justify-between items-center py-4">
95
+ <div class="text-2xl font-bold text-indigo-600">Hari Narayan Sah</div>
96
+ <div class="hidden md:flex space-x-8">
97
+ <a href="#home" class="nav-link active">Home</a>
98
+ <a href="#about" class="nav-link">About</a>
99
+ <a href="#skills" class="nav-link">Skills</a>
100
+ <a href="#experience" class="nav-link">Experience</a>
101
+ <a href="#projects" class="nav-link">Projects</a>
102
+ <a href="#contact" class="nav-link">Contact</a>
103
+ </div>
104
+ <div class="md:hidden">
105
+ <button id="menu-btn" class="text-indigo-600 focus:outline-none">
106
+ <i class="fas fa-bars text-2xl"></i>
107
+ </button>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <!-- Mobile menu -->
112
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg">
113
+ <a href="#home" class="block py-2 nav-link active">Home</a>
114
+ <a href="#about" class="block py-2 nav-link">About</a>
115
+ <a href="#skills" class="block py-2 nav-link">Skills</a>
116
+ <a href="#experience" class="block py-2 nav-link">Experience</a>
117
+ <a href="#projects" class="block py-2 nav-link">Projects</a>
118
+ <a href="#contact" class="block py-2 nav-link">Contact</a>
119
+ </div>
120
+ </nav>
121
+
122
+ <!-- Hero Section -->
123
+ <section id="home" class="gradient-bg text-white pt-32 pb-20">
124
+ <div class="max-w-6xl mx-auto px-4">
125
+ <div class="flex flex-col md:flex-row items-center">
126
+ <div class="md:w-1/2 mb-10 md:mb-0">
127
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-yellow-300">Hari Narayan Sah</span></h1>
128
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6">Data Science Enthusiast</h2>
129
+ <p class="text-lg mb-8">Passionate about transforming data into actionable insights using machine learning and deep learning techniques.</p>
130
+ <div class="flex space-x-4">
131
+ <a href="#contact" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300">Contact Me</a>
132
+ <a href="#projects" class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition duration-300">My Projects</a>
133
+ </div>
134
+ </div>
135
+ <div class="md:w-1/2 flex justify-center">
136
+ <div class="relative">
137
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden">
138
+ <!-- Video Profile Picture -->
139
+ <div class="video-container">
140
+ <video class="profile-video" autoplay loop muted playsinline>
141
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-man-holding-neon-light-1230-large.mp4" type="video/mp4">
142
+ Your browser does not support the video tag.
143
+ </video>
144
+ </div>
145
+ </div>
146
+ <div class="absolute -bottom-5 -right-5 bg-white text-indigo-600 px-4 py-2 rounded-full shadow-lg font-semibold">
147
+ <span class="text-yellow-500">★</span> Data Scientist
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- About Section -->
156
+ <section id="about" class="py-20 bg-white">
157
+ <div class="max-w-6xl mx-auto px-4">
158
+ <h2 class="text-3xl font-bold text-center mb-12 text-indigo-600">About Me</h2>
159
+ <div class="flex flex-col md:flex-row">
160
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
161
+ <h3 class="text-2xl font-semibold mb-4">Professional Summary</h3>
162
+ <p class="text-gray-600 mb-6">
163
+ Highly motivated and self-driven data science professional with a strong foundation in Machine Learning, Deep Learning, Python, SQL, and Power BI. Eager to leverage my technical skills and passion for data-driven insights to excel as a top-notch data scientist.
164
+ </p>
165
+ <p class="text-gray-600 mb-6">
166
+ With a keen focus on continuous learning and professional growth, I am committed to delivering innovative solutions that drive business success and contribute to the advancement of the data science field.
167
+ </p>
168
+ <div class="bg-indigo-50 p-6 rounded-lg">
169
+ <h4 class="text-lg font-semibold mb-3 text-indigo-600">Languages</h4>
170
+ <div class="flex flex-wrap gap-2">
171
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Maithli (Native)</span>
172
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Nepali (Fluent)</span>
173
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">English (Beginner)</span>
174
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Hindi (Fluent)</span>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ <div class="md:w-1/2">
179
+ <h3 class="text-2xl font-semibold mb-4">Education</h3>
180
+ <div class="space-y-6">
181
+ <div class="relative pl-8 timeline-item">
182
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-500 border-4 border-indigo-200"></div>
183
+ <div class="bg-gray-50 p-4 rounded-lg shadow-sm">
184
+ <h4 class="font-semibold text-indigo-600">Data Science with Python Certification</h4>
185
+ <p class="text-gray-500">Mindrisers Institute of Technology, Kathmandu | 09/2024 - 01/2025</p>
186
+ </div>
187
+ </div>
188
+ <div class="relative pl-8 timeline-item">
189
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-500 border-4 border-indigo-200"></div>
190
+ <div class="bg-gray-50 p-4 rounded-lg shadow-sm">
191
+ <h4 class="font-semibold text-indigo-600">Diploma in Computer Engineering</h4>
192
+ <p class="text-gray-500">Adarsha Secondary School, Biratnagar | 2020 - 2024</p>
193
+ </div>
194
+ </div>
195
+ <div class="relative pl-8 timeline-item">
196
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-500 border-4 border-indigo-200"></div>
197
+ <div class="bg-gray-50 p-4 rounded-lg shadow-sm">
198
+ <h4 class="font-semibold text-indigo-600">Diploma in Graphic Designing</h4>
199
+ <p class="text-gray-500">New BIIT Institute, Biratnagar | 01/2023 - 04/2023</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <!-- Skills Section -->
209
+ <section id="skills" class="py-20 bg-gray-50">
210
+ <div class="max-w-6xl mx-auto px-4">
211
+ <h2 class="text-3xl font-bold text-center mb-12 text-indigo-600">My Skills</h2>
212
+
213
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
214
+ <!-- Technical Skills -->
215
+ <div class="bg-white p-6 rounded-lg shadow-sm">
216
+ <h3 class="text-xl font-semibold mb-4 text-indigo-600 flex items-center">
217
+ <i class="fas fa-code mr-2"></i> Technical Skills
218
+ </h3>
219
+ <div class="space-y-4">
220
+ <div>
221
+ <div class="flex justify-between mb-1">
222
+ <span class="font-medium">Python (Numpy, Pandas, Matplotlib)</span>
223
+ <span class="text-indigo-600">90%</span>
224
+ </div>
225
+ <div class="skill-bar">
226
+ <div class="skill-progress" style="width: 90%;"></div>
227
+ </div>
228
+ </div>
229
+ <div>
230
+ <div class="flex justify-between mb-1">
231
+ <span class="font-medium">Machine Learning (Scikit-Learn)</span>
232
+ <span class="text-indigo-600">85%</span>
233
+ </div>
234
+ <div class="skill-bar">
235
+ <div class="skill-progress" style="width: 85%;"></div>
236
+ </div>
237
+ </div>
238
+ <div>
239
+ <div class="flex justify-between mb-1">
240
+ <span class="font-medium">Deep Learning (TensorFlow, Keras)</span>
241
+ <span class="text-indigo-600">80%</span>
242
+ </div>
243
+ <div class="skill-bar">
244
+ <div class="skill-progress" style="width: 80%;"></div>
245
+ </div>
246
+ </div>
247
+ <div>
248
+ <div class="flex justify-between mb-1">
249
+ <span class="font-medium">SQL</span>
250
+ <span class="text-indigo-600">75%</span>
251
+ </div>
252
+ <div class="skill-bar">
253
+ <div class="skill-progress" style="width: 75%;"></div>
254
+ </div>
255
+ </div>
256
+ <div>
257
+ <div class="flex justify-between mb-1">
258
+ <span class="font-medium">C++</span>
259
+ <span class="text-indigo-600">70%</span>
260
+ </div>
261
+ <div class="skill-bar">
262
+ <div class="skill-progress" style="width: 70%;"></div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Tools & Platforms -->
269
+ <div class="bg-white p-6 rounded-lg shadow-sm">
270
+ <h3 class="text-xl font-semibold mb-4 text-indigo-600 flex items-center">
271
+ <i class="fas fa-tools mr-2"></i> Tools & Platforms
272
+ </h3>
273
+ <div class="grid grid-cols-2 gap-4">
274
+ <div class="flex items-center p-3 bg-indigo-50 rounded-lg">
275
+ <i class="fas fa-laptop-code text-indigo-600 mr-3"></i>
276
+ <span>VS Code</span>
277
+ </div>
278
+ <div class="flex items-center p-3 bg-indigo-50 rounded-lg">
279
+ <i class="fab fa-python text-indigo-600 mr-3"></i>
280
+ <span>Jupyter Notebook</span>
281
+ </div>
282
+ <div class="flex items-center p-3 bg-indigo-50 rounded-lg">
283
+ <i class="fab fa-google text-indigo-600 mr-3"></i>
284
+ <span>Google Colab</span>
285
+ </div>
286
+ <div class="flex items-center p-3 bg-indigo-50 rounded-lg">
287
+ <i class="fab fa-github text-indigo-600 mr-3"></i>
288
+ <span>Git & GitHub</span>
289
+ </div>
290
+ <div class="flex items-center p-3 bg-indigo-50 rounded-lg">
291
+ <i class="fab fa-linux text-indigo-600 mr-3"></i>
292
+ <span>Linux</span>
293
+ </div>
294
+ <div class="flex items-center p-3 bg-indigo-50 rounded-lg">
295
+ <i class="fas fa-palette text-indigo-600 mr-3"></i>
296
+ <span>Canva</span>
297
+ </div>
298
+ <div class="flex items-center p-3 bg-indigo-50 rounded-lg">
299
+ <i class="fas fa-file-word text-indigo-600 mr-3"></i>
300
+ <span>Office Package</span>
301
+ </div>
302
+ <div class="flex items-center p-3 bg-indigo-50 rounded-lg">
303
+ <i class="fas fa-chart-line text-indigo-600 mr-3"></i>
304
+ <span>Power BI</span>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </section>
311
+
312
+ <!-- Experience Section -->
313
+ <section id="experience" class="py-20 bg-white">
314
+ <div class="max-w-6xl mx-auto px-4">
315
+ <h2 class="text-3xl font-bold text-center mb-12 text-indigo-600">Work Experience</h2>
316
+
317
+ <div class="relative pl-8 max-w-3xl mx-auto">
318
+ <div class="absolute left-0 top-0 w-1 h-full bg-indigo-200"></div>
319
+
320
+ <div class="relative mb-10">
321
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-500 border-4 border-indigo-200 transform -translate-x-1/2 -translate-y-1/2"></div>
322
+ <div class="ml-8">
323
+ <div class="bg-indigo-50 p-6 rounded-lg shadow-sm">
324
+ <h3 class="text-xl font-semibold text-indigo-600">Volunteer - Birat Expo 2079</h3>
325
+ <p class="text-gray-500 mb-2">Biratnagar, Nepal | 15/12/2022 - 25/12/2022</p>
326
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
327
+ <li>Maintained computers and other systems during the event</li>
328
+ <li>Collaborated effectively with team members to ensure smooth operations</li>
329
+ <li>Assisted coordinators in event management tasks</li>
330
+ </ul>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="relative mb-10">
336
+ <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-500 border-4 border-indigo-200 transform -translate-x-1/2 -translate-y-1/2"></div>
337
+ <div class="ml-8">
338
+ <div class="bg-indigo-50 p-6 rounded-lg shadow-sm">
339
+ <h3 class="text-xl font-semibold text-indigo-600">Certifications & Achievements</h3>
340
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
341
+ <li>Data Science with Python Certification – Mindrisers Institute of Technology 2025</li>
342
+ <li>Diploma in Graphic Designing – New BIIT Institute 2023</li>
343
+ </ul>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- Projects Section -->
352
+ <section id="projects" class="py-20 bg-gray-50">
353
+ <div class="max-w-6xl mx-auto px-4">
354
+ <h2 class="text-3xl font-bold text-center mb-12 text-indigo-600">My Projects</h2>
355
+
356
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
357
+ <!-- Project 1 -->
358
+ <div class="bg-white rounded-lg overflow-hidden shadow-md project-card transition duration-300">
359
+ <div class="h-48 bg-indigo-100 flex items-center justify-center">
360
+ <i class="fas fa-home text-6xl text-indigo-500"></i>
361
+ </div>
362
+ <div class="p-6">
363
+ <h3 class="text-xl font-semibold mb-2 text-indigo-600">Real State House Price Predictor</h3>
364
+ <p class="text-gray-600 mb-4">Developed predictive models using Linear Regression to Predict House price.</p>
365
+ <div class="flex justify-between items-center">
366
+ <a href="#" class="text-indigo-500 hover:text-indigo-700 font-medium">View on GitHub <i class="fas fa-external-link-alt ml-1"></i></a>
367
+ <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs">Machine Learning</span>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Project 2 -->
373
+ <div class="bg-white rounded-lg overflow-hidden shadow-md project-card transition duration-300">
374
+ <div class="h-48 bg-indigo-100 flex items-center justify-center">
375
+ <i class="fas fa-image text-6xl text-indigo-500"></i>
376
+ </div>
377
+ <div class="p-6">
378
+ <h3 class="text-xl font-semibold mb-2 text-indigo-600">Image Classification using CNNs</h3>
379
+ <p class="text-gray-600 mb-4">Built a Convolutional Neural Network in TensorFlow to classify images with over 83% accuracy.</p>
380
+ <div class="flex justify-between items-center">
381
+ <a href="#" class="text-indigo-500 hover:text-indigo-700 font-medium">View on GitHub <i class="fas fa-external-link-alt ml-1"></i></a>
382
+ <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs">Deep Learning</span>
383
+ </div>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Project 3 -->
388
+ <div class="bg-white rounded-lg overflow-hidden shadow-md project-card
389
+ </html>