Create a stunning, modern personal portfolio website for a professional web developer. The design should be clean, visually appealing, and fully responsive across all devices. The portfolio must use a modern UI/UX approach with smooth animations and transitions for an engaging user experience. The tech stack includes HTML5, CSS3 (TailwindCSS preferred), JavaScript (or React for SPA), and optional Framer Motion for animations. Key Features & Sections: Header & Navigation Sticky navigation bar with a transparent background that turns solid on scroll. Smooth scrolling to page sections. Animated hamburger menu for mobile view. Hero Section Full-screen hero with a high-quality background image or gradient. Animated introduction text (e.g., “Hi, I’m Kennedy” with typing or fade-in effect). Call-to-action button with hover effects (e.g., “View My Work”). Option for a Lottie animation or SVG illustration. About Me Section Profile photo in a circular frame with a hover zoom effect. Short bio with highlighted keywords using gradient text. Animated skill bars or icons with hover interactions. Skills Section Grid layout of skills with modern iconography. Hover effect: scale-up + shadow. Optional animated progress bars or radial charts for proficiency. Portfolio / Projects Section Grid or masonry layout for project cards. Each project card includes an image, title, description, and tech stack badges. On hover: smooth scale-up effect with overlay and “View Project” button. Modal or lightbox popup for project details. Services Section (Optional) Three to four cards for services offered (e.g., Web Development, App Development, UI/UX Design). Animated entry with fade-up or slide-in. Contact Section Modern form with floating labels and glassmorphism background. Integration with EmailJS or Formspree for email sending. Social media icons with hover animations (e.g., scale + color change). Footer Minimalistic footer with copyright. Quick links and social media icons. Modern Styling Guidelines Use TailwindCSS for fast and consistent styling. Implement Glassmorphism or Neumorphism elements for a modern feel. Use gradients (bg-gradient-to-r) for section headers or hero background. Smooth hover effects with transition-all duration-300 ease-in-out. Include dark mode toggle with smooth color transitions. Animations & Transitions Animate section entrances on scroll using AOS (Animate On Scroll) or Framer Motion. Button hover effects: subtle scaling + shadow pop. Typing effect for the hero text using Typed.js or CSS keyframes. Smooth page transitions when navigating sections. Technical Requirements Responsive design (mobile-first). SEO-friendly structure with proper meta tags. Performance optimized (lazy loading images, compressed assets). Deployable on GitHub Pages, Vercel, or Netlify. Color Palette & Fonts Modern gradient tones (e.g., purple → blue, teal → cyan). Use Google Fonts like Poppins, Inter, or Roboto for a clean look. Bonus Features Downloadable resume button. Interactive theme switcher (dark/light). Optional Parallax scrolling effect in the hero section. Personal Details Section Title: "Personal Details" or "More About Me". Display a different high-quality image (e.g., you working on a laptop, coding environment, or professional setting). Layout: Left side: Image with a modern frame (rounded corners, shadow, or glassmorphism). Right side: A structured list of personal information in two columns, such as: Full Name Date of Birth Location Email Phone Languages Each detail has an icon (use Lucide or Font Awesome) and a hover animation. Add Download CV button styled with gradient and hover transition. Animations: Image: Fade-in from left. Details: Slide-in from right with a delay for each row. Button: Scale-up on hover with subtle glow. Styling Ideas Use TailwindCSS classes: grid md:grid-cols-2 gap-8 p-6 bg-white/10 rounded-2xl backdrop-blur-lg shadow-lg. Font: Poppins or Inter for readability. Add gradient text headers using bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent. - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Latest Portfolio
-emoji: 🌖
-colorFrom: gray
-colorTo: green
+title: latest-portfolio
+emoji: 🐳
+colorFrom: pink
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,841 @@
-<!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" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kennedy | Web Developer Portfolio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        poppins: ['Poppins', 'sans-serif'],
+                    },
+                    colors: {
+                        primary: {
+                            500: '#6366f1',
+                            600: '#4f46e5',
+                        },
+                        secondary: {
+                            500: '#06b6d4',
+                            600: '#0891b2',
+                        },
+                        dark: {
+                            900: '#0f172a',
+                            800: '#1e293b',
+                            700: '#334155',
+                        }
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 1s ease-in-out',
+                        'slide-up': 'slideUp 0.5s ease-out',
+                        'slide-left': 'slideLeft 0.5s ease-out',
+                        'slide-right': 'slideRight 0.5s ease-out',
+                        'typing': 'typing 3.5s steps(40, end), blink-caret .75s step-end infinite',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        },
+                        slideUp: {
+                            '0%': { transform: 'translateY(20px)', opacity: '0' },
+                            '100%': { transform: 'translateY(0)', opacity: '1' },
+                        },
+                        slideLeft: {
+                            '0%': { transform: 'translateX(20px)', opacity: '0' },
+                            '100%': { transform: 'translateX(0)', opacity: '1' },
+                        },
+                        slideRight: {
+                            '0%': { transform: 'translateX(-20px)', opacity: '0' },
+                            '100%': { transform: 'translateX(0)', opacity: '1' },
+                        },
+                        typing: {
+                            'from': { width: '0' },
+                            'to': { width: '100%' },
+                        },
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        html {
+            scroll-behavior: smooth;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f8fafc;
+            transition: background-color 0.3s ease;
+        }
+        .dark body {
+            background-color: #0f172a;
+        }
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        .dark .glass-effect {
+            background: rgba(15, 23, 42, 0.7);
+        }
+        .gradient-text {
+            background-image: linear-gradient(to right, #6366f1, #06b6d4);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .typing-cursor {
+            border-right: 2px solid;
+            animation: blink-caret 0.75s step-end infinite;
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #06b6d4; }
+        }
+        .skill-bar {
+            height: 8px;
+            border-radius: 4px;
+            background: #e2e8f0;
+            overflow: hidden;
+        }
+        .dark .skill-bar {
+            background: #334155;
+        }
+        .skill-progress {
+            height: 100%;
+            border-radius: 4px;
+            background: linear-gradient(to right, #6366f1, #06b6d4);
+            transition: width 1.5s ease-out;
+        }
+        .project-card {
+            transition: all 0.3s ease;
+        }
+        .project-card:hover {
+            transform: translateY(-5px);
+        }
+        .project-overlay {
+            opacity: 0;
+            transition: all 0.3s ease;
+        }
+        .project-card:hover .project-overlay {
+            opacity: 1;
+        }
+        .floating-label {
+            position: absolute;
+            left: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+            transition: all 0.3s ease;
+            pointer-events: none;
+            color: #64748b;
+        }
+        .dark .floating-label {
+            color: #94a3b8;
+        }
+        .form-input:focus + .floating-label,
+        .form-input:not(:placeholder-shown) + .floating-label {
+            top: 0;
+            left: 10px;
+            font-size: 12px;
+            background: #f8fafc;
+            padding: 0 5px;
+            color: #6366f1;
+        }
+        .dark .form-input:focus + .floating-label,
+        .dark .form-input:not(:placeholder-shown) + .floating-label {
+            background: #0f172a;
+        }
+    </style>
+</head>
+<body class="font-poppins text-slate-800 dark:text-slate-200">
+    <!-- Header & Navigation -->
+    <header class="fixed w-full z-50 transition-all duration-300" id="header">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex justify-between items-center">
+                <a href="#" class="text-2xl font-bold gradient-text">Kennedy</a>
+                
+                <!-- Desktop Navigation -->
+                <nav class="hidden md:flex space-x-8">
+                    <a href="#home" class="nav-link hover:text-primary-500 transition-colors">Home</a>
+                    <a href="#about" class="nav-link hover:text-primary-500 transition-colors">About</a>
+                    <a href="#skills" class="nav-link hover:text-primary-500 transition-colors">Skills</a>
+                    <a href="#projects" class="nav-link hover:text-primary-500 transition-colors">Projects</a>
+                    <a href="#contact" class="nav-link hover:text-primary-500 transition-colors">Contact</a>
+                </nav>
+                
+                <!-- Dark Mode Toggle -->
+                <button id="theme-toggle" class="p-2 rounded-full focus:outline-none">
+                    <i class="fas fa-moon text-xl text-slate-700 dark:text-yellow-300"></i>
+                </button>
+                
+                <!-- Mobile Menu Button -->
+                <button id="mobile-menu-button" class="md:hidden p-2 rounded-full focus:outline-none">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+            </div>
+        </div>
+        
+        <!-- Mobile Menu -->
+        <div id="mobile-menu" class="hidden md:hidden absolute top-20 left-0 right-0 bg-white dark:bg-dark-800 shadow-lg rounded-lg mx-4 py-4 transition-all duration-300">
+            <div class="flex flex-col space-y-4 px-6">
+                <a href="#home" class="nav-link hover:text-primary-500 transition-colors">Home</a>
+                <a href="#about" class="nav-link hover:text-primary-500 transition-colors">About</a>
+                <a href="#skills" class="nav-link hover:text-primary-500 transition-colors">Skills</a>
+                <a href="#projects" class="nav-link hover:text-primary-500 transition-colors">Projects</a>
+                <a href="#contact" class="nav-link hover:text-primary-500 transition-colors">Contact</a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section id="home" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-cyan-50 dark:from-dark-900 dark:to-dark-800 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-10 dark:opacity-5">
+            <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgwLDAsMCwwLjAyKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div>
+        </div>
+        <div class="container mx-auto px-6 z-10">
+            <div class="flex flex-col md:flex-row items-center justify-between">
+                <div class="md:w-1/2 mb-12 md:mb-0 animate-fade-in">
+                    <h1 class="text-4xl md:text-6xl font-bold mb-4">
+                        <span class="gradient-text">Hi, I'm Kennedy</span>
+                    </h1>
+                    <div class="text-2xl md:text-3xl font-semibold mb-6">
+                        <span class="typing-text inline-block overflow-hidden whitespace-nowrap border-r-2 border-primary-500" id="typing-text"></span>
+                    </div>
+                    <p class="text-lg text-slate-600 dark:text-slate-300 mb-8 max-w-lg">
+                        I craft exceptional digital experiences with clean, efficient code and intuitive designs. Let's build something amazing together.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#projects" class="px-8 py-3 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-full font-medium hover:shadow-lg transition-all duration-300 hover:scale-105">
+                            View My Work
+                        </a>
+                        <a href="#contact" class="px-8 py-3 border-2 border-primary-500 text-primary-500 dark:text-primary-400 rounded-full font-medium hover:bg-primary-500 hover:text-white dark:hover:text-white transition-all duration-300 hover:scale-105">
+                            Contact Me
+                        </a>
+                    </div>
+                </div>
+                <div class="md:w-1/2 flex justify-center animate-slide-up">
+                    <div class="relative">
+                        <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white dark:border-dark-700 shadow-xl">
+                            <img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Kennedy" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500">
+                        </div>
+                        <div class="absolute -bottom-5 -right-5 bg-white dark:bg-dark-800 p-3 rounded-full shadow-lg">
+                            <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center text-white">
+                                <i class="fas fa-code text-xl"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <a href="#about" class="text-slate-600 dark:text-slate-300 hover:text-primary-500 transition-colors">
+                <i class="fas fa-chevron-down text-2xl"></i>
+            </a>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-white dark:bg-dark-900">
+        <div class="container mx-auto px-6">
+            <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>
+                <div class="w-20 h-1 bg-gradient-to-r from-primary-500 to-secondary-500 mx-auto"></div>
+            </div>
+            
+            <div class="flex flex-col md:flex-row items-center gap-12">
+                <div class="md:w-1/2 animate-slide-left">
+                    <div class="relative">
+                        <div class="w-full h-80 md:h-96 rounded-2xl overflow-hidden shadow-xl">
+                            <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Kennedy working" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
+                        </div>
+                        <div class="absolute -bottom-5 -right-5 bg-white dark:bg-dark-800 p-4 rounded-xl shadow-lg glass-effect">
+                            <div class="flex items-center">
+                                <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center text-white mr-3">
+                                    <i class="fas fa-medal text-xl"></i>
+                                </div>
+                                <div>
+                                    <p class="font-bold text-sm">5+ Years</p>
+                                    <p class="text-xs text-slate-500 dark:text-slate-400">Experience</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="md:w-1/2 animate-slide-right">
+                    <h3 class="text-2xl font-bold mb-6">Personal Details</h3>
+                    
+                    <div class="grid grid-cols-2 gap-4 mb-8">
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-3">
+                                <i class="fas fa-user text-primary-500"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-slate-500 dark:text-slate-400">Full Name</p>
+                                <p class="font-medium">Kennedy Smith</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-3">
+                                <i class="fas fa-calendar text-primary-500"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-slate-500 dark:text-slate-400">Date of Birth</p>
+                                <p class="font-medium">15 March 1992</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-3">
+                                <i class="fas fa-map-marker-alt text-primary-500"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-slate-500 dark:text-slate-400">Location</p>
+                                <p class="font-medium">San Francisco, USA</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-3">
+                                <i class="fas fa-envelope text-primary-500"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-slate-500 dark:text-slate-400">Email</p>
+                                <p class="font-medium">hello@kennedy.dev</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-3">
+                                <i class="fas fa-phone text-primary-500"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-slate-500 dark:text-slate-400">Phone</p>
+                                <p class="font-medium">+1 (555) 123-4567</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-3">
+                                <i class="fas fa-language text-primary-500"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-slate-500 dark:text-slate-400">Languages</p>
+                                <p class="font-medium">English, Spanish</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <p class="text-slate-600 dark:text-slate-300 mb-6">
+                        I'm a passionate web developer with over 5 years of experience creating modern, responsive websites and web applications. My expertise lies in front-end development with React and Vue.js, but I'm also proficient in back-end technologies like Node.js and Django.
+                    </p>
+                    <p class="text-slate-600 dark:text-slate-300 mb-8">
+                        When I'm not coding, you can find me hiking in the mountains, reading sci-fi novels, or experimenting with new recipes in the kitchen. I believe in continuous learning and staying updated with the latest web technologies.
+                    </p>
+                    
+                    <div class="flex flex-wrap gap-4">
+                        <a href="#" class="px-6 py-3 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-full font-medium hover:shadow-lg transition-all duration-300 hover:scale-105 flex items-center">
+                            <i class="fas fa-download mr-2"></i> Download CV
+                        </a>
+                        <a href="#contact" class="px-6 py-3 border border-primary-500 text-primary-500 dark:text-primary-400 rounded-full font-medium hover:bg-primary-500 hover:text-white dark:hover:text-white transition-all duration-300 hover:scale-105 flex items-center">
+                            <i class="fas fa-paper-plane mr-2"></i> Hire Me
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Skills Section -->
+    <section id="skills" class="py-20 bg-slate-50 dark:bg-dark-800">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                    <span class="gradient-text">My Skills</span>
+                </h2>
+                <div class="w-20 h-1 bg-gradient-to-r from-primary-500 to-secondary-500 mx-auto"></div>
+            </div>
+            
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                <!-- Skill 1 -->
+                <div class="bg-white dark:bg-dark-700 p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 animate-fade-in">
+                    <div class="w-16 h-16 bg-indigo-100 dark:bg-dark-600 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i class="fab fa-html5 text-3xl text-orange-500"></i>
+                    </div>
+                    <h3 class="text-center font-bold mb-2">HTML5</h3>
+                    <div class="skill-bar">
+                        <div class="skill-progress" style="width: 95%"></div>
+                    </div>
+                </div>
+                
+                <!-- Skill 2 -->
+                <div class="bg-white dark:bg-dark-700 p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 animate-fade-in">
+                    <div class="w-16 h-16 bg-indigo-100 dark:bg-dark-600 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i class="fab fa-css3-alt text-3xl text-blue-500"></i>
+                    </div>
+                    <h3 class="text-center font-bold mb-2">CSS3</h3>
+                    <div class="skill-bar">
+                        <div class="skill-progress" style="width: 90%"></div>
+                    </div>
+                </div>
+                
+                <!-- Skill 3 -->
+                <div class="bg-white dark:bg-dark-700 p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 animate-fade-in">
+                    <div class="w-16 h-16 bg-indigo-100 dark:bg-dark-600 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i class="fab fa-js text-3xl text-yellow-400"></i>
+                    </div>
+                    <h3 class="text-center font-bold mb-2">JavaScript</h3>
+                    <div class="skill-bar">
+                        <div class="skill-progress" style="width: 85%"></div>
+                    </div>
+                </div>
+                
+                <!-- Skill 4 -->
+                <div class="bg-white dark:bg-dark-700 p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 animate-fade-in">
+                    <div class="w-16 h-16 bg-indigo-100 dark:bg-dark-600 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i class="fab fa-react text-3xl text-blue-400"></i>
+                    </div>
+                    <h3 class="text-center font-bold mb-2">React</h3>
+                    <div class="skill-bar">
+                        <div class="skill-progress" style="width: 80%"></div>
+                    </div>
+                </div>
+                
+                <!-- Skill 5 -->
+                <div class="bg-white dark:bg-dark-700 p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 animate-fade-in">
+                    <div class="w-16 h-16 bg-indigo-100 dark:bg-dark-600 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i class="fab fa-vuejs text-3xl text-green-500"></i>
+                    </div>
+                    <h3 class="text-center font-bold mb-2">Vue.js</h3>
+                    <div class="skill-bar">
+                        <div class="skill-progress" style="width: 75%"></div>
+                    </div>
+                </div>
+                
+                <!-- Skill 6 -->
+                <div class="bg-white dark:bg-dark-700 p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 animate-fade-in">
+                    <div class="w-16 h-16 bg-indigo-100 dark:bg-dark-600 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i class="fab fa-node-js text-3xl text-green-600"></i>
+                    </div>
+                    <h3 class="text-center font-bold mb-2">Node.js</h3>
+                    <div class="skill-bar">
+                        <div class="skill-progress" style="width: 70%"></div>
+                    </div>
+                </div>
+                
+                <!-- Skill 7 -->
+                <div class="bg-white dark:bg-dark-700 p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 animate-fade-in">
+                    <div class="w-16 h-16 bg-indigo-100 dark:bg-dark-600 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i class="fab fa-python text-3xl text-blue-600"></i>
+                    </div>
+                    <h3 class="text-center font-bold mb-2">Python</h3>
+                    <div class="skill-bar">
+                        <div class="skill-progress" style="width: 65%"></div>
+                    </div>
+                </div>
+                
+                <!-- Skill 8 -->
+                <div class="bg-white dark:bg-dark-700 p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 animate-fade-in">
+                    <div class="w-16 h-16 bg-indigo-100 dark:bg-dark-600 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i class="fas fa-database text-3xl text-blue-700"></i>
+                    </div>
+                    <h3 class="text-center font-bold mb-2">MongoDB</h3>
+                    <div class="skill-bar">
+                        <div class="skill-progress" style="width: 60%"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Projects Section -->
+    <section id="projects" class="py-20 bg-white dark:bg-dark-900">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                    <span class="gradient-text">My Projects</span>
+                </h2>
+                <div class="w-20 h-1 bg-gradient-to-r from-primary-500 to-secondary-500 mx-auto"></div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Project 1 -->
+                <div class="project-card bg-white dark:bg-dark-800 rounded-xl shadow-md overflow-hidden animate-fade-in">
+                    <div class="relative overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="E-commerce Dashboard" class="w-full h-48 object-cover transition-transform duration-500">
+                        <div class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6">
+                            <div>
+                                <div class="flex flex-wrap gap-2 mb-3">
+                                    <span class="text-xs px-2 py-1 bg-primary-500/10 text-primary-500 dark:text-primary-400 rounded">React</span>
+                                    <span class="text-xs px-2 py-1 bg-primary-500/10 text-primary-500 dark:text-primary-400 rounded">Node.js</span>
+                                    <span class="text-xs px-2 py-1 bg-primary-500/10 text-primary-500 dark:text-primary-400 rounded">MongoDB</span>
+                                </div>
+                                <a href="#" class="px-4 py-2 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-full text-sm font-medium inline-block hover:shadow-lg transition-all duration-300">
+                                    View Project
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">E-commerce Dashboard</h3>
+                        <p class="text-slate-600 dark:text-slate-300 mb-4">A comprehensive dashboard for managing online stores with analytics, inventory, and order management.</p>
+                    </div>
+                </div>
+                
+                <!-- Project 2 -->
+                <div class="project-card bg-white dark:bg-dark-800 rounded-xl shadow-md overflow-hidden animate-fade-in">
+                    <div class="relative overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Travel App" class="w-full h-48 object-cover transition-transform duration-500">
+                        <div class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6">
+                            <div>
+                                <div class="flex flex-wrap gap-2 mb-3">
+                                    <span class="text-xs px-2 py-1 bg-primary-500/10 text-primary-500 dark:text-primary-400 rounded">Vue.js</span>
+                                    <span class="text-xs px-2 py-1 bg-primary-500/10 text-primary-500 dark:text-primary-400 rounded">Firebase</span>
+                                    <span class="text-xs px-2 py-1 bg-primary-500/10 text-primary-500 dark:text-primary-400 rounded">Mapbox</span>
+                                </div>
+                                <a href="#" class="px-4 py-2 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-full text-sm font-medium inline-block hover:shadow-lg transition-all duration-300">
+                                    View Project
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Travel Companion App</h3>
+                        <p class="text-slate-600 dark:text-slate-300 mb-4">An interactive travel app that helps users discover and plan trips with real-time weather and local recommendations.</p>
+                    </div>
+                </div>
+                
+                <!-- Project 3 -->
+                <div class="project-card bg-white dark:bg-dark-800 rounded-xl shadow-md overflow-hidden animate-fade-in">
+                    <div class="relative overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Task Manager" class="w-full h-48 object-cover transition-transform duration-500">
+                        <div class="project-overlay absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6">
+                            <div>
+                                <div class="flex flex-wrap gap-2 mb-3">
+                                    <span class="text-xs px-2 py-1 bg-primary-500/10 text-primary-500 dark:text-primary-400 rounded">React</span>
+                                    <span class="text-xs px-2 py-1 bg-primary-500/10 text-primary-500 dark:text-primary-400 rounded">Redux</span>
+                                    <span class="text-xs px-2 py-1 bg-primary-500/10 text-primary-500 dark:text-primary-400 rounded">TailwindCSS</span>
+                                </div>
+                                <a href="#" class="px-4 py-2 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-full text-sm font-medium inline-block hover:shadow-lg transition-all duration-300">
+                                    View Project
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Task Management System</h3>
+                        <p class="text-slate-600 dark:text-slate-300 mb-4">A collaborative task management tool with drag-and-drop functionality, team assignments, and progress tracking.</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="text-center mt-12">
+                <a href="#" class="px-8 py-3 border-2 border-primary-500 text-primary-500 dark:text-primary-400 rounded-full font-medium hover:bg-primary-500 hover:text-white dark:hover:text-white transition-all duration-300 hover:scale-105 inline-flex items-center">
+                    <i class="fas fa-eye mr-2"></i> View All Projects
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-slate-50 dark:bg-dark-800">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                    <span class="gradient-text">Get In Touch</span>
+                </h2>
+                <div class="w-20 h-1 bg-gradient-to-r from-primary-500 to-secondary-500 mx-auto"></div>
+            </div>
+            
+            <div class="flex flex-col lg:flex-row gap-12">
+                <div class="lg:w-1/2 animate-slide-left">
+                    <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
+                    <p class="text-slate-600 dark:text-slate-300 mb-8">
+                        Feel free to reach out to me for any questions or opportunities. I'm always open to discussing new projects, creative ideas or opportunities to be part of your vision.
+                    </p>
+                    
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-4 flex-shrink-0">
+                                <i class="fas fa-map-marker-alt text-primary-500 text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Location</h4>
+                                <p class="text-slate-600 dark:text-slate-300">San Francisco, California</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-4 flex-shrink-0">
+                                <i class="fas fa-envelope text-primary-500 text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Email</h4>
+                                <p class="text-slate-600 dark:text-slate-300">hello@kennedy.dev</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-4 flex-shrink-0">
+                                <i class="fas fa-phone text-primary-500 text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Phone</h4>
+                                <p class="text-slate-600 dark:text-slate-300">+1 (555) 123-4567</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-8">
+                        <h4 class="font-bold mb-4">Follow Me</h4>
+                        <div class="flex space-x-4">
+                            <a href="#" class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center text-slate-700 dark:text-slate-300 hover:bg-primary-500 hover:text-white transition-colors duration-300">
+                                <i class="fab fa-github"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center text-slate-700 dark:text-slate-300 hover:bg-blue-500 hover:text-white transition-colors duration-300">
+                                <i class="fab fa-linkedin-in"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center text-slate-700 dark:text-slate-300 hover:bg-blue-400 hover:text-white transition-colors duration-300">
+                                <i class="fab fa-twitter"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center text-slate-700 dark:text-slate-300 hover:bg-pink-500 hover:text-white transition-colors duration-300">
+                                <i class="fab fa-dribbble"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="lg:w-1/2 animate-slide-right">
+                    <form class="bg-white dark:bg-dark-700 p-8 rounded-xl shadow-md">
+                        <div class="mb-6 relative">
+                            <input type="text" id="name" class="form-input w-full px-4 py-3 border border-slate-300 dark:border-dark-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder=" ">
+                            <label for="name" class="floating-label">Your Name</label>
+                        </div>
+                        
+                        <div class="mb-6 relative">
+                            <input type="email" id="email" class="form-input w-full px-4 py-3 border border-slate-300 dark:border-dark-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder=" ">
+                            <label for="email" class="floating-label">Your Email</label>
+                        </div>
+                        
+                        <div class="mb-6 relative">
+                            <input type="text" id="subject" class="form-input w-full px-4 py-3 border border-slate-300 dark:border-dark-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder=" ">
+                            <label for="subject" class="floating-label">Subject</label>
+                        </div>
+                        
+                        <div class="mb-6 relative">
+                            <textarea id="message" rows="5" class="form-input w-full px-4 py-3 border border-slate-300 dark:border-dark-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder=" "></textarea>
+                            <label for="message" class="floating-label">Your Message</label>
+                        </div>
+                        
+                        <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 hover:scale-105">
+                            Send Message
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-dark-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0">
+                    <a href="#" class="text-2xl font-bold gradient-text">Kennedy</a>
+                    <p class="text-slate-400 mt-2">© 2023 Kennedy. All rights reserved.</p>
+                </div>
+                
+                <div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0">
+                    <div>
+                        <h4 class="font-bold mb-4">Quick Links</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#home" class="text-slate-400 hover:text-white transition-colors">Home</a></li>
+                            <li><a href="#about" class="text-slate-400 hover:text-white transition-colors">About</a></li>
+                            <li><a href="#skills" class="text-slate-400 hover:text-white transition-colors">Skills</a></li>
+                            <li><a href="#projects" class="text-slate-400 hover:text-white transition-colors">Projects</a></li>
+                            <li><a href="#contact" class="text-slate-400 hover:text-white transition-colors">Contact</a></li>
+                        </ul>
+                    </div>
+                    
+                    <div>
+                        <h4 class="font-bold mb-4">Services</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-slate-400 hover:text-white transition-colors">Web Development</a></li>
+                            <li><a href="#" class="text-slate-400 hover:text-white transition-colors">App Development</a></li>
+                            <li><a href="#" class="text-slate-400 hover:text-white transition-colors">UI/UX Design</a></li>
+                            <li><a href="#" class="text-slate-400 hover:text-white transition-colors">Consulting</a></li>
+                        </ul>
+                    </div>
+                    
+                    <div>
+                        <h4 class="font-bold mb-4">Connect</h4>
+                        <div class="flex space-x-4">
+                            <a href="#" class="w-10 h-10 rounded-full bg-dark-700 flex items-center justify-center text-slate-300 hover:bg-primary-500 hover:text-white transition-colors duration-300">
+                                <i class="fab fa-github"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-dark-700 flex items-center justify-center text-slate-300 hover:bg-blue-500 hover:text-white transition-colors duration-300">
+                                <i class="fab fa-linkedin-in"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-dark-700 flex items-center justify-center text-slate-300 hover:bg-blue-400 hover:text-white transition-colors duration-300">
+                                <i class="fab fa-twitter"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-dark-700 flex items-center justify-center text-slate-300 hover:bg-pink-500 hover:text-white transition-colors duration-300">
+                                <i class="fab fa-dribbble"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Mobile Menu Toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        
+        // Close mobile menu when clicking a link
+        document.querySelectorAll('#mobile-menu a').forEach(link => {
+            link.addEventListener('click', () => {
+                mobileMenu.classList.add('hidden');
+            });
+        });
+        
+        // Dark Mode Toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const html = document.documentElement;
+        
+        // Check for saved user preference, if any, on load of the website
+        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            html.classList.add('dark');
+            themeToggle.innerHTML = '<i class="fas fa-sun text-xl text-yellow-300"></i>';
+        } else {
+            html.classList.remove('dark');
+            themeToggle.innerHTML = '<i class="fas fa-moon text-xl text-slate-700"></i>';
+        }
+        
+        themeToggle.addEventListener('click', () => {
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+                themeToggle.innerHTML = '<i class="fas fa-moon text-xl text-slate-700"></i>';
+            } else {
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+                themeToggle.innerHTML = '<i class="fas fa-sun text-xl text-yellow-300"></i>';
+            }
+        });
+        
+        // Sticky Header on Scroll
+        const header = document.getElementById('header');
+        
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 50) {
+                header.classList.add('bg-white', 'dark:bg-dark-800', 'shadow-md');
+            } else {
+                header.classList.remove('bg-white', 'dark:bg-dark-800', 'shadow-md');
+            }
+        });
+        
+        // Typing Effect
+        const typingText = document.getElementById('typing-text');
+        const professions = ['Web Developer', 'UI/UX Designer', 'Frontend Engineer', 'JavaScript Expert'];
+        let professionIndex = 0;
+        let charIndex = 0;
+        let isDeleting = false;
+        let typingSpeed = 100;
+        
+        function type() {
+            const currentProfession = professions[professionIndex];
+            
+            if (isDeleting) {
+                typingText.textContent = currentProfession.substring(0, charIndex - 1);
+                charIndex--;
+                typingSpeed = 50;
+            } else {
+                typingText.textContent = currentProfession.substring(0, charIndex + 1);
+                charIndex++;
+                typingSpeed = 100;
+            }
+            
+            if (!isDeleting && charIndex === currentProfession.length) {
+                isDeleting = true;
+                typingSpeed = 1500; // Pause at end
+            } else if (isDeleting && charIndex === 0) {
+                isDeleting = false;
+                professionIndex = (professionIndex + 1) % professions.length;
+                typingSpeed = 500; // Pause before typing next
+            }
+            
+            setTimeout(type, typingSpeed);
+        }
+        
+        // Start typing effect after a delay
+        setTimeout(type, 1000);
+        
+        // Animate skill bars on scroll
+        function animateSkillBars() {
+            const skillBars = document.querySelectorAll('.skill-progress');
+            
+            skillBars.forEach(bar => {
+                const width = bar.style.width;
+                bar.style.width = '0';
+                
+                setTimeout(() => {
+                    bar.style.width = width;
+                }, 100);
+            });
+        }
+        
+        // Intersection Observer for scroll animations
+        const observerOptions = {
+            threshold: 0.1
+        };
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-fade-in');
+                    
+                    if (entry.target.id === 'skills') {
+                        animateSkillBars();
+                    }
+                    
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, observerOptions);
+        
+        // Observe all sections
+        document.querySelectorAll('section').forEach(section => {
+            observer.observe(section);
+        });
+        
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mastermind-creat/latest-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>