| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Azha's GitHub 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> |
| .gradient-text { |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| .project-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .skill-badge:hover { |
| transform: scale(1.05); |
| } |
| #particles-js { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| left: 0; |
| z-index: 0; |
| } |
| .content { |
| position: relative; |
| z-index: 1; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans antialiased"> |
| |
| <div id="particles-js"></div> |
| |
| <div class="content"> |
| |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <a href="#" class="text-xl font-bold gradient-text">Azha's Portfolio</a> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#about" class="text-gray-700 hover:text-blue-600 transition">About</a> |
| <a href="#projects" class="text-gray-700 hover:text-blue-600 transition">Projects</a> |
| <a href="#skills" class="text-gray-700 hover:text-blue-600 transition">Skills</a> |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a> |
| <a href="https://github.com/azhagan2" target="_blank" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition flex items-center"> |
| <i class="fab fa-github mr-2"></i> GitHub |
| </a> |
| </div> |
| <div class="md:hidden flex items-center"> |
| <button id="menu-btn" class="text-gray-700"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">About</a> |
| <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Projects</a> |
| <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Skills</a> |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Contact</a> |
| <a href="https://github.com/azhagan2" target="_blank" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-600 hover:bg-blue-700 text-center"> |
| <i class="fab fa-github mr-2"></i> GitHub |
| </a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> |
| Hi, I'm <span class="gradient-text">Azha</span> |
| </h1> |
| <h2 class="text-xl md:text-2xl text-gray-600 mb-8"> |
| A passionate developer building amazing projects on GitHub |
| </h2> |
| <div class="flex justify-center space-x-4"> |
| <a href="#projects" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md transition flex items-center"> |
| <i class="fas fa-code mr-2"></i> View Projects |
| </a> |
| <a href="#contact" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-md transition flex items-center"> |
| <i class="fas fa-envelope mr-2"></i> Contact Me |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-12"> |
| <span class="gradient-text">About Me</span> |
| </h2> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center"> |
| <div class="w-48 h-48 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 p-1"> |
| <img src="https://avatars.githubusercontent.com/u/yourprofile" alt="Profile" class="w-full h-full rounded-full object-cover border-4 border-white"> |
| </div> |
| </div> |
| <div class="md:w-2/3 md:pl-12"> |
| <p class="text-gray-700 mb-4"> |
| Welcome to my GitHub portfolio! I'm a software developer passionate about creating open-source projects and contributing to the developer community. |
| </p> |
| <p class="text-gray-700 mb-4"> |
| With a strong foundation in web development and programming, I enjoy building projects that solve real-world problems and help others learn. |
| </p> |
| <p class="text-gray-700 mb-6"> |
| When I'm not coding, you can find me exploring new technologies, contributing to open-source projects, or sharing knowledge with fellow developers. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="https://github.com/azhagan2" target="_blank" class="text-gray-700 hover:text-blue-600 transition"> |
| <i class="fab fa-github text-2xl"></i> |
| </a> |
| <a href="#" class="text-gray-700 hover:text-blue-600 transition"> |
| <i class="fab fa-twitter text-2xl"></i> |
| </a> |
| <a href="#" class="text-gray-700 hover:text-blue-600 transition"> |
| <i class="fab fa-linkedin text-2xl"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="projects" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-12"> |
| <span class="gradient-text">My Projects</span> |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="project-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center"> |
| <i class="fas fa-project-diagram text-white text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Project One</h3> |
| <p class="text-gray-600 mb-4">A brief description of what this project is about and what technologies were used.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">React</span> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Node.js</span> |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">MongoDB</span> |
| </div> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| View Project <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="project-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center"> |
| <i class="fas fa-mobile-alt text-white text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Mobile App</h3> |
| <p class="text-gray-600 mb-4">A cross-platform mobile application built with React Native and Firebase backend.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">React Native</span> |
| <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">Firebase</span> |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">JavaScript</span> |
| </div> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| View Project <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="project-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> |
| <i class="fas fa-robot text-white text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">AI Project</h3> |
| <p class="text-gray-600 mb-4">An artificial intelligence project using machine learning to solve complex problems.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Python</span> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">TensorFlow</span> |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">NLP</span> |
| </div> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| View Project <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="text-center mt-12"> |
| <a href="https://github.com/azhagan2?tab=repositories" target="_blank" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition"> |
| <i class="fab fa-github mr-2"></i> View All Projects on GitHub |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="skills" class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-12"> |
| <span class="gradient-text">My Skills</span> |
| </h2> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6"> |
| |
| <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300"> |
| <i class="fab fa-js-square text-4xl text-yellow-500 mb-3"></i> |
| <h3 class="font-bold">JavaScript</h3> |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300"> |
| <i class="fab fa-react text-4xl text-blue-500 mb-3"></i> |
| <h3 class="font-bold">React</h3> |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300"> |
| <i class="fab fa-node-js text-4xl text-green-500 mb-3"></i> |
| <h3 class="font-bold">Node.js</h3> |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300"> |
| <i class="fab fa-python text-4xl text-blue-700 mb-3"></i> |
| <h3 class="font-bold">Python</h3> |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
| <div class="bg-blue-700 h-2 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300"> |
| <i class="fas fa-database text-4xl text-blue-400 mb-3"></i> |
| <h3 class="font-bold">SQL</h3> |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
| <div class="bg-blue-400 h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300"> |
| <i class="fab fa-git-alt text-4xl text-orange-500 mb-3"></i> |
| <h3 class="font-bold">Git</h3> |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
| <div class="bg-orange-500 h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300"> |
| <i class="fab fa-html5 text-4xl text-orange-600 mb-3"></i> |
| <h3 class="font-bold">HTML5</h3> |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
| <div class="bg-orange-600 h-2 rounded-full" style="width: 95%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300"> |
| <i class="fab fa-css3-alt text-4xl text-blue-500 mb-3"></i> |
| <h3 class="font-bold">CSS3</h3> |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-12"> |
| <span class="gradient-text">Get In Touch</span> |
| </h2> |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/2 bg-gradient-to-r from-blue-500 to-purple-600 p-8 text-white"> |
| <h3 class="text-2xl font-bold mb-4">Contact Information</h3> |
| <p class="mb-6">Feel free to reach out if you're looking for a developer, have a question, or just want to connect.</p> |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <i class="fas fa-envelope mr-4 text-xl"></i> |
| <span>contact@example.com</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fab fa-github mr-4 text-xl"></i> |
| <span>github.com/azhagan2</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fab fa-linkedin mr-4 text-xl"></i> |
| <span>linkedin.com/in/yourprofile</span> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 p-8"> |
| <form id="contact-form" class="space-y-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700">Name</label> |
| <input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> |
| <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-700">Message</label> |
| <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea> |
| </div> |
| <div> |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"> |
| Send Message |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <a href="#" class="text-xl font-bold gradient-text">Azha's Portfolio</a> |
| <p class="text-gray-400 mt-2">Building the future, one commit at a time.</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="https://github.com/azhagan2" target="_blank" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-github text-2xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter text-2xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-linkedin text-2xl"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400"> |
| <p>© 2023 Azha's GitHub Portfolio. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| </div> |
|
|
| |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
| <script> |
| |
| document.getElementById('menu-btn').addEventListener('click', function() { |
| document.getElementById('mobile-menu').classList.toggle('hidden'); |
| }); |
| |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| window.addEventListener('scroll', function() { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', function() { |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| |
| document.getElementById('contact-form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| alert('Thank you for your message! I will get back to you soon.'); |
| this.reset(); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!document.getElementById('mobile-menu').classList.contains('hidden')) { |
| document.getElementById('mobile-menu').classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| particlesJS("particles-js", { |
| "particles": { |
| "number": { |
| "value": 80, |
| "density": { |
| "enable": true, |
| "value_area": 800 |
| } |
| }, |
| "color": { |
| "value": "#3b82f6" |
| }, |
| "shape": { |
| "type": "circle", |
| "stroke": { |
| "width": 0, |
| "color": "#000000" |
| }, |
| "polygon": { |
| "nb_sides": 5 |
| } |
| }, |
| "opacity": { |
| "value": 0.5, |
| "random": false, |
| "anim": { |
| "enable": false, |
| "speed": 1, |
| "opacity_min": 0.1, |
| "sync": false |
| } |
| }, |
| "size": { |
| "value": 3, |
| "random": true, |
| "anim": { |
| "enable": false, |
| "speed": 40, |
| "size_min": 0.1, |
| "sync": false |
| } |
| }, |
| "line_linked": { |
| "enable": true, |
| "distance": 150, |
| "color": "#3b82f6", |
| "opacity": 0.4, |
| "width": 1 |
| }, |
| "move": { |
| "enable": true, |
| "speed": 2, |
| "direction": "none", |
| "random": false, |
| "straight": false, |
| "out_mode": "out", |
| "bounce": false, |
| "attract": { |
| "enable": false, |
| "rotateX": 600, |
| "rotateY": 1200 |
| } |
| } |
| }, |
| "interactivity": { |
| "detect_on": "canvas", |
| "events": { |
| "onhover": { |
| "enable": true, |
| "mode": "grab" |
| }, |
| "onclick": { |
| "enable": true, |
| "mode": "push" |
| }, |
| "resize": true |
| }, |
| "modes": { |
| "grab": { |
| "distance": 140, |
| "line_linked": { |
| "opacity": 1 |
| } |
| }, |
| "bubble": { |
| "distance": 400, |
| "size": 40, |
| "duration": 2, |
| "opacity": 8, |
| "speed": 3 |
| }, |
| "repulse": { |
| "distance": 200, |
| "duration": 0.4 |
| }, |
| "push": { |
| "particles_nb": 4 |
| }, |
| "remove": { |
| "particles_nb": 2 |
| } |
| } |
| }, |
| "retina_detect": true |
| }); |
| </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=Azhagan2/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
