Update index.html

index.html

@@ -4,727 +4,298 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Aditya Singh Gaur - AI/ML Portfolio</title>
-    <!-- Load Font Awesome for icons -->
+    <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">
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --primary: #6c63ff;
-            --secondary: #4a44b5;
-            --dark: #1a1a2e;
-            --darker: #0f0c29;
-            --light: #f8f9fa;
-            --accent: #00dbde;
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Poppins', sans-serif;
-        }
-        
-        body {
-            background: linear-gradient(135deg, var(--darker), #302b63, #24243e);
-            color: var(--light);
-            min-height: 100vh;
-            line-height: 1.6;
-        }
-        
         .gradient-bg {
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-        }
-        
-        .container {
-            width: 100%;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-        
-        header {
-            padding: 80px 0;
-            position: relative;
-            overflow: hidden;
-        }
-        
-        header::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle at top right, rgba(108, 99, 255, 0.2), transparent 70%);
-            pointer-events: none;
-        }
-        
-        .flex {
-            display: flex;
-        }
-        
-        .flex-col {
-            flex-direction: column;
-        }
-        
-        .md\:flex-row {
-            flex-direction: column;
-        }
-        
-        .items-center {
-            align-items: center;
-        }
-        
-        .justify-between {
-            justify-content: space-between;
-        }
-        
-        .mb-8 {
-            margin-bottom: 2rem;
-        }
-        
-        .md\:mb-0 {
-            margin-bottom: 0;
-        }
-        
-        .text-4xl {
-            font-size: 2.25rem;
-            font-family: 'Montserrat', sans-serif;
-        }
-        
-        .md\:text-5xl {
-            font-size: 3rem;
-        }
-        
-        .font-bold {
-            font-weight: 700;
-        }
-        
-        .mb-2 {
-            margin-bottom: 0.5rem;
-        }
-        
-        .text-xl {
-            font-size: 1.25rem;
-        }
-        
-        .md\:text-2xl {
-            font-size: 1.5rem;
-        }
-        
-        .opacity-90 {
-            opacity: 0.9;
-        }
-        
-        .space-x-4 > * + * {
-            margin-left: 1rem;
-        }
-        
-        .bg-white {
-            background-color: white;
-        }
-        
-        .text-purple-700 {
-            color: #6c63ff;
-        }
-        
-        .p-3 {
-            padding: 0.75rem;
-        }
-        
-        .rounded-full {
-            border-radius: 9999px;
-        }
-        
-        .hover\:bg-purple-100:hover {
-            background-color: #e0d7ff;
-        }
-        
-        .transition {
-            transition: all 0.3s ease;
-        }
-        
-        .text-2xl {
-            font-size: 1.5rem;
-        }
-        
-        .text-blue-600 {
-            color: #2563eb;
-        }
-        
-        .hover\:bg-blue-100:hover {
-            background-color: #dbeafe;
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
         }
