Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DevCraft | Web Developer Portfolio</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); | |
| :root { | |
| --primary: #6c5ce7; | |
| --secondary: #00cec9; | |
| --dark: #2d3436; | |
| --light: #f5f6fa; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--light); | |
| color: var(--dark); | |
| overflow-x: hidden; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| } | |
| .card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px) rotateX(5deg); | |
| box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .skill-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background: #dfe6e9; | |
| overflow: hidden; | |
| } | |
| .skill-progress { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| transition: width 1.5s ease; | |
| } | |
| .project-card { | |
| perspective: 1000px; | |
| } | |
| .project-inner { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .project-card:hover .project-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .project-front, .project-back { | |
| backface-visibility: hidden; | |
| } | |
| .project-back { | |
| transform: rotateY(180deg); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .typing { | |
| overflow: hidden; | |
| border-right: 3px solid var(--primary); | |
| white-space: nowrap; | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: var(--primary) } | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .scroll-down { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} | |
| 40% {transform: translateY(-20px);} | |
| 60% {transform: translateY(-10px);} | |
| } | |
| .blob { | |
| filter: blur(40px); | |
| opacity: 0.7; | |
| animation: blob-animate 15s infinite alternate; | |
| } | |
| @keyframes blob-animate { | |
| 0% { transform: translate(0px, 0px) scale(1); } | |
| 33% { transform: translate(30px, -50px) scale(1.1); } | |
| 66% { transform: translate(-20px, 20px) scale(0.9); } | |
| 100% { transform: translate(0px, 0px) scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="relative"> | |
| <!-- Color blobs background --> | |
| <div class="fixed inset-0 overflow-hidden -z-10"> | |
| <div class="absolute top-0 left-0 w-64 h-64 rounded-full bg-purple-400 blob"></div> | |
| <div class="absolute bottom-0 right-0 w-96 h-96 rounded-full bg-teal-400 blob"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white bg-opacity-80 backdrop-blur-md shadow-sm 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">DevCraft</a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link font-medium">Home</a> | |
| <a href="#about" class="nav-link font-medium">About</a> | |
| <a href="#skills" class="nav-link font-medium">Skills</a> | |
| <a href="#projects" class="nav-link font-medium">Projects</a> | |
| <a href="#contact" class="nav-link font-medium">Contact</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="menu-toggle"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden mt-4" id="mobile-menu"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#home" class="nav-link font-medium">Home</a> | |
| <a href="#about" class="nav-link font-medium">About</a> | |
| <a href="#skills" class="nav-link font-medium">Skills</a> | |
| <a href="#projects" class="nav-link font-medium">Projects</a> | |
| <a href="#contact" class="nav-link font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <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-4">Hi, I'm <span class="gradient-text">Alex</span></h1> | |
| <h2 class="text-2xl md:text-4xl font-semibold mb-6 typing">Full Stack Web Developer</h2> | |
| <p class="text-lg text-gray-600 mb-8 max-w-lg">I craft beautiful, responsive websites and web applications with modern technologies and pixel-perfect designs.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="px-8 py-3 gradient-bg text-white rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">Hire Me</a> | |
| <a href="#projects" class="px-8 py-3 border-2 border-gray-300 rounded-full font-medium hover:border-purple-500 transition-all duration-300 transform hover:scale-105">View Work</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"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-teal-400 rounded-full opacity-20 blur-xl"></div> | |
| <img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Developer" | |
| class="relative w-full h-full object-cover rounded-full border-4 border-white shadow-2xl floating"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 scroll-down"> | |
| <a href="#about" class="text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-chevron-down text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white bg-opacity-80 backdrop-blur-sm"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text">About Me</h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center"> | |
| <div class="relative w-64 h-64"> | |
| <div class="absolute -inset-4 bg-gradient-to-r from-purple-400 to-teal-400 rounded-2xl opacity-75 blur-xl"></div> | |
| <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" | |
| alt="About Me" | |
| class="relative w-full h-full object-cover rounded-xl shadow-lg"> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12"> | |
| <h3 class="text-2xl font-bold mb-4">Who am I?</h3> | |
| <p class="text-gray-600 mb-6">I'm a passionate full-stack web developer with 5+ years of experience creating digital experiences. I specialize in building responsive, user-friendly websites and web applications using modern technologies.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1 text-purple-500"> | |
| <i class="fas fa-code text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Web Development</h4> | |
| <p class="text-gray-600">Building responsive websites and web applications with clean, efficient code.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1 text-teal-500"> | |
| <i class="fas fa-mobile-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Mobile Responsive</h4> | |
| <p class="text-gray-600">Creating designs that work perfectly on all devices and screen sizes.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1 text-purple-500"> | |
| <i class="fas fa-paint-brush text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">UI/UX Design</h4> | |
| <p class="text-gray-600">Designing intuitive user interfaces with exceptional user experience.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1 text-teal-500"> | |
| <i class="fas fa-rocket text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Performance</h4> | |
| <p class="text-gray-600">Optimizing websites for speed and performance to enhance user experience.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="inline-flex items-center px-6 py-3 gradient-bg text-white rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300"> | |
| Download CV <i class="fas fa-download ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text">My Skills</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Technical Skills</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">HTML/CSS</span> | |
| <span>95%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">JavaScript</span> | |
| <span>90%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">React</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Node.js</span> | |
| <span>80%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Professional Skills</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Communication</span> | |
| <span>90%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Teamwork</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Problem Solving</span> | |
| <span>95%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Creativity</span> | |
| <span>88%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress" style="width: 88%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16"> | |
| <h3 class="text-2xl font-bold mb-8 text-center">Tools & Technologies</h3> | |
| <div class="flex flex-wrap justify-center gap-8"> | |
| <div class="w-20 h-20 bg-white rounded-xl shadow-md flex items-center justify-center hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2"> | |
| <i class="fab fa-html5 text-4xl text-orange-500"></i> | |
| </div> | |
| <div class="w-20 h-20 bg-white rounded-xl shadow-md flex items-center justify-center hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2"> | |
| <i class="fab fa-css3-alt text-4xl text-blue-500"></i> | |
| </div> | |
| <div class="w-20 h-20 bg-white rounded-xl shadow-md flex items-center justify-center hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2"> | |
| <i class="fab fa-js text-4xl text-yellow-500"></i> | |
| </div> | |
| <div class="w-20 h-20 bg-white rounded-xl shadow-md flex items-center justify-center hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2"> | |
| <i class="fab fa-react text-4xl text-blue-400"></i> | |
| </div> | |
| <div class="w-20 h-20 bg-white rounded-xl shadow-md flex items-center justify-center hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2"> | |
| <i class="fab fa-node-js text-4xl text-green-500"></i> | |
| </div> | |
| <div class="w-20 h-20 bg-white rounded-xl shadow-md flex items-center justify-center hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2"> | |
| <i class="fab fa-git-alt text-4xl text-red-500"></i> | |
| </div> | |
| <div class="w-20 h-20 bg-white rounded-xl shadow-md flex items-center justify-center hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2"> | |
| <i class="fab fa-figma text-4xl text-purple-500"></i> | |
| </div> | |
| <div class="w-20 h-20 bg-white rounded-xl shadow-md flex items-center justify-center hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2"> | |
| <i class="fas fa-database text-4xl text-blue-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 bg-white bg-opacity-80 backdrop-blur-sm"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text">My Projects</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card"> | |
| <div class="project-inner relative h-full"> | |
| <div class="project-front absolute w-full h-full bg-white rounded-xl shadow-md overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Project 1" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3> | |
| <p class="text-gray-600 mb-4">A full-featured online store with payment integration and admin dashboard.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">React</span> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Node.js</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">MongoDB</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-back absolute w-full h-full bg-gradient-to-br from-purple-500 to-teal-500 rounded-xl shadow-md p-6 flex flex-col justify-center items-center text-white"> | |
| <h3 class="text-xl font-bold mb-4">E-commerce Platform</h3> | |
| <p class="text-center mb-6">Built with modern technologies to provide seamless shopping experience with real-time inventory management.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="px-4 py-2 bg-white text-purple-600 rounded-full font-medium">Live Demo</a> | |
| <a href="#" class="px-4 py-2 border-2 border-white text-white rounded-full font-medium">Code</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card"> | |
| <div class="project-inner relative h-full"> | |
| <div class="project-front absolute w-full h-full bg-white rounded-xl shadow-md overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Project 2" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Task Management App</h3> | |
| <p class="text-gray-600 mb-4">A productivity app for teams to collaborate and manage projects efficiently.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Vue.js</span> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Firebase</span> | |
| <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">TailwindCSS</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-back absolute w-full h-full bg-gradient-to-br from-purple-500 to-teal-500 rounded-xl shadow-md p-6 flex flex-col justify-center items-center text-white"> | |
| <h3 class="text-xl font-bold mb-4">Task Management App</h3> | |
| <p class="text-center mb-6">Real-time collaboration tool with drag-and-drop interface and team chat functionality.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="px-4 py-2 bg-white text-purple-600 rounded-full font-medium">Live Demo</a> | |
| <a href="#" class="px-4 py-2 border-2 border-white text-white rounded-full font-medium">Code</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card"> | |
| <div class="project-inner relative h-full"> | |
| <div class="project-front absolute w-full h-full bg-white rounded-xl shadow-md overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Project 3" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Health & Fitness Tracker</h3> | |
| <p class="text-gray-600 mb-4">An app to track workouts, nutrition, and health metrics with data visualization.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">React Native</span> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">GraphQL</span> | |
| <span class="px-3 py-1 bg-pink-100 text-pink-800 rounded-full text-sm">D3.js</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-back absolute w-full h-full bg-gradient-to-br from-purple-500 to-teal-500 rounded-xl shadow-md p-6 flex flex-col justify-center items-center text-white"> | |
| <h3 class="text-xl font-bold mb-4">Health & Fitness Tracker</h3> | |
| <p class="text-center mb-6">Comprehensive health dashboard with workout plans, meal tracking, and progress analytics.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="px-4 py-2 bg-white text-purple-600 rounded-full font-medium">Live Demo</a> | |
| <a href="#" class="px-4 py-2 border-2 border-white text-white rounded-full font-medium">Code</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center px-8 py-3 gradient-bg text-white rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105"> | |
| View All Projects <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text">Get In Touch</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-6">Contact Information</h3> | |
| <p class="text-gray-600 mb-8">Feel free to reach out to me for any questions or opportunities. I'll get back to you as soon as possible!</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1 text-purple-500"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email</h4> | |
| <p class="text-gray-600">hello@devcraft.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1 text-teal-500"> | |
| <i class="fas fa-phone-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Phone</h4> | |
| <p class="text-gray-600">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1 text-purple-500"> | |
| <i class="fas fa-map-marker-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Location</h4> | |
| <p class="text-gray-600">San Francisco, CA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="font-bold mb-4">Follow Me</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-12 h-12 rounded-full bg-white shadow-md flex items-center justify-center text-purple-600 hover:bg-purple-600 hover:text-white transition-all duration-300"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full bg-white shadow-md flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition-all duration-300"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full bg-white shadow-md flex items-center justify-center text-pink-600 hover:bg-pink-600 hover:text-white transition-all duration-300"> | |
| <i class="fab fa-dribbble text-xl"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full bg-white shadow-md flex items-center justify-center text-blue-400 hover:bg-blue-400 hover:text-white transition-all duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <form class="bg-white rounded-xl shadow-lg p-8"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="John Doe"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Your Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="john@example.com"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Project Inquiry"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Hello, I'd like to talk about..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full gradient-bg text-white py-3 px-6 rounded-lg font-medium shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| Send Message <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <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">DevCraft</a> | |
| <p class="mt-2 text-gray-400">Crafting digital experiences that matter.</p> | |
| </div> | |
| <div class="flex flex-col items-center md:items-end"> | |
| <div class="flex space-x-6 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400 text-sm">© 2023 DevCraft. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <a href="#home" id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-purple-600 text-white rounded-full flex items-center justify-center shadow-lg transform transition-all duration-300 opacity-0 invisible hover:bg-teal-500 hover:shadow-xl"> | |
| <i class="fas fa-arrow-up"></i> | |
| </a> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains | |
| </html> |