Spaces:

YUSAKRU
/

save-1

Running

App Files Files Community

YUSAKRU commited on Jul 5

Commit

32cb5a1

verified ·

1 Parent(s): bcb594b

Design an ultra-creative developer portfolio that looks like it belongs in a top design agency: LAYOUT CONCEPT: - Break traditional web conventions with asymmetric grid system - Overlapping sections using CSS Grid and absolute positioning - Diagonal cuts between sections using clip-path CSS - Geometric shapes as visual separators (triangles, circles, hexagons) - Content containers at various angles for dynamic visual interest VISUAL DESIGN: - Bold color palette: #ff6b6b (coral), #4ecdc4 (teal), #45b7d1 (blue), #96ceb4 (mint) - Typography mix: Playfair Display (serif) for large headings, Inter (sans) for body - High-contrast black and white photography with color overlays - Custom illustrated icons and hand-drawn elements - Duotone image effects using the brand color palette HERO SECTION: - Split diagonal layout: large portrait photo on left (60%), animated text on right (40%) - Photo: black and white with coral color overlay on hover - Text animations: glitch effects on name, color-changing job title, kinetic typography - Background: animated geometric shapes floating and rotating slowly - Interactive elements: mouse movement affects shape positions PROJECT SHOWCASE: - Masonry layout (Pinterest-style) with varying card heights - Projects as polaroid-style cards with drop shadows and slight rotations (-5° to +5°) - Handwritten fonts for project titles (Caveat or similar) - Each card: project image, handwritten title, tech stack as sketched icons - Hover effects: cards straighten and lift with 3D transforms - Click interaction: expand to full-screen overlay with project details - Categories: Web Design, Brand Identity, Digital Art, Code Experiments INTERACTIONS: - Parallax scrolling: background elements move at different speeds - Custom animated cursor: changes size and color based on hover targets - Smooth page transitions between sections using GSAP or similar - Micro-interactions: buttons squish on click, links underline on hover - Scroll-triggered animations: elements slide in from different directions CREATIVE ELEMENTS: - Hand-drawn doodles as navigation arrows and bullet points - Animated SVG illustrations that react to mouse proximity - Background: subtle video loop or animated gradient patterns - Custom loading screen with brand animation (geometric shapes forming logo) - Interactive "easter eggs" hidden throughout the site ABOUT SECTION: - Comic book style layout with speech bubbles for personal story - Illustrated timeline showing career progression as a visual journey - Interactive skill meters designed as hand-drawn progress bars - Personal photos in polaroid frames scattered around the content - "Fun facts" section with playful icons and animations CONTACT SECTION: - Creative form design: labels as handwritten notes, inputs as sketch boxes - Animated send button that transforms into a paper airplane - Contact info displayed as business card design with letterpress effect - Social media links as hand-drawn social icons with hover animations - Background: animated constellation connecting contact methods DESIGN DETAILS: - Torn paper edges between sections - Watercolor brush stroke backgrounds for text sections - Vintage postage stamp elements for project categories - Hand-lettered quotes and testimonials throughout - Grunge textures and distressed elements for artistic flair This should feel more like an interactive art installation than a traditional website! - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +971 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Save 1
-emoji: 🌖
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: save-1
+emoji: 🐳
+colorFrom: yellow
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,971 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alex Morgan | Full-Stack Developer Portfolio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #667eea;
+            --secondary: #764ba2;
+            --accent: #f093fb;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            scroll-behavior: smooth;
+            background-color: #f9fafb;
+            color: #1f2937;
+        }
+        /* Hero Section Styling */
+        .hero {
+            height: 100vh;
+            background: linear-gradient(to right, #667eea, #764ba2);
+            position: relative;
+            overflow: hidden;
+        }
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
+            animation: float 15s infinite linear;
+            opacity: 0.4;
+        }
+        .code-snippet {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            padding: 10px 15px;
+            border-radius: 6px;
+            font-family: monospace;
+            font-size: 14px;
+            color: white;
+            opacity: 0.7;
+            animation: floatCode 20s infinite linear;
+        }
+        .typing-container {
+            min-height: 90px;
+        }
+        .typing-text {
+            font-size: 2.5rem;
+            font-weight: 500;
+            color: white;
+            border-right: 3px solid white;
+            animation: blink 0.7s infinite ease;
+            padding-right: 5px;
+        }
+        /* Navigation */
+        .nav-header {
+            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.85);
+            transition: all 0.3s ease;
+        }
+        .nav-header.scrolled {
+            background: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+        }
+        .mobile-menu {
+            transform: translateX(100%);
+            transition: transform 0.3s ease-out;
+        }
+        .mobile-menu.active {
+            transform: translateX(0);
+        }
+        /* Cards */
+        .project-card {
+            transition: all 0.3s ease;
+            border: 1px solid rgba(229, 231, 235, 0.8);
+        }
+        .project-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            border-color: var(--primary);
+        }
+        .project-image {
+            overflow: hidden;
+            border-radius: 12px 12px 0 0;
+        }
+        .project-image img {
+            transition: transform 0.4s ease;
+        }
+        .project-card:hover .project-image img {
+            transform: scale(1.05);
+        }
+        .tech-badge {
+            background-color: rgba(246, 246, 247, 0.8);
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 500;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+        /* Skills Section */
+        .skill-bar {
+            height: 8px;
+            border-radius: 4px;
+            background-color: #e5e7eb;
+            position: relative;
+            overflow: hidden;
+        }
+        .skill-progress {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            border-radius: 4px;
+            transition: width 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
+        }
+        .skill-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        /* Timeline */
+        .timeline {
+            position: relative;
+        }
+        .timeline::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            height: 100%;
+            width: 4px;
+            background: linear-gradient(to bottom, #667eea, #764ba2);
+            border-radius: 2px;
+        }
+        .timeline-item {
+            position: relative;
+            width: 50%;
+            padding-left: 50px;
+        }
+        .timeline-item:nth-child(odd) {
+            left: 0;
+        }
+        .timeline-item:nth-child(even) {
+            left: 50%;
+            padding-left: 0;
+            padding-right: 50px;
+        }
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            top: 30px;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: var(--primary);
+            border: 4px solid white;
+            box-shadow: 0 0 0 2px var(--primary);
+        }
+        .timeline-item:nth-child(odd)::before {
+            right: -10px;
+        }
+        .timeline-item:nth-child(even)::before {
+            left: -10px;
+        }
+        .timeline-content {
+            transition: all 0.3s ease;
+        }
+        .timeline-content:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(102, 126, 234, 0.15);
+        }
+        /* Contact Form */
+        .contact-section {
+            background: linear-gradient(to right, rgba(102, 126, 234, 0.03), rgba(118, 75, 162, 0.03));
+        }
+        .contact-input {
+            transition: all 0.2s ease;
+            border: 1px solid #e5e7eb;
+        }
+        .contact-input:focus {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+        }
+        .contact-photo {
+            border-radius: 20px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+        }
+        .social-link {
+            transition: all 0.2s ease;
+        }
+        .social-link:hover {
+            transform: translateY(-3px);
+            color: var(--primary);
+        }
+        /* Footer */
+        footer {
+            background: linear-gradient(to right, #667eea, #764ba2);
+        }
+        /* Animations */
+        @keyframes float {
+            0% {
+                transform: translate(0, 0);
+            }
+            50% {
+                transform: translate(10px, 10px);
+            }
+            100% {
+                transform: translate(0, 0);
+            }
+        }
+        @keyframes floatCode {
+            0% {
+                transform: translate(0, 0) rotate(0deg);
+            }
+            25% {
+                transform: translate(20px, 40px) rotate(5deg);
+            }
+            50% {
+                transform: translate(40px, 80px) rotate(0deg);
+            }
+            75% {
+                transform: translate(20px, 120px) rotate(-5deg);
+            }
+            100% {
+                transform: translate(0, 160px) rotate(0deg);
+            }
+        }
+        @keyframes blink {
+            from, to { border-color: transparent }
+            50% { border-color: white; }
+        }
+        .fade-in {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+        }
+        .fade-in.appear {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        /* Responsive adjustments */
+        @media (max-width: 1024px) {
+            .timeline::before {
+                left: 30px;
+            }
+            .timeline-item {
+                width: 100%;
+                margin-bottom: 30px;
+                padding-left: 70px;
+            }
+            .timeline-item:nth-child(even) {
+                left: 0;
+                padding-right: 0;
+            }
+            .timeline-item:nth-child(odd)::before,
+            .timeline-item:nth-child(even)::before {
+                left: 20px;
+            }
+        }
+        @media (max-width: 768px) {
+            .hero-heading {
+                font-size: 2.5rem;
+            }
+            .typing-text {
+                font-size: 1.5rem;
+            }
+            .typing-container {
+                min-height: 60px;
+            }
+            .contact-wrapper {
+                flex-direction: column;
+            }
+            .contact-form, .contact-info {
+                width: 100% !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <header class="nav-header fixed top-0 left-0 w-full z-50 py-4">
+        <div class="container mx-auto px-6 flex justify-between items-center">
+            <a href="#" class="text-2xl font-bold text-gray-900">AlexMorgan.dev</a>
+            <nav class="hidden md:flex space-x-10">
+                <a href="#about" class="text-gray-600 hover:text-primary font-medium nav-link">About</a>
+                <a href="#projects" class="text-gray-600 hover:text-primary font-medium nav-link">Projects</a>
+                <a href="#skills" class="text-gray-600 hover:text-primary font-medium nav-link">Skills</a>
+                <a href="#experience" class="text-gray-600 hover:text-primary font-medium nav-link">Experience</a>
+                <a href="#contact" class="text-gray-600 hover:text-primary font-medium nav-link">Contact</a>
+            </nav>
+            <button id="mobile-menu-btn" class="md:hidden text-gray-700">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                </svg>
+            </button>
+        </div>
+    </header>
+    <!-- Mobile Navigation -->
+    <div id="mobile-menu" class="mobile-menu fixed top-0 right-0 h-full w-64 bg-white shadow-xl z-50 p-6">
+        <div class="flex justify-end">
+            <button id="close-menu" class="text-gray-700">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+            </button>
+        </div>
+        <nav class="mt-10 flex flex-col space-y-6">
+            <a href="#about" class="text-gray-800 hover:text-primary font-medium nav-link">About</a>
+            <a href="#projects" class="text-gray-800 hover:text-primary font-link">Projects</a>
+            <a href="#skills" class="text-gray-800 hover:text-primary font-link">Skills</a>
+            <a href="#experience" class="text-gray-800 hover:text-primary font-link">Experience</a>
+            <a href="#contact" class="text-gray-800 hover:text-primary font-link">Contact</a>
+        </nav>
+    </div>
+    <!-- Hero Section -->
+    <section class="hero relative flex items-center justify-center overflow-hidden">
+        <!-- Floating code snippets -->
+        <div class="code-snippet" style="top: 15%; left: 5%;">const project = new SaaS();</div>
+        <div class="code-snippet" style="top: 25%; right: 10%;">function innovate() { return true; }</div>
+        <div class="code-snippet" style="top: 45%; left: 12%;">import { scalability } from 'cloud-solutions';</div>
+        <div class="code-snippet" style="top: 65%; right: 7%;">while (code) { optimize(); }</div>
+        <div class="code-snippet" style="top: 75%; left: 8%;">export default efficiency;</div>
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="hero-heading text-5xl md:text-6xl font-bold text-white mb-6">
+                    Full-Stack Developer
+                </h1>
+                <div class="typing-container mb-10">
+                    <span class="typing-text" id="typing-text">React Expert</span>
+                </div>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#projects" class="bg-white text-primary px-8 py-4 rounded-lg font-semibold text-lg shadow-lg hover:bg-gray-100 transition duration-300 transform hover:-translate-y-1">
+                        View My Work
+                    </a>
+                    <a href="#" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-primary transition duration-300 transform hover:-translate-y-1">
+                        Download Resume
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Projects Section -->
+    <section id="projects" class="py-24 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-16">Featured Projects</h2>
+            <div class="flex flex-wrap justify-center gap-3 mb-12">
+                <button class="bg-primary text-white px-5 py-2 rounded-lg font-medium">All</button>
+                <button class="bg-gray-200 text-gray-700 px-5 py-2 rounded-lg font-medium hover:bg-gray-300">React</button>
+                <button class="bg-gray-200 text-gray-700 px-5 py-2 rounded-lg font-medium hover:bg-gray-300">Node.js</button>
+                <button class="bg-gray-200 text-gray-700 px-5 py-2 rounded-lg font-medium hover:bg-gray-300">Python</button>
+                <button class="bg-gray-200 text-gray-700 px-5 py-2 rounded-lg font-medium hover:bg-gray-300">Full-Stack</button>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Project 1 -->
+                <div class="project-card fade-in bg-white rounded-xl overflow-hidden">
+                    <div class="project-image">
+                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48"></div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">SaaS Analytics Dashboard</h3>
+                        <p class="text-gray-600 mb-4">Interactive dashboard for tracking business metrics with real-time data visualization.</p>
+                        <div class="flex flex-wrap gap-2 mb-5">
+                            <span class="tech-badge">React</span>
+                            <span class="tech-badge">D3.js</span>
+                            <span class="tech-badge">Node.js</span>
+                            <span class="tech-badge">MongoDB</span>
+                        </div>
+                        <div class="flex gap-3">
+                            <a href="#" class="flex-1 bg-primary text-white text-center py-2 rounded-lg font-medium hover:bg-blue-700 transition">Live Demo</a>
+                            <a href="#" class="flex-1 bg-gray-100 text-gray-800 text-center py-2 rounded-lg font-medium hover:bg-gray-200 transition">GitHub</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project 2 -->
+                <div class="project-card fade-in bg-white rounded-xl overflow-hidden">
+                    <div class="project-image">
+                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48"></div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">E-Commerce API Platform</h3>
+                        <p class="text-gray-600 mb-4">Scalable e-commerce backend with payment processing and inventory management.</p>
+                        <div class="flex flex-wrap gap-2 mb-5">
+                            <span class="tech-badge">Node.js</span>
+                            <span class="tech-badge">Express</span>
+                            <span class="tech-badge">PostgreSQL</span>
+                            <span class="tech-badge">Stripe API</span>
+                        </div>
+                        <div class="flex gap-3">
+                            <a href="#" class="flex-1 bg-primary text-white text-center py-2 rounded-lg font-medium hover:bg-blue-700 transition">Live Demo</a>
+                            <a href="#" class="flex-1 bg-gray-100 text-gray-800 text-center py-2 rounded-lg font-medium hover:bg-gray-200 transition">GitHub</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project 3 -->
+                <div class="project-card fade-in bg-white rounded-xl overflow-hidden">
+                    <div class="project-image">
+                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48"></div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">AI Content Generator</h3>
+                        <p class="text-gray-600 mb-4">GPT-3 powered content creation tool with customizable templates and outputs.</p>
+                        <div class="flex flex-wrap gap-2 mb-5">
+                            <span class="tech-badge">Python</span>
+                            <span class="tech-badge">Django</span>
+                            <span class="tech-badge">React</span>
+                            <span class="tech-badge">OpenAI API</span>
+                        </div>
+                        <div class="flex gap-3">
+                            <a href="#" class="flex-1 bg-primary text-white text-center py-2 rounded-lg font-medium hover:bg-blue-700 transition">Live Demo</a>
+                            <a href="#" class="flex-1 bg-gray-100 text-gray-800 text-center py-2 rounded-lg font-medium hover:bg-gray-200 transition">GitHub</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project 4 -->
+                <div class="project-card fade-in bg-white rounded-xl overflow-hidden">
+                    <div class="project-image">
+                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48"></div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Cloud File Storage</h3>
+                        <p class="text-gray-600 mb-4">Secure cloud storage solution with end-to-end encryption and file sharing.</p>
+                        <div class="flex flex-wrap gap-2 mb-5">
+                            <span class="tech-badge">AWS S3</span>
+                            <span class="tech-badge">React</span>
+                            <span class="tech-badge">Node.js</span>
+                            <span class="tech-badge">MongoDB</span>
+                        </div>
+                        <div class="flex gap-3">
+                            <a href="#" class="flex-1 bg-primary text-white text-center py-2 rounded-lg font-medium hover:bg-blue-700 transition">Live Demo</a>
+                            <a href="#" class="flex-1 bg-gray-100 text-gray-800 text-center py-2 rounded-lg font-medium hover:bg-gray-200 transition">GitHub</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project 5 -->
+                <div class="project-card fade-in bg-white rounded-xl overflow-hidden">
+                    <div class="project-image">
+                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48"></div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Blockchain Explorer</h3>
+                        <p class="text-gray-600 mb-4">Real-time visualization and analytics for blockchain transactions and networks.</p>
+                        <div class="flex flex-wrap gap-2 mb-5">
+                            <span class="tech-badge">Ethereum</span>
+                            <span class="tech-badge">Web3.js</span>
+                            <span class="tech-badge">React</span>
+                            <span class="tech-badge">GraphQL</span>
+                        </div>
+                        <div class="flex gap-3">
+                            <a href="#" class="flex-1 bg-primary text-white text-center py-2 rounded-lg font-medium hover:bg-blue-700 transition">Live Demo</a>
+                            <a href="#" class="flex-1 bg-gray-100 text-gray-800 text-center py-2 rounded-lg font-medium hover:bg-gray-200 transition">GitHub</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project 6 -->
+                <div class="project-card fade-in bg-white rounded-xl overflow-hidden">
+                    <div class="project-image">
+                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48"></div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">IoT Monitoring System</h3>
+                        <p class="text-gray-600 mb-4">Real-time monitoring dashboard for IoT devices with alerting and analytics.</p>
+                        <div class="flex flex-wrap gap-2 mb-5">
+                            <span class="tech-badge">Python</span>
+                            <span class="tech-badge">AWS IoT</span>
+                            <span class="tech-badge">React</span>
+                            <span class="tech-badge">MQTT</span>
+                        </div>
+                        <div class="flex gap-3">
+                            <a href="#" class="flex-1 bg-primary text-white text-center py-2 rounded-lg font-medium hover:bg-blue-700 transition">Live Demo</a>
+                            <a href="#" class="flex-1 bg-gray-100 text-gray-800 text-center py-2 rounded-lg font-medium hover:bg-gray-200 transition">GitHub</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Skills Section -->
+    <section id="skills" class="py-24 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-16">Technical Expertise</h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Skill 1 -->
+                <div class="skill-card fade-in bg-white rounded-xl p-6 border border-gray-100 shadow-sm transition">
+                    <div class="flex items-center gap-4 mb-4">
+                        <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
+                            <i class="fab fa-react text-blue-500 text-2xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-lg">React</h3>
+                            <p class="text-gray-500 text-sm">4 years experience</p>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex justify-between mb-1">
+                            <span class="text-sm font-medium">Advanced</span>
+                            <span class="text-sm">95%</span>
+                        </div>
+                        <div class="skill-bar">
+                            <div class="skill-progress bg-blue-500 w-0"></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Skill 2 -->
+                <div class="skill-card fade-in bg-white rounded-xl p-6 border border-gray-100 shadow-sm transition">
+                    <div class="flex items-center gap-4 mb-4">
+                        <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center">
+                            <i class="fab fa-node-js text-green-500 text-2xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-lg">Node.js</h3>
+                            <p class="text-gray-500 text-sm">3 years experience</p>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex justify-between mb-1">
+                            <span class="text-sm font-medium">Expert</span>
+                            <span class="text-sm">90%</span>
+                        </div>
+                        <div class="skill-bar">
+                            <div class="skill-progress bg-green-500 w-0"></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Skill 3 -->
+                <div class="skill-card fade-in bg-white rounded-xl p-6 border border-gray-100 shadow-sm transition">
+                    <div class="flex items-center gap-4 mb-4">
+                        <div class="w-12 h-12 rounded-lg bg-yellow-100 flex items-center justify-center">
+                            <i class="fab fa-python text-yellow-500 text-2xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-lg">Python</h3>
+                            <p class="text-gray-500 text-sm">2 years experience</p>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex justify-between mb-1">
+                            <span class="text-sm font-medium">Proficient</span>
+                            <span class="text-sm">85%</span>
+                        </div>
+                        <div class="skill-bar">
+                            <div class="skill-progress bg-yellow-500 w-0"></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Skill 4 -->
+                <div class="skill-card fade-in bg-white rounded-xl p-6 border border-gray-100 shadow-sm transition">
+                    <div class="flex items-center gap-4 mb-4">
+                        <div class="w-12 h-12 rounded-lg bg-orange-100 flex items-center justify-center">
+                            <i class="fab fa-aws text-orange-500 text-2xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-lg">AWS</h3>
+                            <p class="text-gray-500 text-sm">3 years experience</p>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex justify-between mb-1">
+                            <span class="text-sm font-medium">Advanced</span>
+                            <span class="text-sm">92%</span>
+                        </div>
+                        <div class="skill-bar">
+                            <div class="skill-progress bg-orange-500 w-0"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Experience Section -->
+    <section id="experience" class="py-24 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-16">Professional Journey</h2>
+            <div class="timeline relative">
+                <!-- Experience 1 -->
+                <div class="timeline-item fade-in mb-16">
+                    <div class="timeline-content bg-white rounded-xl p-7 shadow-sm border border-gray-100">
+                        <div class="flex items-start gap-5 mb-4">
+                            <div class="w-16 h-16 rounded-full bg-gray-200 border-2 border-dashed flex-shrink-0"></div>
+                            <div>
+                                <h3 class="font-bold text-xl">Senior Full-Stack Developer</h3>
+                                <p class="text-primary font-medium">InnovateX, San Francisco</p>
+                                <p class="text-gray-500 text-sm">Jan 2021 - Present</p>
+                            </div>
+                        </div>
+                        <ul class="list-disc pl-5 space-y-2 text-gray-600">
+                            <li>Led development of SaaS platform serving 50k+ monthly active users</li>
+                            <li>Architected microservices infrastructure reducing server costs by 40%</li>
+                            <li>Implemented CI/CD pipeline reducing deployment time by 75%</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- Experience 2 -->
+                <div class="timeline-item fade-in mb-16">
+                    <div class="timeline-content bg-white rounded-xl p-7 shadow-sm border border-gray-100">
+                        <div class="flex items-start gap-5 mb-4">
+                            <div class="w-16 h-16 rounded-full bg-gray-200 border-2 border-dashed flex-shrink-0"></div>
+                            <div>
+                                <h3 class="font-bold text-xl">Backend Engineer</h3>
+                                <p class="text-primary font-medium">TechGrowth Labs, Palo Alto</p>
+                                <p class="text-gray-500 text-sm">Mar 2019 - Dec 2020</p>
+                            </div>
+                        </div>
+                        <ul class="list-disc pl-5 space-y-2 text-gray-600">
+                            <li>Developed RESTful APIs serving 1M+ requests daily</li>
+                            <li>Optimized database queries reducing response times by 60%</li>
+                            <li>Implemented real-time data processing with Kafka</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- Experience 3 -->
+                <div class="timeline-item fade-in mb-16">
+                    <div class="timeline-content bg-white rounded-xl p-7 shadow-sm border border-gray-100">
+                        <div class="flex items-start gap-5 mb-4">
+                            <div class="w-16 h-16 rounded-full bg-gray-200 border-2 border-dashed flex-shrink-0"></div>
+                            <div>
+                                <h3 class="font-bold text-xl">Frontend Developer</h3>
+                                <p class="text-primary font-medium">Digital Solutions Inc., San Jose</p>
+                                <p class="text-gray-500 text-sm">Jun 2017 - Feb 2019</p>
+                            </div>
+                        </div>
+                        <ul class="list-disc pl-5 space-y-2 text-gray-600">
+                            <li>Built responsive UI components using React and Redux</li>
+                            <li>Improved application performance by 45% through code optimization</li>
+                            <li>Mentored junior developers in frontend best practices</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="contact-section py-24">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-16">Let's Connect</h2>
+            <div class="contact-wrapper max-w-6xl mx-auto flex gap-12">
+                <div class="contact-form fade-in w-[60%]">
+                    <form class="bg-white rounded-xl p-8 shadow-sm">
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2" for="name">Full Name</label>
+                            <input type="text" id="name" class="contact-input w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-1">
+                        </div>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2" for="email">Email Address</label>
+                            <input type="email" id="email" class="contact-input w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-1">
+                        </div>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2" for="project">Project Type</label>
+                            <select id="project" class="contact-input w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-1">
+                                <option value="">Select a project type</option>
+                                <option value="web">Web Development</option>
+                                <option value="mobile">Mobile App</option>
+                                <option value="consulting">Consulting</option>
+                                <option value="other">Other</option>
+                            </select>
+                        </div>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 mb-2" for="message">Message</label>
+                            <textarea id="message" rows="5" class="contact-input w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-1"></textarea>
+                        </div>
+                        <button type="submit" class="w-full bg-primary text-white py-3 rounded-lg font-semibold text-lg hover:bg-blue-700 transition transform hover:-translate-y-1">
+                            Send Message
+                        </button>
+                    </form>
+                </div>
+                <div class="contact-info fade-in w-[40%]">
+                    <div class="bg-white rounded-xl px-8 py-10 shadow-sm h-full">
+                        <div class="flex justify-center mb-8">
+                            <div class="contact-photo w-40 h-40 bg-gray-200 border-2 border-dashed rounded-full"></div>
+                        </div>
+                        <div class="space-y-5">
+                            <div class="flex items-start gap-4">
+                                <i class="fas fa-map-marker-alt text-primary mt-1"></i>
+                                <div>
+                                    <h4 class="font-bold text-gray-900">Location</h4>
+                                    <p class="text-gray-600">San Francisco, California</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start gap-4">
+                                <i class="fas fa-envelope text-primary mt-1"></i>
+                                <div>
+                                    <h4 class="font-bold text-gray-900">Email</h4>
+                                    <p class="text-gray-600">[email protected]</p>
+                                </div>
+                            </div>
+                            <div class="pt-6">
+                                <h4 class="font-bold text-gray-900 mb-4">Connect with me</h4>
+                                <div class="flex gap-4">
+                                    <a href="#" class="social-link text-gray-700 text-xl hover:text-primary">
+                                        <i class="fab fa-linkedin"></i>
+                                    </a>
+                                    <a href="#" class="social-link text-gray-700 text-xl hover:text-primary">
+                                        <i class="fab fa-github"></i>
+                                    </a>
+                                    <a href="#" class="social-link text-gray-700 text-xl hover:text-primary">
+                                        <i class="fab fa-twitter"></i>
+                                    </a>
+                                    <a href="#" class="social-link text-gray-700 text-xl hover:text-primary">
+                                        <i class="fab fa-dev"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 text-white">
+        <div class="container mx-auto px-6 text-center">
+            <p class="text-xl font-bold mb-4">Alex Morgan</p>
+            <p class="opacity-80 mb-8">Full-Stack Developer specializing in modern web technologies and scalable solutions</p>
+            <div class="flex justify-center gap-6 mb-8">
+                <a href="#" class="opacity-80 hover:opacity-100"><i class="fab fa-linkedin text-xl"></i></a>
+                <a href="#" class="opacity-80 hover:opacity-100"><i class="fab fa-github text-xl"></i></a>
+                <a href="#" class="opacity-80 hover:opacity-100"><i class="fab fa-twitter text-xl"></i></a>
+                <a href="#" class="opacity-80 hover:opacity-100"><i class="fab fa-dev text-xl"></i></a>
+            </div>
+            <p class="opacity-60 text-sm">© 2023 Alex Morgan. All rights reserved.</p>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+        const closeMenuBtn = document.getElementById('close-menu');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuBtn.addEventListener('click', () => {
+            mobileMenu.classList.add('active');
+        });
+        closeMenuBtn.addEventListener('click', () => {
+            mobileMenu.classList.remove('active');
+        });
+        // Close mobile menu when clicking on a link
+        document.querySelectorAll('.mobile-menu a').forEach(link => {
+            link.addEventListener('click', () => {
+                mobileMenu.classList.remove('active');
+            });
+        });
+        // Typing effect
+        const typingText = document.getElementById('typing-text');
+        const texts = ["React Expert", "Node.js Developer", "AWS Specialist"];
+        let textIndex = 0;
+        let charIndex = 0;
+        let isDeleting = false;
+        let typingSpeed = 100;
+        function type() {
+            const currentText = texts[textIndex];
+            if (isDeleting) {
+                // Delete character
+                typingText.textContent = currentText.substring(0, charIndex - 1);
+                charIndex--;
+                typingSpeed = 50;
+            } else {
+                // Type character
+                typingText.textContent = currentText.substring(0, charIndex + 1);
+                charIndex++;
+                typingSpeed = 150;
+            }
+            // Check if text is fully typed or deleted
+            if (!isDeleting && charIndex === currentText.length) {
+                // Pause at end of typing
+                typingSpeed = 2000;
+                isDeleting = true;
+            } else if (isDeleting && charIndex === 0) {
+                // Move to next text after deleting
+                isDeleting = false;
+                textIndex++;
+                if (textIndex === texts.length) {
+                    textIndex = 0;
+                }
+            }
+            setTimeout(type, typingSpeed);
+        }
+        // Start typing effect
+        setTimeout(type, 1000);
+        // Active nav link on scroll
+        const sections = document.querySelectorAll('section');
+        const navLinks = document.querySelectorAll('.nav-link');
+        window.addEventListener('scroll', () => {
+            let current = '';
+            sections.forEach(section => {
+                const sectionTop = section.offsetTop;
+                const sectionHeight = section.clientHeight;
+                if (pageYOffset >= sectionTop - 300) {
+                    current = section.getAttribute('id');
+                }
+            });
+            navLinks.forEach(link => {
+                link.classList.remove('text-primary');
+                if (link.getAttribute('href').substring(1) === current) {
+                    link.classList.add('text-primary');
+                }
+            });
+            // Add scrolled class to header
+            const header = document.querySelector('.nav-header');
+            if (window.scrollY > 100) {
+                header.classList.add('scrolled');
+            } else {
+                header.classList.remove('scrolled');
+            }
+        });
+        // Fade in animations on scroll
+        const fadeElements = document.querySelectorAll('.fade-in');
+        const fadeInObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('appear');
+                    // Animate skill progress bars
+                    if (entry.target.classList.contains('skill-card')) {
+                        const progressBar = entry.target.querySelector('.skill-progress');
+                        const width = progressBar.nextElementSibling.textContent;
+                        setTimeout(() => {
+                            progressBar.style.width = width;
+                        }, 300);
+                    }
+                }
+            });
+        }, {
+            threshold: 0.1
+        });
+        fadeElements.forEach(element => {
+            fadeInObserver.observe(element);
+        });
+    </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=YUSAKRU/save-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>