go

index.html

@@ -113,79 +113,32 @@
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured <span class="gradient-text">Projects</span></h2>
                 <p class="text-slate-400 max-w-2xl mx-auto">A curated selection of my recent design work across various industries and mediums.</p>
             </div>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Project 1 -->
-                <div class="glass-effect rounded-xl overflow-hidden group">
-                    <div class="relative overflow-hidden">
-                        <img src="http://static.photos/technology/640x360/1" alt="Project 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
-                        <div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition">
-                            <div>
-                                <h3 class="text-xl font-bold mb-2">Digital Agency Website</h3>
-                                <p class="text-sm text-slate-300 mb-4">Complete website redesign for a creative agency</p>
-                                <div class="flex space-x-2">
-                                    <span class="text-xs px-2 py-1 bg-primary/20 text-primary rounded">UI/UX</span>
-                                    <span class="text-xs px-2 py-1 bg-secondary/20 text-secondary rounded">Web Design</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Digital Agency Website</h3>
-                        <a href="#" class="text-primary text-sm font-medium inline-flex items-center">
-                            View Case Study <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
-                        </a>
-                    </div>
-                </div>
-                
-                <!-- Project 2 -->
-                <div class="glass-effect rounded-xl overflow-hidden group">
-                    <div class="relative overflow-hidden">
-                        <img src="http://static.photos/minimal/640x360/2" alt="Project 2" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
-                        <div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition">
-                            <div>
-                                <h3 class="text-xl font-bold mb-2">Mobile Banking App</h3>
-                                <p class="text-sm text-slate-300 mb-4">User experience design for financial application</p>
-                                <div class="flex space-x-2">
-                                    <span class="text-xs px-2 py-1 bg-primary/20 text-primary rounded">UX Design</span>
-                                    <span class="text-xs px-2 py-1 bg-secondary/20 text-secondary rounded">Mobile</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Mobile Banking App</h3>
-                        <a href="#" class="text-primary text-sm font-medium inline-flex items-center">
-                            View Case Study <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
-                        </a>
-                    </div>
-                </div>
-                
-                <!-- Project 3 -->
+            <div id="projects-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Projects will be loaded dynamically from GitHub API -->
+            </div>
+
+            <template id="project-template">
                 <div class="glass-effect rounded-xl overflow-hidden group">
                     <div class="relative overflow-hidden">
-                        <img src="http://static.photos/abstract/640x360/3" alt="Project 3" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
+                        <img src="" alt="" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110 project-image">
                         <div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition">
                             <div>
-                                <h3 class="text-xl font-bold mb-2">Brand Identity System</h3>
-                                <p class="text-sm text-slate-300 mb-4">Comprehensive branding for startup company</p>
-                                <div class="flex space-x-2">
-                                    <span class="text-xs px-2 py-1 bg-primary/20 text-primary rounded">Branding</span>
-                                    <span class="text-xs px-2 py-1 bg-secondary/20 text-secondary rounded">Illustration</span>
+                                <h3 class="text-xl font-bold mb-2 project-title"></h3>
+                                <p class="text-sm text-slate-300 mb-4 project-description"></p>
+                                <div class="flex space-x-2 project-topics">
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Brand Identity System</h3>
-                        <a href="#" class="text-primary text-sm font-medium inline-flex items-center">
-                            View Case Study <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
+                        <h3 class="text-xl font-bold mb-2 project-title"></h3>
+                        <a href="#" class="text-primary text-sm font-medium inline-flex items-center project-link">
+                            View Project <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
                         </a>
                     </div>
                 </div>
-            </div>
-            
-            <div class="text-center mt-12">
+            </template>
+<div class="text-center mt-12">
                 <a href="#" class="inline-flex items-center px-6 py-3 border border-primary text-primary rounded-lg font-medium hover:bg-fuchsia-900/30 transition">
                     View All Projects <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
                 </a>
@@ -320,10 +273,43 @@
             </div>
         </div>
     </footer>
-
     <script>
+        // Fetch GitHub projects
+        async function fetchGitHubProjects() {
+            const response = await fetch('https://api.github.com/users/octocat/repos');
+            const projects = await response.json();
+            const container = document.getElementById('projects-container');
+            const template = document.getElementById('project-template');
+            
+            projects.slice(0, 6).forEach(project => {
+                const clone = template.content.cloneNode(true);
+                
+                clone.querySelector('.project-title').textContent = project.name;
+                clone.querySelectorAll('.project-title').forEach(el => el.textContent = project.name);
+                clone.querySelector('.project-description').textContent = project.description || 'GitHub repository project';
+                clone.querySelector('.project-link').href = project.html_url;
+                clone.querySelector('.project-image').src = `http://static.photos/technology/640x360/${Math.floor(Math.random() * 100)}`;
+                
+                const topicsContainer = clone.querySelector('.project-topics');
+                project.topics?.slice(0, 3).forEach(topic => {
+                    const span = document.createElement('span');
+                    span.className = 'text-xs px-2 py-1 bg-primary/20 text-primary rounded';
+                    span.textContent = topic;
+                    topicsContainer.appendChild(span);
+                });
+                
+                container.appendChild(clone);
+            });
+            
+            // Refresh feather icons after adding new content
+            feather.replace();
+        }
+
+        // Call the function when page loads
+        document.addEventListener('DOMContentLoaded', fetchGitHubProjects);
+
         // Mobile menu toggle
-        const mobileMenuButton = document.getElementById('mobile-menu-button');
+const mobileMenuButton = document.getElementById('mobile-menu-button');
         const mobileMenu = document.getElementById('mobile-menu');
         const closeMobileMenu = document.getElementById('close-mobile-menu');