Spaces:

parthib07
/

Github-Stats

Running

App Files Files Community

parthib07 commited on Jun 7, 2025

Commit

265b6d4

verified ·

1 Parent(s): 6b97720

Update index.html

Browse files

Files changed (1) hide show

index.html +780 -19

index.html CHANGED Viewed

@@ -1,19 +1,780 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Parthib Karak - Portfolio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#0ADB5A',
+                        secondary: '#0e7490',
+                        dark: '#0f172a',
+                        accent: '#1e293b'
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite'
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-20px)' }
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1a2c42 100%);
+            color: #e2e8f0;
+            scroll-behavior: smooth;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #0ADB5A 0%, #22d3ee 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .hero-glow {
+            box-shadow: 0 0 50px 10px rgba(10, 219, 90, 0.2);
+        }
+        .skill-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(10, 219, 90, 0.3);
+        }
+        .project-card:hover .project-image {
+            transform: scale(1.05);
+        }
+        ::-webkit-scrollbar {
+            width: 10px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #0f172a;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(180deg, #0ADB5A 0%, #22d3ee 100%);
+            border-radius: 10px;
+        }
+        .grid-stack {
+            position: relative;
+        }
+        .grid-layer:nth-child(1) {
+            transform: rotate(3deg);
+        }
+        .grid-layer:nth-child(2) {
+            transform: rotate(-2deg);
+        }
+        .grid-layer:nth-child(3) {
+            transform: rotate(1deg);
+        }
+        .line {
+            position: relative;
+            height: 1px;
+            width: 100%;
+            background: linear-gradient(90deg, transparent 0%, #0ADB5A 50%, transparent 100%);
+            margin: 40px 0;
+        }
+        .dot {
+            position: absolute;
+            top: -4px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #0ADB5A;
+            animation: move 3s linear infinite;
+        }
+        @keyframes move {
+            0% { left: 0; }
+            100% { left: 100%; }
+        }
+    </style>
+</head>
+<body class="min-h-screen relative overflow-x-hidden">
+    <!-- Animated background elements -->
+    <div class="absolute inset-0 overflow-hidden">
+        <div class="absolute top-20 -left-40 w-96 h-96 bg-cyan-900 rounded-full mix-blend-soft-light filter blur-3xl opacity-20"></div>
+        <div class="absolute top-1/2 right-0 w-80 h-80 bg-teal-800 rounded-full mix-blend-soft-light filter blur-3xl opacity-20"></div>
+        <div class="absolute bottom-0 left-1/3 w-72 h-72 bg-emerald-900 rounded-full mix-blend-soft-light filter blur-3xl opacity-20"></div>
+    </div>
+    <!-- Floating particles -->
+    <div class="particles">
+        <div class="absolute top-1/4 left-1/4 w-4 h-4 rounded-full bg-emerald-400 animate-pulse-slow"></div>
+        <div class="absolute top-1/3 right-1/3 w-2 h-2 rounded-full bg-cyan-400 animate-pulse-slow"></div>
+        <div class="absolute bottom-1/4 left-2/3 w-3 h-3 rounded-full bg-teal-400 animate-pulse-slow"></div>
+        <div class="absolute bottom-1/2 right-1/4 w-3 h-3 rounded-full bg-emerald-300 animate-pulse-slow"></div>
+    </div>
+    <!-- Header Section -->
+    <header class="relative min-h-screen flex flex-col items-center justify-center pt-16 px-4">
+        <div class="absolute top-5 right-5 flex space-x-4">
+            <div class="flex items-center px-3 py-1 rounded-full bg-accent text-sm">
+                <i class="fas fa-eye mr-2 text-emerald-400"></i>
+                <span>Profile Views: 21,356</span>
+            </div>
+            <a href="https://twitter.com/babaii_0007" target="_blank" class="flex items-center px-3 py-1 rounded-full bg-blue-500 hover:bg-blue-600 transition">
+                <i class="fab fa-twitter mr-2"></i>
+                <span>Follow @babaii_0007</span>
+            </a>
+        </div>
+        <!-- Hero Content -->
+        <div class="relative z-10 text-center max-w-4xl w-full">
+            <div class="mb-8 animate-float">
+                <div class="bg-accent rounded-xl p-1 inline-block hero-glow">
+                    <img src="https://camo.githubusercontent.com/069e3ef2850e722ccaef748bf8cdadafeed9fd4a9ee1436daebd7e820f4402a7/68747470733a2f2f666972656261736573746f726167652e676f6f676c65617069732e636f6d2f76302f622f666c6578692d636f64696e672e61707073706f742e636f6d2f6f2f64656d706769372d35323066386435662d363364342d343435332d383832322d6462633134396165323766382e6769663f616c743d6d6564696126746f6b656e3d39316330633762322d393363332d343032392d623031312d316138373033633537333064"
+                         class="rounded-xl max-w-full max-h-64 mx-auto" alt="Coding Animation">
+                </div>
+            </div>
+            <h1 class="text-4xl md:text-6xl font-bold mb-4">
+                Hey there, I'm <span class="gradient-text">Parthib Karak</span> 👋
+            </h1>
+            <div class="typing-container bg-accent rounded-lg py-3 px-6 max-w-md mx-auto border border-emerald-500/30">
+                <div class="flex items-center justify-center">
+                    <div class="h-8 overflow-hidden">
+                        <div class="typing-text">
+                            <span class="text-emerald-400 font-semibold">Python Backend Developer</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-10">
+                <h2 class="text-2xl font-semibold text-emerald-300 mb-6">Crafting Intelligence at the Intersection of AI and Development</h2>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <div class="px-4 py-2 rounded-full bg-emerald-900/30 border border-emerald-400/30">
+                        <i class="fas fa-server mr-2 text-emerald-400"></i>Backend Systems
+                    </div>
+                    <div class="px-4 py-2 rounded-full bg-cyan-900/30 border border-cyan-400/30">
+                        <i class="fas fa-brain mr-2 text-cyan-400"></i>Machine Learning
+                    </div>
+                    <div class="px-4 py-2 rounded-full bg-teal-900/30 border border-teal-400/30">
+                        <i class="fas fa-robot mr-2 text-teal-400"></i>AI Development
+                    </div>
+                </div>
+            </div>
+            <div class="mt-16 w-full text-center">
+                <a href="#about" class="inline-flex flex-col items-center text-emerald-400 hover:text-emerald-300 transition">
+                    <span class="mb-2">Explore My Work</span>
+                    <i class="fas fa-chevron-down text-xl animate-bounce"></i>
+                </a>
+            </div>
+        </div>
+    </header>
+    <!-- About Section -->
+    <section id="about" class="py-20 px-4 max-w-6xl mx-auto">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4"><span class="gradient-text">About Me</span></h2>
+            <p class="max-w-2xl mx-auto text-lg text-gray-300">
+                Passionate developer specializing in creating intelligent systems with Python,
+                machine learning frameworks, and AI technologies. Committed to exploring cutting-edge technologies.
+            </p>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Currently Working On -->
+            <div class="border border-emerald-500/30 rounded-2xl p-6 bg-accent transition-all duration-300 hover:bg-accent/80">
+                <div class="flex items-center mb-4">
+                    <div class="mr-3 text-emerald-400">
+                        <i class="fas fa-laptop-code text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">Currently Working On</h3>
+                </div>
+                <div class="bg-dark rounded-xl p-4">
+                    <div class="flex items-center mb-3">
+                        <div class="mr-2 w-4 h-4 rounded-full bg-emerald-500 animate-pulse"></div>
+                        <h4 class="text-lg font-semibold text-emerald-300">���� Melody Voice Assistant</h4>
+                    </div>
+                    <p class="text-gray-300">
+                        Your friendly, AI-powered voice assistant, always ready to help!
+                    </p>
+                    <div class="mt-4">
+                        <img src="https://camo.githubusercontent.com/0e2953d98b21eda5a158939ea202c7c07b16b0dc0dc5c1e269826c29a01a974f/68747470733a2f2f7777772e77656232347a6f6e652e636f6d2f77702d636f6e74656e742f75706c6f6164732f323032322f31302f34363230372d70726f6772616d6d65722d312e676966"
+                             class="rounded-lg w-full" alt="Coding GIF">
+                    </div>
+                </div>
+            </div>
+            <!-- Growing Skills -->
+            <div class="border border-cyan-500/30 rounded-2xl p-6 bg-accent transition-all duration-300 hover:bg-accent/80">
+                <div class="flex items-center mb-4">
+                    <div class="mr-3 text-cyan-400">
+                        <i class="fas fa-seedling text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">Growing My Skills In</h3>
+                </div>
+                <ul class="space-y-3">
+                    <li class="flex items-center">
+                        <i class="fas fa-chevron-right text-xs mr-3 text-cyan-400"></i>
+                        <span class="font-medium">Machine Learning Frameworks: Scikit-learn, TensorFlow, Keras</span>
+                    </li>
+                    <li class="flex items-center">
+                        <i class="fas fa-chevron-right text-xs mr-3 text-cyan-400"></i>
+                        <span class="font-medium">Generative AI Models & Implementations</span>
+                    </li>
+                    <li class="flex items-center">
+                        <i class="fas fa-chevron-right text-xs mr-3 text-cyan-400"></i>
+                        <span class="font-medium">Large Language Models and RAG Systems</span>
+                    </li>
+                    <li class="flex items-center">
+                        <i class="fas fa-chevron-right text-xs mr-3 text-cyan-400"></i>
+                        <span class="font-medium">Cloud Infrastructure: AWS, GCP, Azure</span>
+                    </li>
+                </ul>
+            </div>
+            <!-- Work & Projects -->
+            <div class="border border-teal-500/30 rounded-2xl p-6 bg-accent transition-all duration-300 hover:bg-accent/80">
+                <div class="flex items-center mb-4">
+                    <div class="mr-3 text-teal-400">
+                        <i class="fas fa-briefcase text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">Work & Projects</h3>
+                </div>
+                <p class="mb-4 text-gray-300">
+                    Explore all my work and project demos on my portfolio website:
+                </p>
+                <a href="https://portfolio-parthib-flask.vercel.app/"
+                   class="inline-flex items-center px-4 py-2 bg-teal-600 hover:bg-teal-700 rounded-full transition">
+                    <span>Visit My Portfolio</span>
+                    <i class="fas fa-arrow-right ml-2 text-sm"></i>
+                </a>
+                <div class="mt-6">
+                    <h4 class="font-semibold text-teal-300 mb-2">Expertise Highlights:</h4>
+                    <div class="bg-dark rounded-xl p-4">
+                        <p class="flex items-center">
+                            <i class="fab fa-react mr-2 text-sky-400"></i>
+                            <span>React Frontend Development</span>
+                        </p>
+                        <p class="flex items-center mt-2">
+                            <i class="fas fa-brain mr-2 text-purple-400"></i>
+                            <span>Machine Learning Solutions</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Divider with animation -->
+    <div class="line relative my-16 max-w-4xl mx-auto">
+        <div class="dot"></div>
+    </div>
+    <!-- Skills Section -->
+    <section class="py-16 px-4 max-w-6xl mx-auto">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-2"><span class="gradient-text">Technical Skills</span></h2>
+            <p class="max-w-2xl mx-auto text-lg text-gray-300">
+                Tools and technologies I use to build powerful solutions
+            </p>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
+            <!-- Skill Cards -->
+            <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-emerald-400 mb-2">
+                    <i class="fab fa-python"></i>
+                </div>
+                <span class="font-medium">Python</span>
+            </div>
+            <div class="skill-card border border-cyan-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-cyan-400 mb-2">
+                    <i class="fab fa-js"></i>
+                </div>
+                <span class="font-medium">JavaScript</span>
+            </div>
+            <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-emerald-400 mb-2">
+                    <i class="fas fa-brain"></i>
+                </div>
+                <span class="font-medium">TensorFlow</span>
+            </div>
+            <div class="skill-card border border-cyan-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-cyan-400 mb-2">
+                    <i class="fab fa-react"></i>
+                </div>
+                <span class="font-medium">React</span>
+            </div>
+            <div class="skill-card border border-teal-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-teal-400 mb-2">
+                    <i class="fas fa-database"></i>
+                </div>
+                <span class="font-medium">MongoDB</span>
+            </div>
+            <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-emerald-400 mb-2">
+                    <i class="fab fa-aws"></i>
+                </div>
+                <span class="font-medium">AWS</span>
+            </div>
+            <div class="skill-card border border-cyan-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-cyan-400 mb-2">
+                    <i class="fas fa-cloud"></i>
+                </div>
+                <span class="font-medium">GCP</span>
+            </div>
+            <div class="skill-card border border-teal-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-teal-400 mb-2">
+                    <i class="fas fa-code"></i>
+                </div>
+                <span class="font-medium">Django</span>
+            </div>
+            <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-emerald-400 mb-2">
+                    <i class="fab fa-docker"></i>
+                </div>
+                <span class="font-medium">Docker</span>
+            </div>
+            <div class="skill-card border border-cyan-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-cyan-400 mb-2">
+                    <i class="fas fa-server"></i>
+                </div>
+                <span class="font-medium">SQL</span>
+            </div>
+            <div class="skill-card border border-teal-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-teal-400 mb-2">
+                    <i class="fab fa-git-alt"></i>
+                </div>
+                <span class="font-medium">Git</span>
+            </div>
+            <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center">
+                <div class="text-4xl text-emerald-400 mb-2">
+                    <i class="fas fa-terminal"></i>
+                </div>
+                <span class="font-medium">Linux</span>
+            </div>
+        </div>
+    </section>
+    <!-- Projects Section -->
+    <section class="py-20 bg-accent/20">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-2"><span class="gradient-text">Featured Projects</span></h2>
+                <p class="max-w-2xl mx-auto text-lg text-gray-300">
+                    Explore my recent work in AI and full-stack development
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <!-- Project 1 -->
+                <div class="project-card rounded-2xl overflow-hidden bg-dark border border-emerald-500/20">
+                    <div class="overflow-hidden">
+                        <div class="project-image h-48 bg-gradient-to-r from-emerald-900/30 to-cyan-900/30 flex items-center justify-center transition duration-500">
+                            <i class="fas fa-robot text-6xl text-emerald-500"></i>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <h3 class="text-xl font-bold">Celebrity Face Recognition</h3>
+                            <div class="flex">
+                                <span class="bg-emerald-900/50 text-xs px-2 py-1 rounded mr-1">Jupyter</span>
+                                <span class="bg-emerald-900/50 text-xs px-2 py-1 rounded">ML</span>
+                            </div>
+                        </div>
+                        <p class="text-gray-300 mt-2">
+                            An AI-powered facial recognition system that identifies celebrities using deep learning and computer vision.
+                        </p>
+                        <div class="mt-4 flex justify-between items-center">
+                            <div class="flex">
+                                <div class="w-2 h-2 rounded-full bg-emerald-500 mt-1.5 mr-2"></div>
+                                <span class="text-sm text-emerald-400">Active</span>
+                            </div>
+                            <a href="#" class="text-sm flex items-center hover:text-emerald-400 transition">
+                                <span>View Project</span>
+                                <i class="fas fa-arrow-right ml-1 text-xs"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project 2 -->
+                <div class="project-card rounded-2xl overflow-hidden bg-dark border border-cyan-500/20">
+                    <div class="overflow-hidden">
+                        <div class="project-image h-48 bg-gradient-to-r from-cyan-900/30 to-blue-900/30 flex items-center justify-center transition duration-500">
+                            <i class="fas fa-file-pdf text-6xl text-cyan-500"></i>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <h3 class="text-xl font-bold">Chat with Multiple PDFs</h3>
+                            <div class="flex">
+                                <span class="bg-cyan-900/50 text-xs px-2 py-1 rounded mr-1">Python</span>
+                                <span class="bg-cyan-900/50 text-xs px-2 py-1 rounded">LLM</span>
+                            </div>
+                        </div>
+                        <p class="text-gray-300 mt-2">
+                            An AI-powered chatbot leveraging Gemini LLM to process and analyze multiple PDFs for information retrieval.
+                        </p>
+                        <div class="mt-4 flex justify-between items-center">
+                            <div class="flex">
+                                <div class="w-2 h-2 rounded-full bg-cyan-500 mt-1.5 mr-2"></div>
+                                <span class="text-sm text-cyan-400">Active</span>
+                            </div>
+                            <a href="#" class="text-sm flex items-center hover:text-cyan-400 transition">
+                                <span>View Project</span>
+                                <i class="fas fa-arrow-right ml-1 text-xs"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project 3 -->
+                <div class="project-card rounded-2xl overflow-hidden bg-dark border border-teal-500/20">
+                    <div class="overflow-hidden">
+                        <div class="project-image h-48 bg-gradient-to-r from-teal-900/30 to-emerald-900/30 flex items-center justify-center transition duration-500">
+                            <i class="fas fa-shopping-cart text-6xl text-teal-500"></i>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <h3 class="text-xl font-bold">Fine-tuning Gemini on E-commerce Data</h3>
+                            <div class="flex">
+                                <span class="bg-teal-900/50 text-xs px-2 py-1 rounded mr-1">Python</span>
+                                <span class="bg-teal-900/50 text-xs px-2 py-1 rounded">NLP</span>
+                            </div>
+                        </div>
+                        <p class="text-gray-300 mt-2">
+                            Fine-tuning Gemini LLM with custom e-commerce data to enhance product recommendations and customer support.
+                        </p>
+                        <div class="mt-4 flex justify-between items-center">
+                            <div class="flex">
+                                <div class="w-2 h-2 rounded-full bg-teal-500 mt-1.5 mr-2"></div>
+                                <span class="text-sm text-teal-400">Active</span>
+                            </div>
+                            <a href="#" class="text-sm flex items-center hover:text-teal-400 transition">
+                                <span>View Project</span>
+                                <i class="fas fa-arrow-right ml-1 text-xs"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project 4 -->
+                <div class="project-card rounded-2xl overflow-hidden bg-dark border border-cyan-500/20">
+                    <div class="overflow-hidden">
+                        <div class="project-image h-48 bg-gradient-to-r from-blue-900/30 to-sky-900/30 flex items-center justify-center transition duration-500">
+                            <i class="fas fa-stethoscope text-6xl text-sky-500"></i>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <h3 class="text-xl font-bold">Medical Bot with Gemini</h3>
+                            <div class="flex">
+                                <span class="bg-sky-900/50 text-xs px-2 py-1 rounded mr-1">Jupyter</span>
+                                <span class="bg-sky-900/50 text-xs px-2 py-1 rounded">AI</span>
+                            </div>
+                        </div>
+                        <p class="text-gray-300 mt-2">
+                            An AI-powered healthcare chatbot using Gemini LLM to provide medical answers and health advice.
+                        </p>
+                        <div class="mt-4 flex justify-between items-center">
+                            <div class="flex">
+                                <div class="w-2 h-2 rounded-full bg-sky-500 mt-1.5 mr-2"></div>
+                                <span class="text-sm text-sky-400">Active</span>
+                            </div>
+                            <a href="#" class="text-sm flex items-center hover:text-sky-400 transition">
+                                <span>View Project</span>
+                                <i class="fas fa-arrow-right ml-1 text-xs"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="https://github.com/babaiii07?tab=repositories"
+                   class="inline-flex items-center px-5 py-3 bg-primary hover:bg-emerald-500 text-dark font-bold rounded-full transition">
+                    <i class="fab fa-github mr-2"></i>
+                    <span>View All Projects on GitHub</span>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 px-4 max-w-4xl mx-auto">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4"><span class="gradient-text">Let's Connect</span></h2>
+            <p class="max-w-2xl mx-auto text-lg text-gray-300">
+                Have a project in mind or want to discuss AI development? Get in touch with me!
+            </p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <!-- Contact Information -->
+            <div class="bg-accent border border-emerald-500/20 rounded-2xl p-8">
+                <div class="flex items-center mb-8">
+                    <div class="text-5xl text-emerald-400">
+                        <i class="fas fa-envelope"></i>
+                    </div>
+                    <div class="ml-4">
+                        <h3 class="text-xl font-bold">Get in Touch</h3>
+                        <p class="text-gray-300">I'm always open to new opportunities</p>
+                    </div>
+                </div>
+                <div class="space-y-6">
+                    <div class="flex">
+                        <div class="text-emerald-400 mt-1 mr-4">
+                            <i class="fas fa-at"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-semibold">Email</h4>
+                            <a href="mailto:parthibkarak2004@gmail.com" class="text-emerald-300 hover:text-emerald-200">
+                                parthibkarak2004@gmail.com
+                            </a>
+                        </div>
+                    </div>
+                    <div class="flex">
+                        <div class="text-emerald-400 mt-1 mr-4">
+                            <i class="fas fa-map-marker-alt"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-semibold">Location</h4>
+                            <p class="text-gray-300">West Bengal, India</p>
+                        </div>
+                    </div>
+                    <div class="flex">
+                        <div class="text-emerald-400 mt-1 mr-4">
+                            <i class="fas fa-code-branch"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-semibold">Collaboration</h4>
+                            <p class="text-gray-300">Available for freelance projects and research collaborations</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-10">
+                    <h4 class="font-bold mb-4">Connect with me:</h4>
+                    <div class="flex space-x-4">
+                        <a href="https://twitter.com/babaii_0007" target="_blank" class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center hover:bg-blue-600 transition">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="https://linkedin.com/in/parthib-karak-9a0bb1286/" target="_blank" class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center hover:bg-blue-800 transition">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                        <a href="https://stackoverflow.com/users/27420096/parthib-karak" target="_blank" class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center hover:bg-orange-600 transition">
+                            <i class="fab fa-stack-overflow"></i>
+                        </a>
+                        <a href="https://www.instagram.com/babaiii_0007/" target="_blank" class="w-12 h-12 rounded-full bg-pink-600 flex items-center justify-center hover:bg-pink-700 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="https://leetcode.com/u/parthib_007/" target="_blank" class="w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center hover:bg-yellow-600 transition">
+                            <i class="fas fa-code"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- GitHub Stats -->
+            <div class="space-y-6">
+                <div class="bg-accent border border-emerald-500/20 rounded-2xl p-5">
+                    <h3 class="text-xl font-bold mb-3 flex items-center">
+                        <i class="fab fa-github mr-2 text-purple-400"></i>
+                        GitHub Activity
+                    </h3>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="bg-dark p-3 rounded-lg">
+                            <div class="text-2xl font-bold text-center text-emerald-400">237+</div>
+                            <div class="text-sm text-center text-gray-300">Contributions</div>
+                        </div>
+                        <div class="bg-dark p-3 rounded-lg">
+                            <div class="text-2xl font-bold text-center text-cyan-400">14+</div>
+                            <div class="text-sm text-center text-gray-300">Repositories</div>
+                        </div>
+                        <div class="bg-dark p-3 rounded-lg">
+                            <div class="text-2xl font-bold text-center text-emerald-400">2k+</div>
+                            <div class="text-sm text-center text-gray-300">Commits</div>
+                        </div>
+                        <div class="bg-dark p-3 rounded-lg">
+                            <div class="text-2xl font-bold text-center text-cyan-400">21k+</div>
+                            <div class="text-sm text-center text-gray-300">Profile Views</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-accent border border-emerald-500/20 rounded-2xl p-5">
+                    <h3 class="text-xl font-bold mb-3 flex items-center">
+                        <i class="fas fa-trophy mr-2 text-yellow-400"></i>
+                        GitHub Trophies
+                    </h3>
+                    <div class="flex">
+                        <div class="flex-1 text-center">
+                            <div class="text-3xl text-yellow-400">
+                                <i class="fas fa-star"></i>
+                            </div>
+                            <div class="text-sm mt-1">Stars</div>
+                        </div>
+                        <div class="flex-1 text-center">
+                            <div class="text-3xl text-gray-400">
+                                <i class="fas fa-code-commit"></i>
+                            </div>
+                            <div class="text-sm mt-1">Commits</div>
+                        </div>
+                        <div class="flex-1 text-center">
+                            <div class="text-3xl text-amber-700">
+                                <i class="fas fa-code-branch"></i>
+                            </div>
+                            <div class="text-sm mt-1">Repositories</div>
+                        </div>
+                        <div class="flex-1 text-center">
+                            <div class="text-3xl text-sky-400">
+                                <i class="fas fa-upload"></i>
+                            </div>
+                            <div class="text-sm mt-1">Pushes</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="text-center mt-6">
+                    <a href="https://github.com/babaiii07"
+                       class="inline-flex items-center px-5 py-3 bg-gray-800 hover:bg-gray-700 text-white font-medium rounded-full transition">
+                        <i class="fab fa-github mr-2"></i>
+                        <span>Visit My GitHub Profile</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-10 border-t border-emerald-500/10">
+        <div class="max-w-6xl mx-auto px-4 text-center">
+            <div class="flex justify-center mb-6">
+                <div class="w-16 h-1 bg-gradient-to-r from-emerald-500 to-cyan-500 rounded-full"></div>
+            </div>
+            <h2 class="text-2xl font-bold mb-2">Parthib Karak</h2>
+            <p class="text-gray-400 mb-6">AI Developer & Python Backend Specialist</p>
+            <div class="flex justify-center space-x-4 mb-6">
+                <a href="mailto:parthibkarak2004@gmail.com" class="text-emerald-400 hover:text-emerald-300">
+                    <i class="fas fa-envelope"></i>
+                </a>
+                <a href="https://github.com/babaiii07" class="text-gray-400 hover:text-white">
+                    <i class="fab fa-github"></i>
+                </a>
+                <a href="https://twitter.com/babaii_0007" class="text-blue-400 hover:text-blue-300">
+                    <i class="fab fa-twitter"></i>
+                </a>
+                <a href="https://linkedin.com/in/parthib-karak-9a0bb1286/" class="text-blue-500 hover:text-blue-400">
+                    <i class="fab fa-linkedin-in"></i>
+                </a>
+                <a href="https://leetcode.com/u/parthib_007/" class="text-amber-500 hover:text-amber-400">
+                    <i class="fas fa-code"></i>
+                </a>
+            </div>
+            <p class="text-gray-500 text-sm">
+                &copy; 2023 Parthib Karak. All rights reserved.
+            </p>
+        </div>
+    </footer>
+    <!-- Floating action button -->
+    <a href="#" class="fixed right-6 bottom-6 w-12 h-12 rounded-full bg-emerald-500 flex items-center justify-center text-white text-xl shadow-lg hover:bg-emerald-600 transition-all">
+        <i class="fas fa-arrow-up"></i>
+    </a>
+    <script>
+        // Typing effect simulation
+        document.addEventListener('DOMContentLoaded', function() {
+            const textElements = [
+                "Python Backend Developer",
+                "Machine Learning Engineer",
+                "AI Developer"
+            ];
+            let currentText = 0;
+            let currentChar = 0;
+            let isDeleting = false;
+            const typingSpeed = 120;
+            const deleteSpeed = 60;
+            const pauseDuration = 1800;
+            const typeText = () => {
+                const textElement = document.querySelector('.typing-text');
+                const text = textElements[currentText];
+                if (isDeleting) {
+                    textElement.innerHTML = `<span class="text-emerald-400 font-semibold">${text.substring(0, currentChar - 1)}</span>`;
+                    currentChar--;
+                } else {
+                    textElement.innerHTML = `<span class="text-emerald-400 font-semibold">${text.substring(0, currentChar + 1)}</span>`;
+                    currentChar++;
+                }
+                if (!isDeleting && currentChar === text.length) {
+                    setTimeout(() => isDeleting = true, pauseDuration);
+                } else if (isDeleting && currentChar === 0) {
+                    isDeleting = false;
+                    currentText = (currentText + 1) % textElements.length;
+                }
+                const speed = isDeleting ? deleteSpeed : typingSpeed;
+                setTimeout(typeText, speed);
+            };
+            setTimeout(typeText, typingSpeed);
+            // Smooth scrolling for navigation
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    document.querySelector(this.getAttribute('href')).scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                });
+            });
+        });
+    </script>
+</body>
+</html>