|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Parthib Karak | AI Engineer & Developer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
html { |
|
|
scroll-behavior: smooth; |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #0ea5e9 0%, #0d9488 100%); |
|
|
} |
|
|
.section-title { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
.section-title:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -8px; |
|
|
left: 0; |
|
|
width: 50%; |
|
|
height: 3px; |
|
|
background: #0ea5e9; |
|
|
border-radius: 3px; |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.skill-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.skill-icon:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.animate-fadeIn { |
|
|
animation: fadeIn 0.6s ease-out forwards; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<nav class="fixed w-full bg-white shadow-sm z-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16 items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<span class="text-xl font-bold text-gray-800">Parthib Karak</span> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-center space-x-4"> |
|
|
<a href="#home" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">Home</a> |
|
|
<a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">About</a> |
|
|
<a href="#skills" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">Skills</a> |
|
|
<a href="#projects" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">Projects</a> |
|
|
<a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium text-gray-800 hover:text-teal-600">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button class="mobile-menu-button p-2 rounded-md text-gray-800 hover:text-teal-600"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mobile-menu hidden md:hidden bg-white shadow-lg"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">Home</a> |
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">About</a> |
|
|
<a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">Skills</a> |
|
|
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">Projects</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-teal-600">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 hero-gradient text-white"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:flex md:items-center md:justify-between"> |
|
|
<div class="md:w-1/2 animate-fadeIn" style="animation-delay: 0.1s;"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-teal-200">Parthib Karak</span></h1> |
|
|
<h2 class="text-xl md:text-2xl font-medium mb-6">Aspiring AI Engineer | Full-Stack Developer</h2> |
|
|
<p class="text-lg mb-8 text-gray-100">B.Tech 3rd Year Student at Institute of Engineering and Management</p> |
|
|
<div class="flex space-x-4"> |
|
|
<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> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 mt-10 md:mt-0 flex justify-center animate-fadeIn" style="animation-delay: 0.3s;"> |
|
|
<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"> |
|
|
<img src="https://static.photos/technology/640x360/1" alt="Parthib Karak" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center section-title">About Me</h2> |
|
|
<div class="md:flex md:items-center md:space-x-12"> |
|
|
<div class="md:w-1/3 mb-8 md:mb-0 flex justify-center"> |
|
|
<div class="w-64 h-64 rounded-lg overflow-hidden shadow-lg"> |
|
|
<img src="https://static.photos/technology/640x360/2" alt="About Parthib" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-2/3"> |
|
|
<p class="text-lg mb-6"> |
|
|
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. |
|
|
</p> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<h3 class="text-xl font-semibold mb-3 text-teal-600">Education</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="award" class="mr-2 text-teal-500"></i> |
|
|
<span>B.Tech in CSE (AI & ML) - IEM Kolkata (CGPA: 9.2)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="award" class="mr-2 text-teal-500"></i> |
|
|
<span>Higher Secondary: 92% (WBCHSE)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="award" class="mr-2 text-teal-500"></i> |
|
|
<span>Madhyamik: 94% (WBBSE)</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<h3 class="text-xl font-semibold mb-3 text-teal-600">Interests</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="cpu" class="mr-2 text-teal-500"></i> |
|
|
<span>Generative AI & LLMs</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="code" class="mr-2 text-teal-500"></i> |
|
|
<span>Full-Stack Development</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="database" class="mr-2 text-teal-500"></i> |
|
|
<span>AI-powered Applications</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<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"> |
|
|
<i data-feather="download" class="mr-2"></i> Download Resume |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center section-title">My Skills</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-teal-100 text-teal-600"> |
|
|
<i data-feather="code" class="w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-3">Languages</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> Python |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> JavaScript |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> C |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-teal-100 text-teal-600"> |
|
|
<i data-feather="cpu" class="w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-3">AI/ML</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> LLMs |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> RAG |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> LangChain |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-teal-100 text-teal-600"> |
|
|
<i data-feather="globe" class="w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-3">Web Dev</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> Flask |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> HTML/CSS |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> Tailwind |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-teal-100 text-teal-600"> |
|
|
<i data-feather="database" class="w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-3">Databases</h3> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> SQL |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> MongoDB |
|
|
</span> |
|
|
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4 mr-1 text-teal-500"></i> Firebase |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center section-title">My Projects</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-teal-100 text-teal-600"> |
|
|
<i data-feather="message-square" class="w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-3">Medical AI Chatbot</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
An AI-powered chatbot for medical queries using Llama/Groq with LangChain integration for accurate responses. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Flask</span> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">LangChain</span> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Llama/Groq</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center"> |
|
|
<i data-feather="github" class="w-4 h-4 mr-1"></i> Code |
|
|
</a> |
|
|
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center"> |
|
|
<i data-feather="external-link" class="w-4 h-4 mr-1"></i> Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-teal-100 text-teal-600"> |
|
|
<i data-feather="users" class="w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-3">AI Virtual Dev Pod</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
A multi-agent system simulating a development team using LangGraph & Groq for collaborative problem solving. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">LangGraph</span> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Groq</span> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Multi-agent</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center"> |
|
|
<i data-feather="github" class="w-4 h-4 mr-1"></i> Code |
|
|
</a> |
|
|
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center"> |
|
|
<i data-feather="external-link" class="w-4 h-4 mr-1"></i> Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-teal-100 text-teal-600"> |
|
|
<i data-feather="film" class="w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-3">MovieGPT</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
A movie recommendation system powered by Gemini AI that understands natural language queries about films. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">LangChain</span> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Gemini</span> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Streamlit</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center"> |
|
|
<i data-feather="github" class="w-4 h-4 mr-1"></i> Code |
|
|
</a> |
|
|
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center"> |
|
|
<i data-feather="external-link" class="w-4 h-4 mr-1"></i> Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-teal-100 text-teal-600"> |
|
|
<i data-feather="music" class="w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-3">Spotify-like Music App</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
A full-stack music streaming application with playlist management and audio playback features. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">Flask</span> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">SQL</span> |
|
|
<span class="px-2 py-1 bg-teal-100 text-teal-800 rounded-full text-xs">JavaScript</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center"> |
|
|
<i data-feather="github" class="w-4 h-4 mr-1"></i> Code |
|
|
</a> |
|
|
<a href="#" class="text-sm font-medium text-teal-600 hover:text-teal-800 flex items-center"> |
|
|
<i data-feather="external-link" class="w-4 h-4 mr-1"></i> Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center section-title">Get In Touch</h2> |
|
|
<div class="md:flex md:space-x-8"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Name</label> |
|
|
<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"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email</label> |
|
|
<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"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700">Message</label> |
|
|
<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> |
|
|
</div> |
|
|
<div> |
|
|
<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"> |
|
|
Send Message |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-white p-8 rounded-lg shadow-sm h-full"> |
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-800">Contact Information</h3> |
|
|
<ul class="space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="mail" class="w-5 h-5 text-teal-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-500">Email</p> |
|
|
<p class="text-sm text-gray-900">[email protected]</p> |
|
|
</div> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="linkedin" class="w-5 h-5 text-teal-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-500">LinkedIn</p> |
|
|
<a href="#" class="text-sm text-teal-600 hover:text-teal-800">linkedin.com/in/parthibkarak</a> |
|
|
</div> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="github" class="w-5 h-5 text-teal-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-500">GitHub</p> |
|
|
<a href="#" class="text-sm text-teal-600 hover:text-teal-800">github.com/parthibkarak</a> |
|
|
</div> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-8"> |
|
|
<h4 class="text-lg font-medium mb-3 text-gray-800">Let's Connect</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-teal-100 hover:text-teal-600"> |
|
|
<i data-feather="twitter" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-teal-100 hover:text-teal-600"> |
|
|
<i data-feather="linkedin" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-teal-100 hover:text-teal-600"> |
|
|
<i data-feather="github" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-teal-100 hover:text-teal-600"> |
|
|
<i data-feather="mail" class="w-5 h-5"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:flex md:items-center md:justify-between"> |
|
|
<div class="flex justify-center md:order-2 space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="github" class="w-6 h-6"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="linkedin" class="w-6 h-6"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="twitter" class="w-6 h-6"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-8 md:mt-0 md:order-1"> |
|
|
<p class="text-center text-base text-gray-400"> |
|
|
© 2023 Parthib Karak. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelector('.mobile-menu-button').addEventListener('click', function() { |
|
|
document.querySelector('.mobile-menu').classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.mobile-menu a').forEach(link => { |
|
|
link.addEventListener('click', function() { |
|
|
document.querySelector('.mobile-menu').classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
