let's strip this back a lot. all i need is the featured projects section - no landing blurb, no links, no newsletter signup, not even a title.

index.html

@@ -44,29 +44,11 @@
             </div>
         </div>
     </nav>
-
-    <!-- Hero Section -->
-    <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
-        <div id="vanta-bg" class="absolute inset-0 z-0"></div>
-        <div class="container mx-auto px-6 text-center z-10">
-            <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Crafting Digital Dreams</h1>
-            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">Transforming ideas into interactive experiences through code, creativity, and cutting-edge technology.</p>
-            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="projects.html" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">Explore Projects</a>
-                <a href="contact.html" class="border border-secondary text-secondary hover:bg-secondary/10 px-8 py-3 rounded-lg font-semibold transition-all">Get In Touch</a>
-            </div>
-        </div>
-        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
-            <i data-feather="chevron-down" class="text-gray-400"></i>
-        </div>
-    </section>
-
-    <!-- Featured Projects Preview -->
-    <section class="py-20 bg-gray-800/50">
+    <!-- Featured Projects -->
+    <section class="min-h-screen py-20 bg-gray-900">
         <div class="container mx-auto px-6">
-            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Featured Projects</h2>
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Project Card 1 -->
+<!-- Project Card 1 -->
                 <div class="bg-gray-800 rounded-xl p-6 hover:transform hover:scale-105 transition-all duration-300 border border-gray-700 hover:border-primary/50">
                     <div class="w-full h-48 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-lg mb-4 flex items-center justify-center">
                         <i data-feather="code" class="text-6xl text-primary"></i>
@@ -117,75 +99,11 @@
                     </a>
                 </div>
             </div>
-            <div class="text-center mt-12">
-                <a href="projects.html" class="inline-flex items-center gap-2 bg-secondary hover:bg-secondary/90 text-gray-900 px-6 py-3 rounded-lg font-semibold transition-all">
-                    View All Projects <i data-feather="arrow-right" class="w-4 h-4"></i>
-                </a>
-            </div>
         </div>
     </section>
-
-    <!-- Footer -->
-    <footer class="bg-gray-800 border-t border-gray-700 py-12">
-        <div class="container mx-auto px-6">
-            <div class="grid md:grid-cols-4 gap-8">
-                <div>
-                    <h3 class="text-xl font-bold mb-4 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">CodeCraft.dev</h3>
-                    <p class="text-gray-400">Building the future one line of code at a time.</p>
-                </div>
-                <div>
-                    <h4 class="font-semibold mb-4">Quick Links</h4>
-                    <ul class="space-y-2 text-gray-400">
-                        <li><a href="index.html" class="hover:text-primary transition-colors">Home</a></li>
-                        <li><a href="about.html" class="hover:text-primary transition-colors">About</a></li>
-                        <li><a href="projects.html" class="hover:text-primary transition-colors">Projects</a></li>
-                        <li><a href="contact.html" class="hover:text-primary transition-colors">Contact</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="font-semibold mb-4">Connect</h4>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i data-feather="github"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i data-feather="linkedin"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i data-feather="twitter"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i data-feather="mail"></i></a>
-                    </div>
-                </div>
-                <div>
-                    <h4 class="font-semibold mb-4">Newsletter</h4>
-                    <div class="flex">
-                        <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary flex-1">
-                        <button class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-colors">
-                            <i data-feather="send" class="w-4 h-4"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
-                <p>&copy; 2024 CodeCraft Portfolio. All rights reserved.</p>
-            </div>
-        </div>
-    </footer>
-
     <script>
-        // Vanta.js Background
-        VANTA.NET({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x8b5cf6,
-            backgroundColor: 0x111827,
-            points: 12.00,
-            maxDistance: 25.00
-        });
-
         // Theme Toggle
-        const themeToggle = document.getElementById('themeToggle');
+const themeToggle = document.getElementById('themeToggle');
         const moonIcon = themeToggle.querySelector('feather[moon]');
         const sunIcon = themeToggle.querySelector('feather[sun]');