| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PixelPulse Portfolio</title> |
| <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> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: '#d946ef', |
| secondary: '#f97316', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Poppins', sans-serif; |
| scroll-behavior: smooth; |
| } |
| .gradient-text { |
| background: linear-gradient(90deg, #d946ef 0%, #f97316 100%); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| .glass-effect { |
| background: rgba(15, 23, 42, 0.7); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-slate-900 text-slate-200 min-h-screen"> |
| |
| <nav class="glass-effect fixed w-full z-50"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex justify-between items-center"> |
| <a href="#" class="text-2xl font-bold gradient-text">PixelPulse</a> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#home" class="hover:text-primary transition">Home</a> |
| <a href="#projects" class="hover:text-primary transition">Projects</a> |
| <a href="#about" class="hover:text-primary transition">About</a> |
| <a href="#contact" class="hover:text-primary transition">Contact</a> |
| </div> |
| <button id="mobile-menu-button" class="md:hidden"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div id="mobile-menu" class="hidden glass-effect fixed inset-0 z-40 md:hidden"> |
| <div class="container mx-auto px-6 py-20 flex flex-col items-center justify-center h-full"> |
| <div class="flex flex-col space-y-8 text-center"> |
| <a href="#home" class="text-xl hover:text-primary transition">Home</a> |
| <a href="#projects" class="text-xl hover:text-primary transition">Projects</a> |
| <a href="#about" class="text-xl hover:text-primary transition">About</a> |
| <a href="#contact" class="text-xl hover:text-primary transition">Contact</a> |
| </div> |
| <button id="close-mobile-menu" class="absolute top-6 right-6"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <section id="home" class="min-h-screen flex items-center pt-20"> |
| <div class="container mx-auto px-6 py-20"> |
| <div class="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> |
| <br>Creative Designer |
| </h1> |
| <p class="text-lg text-slate-400 mb-8 max-w-lg"> |
| I craft beautiful digital experiences that blend aesthetics with functionality. My designs tell stories and create connections. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#projects" class="px-6 py-3 bg-primary rounded-lg font-medium hover:bg-fuchsia-600 transition">View Work</a> |
| <a href="#contact" class="px-6 py-3 border border-primary text-primary rounded-lg font-medium hover:bg-fuchsia-900/30 transition">Hire Me</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative"> |
| <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center"> |
| <img src="http://static.photos/people/640x360/42" alt="Designer portrait" class="w-60 h-60 md:w-72 md:h-72 rounded-full object-cover border-4 border-slate-900"> |
| </div> |
| <div class="absolute -bottom-4 -right-4 bg-slate-800 p-4 rounded-lg shadow-lg"> |
| <span class="block text-xs text-slate-400">Currently working at</span> |
| <span class="font-bold text-primary">Pixel Studios</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="projects" class="py-20 bg-slate-800/50"> |
| <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 <span class="gradient-text">Projects</span></h2> |
| <p class="text-slate-400 max-w-2xl mx-auto">A curated selection of my recent design work across various industries and mediums.</p> |
| </div> |
| <div id="projects-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| </div> |
|
|
| <template id="project-template"> |
| <div class="glass-effect rounded-xl overflow-hidden group"> |
| <div class="relative overflow-hidden"> |
| <img src="" alt="" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110 project-image"> |
| <div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition"> |
| <div> |
| <h3 class="text-xl font-bold mb-2 project-title"></h3> |
| <p class="text-sm text-slate-300 mb-4 project-description"></p> |
| <div class="flex space-x-2 project-topics"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2 project-title"></h3> |
| <a href="#" class="text-primary text-sm font-medium inline-flex items-center project-link"> |
| View Project <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> |
| </a> |
| </div> |
| </div> |
| </template> |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-primary text-primary rounded-lg font-medium hover:bg-fuchsia-900/30 transition"> |
| View All Projects <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20"> |
| <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"> |
| <img src="http://static.photos/workspace/640x360/4" alt="Designer at work" class="rounded-xl shadow-2xl"> |
| </div> |
| <div class="md:w-1/2"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">About <span class="gradient-text">Me</span></h2> |
| <p class="text-slate-400 mb-6"> |
| I'm a passionate designer with 8 years of experience creating digital experiences that users love. My journey began in graphic design and evolved into UI/UX as I discovered my love for solving problems through design. |
| </p> |
| <p class="text-slate-400 mb-8"> |
| I believe in design that not only looks beautiful but also works intuitively. My approach combines aesthetics with functionality, ensuring that every pixel serves a purpose. |
| </p> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-bold mb-4">Skills & Expertise</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-slate-800 rounded-full text-sm">UI/UX Design</span> |
| <span class="px-3 py-1 bg-slate-800 rounded-full text-sm">Product Design</span> |
| <span class="px-3 py-1 bg-slate-800 rounded-full text-sm">Prototyping</span> |
| <span class="px-3 py-1 bg-slate-800 rounded-full text-sm">User Research</span> |
| <span class="px-3 py-1 bg-slate-800 rounded-full text-sm">Figma</span> |
| <span class="px-3 py-1 bg-slate-800 rounded-full text-sm">Adobe Suite</span> |
| <span class="px-3 py-1 bg-slate-800 rounded-full text-sm">HTML/CSS</span> |
| </div> |
| </div> |
| |
| <a href="#" class="inline-flex items-center px-6 py-3 bg-primary rounded-lg font-medium hover:bg-fuchsia-600 transition"> |
| Download Resume <i data-feather="download" class="w-4 h-4 ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-slate-800/50"> |
| <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 <span class="gradient-text">Touch</span></h2> |
| <p class="text-slate-400 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"> |
| <div class="glass-effect rounded-xl p-8 shadow-xl"> |
| <form> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium mb-2">Your Name</label> |
| <input type="text" id="name" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium mb-2">Email Address</label> |
| <input type="email" id="email" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> |
| </div> |
| </div> |
| <div class="mb-6"> |
| <label for="subject" class="block text-sm font-medium mb-2">Subject</label> |
| <input type="text" id="subject" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> |
| </div> |
| <div class="mb-6"> |
| <label for="message" class="block text-sm font-medium mb-2">Your Message</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea> |
| </div> |
| <button type="submit" class="w-full px-6 py-4 bg-primary rounded-lg font-medium hover:bg-fuchsia-600 transition"> |
| Send Message <i data-feather="send" class="w-4 h-4 ml-2"></i> |
| </button> |
| </form> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12"> |
| <div class="glass-effect rounded-xl p-6 text-center"> |
| <div class="w-12 h-12 bg-primary/20 text-primary rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="mail"></i> |
| </div> |
| <h3 class="font-bold mb-2">Email</h3> |
| <p class="text-sm text-slate-400">hello@pixelpulse.design</p> |
| </div> |
| <div class="glass-effect rounded-xl p-6 text-center"> |
| <div class="w-12 h-12 bg-secondary/20 text-secondary rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="phone"></i> |
| </div> |
| <h3 class="font-bold mb-2">Phone</h3> |
| <p class="text-sm text-slate-400">+1 (555) 123-4567</p> |
| </div> |
| <div class="glass-effect rounded-xl p-6 text-center"> |
| <div class="w-12 h-12 bg-primary/20 text-primary rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="map-pin"></i> |
| </div> |
| <h3 class="font-bold mb-2">Location</h3> |
| <p class="text-sm text-slate-400">San Francisco, CA</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="py-12 border-t border-slate-800"> |
| <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 gradient-text">PixelPulse</a> |
| <p class="text-sm text-slate-500 mt-2">© 2023 All rights reserved</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-slate-400 hover:text-primary transition"> |
| <i data-feather="dribbble"></i> |
| </a> |
| <a href="#" class="text-slate-400 hover:text-primary transition"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-slate-400 hover:text-primary transition"> |
| <i data-feather="instagram"></i> |
| </a> |
| <a href="#" class="text-slate-400 hover:text-primary transition"> |
| <i data-feather="linkedin"></i> |
| </a> |
| <a href="#" class="text-slate-400 hover:text-primary transition"> |
| <i data-feather="github"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| <script> |
| |
| async function fetchGitHubProjects() { |
| const response = await fetch('https://api.github.com/users/octocat/repos'); |
| const projects = await response.json(); |
| const container = document.getElementById('projects-container'); |
| const template = document.getElementById('project-template'); |
| |
| projects.slice(0, 6).forEach(project => { |
| const clone = template.content.cloneNode(true); |
| |
| clone.querySelector('.project-title').textContent = project.name; |
| clone.querySelectorAll('.project-title').forEach(el => el.textContent = project.name); |
| clone.querySelector('.project-description').textContent = project.description || 'GitHub repository project'; |
| clone.querySelector('.project-link').href = project.html_url; |
| clone.querySelector('.project-image').src = `http://static.photos/technology/640x360/${Math.floor(Math.random() * 100)}`; |
| |
| const topicsContainer = clone.querySelector('.project-topics'); |
| project.topics?.slice(0, 3).forEach(topic => { |
| const span = document.createElement('span'); |
| span.className = 'text-xs px-2 py-1 bg-primary/20 text-primary rounded'; |
| span.textContent = topic; |
| topicsContainer.appendChild(span); |
| }); |
| |
| container.appendChild(clone); |
| }); |
| |
| |
| feather.replace(); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', fetchGitHubProjects); |
| |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| const closeMobileMenu = document.getElementById('close-mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.remove('hidden'); |
| }); |
| |
| closeMobileMenu.addEventListener('click', () => { |
| mobileMenu.classList.add('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| mobileMenu.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const navbar = document.querySelector('nav'); |
| if (window.scrollY > 50) { |
| navbar.classList.add('shadow-lg'); |
| } else { |
| navbar.classList.remove('shadow-lg'); |
| } |
| }); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
