Create a modern, responsive personal portfolio website for Parthib Karak, a B.Tech 3rd year student at the Institute of Engineering and Management. The portfolio should have a clean and professional UI with soft animations. Include the following sections:
Browse filesHome/Landing Page – A brief introduction with my name, role (Aspiring AI Engineer | Full-Stack Developer), and a call-to-action button.
About Me – Short bio highlighting my interest in AI, Generative AI, and Web Development, including my CGPA, academic background (mention Higher Secondary & Madhyamik results).
Skills – Display programming languages (C, Python, JavaScript), frameworks (Flask, LangChain, Streamlit), technologies (AI/ML, LLMs, RAG, Databases) with small icons.
Projects – Showcase my major projects:
Medical AI Chatbot (Flask + LangChain + Llama/Groq)
AI Virtual Dev Pod (multi-agent system using LangGraph & Groq)
MovieGPT (LangChain + Gemini)
Spotify-like Music App (Flask)
AI Pathfinding Visualizer (A*, BFS, DFS, Dijkstra)
(Each project should have title, short description, tech stack, and GitHub/demo links.)
Resume/CV – A button to download my resume.
Contact Form – With name, email, and message fields; submissions should be stored in an online database. Also, include my LinkedIn, GitHub, and email links in the footer.*
The theme should be minimalist with a professional colour palette (dark + accent colour like teal or blue), use smooth scrolling, and make it mobile-friendly.
- README.md +7 -4
- index.html +508 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title: Parthib
|
| 3 |
-
emoji: 🏃
|
| 4 |
colorFrom: red
|
| 5 |
-
colorTo:
|
|
|
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Parthib's Digital Portfolio ✨
|
|
|
|
| 3 |
colorFrom: red
|
| 4 |
+
colorTo: yellow
|
| 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,509 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Parthib Karak | AI Engineer & Developer</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| 10 |
+
<style>
|
| 11 |
+
html {
|
| 12 |
+
scroll-behavior: smooth;
|
| 13 |
+
font-family: 'Inter', sans-serif;
|
| 14 |
+
}
|
| 15 |
+
.hero-gradient {
|
| 16 |
+
background: linear-gradient(135deg, #0ea5e9 0%, #0d9488 100%);
|
| 17 |
+
}
|
| 18 |
+
.section-title {
|
| 19 |
+
position: relative;
|
| 20 |
+
display: inline-block;
|
| 21 |
+
}
|
| 22 |
+
.section-title:after {
|
| 23 |
+
content: '';
|
| 24 |
+
position: absolute;
|
| 25 |
+
bottom: -8px;
|
| 26 |
+
left: 0;
|
| 27 |
+
width: 50%;
|
| 28 |
+
height: 3px;
|
| 29 |
+
background: #0ea5e9;
|
| 30 |
+
border-radius: 3px;
|
| 31 |
+
}
|
| 32 |
+
.card-hover {
|
| 33 |
+
transition: all 0.3s ease;
|
| 34 |
+
}
|
| 35 |
+
.card-hover:hover {
|
| 36 |
+
transform: translateY(-5px);
|
| 37 |
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
| 38 |
+
}
|
| 39 |
+
.skill-icon {
|
| 40 |
+
transition: all 0.3s ease;
|
| 41 |
+
}
|
| 42 |
+
.skill-icon:hover {
|
| 43 |
+
transform: scale(1.1);
|
| 44 |
+
}
|
| 45 |
+
@keyframes fadeIn {
|
| 46 |
+
from { opacity: 0; transform: translateY(20px); }
|
| 47 |
+
to { opacity: 1; transform: translateY(0); }
|
| 48 |
+
}
|
| 49 |
+
.animate-fadeIn {
|
| 50 |
+
animation: fadeIn 0.6s ease-out forwards;
|
| 51 |
+
}
|
| 52 |
+
</style>
|
| 53 |
+
</head>
|
| 54 |
+
<body class="bg-gray-50 text-gray-800">
|
| 55 |
+
<!-- Navigation -->
|
| 56 |
+
<nav class="fixed w-full bg-white shadow-sm z-50">
|
| 57 |
+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 58 |
+
<div class="flex justify-between h-16 items-center">
|
| 59 |
+
<div class="flex-shrink-0 flex items-center">
|
| 60 |
+
<span class="text-xl font-bold text-gray-800">Parthib Karak</span>
|
| 61 |
+
</div>
|
| 62 |
+
<div class="hidden md:block">
|
| 63 |
+
<div class="ml-10 flex items-center space-x-4">
|
| 64 |
+
<a href="#home" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">Home</a>
|
| 65 |
+
<a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">About</a>
|
| 66 |
+
<a href="#skills" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">Skills</a>
|
| 67 |
+
<a href="#projects" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">Projects</a>
|
| 68 |
+
<a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">Contact</a>
|
| 69 |
+
</div>
|
| 70 |
+
</div>
|
| 71 |
+
<div class="md:hidden">
|
| 72 |
+
<button class="mobile-menu-button p-2 rounded-md text-gray-800 hover:text-teal-600">
|
| 73 |
+
<i data-feather="menu"></i>
|
| 74 |
+
</button>
|
| 75 |
+
</div>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
<!-- Mobile menu -->
|
| 79 |
+
<div class="mobile-menu hidden md:hidden bg-white shadow-lg">
|
| 80 |
+
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
| 81 |
+
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">Home</a>
|
| 82 |
+
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">About</a>
|
| 83 |
+
<a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">Skills</a>
|
| 84 |
+
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">Projects</a>
|
| 85 |
+
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">Contact</a>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</nav>
|
| 89 |
+
|
| 90 |
+
<!-- Hero Section -->
|
| 91 |
+
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 hero-gradient text-white">
|
| 92 |
+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 93 |
+
<div class="md:flex md:items-center md:justify-between">
|
| 94 |
+
<div class="md:w-1/2 animate-fadeIn" style="animation-delay: 0.1s;">
|
| 95 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-teal-200">Parthib Karak</span></h1>
|
| 96 |
+
<h2 class="text-xl md:text-2xl font-medium mb-6">Aspiring AI Engineer | Full-Stack Developer</h2>
|
| 97 |
+
<p class="text-lg mb-8 text-gray-100">B.Tech 3rd Year Student at Institute of Engineering and Management</p>
|
| 98 |
+
<div class="flex space-x-4">
|
| 99 |
+
<a href="#projects" class="px-6 py-3 bg-teal-600 hover:bg-teal-700 rounded-md font-medium transition duration-300">View My Work</a>
|
| 100 |
+
<a href="#contact" class="px-6 py-3 border-2 border-white hover:bg-white hover:text-gray-800 rounded-md font-medium transition duration-300">Contact Me</a>
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
<div class="md:w-1/2 mt-10 md:mt-0 flex justify-center animate-fadeIn" style="animation-delay: 0.3s;">
|
| 104 |
+
<div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-teal-100 flex items-center justify-center overflow-hidden shadow-xl">
|
| 105 |
+
<img src="https://static.photos/technology/640x360/1" alt="Parthib Karak" class="w-full h-full object-cover">
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
</section>
|
| 111 |
+
|
| 112 |
+
<!-- About Section -->
|
| 113 |
+
<section id="about" class="py-16 bg-white">
|
| 114 |
+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 115 |
+
<h2 class="text-3xl font-bold mb-12 text-center section-title">About Me</h2>
|
| 116 |
+
<div class="md:flex md:items-center md:space-x-12">
|
| 117 |
+
<div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
|
| 118 |
+
<div class="w-64 h-64 rounded-lg overflow-hidden shadow-lg">
|
| 119 |
+
<img src="https://static.photos/technology/640x360/2" alt="About Parthib" class="w-full h-full object-cover">
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
<div class="md:w-2/3">
|
| 123 |
+
<p class="text-lg mb-6">
|
| 124 |
+
I'm a passionate B.Tech 3rd year student with a strong interest in Artificial Intelligence, particularly Generative AI and Large Language Models. My journey in technology began with web development and has evolved into exploring the fascinating world of AI and machine learning.
|
| 125 |
+
</p>
|
| 126 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 127 |
+
<div class="bg-gray-50 p-6 rounded-lg">
|
| 128 |
+
<h3 class="text-xl font-semibold mb-3 text-teal-600">Education</h3>
|
| 129 |
+
<ul class="space-y-2">
|
| 130 |
+
<li class="flex items-start">
|
| 131 |
+
<i data-feather="award" class="mr-2 text-teal-500"></i>
|
| 132 |
+
<span>B.Tech in CSE (AI & ML) - IEM Kolkata (CGPA: 9.2)</span>
|
| 133 |
+
</li>
|
| 134 |
+
<li class="flex items-start">
|
| 135 |
+
<i data-feather="award" class="mr-2 text-teal-500"></i>
|
| 136 |
+
<span>Higher Secondary: 92% (WBCHSE)</span>
|
| 137 |
+
</li>
|
| 138 |
+
<li class="flex items-start">
|
| 139 |
+
<i data-feather="award" class="mr-2 text-teal-500"></i>
|
| 140 |
+
<span>Madhyamik: 94% (WBBSE)</span>
|
| 141 |
+
</li>
|
| 142 |
+
</ul>
|
| 143 |
+
</div>
|
| 144 |
+
<div class="bg-gray-50 p-6 rounded-lg">
|
| 145 |
+
<h3 class="text-xl font-semibold mb-3 text-teal-600">Interests</h3>
|
| 146 |
+
<ul class="space-y-2">
|
| 147 |
+
<li class="flex items-start">
|
| 148 |
+
<i data-feather="cpu" class="mr-2 text-teal-500"></i>
|
| 149 |
+
<span>Generative AI & LLMs</span>
|
| 150 |
+
</li>
|
| 151 |
+
<li class="flex items-start">
|
| 152 |
+
<i data-feather="code" class="mr-2 text-teal-500"></i>
|
| 153 |
+
<span>Full-Stack Development</span>
|
| 154 |
+
</li>
|
| 155 |
+
<li class="flex items-start">
|
| 156 |
+
<i data-feather="database" class="mr-2 text-teal-500"></i>
|
| 157 |
+
<span>AI-powered Applications</span>
|
| 158 |
+
</li>
|
| 159 |
+
</ul>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
<div class="mt-6">
|
| 163 |
+
<a href="#" class="inline-flex items-center px-6 py-3 bg-teal-600 hover:bg-teal-700 text-white rounded-md font-medium transition duration-300">
|
| 164 |
+
<i data-feather="download" class="mr-2"></i> Download Resume
|
| 165 |
+
</a>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
</div>
|
| 169 |
+
</div>
|
| 170 |
+
</section>
|
| 171 |
+
|
| 172 |
+
<!-- Skills Section -->
|
| 173 |
+
<section id="skills" class="py-16 bg-gray-50">
|
| 174 |
+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 175 |
+
<h2 class="text-3xl font-bold mb-12 text-center section-title">My Skills</h2>
|
| 176 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
| 177 |
+
<!-- Programming Languages -->
|
| 178 |
+
<div class="bg-white p-6 rounded-lg shadow-sm card-hover">
|
| 179 |
+
<div class="flex items-center mb-4">
|
| 180 |
+
<div class="p-3 rounded-full bg-teal-100 text-teal-600">
|
| 181 |
+
<i data-feather="code" class="w-6 h-6"></i>
|
| 182 |
+
</div>
|
| 183 |
+
<h3 class="text-xl font-semibold ml-3">Languages</h3>
|
| 184 |
+
</div>
|
| 185 |
+
<div class="flex flex-wrap gap-2">
|
| 186 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 187 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> Python
|
| 188 |
+
</span>
|
| 189 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 190 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> JavaScript
|
| 191 |
+
</span>
|
| 192 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 193 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> C
|
| 194 |
+
</span>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
|
| 198 |
+
<!-- AI/ML -->
|
| 199 |
+
<div class="bg-white p-6 rounded-lg shadow-sm card-hover">
|
| 200 |
+
<div class="flex items-center mb-4">
|
| 201 |
+
<div class="p-3 rounded-full bg-teal-100 text-teal-600">
|
| 202 |
+
<i data-feather="cpu" class="w-6 h-6"></i>
|
| 203 |
+
</div>
|
| 204 |
+
<h3 class="text-xl font-semibold ml-3">AI/ML</h3>
|
| 205 |
+
</div>
|
| 206 |
+
<div class="flex flex-wrap gap-2">
|
| 207 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 208 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> LLMs
|
| 209 |
+
</span>
|
| 210 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 211 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> RAG
|
| 212 |
+
</span>
|
| 213 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 214 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> LangChain
|
| 215 |
+
</span>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
|
| 219 |
+
<!-- Web Dev -->
|
| 220 |
+
<div class="bg-white p-6 rounded-lg shadow-sm card-hover">
|
| 221 |
+
<div class="flex items-center mb-4">
|
| 222 |
+
<div class="p-3 rounded-full bg-teal-100 text-teal-600">
|
| 223 |
+
<i data-feather="globe" class="w-6 h-6"></i>
|
| 224 |
+
</div>
|
| 225 |
+
<h3 class="text-xl font-semibold ml-3">Web Dev</h3>
|
| 226 |
+
</div>
|
| 227 |
+
<div class="flex flex-wrap gap-2">
|
| 228 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 229 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> Flask
|
| 230 |
+
</span>
|
| 231 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 232 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> HTML/CSS
|
| 233 |
+
</span>
|
| 234 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 235 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> Tailwind
|
| 236 |
+
</span>
|
| 237 |
+
</div>
|
| 238 |
+
</div>
|
| 239 |
+
|
| 240 |
+
<!-- Databases -->
|
| 241 |
+
<div class="bg-white p-6 rounded-lg shadow-sm card-hover">
|
| 242 |
+
<div class="flex items-center mb-4">
|
| 243 |
+
<div class="p-3 rounded-full bg-teal-100 text-teal-600">
|
| 244 |
+
<i data-feather="database" class="w-6 h-6"></i>
|
| 245 |
+
</div>
|
| 246 |
+
<h3 class="text-xl font-semibold ml-3">Databases</h3>
|
| 247 |
+
</div>
|
| 248 |
+
<div class="flex flex-wrap gap-2">
|
| 249 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 250 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> SQL
|
| 251 |
+
</span>
|
| 252 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 253 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> MongoDB
|
| 254 |
+
</span>
|
| 255 |
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
|
| 256 |
+
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> Firebase
|
| 257 |
+
</span>
|
| 258 |
+
</div>
|
| 259 |
+
</div>
|
| 260 |
+
</div>
|
| 261 |
+
</div>
|
| 262 |
+
</section>
|
| 263 |
+
|
| 264 |
+
<!-- Projects Section -->
|
| 265 |
+
<section id="projects" class="py-16 bg-white">
|
| 266 |
+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 267 |
+
<h2 class="text-3xl font-bold mb-12 text-center section-title">My Projects</h2>
|
| 268 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 269 |
+
<!-- Medical AI Chatbot -->
|
| 270 |
+
<div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover">
|
| 271 |
+
<div class="flex items-center mb-4">
|
| 272 |
+
<div class="p-3 rounded-full bg-teal-100 text-teal-600">
|
| 273 |
+
<i data-feather="message-square" class="w-6 h-6"></i>
|
| 274 |
+
</div>
|
| 275 |
+
<h3 class="text-xl font-semibold ml-3">Medical AI Chatbot</h3>
|
| 276 |
+
</div>
|
| 277 |
+
<p class="text-gray-600 mb-4">
|
| 278 |
+
An AI-powered chatbot for medical queries using Llama/Groq with LangChain integration for accurate responses.
|
| 279 |
+
</p>
|
| 280 |
+
<div class="flex flex-wrap gap-2 mb-4">
|
| 281 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Flask</span>
|
| 282 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">LangChain</span>
|
| 283 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Llama/Groq</span>
|
| 284 |
+
</div>
|
| 285 |
+
<div class="flex space-x-3">
|
| 286 |
+
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center">
|
| 287 |
+
<i data-feather="github" class="w-4 h-4 mr-1"></i> Code
|
| 288 |
+
</a>
|
| 289 |
+
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center">
|
| 290 |
+
<i data-feather="external-link" class="w-4 h-4 mr-1"></i> Demo
|
| 291 |
+
</a>
|
| 292 |
+
</div>
|
| 293 |
+
</div>
|
| 294 |
+
|
| 295 |
+
<!-- AI Virtual Dev Pod -->
|
| 296 |
+
<div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover">
|
| 297 |
+
<div class="flex items-center mb-4">
|
| 298 |
+
<div class="p-3 rounded-full bg-teal-100 text-teal-600">
|
| 299 |
+
<i data-feather="users" class="w-6 h-6"></i>
|
| 300 |
+
</div>
|
| 301 |
+
<h3 class="text-xl font-semibold ml-3">AI Virtual Dev Pod</h3>
|
| 302 |
+
</div>
|
| 303 |
+
<p class="text-gray-600 mb-4">
|
| 304 |
+
A multi-agent system simulating a development team using LangGraph & Groq for collaborative problem solving.
|
| 305 |
+
</p>
|
| 306 |
+
<div class="flex flex-wrap gap-2 mb-4">
|
| 307 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">LangGraph</span>
|
| 308 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Groq</span>
|
| 309 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Multi-agent</span>
|
| 310 |
+
</div>
|
| 311 |
+
<div class="flex space-x-3">
|
| 312 |
+
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center">
|
| 313 |
+
<i data-feather="github" class="w-4 h-4 mr-1"></i> Code
|
| 314 |
+
</a>
|
| 315 |
+
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center">
|
| 316 |
+
<i data-feather="external-link" class="w-4 h-4 mr-1"></i> Demo
|
| 317 |
+
</a>
|
| 318 |
+
</div>
|
| 319 |
+
</div>
|
| 320 |
+
|
| 321 |
+
<!-- MovieGPT -->
|
| 322 |
+
<div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover">
|
| 323 |
+
<div class="flex items-center mb-4">
|
| 324 |
+
<div class="p-3 rounded-full bg-teal-100 text-teal-600">
|
| 325 |
+
<i data-feather="film" class="w-6 h-6"></i>
|
| 326 |
+
</div>
|
| 327 |
+
<h3 class="text-xl font-semibold ml-3">MovieGPT</h3>
|
| 328 |
+
</div>
|
| 329 |
+
<p class="text-gray-600 mb-4">
|
| 330 |
+
A movie recommendation system powered by Gemini AI that understands natural language queries about films.
|
| 331 |
+
</p>
|
| 332 |
+
<div class="flex flex-wrap gap-2 mb-4">
|
| 333 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">LangChain</span>
|
| 334 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Gemini</span>
|
| 335 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Streamlit</span>
|
| 336 |
+
</div>
|
| 337 |
+
<div class="flex space-x-3">
|
| 338 |
+
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center">
|
| 339 |
+
<i data-feather="github" class="w-4 h-4 mr-1"></i> Code
|
| 340 |
+
</a>
|
| 341 |
+
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center">
|
| 342 |
+
<i data-feather="external-link" class="w-4 h-4 mr-1"></i> Demo
|
| 343 |
+
</a>
|
| 344 |
+
</div>
|
| 345 |
+
</div>
|
| 346 |
+
|
| 347 |
+
<!-- Spotify-like Music App -->
|
| 348 |
+
<div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover">
|
| 349 |
+
<div class="flex items-center mb-4">
|
| 350 |
+
<div class="p-3 rounded-full bg-teal-100 text-teal-600">
|
| 351 |
+
<i data-feather="music" class="w-6 h-6"></i>
|
| 352 |
+
</div>
|
| 353 |
+
<h3 class="text-xl font-semibold ml-3">Spotify-like Music App</h3>
|
| 354 |
+
</div>
|
| 355 |
+
<p class="text-gray-600 mb-4">
|
| 356 |
+
A full-stack music streaming application with playlist management and audio playback features.
|
| 357 |
+
</p>
|
| 358 |
+
<div class="flex flex-wrap gap-2 mb-4">
|
| 359 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Flask</span>
|
| 360 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">SQL</span>
|
| 361 |
+
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">JavaScript</span>
|
| 362 |
+
</div>
|
| 363 |
+
<div class="flex space-x-3">
|
| 364 |
+
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center">
|
| 365 |
+
<i data-feather="github" class="w-4 h-4 mr-1"></i> Code
|
| 366 |
+
</a>
|
| 367 |
+
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center">
|
| 368 |
+
<i data-feather="external-link" class="w-4 h-4 mr-1"></i> Demo
|
| 369 |
+
</a>
|
| 370 |
+
</div>
|
| 371 |
+
</div>
|
| 372 |
+
</div>
|
| 373 |
+
</div>
|
| 374 |
+
</section>
|
| 375 |
+
|
| 376 |
+
<!-- Contact Section -->
|
| 377 |
+
<section id="contact" class="py-16 bg-gray-50">
|
| 378 |
+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 379 |
+
<h2 class="text-3xl font-bold mb-12 text-center section-title">Get In Touch</h2>
|
| 380 |
+
<div class="md:flex md:space-x-8">
|
| 381 |
+
<div class="md:w-1/2 mb-8 md:mb-0">
|
| 382 |
+
<form class="space-y-6">
|
| 383 |
+
<div>
|
| 384 |
+
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
|
| 385 |
+
<input type="text" id="name" name="name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500">
|
| 386 |
+
</div>
|
| 387 |
+
<div>
|
| 388 |
+
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
|
| 389 |
+
<input type="email" id="email" name="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500">
|
| 390 |
+
</div>
|
| 391 |
+
<div>
|
| 392 |
+
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
|
| 393 |
+
<textarea id="message" name="message" rows="4" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500"></textarea>
|
| 394 |
+
</div>
|
| 395 |
+
<div>
|
| 396 |
+
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
|
| 397 |
+
Send Message
|
| 398 |
+
</button>
|
| 399 |
+
</div>
|
| 400 |
+
</form>
|
| 401 |
+
</div>
|
| 402 |
+
<div class="md:w-1/2">
|
| 403 |
+
<div class="bg-white p-8 rounded-lg shadow-sm h-full">
|
| 404 |
+
<h3 class="text-xl font-semibold mb-4 text-gray-800">Contact Information</h3>
|
| 405 |
+
<ul class="space-y-4">
|
| 406 |
+
<li class="flex items-start">
|
| 407 |
+
<div class="flex-shrink-0">
|
| 408 |
+
<i data-feather="mail" class="w-5 h-5 text-teal-600"></i>
|
| 409 |
+
</div>
|
| 410 |
+
<div class="ml-3">
|
| 411 |
+
<p class="text-sm font-medium text-gray-500">Email</p>
|
| 412 |
+
<p class="text-sm text-gray-900">parthib.karak@example.com</p>
|
| 413 |
+
</div>
|
| 414 |
+
</li>
|
| 415 |
+
<li class="flex items-start">
|
| 416 |
+
<div class="flex-shrink-0">
|
| 417 |
+
<i data-feather="linkedin" class="w-5 h-5 text-teal-600"></i>
|
| 418 |
+
</div>
|
| 419 |
+
<div class="ml-3">
|
| 420 |
+
<p class="text-sm font-medium text-gray-500">LinkedIn</p>
|
| 421 |
+
<a href="#" class="text-sm text-teal-600 hover:text-teal-800">linkedin.com/in/parthibkarak</a>
|
| 422 |
+
</div>
|
| 423 |
+
</li>
|
| 424 |
+
<li class="flex items-start">
|
| 425 |
+
<div class="flex-shrink-0">
|
| 426 |
+
<i data-feather="github" class="w-5 h-5 text-teal-600"></i>
|
| 427 |
+
</div>
|
| 428 |
+
<div class="ml-3">
|
| 429 |
+
<p class="text-sm font-medium text-gray-500">GitHub</p>
|
| 430 |
+
<a href="#" class="text-sm text-teal-600 hover:text-teal-800">github.com/parthibkarak</a>
|
| 431 |
+
</div>
|
| 432 |
+
</li>
|
| 433 |
+
</ul>
|
| 434 |
+
<div class="mt-8">
|
| 435 |
+
<h4 class="text-lg font-medium mb-3 text-gray-800">Let's Connect</h4>
|
| 436 |
+
<div class="flex space-x-4">
|
| 437 |
+
<a href="#" class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-teal-100 hover:text-teal-600">
|
| 438 |
+
<i data-feather="twitter" class="w-5 h-5"></i>
|
| 439 |
+
</a>
|
| 440 |
+
<a href="#" class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-teal-100 hover:text-teal-600">
|
| 441 |
+
<i data-feather="linkedin" class="w-5 h-5"></i>
|
| 442 |
+
</a>
|
| 443 |
+
<a href="#" class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-teal-100 hover:text-teal-600">
|
| 444 |
+
<i data-feather="github" class="w-5 h-5"></i>
|
| 445 |
+
</a>
|
| 446 |
+
<a href="#" class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-teal-100 hover:text-teal-600">
|
| 447 |
+
<i data-feather="mail" class="w-5 h-5"></i>
|
| 448 |
+
</a>
|
| 449 |
+
</div>
|
| 450 |
+
</div>
|
| 451 |
+
</div>
|
| 452 |
+
</div>
|
| 453 |
+
</div>
|
| 454 |
+
</div>
|
| 455 |
+
</section>
|
| 456 |
+
|
| 457 |
+
<!-- Footer -->
|
| 458 |
+
<footer class="bg-gray-800 text-white py-8">
|
| 459 |
+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 460 |
+
<div class="md:flex md:items-center md:justify-between">
|
| 461 |
+
<div class="flex justify-center md:order-2 space-x-6">
|
| 462 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 463 |
+
<i data-feather="github" class="w-6 h-6"></i>
|
| 464 |
+
</a>
|
| 465 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 466 |
+
<i data-feather="linkedin" class="w-6 h-6"></i>
|
| 467 |
+
</a>
|
| 468 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 469 |
+
<i data-feather="twitter" class="w-6 h-6"></i>
|
| 470 |
+
</a>
|
| 471 |
+
</div>
|
| 472 |
+
<div class="mt-8 md:mt-0 md:order-1">
|
| 473 |
+
<p class="text-center text-base text-gray-400">
|
| 474 |
+
© 2023 Parthib Karak. All rights reserved.
|
| 475 |
+
</p>
|
| 476 |
+
</div>
|
| 477 |
+
</div>
|
| 478 |
+
</div>
|
| 479 |
+
</footer>
|
| 480 |
+
|
| 481 |
+
<script>
|
| 482 |
+
// Initialize feather icons
|
| 483 |
+
feather.replace();
|
| 484 |
+
|
| 485 |
+
// Mobile menu toggle
|
| 486 |
+
document.querySelector('.mobile-menu-button').addEventListener('click', function() {
|
| 487 |
+
document.querySelector('.mobile-menu').classList.toggle('hidden');
|
| 488 |
+
});
|
| 489 |
+
|
| 490 |
+
// Close mobile menu when clicking a link
|
| 491 |
+
document.querySelectorAll('.mobile-menu a').forEach(link => {
|
| 492 |
+
link.addEventListener('click', function() {
|
| 493 |
+
document.querySelector('.mobile-menu').classList.add('hidden');
|
| 494 |
+
});
|
| 495 |
+
});
|
| 496 |
+
|
| 497 |
+
// Smooth scrolling for all links
|
| 498 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 499 |
+
anchor.addEventListener('click', function (e) {
|
| 500 |
+
e.preventDefault();
|
| 501 |
+
|
| 502 |
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
| 503 |
+
behavior: 'smooth'
|
| 504 |
+
});
|
| 505 |
+
});
|
| 506 |
+
});
|
| 507 |
+
</script>
|
| 508 |
+
</body>
|
| 509 |
</html>
|