-        
-        .text-red-500 {
-            color: #ef4444;
-        }
-        
-        .hover\:bg-red-100:hover {
-            background-color: #fee2e2;
-        }
-        
-        /* Content section */
-        .content {
-            padding: 60px 0;
-            background-color: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            margin: 40px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-        }
-        
-        .section-title {
-            text-align: center;
-            font-size: 2.5rem;
-            margin-bottom: 40px;
-            position: relative;
-            font-family: 'Montserrat', sans-serif;
-            font-weight: 700;
-            background: linear-gradient(to right, var(--accent), var(--primary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        
-        .skills-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 30px;
-            padding: 0 40px;
-        }
-        
-        .skill-card {
-            background: rgba(255, 255, 255, 0.08);
-            border-radius: 15px;
-            padding: 30px;
-            text-align: center;
-            transition: all 0.4s ease;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        
-        .skill-card:hover {
-            transform: translateY(-10px);
-            background: rgba(108, 99, 255, 0.15);
-            box-shadow: 0 10px 25px rgba(108, 99, 255, 0.2);
-        }
-        
-        .skill-icon {
-            font-size: 3rem;
-            margin-bottom: 20px;
-            background: linear-gradient(135deg, var(--primary), var(--accent));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        
-        .skill-title {
-            font-size: 1.5rem;
-            margin-bottom: 15px;
-            font-weight: 600;
-        }
-        
-        .skill-desc {
-            color: rgba(255, 255, 255, 0.8);
-            line-height: 1.6;
-            font-size: 0.95rem;
-        }
-        
-        /* Projects Section */
-        .projects {
-            padding: 60px 0;
-        }
-        
-        .project-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
-            padding: 0 40px;
-        }
-        
-        .project-card {
-            background: rgba(255, 255, 255, 0.08);
-            border-radius: 15px;
-            overflow: hidden;
-            transition: all 0.4s ease;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        
         .project-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-        }
-        
-        .project-img {
-            height: 200px;
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 4rem;
-            color: white;
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
-        
-        .project-content {
-            padding: 25px;
-        }
-        
-        .project-title {
-            font-size: 1.4rem;
-            margin-bottom: 12px;
-            font-weight: 600;
-        }
-        
-        .project-desc {
-            color: rgba(255, 255, 255, 0.8);
-            margin-bottom: 20px;
-            font-size: 0.95rem;
-        }
-        
-        .project-tags {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin-bottom: 20px;
-        }
-        
-        .tag {
-            background: rgba(108, 99, 255, 0.2);
-            color: var(--primary);
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 0.8rem;
-        }
-        
-        .btn {
-            display: inline-block;
-            background: linear-gradient(135deg, var(--primary), var(--accent));
+        .skill-pill:hover {
+            background-color: #4f46e5;
             color: white;
-            padding: 10px 25px;
-            border-radius: 30px;
-            text-decoration: none;
-            font-weight: 500;
-            transition: all 0.3s ease;
-        }
-        
-        .btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);
-        }
-        
-        /* About Section */
-        .about {
-            padding: 60px 0;
-        }
-        
-        .about-content {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            gap: 40px;
-            padding: 0 40px;
-        }
-        
-        .about-text {
-            flex: 1;
-            min-width: 300px;
-        }
-        
-        .about-img {
-            flex: 1;
-            min-width: 300px;
-            height: 350px;
-            background: linear-gradient(135deg, var(--primary), var(--accent));
-            border-radius: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 5rem;
-            color: white;
-        }
-        
-        .about-title {
-            font-size: 2rem;
-            margin-bottom: 20px;
-            font-family: 'Montserrat', sans-serif;
-            background: linear-gradient(to right, var(--accent), var(--primary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        
-        .about-desc {
-            color: rgba(255, 255, 255, 0.8);
-            margin-bottom: 25px;
-            line-height: 1.8;
-        }
-        
-        /* Contact Section */
-        .contact {
-            padding: 60px 0;
-        }
-        
-        .contact-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 40px;
-            padding: 0 40px;
-        }
-        
-        .contact-info {
-            background: rgba(255, 255, 255, 0.08);
-            border-radius: 15px;
-            padding: 30px;
-            text-align: center;
-        }
-        
-        .contact-icon {
-            font-size: 2.5rem;
-            margin-bottom: 20px;
-            color: var(--primary);
-        }
-        
-        .contact-title {
-            font-size: 1.4rem;
-            margin-bottom: 15px;
-            font-weight: 600;
-        }
-        
-        .contact-detail {
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 1.1rem;
-        }
-        
-        .social-links {
-            display: flex;
-            justify-content: center;
-            gap: 15px;
-            margin-top: 20px;
-        }
-        
-        @media (min-width: 768px) {
-            .md\:flex-row {
-                flex-direction: row;
-            }
-        }
-        
-        /* Animation for header text */
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        
-        .animated {
-            animation: fadeInUp 1s ease-out forwards;
-        }
-        
-        .delay-1 {
-            animation-delay: 0.2s;
-        }
-        
-        .delay-2 {
-            animation-delay: 0.4s;
-        }
-        
-        .delay-3 {
-            animation-delay: 0.6s;
-        }
-        
-        /* Particles Background */
-        #particles-js {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-            z-index: -1;
-        }
-        
-        /* Footer */
-        footer {
-            text-align: center;
-            padding: 40px 0;
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 0.9rem;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            margin-top: 60px;
-        }
-        
-        .footer-links {
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-        
-        .footer-link {
-            color: rgba(255, 255, 255, 0.7);
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-        
-        .footer-link:hover {
-            color: var(--primary);
         }
     </style>
 </head>
-<body>
-    <!-- Particles Background -->
-    <div id="particles-js"></div>
-    
+<body class="bg-gray-50 font-sans">
     <!-- Header Section -->
     <header class="gradient-bg text-white py-12">
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row items-center justify-between">
-                <div class="mb-8 md:mb-0 animated">
+                <div class="mb-8 md:mb-0">
                     <h1 class="text-4xl md:text-5xl font-bold mb-2">Aditya Singh Gaur</h1>
-                    <p class="text-xl md:text-2xl opacity-90 delay-1 animated">AI/ML Engineer & Generative AI Specialist</p>
-                    <div class="mt-6">
-                        <a href="#contact" class="btn">Get In Touch</a>
-                    </div>
+                    <p class="text-xl md:text-2xl opacity-90">AI/ML Engineer & Generative AI Specialist</p>
                 </div>
                 <div class="flex space-x-4">
-                    <a href="https://github.com/gaur3009-p" class="bg-white text-purple-700 p-3 rounded-full hover:bg-purple-100 transition delay-2 animated">
+                    <a href="https://github.com/gaur3009-p" target="_blank" class="bg-white text-purple-700 p-3 rounded-full hover:bg-purple-100 transition">
                         <i class="fab fa-github text-2xl"></i>
                     </a>
-                    <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="bg-white text-blue-600 p-3 rounded-full hover:bg-blue-100 transition delay-2 animated">
+                    <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="bg-white text-blue-600 p-3 rounded-full hover:bg-blue-100 transition">
                         <i class="fab fa-linkedin-in text-2xl"></i>
                     </a>
-                    <a href="mailto:[email protected]" class="bg-white text-red-500 p-3 rounded-full hover:bg-red-100 transition delay-2 animated">
+                    <a href="mailto:[email protected]" class="bg-white text-red-500 p-3 rounded-full hover:bg-red-100 transition">
                         <i class="fas fa-envelope text-2xl"></i>
                     </a>
                 </div>
             </div>
         </div>
     </header>
-    
-    <!-- Skills Section -->
-    <section class="content">
-        <h2 class="section-title">My Expertise</h2>
-        <div class="skills-container">
-            <div class="skill-card">
-                <div class="skill-icon">
-                    <i class="fas fa-brain"></i>
-                </div>
-                <h3 class="skill-title">Machine Learning</h3>
-                <p class="skill-desc">Building predictive models and implementing ML algorithms for real-world applications. Expertise in regression, classification, clustering, and recommendation systems.</p>
-            </div>
+
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-12">
+        <!-- About Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b-2 border-purple-200 pb-2">About Me</h2>
+            <p class="text-gray-700 text-lg leading-relaxed">
+                AI/ML Engineer specializing in Natural Language Processing and Generative AI applications. 
+                Passionate about building innovative solutions that bridge human-computer interaction through 
+                voice interfaces, intelligent chatbots, and creative AI tools. Experienced in both technical 
+                implementation and product strategy for AI-powered startups.
+            </p>
+        </section>
+
+        <!-- Projects Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b-2 border-purple-200 pb-2">Featured Projects</h2>
             
-            <div class="skill-card">
-                <div class="skill-icon">
-                    <i class="fas fa-robot"></i>
-                </div>
-                <h3 class="skill-title">Generative AI</h3>
-                <p class="skill-desc">Creating innovative solutions with GANs, transformers, and other generative models. Experience with Stable Diffusion, GPT models, and creative AI applications.</p>
-            </div>
-            
-            <div class="skill-card">
-                <div class="skill-icon">
-                    <i class="fas fa-chart-line"></i>
-                </div>
-                <h3 class="skill-title">Data Science</h3>
-                <p class="skill-desc">Extracting insights from complex datasets using statistical analysis, data visualization, and predictive modeling. Proficient in Python, SQL, and data engineering.</p>
-            </div>
-            
-            <div class="skill-card">
-                <div class="skill-icon">
-                    <i class="fas fa-code"></i>
-                </div>
-                <h3 class="skill-title">Deep Learning</h3>
-                <p class="skill-desc">Developing neural network architectures for computer vision, NLP, and time-series analysis. Experience with TensorFlow, PyTorch, and Keras frameworks.</p>
-            </div>
-        </div>
-    </section>
-    
-    <!-- Projects Section -->
-    <section class="projects">
-        <div class="container">
-            <h2 class="section-title">Featured Projects</h2>
-            <div class="project-grid">
-                <div class="project-card">
-                    <div class="project-img">
-                        <i class="fas fa-robot"></i>
+            <!-- Project 1 -->
+            <div class="project-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
+                <div class="md:flex">
+                    <div class="md:flex-shrink-0 md:w-1/3 bg-gradient-to-r from-purple-500 to-indigo-600 p-8 flex items-center justify-center">
+                        <i class="fas fa-microphone-alt text-white text-8xl"></i>
                     </div>
-                    <div class="project-content">
-                        <h3 class="project-title">AI-Powered Content Generator</h3>
-                        <div class="project-tags">
-                            <span class="tag">Generative AI</span>
-                            <span class="tag">NLP</span>
-                            <span class="tag">GPT-4</span>
+                    <div class="p-8 md:w-2/3">
+                        <div class="uppercase tracking-wide text-sm text-indigo-600 font-semibold mb-1">NLP & Speech Processing</div>
+                        <h3 class="text-2xl font-bold text-gray-800 mb-3">Speech Grammar Correction via Voice Input</h3>
+                        <p class="text-gray-600 mb-4">
+                            Enables users to speak grammatically incorrect sentences, and the system automatically corrects them using AI-based NLP models. 
+                            Combines Automatic Speech Recognition (ASR), grammar correction transformers, and Text-to-Speech (TTS) to complete the loop.
+                        </p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Python</span>
+                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Gradio</span>
+                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Transformers</span>
+                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">TTS</span>
+                            <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Hugging Face</span>
+                        </div>
+                        <div class="flex flex-col sm:flex-row gap-3">
+                            <a href="https://huggingface.co/spaces/gaur3009-p/SHL_assign" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-center transition">
+                                <i class="fas fa-external-link-alt mr-2"></i> Live Demo
+                            </a>
+                            <a href="https://github.com/gaur3009-p/SHL_assign" target="_blank" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg text-center transition">
+                                <i class="fab fa-github mr-2"></i> GitHub Repo
+                            </a>
                         </div>
-                        <p class="project-desc">Developed a content generation platform using transformer models that produces high-quality articles, social media posts, and marketing copy.</p>
-                        <a href="#" class="btn">View Project</a>
                     </div>
                 </div>
-                
-                <div class="project-card">
-                    <div class="project-img">
-                        <i class="fas fa-chart-bar"></i>
+            </div>
+            
+            <!-- Project 2 -->
+            <div class="project-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
+                <div class="md:flex">
+                    <div class="md:flex-shrink-0 md:w-1/3 bg-gradient-to-r from-blue-500 to-teal-600 p-8 flex items-center justify-center">
+                        <i class="fas fa-robot text-white text-8xl"></i>
                     </div>
-                    <div class="project-content">
-                        <h3 class="project-title">Predictive Analytics Dashboard</h3>
-                        <div class="project-tags">
-                            <span class="tag">Machine Learning</span>
-                            <span class="tag">Data Visualization</span>
-                            <span class="tag">Dashboard</span>
+                    <div class="p-8 md:w-2/3">
+                        <div class="uppercase tracking-wide text-sm text-blue-600 font-semibold mb-1">Question Answering System</div>
+                        <h3 class="text-2xl font-bold text-gray-800 mb-3">QA Bot – RAG-Based Question Answering System</h3>
+                        <p class="text-gray-600 mb-4">
+                            Developed a chatbot capable of answering questions from custom documents using Retrieval Augmented Generation (RAG). 
+                            Built using vector databases, LLMs, and document chunking strategies to handle both unstructured and semi-structured data.
+                        </p>
+                        <div class="mb-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">Features:</h4>
+                            <ul class="list-disc list-inside text-gray-600 space-y-1">
+                                <li>Upload any document (PDF, DOCX, TXT)</li>
+                                <li>Parses and indexes with Weaviate</li>
+                                <li>Queries answered with accuracy and real-time context awareness</li>
+                            </ul>
+                        </div>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Weaviate-Client</span>
+                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Cohere</span>
+                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Gradio</span>
+                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">PyPDFLoader</span>
                         </div>
-                        <p class="project-desc">Created a real-time analytics dashboard that predicts customer behavior and sales trends with 92% accuracy using ensemble learning techniques.</p>
-                        <a href="#" class="btn">View Project</a>
+                        <a href="https://github.com/gaur3009-p/QA_Bot" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
+                            <i class="fab fa-github mr-2"></i> GitHub Repo
+                        </a>
                     </div>
                 </div>
-                
-                <div class="project-card">
-                    <div class="project-img">
-                        <i class="fas fa-eye"></i>
+            </div>
+            
+            <!-- Project 3 -->
+            <div class="project-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
+                <div class="md:flex">
+                    <div class="md:flex-shrink-0 md:w-1/3 bg-gradient-to-r from-pink-500 to-rose-600 p-8 flex items-center justify-center">
+                        <i class="fas fa-rocket text-white text-8xl"></i>
                     </div>
-                    <div class="project-content">
-                        <h3 class="project-title">Computer Vision for Medical Imaging</h3>
-                        <div class="project-tags">
-                            <span class="tag">Deep Learning</span>
-                            <span class="tag">Computer Vision</span>
-                            <span class="tag">Healthcare</span>
+                    <div class="p-8 md:w-2/3">
+                        <div class="uppercase tracking-wide text-sm text-pink-600 font-semibold mb-1">Startup Experience</div>
+                        <h3 class="text-2xl font-bold text-gray-800 mb-3">Rookus Startup – GenAI Campaign Pivot</h3>
+                        <p class="text-gray-600 mb-4">
+                            Originally began with a vision to generate fashion designs using AI, but pivoted to Creative Campaigns as a Service (CaaS) 
+                            after identifying market needs. Built AI tools for generating marketing content, product descriptions, and integrating with 
+                            SEO tools and CRM workflows.
+                        </p>
+                        <div class="mb-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">Impact:</h4>
+                            <ul class="list-disc list-inside text-gray-600 space-y-1">
+                                <li>Runner-Up in the BIT Winter Cohort (July 26th 2025)</li>
+                                <li>Secured initial funding and praise for innovation</li>
+                                <li>Judges appreciated the pivot and idea clarity</li>
+                            </ul>
+                        </div>
+                        <div class="mb-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">Key Learnings:</h4>
+                            <ul class="list-disc list-inside text-gray-600 space-y-1">
+                                <li>Market research and user demand are critical</li>
+                                <li>Pivoting at the right time can transform product trajectory</li>
+                                <li>Effective storytelling and problem solving wins investors</li>
+                            </ul>
                         </div>
-                        <p class="project-desc">Built a CNN model that detects anomalies in medical scans with 97% accuracy, reducing diagnosis time by 40% for healthcare professionals.</p>
-                        <a href="#" class="btn">View Project</a>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-    
-    <!-- About Section -->
-    <section class="about">
-        <div class="container">
-            <h2 class="section-title">About Me</h2>
-            <div class="about-content">
-                <div class="about-text">
-                    <h3 class="about-title">Innovating with Artificial Intelligence</h3>
-                    <p class="about-desc">I'm an AI/ML Engineer specializing in developing cutting-edge solutions that bridge the gap between theoretical research and practical applications. With a passion for generative AI, I create systems that not only solve complex problems but also inspire creativity.</p>
-                    <p class="about-desc">My approach combines deep technical expertise with a user-centered design philosophy, ensuring that AI solutions are both powerful and accessible. I stay at the forefront of AI advancements, continuously exploring new techniques and frameworks.</p>
-                    <div class="mt-6">
-                        <a href="#" class="btn">Download Resume</a>
-                    </div>
+        </section>
+
+        <!-- Skills Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b-2 border-purple-200 pb-2">Technical Skills</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div class="skill-pill bg-white p-6 rounded-lg shadow-sm border border-gray-200 transition duration-300">
+                    <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
+                        <i class="fas fa-language text-purple-600 mr-2"></i> NLP & LLMs
+                    </h3>
+                    <ul class="space-y-2 text-gray-700">
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Prompt engineering & fine-tuning</li>
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Retrieval-Augmented Generation (RAG)</li>
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Speech-to-Text & Text-to-Speech</li>
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Grammar correction models</li>
+                    </ul>
                 </div>
-                <div class="about-img">
-                    <i class="fas fa-user-astronaut"></i>
+                <div class="skill-pill bg-white p-6 rounded-lg shadow-sm border border-gray-200 transition duration-300">
+                    <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
+                        <i class="fas fa-laptop-code text-blue-600 mr-2"></i> Development
+                    </h3>
+                    <ul class="space-y-2 text-gray-700">
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Python programming</li>
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Gradio UI development</li>
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Hugging Face ecosystem</li>
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Vector databases (Weaviate)</li>
+                    </ul>
+                </div>
+                <div class="skill-pill bg-white p-6 rounded-lg shadow-sm border border-gray-200 transition duration-300">
+                    <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
+                        <i class="fas fa-lightbulb text-yellow-600 mr-2"></i> Product & Strategy
+                    </h3>
+                    <ul class="space-y-2 text-gray-700">
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> AI product development</li>
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Market research & validation</li>
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Startup pitching & storytelling</li>
+                        <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Product pivoting strategies</li>
+                    </ul>
                 </div>
             </div>
-        </div>
-    </section>
-    
-    <!-- Contact Section -->
-    <section id="contact" class="contact">
-        <div class="container">
-            <h2 class="section-title">Get In Touch</h2>
-            <div class="contact-container">
-                <div class="contact-info">
-                    <div class="contact-icon">
-                        <i class="fas fa-envelope"></i>
+        </section>
+
+        <!-- Contact Section -->
+        <section>
+            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b-2 border-purple-200 pb-2">Get In Touch</h2>
+            <div class="bg-white rounded-lg shadow-md p-8">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div>
+                        <h3 class="text-xl font-semibold mb-4 text-gray-800">Contact Information</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-start">
+                                <i class="fas fa-envelope text-purple-600 mt-1 mr-3"></i>
+                                <div>
+                                    <p class="text-gray-600">Email</p>
+                                    <a href="mailto:[email protected]" class="text-gray-800 font-medium hover:text-purple-600 transition">[email protected]</a>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <i class="fab fa-github text-purple-600 mt-1 mr-3"></i>
+                                <div>
+                                    <p class="text-gray-600">GitHub</p>
+                                    <a href="https://github.com/gaur3009-p" target="_blank" class="text-gray-800 font-medium hover:text-purple-600 transition">github.com/gaur3009-p</a>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <i class="fab fa-linkedin-in text-purple-600 mt-1 mr-3"></i>
+                                <div>
+                                    <p class="text-gray-600">LinkedIn</p>
+                                    <a href="#" target="_blank" class="text-gray-800 font-medium hover:text-purple-600 transition">linkedin.com/in/aditya-gaur</a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <h3 class="contact-title">Email</h3>
-                    <p class="contact-detail">[email protected]</p>
-                    <div class="social-links">
-                        <a href="mailto:[email protected]" class="bg-white text-purple-700 p-3 rounded-full hover:bg-purple-100 transition">
-                            <i class="fas fa-paper-plane"></i>
-                        </a>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-4 text-gray-800">Send a Message</h3>
+                        <form class="space-y-4">
+                            <div>
+                                <label for="name" class="block text-gray-700 mb-1">Name</label>
+                                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition">
+                            </div>
+                            <div>
+                                <label for="email" class="block text-gray-700 mb-1">Email</label>
+                                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition">
+                            </div>
+                            <div>
+                                <label for="message" class="block text-gray-700 mb-1">Message</label>
+                                <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition"></textarea>
+                            </div>
+                            <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg transition">
+                                Send Message
+                            </button>
+                        </form>
                     </div>
                 </div>
-                
-                <div class="contact-info">
-                    <div class="contact-icon">
-                        <i class="fab fa-github"></i>
-                    </div>
-                    <h3 class="contact-title">GitHub</h3>
-                    <p class="contact-detail">github.com/gaur3009-p</p>
-                    <div class="social-links">
-                        <a href="https://github.com/gaur3009-p" class="bg-white text-purple-700 p-3 rounded-full hover:bg-purple-100 transition">
-                            <i class="fab fa-github"></i>
-                        </a>
-                    </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <p>&copy; 2025 Aditya Singh Gaur. All rights reserved.</p>
                 </div>
-                
-                <div class="contact-info">
-                    <div class="contact-icon">
-                        <i class="fab fa-linkedin"></i>
-                    </div>
-                    <h3 class="contact-title">LinkedIn</h3>
-                    <p class="contact-detail">linkedin.com/in/aditya-singh-gaur</p>
-                    <div class="social-links">
-                        <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="bg-white text-blue-600 p-3 rounded-full hover:bg-blue-100 transition">
-                            <i class="fab fa-linkedin-in"></i>
-                        </a>
-                    </div>
+                <div class="flex space-x-4">
+                    <a href="https://www.githib.com/gaur3009-p" class="hover:text-purple-300 transition">
+                        <i class="fab fa-github text-xl"></i>
+                    </a>
+                    <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="hover:text-blue-300 transition">
+                        <i class="fab fa-linkedin-in text-xl"></i>
+                    </a>
                 </div>
             </div>
         </div>
-    </section>
-    
-    <footer>
-        <div class="container">
-            <div class="footer-links">
-                <a href="#" class="footer-link">Home</a>
-                <a href="#about" class="footer-link">About</a>
-                <a href="#projects" class="footer-link">Projects</a>
-                <a href="#contact" class="footer-link">Contact</a>
-            </div>
-            <p>© 2023 Aditya Singh Gaur. All rights reserved.</p>
-            <p class="mt-2">Designed with ❤️ and AI</p>
-        </div>
     </footer>
-    
-    <!-- Particles.js -->
-    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+
     <script>
-        // Particles.js configuration
+        // Simple animation for project cards on scroll
         document.addEventListener('DOMContentLoaded', function() {
-            particlesJS('particles-js', {
-                particles: {
-                    number: { value: 80, density: { enable: true, value_area: 800 } },
-                    color: { value: "#6c63ff" },
-                    shape: { type: "circle" },
-                    opacity: { value: 0.5, random: true },
-                    size: { value: 3, random: true },
-                    line_linked: {
-                        enable: true,
-                        distance: 150,
-                        color: "#6c63ff",
-                        opacity: 0.3,
-                        width: 1
-                    },
-                    move: {
-                        enable: true,
-                        speed: 2,
-                        direction: "none",
-                        random: true,
-                        straight: false,
-                        out_mode: "out",
-                        bounce: false
-                    }
-                },
-                interactivity: {
-                    detect_on: "canvas",
-                    events: {
-                        onhover: { enable: true, mode: "repulse" },
-                        onclick: { enable: true, mode: "push" },
-                        resize: true
-                    }
-                },
-                retina_detect: true
-            });
+            const projectCards = document.querySelectorAll('.project-card');
             
-            // Add smooth scrolling
-            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-                anchor.addEventListener('click', function (e) {
-                    e.preventDefault();
-                    document.querySelector(this.getAttribute('href')).scrollIntoView({
-                        behavior: 'smooth'
-                    });
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = 1;
+                        entry.target.style.transform = 'translateY(0)';
+                    }
                 });
+            }, { threshold: 0.1 });
+            
+            projectCards.forEach(card => {
+                card.style.opacity = 0;
+                card.style.transform = 'translateY(20px)';
+                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+                observer.observe(card);
             });
         });
     </script>