Spaces:

parthib07
/

Portfolio

Running

App Files Files Community

parthib07 commited on Jun 9

Commit

67595d1

verified ·

1 Parent(s): 1ab23cd

Update index.html

Browse files

Files changed (1) hide show

index.html +546 -19

index.html CHANGED Viewed

@@ -1,19 +1,546 @@
-<!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>AI Engineer Portfolio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #0a192f;
+            color: #ccd6f6;
+            scroll-behavior: smooth;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #0a192f;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #64ffda;
+            border-radius: 10px;
+        }
+        /* Typing animation */
+        .typing-text {
+            border-right: 2px solid #64ffda;
+            white-space: nowrap;
+            overflow: hidden;
+            display: inline-block;
+        }
+        .fade-in {
+            animation: fadeIn 1s ease-in-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
+        }
+        .card {
+            transition: all 0.3s ease;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -5px;
+            left: 0;
+            background-color: #64ffda;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #64ffda, #a78bfa);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .tech-icon {
+            filter: grayscale(100%);
+            transition: all 0.3s ease;
+        }
+        .tech-icon:hover {
+            filter: grayscale(0%);
+            transform: scale(1.1);
+        }
+        .section {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.6s ease-out;
+        }
+        .section.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    </style>
+</head>
+<body class="antialiased">
+    <!-- Navigation -->
+    <nav class="fixed w-full bg-[#0a192f] bg-opacity-90 z-50 shadow-lg">
+        <div class="max-w-7xl 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">
+                    <a href="#" class="text-xl font-bold text-[#64ffda]">AI<span class="text-white">Port</span></a>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-center space-x-6">
+                        <a href="#home" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">Home</a>
+                        <a href="#about" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">About</a>
+                        <a href="#skills" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">Skills</a>
+                        <a href="#projects" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">Projects</a>
+                        <a href="#contact" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">Contact</a>
+                    </div>
+                </div>
+                <div class="md:hidden">
+                    <button id="mobile-menu-button" class="text-[#ccd6f6] hover:text-[#64ffda] focus:outline-none">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-[#0a192f]">
+            <div class="px-4 pt-2 pb-3 space-y-1">
+                <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">Home</a>
+                <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">About</a>
+                <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">Skills</a>
+                <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">Projects</a>
+                <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">Contact</a>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section id="home" class="min-h-screen flex items-center justify-center pt-16 px-4 sm:px-6 lg:px-8" style="background-image: radial-gradient(circle at 25% 50%, rgba(100, 255, 218, 0.1) 0%, transparent 50%);">
+        <div class="max-w-7xl mx-auto text-center">
+            <div class="mb-6 fade-in" style="animation-delay: 0.2s;">
+                <p class="text-[#64ffda] font-mono text-sm md:text-base">Hi, my name is</p>
+            </div>
+            <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold text-white mb-4 fade-in" style="animation-delay: 0.4s;">
+                <span class="gradient-text">Agnik Bishi</span>
+            </h1>
+            <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-[#8892b0] mb-6 fade-in" style="animation-delay: 0.6s;">
+                <span class="typing-text">Generative AI Engineer</span>
+            </h2>
+            <p class="max-w-2xl mx-auto text-lg text-[#8892b0] mb-10 fade-in" style="animation-delay: 0.8s;">
+                I specialize in building AI systems that generate creative content, from text to images and beyond.
+                My passion lies in pushing the boundaries of what artificial intelligence can create.
+            </p>
+            <div class="fade-in" style="animation-delay: 1s;">
+                <a href="#projects" class="inline-flex items-center px-6 py-3 border border-[#64ffda] text-[#64ffda] rounded-md font-mono text-sm hover:bg-[#64ffda1a] transition duration-300 hover:shadow-lg">
+                    View My Work <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 section">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
+                    <h2 class="text-3xl font-bold text-white mb-6 relative">
+                        <span class="text-[#64ffda] font-mono text-sm md:text-base">01.</span> About Me
+                        <span class="absolute left-32 bottom-0 w-48 h-px bg-[#233554]"></span>
+                    </h2>
+                    <div class="text-[#a8b2d1] mb-6">
+                        <p class="mb-4">
+                            Hello! I'm Agnik, a Generative AI Engineer with over 5 years of experience in designing and implementing cutting-edge AI solutions.
+                            My journey into artificial intelligence began during my Computer Science studies at MIT, where I became fascinated by the creative potential of neural networks.
+                        </p>
+                        <p class="mb-4">
+                            I've worked on diverse projects ranging from text generation models to multimodal AI systems that combine vision and language understanding. At OpenAI, I contributed to the development of large language models, focusing on ethical deployment strategies.
+                        </p>
+                        <p>
+                            When I'm not training models, you can find me writing technical blogs, speaking at AI conferences, or experimenting with new generative architectures in my home lab.
+                        </p>
+                    </div>
+                    <div class="grid grid-cols-2 gap-4 mt-6">
+                        <div class="flex items-center">
+                            <i class="fas fa-check text-[#64ffda] mr-2"></i>
+                            <span class="text-sm text-[#a8b2d1]">Generative Modeling</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-check text-[#64ffda] mr-2"></i>
+                            <span class="text-sm text-[#a8b2d1]">Natural Language Processing</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-check text-[#64ffda] mr-2"></i>
+                            <span class="text-sm text-[#a8b2d1]">Computer Vision</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-check text-[#64ffda] mr-2"></i>
+                            <span class="text-sm text-[#a8b2d1]">AI Ethics</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="md:w-1/2 relative">
+                    <div class="w-64 h-64 md:w-80 md:h-80 mx-auto rounded-lg overflow-hidden relative z-10">
+                        <img src="https://images.unsplash.com/photo-1580894732444-8ecded7900cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                             alt="Alex Chen" class="w-full h-full object-cover grayscale hover:grayscale-0 transition duration-300">
+                        <div class="absolute inset-0 border-4 border-[#64ffda] rounded-lg translate-x-6 translate-y-6 -z-10"></div>
+                    </div>
+                    <div class="absolute top-0 left-0 w-full h-full bg-[#64ffda] opacity-10 rounded-lg -z-20"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Skills Section -->
+    <section id="skills" class="py-20 px-4 sm:px-6 lg:px-8 section" style="background-color: #112240;">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl font-bold text-white mb-16 text-center relative">
+                <span class="text-[#64ffda] font-mono text-sm md:text-base">02.</span> My Skills
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 mb-12">
+                <!-- Tech stack items with hover effects -->
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fas fa-robot text-5xl mb-2"></i>
+                    <span class="text-sm text-center">Generative AI</span>
+                </div>
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fab fa-python text-5xl mb-2"></i>
+                    <span class="text-sm text-center">Python</span>
+                </div>
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fas fa-brain text-5xl mb-2"></i>
+                    <span class="text-sm text-center">TensorFlow</span>
+                </div>
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fas fa-project-diagram text-5xl mb-2"></i>
+                    <span class="text-sm text-center">PyTorch</span>
+                </div>
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fas fa-cloud text-5xl mb-2"></i>
+                    <span class="text-sm text-center">AWS</span>
+                </div>
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fas fa-code text-5xl mb-2"></i>
+                    <span class="text-sm text-center">Transformers</span>
+                </div>
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fas fa-eye text-5xl mb-2"></i>
+                    <span class="text-sm text-center">OpenCV</span>
+                </div>
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fas fa-database text-5xl mb-2"></i>
+                    <span class="text-sm text-center">SQL</span>
+                </div>
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fas fa-chart-line text-5xl mb-2"></i>
+                    <span class="text-sm text-center">Matplotlib</span>
+                </div>
+                <div class="flex flex-col items-center tech-icon">
+                    <i class="fas fa-network-wired text-5xl mb-2"></i>
+                    <span class="text-sm text-center">GANs</span>
+                </div>
+            </div>
+            <div class="bg-[#0a192f] rounded-lg p-8 border border-[#233554]">
+                <h3 class="text-xl font-bold text-white mb-6">Technical Expertise</h3>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <h4 class="text-lg font-semibold text-[#64ffda] mb-3">AI Development</h4>
+                        <ul class="space-y-2 text-[#a8b2d1]">
+                            <li class="flex items-start">
+                                <i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i>
+                                <span>Design and implementation of transformer-based architectures</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i>
+                                <span>Training and fine-tuning of LLMs (GPT, BERT, T5 variants)</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i>
+                                <span>Development of multimodal AI systems</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="text-lg font-semibold text-[#64ffda] mb-3">Research & Optimization</h4>
+                        <ul class="space-y-2 text-[#a8b2d1]">
+                            <li class="flex items-start">
+                                <i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i>
+                                <span>Novel architecture exploration and prototyping</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i>
+                                <span>Model compression and distillation techniques</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i>
+                                <span>Ethical AI alignment research</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Projects Section -->
+    <section id="projects" class="py-20 px-4 sm:px-6 lg:px-8 section">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl font-bold text-white mb-16 relative">
+                <span class="text-[#64ffda] font-mono text-sm md:text-base">03.</span> Featured Projects
+                <span class="absolute left-48 bottom-0 w-48 h-px bg-[#233554]"></span>
+            </h2>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Project 1 -->
+                <div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300">
+                    <div class="flex justify-between items-center mb-4">
+                        <i class="fas fa-book text-2xl text-[#64ffda]"></i>
+                        <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]">
+                            <i class="fab fa-github"></i>
+                        </a>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">CreativeGPT</h3>
+                    <p class="text-[#a8b2d1] text-sm mb-4">
+                        A fine-tuned language model for creative writing assistance, capable of generating poetry, stories, and screenplays with coherent narrative structure.
+                    </p>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Transformers</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">PyTorch</span>
+                    </div>
+                </div>
+                <!-- Project 2 -->
+                <div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300">
+                    <div class="flex justify-between items-center mb-4">
+                        <i class="fas fa-paint-brush text-2xl text-[#64ffda]"></i>
+                        <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]">
+                            <i class="fab fa-github"></i>
+                        </a>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">ArtGAN</h3>
+                    <p class="text-[#a8b2d1] text-sm mb-4">
+                        Generative adversarial network trained to create artwork in various styles, with interactive controls for artists and designers.
+                    </p>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">TensorFlow</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">GAN</span>
+                    </div>
+                </div>
+                <!-- Project 3 -->
+                <div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300">
+                    <div class="flex justify-between items-center mb-4">
+                        <i class="fas fa-music text-2xl text-[#64ffda]"></i>
+                        <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]">
+                            <i class="fab fa-github"></i>
+                        </a>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">MelodyVAE</h3>
+                    <p class="text-[#a8b2d1] text-sm mb-4">
+                        Variational autoencoder for music generation, capable of composing original melodies based on style parameters and artistic constraints.
+                    </p>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">PyTorch</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">VAE</span>
+                    </div>
+                </div>
+                <!-- Project 4 -->
+                <div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300">
+                    <div class="flex justify-between items-center mb-4">
+                        <i class="fas fa-comments text-2xl text-[#64ffda]"></i>
+                        <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]">
+                            <i class="fab fa-github"></i>
+                        </a>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">DialogueFlow</h3>
+                    <p class="text-[#a8b2d1] text-sm mb-4">
+                        Conversational AI framework with controllable personality traits and domain adaptation capabilities for various applications.
+                    </p>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">BERT</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">NLP</span>
+                    </div>
+                </div>
+                <!-- Project 5 -->
+                <div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300">
+                    <div class="flex justify-between items-center mb-4">
+                        <i class="fas fa-image text-2xl text-[#64ffda]"></i>
+                        <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]">
+                            <i class="fab fa-github"></i>
+                        </a>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">DreamCanvas</h3>
+                    <p class="text-[#a8b2d1] text-sm mb-4">
+                        Text-to-image generation tool with fine-grained creative controls and iterative refinement for digital artists and content creators.
+                    </p>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Diffusion</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">CLIP</span>
+                    </div>
+                </div>
+                <!-- Project 6 -->
+                <div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300">
+                    <div class="flex justify-between items-center mb-4">
+                        <i class="fas fa-code text-2xl text-[#64ffda]"></i>
+                        <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]">
+                            <i class="fab fa-github"></i>
+                        </a>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">EthosAI</h3>
+                    <p class="text-[#a8b2d1] text-sm mb-4">
+                        Framework for detecting and mitigating bias, toxicity, and harmful outputs in generative AI models across multiple modalities.
+                    </p>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">AI Safety</span>
+                        <span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">NLP</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 section" style="background-color: #112240;">
+        <div class="max-w-3xl mx-auto text-center">
+            <h2 class="text-3xl font-bold text-white mb-6 relative">
+                <span class="text-[#64ffda] font-mono text-sm md:text-base">04.</span> Get In Touch
+            </h2>
+            <p class="text-[#a8b2d1] mb-10">
+                I'm currently looking for new opportunities in generative AI research and development.
+                Whether you have a question, want to collaborate, or just want to say hi, I'll do my best to get back to you!
+            </p>
+            <a href="mailto:[email protected]" class="inline-flex items-center px-6 py-3 border border-[#64ffda] text-[#64ffda] rounded-md font-mono text-sm hover:bg-[#64ffda1a] transition duration-300">
+                Say Hello <i class="fas fa-paper-plane ml-2"></i>
+            </a>
+            <div class="mt-16 flex justify-center space-x-6">
+                <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda] transition duration-300 text-xl">
+                    <i class="fab fa-github"></i>
+                </a>
+                <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda] transition duration-300 text-xl">
+                    <i class="fab fa-linkedin-in"></i>
+                </a>
+                <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda] transition duration-300 text-xl">
+                    <i class="fab fa-twitter"></i>
+                </a>
+                <a href="#" class="text-[#a8b2d1] hover:text-[#64ffda] transition duration-300 text-xl">
+                    <i class="fab fa-medium-m"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-6 px-4 sm:px-6 lg:px-8 text-center text-sm text-[#a8b2d1]">
+        <div class="max-w-7xl mx-auto">
+            <p>Built by Agnik Bishi | Inspired by amazing AI researchers everywhere</p>
+            <p class="mt-2">© 2023 All rights reserved</p>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('mobile-menu-button').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        // Typing animation for hero section
+        const phrases = [
+            "Generative AI Engineer",
+            "Machine Learning Researcher",
+            "AI Ethicist",
+            "Creative Technologist",
+            "Neural Network Architect"
+        ];
+        let currentPhrase = 0;
+        let currentChar = 0;
+        let typingElement = document.querySelector('.typing-text');
+        let isDeleting = false;
+        let shouldWait = false;
+        function type() {
+            const currentText = phrases[currentPhrase];
+            if (isDeleting) {
+                typingElement.textContent = currentText.substring(0, currentChar - 1);
+                currentChar--;
+            } else {
+                typingElement.textContent = currentText.substring(0, currentChar + 1);
+                currentChar++;
+            }
+            if (!isDeleting && currentChar === currentText.length) {
+                shouldWait = true;
+                setTimeout(() => {
+                    isDeleting = true;
+                    shouldWait = false;
+                }, 1500);
+            } else if (isDeleting && currentChar === 0) {
+                isDeleting = false;
+                currentPhrase = (currentPhrase + 1) % phrases.length;
+            }
+            const typingSpeed = isDeleting ? 15 : shouldWait ? 0 : 40;
+            setTimeout(type, typingSpeed);
+        }
+        // Start typing animation after 0.5 second
+        setTimeout(type, 500);
+        // Intersection Observer for scroll animations
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, {
+            threshold: 0.1
+        });
+        // Observe all sections with the 'section' class
+        document.querySelectorAll('.section').forEach(section => {
+            observer.observe(section);
+        });
+    </script>
+</body>
+</html>