| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Hari Narayan Sah | Data Scientist</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .skill-bar { |
| height: 10px; |
| border-radius: 5px; |
| background-color: #e2e8f0; |
| overflow: hidden; |
| } |
| |
| .skill-progress { |
| height: 100%; |
| border-radius: 5px; |
| background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); |
| transition: width 1s ease-in-out; |
| } |
| |
| .project-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .timeline-item:not(:last-child)::after { |
| content: ''; |
| position: absolute; |
| left: 20px; |
| top: 30px; |
| height: calc(100% - 30px); |
| width: 2px; |
| background-color: #667eea; |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: 0; |
| left: 0; |
| background-color: #667eea; |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .active::after { |
| width: 100%; |
| } |
| |
| .profile-video { |
| object-fit: cover; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .video-container { |
| position: relative; |
| overflow: hidden; |
| border-radius: 50%; |
| width: 100%; |
| height: 100%; |
| border: 4px solid white; |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| |
| <nav class="fixed w-full bg-white shadow-md z-50"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="flex justify-between items-center py-4"> |
| <div class="text-2xl font-bold text-indigo-600">Hari Narayan Sah</div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link active">Home</a> |
| <a href="#about" class="nav-link">About</a> |
| <a href="#skills" class="nav-link">Skills</a> |
| <a href="#experience" class="nav-link">Experience</a> |
| <a href="#projects" class="nav-link">Projects</a> |
| <a href="#contact" class="nav-link">Contact</a> |
| </div> |
| <div class="md:hidden"> |
| <button id="menu-btn" class="text-indigo-600 focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg"> |
| <a href="#home" class="block py-2 nav-link active">Home</a> |
| <a href="#about" class="block py-2 nav-link">About</a> |
| <a href="#skills" class="block py-2 nav-link">Skills</a> |
| <a href="#experience" class="block py-2 nav-link">Experience</a> |
| <a href="#projects" class="block py-2 nav-link">Projects</a> |
| <a href="#contact" class="block py-2 nav-link">Contact</a> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="gradient-bg text-white pt-32 pb-20"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-yellow-300">Hari Narayan Sah</span></h1> |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6">Data Science Enthusiast</h2> |
| <p class="text-lg mb-8">Passionate about transforming data into actionable insights using machine learning and deep learning techniques.</p> |
| <div class="flex space-x-4"> |
| <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> |
| <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> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative"> |
| <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden"> |
| |
| <div class="video-container"> |
| <video class="profile-video" autoplay loop muted playsinline> |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-man-holding-neon-light-1230-large.mp4" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
| </div> |
| </div> |
| <div class="absolute -bottom-5 -right-5 bg-white text-indigo-600 px-4 py-2 rounded-full shadow-lg font-semibold"> |
| <span class="text-yellow-500">★</span> Data Scientist |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-white"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-indigo-600">About Me</h2> |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <h3 class="text-2xl font-semibold mb-4">Professional Summary</h3> |
| <p class="text-gray-600 mb-6"> |
| 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. |
| </p> |
| <p class="text-gray-600 mb-6"> |
| 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. |
| </p> |
| <div class="bg-indigo-50 p-6 rounded-lg"> |
| <h4 class="text-lg font-semibold mb-3 text-indigo-600">Languages</h4> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Maithli (Native)</span> |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Nepali (Fluent)</span> |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">English (Beginner)</span> |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Hindi (Fluent)</span> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2"> |
| <h3 class="text-2xl font-semibold mb-4">Education</h3> |
| <div class="space-y-6"> |
| <div class="relative pl-8 timeline-item"> |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-500 border-4 border-indigo-200"></div> |
| <div class="bg-gray-50 p-4 rounded-lg shadow-sm"> |
| <h4 class="font-semibold text-indigo-600">Data Science with Python Certification</h4> |
| <p class="text-gray-500">Mindrisers Institute of Technology, Kathmandu | 09/2024 - 01/2025</p> |
| </div> |
| </div> |
| <div class="relative pl-8 timeline-item"> |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-500 border-4 border-indigo-200"></div> |
| <div class="bg-gray-50 p-4 rounded-lg shadow-sm"> |
| <h4 class="font-semibold text-indigo-600">Diploma in Computer Engineering</h4> |
| <p class="text-gray-500">Adarsha Secondary School, Biratnagar | 2020 - 2024</p> |
| </div> |
| </div> |
| <div class="relative pl-8 timeline-item"> |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-indigo-500 border-4 border-indigo-200"></div> |
| <div class="bg-gray-50 p-4 rounded-lg shadow-sm"> |
| <h4 class="font-semibold text-indigo-600">Diploma in Graphic Designing</h4> |
| <p class="text-gray-500">New BIIT Institute, Biratnagar | 01/2023 - 04/2023</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="skills" class="py-20 bg-gray-50"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-indigo-600">My Skills</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <h3 class="text-xl font-semibold mb-4 text-indigo-600 flex items-center"> |
| <i class="fas fa-code mr-2"></i> Technical Skills |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="font-medium">Python (Numpy, Pandas, Matplotlib)</span> |
| <span class="text-indigo-600">90%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 90%;"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="font-medium">Machine Learning (Scikit-Learn)</span> |
| <span class="text-indigo-600">85%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 85%;"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="font-medium">Deep Learning (TensorFlow, Keras)</span> |
| <span class="text-indigo-600">80%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 80%;"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="font-medium">SQL</span> |
| <span class="text-indigo-600">75%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 75%;"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="font-medium">C++</span> |
| <span class="text-indigo-600">70%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 70%;"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <h3 class="text-xl font-semibold mb-4 text-indigo-600 flex items-center"> |
| <i class="fas fa-tools mr-2"></i> Tools & Platforms |
| </h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="flex items-center p-3 bg-indigo-50 rounded-lg"> |
| <i class="fas fa-laptop-code text-indigo-600 mr-3"></i> |
| <span>VS Code</span> |
| </div> |
| <div class="flex items-center p-3 bg-indigo-50 rounded-lg"> |
| <i class="fab fa-python text-indigo-600 mr-3"></i> |
| <span>Jupyter Notebook</span> |
| </div> |
| <div class="flex items-center p-3 bg-indigo-50 rounded-lg"> |
| <i class="fab fa-google text-indigo-600 mr-3"></i> |
| <span>Google Colab</span> |
| </div> |
| <div class="flex items-center p-3 bg-indigo-50 rounded-lg"> |
| <i class="fab fa-github text-indigo-600 mr-3"></i> |
| <span>Git & GitHub</span> |
| </div> |
| <div class="flex items-center p-3 bg-indigo-50 rounded-lg"> |
| <i class="fab fa-linux text-indigo-600 mr-3"></i> |
| <span>Linux</span> |
| </div> |
| <div class="flex items-center p-3 bg-indigo-50 rounded-lg"> |
| <i class="fas fa-palette text-indigo-600 mr-3"></i> |
| <span>Canva</span> |
| </div> |
| <div class="flex items-center p-3 bg-indigo-50 rounded-lg"> |
| <i class="fas fa-file-word text-indigo-600 mr-3"></i> |
| <span>Office Package</span> |
| </div> |
| <div class="flex items-center p-3 bg-indigo-50 rounded-lg"> |
| <i class="fas fa-chart-line text-indigo-600 mr-3"></i> |
| <span>Power BI</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="experience" class="py-20 bg-white"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-indigo-600">Work Experience</h2> |
| |
| <div class="relative pl-8 max-w-3xl mx-auto"> |
| <div class="absolute left-0 top-0 w-1 h-full bg-indigo-200"></div> |
| |
| <div class="relative mb-10"> |
| <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> |
| <div class="ml-8"> |
| <div class="bg-indigo-50 p-6 rounded-lg shadow-sm"> |
| <h3 class="text-xl font-semibold text-indigo-600">Volunteer - Birat Expo 2079</h3> |
| <p class="text-gray-500 mb-2">Biratnagar, Nepal | 15/12/2022 - 25/12/2022</p> |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> |
| <li>Maintained computers and other systems during the event</li> |
| <li>Collaborated effectively with team members to ensure smooth operations</li> |
| <li>Assisted coordinators in event management tasks</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="relative mb-10"> |
| <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> |
| <div class="ml-8"> |
| <div class="bg-indigo-50 p-6 rounded-lg shadow-sm"> |
| <h3 class="text-xl font-semibold text-indigo-600">Certifications & Achievements</h3> |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> |
| <li>Data Science with Python Certification – Mindrisers Institute of Technology 2025</li> |
| <li>Diploma in Graphic Designing – New BIIT Institute 2023</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="projects" class="py-20 bg-gray-50"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-indigo-600">My Projects</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md project-card transition duration-300"> |
| <div class="h-48 bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-home text-6xl text-indigo-500"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2 text-indigo-600">Real State House Price Predictor</h3> |
| <p class="text-gray-600 mb-4">Developed predictive models using Linear Regression to Predict House price.</p> |
| <div class="flex justify-between items-center"> |
| <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> |
| <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs">Machine Learning</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md project-card transition duration-300"> |
| <div class="h-48 bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-image text-6xl text-indigo-500"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2 text-indigo-600">Image Classification using CNNs</h3> |
| <p class="text-gray-600 mb-4">Built a Convolutional Neural Network in TensorFlow to classify images with over 83% accuracy.</p> |
| <div class="flex justify-between items-center"> |
| <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> |
| <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs">Deep Learning</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md project-card |
| </html> |
