Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Manish Gupta 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> | |
| /* Custom CSS for animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.8s ease-out forwards; | |
| } | |
| .delay-100 { animation-delay: 0.1s; } | |
| .delay-200 { animation-delay: 0.2s; } | |
| .delay-300 { animation-delay: 0.3s; } | |
| .delay-400 { animation-delay: 0.4s; } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4f46e5; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #4338ca; | |
| } | |
| /* Gradient text */ | |
| .gradient-text { | |
| background: linear-gradient(90deg, #4f46e5, #10b981); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| /* Card hover effect */ | |
| .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); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-md 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"> | |
| <span class="text-xl font-bold gradient-text">Manish Gupta</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-indigo-600 hover:text-indigo-800 transition">Home</a> | |
| <a href="#about" class="text-gray-600 hover:text-indigo-600 transition">About</a> | |
| <a href="#experience" class="text-gray-600 hover:text-indigo-600 transition">Experience</a> | |
| <a href="#education" class="text-gray-600 hover:text-indigo-600 transition">Education</a> | |
| <a href="#projects" class="text-gray-600 hover:text-indigo-600 transition">Projects</a> | |
| <a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Contact</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="menu-toggle" class="text-gray-600 hover:text-indigo-600 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50">Home</a> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">About</a> | |
| <a href="#experience" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">Experience</a> | |
| <a href="#education" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">Education</a> | |
| <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">Projects</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-indigo-50 to-emerald-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="gradient-text">Manish Gupta </span></h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold text-gray-600 mb-6">Data Science & Analytics Professional</h2> | |
| <p class="text-lg text-gray-600 mb-8">Fresher with passion for data-driven solutions and continuous learning.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg shadow-md transition duration-300 transform hover:scale-105">Contact Me</a> | |
| <a href="#projects" class="border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg shadow-md transition duration-300 transform hover:scale-105">View Projects</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center animate-fade-in delay-200"> | |
| <div class="relative"> | |
| <img src="https://manish7272.github.io/images/mg_circle_new.png" alt="Manish Gupta" class="w-64 h-64 md:w-80 md:h-80 rounded-full border-4 border-white shadow-xl"> | |
| <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-full shadow-lg"> | |
| <div class="bg-indigo-600 text-white p-3 rounded-full"> | |
| <i class="fas fa-laptop-code text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in"> | |
| <h3 class="text-2xl font-semibold mb-4">Who I Am</h3> | |
| <p class="text-gray-600 mb-6">My name is Manish Gupta, and I was born and brought up in Jaipur. I graduated with a Bachelor's degree in Electronics and Communication Engineering (ECE) from Arya College of Engineering & IT in Jaipur, achieving a CGPA of 8.67.</p> | |
| <p class="text-gray-600 mb-6">I am currently enhancing my skills in the field of data science through Imarticus Learning in Jaipur. I am enthusiastic about continuous learning, always eager to explore new things and stay updated.</p> | |
| <p class="text-gray-600">I believe in constantly improving my skill set to align with current trends. This passion drives me to groom myself professionally.</p> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 animate-fade-in delay-200"> | |
| <h3 class="text-2xl font-semibold mb-6">My Skills</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-code text-indigo-600"></i> | |
| </div> | |
| <h4 class="font-medium">Programming</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">Python, SQL</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-emerald-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-chart-line text-emerald-600"></i> | |
| </div> | |
| <h4 class="font-medium">BI Tools</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">Power BI, Tableau</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-amber-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-database text-amber-600"></i> | |
| </div> | |
| <h4 class="font-medium">Data Science</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">ML, DL, Statistics</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-globe text-blue-600"></i> | |
| </div> | |
| <h4 class="font-medium">Web Development</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">HTML, CSS, JavaScript</p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-medium mb-3">Interests</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Traveling</span> | |
| <span class="bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-sm">Teaching</span> | |
| <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Learning</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Technology</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" 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 gradient-text">Work Experience</h2> | |
| <div class="space-y-8"> | |
| <!-- EDI Analyst --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> | |
| <h3 class="text-xl font-semibold">EDI Analyst</h3> | |
| <span class="text-indigo-600 font-medium">June 2024 - Nov 2024</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-building text-indigo-600"></i> | |
| </div> | |
| <h4 class="font-medium">A3logics Pvt. Ltd.</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4 italic">"Our mission is to change the world for the better by setting the standards for IT development, cloud computing, supply chain & logistics, artificial intelligence, and deep learning."</p> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> | |
| <li>Handle Maintenance & New plan year file cases for 834 & custom files</li> | |
| <li>Handle Pref errors</li> | |
| <li>Set-up the SFTP/FTP Connections</li> | |
| <li>Tools: Salesforce CRM, Benefit Administration System, Optum, Microsoft Outlook</li> | |
| </ul> | |
| </div> | |
| <!-- Data Science Intern --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-100"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> | |
| <h3 class="text-xl font-semibold">Data Science Intern</h3> | |
| <span class="text-emerald-600 font-medium">Oct 2023 - Dec 2023</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-emerald-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-chart-bar text-emerald-600"></i> | |
| </div> | |
| <h4 class="font-medium">Bharat Intern</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4 italic">"Bharat Intern, a pioneering company dedicated to offering enriching virtual internship opportunities for college students."</p> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> | |
| <li>Data Cleaning and Preprocessing</li> | |
| <li>Develop analytical tools and programs</li> | |
| <li>Ensure the data quality and integrity in databases</li> | |
| <li>Enabling accurate recognition of objects within images</li> | |
| <li>Data Visualization Technique</li> | |
| </ul> | |
| </div> | |
| <!-- Full Stack Development Internship --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-200"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4"> | |
| <h3 class="text-xl font-semibold">Full Stack Development Internship</h3> | |
| <span class="text-blue-600 font-medium">Nov 2021 - Jan 2022</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-code text-blue-600"></i> | |
| </div> | |
| <h4 class="font-medium">Lyriclious - EdTech</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4 italic">"India's learning platform" An E-learning platform, providing Training, Internship and courses along with projects in many professional and technical courses.</p> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> | |
| <li>Create and maintain documentation for code and processes</li> | |
| <li>Develop and maintain responsive web pages</li> | |
| <li>Optimize applications for maximum speed</li> | |
| <li>Work with front-end developers to ensure seamless integration</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Education</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- BTech --> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold">Bachelor of Technology (BTech)</h3> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">2019-2023</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-university text-indigo-600"></i> | |
| </div> | |
| <h4 class="font-medium">Arya College of Engineering & IT, Jaipur</h4> | |
| </div> | |
| <p class="text-gray-600 mb-2"><span class="font-medium">Electronics & Communication Engineering (ECE)</span></p> | |
| <p class="text-gray-600">Grade: First Division With Distinction (CGPA: 8.67)</p> | |
| </div> | |
| <!-- Higher Secondary --> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 animate-fade-in delay-100"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold">Higher Secondary School</h3> | |
| <span class="bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-sm">2018-2019</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-emerald-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-school text-emerald-600"></i> | |
| </div> | |
| <h4 class="font-medium">Azad Bal Vidhya Mandir SR SEC School, Mandawar (Dausa)</h4> | |
| </div> | |
| <p class="text-gray-600">Grade: First Division</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects 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 gradient-text">Projects</h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Below are the Data Analytics projects on SQL, Python, Power BI, ML & DL. I love to solve business problems & uncover hidden data stories.</p> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Bank Loan Analysis --> | |
| <div class="project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in"> | |
| <div class="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-chart-pie text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Bank Loan Analysis</h3> | |
| <p class="text-gray-600 mb-4">Power BI Dashboard (Finance Domain)</p> | |
| <p class="text-gray-600 text-sm mb-4">Analyzes loan trends, regional patterns, and distinguishes between good and bad loans for data-driven decision-making.</p> | |
| <a href="https://github.com/Manish7272/Bank-Loan-Analysis-Dashboard--Finance-Domain" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center"> | |
| View Project <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- McDonald's Food Analysis --> | |
| <div class="project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in delay-100"> | |
| <div class="h-48 bg-gradient-to-r from-emerald-500 to-teal-600 flex items-center justify-center"> | |
| <i class="fas fa-hamburger text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">McDonald's Food Analysis</h3> | |
| <p class="text-gray-600 mb-4">Power BI Dashboard</p> | |
| <p class="text-gray-600 text-sm mb-4">Analyzes nutrition value of McDonald's food items to help customers plan meals according to their health requirements.</p> | |
| <a href="https://github.com/Manish7272/McDonald_s-Food-Analysis-Dashboard" target="_blank" class="text-emerald-600 hover:text-emerald-800 font-medium inline-flex items-center"> | |
| View Project <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Supply Chain Optimization --> | |
| <div class="project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 animate-fade-in delay-200"> | |
| <div class="h-48 bg-gradient-to-r from-amber-500 to-orange-600 flex items-center justify-center"> | |
| <i class="fas fa-truck text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Supply Chain Optimization</h3> | |
| <p class="text-gray-600 mb-4">Power BI Dashboard (FMCG Domain)</p> | |
| <p class="text-gray-600 text-sm mb-4">Created a user-friendly PowerBI Dashboard to provide real-time insights for AtliQ Mart's supply chain issues.</p> | |
| <a href="https://github.com/Manish7272/Supply-Chain-Optimization-Project-Manager" target="_blank" class="text-amber-600 hover:text-amber-800 font-medium inline-flex items-center"> | |
| View Project <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12 animate-fade-in delay-300"> | |
| <a href="https://github.com/Manish7272" target="_blank" class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| <i class="fab fa-github mr-2 text-xl"></i> View More Projects on GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Contact Me</h2> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2 animate-fade-in"> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-semibold mb-6">Get in Touch</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Address</h4> | |
| <p class="text-gray-600">Jaipur, India</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-emerald-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-emerald-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <p class="text-gray-600">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fab fa-github text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">GitHub</h4> | |
| <a href="https://github.com/Manish7272" target="_blank" class="text-gray-600 hover:text-blue-600">github.com/Manish7272</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-medium mb-4">Connect with me</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-indigo-100 text-indigo-600 p-3 rounded-full hover:bg-indigo-200 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-blue-100 text-blue-600 p-3 rounded-full hover:bg-blue-200 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-pink-100 text-pink-600 p-3 rounded-full hover:bg-pink-200 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 animate-fade-in delay-200"> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-semibold mb-6">Send me a message</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <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-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition duration-300 transform hover:scale-105"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 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-6 md:mb-0"> | |
| <h3 class="text-2xl font-bold gradient-text">Manish Gupta</h3> | |
| <p class="text-gray-400 mt-2">Data Science & Analytics Professional</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#home" class="text-gray-400 hover:text-white transition">Home</a> | |
| <a href="#about" class="text-gray-400 hover:text-white transition">About</a> | |
| <a href="#projects" class="text-gray-400 hover:text-white transition">Projects</a> | |
| <a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2024 Manish Gupta. All rights reserved.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-indigo-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> | |
| // 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); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Back to top button | |
| 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' | |
| }); | |
| }); | |
| // Add animation class when elements come into view | |
| const animateOnScroll = function() { | |
| const elements = document.querySelectorAll('.animate-fade-in'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementPosition < windowHeight - 100) { | |
| element.classList.add('animate-fade-in'); | |
| } | |
| }); | |
| }; | |
| // Run once on page load and then on scroll | |
| animateOnScroll(); | |
| window.addEventListener('scroll', animateOnScroll); | |
| </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=manish72/portfolio-day-mode" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |