|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Rounak Chauhan | AI & Data Science 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&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.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-pill:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.timeline-item:not(:last-child)::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 20px; |
|
|
top: 30px; |
|
|
height: calc(100% - 30px); |
|
|
width: 2px; |
|
|
background: #e5e7eb; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background: #3b82f6; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.active::after { |
|
|
width: 100%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<nav class="fixed w-full bg-white shadow-sm 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">Rounak Chauhan</span> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#home" class="nav-link active">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 class="md:hidden flex items-center"> |
|
|
<button id="menu-btn" class="text-gray-600 hover:text-gray-900 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4 shadow-lg"> |
|
|
<div class="flex flex-col space-y-3"> |
|
|
<a href="#home" class="nav-link py-2 active">Home</a> |
|
|
<a href="#about" class="nav-link py-2">About</a> |
|
|
<a href="#experience" class="nav-link py-2">Experience</a> |
|
|
<a href="#projects" class="nav-link py-2">Projects</a> |
|
|
<a href="#contact" class="nav-link py-2">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-r from-blue-50 to-purple-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-between"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="gradient-text">Rounak Chauhan</span></h1> |
|
|
<h2 class="text-2xl md:text-3xl font-semibold text-gray-600 mb-6">AI & Data Science Enthusiast</h2> |
|
|
<p class="text-gray-600 mb-8 text-lg">Passionate about building intelligent systems and extracting insights from data to solve real-world problems.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Contact Me</a> |
|
|
<a href="#projects" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition duration-300">View Projects</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 rounded-full overflow-hidden border-4 border-white shadow-xl"> |
|
|
<img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Rounak Chauhan" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-8"> |
|
|
<div class="md:w-1/2"> |
|
|
<h3 class="text-2xl font-semibold mb-4">Education</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<h4 class="font-bold text-lg">Bachelor of Technology in Artificial Intelligence & Data Science</h4> |
|
|
<p class="text-gray-600">Madhav Institute of Technology and Science, Gwalior</p> |
|
|
<p class="text-gray-500">August 2021 - June 2025 | CGPA: 8.4/10</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<h4 class="font-bold text-lg">Class 12th - CBSE</h4> |
|
|
<p class="text-gray-600">Kendriya Vidyalaya No.2, Indore</p> |
|
|
<p class="text-gray-500">April 2020 – March 2021 | Percentage: 90%</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
|
|
<h4 class="font-bold text-lg">Class 10th - CBSE</h4> |
|
|
<p class="text-gray-600">Vaishnav Bal Mandir Girls School, Indore</p> |
|
|
<p class="text-gray-500">April 2018 – March 2019 | Percentage: 89%</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<h3 class="text-2xl font-semibold mb-4">Skills</h3> |
|
|
<div class="mb-8"> |
|
|
<h4 class="font-medium mb-2">Programming Languages</h4> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm transition duration-300">Python</span> |
|
|
<span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm transition duration-300">C++</span> |
|
|
<span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm transition duration-300">SQL</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h4 class="font-medium mb-2">Technical Skills</h4> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Machine Learning</span> |
|
|
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Deep Learning</span> |
|
|
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">AI</span> |
|
|
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Data Science</span> |
|
|
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Data Structures</span> |
|
|
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Algorithms</span> |
|
|
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">OOP</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h4 class="font-medium mb-2">Software & Tools</h4> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">MySQL</span> |
|
|
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">WEKA</span> |
|
|
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">Git</span> |
|
|
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">GitHub</span> |
|
|
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">Jupyter</span> |
|
|
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">FastAPI</span> |
|
|
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">Postman</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium mb-2">ML Frameworks & Libraries</h4> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">Pandas</span> |
|
|
<span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">NumPy</span> |
|
|
<span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">Matplotlib</span> |
|
|
<span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">Flask</span> |
|
|
<span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">TensorFlow</span> |
|
|
<span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">OpenCV</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="experience" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 gradient-text">Experience</h2> |
|
|
|
|
|
<div class="relative"> |
|
|
|
|
|
<div class="space-y-8"> |
|
|
<div class="timeline-item relative pl-12"> |
|
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-briefcase"></i> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="font-bold text-xl">AI Intern</h3> |
|
|
<p class="text-gray-600">Supersourcing, Indore</p> |
|
|
<p class="text-gray-500 mb-4">March 2025 – June 2025</p> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Worked on developing an AI chatbot using Large Language Models (LLMs)</li> |
|
|
<li>Handled end-to-end data collection, web scraping, cleaning, and formatting for fine-tuning the chatbot</li> |
|
|
<li>Developed Python scripts for automated web scraping to extract real-time data used in chatbot responses</li> |
|
|
<li>Collaborated with cross-functional teams to deploy and test the chatbot in real-world environments</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="timeline-item relative pl-12"> |
|
|
<div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-laptop-code"></i> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<h3 class="font-bold text-xl">Project Intern</h3> |
|
|
<p class="text-gray-600">Infosys Springboard</p> |
|
|
<p class="text-gray-500 mb-4">April 2024 – June 2024</p> |
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
|
<li>Developed a Plant Disease Classification model achieving 91% accuracy using NumPy, Pandas, Matplotlib, and Flask</li> |
|
|
<li>Collaborated effectively within a team of 4 members, actively participating in daily meetings and discussions</li> |
|
|
<li>Demonstrated strong communication, analytical, and teamwork skills through collaborative project work</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 gradient-text">Projects</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="project-card bg-gray-50 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-leaf text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-xl mb-2">Plant Disease Classification</h3> |
|
|
<p class="text-gray-600 mb-4">Achieved 91% accuracy in identifying plant diseases using CNN with TensorFlow</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">NumPy</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Pandas</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Matplotlib</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">TensorFlow</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Flask</span> |
|
|
</div> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center"> |
|
|
View Details <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="h-48 bg-gradient-to-r from-purple-400 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="font-bold text-xl mb-2">Voice Assistant</h3> |
|
|
<p class="text-gray-600 mb-4">Created a voice assistant capable of recognizing and responding to user commands</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Python</span> |
|
|
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">SpeechRecognition</span> |
|
|
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">PyAudio</span> |
|
|
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Text-to-Speech</span> |
|
|
</div> |
|
|
<a href="#" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center"> |
|
|
View Details <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-gray-50 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-eye text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-xl mb-2">AlertGuard</h3> |
|
|
<p class="text-gray-600 mb-4">Real-time drowsiness detection system using OpenCV and Dlib</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">OpenCV</span> |
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">NumPy</span> |
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Dlib</span> |
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Pygame</span> |
|
|
</div> |
|
|
<a href="#" class="text-green-600 hover:text-green-800 font-medium inline-flex items-center"> |
|
|
View Details <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-3xl font-bold mb-8 gradient-text text-center md:text-left">Achievements</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-trophy text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">2nd Position at Model Making Competition</h3> |
|
|
<p class="text-gray-600">Drowsiness Detection System project organized by Madhav Institute of Technology and Science</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-users text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Design Strategist Lead</h3> |
|
|
<p class="text-gray-600">Google Developer Student Clubs (GDSC) MITS Gwalior</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-paint-brush text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Graphics & Creativity Head</h3> |
|
|
<p class="text-gray-600">Girls' Grievance Cell MITS Gwalior</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h2 class="text-3xl font-bold mb-8 gradient-text text-center md:text-left">Certifications</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-yellow-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-certificate text-yellow-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">AI Associate Certified</h3> |
|
|
<p class="text-gray-600">Salesforce</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-chart-line text-red-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Deloitte Data Analytics Job Simulation</h3> |
|
|
<p class="text-gray-600">Forage</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-brain text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Artificial Intelligence Primer</h3> |
|
|
<p class="text-gray-600">Infosys Springboard</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-cloud text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Google Cloud Digital Leader Training</h3> |
|
|
<p class="text-gray-600">Coursera</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 gradient-text">Get In Touch</h2> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-8"> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-gray-50 p-8 rounded-lg shadow-sm"> |
|
|
<h3 class="text-xl font-semibold mb-6">Contact Information</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Location</h4> |
|
|
<p class="text-gray-600">Indore, Madhya Pradesh, India</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope text-purple-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-green-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-phone text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Phone</h4> |
|
|
<p class="text-gray-600">+91-9399381575</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="text-xl font-semibold mb-4">Connect With Me</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition duration-300"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-800 text-white p-3 rounded-full hover:bg-gray-900 transition duration-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-red-600 text-white p-3 rounded-full hover:bg-red-700 transition duration-300"> |
|
|
<i class="fab fa-google"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-gray-50 p-8 rounded-lg shadow-sm"> |
|
|
<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 mb-2">Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-gray-700 mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="subject" class="block text-gray-700 mb-2">Subject</label> |
|
|
<input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="message" class="block text-gray-700 mb-2">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 w-full">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-8"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<span class="text-xl font-bold gradient-text">Rounak Chauhan</span> |
|
|
<p class="text-gray-400 mt-2">AI & Data Science Portfolio</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-linkedin-in text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 Rounak Chauhan. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const menuBtn = document.getElementById('menu-btn'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
menuBtn.addEventListener('click', () => { |
|
|
mobileMenu.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) { |
|
|
|
|
|
mobileMenu.classList.add('hidden'); |
|
|
|
|
|
|
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.classList.remove('active'); |
|
|
}); |
|
|
this.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const scrollPosition = window.scrollY; |
|
|
|
|
|
document.querySelectorAll('section').forEach(section => { |
|
|
const sectionTop = section.offsetTop - 100; |
|
|
const sectionHeight = section.offsetHeight; |
|
|
const sectionId = section.getAttribute('id'); |
|
|
|
|
|
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { |
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.classList.remove('active'); |
|
|
if (link.getAttribute('href') === `#${sectionId}`) { |
|
|
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=RounakRC/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
