Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Creative Portfolio | John Doe</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .project-card:hover .project-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #3b82f6; | |
| transition: width 0.3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-sm z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold gradient-text">JD</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="nav-link text-gray-700 hover:text-blue-500 transition">Home</a> | |
| <a href="#about" class="nav-link text-gray-700 hover:text-blue-500 transition">About</a> | |
| <a href="#work" class="nav-link text-gray-700 hover:text-blue-500 transition">Work</a> | |
| <a href="#contact" class="nav-link text-gray-700 hover:text-blue-500 transition">Contact</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="menu-btn" class="text-gray-500 hover:text-gray-900"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white pb-3 px-4"> | |
| <a href="#home" class="block py-2 text-gray-700 hover:text-blue-500">Home</a> | |
| <a href="#about" class="block py-2 text-gray-700 hover:text-blue-500">About</a> | |
| <a href="#work" class="block py-2 text-gray-700 hover:text-blue-500">Work</a> | |
| <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-500">Contact</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-800 mb-4"> | |
| Hi, I'm <span class="gradient-text">John Doe</span> | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl text-gray-600 mb-6"> | |
| Creative Designer & Developer | |
| </h2> | |
| <p class="text-gray-500 mb-8 max-w-lg"> | |
| I craft beautiful digital experiences that blend form and function to create meaningful connections between brands and their audiences. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#work" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition shadow-md"> | |
| View My Work | |
| </a> | |
| <a href="#contact" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100 transition"> | |
| Contact Me | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full opacity-20 blur-xl"></div> | |
| <div class="absolute inset-4 bg-white rounded-full shadow-lg flex items-center justify-center"> | |
| <div class="w-full h-full rounded-full overflow-hidden border-4 border-white shadow-md"> | |
| <!-- Placeholder for profile image --> | |
| <div class="w-full h-full bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-user text-6xl text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12"> | |
| About <span class="gradient-text">Me</span> | |
| </h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center"> | |
| <div class="w-64 h-64 rounded-full overflow-hidden border-4 border-white shadow-lg"> | |
| <!-- Placeholder for about image --> | |
| <div class="w-full h-full bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-5xl text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12"> | |
| <h3 class="text-2xl font-semibold text-gray-700 mb-4">My Journey</h3> | |
| <p class="text-gray-500 mb-6"> | |
| With over 8 years of experience in the digital design space, I've had the privilege of working with startups and Fortune 500 companies alike. My approach combines aesthetic sensibility with technical expertise to deliver solutions that are both beautiful and functional. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-palette text-blue-500"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-700">UI/UX Design</h4> | |
| </div> | |
| <p class="text-gray-500 text-sm"> | |
| Creating intuitive interfaces with a focus on user experience and visual appeal. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-code text-purple-500"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-700">Web Development</h4> | |
| </div> | |
| <p class="text-gray-500 text-sm"> | |
| Building responsive, performant websites with modern technologies. | |
| </p> | |
| </div> | |
| </div> | |
| <a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-700"> | |
| Download Resume | |
| <i class="fas fa-download ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Work Section --> | |
| <section id="work" class="py-16 bg-gray-50 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-4"> | |
| My <span class="gradient-text">Work</span> | |
| </h2> | |
| <p class="text-center text-gray-500 max-w-2xl mx-auto mb-12"> | |
| Here's a selection of some of my recent projects. Each one presented unique challenges and opportunities for creative problem-solving. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt text-white text-5xl"></i> | |
| </div> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transform translate-y-4 transition duration-300"> | |
| <a href="#" class="px-4 py-2 bg-white text-blue-500 rounded-lg font-medium">View Case Study</a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Mobile Banking App</h3> | |
| <p class="text-gray-500 mb-4">A complete redesign of a banking app with improved UX and modern aesthetics.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">UI Design</span> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-600 text-xs rounded-full">UX Research</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center"> | |
| <i class="fas fa-shopping-bag text-white text-5xl"></i> | |
| </div> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transform translate-y-4 transition duration-300"> | |
| <a href="#" class="px-4 py-2 bg-white text-green-500 rounded-lg font-medium">View Case Study</a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">E-commerce Platform</h3> | |
| <p class="text-gray-500 mb-4">A custom e-commerce solution with focus on conversion optimization.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-green-100 text-green-600 text-xs rounded-full">Web Design</span> | |
| <span class="px-3 py-1 bg-teal-100 text-teal-600 text-xs rounded-full">Frontend Dev</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-orange-400 to-pink-500 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-white text-5xl"></i> | |
| </div> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transform translate-y-4 transition duration-300"> | |
| <a href="#" class="px-4 py-2 bg-white text-pink-500 rounded-lg font-medium">View Case Study</a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Analytics Dashboard</h3> | |
| <p class="text-gray-500 mb-4">Data visualization dashboard for complex business metrics.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-orange-100 text-orange-600 text-xs rounded-full">UI Design</span> | |
| <span class="px-3 py-1 bg-pink-100 text-pink-600 text-xs rounded-full">Data Viz</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg | |
| </html> |