Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Harshvardhan Dhane - Portfolio</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| .visitor-count-container { | |
| margin-top: 5px; | |
| border-radius: 12px; | |
| padding: 2px 6px; | |
| font-size: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .visitor-count-container i { | |
| font-size: 12px; | |
| } | |
| :root { | |
| --primary-color: #2563eb; | |
| --secondary-color: #3b82f6; | |
| --accent-color: #f59e0b; | |
| --text-primary: #1f2937; | |
| --text-secondary: #6b7280; | |
| --bg-primary: #ffffff; | |
| --bg-secondary: #f8fafc; | |
| --bg-tertiary: #e2e8f0; | |
| --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.15); | |
| } | |
| [data-theme="dark"] { | |
| --primary-color: #3b82f6; | |
| --secondary-color: #60a5fa; | |
| --accent-color: #fbbf24; | |
| --text-primary: #f8fafc; | |
| --text-secondary: #cbd5e1; | |
| --bg-primary: #0f172a; | |
| --bg-secondary: #1e293b; | |
| --bg-tertiary: #334155; | |
| --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); | |
| --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.4); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-primary); | |
| background-color: var(--bg-primary); | |
| transition: all 0.3s ease; | |
| overflow-x: hidden; | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--secondary-color); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-color); | |
| } | |
| /* Navigation */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background-color: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(15px); | |
| z-index: 1000; | |
| padding: 1rem 0; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| [data-theme="dark"] .navbar { | |
| background-color: rgba(15, 23, 42, 0.95); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .navbar.scrolled { | |
| background-color: rgba(255, 255, 255, 0.98); | |
| box-shadow: var(--card-shadow); | |
| } | |
| [data-theme="dark"] .navbar.scrolled { | |
| background-color: rgba(15, 23, 42, 0.98); | |
| } | |
| .nav-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 2rem; | |
| } | |
| .logo { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo img { | |
| height: 35px; | |
| width: 35px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| padding: 0.5rem 0; | |
| } | |
| .nav-links a:hover { | |
| color: var(--secondary-color); | |
| } | |
| .nav-links a.active { | |
| color: var(--secondary-color); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: var(--secondary-color); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after, | |
| .nav-links a.active::after { | |
| width: 100%; | |
| } | |
| .dark-mode-toggle { | |
| background: none; | |
| border: 2px solid var(--text-secondary); | |
| border-radius: 50px; | |
| padding: 0.5rem 1rem; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| color: var(--text-primary); | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .dark-mode-toggle:hover { | |
| border-color: var(--secondary-color); | |
| color: var(--secondary-color); | |
| transform: translateY(-2px); | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu-toggle { | |
| display: none; | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: var(--text-primary); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1);stop-opacity:1" /><stop offset="100%" style="stop-color:rgba(255,255,255,0.05);stop-opacity:1" /></linearGradient></defs><polygon fill="url(%23grad1)" points="0,0 1000,300 1000,1000 0,700"/></svg>') no-repeat center center; | |
| background-size: cover; | |
| opacity: 0.3; | |
| } | |
| .hero-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| position: relative; | |
| z-index: 2; | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| align-items: center; | |
| gap: 4rem; | |
| } | |
| .hero-text h1 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 3.5rem; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| opacity: 0; | |
| transform: translateY(50px); | |
| animation: slideUp 1s ease 0.2s forwards; | |
| } | |
| .hero-text .subtitle { | |
| font-size: 1.5rem; | |
| font-weight: 300; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| transform: translateY(50px); | |
| animation: slideUp 1s ease 0.4s forwards; | |
| } | |
| .hero-text p { | |
| font-size: 1.1rem; | |
| line-height: 1.7; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| transform: translateY(50px); | |
| animation: slideUp 1s ease 0.6s forwards; | |
| } | |
| .hero-image { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transform: translateX(50px); | |
| animation: slideRight 1s ease 0.8s forwards; | |
| } | |
| .hero-image img { | |
| width: 300px; | |
| height: 400px; | |
| border-radius: 20px; | |
| object-fit: cover; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| border: 4px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| opacity: 0; | |
| transform: translateY(50px); | |
| animation: slideUp 1s ease 1s forwards; | |
| } | |
| .btn { | |
| padding: 0.875rem 2rem; | |
| border: none; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .btn-primary { | |
| background-color: var(--accent-color); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #d97706; | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 25px rgba(245, 158, 11, 0.4); | |
| } | |
| .btn-secondary { | |
| background-color: transparent; | |
| color: white; | |
| border: 2px solid white; | |
| } | |
| .btn-secondary:hover { | |
| background-color: white; | |
| color: var(--primary-color); | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 25px rgba(255, 255, 255, 0.3); | |
| } | |
| /* Sections */ | |
| .section { | |
| padding: 6rem 0; | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: all 0.8s ease; | |
| } | |
| .section.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .section:nth-child(even) { | |
| background-color: var(--bg-secondary); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| .section-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2.75rem; | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| color: var(--primary-color); | |
| position: relative; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100px; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); | |
| border-radius: 2px; | |
| } | |
| /* About Section */ | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 2fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .about-image { | |
| text-align: center; | |
| } | |
| .about-image img { | |
| width: 250px; | |
| height: 250px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| border: 5px solid var(--accent-color); | |
| } | |
| .about-text { | |
| font-size: 1.1rem; | |
| line-height: 1.8; | |
| color: var(--text-secondary); | |
| } | |
| .about-text p { | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Skills Section */ | |
| .skills-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2.5rem; | |
| } | |
| .skill-category { | |
| background-color: var(--bg-primary); | |
| padding: 2.5rem; | |
| border-radius: 15px; | |
| box-shadow: var(--card-shadow); | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--bg-tertiary); | |
| } | |
| .skill-category:hover { | |
| transform: translateY(-8px); | |
| box-shadow: var(--card-shadow-hover); | |
| } | |
| .skill-category h3 { | |
| font-size: 1.4rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .skill-category i { | |
| font-size: 1.2rem; | |
| color: var(--accent-color); | |
| } | |
| .skill-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| } | |
| .skill-tag { | |
| background-color: var(--bg-secondary); | |
| color: var(--text-primary); | |
| padding: 0.5rem 1rem; | |
| border-radius: 25px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--bg-tertiary); | |
| } | |
| .skill-tag:hover { | |
| background-color: var(--secondary-color); | |
| color: white; | |
| transform: scale(1.05); | |
| border-color: var(--secondary-color); | |
| } | |
| /* Projects Section */ | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); | |
| gap: 3rem; | |
| } | |
| .project-card { | |
| background-color: var(--bg-primary); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: var(--card-shadow); | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--bg-tertiary); | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: var(--card-shadow-hover); | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .project-image { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .project-card:hover .project-image { | |
| transform: scale(1.05); | |
| } | |
| .project-content { | |
| padding: 2rem; | |
| } | |
| .project-content h3 { | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| font-size: 1.3rem; | |
| } | |
| .project-date { | |
| color: var(--accent-color); | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| font-size: 0.9rem; | |
| } | |
| .project-description { | |
| color: var(--text-secondary); | |
| margin-bottom: 1.5rem; | |
| line-height: 1.6; | |
| } | |
| .tech-stack { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| align-items: center; | |
| } | |
| .tech-stack strong { | |
| color: var(--text-primary); | |
| margin-right: 0.5rem; | |
| } | |
| .tech-stack .skill-tag { | |
| font-size: 0.8rem; | |
| padding: 0.3rem 0.8rem; | |
| } | |
| /* Experience Section */ | |
| .timeline { | |
| position: relative; | |
| padding: 2rem 0; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 40px; | |
| top: 0; | |
| bottom: 0; | |
| width: 3px; | |
| background: linear-gradient(to bottom, var(--primary-color), var(--accent-color)); | |
| border-radius: 2px; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| margin-bottom: 4rem; | |
| padding-left: 120px; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: 27px; | |
| top: 15px; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background-color: var(--accent-color); | |
| border: 4px solid var(--bg-primary); | |
| box-shadow: 0 0 0 4px var(--primary-color); | |
| } | |
| .timeline-card { | |
| background-color: var(--bg-primary); | |
| padding: 2.5rem; | |
| border-radius: 15px; | |
| box-shadow: var(--card-shadow); | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--bg-tertiary); | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .timeline-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--card-shadow-hover); | |
| } | |
| .company-logo { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 3px solid var(--accent-color); | |
| } | |
| .timeline-content h3 { | |
| font-size: 1.4rem; | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .timeline-date { | |
| color: var(--accent-color); | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| font-size: 1rem; | |
| } | |
| .timeline-description { | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| /* Education Section */ | |
| .education-timeline { | |
| position: relative; | |
| padding: 2rem 0; | |
| } | |
| .education-timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 40px; | |
| top: 0; | |
| bottom: 0; | |
| width: 3px; | |
| background: linear-gradient(to bottom, var(--secondary-color), var(--accent-color)); | |
| border-radius: 2px; | |
| } | |
| .education-item { | |
| position: relative; | |
| margin-bottom: 4rem; | |
| padding-left: 120px; | |
| } | |
| .education-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: 27px; | |
| top: 15px; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background-color: var(--secondary-color); | |
| border: 4px solid var(--bg-primary); | |
| box-shadow: 0 0 0 4px var(--accent-color); | |
| } | |
| /* Certificates Section */ | |
| .slideshow-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: var(--card-shadow); | |
| } | |
| .slides-wrapper { | |
| display: flex; | |
| transition: transform 0.5s ease; | |
| } | |
| .slide { | |
| min-width: 100%; | |
| box-sizing: border-box; | |
| padding: 3rem; | |
| text-align: center; | |
| background-color: var(--bg-primary); | |
| } | |
| .slide img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 10px; | |
| margin-bottom: 2rem; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .slide h3 { | |
| font-size: 1.3rem; | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .slide p { | |
| font-size: 1.1rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .slideshow-nav { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: rgba(255,255,255,0.9); | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: var(--primary-color); | |
| padding: 1rem; | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| box-shadow: var(--card-shadow); | |
| } | |
| .slideshow-nav:hover { | |
| background: white; | |
| transform: translateY(-50%) scale(1.1); | |
| } | |
| .prev { | |
| left: 20px; | |
| } | |
| .next { | |
| right: 20px; | |
| } | |
| .dots-container { | |
| text-align: center; | |
| padding: 2rem 0; | |
| background-color: var(--bg-primary); | |
| } | |
| .dot { | |
| height: 15px; | |
| width: 15px; | |
| background-color: var(--bg-tertiary); | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin: 0 8px; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .dot.active, | |
| .dot:hover { | |
| background-color: var(--secondary-color); | |
| transform: scale(1.2); | |
| } | |
| /* Contact Section */ | |
| .contact-info { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2.5rem; | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| padding: 2rem; | |
| background-color: var(--bg-primary); | |
| border-radius: 15px; | |
| box-shadow: var(--card-shadow); | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--bg-tertiary); | |
| } | |
| .contact-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--card-shadow-hover); | |
| } | |
| .contact-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.5rem; | |
| } | |
| .contact-details h3 { | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| font-size: 1.2rem; | |
| } | |
| .contact-details a { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .contact-details a:hover { | |
| color: var(--secondary-color); | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: linear-gradient(135deg, var(--primary-color), #1e40af); | |
| color: white; | |
| text-align: center; | |
| padding: 3rem 0; | |
| } | |
| .footer p { | |
| margin: 0.5rem 0; | |
| } | |
| .visitor-count { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| margin-top: 1rem; | |
| } | |
| /* Scroll to Top Button */ | |
| .scroll-top { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 60px; | |
| height: 60px; | |
| font-size: 1.3rem; | |
| cursor: pointer; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.3s ease; | |
| z-index: 1000; | |
| box-shadow: var(--card-shadow); | |
| } | |
| .scroll-top.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .scroll-top:hover { | |
| transform: translateY(-3px) scale(1.1); | |
| box-shadow: var(--card-shadow-hover); | |
| } | |
| /* Animations */ | |
| @keyframes slideUp { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes slideRight { | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 768px) { | |
| .mobile-menu-toggle { | |
| display: block; | |
| } | |
| .nav-links { | |
| position: fixed; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| background-color: var(--bg-primary); | |
| box-shadow: var(--card-shadow); | |
| flex-direction: column; | |
| padding: 2rem; | |
| gap: 1rem; | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-links.active { | |
| transform: translateY(0); | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .hero-content { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| gap: 2rem; | |
| } | |
| .hero-text h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero-text .subtitle { | |
| font-size: 1.3rem; | |
| } | |
| .hero-image img { | |
| width: 250px; | |
| height: 300px; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| gap: 2rem; | |
| } | |
| .section-title { | |
| font-size: 2.2rem; | |
| } | |
| .timeline::before, | |
| .education-timeline::before { | |
| left: 20px; | |
| } | |
| .timeline-item, | |
| .education-item { | |
| padding-left: 80px; | |
| } | |
| .timeline-item::before, | |
| .education-item::before { | |
| left: 7px; | |
| } | |
| .timeline-card { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| gap: 1rem; | |
| } | |
| .projects-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .skills-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .contact-info { | |
| grid-template-columns: 1fr; | |
| } | |
| .slideshow-nav { | |
| padding: 0.75rem; | |
| font-size: 1.2rem; | |
| } | |
| .prev { | |
| left: 10px; | |
| } | |
| .next { | |
| right: 10px; | |
| } | |
| .btn { | |
| padding: 0.75rem 1.5rem; | |
| font-size: 0.9rem; | |
| } | |
| .cta-buttons { | |
| justify-content: center; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 0 1rem; | |
| } | |
| .hero-text h1 { | |
| font-size: 2rem; | |
| } | |
| .hero-image img { | |
| width: 200px; | |
| height: 250px; | |
| } | |
| .section { | |
| padding: 4rem 0; | |
| } | |
| .section-title { | |
| font-size: 1.8rem; | |
| margin-bottom: 2rem; | |
| } | |
| .slide { | |
| padding: 2rem 1rem; | |
| } | |
| .skill-category, | |
| .project-card, | |
| .timeline-card, | |
| .contact-item { | |
| padding: 1.5rem; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loading-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: var(--bg-primary); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loading-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 4px solid var(--bg-tertiary); | |
| border-top: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .loading-overlay.fade-out { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading Overlay --> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="loading-spinner"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="navbar" id="navbar"> | |
| <div class="nav-container"> | |
| <a href="#home" class="logo"> | |
| <img src="https://as1.ftcdn.net/v2/jpg/04/57/87/54/1000_F_457875485_yD7CSprjXARDCn0ANwcJS0n6LdR2y25o.jpg" | |
| alt="Logo"> | |
| Harshvardhan Dhane | |
| </a> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#home" class="nav-link">Home</a></li> | |
| <li><a href="#about" class="nav-link">About</a></li> | |
| <li><a href="#skills" class="nav-link">Skills</a></li> | |
| <li><a href="#projects" class="nav-link">Projects</a></li> | |
| <li><a href="#experience" class="nav-link">Experience</a></li> | |
| <li><a href="#certificates" class="nav-link">Certificates</a></li> | |
| <li><a href="#education" class="nav-link">Education</a></li> | |
| <li><a href="#contact" class="nav-link">Contact</a></li> | |
| </ul> | |
| <button class="dark-mode-toggle" id="darkModeToggle"> | |
| <i class="fas fa-moon" id="themeIcon"></i> | |
| <span id="themeText">Dark</span> | |
| </button> | |
| <button class="mobile-menu-toggle" id="mobileMenuToggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero"> | |
| <div class="hero-content"> | |
| <div class="hero-text"> | |
| <h1>Harshvardhan Dhane</h1> | |
| <p class="subtitle">Computer Science & Engineering Student</p> | |
| <p> | |
| Passionate about technology and innovation, I'm a B.Tech student specializing in Computer Science and Engineering. | |
| With expertise in Java, Python, web development, and AI technologies, I'm dedicated to creating impactful solutions | |
| and continuously learning new technologies to contribute to organizational success. | |
| </p> | |
| <div class="cta-buttons"> | |
| <a href="#projects" class="btn btn-primary"> | |
| <i class="fas fa-code"></i> | |
| View My Work | |
| </a> | |
| <a href="#contact" class="btn btn-secondary"> | |
| <i class="fas fa-envelope"></i> | |
| Get In Touch | |
| </a> | |
| <a href="#" class="btn btn-secondary" id="downloadBtn"> | |
| <i class="fas fa-download"></i> | |
| Download Resume | |
| </a> | |
| </div> | |
| </div> | |
| <div class="hero-image"> | |
| <img src="others/Firefly 20240714020902 (1).png" | |
| alt="Harshvardhan Dhane"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="section"> | |
| <div class="container"> | |
| <h2 class="section-title">About Me</h2> | |
| <div class="about-content"> | |
| <div class="about-image"> | |
| <img src="others/Firefly 20240714020902 (1).png" | |
| alt="Harshvardhan Dhane"> | |
| </div> | |
| <div class="about-text"> | |
| <p> | |
| I'm a dedicated Computer Science and Engineering student at MIT Art, Design & Technology University, Pune, | |
| with a passion for developing innovative technological solutions. My journey in technology began with a | |
| Diploma in Computer Engineering, and I've since gained hands-on experience through internships and diverse | |
| projects ranging from AI-based applications to web development and automation systems. | |
| </p> | |
| <p> | |
| I'm particularly interested in artificial intelligence, web development, and automation technologies. | |
| My goal is to leverage my technical skills to create meaningful solutions that make a positive impact | |
| while continuously growing and learning in the ever-evolving field of technology. | |
| </p> | |
| <p> | |
| When I'm not coding, you can find me exploring new technologies, contributing to open-source projects, | |
| or working on innovative solutions that can make a difference in people's lives. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="section"> | |
| <div class="container"> | |
| <h2 class="section-title">Technical Skills</h2> | |
| <div class="skills-grid"> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-code"></i> Programming Languages</h3> | |
| <div class="skill-tags"> | |
| <span class="skill-tag">Java</span> | |
| <span class="skill-tag">Python</span> | |
| <span class="skill-tag">C/C++</span> | |
| <span class="skill-tag">JavaScript</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-globe"></i> Web Development</h3> | |
| <div class="skill-tags"> | |
| <span class="skill-tag">HTML5</span> | |
| <span class="skill-tag">CSS3</span> | |
| <span class="skill-tag">JavaScript</span> | |
| <span class="skill-tag">Responsive Design</span> | |
| <span class="skill-tag">Bootstrap</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-database"></i> Database Management</h3> | |
| <div class="skill-tags"> | |
| <span class="skill-tag">MySQL</span> | |
| <span class="skill-tag">SQLite</span> | |
| <span class="skill-tag">Database Design</span> | |
| <span class="skill-tag">SQL</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-robot"></i> AI & Emerging Tech</h3> | |
| <div class="skill-tags"> | |
| <span class="skill-tag">Machine Learning</span> | |
| <span class="skill-tag">AI APIs</span> | |
| <span class="skill-tag">NLP</span> | |
| <span class="skill-tag">Face Recognition</span> | |
| <span class="skill-tag">RPA</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-tools"></i> Tools & Technologies</h3> | |
| <div class="skill-tags"> | |
| <span class="skill-tag">Git/GitHub</span> | |
| <span class="skill-tag">VS Code</span> | |
| <span class="skill-tag">Android Development</span> | |
| <span class="skill-tag">APIs</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="section"> | |
| <div class="container"> | |
| <h2 class="section-title">Featured Projects</h2> | |
| <div class="projects-grid"> | |
| <a href="https://harshdhane-medibook.hf.space/" | |
| target="_blank" class="project-card"> | |
| <img src="projects/medi.PNG" | |
| alt="Hospital Management System" class="project-image"> | |
| <div class="project-content"> | |
| <h3>AI-Powered Patient Bed Booking & Hospital Resource Management Ecosystem</h3> | |
| <div class="project-date">2025</div> | |
| <p class="project-description"> | |
| A full-stack AI-integrated platform streamlining hospital operations: book beds, appointments, ambulances, nurses, and canteen services with real-time tracking, secure payments, automated billing, and an intelligent chatbot for seamless user assistance. | |
| </p> | |
| <div class="tech-stack"> | |
| <strong>Technologies:</strong> | |
| <span class="skill-tag">Python</span> | |
| <span class="skill-tag">Flask</span> | |
| <span class="skill-tag">SQLAlchemy</span> | |
| <span class="skill-tag">HTML</span> | |
| <span class="skill-tag">CSS</span> | |
| <span class="skill-tag">JavaScript</span> | |
| <span class="skill-tag">Razorpay</span> | |
| <span class="skill-tag">OpenRouter AI</span> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="https://harshdhane-studentattendancesystemusingfacialrecognition.hf.space" | |
| target="_blank" class="project-card"> | |
| <img src="projects/SASPNG.PNG" | |
| alt="AI Attendance System" class="project-image"> | |
| <div class="project-content"> | |
| <h3>AI Based Student Attendance Management System</h3> | |
| <div class="project-date">2025</div> | |
| <p class="project-description"> | |
| An intelligent attendance system using face recognition technology to automate student | |
| attendance tracking with high accuracy and efficiency. | |
| </p> | |
| <div class="tech-stack"> | |
| <strong>Technologies:</strong> | |
| <span class="skill-tag">Python</span> | |
| <span class="skill-tag">HTML</span> | |
| <span class="skill-tag">CSS</span> | |
| <span class="skill-tag">JavaScript</span> | |
| <span class="skill-tag">MySQL</span> | |
| <span class="skill-tag">Face Recognition</span> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="https://harshdhane-trafficmanagement.hf.space" | |
| target="_blank" class="project-card"> | |
| <img src="projects/TMSPNG.PNG" | |
| alt="Traffic Management System" class="project-image"> | |
| <div class="project-content"> | |
| <h3>Autonomous Traffic Management System</h3> | |
| <div class="project-date">2024</div> | |
| <p class="project-description"> | |
| A smart traffic management solution that uses AI and automation to optimize traffic | |
| flow and reduce congestion in traffic areas. | |
| </p> | |
| <div class="tech-stack"> | |
| <strong>Technologies:</strong> | |
| <span class="skill-tag">Python</span> | |
| <span class="skill-tag">HTML</span> | |
| <span class="skill-tag">CSS</span> | |
| <span class="skill-tag">JavaScript</span> | |
| <span class="skill-tag">APIs</span> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="https://harshdhane-shivaaiassistant.hf.space" | |
| target="_blank" class="project-card"> | |
| <img src="projects/ChatnotPNG.PNG" | |
| alt="Chatbot" class="project-image"> | |
| <div class="project-content"> | |
| <h3>Intelligent Chatbot using NLP</h3> | |
| <div class="project-date">2024</div> | |
| <p class="project-description"> | |
| An intelligent chatbot application that uses natural language processing to understand | |
| and respond to user queries effectively with AI-powered conversations. | |
| </p> | |
| <div class="tech-stack"> | |
| <strong>Technologies:</strong> | |
| <span class="skill-tag">Python</span> | |
| <span class="skill-tag">HTML</span> | |
| <span class="skill-tag">CSS</span> | |
| <span class="skill-tag">JavaScript</span> | |
| <span class="skill-tag">AI APIs</span> | |
| <span class="skill-tag">NLP</span> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="https://harshdhane-mpcw.hf.space" | |
| target="_blank" class="project-card"> | |
| <img src="projects/MPCPNG.PNG" | |
| alt="Medicine Price Comparison" class="project-image"> | |
| <div class="project-content"> | |
| <h3>AI-Based Medicine Price Comparison</h3> | |
| <div class="project-date">2024</div> | |
| <p class="project-description"> | |
| A web application that helps users compare medicine prices across different online | |
| pharmacies using AI-powered search and comparison algorithms. | |
| </p> | |
| <div class="tech-stack"> | |
| <strong>Technologies:</strong> | |
| <span class="skill-tag">Python</span> | |
| <span class="skill-tag">HTML</span> | |
| <span class="skill-tag">CSS</span> | |
| <span class="skill-tag">JavaScript</span> | |
| <span class="skill-tag">MySQL</span> | |
| <span class="skill-tag">AI APIs</span> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="https://harshdhane-educationalresourcemanagementsystem.hf.space" | |
| target="_blank" class="project-card"> | |
| <img src="projects/ERMSPNG.PNG" | |
| alt="Educational Resource Management" class="project-image"> | |
| <div class="project-content"> | |
| <h3>Educational Resource Management System</h3> | |
| <div class="project-date">2024</div> | |
| <p class="project-description"> | |
| A comprehensive system for managing educational resources, providing students and | |
| educators with easy access to learning materials and collaborative tools. | |
| </p> | |
| <div class="tech-stack"> | |
| <strong>Technologies:</strong> | |
| <span class="skill-tag">HTML</span> | |
| <span class="skill-tag">CSS</span> | |
| <span class="skill-tag">JavaScript</span> | |
| <span class="skill-tag">MySQL</span> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- | |
| <div class="project-card"> | |
| <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=200&fit=crop" | |
| alt="E-Commerce Platform" class="project-image"> | |
| <div class="project-content"> | |
| <h3>Full-Stack E-Commerce Platform</h3> | |
| <div class="project-date">2023</div> | |
| <p class="project-description"> | |
| A complete e-commerce solution with user authentication, product management, | |
| shopping cart functionality, and secure payment integration. | |
| </p> | |
| <div class="tech-stack"> | |
| <strong>Technologies:</strong> | |
| <span class="skill-tag">Java</span> | |
| <span class="skill-tag">Spring Boot</span> | |
| <span class="skill-tag">MySQL</span> | |
| <span class="skill-tag">HTML/CSS</span> | |
| <span class="skill-tag">JavaScript</span> | |
| </div> | |
| </div> | |
| </div> | |
| --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="section"> | |
| <div class="container"> | |
| <h2 class="section-title">Work Experience</h2> | |
| <div class="timeline"> | |
| <div class="timeline-item"> | |
| <div class="timeline-card"> | |
| <img src="logos/Acmegrade.png" | |
| alt="Acmegrade Logo" class="company-logo"> | |
| <div class="timeline-content"> | |
| <h3>Software Development Intern - Acmegrade</h3> | |
| <div class="timeline-date">September 2024 - October 2024</div> | |
| <p class="timeline-description"> | |
| Worked on advanced projects involving automation and AI technologies, contributing to | |
| innovative solutions and gaining valuable industry experience. Developed and implemented | |
| automated testing frameworks and contributed to machine learning model optimization. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-card"> | |
| <img src="logos/proazure_software_solutions_pvt_ltd_logo.jfif" | |
| alt="ProAzure Logo" class="company-logo"> | |
| <div class="timeline-content"> | |
| <h3>Software Development Intern - ProAzure Software Solutions</h3> | |
| <div class="timeline-date">June 2023 - July 2023</div> | |
| <p class="timeline-description"> | |
| Gained hands-on experience in software development, working with modern technologies | |
| and contributing to real-world projects in a professional environment. Participated | |
| in full-stack development and learned industry best practices. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Certificates Section --> | |
| <section id="certificates" class="section"> | |
| <div class="container"> | |
| <h2 class="section-title">Certifications & Achievements</h2> | |
| <div class="slideshow-container"> | |
| <div class="slides-wrapper" id="slidesWrapper"> | |
| <div class="slide"> | |
| <img src="certificates/HARSHVARDHAN-DHANE-Participant-Certificate_page-0001.jpg" | |
| alt="Java Certification"> | |
| <h3>Certificate of Completion for Java Training</h3> | |
| <p>Awarded by IIT Bombay's Spoken Tutorial Project in partnership with MIT Art Design and Technology University, Pune. Achieved a score of 85% in the remote proctored exam and earned 4 credits on November 8, 2024.</p> | |
| </div> | |
| <div class="slide"> | |
| <img src="certificates/Certificates PROJECT COMPETITION_removed_pages-to-jpg-0001.jpg" | |
| alt="Project Certification"> | |
| <h3>Certificate of Participation in Regional Project Competition</h3> | |
| <p>Awarded by Government Polytechnic, Karad (Maharashtra State Technical Education) for presenting the project "Home Automation" at the Pune Region Innovation Competition. Issued on January 7, 2022.</p> | |
| </div> | |
| <div class="slide"> | |
| <img src="certificates/Coursera C0JUZVJ5O25Y_page-0001.jpg" | |
| alt="Web Development Certification"> | |
| <h3>Certificate in Introduction to Web Development</h3> | |
| <p>Issued by Microsoft via Coursera upon completing their authorized online course. Covers core web development concepts, with identity-verified participation confirmed on March 7, 2025.</p> | |
| </div> | |
| <div class="slide"> | |
| <img src="certificates/Harshvardhan Dhane 06 April 2025_page-0001.jpg" | |
| alt="Webinar Certification"> | |
| <h3>Certificate of Participation in Manufacturing & Engineering Webinar</h3> | |
| <p>Awarded by NAMTECH (an ArcelorMittal Nippon Steel India initiative) for attending "The Untold Opportunity in Manufacturing, Engineering & Technology" webinar. Issued on April 6, 2025.</p> | |
| </div> | |
| <div class="slide"> | |
| <img src="certificates/Coursera 97P3AUZB0WP6_page-0001.jpg" | |
| alt="Machine Learning Certification"> | |
| <h3>Certificate in Programming with Java</h3> | |
| <p>Issued by Amazon via Coursera upon completing their industry-relevant Java course. Identity-verified participation confirmed on February 25, 2025.</p> | |
| </div> | |
| <div class="slide"> | |
| <img src="certificates/AI Coursera YYS0NT81UA8A_page-0001 (1).jpg" | |
| alt="Data Science Certification"> | |
| <h3>Certificate in Introduction to Generative AI</h3> | |
| <p>Issued by Google Cloud via Coursera, validating completion of their foundational course in generative AI concepts and applications. Identity-verified participation confirmed on March 3, 2025.</p> | |
| </div> | |
| </div> | |
| <button class="slideshow-nav prev" id="prevBtn">❮</button> | |
| <button class="slideshow-nav next" id="nextBtn">❯</button> | |
| <div class="dots-container" id="dotsContainer"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="section"> | |
| <div class="container"> | |
| <h2 class="section-title">Education</h2> | |
| <div class="education-timeline"> | |
| <div class="education-item"> | |
| <div class="timeline-card"> | |
| <img src="logos/mitlogo.png" | |
| alt="MIT ADT University Logo" class="company-logo"> | |
| <div class="timeline-content"> | |
| <h3>B.Tech in Computer Science and Engineering</h3> | |
| <div class="timeline-date">2024 - 2027 (Current)</div> | |
| <p class="timeline-description"> | |
| <strong>MIT Art, Design & Technology University, Pune</strong><br> | |
| Currently pursuing Bachelor of Technology with specialization in Computer Science and Engineering, | |
| focusing on advanced programming, software development, artificial intelligence, and emerging technologies. | |
| Maintaining excellent academic performance with hands-on project experience. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="education-item"> | |
| <div class="timeline-card"> | |
| <img src="logos/msbte.png" | |
| alt="MSBTE Logo" class="company-logo"> | |
| <div class="timeline-content"> | |
| <h3>Diploma in Computer Engineering</h3> | |
| <div class="timeline-date">Completed 2024</div> | |
| <p class="timeline-description"> | |
| <strong>MSBTE Board</strong><br> | |
| Successfully completed diploma with comprehensive knowledge in computer engineering fundamentals, | |
| programming languages, database management, and software development practices. | |
| Achieved distinction with strong focus on practical applications. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="education-item"> | |
| <div class="timeline-card"> | |
| <img src="logos/MSBSHSE_logo.png" | |
| alt="SSC Logo" class="company-logo"> | |
| <div class="timeline-content"> | |
| <h3>Secondary School Certificate (SSC)</h3> | |
| <div class="timeline-date">Completed 2021</div> | |
| <p class="timeline-description"> | |
| <strong>SSC Board</strong><br> | |
| Successfully completed secondary education with strong foundation in mathematics, | |
| sciences, and computer applications. Achieved excellent grades with particular | |
| strength in STEM subjects. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="section"> | |
| <div class="container"> | |
| <h2 class="section-title">Get In Touch</h2> | |
| <div class="contact-info"> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h3>Email</h3> | |
| <a href="mailto:harshvardhandhane25@gmail.com">harshvardhandhane25@gmail.com</a> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h3>Phone</h3> | |
| <a href="tel:+918459201292">+91 8459201292</a> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h3>Location</h3> | |
| <p>Sambhaji Nagar, Satara<br>Maharashtra - 415004, India</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h3>Languages</h3> | |
| <p>Hindi, English, Marathi</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fab fa-linkedin"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h3>LinkedIn</h3> | |
| <a href="https://www.linkedin.com/in/harshvardhandhane25/" target="_blank">Connect with me</a> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fab fa-github"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h3>GitHub</h3> | |
| <a href="https://github.com/harshdhane25" target="_blank">View my repositories</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <p>© 2025 Harshvardhan Dhane. All rights reserved.</p> | |
| <p>Built with passion for technology and innovation ❤️</p> | |
| <div class="visitor-counter"> | |
| <i class="fas fa-users"></i>Visitors: | |
| <span id="footerVisitorCount">Loading...</span> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scroll to Top Button --> | |
| <button class="scroll-top" id="scrollTopBtn"> | |
| <i class="fas fa-arrow-up"></i> | |
| <br> | |
| <div class="visitor-count-container"> | |
| <i class="fas fa-users"></i> | |
| <span id="navbarVisitorCount">Loading...</span> | |
| </div> | |
| </button> | |
| <script> | |
| // Theme Management | |
| class ThemeManager { | |
| constructor() { | |
| this.theme = localStorage.getItem('theme') || 'light'; | |
| this.themeToggle = document.getElementById('darkModeToggle'); | |
| this.themeIcon = document.getElementById('themeIcon'); | |
| this.themeText = document.getElementById('themeText'); | |
| this.init(); | |
| } | |
| init() { | |
| this.applyTheme(); | |
| this.themeToggle.addEventListener('click', () => this.toggleTheme()); | |
| } | |
| applyTheme() { | |
| document.documentElement.setAttribute('data-theme', this.theme); | |
| if (this.theme === 'dark') { | |
| this.themeIcon.className = 'fas fa-sun'; | |
| this.themeText.textContent = 'Light'; | |
| } else { | |
| this.themeIcon.className = 'fas fa-moon'; | |
| this.themeText.textContent = 'Dark'; | |
| } | |
| } | |
| toggleTheme() { | |
| this.theme = this.theme === 'light' ? 'dark' : 'light'; | |
| localStorage.setItem('theme', this.theme); | |
| this.applyTheme(); | |
| } | |
| } | |
| // Navigation Manager | |
| class NavigationManager { | |
| constructor() { | |
| this.navbar = document.getElementById('navbar'); | |
| this.navLinks = document.querySelectorAll('.nav-link'); | |
| this.mobileToggle = document.getElementById('mobileMenuToggle'); | |
| this.navLinksContainer = document.getElementById('navLinks'); | |
| this.sections = document.querySelectorAll('section'); | |
| this.init(); | |
| } | |
| init() { | |
| this.setupScrollEffect(); | |
| this.setupActiveNavigation(); | |
| this.setupMobileMenu(); | |
| this.setupSmoothScrolling(); | |
| } | |
| setupScrollEffect() { | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| this.navbar.classList.add('scrolled'); | |
| } else { | |
| this.navbar.classList.remove('scrolled'); | |
| } | |
| }); | |
| } | |
| setupActiveNavigation() { | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const id = entry.target.getAttribute('id'); | |
| this.navLinks.forEach(link => { | |
| link.classList.remove('active'); | |
| if (link.getAttribute('href') === `#${id}`) { | |
| link.classList.add('active'); | |
| } | |
| }); | |
| } | |
| }); | |
| }, { threshold: 0.3 }); | |
| this.sections.forEach(section => observer.observe(section)); | |
| } | |
| setupMobileMenu() { | |
| this.mobileToggle.addEventListener('click', () => { | |
| this.navLinksContainer.classList.toggle('active'); | |
| const icon = this.mobileToggle.querySelector('i'); | |
| if (this.navLinksContainer.classList.contains('active')) { | |
| icon.className = 'fas fa-times'; | |
| } else { | |
| icon.className = 'fas fa-bars'; | |
| } | |
| }); | |
| this.navLinks.forEach(link => { | |
| link.addEventListener('click', () => { | |
| this.navLinksContainer.classList.remove('active'); | |
| this.mobileToggle.querySelector('i').className = 'fas fa-bars'; | |
| }); | |
| }); | |
| } | |
| setupSmoothScrolling() { | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const target = document.querySelector(anchor.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| } | |
| } | |
| // Animation Manager | |
| class AnimationManager { | |
| constructor() { | |
| this.sections = document.querySelectorAll('.section'); | |
| this.init(); | |
| } | |
| init() { | |
| this.setupScrollAnimations(); | |
| this.setupHoverEffects(); | |
| } | |
| setupScrollAnimations() { | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| this.sections.forEach(section => observer.observe(section)); | |
| } | |
| setupHoverEffects() { | |
| const cards = document.querySelectorAll('.skill-category, .project-card, .timeline-card, .contact-item'); | |
| cards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transform = 'translateY(-8px)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| const skillTags = document.querySelectorAll('.skill-tag'); | |
| skillTags.forEach(tag => { | |
| tag.addEventListener('mouseenter', () => { | |
| tag.style.transform = 'scale(1.05) rotate(2deg)'; | |
| }); | |
| tag.addEventListener('mouseleave', () => { | |
| tag.style.transform = 'scale(1) rotate(0deg)'; | |
| }); | |
| }); | |
| } | |
| } | |
| // Slideshow Manager | |
| class SlideshowManager { | |
| constructor() { | |
| this.slidesWrapper = document.getElementById('slidesWrapper'); | |
| this.slides = document.querySelectorAll('.slide'); | |
| this.prevBtn = document.getElementById('prevBtn'); | |
| this.nextBtn = document.getElementById('nextBtn'); | |
| this.dotsContainer = document.getElementById('dotsContainer'); | |
| this.currentSlide = 0; | |
| this.totalSlides = this.slides.length; | |
| this.init(); | |
| } | |
| init() { | |
| this.createDots(); | |
| this.setupEventListeners(); | |
| this.showSlide(0); | |
| this.startAutoSlide(); | |
| } | |
| createDots() { | |
| for (let i = 0; i < this.totalSlides; i++) { | |
| const dot = document.createElement('span'); | |
| dot.className = 'dot'; | |
| dot.addEventListener('click', () => this.showSlide(i)); | |
| this.dotsContainer.appendChild(dot); | |
| } | |
| } | |
| setupEventListeners() { | |
| this.prevBtn.addEventListener('click', () => this.previousSlide()); | |
| this.nextBtn.addEventListener('click', () => this.nextSlide()); | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowLeft') this.previousSlide(); | |
| if (e.key === 'ArrowRight') this.nextSlide(); | |
| }); | |
| } | |
| showSlide(index) { | |
| if (index >= this.totalSlides) this.currentSlide = 0; | |
| else if (index < 0) this.currentSlide = this.totalSlides - 1; | |
| else this.currentSlide = index; | |
| const offset = -this.currentSlide * 100; | |
| this.slidesWrapper.style.transform = `translateX(${offset}%)`; | |
| document.querySelectorAll('.dot').forEach((dot, i) => { | |
| dot.classList.toggle('active', i === this.currentSlide); | |
| }); | |
| } | |
| nextSlide() { | |
| this.showSlide(this.currentSlide + 1); | |
| } | |
| previousSlide() { | |
| this.showSlide(this.currentSlide - 1); | |
| } | |
| startAutoSlide() { | |
| setInterval(() => { | |
| this.nextSlide(); | |
| }, 4000); | |
| } | |
| } | |
| // Scroll Manager | |
| class ScrollManager { | |
| constructor() { | |
| this.scrollTopBtn = document.getElementById('scrollTopBtn'); | |
| this.init(); | |
| } | |
| init() { | |
| this.setupScrollToTop(); | |
| this.setupParallaxEffect(); | |
| } | |
| setupScrollToTop() { | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| this.scrollTopBtn.classList.add('visible'); | |
| } else { | |
| this.scrollTopBtn.classList.remove('visible'); | |
| } | |
| }); | |
| this.scrollTopBtn.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| } | |
| setupParallaxEffect() { | |
| window.addEventListener('scroll', () => { | |
| const hero = document.querySelector('.hero'); | |
| const scrolled = window.pageYOffset; | |
| const rate = scrolled * -0.3; | |
| if (hero && scrolled < window.innerHeight) { | |
| hero.style.transform = `translateY(${rate}px)`; | |
| } | |
| }); | |
| } | |
| } | |
| // Typing Effect Manager | |
| class TypingEffectManager { | |
| constructor() { | |
| this.subtitle = document.querySelector('.hero .subtitle'); | |
| this.init(); | |
| } | |
| init() { | |
| if (this.subtitle) { | |
| const originalText = this.subtitle.textContent; | |
| this.typeWriter(this.subtitle, originalText, 80); | |
| } | |
| } | |
| typeWriter(element, text, speed = 100) { | |
| let i = 0; | |
| element.textContent = ''; | |
| const type = () => { | |
| if (i < text.length) { | |
| element.textContent += text.charAt(i); | |
| i++; | |
| setTimeout(type, speed); | |
| } | |
| }; | |
| setTimeout(type, 1500); | |
| } | |
| } | |
| // Visitor Counter Manager | |
| class VisitorCounterManager { | |
| constructor() { | |
| this.navbarCounter = document.getElementById('navbarVisitorCount'); | |
| this.footerCounter = document.getElementById('footerVisitorCount'); | |
| this.init(); | |
| } | |
| init() { | |
| this.fetchVisitorCount(); | |
| } | |
| async fetchVisitorCount() { | |
| try { | |
| const response = await fetch('/visitor_count'); | |
| const count = await response.text(); | |
| this.navbarCounter.textContent = count; | |
| this.footerCounter.textContent = count; | |
| } catch (error) { | |
| console.error('Error fetching visitor count:', error); | |
| this.navbarCounter.textContent = '0'; | |
| this.footerCounter.textContent = '0'; | |
| } | |
| } | |
| } | |
| // Loading Manager | |
| class LoadingManager { | |
| constructor() { | |
| this.loadingOverlay = document.getElementById('loadingOverlay'); | |
| this.init(); | |
| } | |
| init() { | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| this.loadingOverlay.classList.add('fade-out'); | |
| setTimeout(() => { | |
| this.loadingOverlay.style.display = 'none'; | |
| }, 500); | |
| }, 1000); | |
| }); | |
| } | |
| } | |
| // Download Manager | |
| class DownloadManager { | |
| constructor() { | |
| this.downloadBtn = document.getElementById('downloadBtn'); | |
| this.init(); | |
| } | |
| init() { | |
| this.downloadBtn.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const link = document.createElement('a'); | |
| link.href = 'others/Harshvardhan_Resume'; // Updated link | |
| link.download = 'Harshvardhan_Dhane_Resume.pdf'; // Custom file name | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| }); | |
| } | |
| } | |
| // Performance Optimization | |
| class PerformanceOptimizer { | |
| constructor() { | |
| this.init(); | |
| } | |
| init() { | |
| this.lazyLoadImages(); | |
| this.debounceScrollEvents(); | |
| } | |
| lazyLoadImages() { | |
| const images = document.querySelectorAll('img[data-src]'); | |
| const imageObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const img = entry.target; | |
| img.src = img.dataset.src; | |
| img.removeAttribute('data-src'); | |
| imageObserver.unobserve(img); | |
| } | |
| }); | |
| }); | |
| images.forEach(img => imageObserver.observe(img)); | |
| } | |
| debounce(func, wait) { | |
| let timeout; | |
| return function executedFunction(...args) { | |
| const later = () => { | |
| clearTimeout(timeout); | |
| func(...args); | |
| }; | |
| clearTimeout(timeout); | |
| timeout = setTimeout(later, wait); | |
| }; | |
| } | |
| debounceScrollEvents() { | |
| const debouncedScroll = this.debounce(() => { | |
| // Scroll-dependent operations | |
| }, 16); | |
| window.addEventListener('scroll', debouncedScroll); | |
| } | |
| } | |
| // Error Handler | |
| class ErrorHandler { | |
| constructor() { | |
| this.init(); | |
| } | |
| init() { | |
| window.addEventListener('error', (e) => { | |
| console.error('Global error:', e.error); | |
| }); | |
| window.addEventListener('unhandledrejection', (e) => { | |
| console.error('Unhandled promise rejection:', e.reason); | |
| }); | |
| } | |
| } | |
| // Main Application Class | |
| class PortfolioApp { | |
| constructor() { | |
| this.managers = {}; | |
| this.init(); | |
| } | |
| init() { | |
| // Wait for DOM to be fully loaded | |
| if (document.readyState === 'loading') { | |
| document.addEventListener('DOMContentLoaded', () => this.initializeManagers()); | |
| } else { | |
| this.initializeManagers(); | |
| } | |
| } | |
| initializeManagers() { | |
| try { | |
| this.managers.loading = new LoadingManager(); | |
| this.managers.theme = new ThemeManager(); | |
| this.managers.navigation = new NavigationManager(); | |
| this.managers.animation = new AnimationManager(); | |
| this.managers.slideshow = new SlideshowManager(); | |
| this.managers.scroll = new ScrollManager(); | |
| this.managers.typing = new TypingEffectManager(); | |
| this.managers.visitor = new VisitorCounterManager(); | |
| this.managers.download = new DownloadManager(); | |
| this.managers.performance = new PerformanceOptimizer(); | |
| this.managers.error = new ErrorHandler(); | |
| console.log('Portfolio application initialized successfully!'); | |
| } catch (error) { | |
| console.error('Error initializing portfolio application:', error); | |
| } | |
| } | |
| } | |
| // Initialize the application | |
| const portfolioApp = new PortfolioApp(); | |
| // Additional utility functions | |
| const utils = { | |
| // Format date | |
| formatDate: (date) => { | |
| return new Intl.DateTimeFormat('en-US', { | |
| year: 'numeric', | |
| month: 'long', | |
| day: 'numeric' | |
| }).format(new Date(date)); | |
| }, | |
| // Animate counter | |
| animateCounter: (element, target, duration = 2000) => { | |
| let start = 0; | |
| const increment = target / (duration / 16); | |
| const timer = setInterval(() => { | |
| start += increment; | |
| element.textContent = Math.floor(start); | |
| if (start >= target) { | |
| element.textContent = target; | |
| clearInterval(timer); | |
| } | |
| }, 16); | |
| }, | |
| // Generate random color | |
| getRandomColor: () => { | |
| const colors = [ | |
| '#3b82f6', '#ef4444', '#10b981', '#f59e0b', | |
| '#8b5cf6', '#06b6d4', '#84cc16', '#f97316' | |
| ]; | |
| return colors[Math.floor(Math.random() * colors.length)]; | |
| }, | |
| // Check if element is in viewport | |
| isInViewport: (element) => { | |
| const rect = element.getBoundingClientRect(); | |
| return ( | |
| rect.top >= 0 && | |
| rect.left >= 0 && | |
| rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && | |
| rect.right <= (window.innerWidth || document.documentElement.clientWidth) | |
| ); | |
| } | |
| }; | |
| // Add some interactive features | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Add click effect to buttons | |
| const buttons = document.querySelectorAll('.btn, .contact-item, .project-card'); | |
| buttons.forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| const ripple = document.createElement('span'); | |
| const rect = this.getBoundingClientRect(); | |
| const size = Math.max(rect.width, rect.height); | |
| const x = e.clientX - rect.left - size / 2; | |
| const y = e.clientY - rect.top - size / 2; | |
| ripple.style.cssText = ` | |
| position: absolute; | |
| width: ${size}px; | |
| height: ${size}px; | |
| left: ${x}px; | |
| top: ${y}px; | |
| background: rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| transform: scale(0); | |
| animation: ripple 0.6s linear; | |
| pointer-events: none; | |
| `; | |
| this.style.position = 'relative'; | |
| this.style.overflow = 'hidden'; | |
| this.appendChild(ripple); | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 600); | |
| }); | |
| }); | |
| // Add ripple animation | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes ripple { | |
| to { | |
| transform: scale(4); | |
| opacity: 0; | |
| } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| }); | |
| // Service Worker Registration (for PWA capabilities) | |
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', () => { | |
| navigator.serviceWorker.register('/sw.js') | |
| .then(registration => { | |
| console.log('SW registered: ', registration); | |
| }) | |
| .catch(registrationError => { | |
| console.log('SW registration failed: ', registrationError); | |
| }); | |
| }); | |
| } | |
| // Add manifest for PWA | |
| const manifest = { | |
| name: "Harshvardhan Dhane - Portfolio", | |
| short_name: "HD Portfolio", | |
| description: "Personal portfolio website of Harshvardhan Dhane", | |
| start_url: "/", | |
| display: "standalone", | |
| background_color: "#ffffff", | |
| theme_color: "#2563eb", | |
| icons: [ | |
| { | |
| src: "1000_F_457875485_yD7CSprjXARDCn0ANwcJS0n6LdR2y25o.jpg", | |
| sizes: "192x192", | |
| type: "image/png" | |
| } | |
| ] | |
| }; | |
| // Create and add manifest | |
| const manifestBlob = new Blob([JSON.stringify(manifest)], {type: 'application/json'}); | |
| const manifestURL = URL.createObjectURL(manifestBlob); | |
| const manifestLink = document.createElement('link'); | |
| manifestLink.rel = 'manifest'; | |
| manifestLink.href = manifestURL; | |
| document.head.appendChild(manifestLink); | |
| </script> | |
| </body> | |
| </html> |