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"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> | |
| <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); | |
| } | |
| 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); | |
| } | |
| /* Main Content Styles */ | |
| main { | |
| padding: 2rem; | |
| max-width: 1400px; | |
| margin: 80px auto 0; | |
| } | |
| section { | |
| margin-bottom: 6rem; | |
| } | |
| h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--accent-blue); | |
| text-align: center; | |
| font-weight: 700; | |
| position: relative; | |
| } | |
| h1::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 150px; | |
| height: 4px; | |
| background: var(--gradient-1); | |
| border-radius: 2px; | |
| } | |
| .portfolio-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 3rem; | |
| margin: 3rem 0; | |
| flex-wrap: wrap; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| background: var(--bg-card); | |
| padding: 2rem; | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| min-width: 150px; | |
| } | |
| .stat-number { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--accent-green); | |
| display: block; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-top: 0.5rem; | |
| } | |
| /* 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(380px, 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; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .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-header { | |
| position: relative; | |
| padding: 2rem; | |
| background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(33, 38, 45, 0.8) 100%); | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .project-logo { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| color: white; | |
| flex-shrink: 0; | |
| } | |
| .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; | |
| z-index: 1; | |
| } | |
| .project-status.in-progress { | |
| background: var(--accent-orange); | |
| } | |
| .project-content { | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| flex-grow: 1; | |
| } | |
| .project-title { | |
| font-size: 1.3rem; | |
| color: var(--accent-blue); | |
| margin-bottom: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .project-category { | |
| background: var(--accent-purple); | |
| color: white; | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 12px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| width: fit-content; | |
| margin-bottom: 1rem; | |
| } | |
| .project-description { | |
| color: var(--text-secondary); | |
| margin-bottom: 1rem; | |
| line-height: 1.6; | |
| font-size: 0.9rem; | |
| flex-grow: 1; | |
| } | |
| .tech-stack { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .tech-tag { | |
| background: var(--bg-secondary); | |
| color: var(--accent-green); | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 15px; | |
| font-size: 0.8rem; | |
| 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: 0.75rem; | |
| margin-top: auto; | |
| } | |
| .project-links a { | |
| color: var(--accent-blue); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| padding: 0.6rem 1.2rem; | |
| border: 2px solid var(--accent-blue); | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| font-size: 0.9rem; | |
| flex: 1; | |
| justify-content: center; | |
| } | |
| .project-links a:hover { | |
| background: var(--accent-blue); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| /* Hide projects by default */ | |
| .project-card.hidden { | |
| display: none; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .projects-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .portfolio-stats { | |
| gap: 1.5rem; | |
| } | |
| .project-categories { | |
| justify-content: flex-start; | |
| overflow-x: auto; | |
| padding-bottom: 1rem; | |
| flex-wrap: nowrap; | |
| } | |
| .category-btn { | |
| white-space: nowrap; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| main { | |
| padding: 1rem; | |
| margin-top: 70px; | |
| } | |
| .projects-grid { | |
| grid-template-columns: 1fr; | |
| gap: 1.5rem; | |
| } | |
| .project-header { | |
| padding: 1.5rem; | |
| } | |
| .project-logo { | |
| width: 50px; | |
| height: 50px; | |
| font-size: 1.5rem; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| } | |
| </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="#" class="logo">Pranit Chilbule</a> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="index.html"><i class="fas fa-house"></i> Home</a></li> | |
| <li><a href="about.html"><i class="fas fa-user"></i> About</a></li> | |
| <li><a href="projects.html"><i class="fas fa-code"></i> Projects</a></li> | |
| <li><a href="achievements.html"><i class="fas fa-trophy"></i> Achievements</a></li> | |
| <li><a href="contact.html"><i class="fas fa-envelope"></i> Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <section id="projects"> | |
| <h1>Complete Projects Portfolio</h1> | |
| <div class="portfolio-stats"> | |
| <div class="stat-item"> | |
| <span class="stat-number">44</span> | |
| <span class="stat-label">Total Projects</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-number">21</span> | |
| <span class="stat-label">AI/ML Projects</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-number">13</span> | |
| <span class="stat-label">Web Development</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-number">10</span> | |
| <span class="stat-label">Other Technologies</span> | |
| </div> | |
| </div> | |
| <div class="project-categories"> | |
| <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> | |
| <button class="category-btn" onclick="filterProjects('blockchain')">Blockchain</button> | |
| <button class="category-btn" onclick="filterProjects('mobile')">Mobile</button> | |
| <button class="category-btn" onclick="filterProjects('security')">Security</button> | |
| </div> | |
| <div class="projects-grid" id="projectsGrid"> | |
| <!-- Projects will be populated by JavaScript --> | |
| </div> | |
| </section> | |
| </main> | |
| <script> | |
| // Complete portfolio projects data and functionality | |
| const projects = [ | |
| { | |
| id: 1, | |
| name: "Garbage Segregation and Monitoring System", | |
| category: "iot", | |
| description: "Automated real-time garbage classification into 6 waste types using ML model deployed on Edge IoT device with OpenCV and TensorFlow Lite.", | |
| techs: ["OpenCV", "IoT", "Python", "TensorFlow Lite", "Raspberry Pi"], | |
| logo: "🗑️", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 2, | |
| name: "Employee Salary Classification System", | |
| category: "ai-ml", | |
| description: "Predict salary group based on employee parameters using Decision Tree classifier with comprehensive data analysis and visualization.", | |
| techs: ["Python", "Pandas", "Scikit-learn", "Decision Trees", "Flask"], | |
| logo: "💼", | |
| logoColor: "#58a6ff", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 3, | |
| name: "College Chat System", | |
| category: "web", | |
| description: "Real-time WhatsApp-like communication system for college students with authentication, messaging, and group chat features.", | |
| techs: ["HTML", "CSS", "JavaScript", "MySQL", "PHP", "WebSockets"], | |
| logo: "💬", | |
| logoColor: "#f093fb", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 4, | |
| name: "Internship & Placement Finder", | |
| category: "web", | |
| description: "Intelligent recommendation system for internships and placements based on student interests, skills, and resume profiles.", | |
| techs: ["Python", "SQLite", "Flask", "Machine Learning", "OOP"], | |
| logo: "🎯", | |
| logoColor: "#fbbf24", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 5, | |
| name: "Facial Emotion Recognition using CNN", | |
| category: "ai-ml", | |
| description: "Real-time emotion detection via webcam using custom CNN architecture trained on FER-2013 dataset for accurate emotion classification.", | |
| techs: ["Python", "CNN", "OpenCV", "Keras", "TensorFlow"], | |
| logo: "😊", | |
| logoColor: "#a5b4fc", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 6, | |
| name: "Custom Chatbot with PDF & Dataset Integration", | |
| category: "ai-ml", | |
| description: "Multi-functional chatbot for document and dataset querying with embeddings, supporting PDF analysis and data exploration.", | |
| techs: ["LangChain", "OpenAI API", "PyPDF2", "Streamlit", "ChromaDB"], | |
| logo: "🤖", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 7, | |
| name: "Plant Disease Detection & Agro-Pesticide Recommendation", | |
| category: "ai-ml", | |
| description: "Assist farmers in diagnosing plant diseases using computer vision and recommend appropriate treatments and pesticides.", | |
| techs: ["OpenCV", "CNN", "Keras", "Flask", "SQLite", "IoT"], | |
| logo: "🌱", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 8, | |
| name: "Intrusion Detection and Alert System", | |
| category: "iot", | |
| description: "Secure area monitoring with motion detection, real-time alerts via email/Telegram, and comprehensive dashboard for security management.", | |
| techs: ["Python", "OpenCV", "PIR Sensors", "Flask", "Email API"], | |
| logo: "🔒", | |
| logoColor: "#f5576c", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 9, | |
| name: "Emotion & Classification Bot", | |
| category: "ai-ml", | |
| description: "Multimodal system for text, voice, and facial emotion recognition with sentiment analysis and review classification capabilities.", | |
| techs: ["CNN", "RNN", "SpaCy", "OpenCV", "NLTK", "Flask"], | |
| logo: "🎭", | |
| logoColor: "#a5b4fc", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 10, | |
| name: "NLP Blog Generator Website", | |
| category: "ai-ml", | |
| description: "Automatically generates high-quality blogs based on topic prompts using advanced NLP techniques and GPT integration.", | |
| techs: ["GPT APIs", "Hugging Face", "Flask", "MongoDB", "NLP"], | |
| logo: "📝", | |
| logoColor: "#58a6ff", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 11, | |
| name: "Blockchain-Based Safe Vault", | |
| category: "blockchain", | |
| description: "Secure password vault using blockchain technology with weak password analytics and AES encryption for maximum security.", | |
| techs: ["Solidity", "Ganache", "Web3.py", "Flask", "AES Encryption"], | |
| logo: "⛓️", | |
| logoColor: "#fbbf24", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 12, | |
| name: "Financial Trend Agent with LSTM & LLM", | |
| category: "ai-ml", | |
| description: "Smart investment assistant with stock price prediction using LSTM and LLM insights for comprehensive financial analysis.", | |
| techs: ["LSTM", "Keras", "NewsAPI", "LangChain", "Streamlit", "AWS"], | |
| logo: "📈", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 13, | |
| name: "College Placement & Analysis Platform", | |
| category: "web", | |
| description: "Comprehensive platform with three dashboards for students, colleges, and companies to analyze placement trends and statistics.", | |
| techs: ["Flask", "Django", "PostgreSQL", "Plotly", "Chart.js"], | |
| logo: "🎓", | |
| logoColor: "#58a6ff", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 14, | |
| name: "Krishi Mitra – AI-Powered Farmer Support", | |
| category: "ai-ml", | |
| description: "Complete agricultural solution with plant disease detection, weather forecasting, fertilizer recommendations, and market trends.", | |
| techs: ["OpenCV", "TensorFlow", "Weather APIs", "Flask", "MongoDB"], | |
| logo: "🚜", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 15, | |
| name: "LearnMate-AI", | |
| category: "ai-ml", | |
| description: "AI-powered learning assistant designed to enhance educational experiences with personalized tutoring and progress tracking.", | |
| techs: ["Python", "NLP", "Machine Learning", "Flask", "AI"], | |
| logo: "🧠", | |
| logoColor: "#a5b4fc", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 16, | |
| name: "AgroConnect Market Storage Finder", | |
| category: "web", | |
| description: "Web platform connecting farmers with market and storage facilities, facilitating better agricultural supply chain management.", | |
| techs: ["HTML", "CSS", "JavaScript", "Firebase", "Maps API"], | |
| logo: "🌾", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 17, | |
| name: "Analyze the Geomaps", | |
| category: "ai-ml", | |
| description: "Python-based tool for analyzing geospatial data and creating interactive visualizations for geographic information systems.", | |
| techs: ["Python", "GeoPandas", "Matplotlib", "Folium", "GIS"], | |
| logo: "🗺️", | |
| logoColor: "#4facfe", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 18, | |
| name: "Attendance Monitoring Live", | |
| category: "ai-ml", | |
| description: "Live attendance monitoring system using facial recognition and computer vision for automated attendance tracking.", | |
| techs: ["Python", "OpenCV", "Face Recognition", "Flask", "CV"], | |
| logo: "👥", | |
| logoColor: "#58a6ff", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 19, | |
| name: "CarePlanAI", | |
| category: "web", | |
| description: "AI-driven platform for creating personalized healthcare plans with intelligent recommendations and health monitoring.", | |
| techs: ["HTML", "CSS", "JavaScript", "AI Integration", "Healthcare"], | |
| logo: "🏥", | |
| logoColor: "#f093fb", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 20, | |
| name: "Chat with DataFrame", | |
| category: "ai-ml", | |
| description: "Interactive chatbot that allows users to converse with and query Pandas DataFrames using natural language processing.", | |
| techs: ["Python", "Pandas", "NLP", "Streamlit", "Data Analysis"], | |
| logo: "📊", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 21, | |
| name: "ClassiGrid", | |
| category: "ai-ml", | |
| description: "Python tool for data classification and grid-based analysis with advanced machine learning algorithms and visualization.", | |
| techs: ["Python", "Scikit-learn", "Pandas", "Data Visualization", "ML"], | |
| logo: "🔢", | |
| logoColor: "#a5b4fc", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 22, | |
| name: "CraneSmart", | |
| category: "iot", | |
| description: "Smart IoT system for crane operations monitoring and safety with real-time data collection and web-based dashboard.", | |
| techs: ["HTML", "CSS", "JavaScript", "IoT", "Sensors", "Safety"], | |
| logo: "🏗️", | |
| logoColor: "#fbbf24", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 23, | |
| name: "Emotion Detection Web App", | |
| category: "web", | |
| description: "Web-based application for detecting emotions from text or images using AI with real-time processing capabilities.", | |
| techs: ["HTML", "JavaScript", "Python", "TensorFlow.js", "AI"], | |
| logo: "🎭", | |
| logoColor: "#f093fb", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 24, | |
| name: "Financial Stock Insight Web App", | |
| category: "web", | |
| description: "Comprehensive web application providing insights and analytics for financial stock data with interactive charts and predictions.", | |
| techs: ["HTML", "CSS", "JavaScript", "Chart.js", "Finance"], | |
| logo: "💹", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 25, | |
| name: "Find Your Own Raga", | |
| category: "ai-ml", | |
| description: "Python project for Indian classical music (Raga) generation and analysis using machine learning and audio processing.", | |
| techs: ["Python", "Librosa", "Machine Learning", "Audio Processing", "Music"], | |
| logo: "🎵", | |
| logoColor: "#a5b4fc", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 26, | |
| name: "GenSong", | |
| category: "ai-ml", | |
| description: "AI project for generating original song melodies and lyrics using deep learning techniques and music theory.", | |
| techs: ["Python", "Magenta", "LSTM", "Music Generation", "AI"], | |
| logo: "🎶", | |
| logoColor: "#f093fb", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 27, | |
| name: "GlucoLens", | |
| category: "web", | |
| description: "Progressive web application for glucose monitoring and diabetes management with tracking and analytics features.", | |
| techs: ["HTML", "CSS", "JavaScript", "PWA", "Healthcare"], | |
| logo: "🩺", | |
| logoColor: "#58a6ff", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 28, | |
| name: "Harvest Analysis", | |
| category: "ai-ml", | |
| description: "Python-based tool for analyzing agricultural harvest data and providing insights for crop yield optimization.", | |
| techs: ["Python", "Pandas", "Scikit-learn", "Data Analysis", "Agriculture"], | |
| logo: "🌽", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 29, | |
| name: "HospitAI Intelligent Resource Management", | |
| category: "ai-ml", | |
| description: "Intelligent system for hospital resource and patient management with AI-powered optimization and scheduling.", | |
| techs: ["C", "AI/ML Algorithms", "Data Structures", "Healthcare", "Optimization"], | |
| logo: "🏥", | |
| logoColor: "#f5576c", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 30, | |
| name: "InterviewInsight", | |
| category: "ai-ml", | |
| description: "AI-powered platform to provide insights and feedback on interview performance using speech analysis and NLP.", | |
| techs: ["Python", "NLP", "Speech-to-Text", "Flask", "AI"], | |
| logo: "🎤", | |
| logoColor: "#58a6ff", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 31, | |
| name: "Invoice Matching NLP System", | |
| category: "ai-ml", | |
| description: "Invoice matching system using NLP, fuzzy logic, and regular expressions for automated document processing.", | |
| techs: ["Python", "Jupyter", "Pandas", "NLTK", "Fuzzy Logic"], | |
| logo: "📄", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 32, | |
| name: "Laptop Recommendation System", | |
| category: "web", | |
| description: "Web-based recommendation system to help users choose laptops based on their requirements and preferences.", | |
| techs: ["HTML", "CSS", "JavaScript", "Content Filtering", "ML"], | |
| logo: "💻", | |
| logoColor: "#a5b4fc", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 33, | |
| name: "MaintAI Predictive Maintenance Dashboard", | |
| category: "ai-ml", | |
| description: "Web dashboard for predictive maintenance using AI, displaying insights from sensor data with real-time monitoring.", | |
| techs: ["HTML", "JavaScript", "Chart.js", "Python Backend", "AI"], | |
| logo: "⚙️", | |
| logoColor: "#fbbf24", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 34, | |
| name: "MoodTunes Song Predictor", | |
| category: "ai-ml", | |
| description: "Song recommendation system that predicts songs based on user's emotion using sentiment analysis and music APIs.", | |
| techs: ["Python", "Jupyter", "NLP", "Spotify API", "ML"], | |
| logo: "🎧", | |
| logoColor: "#f093fb", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 35, | |
| name: "Movie Review Sentiment Analysis", | |
| category: "ai-ml", | |
| description: "Sentiment analysis of movie reviews using Python and the spaCy NLP library for text processing and classification.", | |
| techs: ["Python", "spaCy", "NLP", "Sentiment Analysis", "ML"], | |
| logo: "🎬", | |
| logoColor: "#58a6ff", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 36, | |
| name: "My Voice Assistant (Alexa Clone)", | |
| category: "ai-ml", | |
| description: "Custom voice assistant similar to Alexa, built using Python with speech recognition and text-to-speech capabilities.", | |
| techs: ["Python", "SpeechRecognition", "pyttsx3", "AI", "Voice"], | |
| logo: "🗣️", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 37, | |
| name: "PassGuard", | |
| category: "security", | |
| description: "Secure password management tool with web interface featuring encryption and secure storage capabilities.", | |
| techs: ["HTML", "CSS", "JavaScript", "Cryptography", "Security"], | |
| logo: "🔐", | |
| logoColor: "#f5576c", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 38, | |
| name: "Customer Sentiment Classification with BERT", | |
| category: "ai-ml", | |
| description: "Customer sentiment classification application using BERT transformer model for advanced text understanding.", | |
| techs: ["Python", "BERT", "Hugging Face", "Flask API", "NLP"], | |
| logo: "🤖", | |
| logoColor: "#a5b4fc", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 39, | |
| name: "Smart Movie Recommender", | |
| category: "ai-ml", | |
| description: "Intelligent movie recommendation system using collaborative or content-based filtering with machine learning algorithms.", | |
| techs: ["Python", "Pandas", "Scikit-learn", "Flask", "ML"], | |
| logo: "🍿", | |
| logoColor: "#fbbf24", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 40, | |
| name: "Song Playlist Recommendation", | |
| category: "ai-ml", | |
| description: "System for recommending songs and generating playlists based on user preferences using clustering algorithms.", | |
| techs: ["Python", "Machine Learning", "Clustering", "Music API", "ML"], | |
| logo: "📱", | |
| logoColor: "#f093fb", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 41, | |
| name: "EduGenie", | |
| category: "mobile", | |
| description: "Educational mobile application built with Kotlin providing interactive learning experiences and progress tracking.", | |
| techs: ["Kotlin", "Android", "Spring Boot", "Firebase", "Mobile"], | |
| logo: "📚", | |
| logoColor: "#58a6ff", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 42, | |
| name: "Forge Development Toolkit", | |
| category: "web", | |
| description: "Versatile development toolkit and platform for web and software creation with automation capabilities.", | |
| techs: ["DevOps", "Automation", "API", "Web Development", "Tools"], | |
| logo: "🔧", | |
| logoColor: "#10a37f", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 43, | |
| name: "Institute Activity Analyser", | |
| category: "web", | |
| description: "Web-based tool for analyzing activities within educational institutes with comprehensive data visualization.", | |
| techs: ["HTML", "CSS", "JavaScript", "Data Visualization", "Analytics"], | |
| logo: "🏫", | |
| logoColor: "#a5b4fc", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| }, | |
| { | |
| id: 44, | |
| name: "MathCoder144", | |
| category: "web", | |
| description: "Platform combining mathematics and coding challenges with algorithmic problem-solving and educational content.", | |
| techs: ["Algorithms", "Data Structures", "Web Interface", "Education"], | |
| logo: "🧮", | |
| logoColor: "#fbbf24", | |
| status: "Completed", | |
| github: "#", | |
| demo: "#" | |
| } | |
| ]; | |
| // Function to create project card HTML | |
| function createProjectCard(project) { | |
| return ` | |
| <div class="project-card" data-category="${project.category}"> | |
| <div class="project-header"> | |
| <div class="project-logo" style="background: ${project.logoColor}">${project.logo}</div> | |
| <div class="project-status ${project.status === 'In Progress' ? 'in-progress' : ''}">${project.status}</div> | |
| </div> | |
| <div class="project-content"> | |
| <h3 class="project-title">${project.name}</h3> | |
| <div class="project-category">${project.category.replace('-', '/').toUpperCase()}</div> | |
| <p class="project-description">${project.description}</p> | |
| <div class="tech-stack"> | |
| ${project.techs.map(tech => `<span class="tech-tag">${tech}</span>`).join('')} | |
| </div> | |
| <div class="project-links"> | |
| <a href="${project.github}" target="_blank"> | |
| <span>📂</span> Code | |
| </a> | |
| <a href="${project.demo}" target="_blank"> | |
| <span>🚀</span> Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Function to render all projects | |
| function renderProjects() { | |
| const projectsGrid = document.getElementById('projectsGrid'); | |
| if (!projectsGrid) return; | |
| projectsGrid.innerHTML = projects.map(project => createProjectCard(project)).join(''); | |
| } | |
| // Function to filter projects by category | |
| function filterProjects(category) { | |
| const projectCards = document.querySelectorAll('.project-card'); | |
| const categoryButtons = document.querySelectorAll('.category-btn'); | |
| // Update active button | |
| categoryButtons.forEach(btn => btn.classList.remove('active')); | |
| event.target.classList.add('active'); | |
| // Filter projects | |
| projectCards.forEach(card => { | |
| if (category === 'all' || card.dataset.category === category) { | |
| card.classList.remove('hidden'); | |
| card.style.display = 'flex'; | |
| } else { | |
| card.classList.add('hidden'); | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| // Add animation effect | |
| projectCards.forEach((card, index) => { | |
| if (!card.classList.contains('hidden')) { | |
| card.style.animationDelay = `${index * 0.1}s`; | |
| card.style.animation = 'none'; | |
| card.offsetHeight; // Trigger reflow | |
| card.style.animation = 'fadeInUp 0.6s ease forwards'; | |
| } | |
| }); | |
| } | |
| // Function to update portfolio statistics | |
| function updatePortfolioStats() { | |
| const totalProjects = projects.length; | |
| const aiMlProjects = projects.filter(p => p.category === 'ai-ml').length; | |
| const webProjects = projects.filter(p => p.category === 'web').length; | |
| const otherProjects = totalProjects - aiMlProjects - webProjects; | |
| // Update stat numbers | |
| const statNumbers = document.querySelectorAll('.stat-number'); | |
| if (statNumbers.length >= 4) { | |
| statNumbers[0].textContent = totalProjects; | |
| statNumbers[1].textContent = aiMlProjects; | |
| statNumbers[2].textContent = webProjects; | |
| statNumbers[3].textContent = otherProjects; | |
| } | |
| } | |
| function addSmoothScrolling() { | |
| const navLinks = document.querySelectorAll('.nav-links a'); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| const href = this.getAttribute('href'); | |
| if (href.startsWith('#')) { | |
| e.preventDefault(); | |
| const targetEl = document.querySelector(href); | |
| if (targetEl) { | |
| targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| } | |
| // else: do nothing, so the link follows through normally | |
| }); | |
| }); | |
| } | |
| // Function to add header scroll effect | |
| function addHeaderScrollEffect() { | |
| const header = document.querySelector('header'); | |
| let lastScrollY = window.scrollY; | |
| window.addEventListener('scroll', () => { | |
| const currentScrollY = window.scrollY; | |
| if (currentScrollY > 100) { | |
| header.style.background = 'rgba(0, 0, 0, 0.95)'; | |
| header.style.backdropFilter = 'blur(30px)'; | |
| } else { | |
| header.style.background = 'rgba(0, 0, 0, 0.8)'; | |
| header.style.backdropFilter = 'blur(20px)'; | |
| } | |
| // Hide header on scroll down, show on scroll up | |
| if (currentScrollY > lastScrollY && currentScrollY > 200) { | |
| header.style.transform = 'translateY(-100%)'; | |
| } else { | |
| header.style.transform = 'translateY(0)'; | |
| } | |
| lastScrollY = currentScrollY; | |
| }); | |
| } | |
| // Function to add search functionality | |
| function addSearchFunctionality() { | |
| const searchInput = document.getElementById('searchInput'); | |
| if (searchInput) { | |
| searchInput.addEventListener('input', function() { | |
| const searchTerm = this.value.toLowerCase(); | |
| const projectCards = document.querySelectorAll('.project-card'); | |
| projectCards.forEach(card => { | |
| const projectName = card.querySelector('.project-title').textContent.toLowerCase(); | |
| const projectDescription = card.querySelector('.project-description').textContent.toLowerCase(); | |
| const techTags = Array.from(card.querySelectorAll('.tech-tag')).map(tag => tag.textContent.toLowerCase()); | |
| const matches = projectName.includes(searchTerm) || | |
| projectDescription.includes(searchTerm) || | |
| techTags.some(tech => tech.includes(searchTerm)); | |
| if (matches) { | |
| card.style.display = 'flex'; | |
| card.classList.remove('hidden'); | |
| } else { | |
| card.style.display = 'none'; | |
| card.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| } | |
| } | |
| // Function to add loading animation | |
| function addLoadingAnimation() { | |
| const projectsGrid = document.getElementById('projectsGrid'); | |
| if (projectsGrid) { | |
| projectsGrid.style.opacity = '0'; | |
| setTimeout(() => { | |
| projectsGrid.style.transition = 'opacity 0.5s ease'; | |
| projectsGrid.style.opacity = '1'; | |
| }, 100); | |
| } | |
| } | |
| // Function to handle responsive navigation | |
| function handleResponsiveNav() { | |
| const navToggle = document.querySelector('.nav-toggle'); | |
| const navLinks = document.querySelector('.nav-links'); | |
| if (navToggle && navLinks) { | |
| navToggle.addEventListener('click', () => { | |
| navLinks.classList.toggle('active'); | |
| }); | |
| } | |
| } | |
| // CSS for animations (to be added to your CSS file) | |
| const animationStyles = ` | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .project-card { | |
| animation: fadeInUp 0.6s ease forwards; | |
| } | |
| /* Responsive navigation styles */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| position: fixed; | |
| top: 70px; | |
| left: -100%; | |
| width: 100%; | |
| height: calc(100vh - 70px); | |
| background: var(--bg-secondary); | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| align-items: center; | |
| padding-top: 2rem; | |
| transition: left 0.3s ease; | |
| } | |
| .nav-links.active { | |
| left: 0; | |
| } | |
| .nav-toggle { | |
| display: block; | |
| background: none; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| } | |
| `; | |
| // Initialize everything when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Render projects | |
| renderProjects(); | |
| // Update portfolio statistics | |
| updatePortfolioStats(); | |
| // Add smooth scrolling | |
| addSmoothScrolling(); | |
| // Add header scroll effect | |
| addHeaderScrollEffect(); | |
| // Add search functionality | |
| addSearchFunctionality(); | |
| // Add loading animation | |
| addLoadingAnimation(); | |
| // Handle responsive navigation | |
| handleResponsiveNav(); | |
| // Add animation styles to the page | |
| const styleSheet = document.createElement('style'); | |
| styleSheet.textContent = animationStyles; | |
| document.head.appendChild(styleSheet); | |
| console.log('Portfolio initialized with', projects.length, 'projects'); | |
| }); | |
| // Export functions for external use | |
| window.portfolioFunctions = { | |
| filterProjects, | |
| renderProjects, | |
| updatePortfolioStats, | |
| projects | |
| }; | |
| </script> | |
| </body></html> |