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
32cb5a1
verified
| <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% ; | |
| } | |
| } | |
| </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> |