Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Professional Portfolio | CV & Profiles</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/project-card.js"></script> | |
| <script src="components/profile-links.js"></script> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8 md:py-12"> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-[80vh] flex flex-col justify-center items-center text-center py-12"> | |
| <div class="w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-indigo-500 mb-6"> | |
| <img src="http://static.photos/people/320x240/42" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-indigo-600 dark:text-indigo-400" id="userName">[Your Name]</span></h1> | |
| <h2 class="text-xl md:text-2xl text-gray-600 dark:text-gray-400 mb-6" id="userTitle">[Your Profession]</h2> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#" id="cvDownload" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i data-feather="download" class="mr-2"></i> Download CV | |
| </a> | |
| <a href="#" id="linkedinLink" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition flex items-center"> | |
| <i data-feather="linkedin" class="mr-2"></i> LinkedIn | |
| </a> | |
| <a href="#" id="mediumLink" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition flex items-center"> | |
| <i data-feather="edit" class="mr-2"></i> Medium | |
| </a> | |
| <a href="#" id="scholarLink" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition flex items-center"> | |
| <i data-feather="book-open" class="mr-2"></i> Scholar | |
| </a> | |
| </div> | |
| <div class="flex gap-4"> | |
| <a href="#work" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">View My Work</a> | |
| <a href="#contact" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition">Contact Me</a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-12 md:py-20" data-aos="fade-up"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">About Me</h2> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <p class="mb-4 text-lg">I'm a passionate designer and developer with 5+ years of experience creating beautiful, functional digital experiences.</p> | |
| <p class="mb-6">My approach combines aesthetic sensibility with technical expertise to deliver solutions that users love. I specialize in responsive design, accessibility, and performance optimization.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">UI Design</span> | |
| <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">UX Research</span> | |
| <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">HTML/CSS</span> | |
| <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">JavaScript</span> | |
| <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">React</span> | |
| <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">Figma</span> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-indigo-500 w-full h-80 rounded-xl overflow-hidden"> | |
| <img src="http://static.photos/workspace/640x360/12" alt="Working" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg w-3/4"> | |
| <h3 class="font-bold mb-2">Currently working at</h3> | |
| <p class="text-indigo-600 dark:text-indigo-400">Digital Creative Agency</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Work Section --> | |
| <section id="work" class="py-12 md:py-20 bg-gray-100 dark:bg-gray-800 rounded-xl"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Featured Projects</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <custom-project-card | |
| title="E-commerce Redesign" | |
| description="Complete UI/UX overhaul for fashion retailer" | |
| tags="UI Design, UX Research, React" | |
| image="http://static.photos/retail/640x360/1"> | |
| </custom-project-card> | |
| <custom-project-card | |
| title="Health App" | |
| description="Mobile application for fitness tracking" | |
| tags="Mobile Design, Prototyping" | |
| image="http://static.photos/wellness/640x360/2"> | |
| </custom-project-card> | |
| <custom-project-card | |
| title="Corporate Website" | |
| description="Responsive website for tech startup" | |
| tags="Web Design, Development" | |
| image="http://static.photos/technology/640x360/3"> | |
| </custom-project-card> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition"> | |
| View All Projects | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-12 md:py-20"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Get In Touch</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="mail" class="mr-4 text-indigo-600 dark:text-indigo-400"></i> | |
| <span>hello@example.com</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="phone" class="mr-4 text-indigo-600 dark:text-indigo-400"></i> | |
| <span>+1 (555) 123-4567</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="map-pin" class="mr-4 text-indigo-600 dark:text-indigo-400"></i> | |
| <span>San Francisco, CA</span> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-semibold mb-4">Follow Me</h3> | |
| <div class="flex gap-4"> | |
| <a href="#" class="p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-indigo-100 dark:hover:bg-indigo-900 transition"> | |
| <i data-feather="twitter" class="text-indigo-600 dark:text-indigo-400"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-indigo-100 dark:hover:bg-indigo-900 transition"> | |
| <i data-feather="linkedin" class="text-indigo-600 dark:text-indigo-400"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-indigo-100 dark:hover:bg-indigo-900 transition"> | |
| <i data-feather="dribbble" class="text-indigo-600 dark:text-indigo-400"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-indigo-100 dark:hover:bg-indigo-900 transition"> | |
| <i data-feather="github" class="text-indigo-600 dark:text-indigo-400"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea> | |
| </div> | |
| <button type="submit" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition w-full">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| // Dark mode toggle | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| if (darkModeToggle) { | |
| darkModeToggle.addEventListener('click', () => { | |
| document.documentElement.classList.toggle('dark'); | |
| localStorage.setItem('darkMode', document.documentElement.classList.contains('dark')); | |
| }); | |
| } | |
| // Check for saved dark mode preference | |
| if (localStorage.getItem('darkMode') === 'true') { | |
| document.documentElement.classList.add('dark'); | |
| // Check for saved dark mode preference | |
| if (localStorage.getItem('darkMode') === 'true') { | |
| document.documentElement.classList.add('dark'); | |
| } | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |