|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Aditya Singh Gaur - AI Engineer 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> |
|
|
:root { |
|
|
--primary: #3b82f6; |
|
|
--secondary: #10b981; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
body { |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.card-hover: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); |
|
|
} |
|
|
|
|
|
.timeline-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border-radius: 50%; |
|
|
left: -8px; |
|
|
top: 0; |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
} |
|
|
|
|
|
.skill-bar { |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
background-color: #e2e8f0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.skill-progress { |
|
|
height: 100%; |
|
|
border-radius: 4px; |
|
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
|
transition: width 1s ease-in-out; |
|
|
} |
|
|
|
|
|
.animate-on-scroll { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out; |
|
|
} |
|
|
|
|
|
.animate-on-scroll.visible { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800 font-sans"> |
|
|
|
|
|
<header class="fixed w-full bg-white 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">Aditya Gaur</a> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="nav-link">Home</a> |
|
|
<a href="#about" class="nav-link">About</a> |
|
|
<a href="#experience" class="nav-link">Experience</a> |
|
|
<a href="#projects" class="nav-link">Projects</a> |
|
|
<a href="#contact" class="nav-link">Contact</a> |
|
|
</nav> |
|
|
<button id="mobile-menu-button" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white w-full px-6 py-4 border-t"> |
|
|
<div class="flex flex-col space-y-4"> |
|
|
<a href="#home" class="nav-link">Home</a> |
|
|
<a href="#about" class="nav-link">About</a> |
|
|
<a href="#experience" class="nav-link">Experience</a> |
|
|
<a href="#projects" class="nav-link">Projects</a> |
|
|
<a href="#contact" class="nav-link">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="home" class="min-h-screen flex items-center pt-20"> |
|
|
<div class="container mx-auto px-6 py-16"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0 animate-on-scroll"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm <span class="gradient-text">Aditya Singh Gaur</span></h1> |
|
|
<h2 class="text-2xl md:text-3xl text-gray-600 mb-6">AI Engineer | Deep Learning Specialist</h2> |
|
|
<p class="text-lg text-gray-600 mb-8 max-w-lg">Innovative AI Engineer with expertise in Deep Learning, NLP, and Computer Vision. Passionate about building AI-driven solutions for real-world problems.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#contact" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300">Contact Me</a> |
|
|
<a href="#projects" class="px-6 py-3 border border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50 transition duration-300">View Projects</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center animate-on-scroll"> |
|
|
<div class="bg-gradient-to-br from-blue-400 to-green-400 p-1 rounded-full"> |
|
|
<div class="bg-white p-1 rounded-full"> |
|
|
<div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gray-200 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-9xl text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">About <span class="gradient-text">Me</span></h2> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-12"> |
|
|
<div class="md:w-1/3 animate-on-scroll"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-4">Personal Info</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-500"></i> |
|
|
<div> |
|
|
<p class="font-medium">Location</p> |
|
|
<p class="text-gray-600">Kanpur, India</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-envelope mt-1 mr-3 text-blue-500"></i> |
|
|
<div> |
|
|
<p class="font-medium">Email</p> |
|
|
<p class="text-gray-600">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-graduation-cap mt-1 mr-3 text-blue-500"></i> |
|
|
<div> |
|
|
<p class="font-medium">Education</p> |
|
|
<p class="text-gray-600">BS-MS in Mathematics and Computing</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-xl font-semibold mt-8 mb-4">Connect With Me</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://github.com/gaur3009-p" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300"> |
|
|
<i class="fab fa-github text-gray-700"></i> |
|
|
</a> |
|
|
<a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300"> |
|
|
<i class="fab fa-linkedin-in text-gray-700"></i> |
|
|
</a> |
|
|
<a href="https://huggingface.co/gaur3009" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300"> |
|
|
<i class="fas fa-robot text-gray-700"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-2/3 animate-on-scroll"> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-2xl font-semibold mb-4">Professional Summary</h3> |
|
|
<p class="text-gray-600 leading-relaxed"> |
|
|
Innovative AI Engineer with expertise in Deep Learning, NLP, and Computer Vision. Experienced in building AI-driven solutions for fashion technology, job matching, and virtual metaverse applications. Proficient in PyTorch, OpenCV, YOLOv8, Gradio, and StyleGAN. Passionate about AI-generated fashion and scalable AI solutions. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-2xl font-semibold mb-4">Technical Skills</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h4 class="font-medium mb-2">Programming</h4> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Python</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-1"> |
|
|
<span>TypeScript/JavaScript</span> |
|
|
<span>75%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>C++</span> |
|
|
<span>70%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium mb-2">AI/ML</h4> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>PyTorch</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-1"> |
|
|
<span>TensorFlow</span> |
|
|
<span>75%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>OpenCV</span> |
|
|
<span>80%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold mb-4">Languages</h3> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full">English (Fluent)</div> |
|
|
<div class="px-4 py-2 bg-green-100 text-green-800 rounded-full">Hindi (Native)</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="experience" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Work <span class="gradient-text">Experience</span></h2> |
|
|
|
|
|
<div class="relative max-w-3xl mx-auto"> |
|
|
|
|
|
<div class="absolute left-4 md:left-1/2 h-full w-0.5 bg-gradient-to-b from-blue-400 to-green-400 transform -translate-x-1/2"></div> |
|
|
|
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
|
|
<div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item"> |
|
|
<div class="md:w-5/12"></div> |
|
|
<div class="md:w-5/12 bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> |
|
|
<span class="text-sm text-gray-500">01/2024-Present</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">AI Engineer</h3> |
|
|
<h4 class="text-lg text-blue-600 mb-3">Rookus.in</h4> |
|
|
<ul class="list-disc pl-5 text-gray-600 space-y-1"> |
|
|
<li> Designed RNN-LSTM architecture for NLP.</li> |
|
|
<li> Built OpenCV-based body measurement models.</li> |
|
|
<li>Contributed to LLM development using encoder-decoder architectures like BERT.</li> |
|
|
<li> Key Technologies: NLP, OpenCV, YOLOv8, PyTorch</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item"> |
|
|
<div class="md:w-5/12 bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
|
|
<span class="text-sm text-gray-500">06/2023 - 07/2023</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Virtual Machine Learning Engineer intern</h3> |
|
|
<h4 class="text-lg text-blue-600 mb-3">KPMG</h4> |
|
|
<ul class="list-disc pl-5 text-gray-600 space-y-1"> |
|
|
<li>made Job recommendation using NLP(BERT) and also used Word2Vec</li> |
|
|
<li>Develop it such that the R-squared value is close to 1</li> |
|
|
<li>Reduced candidate screening time by 70%</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="md:w-5/12"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item"> |
|
|
<div class="md:w-5/12"></div> |
|
|
<div class="md:w-5/12 bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> |
|
|
<span class="text-sm text-gray-500">05/2023 - 06/2023</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">AI Research Intern</h3> |
|
|
<h4 class="text-lg text-blue-600 mb-3">MetaVerse Labs</h4> |
|
|
<ul class="list-disc pl-5 text-gray-600 space-y-1"> |
|
|
<li>Researched generative models for virtual avatar creation</li> |
|
|
<li>Published paper on "Real-time Emotion Transfer for Virtual Characters"</li> |
|
|
<li>Improved rendering performance by 40%</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Featured <span class="gradient-text">Projects</span></h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll"> |
|
|
<div class="h-48 bg-gradient-to-r from-blue-400 to-green-400 flex items-center justify-center"> |
|
|
<i class="fas fa-tshirt text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">FashionGAN</h3> |
|
|
<p class="text-gray-600 mb-4">Generative AI system for creating unique fashion designs using StyleGAN2 with custom modifications.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">PyTorch</span> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">StyleGAN2</span> |
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">Computer Vision</span> |
|
|
</div> |
|
|
<a href="#" class="text-blue-500 font-medium hover:text-blue-700">View Project →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll"> |
|
|
<div class="h-48 bg-gradient-to-r from-purple-400 to-pink-400 flex items-center justify-center"> |
|
|
<i class="fas fa-language text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Polyglot NLP</h3> |
|
|
<p class="text-gray-600 mb-4">Multilingual transformer model for low-resource languages with novel transfer learning techniques.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">HuggingFace</span> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Transformers</span> |
|
|
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">NLP</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll"> |
|
|
<div class="h-48 bg-gradient-to-r from-orange-400 to-red-400 flex items-center justify-center"> |
|
|
<i class="fas fa-vr-cardboard text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">MetaVision</h3> |
|
|
<p class="text-gray-600 mb-4">Real-time object detection and segmentation for augmented reality applications in virtual spaces.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">YOLOv8</span> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">OpenCV</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll"> |
|
|
<div class="h-48 bg-gradient-to-r from-orange-400 to-red-400 flex items-center justify-center"> |
|
|
<i class="fas fa-vr-cardboard text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Job Board</h3> |
|
|
<p class="text-gray-600 mb-4">Realtime job filtering using resume, use whole PDf and used NLP(BERT) |
|
|
to find the required job according to the resume with suitable R2 value</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">NLP</span> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Pyhton</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Get In <span class="gradient-text">Touch</span></h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
|
<div class="animate-on-scroll"> |
|
|
<h3 class="text-2xl font-semibold mb-6">Contact Information</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-envelope text-blue-500"></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="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-green-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Location</h4> |
|
|
<p class="text-gray-600">Kanpur, India</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-globe text-purple-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Online Profiles</h4> |
|
|
<div class="mt-2 space-y-2"> |
|
|
<p class="text-gray-600"> |
|
|
<i class="fab fa-github mr-2"></i> |
|
|
<a href="https://www.github.com/gaur3009-p" class="hover:underline">https://www.github.com/gaur3009-p</a> |
|
|
</p> |
|
|
<p class="text-gray-600"> |
|
|
<i class="fab fa-linkedin mr-2"></i> |
|
|
<a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="hover:underline">https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/</a> |
|
|
</p> |
|
|
<p class="text-gray-600"> |
|
|
<i class="fas fa-robot mr-2"></i> |
|
|
<a href="https://www.huggingface.co/gaur3009" class="hover:underline">https://www.huggingface.co/gaur3009</a> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="animate-on-scroll"> |
|
|
<h3 class="text-2xl font-semibold mb-6">Send Me a Message</h3> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">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-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">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-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">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-blue-500 focus:border-blue-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-8 bg-gray-800 text-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<a href="#" class="text-2xl font-bold gradient-text">Aditya Singh Gaur</a> |
|
|
<p class="text-gray-400 mt-2">AI Engineer & Deep Learning Specialist</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="https://github.com/gaur3009-p" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
<a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-linkedin-in text-xl"></i> |
|
|
</a> |
|
|
<a href="https://huggingface.co/gaur3009" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fas fa-robot text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2025 Aditya Singh Gaur. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
document.getElementById('mobile-menu').classList.add('hidden'); |
|
|
|
|
|
|
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function checkScroll() { |
|
|
const elements = document.querySelectorAll('.animate-on-scroll'); |
|
|
|
|
|
elements.forEach(element => { |
|
|
const elementTop = element.getBoundingClientRect().top; |
|
|
const windowHeight = window.innerHeight; |
|
|
|
|
|
if (elementTop < windowHeight - 100) { |
|
|
element.classList.add('visible'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('load', checkScroll); |
|
|
|
|
|
window.addEventListener('scroll', checkScroll); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
