Alex Personal Portfolio Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
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 - Creative Developer & Designer</title> </head> <body class="bg-slate-900 text-white overflow-x-hidden"> <!-- Navigation --> <nav class="fixed top-0 w-full z-50 nav-blur transition-all duration-300" id="navbar"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-16"> <!-- Logo --> <div class="flex items-center"> <div class="text-2xl font-bold text-gradient">AM</div> </div> <!-- Desktop Menu --> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-8"> <a href="#home" class="text-white hover:text-purple-400 px-3 py-2 text-sm font-medium transition-colors">Home</a> <a href="#about" class="text-gray-300 hover:text-purple-400 px-3 py-2 text-sm font-medium transition-colors">About</a> <a href="#skills" class="text-gray-300 hover:text-purple-400 px-3 py-2 text-sm font-medium transition-colors">Skills</a> <a href="#projects" class="text-gray-300 hover:text-purple-400 px-3 py-2 text-sm font-medium transition-colors">Projects</a> <a href="#experience" class="text-gray-300 hover:text-purple-400 px-3 py-2 text-sm font-medium transition-colors">Experience</a> <a href="#contact" class="text-gray-300 hover:text-purple-400 px-3 py-2 text-sm font-medium transition-colors">Contact</a> </div> </div> <!-- CTA Button --> <div class="hidden md:flex items-center space-x-4"> <button class="hero-gradient px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105"> Download CV </button> </div> <!-- Mobile menu button --> <div class="md:hidden"> <button class="text-gray-300 hover:text-white" onclick="toggleMobileMenu()"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div> </div> <!-- Mobile Menu --> <div class="md:hidden hidden" id="mobile-menu"> <div class="px-2 pt-2 pb-3 space-y-1 bg-slate-900 bg-opacity-95"> <a href="#home" class="text-white block px-3 py-2 text-base font-medium">Home</a> <a href="#about" class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium">About</a> <a href="#skills" class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium">Skills</a> <a href="#projects" class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium">Projects</a> <a href="#experience" class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium">Experience</a> <a href="#contact" class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium">Contact</a> <button class="hero-gradient px-6 py-2 rounded-full text-sm font-medium w-full mt-4"> Download CV </button> </div> </div> </nav> <!-- Hero Section --> <section class="relative min-h-screen flex items-center justify-center hero-gradient" id="home"> <div class="absolute inset-0 bg-black bg-opacity-30"></div> <!-- Animated Background Elements --> <div class="absolute inset-0 overflow-hidden"> <div class="absolute top-20 left-10 w-20 h-20 bg-white rounded-full opacity-10 floating"></div> <div class="absolute top-40 right-20 w-16 h-16 bg-purple-300 rounded-full opacity-20 floating" style="animation-delay: 1s;"></div> <div class="absolute bottom-20 left-20 w-24 h-24 bg-blue-300 rounded-full opacity-15 floating" style="animation-delay: 2s;"></div> <div class="absolute bottom-40 right-10 w-12 h-12 bg-pink-300 rounded-full opacity-25 floating" style="animation-delay: 0.5s;"></div> </div> <div class="relative z-10 text-center max-w-4xl mx-auto px-4 fade-in-up"> <div class="mb-6"> <div class="w-32 h-32 mx-auto mb-6 relative"> <div class="w-32 h-32 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 flex items-center justify-center text-4xl font-bold"> ?? </div> <div class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 pulse-ring"></div> </div> </div> <h1 class="text-5xl md:text-7xl font-bold heading-font mb-6 leading-tight"> Hi, I'm <span class="text-gradient typewriter">Alex Morgan</span> </h1> <p class="text-xl md:text-2xl text-purple-100 mb-8 max-w-3xl mx-auto leading-relaxed"> Creative Developer & UI/UX Designer crafting beautiful digital experiences with modern technologies and innovative design solutions. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12"> <button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105 flex items-center justify-center"> <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path> </svg> Let's Talk </button> <button class="border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105"> View My Work </button> </div> <!-- Social Links --> <div class="flex justify-center space-x-6"> <a href="#" class="text-white hover:text-purple-300 transition-colors transform hover:scale-110"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> </svg> </a> <a href="#" class="text-white hover:text-purple-300 transition-colors transform hover:scale-110"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </a> <a href="#" class="text-white hover:text-purple-300 transition-colors transform hover:scale-110"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/> </svg> </a> <a href="#" class="text-white hover:text-purple-300 transition-colors transform hover:scale-110"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z"/> </svg> </a> </div> </div> <!-- Scroll indicator --> <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 scroll-indicator"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> </svg> </div> </section> <!-- About Section --> <section class="py-20 px-4 bg-slate-800" id="about"> <div class="max-w-6xl mx-auto"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <!-- About Content --> <div class="fade-in-left"> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-6 text-gradient">About Me</h2> <p class="text-lg text-gray-300 mb-6 leading-relaxed"> I'm a passionate full-stack developer and UI/UX designer with over 5 years of experience creating digital solutions that combine beautiful design with powerful functionality. I specialize in modern web technologies and love turning complex problems into simple, elegant designs. </p> <p class="text-lg text-gray-300 mb-8 leading-relaxed"> When I'm not coding, you'll find me exploring new design trends, contributing to open-source projects, or sharing knowledge with the developer community through blogs and workshops. </p> <!-- Stats --> <div class="grid grid-cols-3 gap-6 mb-8"> <div class="text-center"> <div class="text-3xl font-bold text-gradient mb-2">50+</div> <div class="text-gray-400 text-sm">Projects Completed</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-gradient mb-2">5+</div> <div class="text-gray-400 text-sm">Years Experience</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-gradient mb-2">30+</div> <div class="text-gray-400 text-sm">Happy Clients</div> </div> </div> <button class="hero-gradient px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105"> Download Resume </button> </div> <!-- About Visual --> <div class="fade-in-right"> <div class="relative"> <div class="glass-card rounded-2xl p-8 h-96 flex items-center justify-center"> <div class="text-center"> <div class="text-8xl mb-4">?</div> <h3 class="text-2xl font-bold heading-font mb-2">Innovation Driven</h3> <p class="text-gray-300">Always exploring new technologies and creative solutions</p> </div> </div> <!-- Floating Cards --> <div class="absolute -top-4 -right-4 glass-card rounded-xl p-4 floating"> <div class="text-2xl mb-2">?</div> <div class="text-sm font-semibold">Creative Problem Solver</div> </div> <div class="absolute -bottom-4 -left-4 glass-card rounded-xl p-4 floating" style="animation-delay: 1s;"> <div class="text-2xl mb-2">?</div> <div class="text-sm font-semibold">Detail Oriented</div> </div> </div> </div> </div> </div> </section> <!-- Skills Section --> <section class="py-20 px-4" id="skills"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-6 text-gradient">Skills & Expertise</h2> <p class="text-xl text-gray-400 max-w-3xl mx-auto"> A comprehensive toolkit of modern technologies and design principles </p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <!-- Technical Skills --> <div class="fade-in-left"> <h3 class="text-2xl font-bold heading-font mb-8">Technical Skills</h3> <div class="space-y-6"> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">JavaScript / TypeScript</span> <span class="text-gray-400">95%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 95%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">React / Next.js</span> <span class="text-gray-400">90%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 90%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">Node.js / Express</span> <span class="text-gray-400">85%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 85%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">Python / Django</span> <span class="text-gray-400">80%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 80%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">Database Design</span> <span class="text-gray-400">85%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 85%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">Cloud Services (AWS/GCP)</span> <span class="text-gray-400">75%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 75%;"></div> </div> </div> </div> </div> <!-- Design Skills --> <div class="fade-in-right"> <h3 class="text-2xl font-bold heading-font mb-8">Design Skills</h3> <div class="space-y-6"> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">UI/UX Design</span> <span class="text-gray-400">92%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 92%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">Figma / Adobe XD</span> <span class="text-gray-400">88%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 88%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">Responsive Design</span> <span class="text-gray-400">95%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 95%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">Design Systems</span> <span class="text-gray-400">85%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 85%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">Prototyping</span> <span class="text-gray-400">90%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 90%;"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold">Brand Identity</span> <span class="text-gray-400">78%</span> </div> <div class="bg-gray-700 rounded-full h-2"> <div class="skill-bar rounded-full" style="width: 78%;"></div> </div> </div> </div> </div> </div> <!-- Technology Stack --> <div class="mt-16"> <h3 class="text-2xl font-bold heading-font mb-8 text-center">Technology Stack</h3> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6"> <div class="glass-card rounded-xl p-6 text-center elegant-hover"> <div class="text-4xl mb-3">⚛️</div> <div class="font-semibold">React</div> </div> <div class="glass-card rounded-xl p-6 text-center elegant-hover"> <div class="text-4xl mb-3">?</div> <div class="font-semibold">Next.js</div> </div> <div class="glass-card rounded-xl p-6 text-center elegant-hover"> <div class="text-4xl mb-3">?</div> <div class="font-semibold">Node.js</div> </div> <div class="glass-card rounded-xl p-6 text-center elegant-hover"> <div class="text-4xl mb-3">?</div> <div class="font-semibold">Python</div> </div> <div class="glass-card rounded-xl p-6 text-center elegant-hover"> <div class="text-4xl mb-3">?</div> <div class="font-semibold">Figma</div> </div> <div class="glass-card rounded-xl p-6 text-center elegant-hover"> <div class="text-4xl mb-3">☁️</div> <div class="font-semibold">AWS</div> </div> </div> </div> </div> </section> <!-- Projects Section --> <section class="py-20 px-4 bg-slate-800" id="projects"> <div class="max-w-7xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-6 text-gradient">Featured Projects</h2> <p class="text-xl text-gray-400 max-w-3xl mx-auto"> A showcase of my recent work spanning web applications, mobile apps, and design systems </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Project 1 --> <div class="project-card glass-card rounded-2xl overflow-hidden elegant-hover relative"> <div class="h-48 bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center"> <div class="text-6xl">?️</div> </div> <div class="project-overlay absolute inset-0 flex items-center justify-center"> <div class="text-center"> <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-semibold mb-4 transform hover:scale-105 transition-all"> View Project </button> <div class="flex space-x-4 justify-center"> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </button> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </button> </div> </div> </div> <div class="p-6"> <h3 class="text-xl font-bold heading-font mb-2">E-Commerce Platform</h3> <p class="text-gray-400 mb-4">Full-stack e-commerce solution with React, Node.js, and Stripe integration</p> <div class="flex flex-wrap gap-2"> <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">React</span> <span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">Node.js</span> <span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm">MongoDB</span> </div> </div> </div> <!-- Project 2 --> <div class="project-card glass-card rounded-2xl overflow-hidden elegant-hover relative"> <div class="h-48 bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center"> <div class="text-6xl">?</div> </div> <div class="project-overlay absolute inset-0 flex items-center justify-center"> <div class="text-center"> <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-semibold mb-4 transform hover:scale-105 transition-all"> View Project </button> <div class="flex space-x-4 justify-center"> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </button> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </button> </div> </div> </div> <div class="p-6"> <h3 class="text-xl font-bold heading-font mb-2">Task Management App</h3> <p class="text-gray-400 mb-4">Collaborative task management with real-time updates and team features</p> <div class="flex flex-wrap gap-2"> <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">Next.js</span> <span class="bg-yellow-600 text-white px-3 py-1 rounded-full text-sm">Firebase</span> <span class="bg-pink-600 text-white px-3 py-1 rounded-full text-sm">Tailwind</span> </div> </div> </div> <!-- Project 3 --> <div class="project-card glass-card rounded-2xl overflow-hidden elegant-hover relative"> <div class="h-48 bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center"> <div class="text-6xl">?</div> </div> <div class="project-overlay absolute inset-0 flex items-center justify-center"> <div class="text-center"> <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-semibold mb-4 transform hover:scale-105 transition-all"> View Project </button> <div class="flex space-x-4 justify-center"> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </button> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </button> </div> </div> </div> <div class="p-6"> <h3 class="text-xl font-bold heading-font mb-2">Design System</h3> <p class="text-gray-400 mb-4">Comprehensive design system with components, tokens, and documentation</p> <div class="flex flex-wrap gap-2"> <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">Figma</span> <span class="bg-orange-600 text-white px-3 py-1 rounded-full text-sm">Storybook</span> <span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">React</span> </div> </div> </div> <!-- Project 4 --> <div class="project-card glass-card rounded-2xl overflow-hidden elegant-hover relative"> <div class="h-48 bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center"> <div class="text-6xl">?</div> </div> <div class="project-overlay absolute inset-0 flex items-center justify-center"> <div class="text-center"> <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-semibold mb-4 transform hover:scale-105 transition-all"> View Project </button> <div class="flex space-x-4 justify-center"> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </button> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </button> </div> </div> </div> <div class="p-6"> <h3 class="text-xl font-bold heading-font mb-2">Analytics Dashboard</h3> <p class="text-gray-400 mb-4">Real-time analytics dashboard with interactive charts and data visualization</p> <div class="flex flex-wrap gap-2"> <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">Vue.js</span> <span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm">D3.js</span> <span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">Python</span> </div> </div> </div> <!-- Project 5 --> <div class="project-card glass-card rounded-2xl overflow-hidden elegant-hover relative"> <div class="h-48 bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center"> <div class="text-6xl">?</div> </div> <div class="project-overlay absolute inset-0 flex items-center justify-center"> <div class="text-center"> <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-semibold mb-4 transform hover:scale-105 transition-all"> View Project </button> <div class="flex space-x-4 justify-center"> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </button> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </button> </div> </div> </div> <div class="p-6"> <h3 class="text-xl font-bold heading-font mb-2">Music Streaming App</h3> <p class="text-gray-400 mb-4">Modern music streaming interface with playlist management and social features</p> <div class="flex flex-wrap gap-2"> <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">React Native</span> <span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm">Redux</span> <span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm">Spotify API</span> </div> </div> </div> <!-- Project 6 --> <div class="project-card glass-card rounded-2xl overflow-hidden elegant-hover relative"> <div class="h-48 bg-gradient-to-br from-teal-500 to-blue-500 flex items-center justify-center"> <div class="text-6xl">?</div> </div> <div class="project-overlay absolute inset-0 flex items-center justify-center"> <div class="text-center"> <button class="bg-white text-purple-600 px-6 py-2 rounded-full font-semibold mb-4 transform hover:scale-105 transition-all"> View Project </button> <div class="flex space-x-4 justify-center"> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </button> <button class="text-white hover:text-purple-200"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </button> </div> </div> </div> <div class="p-6"> <h3 class="text-xl font-bold heading-font mb-2">Portfolio Website</h3> <p class="text-gray-400 mb-4">Responsive portfolio website with modern animations and interactive elements</p> <div class="flex flex-wrap gap-2"> <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">HTML/CSS</span> <span class="bg-yellow-600 text-white px-3 py-1 rounded-full text-sm">JavaScript</span> <span class="bg-pink-600 text-white px-3 py-1 rounded-full text-sm">GSAP</span> </div> </div> </div> </div> <div class="text-center mt-12"> <button class="hero-gradient px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105"> View All Projects </button> </div> </div> </section> <!-- Experience Section --> <section class="py-20 px-4" id="experience"> <div class="max-w-6xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-6 text-gradient">Experience</h2> <p class="text-xl text-gray-400 max-w-3xl mx-auto"> My professional journey and key milestones in the tech industry </p> </div> <div class="relative"> <!-- Timeline Line --> <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-purple-500 to-pink-500 rounded-full"></div> <div class="space-y-12"> <!-- Experience 1 --> <div class="flex items-center"> <div class="w-1/2 pr-8 text-right fade-in-left"> <div class="glass-card rounded-xl p-6"> <h3 class="text-xl font-bold heading-font mb-2">Senior Full Stack Developer</h3> <p class="text-purple-400 font-semibold mb-2">TechCorp Solutions</p> <p class="text-gray-400 text-sm mb-4">2022 - Present</p> <p class="text-gray-300">Leading development of enterprise web applications, mentoring junior developers, and implementing modern development practices.</p> </div> </div> <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center relative z-10"> <div class="w-4 h-4 bg-white rounded-full"></div> </div> <div class="w-1/2 pl-8"></div> </div> <!-- Experience 2 --> <div class="flex items-center"> <div class="w-1/2 pr-8"></div> <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center relative z-10"> <div class="w-4 h-4 bg-white rounded-full"></div> </div> <div class="w-1/2 pl-8 fade-in-right"> <div class="glass-card rounded-xl p-6"> <h3 class="text-xl font-bold heading-font mb-2">Frontend Developer</h3> <p class="text-purple-400 font-semibold mb-2">Digital Agency Pro</p> <p class="text-gray-400 text-sm mb-4">2020 - 2022</p> <p class="text-gray-300">Developed responsive web applications for various clients, specializing in React and modern CSS frameworks.</p> </div> </div> </div> <!-- Experience 3 --> <div class="flex items-center"> <div class="w-1/2 pr-8 text-right fade-in-left"> <div class="glass-card rounded-xl p-6"> <h3 class="text-xl font-bold heading-font mb-2">UI/UX Designer</h3> <p class="text-purple-400 font-semibold mb-2">Creative Studio</p> <p class="text-gray-400 text-sm mb-4">2019 - 2020</p> <p class="text-gray-300">Designed user interfaces and experiences for mobile and web applications, conducted user research and usability testing.</p> </div> </div> <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center relative z-10"> <div class="w-4 h-4 bg-white rounded-full"></div> </div> <div class="w-1/2 pl-8"></div> </div> <!-- Experience 4 --> <div class="flex items-center"> <div class="w-1/2 pr-8"></div> <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center relative z-10"> <div class="w-4 h-4 bg-white rounded-full"></div> </div> <div class="w-1/2 pl-8 fade-in-right"> <div class="glass-card rounded-xl p-6"> <h3 class="text-xl font-bold heading-font mb-2">Junior Developer</h3> <p class="text-purple-400 font-semibold mb-2">StartupXYZ</p> <p class="text-gray-400 text-sm mb-4">2018 - 2019</p> <p class="text-gray-300">Started my professional journey building web applications with JavaScript, HTML, and CSS. Learned agile development practices.</p> </div> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="py-20 px-4 bg-slate-800" id="contact"> <div class="max-w-4xl mx-auto"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-6 text-gradient">Let's Work Together</h2> <p class="text-xl text-gray-400 max-w-3xl mx-auto"> Ready to bring your ideas to life? Let's discuss your next project and create something amazing together. </p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <!-- Contact Form --> <div class="glass-card rounded-2xl p-8 fade-in-left"> <h3 class="text-2xl font-bold heading-font mb-6">Send Message</h3> <form class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium mb-2">Name</label> <input type="text" class="w-full bg-slate-700 border border-purple-500/30 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Your Name"> </div> <div> <label class="block text-sm font-medium mb-2">Email</label> <input type="email" class="w-full bg-slate-700 border border-purple-500/30 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="your@email.com"> </div> </div> <div> <label class="block text-sm font-medium mb-2">Subject</label> <input type="text" class="w-full bg-slate-700 border border-purple-500/30 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Project Discussion"> </div> <div> <label class="block text-sm font-medium mb-2">Message</label> <textarea rows="5" class="w-full bg-slate-700 border border-purple-500/30 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Tell me about your project..."></textarea> </div> <button type="submit" class="w-full hero-gradient py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105"> Send Message </button> </form> </div> <!-- Contact Info --> <div class="space-y-8 fade-in-right"> <div class="glass-card rounded-2xl p-8"> <h3 class="text-2xl font-bold heading-font mb-6">Get In Touch</h3> <div class="space-y-6"> <div class="flex items-center"> <div class="w-12 h-12 hero-gradient rounded-lg flex items-center justify-center mr-4"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> </div> <div> <div class="font-semibold">Email</div> <div class="text-gray-400">alex.morgan@email.com</div> </div> </div> <div class="flex items-center"> <div class="w-12 h-12 hero-gradient rounded-lg flex items-center justify-center mr-4"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> </div> <div> <div class="font-semibold">Phone</div> <div class="text-gray-400">+1 (555) 123-4567</div> </div> </div> <div class="flex items-center"> <div class="w-12 h-12 hero-gradient rounded-lg flex items-center justify-center mr-4"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> </div> <div> <div class="font-semibold">Location</div> <div class="text-gray-400">San Francisco, CA</div> </div> </div> </div> </div> <div class="glass-card rounded-2xl p-8"> <h3 class="text-2xl font-bold heading-font mb-6">Let's Connect</h3> <div class="flex space-x-4"> <a href="#" class="w-12 h-12 hero-gradient rounded-lg flex items-center justify-center hover:scale-110 transition-transform"> <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> </svg> </a> <a href="#" class="w-12 h-12 hero-gradient rounded-lg flex items-center justify-center hover:scale-110 transition-transform"> <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </a> <a href="#" class="w-12 h-12 hero-gradient rounded-lg flex items-center justify-center hover:scale-110 transition-transform"> <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"> <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/> </svg> </a> <a href="#" class="w-12 h-12 hero-gradient rounded-lg flex items-center justify-center hover:scale-110 transition-transform"> <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"> <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z"/> </svg> </a> </div> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-black py-8 px-4"> <div class="max-w-6xl mx-auto text-center"> <div class="text-2xl font-bold text-gradient mb-4">Alex Morgan</div> <p class="text-gray-400 mb-6">Creative Developer & UI/UX Designer</p> <div class="border-t border-slate-800 pt-6"> <p class="text-gray-400">© 2024 Alex Morgan. All rights reserved. Made with ❤️ and lots of ☕</p> </div> </div> </footer> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96be4908a08d17d7',t:'MTc1NDY0ODQ3MC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; } .heading-font { font-family: 'Playfair Display', serif; } .hero-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .card-gradient { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } .skill-gradient { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .project-gradient { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); } .contact-gradient { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); } .elegant-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .elegant-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .nav-blur { backdrop-filter: blur(20px); background: rgba(15, 23, 42, 0.9); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } .fade-in-up { animation: fadeInUp 0.8s ease-out; } .fade-in-left { animation: fadeInLeft 0.8s ease-out; } .fade-in-right { animation: fadeInRight 0.8s ease-out; } .scale-in { animation: scaleIn 0.6s ease-out; } .typewriter { overflow: hidden; border-right: 3px solid #667eea; white-space: nowrap; animation: typewriter 3s steps(40) 1s forwards, blink 1s infinite; } @keyframes typewriter { from { width: 0; } to { width: 100%; } } @keyframes blink { 50% { border-color: transparent; } } .floating { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .skill-bar { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); height: 8px; border-radius: 4px; transform-origin: left; animation: fillBar 2s ease-out; } @keyframes fillBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } .project-overlay { background: linear-gradient(45deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)); opacity: 0; transition: opacity 0.4s ease; } .project-card:hover .project-overlay { opacity: 1; } .glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); } .text-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pulse-ring { animation: pulse-ring 2s infinite; } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } } .scroll-indicator { animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
JavaScript
// Mobile menu toggle function toggleMobileMenu() { const mobileMenu = document.getElementById('mobile-menu'); mobileMenu.classList.toggle('hidden'); } // Navbar scroll effect window.addEventListener('scroll', function() { const navbar = document.getElementById('navbar'); if (window.scrollY > 100) { navbar.classList.add('bg-slate-900', 'bg-opacity-95'); } else { navbar.classList.remove('bg-slate-900', 'bg-opacity-95'); } }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Add click handlers for interactive elements document.querySelectorAll('.elegant-hover').forEach(card => { card.addEventListener('click', function() { const title = this.querySelector('h3')?.textContent || 'Portfolio Item'; showNotification(`Viewing: ${title}`); }); }); // Project interactions document.querySelectorAll('.project-card').forEach(card => { card.addEventListener('click', function() { const title = this.querySelector('h3')?.textContent || 'Project'; showNotification(`Opening project: ${title}`); }); }); // Form submission document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); showNotification('Message sent successfully! I\'ll get back to you soon.'); }); // Button handlers document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Download') || button.textContent.includes('Resume')) { button.addEventListener('click', function() { showNotification('Resume download started!'); }); } if (button.textContent.includes('Let\'s Talk')) { button.addEventListener('click', function() { document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); }); } if (button.textContent.includes('View My Work')) { button.addEventListener('click', function() { document.getElementById('projects').scrollIntoView({ behavior: 'smooth' }); }); } }); // Notification system function showNotification(message) { const notification = document.createElement('div'); notification.className = 'fixed top-20 right-4 hero-gradient text-white px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300 max-w-sm'; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.classList.remove('translate-x-full'); }, 100); setTimeout(() => { notification.classList.add('translate-x-full'); setTimeout(() => { document.body.removeChild(notification); }, 300); }, 4000); } // Initialize page document.addEventListener('DOMContentLoaded', function() { // Add animation classes to sections on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { if (entry.target.classList.contains('fade-in-left')) { entry.target.classList.add('fade-in-left'); } else if (entry.target.classList.contains('fade-in-right')) { entry.target.classList.add('fade-in-right'); } else if (entry.target.classList.contains('fade-in-up')) { entry.target.classList.add('fade-in-up'); } else { entry.target.classList.add('scale-in'); } } }); }, observerOptions); document.querySelectorAll('.fade-in-left, .fade-in-right, .fade-in-up, .elegant-hover, .project-card').forEach(element => { observer.observe(element); }); // Animate skill bars on scroll const skillsObserver = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { const skillBars = entry.target.querySelectorAll('.skill-bar'); skillBars.forEach(bar => { bar.style.animation = 'fillBar 2s ease-out'; }); skillsObserver.unobserve(entry.target); } }); }, { threshold: 0.5 }); const skillsSection = document.getElementById('skills'); if (skillsSection) { skillsObserver.observe(skillsSection); } // Add floating animation delays const floatingElements = document.querySelectorAll('.floating'); floatingElements.forEach((element, index) => { element.style.animationDelay = `${index * 0.5}s`; }); // Add pulse animation delays const pulseElements = document.querySelectorAll('.pulse-ring'); pulseElements.forEach((element, index) => { element.style.animationDelay = `${index * 0.3}s`; }); });
Output Preview
Desktop
Mobile
Fullscreen