Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DevPort | 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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #0a0a0a; | |
| --bg-darker: #050505; | |
| --accent: #00f0ff; | |
| --text: #ffffff; | |
| --text-muted: #aaaaaa; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text); | |
| overflow-x: hidden; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.9)), | |
| url('https://images.unsplash.com/photo-1511512578047-dba367496e6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| min-height: 100vh; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px var(--accent), 0 0 20px rgba(0, 240, 255, 0.5); | |
| } | |
| .btn-glow { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.3); | |
| } | |
| .btn-glow:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 0 25px rgba(0, 240, 255, 0.5); | |
| } | |
| .section { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: all 0.6s ease; | |
| } | |
| .section.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .project-card { | |
| transition: all 0.3s ease; | |
| overflow: hidden; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2); | |
| } | |
| .project-img { | |
| transition: transform 0.5s ease; | |
| } | |
| .project-card:hover .project-img { | |
| transform: scale(1.1); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--accent); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .nav-link.active::after { | |
| width: 100%; | |
| } | |
| .contact-input { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .contact-input:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 10px rgba(0, 240, 255, 0.3); | |
| } | |
| .mobile-menu { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .mobile-menu.open { | |
| transform: translateX(0); | |
| } | |
| .hamburger { | |
| transition: all 0.3s ease; | |
| } | |
| .hamburger.open { | |
| transform: rotate(90deg); | |
| } | |
| @media (max-width: 768px) { | |
| .hero-content { | |
| padding-top: 100px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="fixed w-full bg-black bg-opacity-80 backdrop-blur-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 text-white"> | |
| <span class="text-accent">Dev</span>Port | |
| </a> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#about" class="nav-link text-white">About</a> | |
| <a href="#projects" class="nav-link text-white">Projects</a> | |
| <a href="#contact" class="nav-link text-white">Contact</a> | |
| </nav> | |
| <button class="md:hidden hamburger text-white text-2xl focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden mobile-menu fixed inset-y-0 right-0 w-64 bg-black bg-opacity-90 backdrop-blur-sm z-40 pt-20 px-6"> | |
| <div class="flex flex-col space-y-6"> | |
| <a href="#about" class="nav-link text-white text-xl py-2">About</a> | |
| <a href="#projects" class="nav-link text-white text-xl py-2">Projects</a> | |
| <a href="#contact" class="nav-link text-white text-xl py-2">Contact</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero flex items-center justify-center"> | |
| <div class="container mx-auto px-6 hero-content"> | |
| <div class="max-w-3xl mx-auto text-center section"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 glow-text">Hi, I'm <span class="text-accent">Alex</span></h1> | |
| <p class="text-xl md:text-2xl mb-10 text-gray-300">Full Stack Developer & UI/UX Designer</p> | |
| <a href="#projects" class="btn-glow bg-accent text-gray-900 px-8 py-3 rounded-full font-bold inline-block">View My Work</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-6 bg-bg-darker"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="w-full md:w-1/2 section" style="transition-delay: 0.1s;"> | |
| <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="About Me" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="w-full md:w-1/2 section" style="transition-delay: 0.2s;"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">About <span class="text-accent">Me</span></h2> | |
| <p class="text-gray-300 mb-4 leading-relaxed"> | |
| I'm a passionate developer with over 5 years of experience creating modern web applications. | |
| My expertise spans across frontend technologies like React and Vue.js, as well as backend | |
| development with Node.js and Python. | |
| </p> | |
| <p class="text-gray-300 mb-6 leading-relaxed"> | |
| I love solving complex problems and creating intuitive user experiences that delight users. | |
| When I'm not coding, you can find me exploring new technologies, contributing to open-source | |
| projects, or mentoring junior developers. | |
| </p> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">JavaScript</span> | |
| <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">React</span> | |
| <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Node.js</span> | |
| <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Python</span> | |
| <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">UI/UX</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 px-6 bg-bg-dark"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <div class="text-center mb-16 section"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">My <span class="text-accent">Projects</span></h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Here are some of my recent works. Each project was carefully crafted to solve specific problems.</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-gray-900 rounded-xl overflow-hidden shadow-lg section" style="transition-delay: 0.1s;"> | |
| <div class="h-48 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=2070&q=80" | |
| alt="Project 1" class="project-img w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Analytics Dashboard</h3> | |
| <p class="text-gray-400 mb-4">A comprehensive analytics platform with real-time data visualization.</p> | |
| <a href="#" class="text-accent font-medium hover:underline">View Project →</a> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card bg-gray-900 rounded-xl overflow-hidden shadow-lg section" style="transition-delay: 0.2s;"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d6e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Project 2" class="project-img w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Messenger App</h3> | |
| <p class="text-gray-400 mb-4">Secure messaging application with end-to-end encryption.</p> | |
| <a href="#" class="text-accent font-medium hover:underline">View Project →</a> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card bg-gray-900 rounded-xl overflow-hidden shadow-lg section" style="transition-delay: 0.3s;"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" | |
| alt="Project 3" class="project-img w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Holographic UI</h3> | |
| <p class="text-gray-400 mb-4">Experimental interface using 3D holographic elements.</p> | |
| <a href="#" class="text-accent font-medium hover:underline">View Project →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-6 bg-bg-darker"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <div class="text-center mb-16 section"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In <span class="text-accent">Touch</span></h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Have a project in mind or want to discuss potential opportunities?</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="section" style="transition-delay: 0.1s;"> | |
| <h3 class="text-2xl font-bold mb-6">Contact Information</h3> | |
| <p class="text-gray-400 mb-8">I'm available for freelance work and full-time positions. Let's create something amazing together!</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-accent"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400">Email</p> | |
| <p class="font-medium">alex@example.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone text-accent"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400">Phone</p> | |
| <p class="font-medium">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-accent"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400">Location</p> | |
| <p class="font-medium">San Francisco, CA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="text-xl font-bold mb-4">Follow Me</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-accent hover:text-gray-900 transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-accent hover:text-gray-900 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-accent hover:text-gray-900 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 p-3 rounded-full hover:bg-accent hover:text-gray-900 transition"> | |
| <i class="fab fa-dribbble"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section" style="transition-delay: 0.2s;"> | |
| <form id="contactForm" class="space-y-6"> | |
| <div> | |
| <label for="name" class="block mb-2 text-gray-300">Your Name</label> | |
| <input type="text" id="name" class="contact-input w-full px-4 py-3 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 text-gray-300">Your Email</label> | |
| <input type="email" id="email" class="contact-input w-full px-4 py-3 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-2 text-gray-300">Your Message</label> | |
| <textarea id="message" rows="5" class="contact-input w-full px-4 py-3 rounded-lg" required></textarea> | |
| </div> | |
| <button type="submit" class="btn-glow bg-accent text-gray-900 px-6 py-3 rounded-lg font-bold w-full">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col items-center"> | |
| <div class="flex space-x-6 mb-6"> | |
| <a href="#" class="text-gray-400 hover:text-accent transition"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-accent transition"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-accent transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-accent transition"> | |
| <i class="fab fa-dribbble text-xl"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-500 text-sm">© 2023 DevPort. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu toggle | |
| const hamburger = document.querySelector('.hamburger'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| hamburger.addEventListener('click', function() { | |
| this.classList.toggle('open'); | |
| mobileMenu.classList.toggle('open'); | |
| }); | |
| // Close mobile menu when clicking a link | |
| document.querySelectorAll('.mobile-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| hamburger.classList.remove('open'); | |
| mobileMenu.classList.remove('open'); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| 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' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Scroll reveal animation | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('show'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| document.querySelectorAll('.section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| // Contact form validation | |
| const contactForm = document.getElementById('contactForm'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const name = document.getElementById('name').value.trim(); | |
| const email = document.getElementById('email').value.trim(); | |
| const message = document.getElementById('message').value.trim(); | |
| if (name && email && message) { | |
| // Simple email validation | |
| if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { | |
| alert('Please enter a valid email address.'); | |
| return; | |
| } | |
| alert('Thank you for your message! I will get back to you soon.'); | |
| contactForm.reset(); | |
| } else { | |
| alert('Please fill in all fields.'); | |
| } | |
| }); | |
| } | |
| // Update active nav link on scroll | |
| const sections = document.querySelectorAll('section[id]'); | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| window.addEventListener('scroll', function() { | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (pageYOffset >= (sectionTop - 100)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('active'); | |
| if (link.getAttribute('href') === `#${current}`) { | |
| link.classList.add('active'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vinothkratos/1st-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |