Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelCraft Portfolio Pro</title> | |
| <meta name="description" content="Professional portfolio showcasing my work and skills"> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| transition: background-color 0.3s ease; | |
| } | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #6366f1, #8b5cf6); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .skill-bar { | |
| transition: width 1s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md shadow-sm"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <a href="#" class="text-2xl font-bold"> | |
| <span class="gradient-text">PixelCraft</span> | |
| </a> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="font-medium hover:text-indigo-600 transition-colors">Home</a> | |
| <a href="#projects" class="font-medium hover:text-indigo-600 transition-colors">Projects</a> | |
| <a href="#skills" class="font-medium hover:text-indigo-600 transition-colors">Skills</a> | |
| <a href="#about" class="font-medium hover:text-indigo-600 transition-colors">About</a> | |
| <a href="#contact" class="font-medium hover:text-indigo-600 transition-colors">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-gray-600 hover:text-indigo-600"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="py-20 md:py-32"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| Hi, I'm <span class="gradient-text">Alex</span> | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-gray-600"> | |
| UI/UX Designer & Frontend Developer | |
| </h2> | |
| <p class="text-lg mb-8 text-gray-500 max-w-lg"> | |
| I create beautiful, functional digital experiences that users love. | |
| With 5+ years of experience, I bridge the gap between design and technology. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#projects" class="px-8 py-3 bg-indigo-600 text-white rounded-full font-medium hover:bg-indigo-700 transition-colors"> | |
| View My Work | |
| </a> | |
| <a href="#contact" class="px-8 py-3 border border-indigo-600 text-indigo-600 rounded-full font-medium hover:bg-indigo-50 transition-colors"> | |
| 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 rounded-full overflow-hidden border-4 border-indigo-100 shadow-lg"> | |
| <img src="http://static.photos/people/640x360/1" alt="Profile" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-indigo-600 opacity-10"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Projects</h2> | |
| <p class="text-lg text-gray-500 max-w-2xl mx-auto"> | |
| Here are some of my recent works that showcase my skills and expertise. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/1" alt="Project 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3> | |
| <p class="text-gray-600 mb-4"> | |
| A modern e-commerce solution with seamless checkout and mobile-first design. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">React</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Node.js</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">MongoDB</span> | |
| </div> | |
| <a href="#" class="text-indigo-600 font-medium flex items-center"> | |
| View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/2" alt="Project 2" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Health Dashboard</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Interactive data visualization for healthcare analytics with real-time updates. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Vue.js</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">D3.js</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Firebase</span> | |
| </div> | |
| <a href="#" class="text-indigo-600 font-medium flex items-center"> | |
| View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/3" alt="Project 3" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Task Management App</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Collaborative task management solution with drag-and-drop functionality. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">React</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Redux</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">GraphQL</span> | |
| </div> | |
| <a href="#" class="text-indigo-600 font-medium flex items-center"> | |
| View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700"> | |
| View All Projects | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">My Skills</h2> | |
| <p class="text-lg text-gray-500 max-w-2xl mx-auto"> | |
| I've honed my expertise across various technologies and design disciplines. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-4xl mx-auto"> | |
| <!-- Technical Skills --> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-6 flex items-center"> | |
| <i data-feather="code" class="mr-3 text-indigo-600"></i> | |
| Technical Skills | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">HTML/CSS</span> | |
| <span class="text-gray-500">95%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">JavaScript</span> | |
| <span class="text-gray-500">90%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">React</span> | |
| <span class="text-gray-500">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Node.js</span> | |
| <span class="text-gray-500">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Design Skills --> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-6 flex items-center"> | |
| <i data-feather="pen-tool" class="mr-3 text-indigo-600"></i> | |
| Design Skills | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">UI/UX Design</span> | |
| <span class="text-gray-500">90%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Figma</span> | |
| <span class="text-gray-500">95%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Adobe XD</span> | |
| <span class="text-gray-500">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Prototyping</span> | |
| <span class="text-gray-500">88%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="skill-bar bg-indigo-600 h-2 rounded-full" style="width: 88%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto"> | |
| <div class="flex flex-col items-center p-6 bg-white rounded-xl shadow-sm"> | |
| <i data-feather="award" class="w-10 h-10 text-indigo-600 mb-3"></i> | |
| <span class="text-2xl font-bold">5+</span> | |
| <span class="text-gray-500">Years Experience</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 bg-white rounded-xl shadow-sm"> | |
| <i data-feather="check-circle" class="w-10 h-10 text-indigo-600 mb-3"></i> | |
| <span class="text-2xl font-bold">42+</span> | |
| <span class="text-gray-500">Projects Completed</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 bg-white rounded-xl shadow-sm"> | |
| <i data-feather="smile" class="w-10 h-10 text-indigo-600 mb-3"></i> | |
| <span class="text-2xl font-bold">36+</span> | |
| <span class="text-gray-500">Happy Clients</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 bg-white rounded-xl shadow-sm"> | |
| <i data-feather="coffee" class="w-10 h-10 text-indigo-600 mb-3"></i> | |
| <span class="text-2xl font-bold">∞</span> | |
| <span class="text-gray-500">Cups of Coffee</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">About Me</h2> | |
| <p class="text-lg mb-6 text-gray-600"> | |
| I'm a passionate UI/UX Designer and Frontend Developer with a strong focus on creating intuitive, | |
| user-centered digital experiences. My approach combines aesthetic sensibility with technical expertise. | |
| </p> | |
| <p class="text-lg mb-6 text-gray-600"> | |
| When I'm not designing or coding, you can find me hiking in the mountains, reading sci-fi novels, | |
| or experimenting with new recipes in the kitchen. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="px-6 py-2 bg-indigo-600 text-white rounded-full font-medium hover:bg-indigo-700 transition-colors flex items-center"> | |
| <i data-feather="download" class="mr-2 w-4 h-4"></i> | |
| Download CV | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <img src="http://static.photos/office/640x360/1" alt="About Me" class="rounded-xl shadow-lg w-full"> | |
| <div class="absolute -bottom-6 -right-6 bg-indigo-600 p-4 rounded-xl shadow-lg"> | |
| <i data-feather="award" class="w-8 h-8 text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Client Testimonials</h2> | |
| <p class="text-lg text-gray-500 max-w-2xl mx-auto"> | |
| Don't just take my word for it - here's what my clients say about working with me. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/1" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">CEO, TechStart</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Alex transformed our outdated website into a modern, user-friendly platform that increased our conversions by 40%. His attention to detail and creative solutions were exceptional." | |
| </p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/2" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-sm text-gray-500">Product Manager, HealthPlus</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Working with Alex was a game-changer for our product. His UX insights helped us simplify complex workflows, resulting in a 30% reduction in support tickets." | |
| </p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/3" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Emily Rodriguez</h4> | |
| <p class="text-sm text-gray-500">Marketing Director, Bloom</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "Alex's design work elevated our brand identity across all digital touchpoints. His ability to translate our vision into a cohesive visual language was impressive." | |
| </p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In Touch</h2> | |
| <p class="text-lg text-indigo-100 max-w-2xl mx-auto"> | |
| Have a project in mind or want to discuss potential opportunities? I'd love to hear from you! | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block mb-2 font-medium">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-300 placeholder-indigo-300"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 font-medium">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-300 placeholder-indigo-300"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block mb-2 font-medium">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-300 placeholder-indigo-300"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-2 font-medium">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-300 placeholder-indigo-300"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-white text-indigo-600 rounded-full font-bold hover:bg-gray-100 transition-colors"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| <div> | |
| <div class="bg-indigo-700 p-8 rounded-xl h-full"> | |
| <h3 class="text-xl font-bold mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <i data-feather="mail" class="w-5 h-5 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium mb-1">Email</h4> | |
| <a href="mailto:hello@example.com" class="text-indigo-200 hover:text-white">hello@example.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="phone" class="w-5 h-5 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium mb-1">Phone</h4> | |
| <a href="tel:+1234567890" class="text-indigo-200 hover:text-white">+1 (234) 567-890</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="map-pin" class="w-5 h-5 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium mb-1">Location</h4> | |
| <p class="text-indigo-200">San Francisco, CA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mt-12 mb-6">Follow Me</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center hover:bg-indigo-500 transition-colors"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center hover:bg-indigo-500 transition-colors"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center hover:bg-indigo-500 transition-colors"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center hover:bg-indigo-500 transition-colors"> | |
| <i data-feather="dribbble" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 bg-gray-900 text-gray-400"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="#" class="text-2xl font-bold text-white"> | |
| <span class="gradient-text">PixelCraft</span> | |
| </a> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#home" class="hover:text-white transition-colors">Home</a> | |
| <a href="#projects" class="hover:text-white transition-colors">Projects</a> | |
| <a href="#skills" class="hover:text-white transition-colors">Skills</a> | |
| <a href="#about" class="hover:text-white transition-colors">About</a> | |
| <a href="#contact" class="hover:text-white transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p>© 2023 PixelCraft Portfolio. All rights reserved.</p> | |
| <div class="mt-4 md:mt-0"> | |
| <a href="#" class="text-sm hover:text-white transition-colors">Privacy Policy</a> | |
| <span class="mx-2">•</span> | |
| <a href="#" class="text-sm hover:text-white transition-colors">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Animate skill bars on scroll | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const skillBars = document.querySelectorAll('.skill-bar'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const width = entry.target.style.width; | |
| entry.target.style.width = '0'; | |
| setTimeout(() => { | |
| entry.target.style.width = width; | |
| }, 100); | |
| } | |
| }); | |
| }, {threshold: 0.1}); | |
| skillBars.forEach(bar => { | |
| observer.observe(bar); | |
| }); | |
| // Mobile menu toggle | |
| const menuButton = document.querySelector('button[aria-label="menu"]'); | |
| const mobileMenu = document.querySelector('#mobile-menu'); | |
| menuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |