Spaces:
Running
Running
Create a NextJS web developer portfolio. Style - modern, minimalistic. Focus on the main hero section of the landing page to look well, some inspiration can be Vercel for the style
2e41dd0 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NextGen Devfolio | Modern NextJS Portfolio</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200"> | |
| <custom-navbar></custom-navbar> | |
| <main class="min-h-screen"> | |
| <!-- Hero Section --> | |
| <section class="relative py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-900 to-gray-800 text-white overflow-hidden"> | |
| <div class="max-w-7xl mx-auto relative z-10"> | |
| <div class="flex flex-col md:flex-row items-center justify-between gap-12"> | |
| <div class="md:w-1/2 space-y-6"> | |
| <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight"> | |
| Crafting Digital <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">Experiences</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 max-w-lg"> | |
| I build fast, modern, and accessible web applications with NextJS, React, and TailwindCSS. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#projects" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg font-medium hover:shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| View Projects | |
| </a> | |
| <a href="#contact" class="px-6 py-3 border border-gray-600 rounded-lg font-medium hover:bg-gray-800 transition-all duration-300"> | |
| Get in Touch | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl blur opacity-75"></div> | |
| <div class="relative bg-gray-800 rounded-xl overflow-hidden"> | |
| <img src="http://static.photos/technology/1024x576/42" alt="Code Example" class="w-full h-auto object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-blue-500/10 to-purple-500/10 -skew-x-12"></div> | |
| </section> | |
| <!-- Projects Preview --> | |
| <section id="projects" class="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4"> | |
| Selected <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">Projects</span> | |
| </h2> | |
| <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> | |
| Here are some of my recent projects built with modern technologies. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/workspace/640x360/1" alt="Project 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">E-Commerce Platform</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Full-featured NextJS e-commerce with Stripe integration. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-sm rounded-full">NextJS</span> | |
| <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-sm rounded-full">TailwindCSS</span> | |
| <span class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-sm rounded-full">Stripe</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow 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 text-gray-900 dark:text-white mb-2">SaaS Dashboard</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Analytics dashboard with real-time data visualization. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-sm rounded-full">NextJS</span> | |
| <span class="px-3 py-1 bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 text-sm rounded-full">Firebase</span> | |
| <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-sm rounded-full">Chart.js</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/workspace/640x360/3" alt="Project 3" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Portfolio Builder</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Customizable portfolio website generator. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-sm rounded-full">NextJS</span> | |
| <span class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 text-sm rounded-full">MDX</span> | |
| <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-sm rounded-full">Contentful</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-300"> | |
| View All Projects | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4"> | |
| My <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">Tech Stack</span> | |
| </h2> | |
| <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> | |
| Tools and technologies I use to bring ideas to life. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8"> | |
| <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <div class="w-16 h-16 flex items-center justify-center bg-blue-50 dark:bg-blue-900/20 rounded-lg mb-4"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" alt="NextJS" class="w-10 h-10"> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">NextJS</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <div class="w-16 h-16 flex items-center justify-center bg-purple-50 dark:bg-purple-900/20 rounded-lg mb-4"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg" alt="TailwindCSS" class="w-10 h-10"> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">TailwindCSS</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <div class="w-16 h-16 flex items-center justify-center bg-blue-50 dark:bg-blue-900/20 rounded-lg mb-4"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" class="w-10 h-10"> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">React</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <div class="w-16 h-16 flex items-center justify-center bg-yellow-50 dark:bg-yellow-900/20 rounded-lg mb-4"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript" class="w-10 h-10"> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">TypeScript</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <div class="w-16 h-16 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-lg mb-4"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="NodeJS" class="w-10 h-10"> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">NodeJS</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"> | |
| <div class="w-16 h-16 flex items-center justify-center bg-green-50 dark:bg-green-900/20 rounded-lg mb-4"> | |
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg" alt="MongoDB" class="w-10 h-10"> | |
| </div> | |
| <span class="font-medium text-gray-800 dark:text-gray-200">MongoDB</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4"> | |
| Get In <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">Touch</span> | |
| </h2> | |
| <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> | |
| Have a project in mind? Let's collaborate and create something amazing! | |
| </p> | |
| </div> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label> | |
| <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-all duration-200"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label> | |
| <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-all duration-200"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label> | |
| <input type="text" id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-all duration-200"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label> | |
| <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-all duration-200"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:shadow-lg transition-all duration-300 transform hover:scale-[1.02]"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Enable dark mode toggle | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const darkModeToggle = document.getElementById('dark-mode-toggle'); | |
| if (darkModeToggle) { | |
| darkModeToggle.addEventListener('click', function() { | |
| 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'); | |
| } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | |
| document.documentElement.classList.add('dark'); | |
| } | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |