Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Projects & Experience - Pranit Chilbule</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --bg-primary: #0d1117; | |
| --bg-secondary: #010409; | |
| --bg-card: #21262d; | |
| --text-primary: #c9d1d9; | |
| --text-secondary: rgba(201, 209, 217, 0.8); | |
| --accent-blue: #58a6ff; | |
| --accent-green: #10a37f; | |
| --accent-purple: #a5b4fc; | |
| --accent-orange: #fbbf24; | |
| --header-bg: rgba(0, 0, 0, 0.8); | |
| --border-color: #30363d; | |
| --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| } | |
| body { | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* Animated Background */ | |
| .animated-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.1; | |
| } | |
| .floating-shape { | |
| position: absolute; | |
| border-radius: 50%; | |
| animation: float 20s infinite ease-in-out; | |
| } | |
| .shape-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--gradient-1); | |
| top: 10%; | |
| left: 10%; | |
| animation-delay: 0s; | |
| } | |
| .shape-2 { | |
| width: 200px; | |
| height: 200px; | |
| background: var(--gradient-2); | |
| top: 60%; | |
| right: 10%; | |
| animation-delay: 7s; | |
| } | |
| .shape-3 { | |
| width: 150px; | |
| height: 150px; | |
| background: var(--gradient-3); | |
| bottom: 20%; | |
| left: 20%; | |
| animation-delay: 14s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) rotate(0deg); } | |
| 33% { transform: translate(50px, -50px) rotate(120deg); } | |
| 66% { transform: translate(-30px, 30px) rotate(240deg); } | |
| } | |
| /* Header Styles */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 1rem 2rem; | |
| background: var(--header-bg); | |
| backdrop-filter: blur(20px); | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| header.scrolled { | |
| background: rgba(0, 0, 0, 0.9); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 1.5rem; | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| font-weight: 700; | |
| transition: color 0.3s ease; | |
| } | |
| .logo:hover { | |
| color: var(--accent-blue); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| position: relative; | |
| transition: color 0.3s ease; | |
| padding: 0.5rem 0; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent-blue); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after, | |
| .nav-links a.active::after { | |
| width: 100%; | |
| } | |
| .nav-links a:hover, | |
| .nav-links a.active { | |
| color: var(--accent-blue); | |
| } | |
| /* Mobile Menu */ | |
| .menu-toggle { | |
| display: none; | |
| flex-direction: column; | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| } | |
| .menu-toggle span { | |
| height: 3px; | |
| width: 25px; | |
| background: var(--text-primary); | |
| margin-bottom: 4px; | |
| transition: all 0.3s ease; | |
| } | |
| .menu-toggle.active span:nth-child(1) { | |
| transform: rotate(45deg) translate(5px, 5px); | |
| } | |
| .menu-toggle.active span:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .menu-toggle.active span:nth-child(3) { | |
| transform: rotate(-45deg) translate(7px, -6px); | |
| } | |
| /* Main Content Styles */ | |
| main { | |
| padding: 2rem; | |
| max-width: 1200px; | |
| margin: 80px auto 0; | |
| } | |
| section { | |
| margin-bottom: 6rem; | |
| } | |
| h2 { | |
| font-size: 3rem; | |
| margin-bottom: 3rem; | |
| color: var(--accent-blue); | |
| text-align: center; | |
| font-weight: 700; | |
| position: relative; | |
| } | |
| h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100px; | |
| height: 4px; | |
| background: var(--gradient-1); | |
| border-radius: 2px; | |
| } | |
| /* Project Categories */ | |
| .project-categories { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 3rem; | |
| flex-wrap: wrap; | |
| } | |
| .category-btn { | |
| background: var(--bg-card); | |
| border: 2px solid var(--border-color); | |
| color: var(--text-primary); | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .category-btn:hover, | |
| .category-btn.active { | |
| background: var(--accent-blue); | |
| border-color: var(--accent-blue); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(88, 166, 255, 0.4); | |
| } | |
| /* Project Cards */ | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 2.5rem; | |
| padding: 2rem 0; | |
| } | |
| .project-card { | |
| background: var(--bg-card); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); | |
| transition: all 0.4s ease; | |
| border: 1px solid var(--border-color); | |
| position: relative; | |
| } | |
| .project-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: var(--gradient-1); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .project-card:hover::before { | |
| opacity: 1; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); | |
| border-color: var(--accent-blue); | |
| } | |
| .project-thumbnail { | |
| position: relative; | |
| padding-top: 56.25%; | |
| background: var(--bg-secondary); | |
| overflow: hidden; | |
| } | |
| .project-thumbnail img { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.4s ease; | |
| } | |
| .project-card:hover .project-thumbnail img { | |
| transform: scale(1.1); | |
| } | |
| .project-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .project-card:hover .project-overlay { | |
| opacity: 1; | |
| } | |
| .project-status { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: var(--accent-green); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 15px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .project-status.in-progress { | |
| background: var(--accent-orange); | |
| } | |
| .project-content { | |
| padding: 2rem; | |
| } | |
| .project-title { | |
| font-size: 1.4rem; | |
| color: var(--accent-blue); | |
| margin-bottom: 1rem; | |
| font-weight: 600; | |
| } | |
| .project-description { | |
| color: var(--text-secondary); | |
| margin-bottom: 1.5rem; | |
| line-height: 1.7; | |
| } | |
| .tech-stack { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .tech-tag { | |
| background: var(--bg-secondary); | |
| color: var(--accent-green); | |
| padding: 0.4rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| border: 1px solid rgba(16, 163, 127, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .tech-tag:hover { | |
| background: var(--accent-green); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| .project-links { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .project-links a { | |
| color: var(--accent-blue); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.5rem; | |
| border: 2px solid var(--accent-blue); | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .project-links a:hover { | |
| background: var(--accent-blue); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| /* Experience Timeline */ | |
| .timeline { | |
| position: relative; | |
| max-width: 100%; | |
| margin: 4rem auto; | |
| padding: 3rem 0; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 50%; | |
| height: 3px; | |
| background: var(--gradient-1); | |
| box-shadow: 0 0 20px var(--accent-blue); | |
| border-radius: 2px; | |
| } | |
| .timeline-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 2rem; | |
| overflow-x: auto; | |
| padding: 3rem 1rem; | |
| scroll-snap-type: x mandatory; | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .timeline-container::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .timeline-item { | |
| min-width: 380px; | |
| max-width: 380px; | |
| scroll-snap-align: center; | |
| position: relative; | |
| } | |
| .timeline-item:nth-child(odd) { | |
| transform: translateY(-40px); | |
| } | |
| .timeline-item:nth-child(even) { | |
| transform: translateY(40px); | |
| } | |
| .timeline-content { | |
| background: var(--bg-card); | |
| padding: 2rem; | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); | |
| transition: all 0.4s ease; | |
| position: relative; | |
| } | |
| .timeline-content::before { | |
| content: ''; | |
| position: absolute; | |
| width: 24px; | |
| height: 24px; | |
| background: var(--accent-blue); | |
| border-radius: 50%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border: 4px solid var(--bg-primary); | |
| box-shadow: 0 0 20px var(--accent-blue); | |
| } | |
| .timeline-item:nth-child(odd) .timeline-content::before { | |
| bottom: -52px; | |
| } | |
| .timeline-item:nth-child(even) .timeline-content::before { | |
| top: -52px; | |
| } | |
| .timeline-content:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); | |
| border-color: var(--accent-blue); | |
| } | |
| .timeline-date { | |
| display: inline-block; | |
| padding: 0.75rem 1.5rem; | |
| background: var(--gradient-1); | |
| border-radius: 25px; | |
| color: white; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| font-size: 0.9rem; | |
| } | |
| .timeline-location { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| margin-bottom: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .timeline-location::before { | |
| content: '📍'; | |
| font-size: 1.1rem; | |
| } | |
| .timeline-role { | |
| color: var(--accent-blue); | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| font-weight: 600; | |
| } | |
| .timeline-content ul { | |
| list-style: none; | |
| margin-top: 1rem; | |
| } | |
| .timeline-content li { | |
| position: relative; | |
| padding-left: 2rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| .timeline-content li::before { | |
| content: '→'; | |
| position: absolute; | |
| left: 0; | |
| color: var(--accent-green); | |
| font-weight: bold; | |
| font-size: 1.2rem; | |
| } | |
| /* Timeline Navigation */ | |
| .timeline-nav { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-top: 3rem; | |
| } | |
| .timeline-nav button { | |
| background: var(--bg-card); | |
| border: 2px solid var(--border-color); | |
| color: var(--text-primary); | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| } | |
| .timeline-nav button:hover { | |
| background: var(--accent-blue); | |
| border-color: var(--accent-blue); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(88, 166, 255, 0.4); | |
| } | |
| /* Skills Section */ | |
| .skills-section { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 3rem; | |
| margin: 4rem 0; | |
| border: 1px solid var(--border-color); | |
| } | |
| .skills-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .skill-category { | |
| text-align: center; | |
| } | |
| .skill-category h4 { | |
| color: var(--accent-blue); | |
| margin-bottom: 1rem; | |
| font-size: 1.2rem; | |
| } | |
| .skill-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| justify-content: center; | |
| } | |
| .skill-item { | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| padding: 0.5rem 1rem; | |
| border-radius: 15px; | |
| font-size: 0.9rem; | |
| transition: all 0.3s ease; | |
| } | |
| .skill-item:hover { | |
| background: var(--accent-green); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| /* Contact Section */ | |
| .contact-section { | |
| text-align: center; | |
| background: var(--gradient-1); | |
| border-radius: 20px; | |
| padding: 4rem 2rem; | |
| margin: 4rem 0; | |
| color: white; | |
| } | |
| .contact-section h3 { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .contact-section p { | |
| font-size: 1.1rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| } | |
| .contact-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .contact-btn { | |
| background: white; | |
| color: var(--bg-primary); | |
| padding: 1rem 2rem; | |
| border-radius: 12px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .contact-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Animations */ | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.8s ease, transform 0.8s ease; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .slide-in-left { | |
| opacity: 0; | |
| transform: translateX(-50px); | |
| transition: opacity 0.8s ease, transform 0.8s ease; | |
| } | |
| .slide-in-left.visible { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .slide-in-right { | |
| opacity: 0; | |
| transform: translateX(50px); | |
| transition: opacity 0.8s ease, transform 0.8s ease; | |
| } | |
| .slide-in-right.visible { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .menu-toggle { | |
| display: flex; | |
| } | |
| .nav-links { | |
| display: none; | |
| position: fixed; | |
| top: 80px; | |
| left: 0; | |
| width: 100%; | |
| background: var(--bg-card); | |
| padding: 2rem; | |
| flex-direction: column; | |
| align-items: center; | |
| z-index: 1000; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .nav-links.active { | |
| display: flex; | |
| } | |
| h2 { | |
| font-size: 2.5rem; | |
| } | |
| .projects-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .timeline-item { | |
| min-width: 300px; | |
| transform: none ; | |
| } | |
| .project-categories { | |
| justify-content: flex-start; | |
| overflow-x: auto; | |
| padding-bottom: 1rem; | |
| } | |
| .contact-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .skills-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| main { | |
| padding: 1rem; | |
| } | |
| .timeline-item { | |
| min-width: 280px; | |
| } | |
| .project-card { | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Background --> | |
| <div class="animated-bg"> | |
| <div class="floating-shape shape-1"></div> | |
| <div class="floating-shape shape-2"></div> | |
| <div class="floating-shape shape-3"></div> | |
| </div> | |
| <header> | |
| <nav> | |
| <a href="index.html" class="logo">Pranit Chilbule</a> | |
| <div class="menu-toggle" onclick="toggleMenu()"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <ul class="nav-links"> | |
| <li><a href="index.html">Home</a></li> | |
| <li><a href="about.html">About</a></li> | |
| <li><a href="#" class="active">Projects</a></li> | |
| <li><a href="achievements.html">Achievement</a></li> | |
| <li><a href="contact.html">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <!-- Projects Section --> | |
| <section id="projects"> | |
| <h2 class="fade-in">Featured Projects</h2> | |
| <!-- Project Categories --> | |
| <div class="project-categories fade-in"> | |
| <button class="category-btn active" onclick="filterProjects('all')">All Projects</button> | |
| <button class="category-btn" onclick="filterProjects('ai-ml')">AI/ML</button> | |
| <button class="category-btn" onclick="filterProjects('web')">Web Development</button> | |
| <button class="category-btn" onclick="filterProjects('iot')">IoT</button> | |
| </div> | |
| <div class="projects-grid"> | |
| <!-- Project 1: Inspect.AI --> | |
| <article class="project-card fade-in" data-category="ai-ml"> | |
| <div class="project-thumbnail"> | |
| <img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=600&h=400&fit=crop" alt="AI Inspection System" loading="lazy"> | |
| <div class="project-overlay"> | |
| <div style="color: white; font-weight: 600;">View Details</div> | |
| </div> | |
| <div class="project-status">Completed</div> | |
| </div> | |
| <div class="project-content"> | |
| <h3 class="project-title">Inspect.AI - Institute Inspection System</h3> | |
| <p class="project-description"> | |
| Advanced AI-powered inspection system utilizing CNNs, YOLOv8, and image segmentation for comprehensive institute assessment. Features OCR document processing, automated report generation, and seamless ERP integration with 95% accuracy in defect detection. | |
| </p> | |
| <div class="tech-stack"> | |
| <span class="tech-tag">Flask</span> | |
| <span class="tech-tag">YOLOv8</span> | |
| <span class="tech-tag">Deep Learning</span> | |
| <span class="tech-tag">Computer Vision</span> | |
| <span class="tech-tag">NLP</span> | |
| <span class="tech-tag">Gemini API</span> | |
| <span class="tech-tag">OCR</span> | |
| </div> | |
| <div class="project-links"> | |
| <a href="https://github.com/pranit144/inspect-ai" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub | |
| </a> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> | |
| </svg> | |
| Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Project 2: Ground Water Level Predictor --> | |
| <article class="project-card fade-in" data-category="ai-ml"> | |
| <div class="project-thumbnail"> | |
| <img src="https://images.unsplash.com/photo-1569163139394-de4e4f43e4e3?w=600&h=400&fit=crop" alt="Water Level Prediction" loading="lazy"> | |
| <div class="project-overlay"> | |
| <div style="color: white; font-weight: 600;">View Details</div> | |
| </div> | |
| <div class="project-status">Completed</div> | |
| </div> | |
| <div class="project-content"> | |
| <h3 class="project-title">Ground Water Level Predictor</h3> | |
| <p class="project-description"> | |
| Comprehensive web application for groundwater level estimation using machine learning algorithms. Features geospatial analysis, time-series forecasting, and achieved 90% accuracy using XGBoost and Prophet models with interactive visualization dashboard. | |
| </p> | |
| <div class="tech-stack"> | |
| <span class="tech-tag">Python</span> | |
| <span class="tech-tag">Flask</span> | |
| <span class="tech-tag">XGBoost</span> | |
| <span class="tech-tag">Prophet</span> | |
| <span class="tech-tag">Pandas</span> | |
| <span class="tech-tag">Plotly</span> | |
| <span class="tech-tag">Geospatial Analysis</span> | |
| </div> | |
| <div class="project-links"> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub | |
| </a> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> | |
| </svg> | |
| Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Project 3: Enhanced Plant Disease Detection --> | |
| <article class="project-card fade-in" data-category="iot"> | |
| <div class="project-thumbnail"> | |
| <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=600&h=400&fit=crop" alt="Plant Disease Detection System" loading="lazy"> | |
| <div class="project-overlay"> | |
| <div style="color: white; font-weight: 600;">View Details</div> | |
| </div> | |
| <div class="project-status">Completed</div> | |
| </div> | |
| <div class="project-content"> | |
| <h3 class="project-title">Enhanced Plant Disease Detection</h3> | |
| <p class="project-description"> | |
| IoT-based agricultural solution combining deep learning and hardware automation for real-time crop disease detection. Features automated pesticide mixing system, smart resource management, and achieved 92% detection accuracy with reduced false positives. | |
| </p> | |
| <div class="tech-stack"> | |
| <span class="tech-tag">IoT</span> | |
| <span class="tech-tag">Deep Learning</span> | |
| <span class="tech-tag">Computer Vision</span> | |
| <span class="tech-tag">Arduino</span> | |
| <span class="tech-tag">Raspberry Pi</span> | |
| <span class="tech-tag">Python</span> | |
| <span class="tech-tag">Sensors</span> | |
| </div> | |
| <div class="project-links"> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub | |
| </a> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> | |
| </svg> | |
| Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Project 4: E-Commerce Platform --> | |
| <article class="project-card fade-in" data-category="web"> | |
| <div class="project-thumbnail"> | |
| <img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=600&h=400&fit=crop" alt="E-Commerce Platform" loading="lazy"> | |
| <div class="project-overlay"> | |
| <div style="color: white; font-weight: 600;">View Details</div> | |
| </div> | |
| <div class="project-status">Completed</div> | |
| </div> | |
| <div class="project-content"> | |
| <h3 class="project-title">Modern E-Commerce Platform</h3> | |
| <p class="project-description"> | |
| Full-stack e-commerce solution with responsive design, payment integration, inventory management, and real-time analytics. Features secure authentication, order tracking, and optimized performance for high-traffic scenarios. | |
| </p> | |
| <div class="tech-stack"> | |
| <span class="tech-tag">React</span> | |
| <span class="tech-tag">Node.js</span> | |
| <span class="tech-tag">MongoDB</span> | |
| <span class="tech-tag">Express</span> | |
| <span class="tech-tag">Stripe API</span> | |
| <span class="tech-tag">Redux</span> | |
| <span class="tech-tag">JWT</span> | |
| </div> | |
| <div class="project-links"> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub | |
| </a> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> | |
| </svg> | |
| Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Project 5: Smart Home Automation --> | |
| <article class="project-card fade-in" data-category="iot"> | |
| <div class="project-thumbnail"> | |
| <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop" alt="Smart Home System" loading="lazy"> | |
| <div class="project-overlay"> | |
| <div style="color: white; font-weight: 600;">View Details</div> | |
| </div> | |
| <div class="project-status in-progress">In Progress</div> | |
| </div> | |
| <div class="project-content"> | |
| <h3 class="project-title">Smart Home Automation System</h3> | |
| <p class="project-description"> | |
| Comprehensive IoT solution for home automation featuring voice control, mobile app integration, energy monitoring, and AI-driven optimization. Implements machine learning for predictive analytics and energy efficiency. | |
| </p> | |
| <div class="tech-stack"> | |
| <span class="tech-tag">IoT</span> | |
| <span class="tech-tag">Arduino</span> | |
| <span class="tech-tag">React Native</span> | |
| <span class="tech-tag">Firebase</span> | |
| <span class="tech-tag">ML</span> | |
| <span class="tech-tag">Voice Recognition</span> | |
| <span class="tech-tag">WiFi</span> | |
| </div> | |
| <div class="project-links"> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub | |
| </a> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> | |
| </svg> | |
| Preview | |
| </a> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Project 6: Data Visualization Dashboard --> | |
| <article class="project-card fade-in" data-category="ai-ml"> | |
| <div class="project-thumbnail"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop" alt="Data Visualization Dashboard" loading="lazy"> | |
| <div class="project-overlay"> | |
| <div style="color: white; font-weight: 600;">View Details</div> | |
| </div> | |
| <div class="project-status">Completed</div> | |
| </div> | |
| <div class="project-content"> | |
| <h3 class="project-title">Interactive Data Analytics Dashboard</h3> | |
| <p class="project-description"> | |
| Advanced analytics platform with real-time data processing, interactive visualizations, and predictive modeling capabilities. Features custom charts, automated reporting, and machine learning integration for business intelligence. | |
| </p> | |
| <div class="tech-stack"> | |
| <span class="tech-tag">Python</span> | |
| <span class="tech-tag">Dash</span> | |
| <span class="tech-tag">Plotly</span> | |
| <span class="tech-tag">Pandas</span> | |
| <span class="tech-tag">SQL</span> | |
| <span class="tech-tag">Machine Learning</span> | |
| <span class="tech-tag">Docker</span> | |
| </div> | |
| <div class="project-links"> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub | |
| </a> | |
| <a href="#" target="_blank"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> | |
| </svg> | |
| Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- Experience Timeline --> | |
| <section id="experience"> | |
| <h2 class="fade-in">Professional Experience</h2> | |
| <div class="timeline"> | |
| <div class="timeline-container"> | |
| <!-- Passion Infotech --> | |
| <div class="timeline-item fade-in"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">August 2024-November 2024 </div> | |
| <div class="timeline-location">Pune, India</div> | |
| <h3 class="timeline-role">AI Engineer - Passion Infotech Private Limited</h3> | |
| <ul> | |
| <li>Developed a generative AI system using GANs and transformers for advanced content creation</li> | |
| <li>Implemented mood-driven audio-visual enhancements with 85% user satisfaction</li> | |
| <li>Secured ₹2.5M industry funding for innovation projects</li> | |
| <li>Expanded RAG framework expertise and deployed production-ready AI solutions</li> | |
| <li>Led cross-functional team of 5 engineers in AI product development</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Softgrowth Infotech --> | |
| <div class="timeline-item fade-in"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">July 2024</div> | |
| <div class="timeline-location">Chandrapur, India</div> | |
| <h3 class="timeline-role">Summer Intern - Softgrowth Infotech</h3> | |
| <ul> | |
| <li>Developed responsive website frontend using HTML5, CSS3, and JavaScript ES6</li> | |
| <li>Enhanced user experience and improved page load performance by 25%</li> | |
| <li>Ensured cross-browser compatibility and mobile responsiveness</li> | |
| <li>Collaborated with design team to implement pixel-perfect UI components</li> | |
| <li>Optimized code for better SEO performance and accessibility standards</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Acmegrade --> | |
| <div class="timeline-item fade-in"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">April 2023 - May 2023</div> | |
| <div class="timeline-location">Remote</div> | |
| <h3 class="timeline-role">Data Science Trainee - Acmegrade</h3> | |
| <ul> | |
| <li>Built spam classification model achieving 94% accuracy using ML techniques</li> | |
| <li>Developed NLP chatbot with advanced data preprocessing and sentiment analysis</li> | |
| <li>Implemented feature engineering pipelines using Pandas and NumPy</li> | |
| <li>Analyzed large datasets and created predictive models for business insights</li> | |
| <li>Participated in end-to-end ML project lifecycle from data collection to deployment</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-nav"> | |
| <button onclick="scrollTimeline('left')" aria-label="Previous">←</button> | |
| <button onclick="scrollTimeline('right')" aria-label="Next">→</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills"> | |
| <div class="skills-section fade-in"> | |
| <h2>Technical Skills</h2> | |
| <div class="skills-grid"> | |
| <div class="skill-category"> | |
| <h4>Programming Languages</h4> | |
| <div class="skill-list"> | |
| <span class="skill-item">Python</span> | |
| <span class="skill-item">JavaScript</span> | |
| <span class="skill-item">Java</span> | |
| <span class="skill-item">C++</span> | |
| <span class="skill-item">SQL</span> | |
| <span class="skill-item">R</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h4>AI/ML Technologies</h4> | |
| <div class="skill-list"> | |
| <span class="skill-item">TensorFlow</span> | |
| <span class="skill-item">PyTorch</span> | |
| <span class="skill-item">Scikit-learn</span> | |
| <span class="skill-item">OpenCV</span> | |
| <span class="skill-item">YOLO</span> | |
| <span class="skill-item">Transformers</span> | |
| <span class="skill-item">GANs</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h4>Web Technologies</h4> | |
| <div class="skill-list"> | |
| <span class="skill-item">React</span> | |
| <span class="skill-item">Node.js</span> | |
| <span class="skill-item">Flask</span> | |
| <span class="skill-item">Django</span> | |
| <span class="skill-item">MongoDB</span> | |
| <span class="skill-item">Express</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h4>Tools & Platforms</h4> | |
| <div class="skill-list"> | |
| <span class="skill-item">Git</span> | |
| <span class="skill-item">Docker</span> | |
| <span class="skill-item">AWS</span> | |
| <span class="skill-item">Google Cloud</span> | |
| <span class="skill-item">Jupyter</span> | |
| <span class="skill-item">VS Code</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact"> | |
| <div class="contact-section fade-in"> | |
| <h3>Let's Work Together</h3> | |
| <p>Ready to bring your ideas to life? Let's discuss how we can collaborate on your next project.</p> | |
| <div class="contact-buttons"> | |
| <a href="mailto:[email protected]" class="contact-btn"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/> | |
| </svg> | |
| Email Me | |
| </a> | |
| <a href="https://linkedin.com/in/pranit144" class="contact-btn"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> | |
| </svg> | |
| </a> | |
| <a href="https://github.com/pranit144" class="contact-btn"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script> | |
| // Header scroll effect | |
| window.addEventListener('scroll', () => { | |
| const header = document.querySelector('header'); | |
| if (window.scrollY > 100) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Mobile menu toggle | |
| function toggleMenu() { | |
| const navLinks = document.querySelector('.nav-links'); | |
| const menuToggle = document.querySelector('.menu-toggle'); | |
| navLinks.classList.toggle('active'); | |
| menuToggle.classList.toggle('active'); | |
| } | |
| // Project filtering | |
| function filterProjects(category) { | |
| const cards = document.querySelectorAll('.project-card'); | |
| const buttons = document.querySelectorAll('.category-btn'); | |
| // Update active button | |
| buttons.forEach(btn => btn.classList.remove('active')); | |
| event.target.classList.add('active'); | |
| // Filter cards | |
| cards.forEach(card => { | |
| if (category === 'all' || card.dataset.category === category) { | |
| card.style.display = 'block'; | |
| card.style.animation = 'fadeIn 0.5s ease forwards'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| } | |
| // Timeline navigation | |
| function scrollTimeline(direction) { | |
| const container = document.querySelector('.timeline-container'); | |
| const scrollAmount = 400; | |
| if (direction === 'left') { | |
| container.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); | |
| } else { | |
| container.scrollBy({ left: scrollAmount, behavior: 'smooth' }); | |
| } | |
| } | |
| // Intersection Observer for animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all elements with animation classes | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const animatedElements = document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right'); | |
| animatedElements.forEach(el => observer.observe(el)); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| const headerHeight = document.querySelector('header').offsetHeight; | |
| const targetPosition = target.offsetTop - headerHeight - 20; | |
| window.scrollTo({ | |
| top: targetPosition, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const navLinks = document.querySelector('.nav-links'); | |
| const menuToggle = document.querySelector('.menu-toggle'); | |
| navLinks.classList.remove('active'); | |
| menuToggle.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| // Typing animation for hero section | |
| function typeWriter(element, text, speed = 100) { | |
| let i = 0; | |
| element.innerHTML = ''; | |
| function type() { | |
| if (i < text.length) { | |
| element.innerHTML += text.charAt(i); | |
| i++; | |
| setTimeout(type, speed); | |
| } | |
| } | |
| type(); | |
| } | |
| // Initialize typing animation | |
| window.addEventListener('load', () => { | |
| const heroTitle = document.querySelector('.hero-title'); | |
| if (heroTitle) { | |
| typeWriter(heroTitle, 'AI Engineer & Full-Stack Developer', 80); | |
| } | |
| }); | |
| // Parallax effect for hero section | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const hero = document.querySelector('.hero'); | |
| if (hero) { | |
| hero.style.transform = `translateY(${scrolled * 0.5}px)`; | |
| } | |
| }); | |
| // Project card hover effects | |
| document.querySelectorAll('.project-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-10px)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| // Skills animation on scroll | |
| const skillItems = document.querySelectorAll('.skill-item'); | |
| const skillObserver = new IntersectionObserver((entries) => { | |
| entries.forEach((entry, index) => { | |
| if (entry.isIntersecting) { | |
| setTimeout(() => { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| }, index * 100); | |
| } | |
| }); | |
| }); | |
| skillItems.forEach(item => { | |
| item.style.opacity = '0'; | |
| item.style.transform = 'translateY(20px)'; | |
| item.style.transition = 'all 0.5s ease'; | |
| skillObserver.observe(item); | |
| }); | |
| // Dynamic year update | |
| const currentYear = new Date().getFullYear(); | |
| const yearElements = document.querySelectorAll('.current-year'); | |
| yearElements.forEach(el => el.textContent = currentYear); | |
| // Form validation (if contact form exists) | |
| const contactForm = document.querySelector('#contact-form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Add form validation logic here | |
| alert('Thank you for your message! I will get back to you soon.'); | |
| }); | |
| } | |
| // Performance optimization - lazy loading for images | |
| if ('IntersectionObserver' in window) { | |
| const imageObserver = new IntersectionObserver((entries, observer) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const img = entry.target; | |
| img.src = img.dataset.src || img.src; | |
| img.classList.remove('lazy'); | |
| observer.unobserve(img); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('img[loading="lazy"]').forEach(img => { | |
| imageObserver.observe(img); | |
| }); | |
| } | |
| // Active navigation highlighting | |
| window.addEventListener('scroll', () => { | |
| const sections = document.querySelectorAll('section[id]'); | |
| const navLinks = document.querySelectorAll('.nav-links a'); | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (scrollY >= (sectionTop - 200)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('active'); | |
| if (link.getAttribute('href') === '#' + current) { | |
| link.classList.add('active'); | |
| } | |
| }); | |
| }); | |
| // Timeline scroll indicators | |
| const timelineContainer = document.querySelector('.timeline-container'); | |
| if (timelineContainer) { | |
| timelineContainer.addEventListener('scroll', () => { | |
| const scrollLeft = timelineContainer.scrollLeft; | |
| const maxScroll = timelineContainer.scrollWidth - timelineContainer.clientWidth; | |
| const scrollPercentage = (scrollLeft / maxScroll) * 100; | |
| // Update navigation buttons state | |
| const leftBtn = document.querySelector('.timeline-nav button:first-child'); | |
| const rightBtn = document.querySelector('.timeline-nav button:last-child'); | |
| if (leftBtn && rightBtn) { | |
| leftBtn.disabled = scrollLeft === 0; | |
| rightBtn.disabled = scrollLeft >= maxScroll - 1; | |
| } | |
| }); | |
| } | |
| // Easter egg - Konami code | |
| let konamiCode = []; | |
| const konamiSequence = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]; | |
| document.addEventListener('keydown', (e) => { | |
| konamiCode.push(e.keyCode); | |
| if (konamiCode.length > konamiSequence.length) { | |
| konamiCode.shift(); | |
| } | |
| if (konamiCode.toString() === konamiSequence.toString()) { | |
| document.body.style.animation = 'rainbow 2s infinite'; | |
| setTimeout(() => { | |
| document.body.style.animation = ''; | |
| }, 5000); | |
| console.log('🎉 Easter egg activated! Welcome to the matrix!'); | |
| } | |
| }); | |
| // Add CSS for rainbow animation | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes rainbow { | |
| 0% { filter: hue-rotate(0deg); } | |
| 100% { filter: hue-rotate(360deg); } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Console welcome message | |
| console.log('%c Welcome to Pranit Chilbule\'s Portfolio! ', 'background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); color: white; padding: 10px; border-radius: 5px; font-size: 16px; font-weight: bold;'); | |
| console.log('%c Feel free to explore the code and reach out if you have any questions! ', 'color: #667eea; font-size: 14px;'); | |
| </script> | |
| <!-- Additional CSS for enhanced animations and responsive design --> | |
| <style> | |
| /* Ensure smooth transitions for all interactive elements */ | |
| * { | |
| transition-duration: 0.3s; | |
| } | |
| /* Enhanced project card animations */ | |
| .project-card { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .project-card:hover { | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Improved timeline navigation */ | |
| .timeline-nav button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* Enhanced mobile responsiveness */ | |
| @media (max-width: 768px) { | |
| .timeline-container { | |
| scroll-snap-type: x mandatory; | |
| } | |
| .timeline-item { | |
| scroll-snap-align: start; | |
| } | |
| .skills-grid { | |
| grid-template-columns: 1fr; | |
| gap: 1.5rem; | |
| } | |
| } | |
| /* Loading animation for lazy images */ | |
| img.lazy { | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| img.lazy.loaded { | |
| opacity: 1; | |
| } | |
| /* Active navigation styling */ | |
| .nav-links a.active { | |
| color: var(--primary-color); | |
| border-bottom: 2px solid var(--primary-color); | |
| } | |
| /* Print styles */ | |
| @media print { | |
| .nav-links, | |
| .menu-toggle, | |
| .project-links, | |
| .contact-buttons { | |
| display: none; | |
| } | |
| .project-card, | |
| .timeline-item { | |
| break-inside: avoid; | |
| } | |
| } | |
| /* High contrast mode support */ | |
| @media (prefers-contrast: high) { | |
| :root { | |
| --text-color: #000; | |
| --background-color: #fff; | |
| --primary-color: #0000ff; | |
| } | |
| } | |
| /* Reduced motion for accessibility */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| </style> | |
| </body> | |
| </html> |