Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>About & Skills - Pranit Chilbule</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css"> | |
| <style> | |
| :root { | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #1a1a2e; | |
| --bg-card: #16213e; | |
| --text-primary: #e6e6fa; | |
| --text-secondary: rgba(230, 230, 250, 0.8); | |
| --accent-blue: #00d4ff; | |
| --accent-purple: #7c3aed; | |
| --accent-green: #00ff88; | |
| --accent-pink: #ff6b9d; | |
| --accent-orange: #ff9500; | |
| --header-bg: rgba(10, 10, 15, 0.95); | |
| --border-color: #2a2a3e; | |
| --shadow-glow: rgba(0, 212, 255, 0.3); | |
| --gradient-primary: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); | |
| --gradient-secondary: linear-gradient(135deg, var(--accent-green), var(--accent-blue)); | |
| --gradient-tertiary: linear-gradient(135deg, var(--accent-pink), var(--accent-orange)); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* Animated Background */ | |
| #three-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| /* Enhanced Header */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 1.5rem 2rem; | |
| background: var(--header-bg); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| z-index: 1000; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .logo::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 3px; | |
| background: var(--gradient-primary); | |
| transition: width 0.3s ease; | |
| border-radius: 2px; | |
| } | |
| .logo:hover::after { | |
| width: 100%; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2.5rem; | |
| } | |
| .nav-links a { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| font-size: 1.1rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| padding: 0.5rem 1rem; | |
| border-radius: 25px; | |
| } | |
| .nav-links a:hover, | |
| .nav-links a.active { | |
| color: var(--accent-blue); | |
| background: rgba(0, 212, 255, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .nav-links a::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--gradient-primary); | |
| border-radius: 25px; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: -1; | |
| } | |
| .nav-links a:hover::before { | |
| opacity: 0.1; | |
| } | |
| /* Main Content */ | |
| main { | |
| margin-top: 100px; | |
| padding: 2rem 0; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| /* Enhanced About Section */ | |
| #about { | |
| padding: 5rem 2rem; | |
| margin-bottom: 5rem; | |
| background: rgba(22, 33, 62, 0.4); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| border-radius: 30px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #about::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--gradient-primary); | |
| opacity: 0.05; | |
| border-radius: 30px; | |
| } | |
| .about-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 2fr; | |
| gap: 5rem; | |
| align-items: center; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .profile-section { | |
| text-align: center; | |
| position: relative; | |
| } | |
| .profile-image { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .profile-image::before { | |
| content: ''; | |
| position: absolute; | |
| top: -20px; | |
| left: -20px; | |
| right: -20px; | |
| bottom: -20px; | |
| background: var(--gradient-primary); | |
| border-radius: 50%; | |
| animation: rotate 10s linear infinite; | |
| z-index: -1; | |
| } | |
| .profile-image img { | |
| width: 250px; | |
| height: 250px; | |
| border-radius: 50%; | |
| border: 6px solid var(--bg-primary); | |
| box-shadow: 0 20px 60px var(--shadow-glow); | |
| object-fit: cover; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .profile-image:hover img { | |
| transform: scale(1.05); | |
| box-shadow: 0 30px 80px var(--shadow-glow); | |
| } | |
| .status-badge { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--gradient-secondary); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3); | |
| animation: pulse 2s infinite; | |
| } | |
| .about-content h2 { | |
| font-size: 3.5rem; | |
| margin-bottom: 2rem; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| } | |
| .about-content p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| line-height: 1.8; | |
| } | |
| .about-highlights { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .highlight-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 2rem; | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| text-align: center; | |
| } | |
| .highlight-card:hover { | |
| transform: translateY(-10px); | |
| background: rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2); | |
| } | |
| .highlight-card i { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .highlight-card h4 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--accent-blue); | |
| } | |
| .highlight-card p { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| margin: 0; | |
| } | |
| /* Enhanced Education Timeline */ | |
| .timeline-section { | |
| padding: 5rem 2rem; | |
| margin-bottom: 5rem; | |
| background: rgba(22, 33, 62, 0.4); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| border-radius: 30px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .timeline-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--gradient-secondary); | |
| opacity: 0.05; | |
| border-radius: 30px; | |
| } | |
| .timeline-section h2 { | |
| text-align: center; | |
| font-size: 3rem; | |
| margin-bottom: 4rem; | |
| background: var(--gradient-secondary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| font-weight: 700; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .timeline { | |
| position: relative; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| bottom: 0; | |
| width: 4px; | |
| background: var(--gradient-primary); | |
| transform: translateX(-50%); | |
| border-radius: 2px; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| margin-bottom: 4rem; | |
| width: 50%; | |
| } | |
| .timeline-item:nth-child(odd) { | |
| left: 0; | |
| padding-right: 3rem; | |
| } | |
| .timeline-item:nth-child(even) { | |
| left: 50%; | |
| padding-left: 3rem; | |
| } | |
| .timeline-date { | |
| position: absolute; | |
| top: 50%; | |
| width: 80px; | |
| height: 80px; | |
| background: var(--gradient-primary); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| font-size: 1rem; | |
| transform: translateY(-50%); | |
| box-shadow: 0 0 0 6px var(--bg-primary), 0 20px 40px rgba(0, 212, 255, 0.3); | |
| z-index: 2; | |
| } | |
| .timeline-item:nth-child(odd) .timeline-date { | |
| right: -40px; | |
| } | |
| .timeline-item:nth-child(even) .timeline-date { | |
| left: -40px; | |
| } | |
| .timeline-content { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 2.5rem; | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .timeline-content::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--gradient-primary); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .timeline-content:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 30px 60px rgba(0, 212, 255, 0.2); | |
| } | |
| .timeline-content:hover::before { | |
| opacity: 0.05; | |
| } | |
| .timeline-content h3 { | |
| color: var(--accent-blue); | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .timeline-content h3 i { | |
| font-size: 1.8rem; | |
| } | |
| .timeline-content .degree { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| font-size: 1.1rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .timeline-content .duration { | |
| color: var(--text-secondary); | |
| font-size: 1rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Enhanced Skills Section */ | |
| #skills { | |
| padding: 5rem 2rem; | |
| background: rgba(22, 33, 62, 0.4); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| border-radius: 30px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #skills::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--gradient-tertiary); | |
| opacity: 0.05; | |
| border-radius: 30px; | |
| } | |
| .skills-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .skills-container h2 { | |
| text-align: center; | |
| font-size: 3rem; | |
| margin-bottom: 4rem; | |
| background: var(--gradient-tertiary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| font-weight: 700; | |
| } | |
| .skills-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 2.5rem; | |
| margin-bottom: 5rem; | |
| } | |
| .skill-category { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| padding: 2.5rem; | |
| border-radius: 25px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .skill-category::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--gradient-primary); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .skill-category:hover { | |
| transform: translateY(-15px); | |
| box-shadow: 0 30px 60px rgba(124, 58, 237, 0.3); | |
| } | |
| .skill-category:hover::before { | |
| opacity: 0.1; | |
| } | |
| .skill-category h3 { | |
| color: var(--accent-blue); | |
| font-size: 1.5rem; | |
| margin-bottom: 2rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .skill-category h3 i { | |
| font-size: 2rem; | |
| width: 40px; | |
| text-align: center; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .skill-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .skill-tag { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-primary); | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 25px; | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .skill-tag::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--gradient-primary); | |
| transition: left 0.5s ease; | |
| z-index: -1; | |
| } | |
| .skill-tag:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 212, 255, 0.3); | |
| color: white; | |
| } | |
| .skill-tag:hover::before { | |
| left: 0; | |
| } | |
| .skill-tag i { | |
| font-size: 1.2rem; | |
| } | |
| /* Programming Languages Icons */ | |
| .skill-tag[data-skill="java"] i::before { content: '\f4e4'; color: #f89820; } | |
| .skill-tag[data-skill="python"] i::before { content: '\f3e2'; color: #3776ab; } | |
| .skill-tag[data-skill="javascript"] i::before { content: '\f3b8'; color: #f7df1e; } | |
| .skill-tag[data-skill="html"] i::before { content: '\f13b'; color: #e34f26; } | |
| .skill-tag[data-skill="css"] i::before { content: '\f13c'; color: #1572b6; } | |
| .skill-tag[data-skill="c"] i::before { content: '\f671'; color: #a8b9cc; } | |
| /* Enhanced Skill Meters */ | |
| .skill-meters { | |
| margin-top: 4rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| padding: 3rem; | |
| border-radius: 25px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .skill-meters h3 { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| color: var(--accent-green); | |
| font-size: 2rem; | |
| font-weight: 600; | |
| } | |
| .skill-meter { | |
| margin-bottom: 2.5rem; | |
| position: relative; | |
| } | |
| .skill-meter-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .skill-name { | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .skill-name i { | |
| font-size: 1.5rem; | |
| width: 30px; | |
| text-align: center; | |
| } | |
| .skill-percentage { | |
| color: var(--accent-blue); | |
| font-weight: 700; | |
| font-size: 1.1rem; | |
| } | |
| .skill-bar { | |
| height: 12px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| position: relative; | |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .skill-progress { | |
| height: 100%; | |
| background: var(--gradient-primary); | |
| border-radius: 10px; | |
| width: 0; | |
| transition: width 2s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .skill-progress::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); | |
| animation: shimmer 2s infinite; | |
| } | |
| /* Floating Icons Animation */ | |
| .floating-icons { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| pointer-events: none; | |
| overflow: hidden; | |
| } | |
| .floating-icon { | |
| position: absolute; | |
| font-size: 2rem; | |
| opacity: 0.1; | |
| animation: float 20s infinite linear; | |
| } | |
| /* Footer Enhancement */ | |
| footer { | |
| margin-top: 5rem; | |
| padding: 3rem 2rem; | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--border-color); | |
| position: relative; | |
| } | |
| .footer-content { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| gap: 2rem; | |
| } | |
| .social-link { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 50px; | |
| height: 50px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 15px; | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .social-link:hover { | |
| transform: translateY(-5px); | |
| background: var(--gradient-primary); | |
| box-shadow: 0 15px 30px rgba(0, 212, 255, 0.3); | |
| } | |
| .social-icon { | |
| width: 24px; | |
| height: 24px; | |
| fill: var(--text-secondary); | |
| transition: fill 0.3s ease; | |
| } | |
| .social-link:hover .social-icon { | |
| fill: white; | |
| } | |
| /* Animations */ | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(100vh) rotate(0deg); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 0.1; | |
| } | |
| 90% { | |
| opacity: 0.1; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Mobile Menu */ | |
| .menu-toggle { | |
| display: none; | |
| flex-direction: column; | |
| cursor: pointer; | |
| gap: 4px; | |
| } | |
| .menu-toggle span { | |
| width: 25px; | |
| height: 3px; | |
| background: var(--text-primary); | |
| transition: all 0.3s ease; | |
| border-radius: 2px; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| header { | |
| padding: 1rem; | |
| } | |
| .nav-links { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| background: var(--header-bg); | |
| backdrop-filter: blur(20px); | |
| flex-direction: column; | |
| padding: 2rem 0; | |
| gap: 1rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .nav-links.active { | |
| display: flex; | |
| } | |
| .menu-toggle { | |
| display: flex; | |
| } | |
| .about-grid { | |
| grid-template-columns: 1fr; | |
| gap: 3rem; | |
| text-align: center; | |
| } | |
| .about-content h2 { | |
| font-size: 2.5rem; | |
| } | |
| .timeline::before { | |
| left: 30px; | |
| } | |
| .timeline-item { | |
| width: 100%; | |
| left: 0 ; | |
| padding-left: 5rem ; | |
| padding-right: 0 ; | |
| } | |
| .timeline-date { | |
| left: 0 ; | |
| right: auto ; | |
| } | |
| .skills-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .timeline-section h2, | |
| .skills-container h2 { | |
| font-size: 2.5rem; | |
| } | |
| .profile-image img { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 0 1rem; | |
| } | |
| #about, | |
| .timeline-section, | |
| #skills { | |
| padding: 3rem 1.5rem; | |
| margin-bottom: 3rem; | |
| } | |
| .about-content h2 { | |
| font-size: 2rem; | |
| } | |
| .timeline-content { | |
| padding: 2rem; | |
| } | |
| .skill-category { | |
| padding: 2rem; | |
| } | |
| .about-highlights { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Background --> | |
| <canvas id="three-canvas"></canvas> | |
| <!-- Floating Icons --> | |
| <div class="floating-icons"> | |
| <i class="fab fa-python floating-icon" style="left: 10%; animation-delay: 0s;"></i> | |
| <i class="fab fa-js-square floating-icon" style="left: 20%; animation-delay: 3s;"></i> | |
| <i class="fab fa-react floating-icon" style="left: 30%; animation-delay: 6s;"></i> | |
| <i class="fab fa-node-js floating-icon" style="left: 40%; animation-delay: 9s;"></i> | |
| <i class="fas fa-brain floating-icon" style="left: 50%; animation-delay: 12s;"></i> | |
| <i class="fab fa-github floating-icon" style="left: 60%; animation-delay: 15s;"></i> | |
| <i class="fas fa-database floating-icon" style="left: 70%; animation-delay: 18s;"></i> | |
| <i class="fab fa-docker floating-icon" style="left: 80%; animation-delay: 21s;"></i> | |
| </div> | |
| <!-- Header --> | |
| <header> | |
| <nav> | |
| <a href="index.html" class="logo">Pranit Chilbule</a> | |
| <div class="menu-toggle" onclick="toggleMenu()"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li> | |
| <li><a href="#about" class="active"><i class="fas fa-user"></i> About</a></li> | |
| <li><a href="projects.html"><i class="fas fa-project-diagram"></i> Projects</a></li> | |
| <li><a href="#achievements"><i class="fas fa-trophy"></i> Achievements</a></li> | |
| <li><a href="#contact"><i class="fas fa-envelope"></i> Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <!-- About Section --> | |
| <section id="about" class="fade-in"> | |
| <div class="about-grid"> | |
| <div class="profile-section"> | |
| <div class="profile-image"> | |
| <img src="images/121415604.jpeg" alt="Pranit Chilbule Profile Picture"> | |
| <div class="status-badge"> | |
| <i class="fas fa-circle" style="color: var(--accent-green); font-size: 0.7rem;"></i> | |
| Available for Projects | |
| </div> | |
| </div> | |
| </div> | |
| <div class="about-content"> | |
| <h2>About Me</h2> | |
| <p> | |
| I'm a 3rd-year AI/ML engineering student at VIT Pune, passionate about building intelligent systems that solve real-world problems. My journey in technology spans from developing cutting-edge machine learning models to creating robust web applications using the MERN stack. | |
| </p> | |
| <p> | |
| I thrive on exploring the intersection of artificial intelligence and practical software development. When I'm not coding, you'll find me diving deep into research papers, experimenting with new AI frameworks, or contributing to open-source projects that push the boundaries of what's possible with technology. | |
| </p> | |
| <div class="about-highlights"> | |
| <div class="highlight-card"> | |
| <i class="fas fa-graduation-cap"></i> | |
| <h4>Education</h4> | |
| <p>AI/ML Engineering<br>VIT Pune</p> | |
| </div> | |
| <div class="highlight-card"> | |
| <i class="fas fa-code"></i> | |
| <h4>Experience</h4> | |
| <p>3+ Years in<br>Programming</p> | |
| </div> | |
| <div class="highlight-card"> | |
| <i class="fas fa-project-diagram"></i> | |
| <h4>Projects</h4> | |
| <p>15+ Completed<br>Projects</p> | |
| </div> | |
| <div class="highlight-card"> | |
| <i class="fas fa-brain"></i> | |
| <h4>Specialization</h4> | |
| <p>Generative AI &<br>Deep Learning</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Timeline --> | |
| <section class="timeline-section fade-in"> | |
| <div class="container"> | |
| <h2>Education Journey</h2> | |
| <div class="timeline"> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">2026</div> | |
| <div class="timeline-content"> | |
| <h3><i class="fas fa-university"></i>VIT Pune</h3> | |
| <div class="degree">B.Tech in Artificial Intelligence & Machine Learning</div> | |
| <div class="duration">2022 - 2026 (Expected)</div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">2022</div> | |
| <div class="timeline-content"> | |
| <h3><i class="fas fa-school"></i>Vidya Niketan Junior College</h3> | |
| <div class="degree">Higher Secondary Certificate (HSC) - Science</div> | |
| <div class="duration">2020 - 2022</div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">2020</div> | |
| <div class="timeline-content"> | |
| <h3><i class="fas fa-graduation-cap"></i>Chanda Public School</h3> | |
| <div class="degree">Secondary School Certificate (SSC)</div> | |
| <div class="duration">Completed 2020</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="fade-in"> | |
| <div class="skills-container"> | |
| <h2>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" data-skill="java"><i class="devicon-java-plain"></i>Java</span> | |
| <span class="skill-tag" data-skill="python"><i class="devicon-python-plain"></i>Python</span> | |
| <span class="skill-tag" data-skill="c"><i class="devicon-c-plain"></i>C</span> | |
| <span class="skill-tag" data-skill="html"><i class="devicon-html5-plain"></i>HTML</span> | |
| <span class="skill-tag" data-skill="css"><i class="devicon-css3-plain"></i>CSS</span> | |
| <span class="skill-tag" data-skill="javascript"><i class="devicon-javascript-plain"></i>JavaScript</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-layer-group"></i> Frameworks & Libraries</h3> | |
| <div class="skill-tags"> | |
| <span class="skill-tag"><i class="devicon-tensorflow-original"></i>TensorFlow</span> | |
| <span class="skill-tag"><i class="fas fa-brain"></i>Keras</span> | |
| <span class="skill-tag"><i class="fas fa-chart-line"></i>Scikit-learn</span> | |
| <span class="skill-tag"><i class="devicon-numpy-original"></i>NumPy</span> | |
| <span class="skill-tag"><i class="devicon-pandas-original"></i>Pandas</span> | |
| <span class="skill-tag"><i class="fas fa-chart-bar"></i>Plotly</span> | |
| <span class="skill-tag"><i class="fas fa-map"></i>Folium</span> | |
| <span class="skill-tag"><i class="devicon-flask-original"></i>Flask</span> | |
| <span class="skill-tag"><i class="fas fa-stream"></i>Streamlit</span> | |
| <span class="skill-tag"><i class="devicon-react-original"></i>React</span> | |
| <span class="skill-tag"><i class="devicon-nodejs-plain"></i>Node.js</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-brain"></i> AI/ML Domains</h3> | |
| <div class="skill-tags"> | |
| <span class="skill-tag"><i class="fas fa-robot"></i>Generative AI</span> | |
| <span class="skill-tag"><i class="fas fa-magic"></i>Agentic AI</span> | |
| <span class="skill-tag"><i class="fas fa-search"></i>RAG Systems</span> | |
| <span class="skill-tag"><i class="fas fa-language"></i>Large Language Models</span> | |
| <span class="skill-tag"><i class="fas fa-network-wired"></i>GANs</span> | |
| <span class="skill-tag"><i class="fas fa-eye"></i>Computer Vision</span> | |
| <span class="skill-tag"><i class="fas fa-comments"></i>NLP</span> | |
| </div> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-tools"></i> Tools & Platforms</h3> | |
| <div class="skill-tags"> | |
| <span class="skill-tag"><i class="devicon-git-plain"></i>Git</span> | |
| <span class="skill-tag"><i class="devicon-vscode-plain"></i>VS Code</span> | |
| <span class="skill-tag"><i class="devicon-pycharm-plain"></i>PyCharm</span> | |
| <span class="skill-tag"><i class="devicon-intellij-plain"></i>IntelliJ IDEA</span> | |
| <span class="skill-tag"><i class="fas fa-eclipse"></i>Eclipse</span> | |
| <span class="skill-tag"><i class="fas fa-chart-pie"></i>Power BI</span> | |
| <span class="skill-tag"><i class="fas fa-table"></i>Tableau</span> | |
| <span class="skill-tag"><i class="devicon-docker-plain"></i>Docker</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skill Meters --> | |
| <div class="skill-meters"> | |
| <h3>Proficiency Levels</h3> | |
| <div class="skill-meter" data-skill="90"> | |
| <div class="skill-meter-header"> | |
| <span class="skill-name"><i class="devicon-python-plain"></i>Python</span> | |
| <span class="skill-percentage">90%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress"></div> | |
| </div> | |
| </div> | |
| <div class="skill-meter" data-skill="85"> | |
| <div class="skill-meter-header"> | |
| <span class="skill-name"><i class="fas fa-brain"></i>Machine Learning</span> | |
| <span class="skill-percentage">85%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress"></div> | |
| </div> | |
| </div> | |
| <div class="skill-meter" data-skill="80"> | |
| <div class="skill-meter-header"> | |
| <span class="skill-name"><i class="devicon-javascript-plain"></i>JavaScript</span> | |
| <span class="skill-percentage">80%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress"></div> | |
| </div> | |
| </div> | |
| <div class="skill-meter" data-skill="85"> | |
| <div class="skill-meter-header"> | |
| <span class="skill-name"><i class="devicon-react-original"></i>React.js</span> | |
| <span class="skill-percentage">85%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress"></div> | |
| </div> | |
| </div> | |
| <div class="skill-meter" data-skill="75"> | |
| <div class="skill-meter-header"> | |
| <span class="skill-name"><i class="fas fa-chart-line"></i>Data Analysis</span> | |
| <span class="skill-percentage">75%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress"></div> | |
| </div> | |
| </div> | |
| <div class="skill-meter" data-skill="80"> | |
| <div class="skill-meter-header"> | |
| <span class="skill-name"><i class="fas fa-network-wired"></i>Deep Learning</span> | |
| <span class="skill-percentage">80%</span> | |
| </div> | |
| <div class="skill-bar"> | |
| <div class="skill-progress"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <a href="https://linkedin.com/in/pranit-chilbule" target="_blank" class="social-link"> | |
| <svg class="social-icon" viewBox="0 0 24 24"> | |
| <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> | |
| </svg> | |
| </a> | |
| <a href="https://github.com/pranit-chilbule" target="_blank" class="social-link"> | |
| <svg class="social-icon" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| </a> | |
| <a href="mailto:[email protected]" target="_blank" class="social-link"> | |
| <svg class="social-icon" viewBox="0 0 24 24"> | |
| <path d="M12 12.713l-11.985-9.713h23.97l-11.985 9.713zm0 2.574l-12-9.725v15.438h24v-15.438l-12 9.725z"/> | |
| </svg> | |
| </a> | |
| </div> | |
| </footer> | |
| <script> | |
| // Three.js Background Animation | |
| let scene, camera, renderer, particles; | |
| function initThree() { | |
| scene = new THREE.Scene(); | |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| renderer = new THREE.WebGLRenderer({ | |
| canvas: document.getElementById('three-canvas'), | |
| alpha: true | |
| }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.setClearColor(0x000000, 0); | |
| // Create particles | |
| const geometry = new THREE.BufferGeometry(); | |
| const particleCount = 1500; | |
| const positions = new Float32Array(particleCount * 3); | |
| const colors = new Float32Array(particleCount * 3); | |
| for (let i = 0; i < particleCount * 3; i += 3) { | |
| positions[i] = (Math.random() - 0.5) * 2000; | |
| positions[i + 1] = (Math.random() - 0.5) * 2000; | |
| positions[i + 2] = (Math.random() - 0.5) * 2000; | |
| // Color variations (blue to purple) | |
| colors[i] = Math.random() * 0.5 + 0.5; // R | |
| colors[i + 1] = Math.random() * 0.3 + 0.7; // G | |
| colors[i + 2] = 1; // B | |
| } | |
| geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); | |
| geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); | |
| const material = new THREE.PointsMaterial({ | |
| size: 3, | |
| vertexColors: true, | |
| transparent: true, | |
| opacity: 0.8 | |
| }); | |
| particles = new THREE.Points(geometry, material); | |
| scene.add(particles); | |
| camera.position.z = 1000; | |
| } | |
| function animateThree() { | |
| requestAnimationFrame(animateThree); | |
| particles.rotation.x += 0.0005; | |
| particles.rotation.y += 0.001; | |
| renderer.render(scene, camera); | |
| } | |
| // Mobile menu toggle | |
| function toggleMenu() { | |
| const navLinks = document.getElementById('navLinks'); | |
| const menuToggle = document.querySelector('.menu-toggle'); | |
| navLinks.classList.toggle('active'); | |
| menuToggle.classList.toggle('active'); | |
| } | |
| // Scroll animations | |
| function animateOnScroll() { | |
| const elements = document.querySelectorAll('.fade-in'); | |
| elements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const elementVisible = 150; | |
| if (elementTop < window.innerHeight - elementVisible) { | |
| element.classList.add('visible'); | |
| } | |
| }); | |
| } | |
| // Skill bar animations | |
| function animateSkillBars() { | |
| const skillMeters = document.querySelectorAll('.skill-meter'); | |
| skillMeters.forEach(meter => { | |
| const progress = meter.querySelector('.skill-progress'); | |
| const percentage = meter.getAttribute('data-skill'); | |
| const meterTop = meter.getBoundingClientRect().top; | |
| if (meterTop < window.innerHeight - 100) { | |
| setTimeout(() => { | |
| progress.style.width = percentage + '%'; | |
| }, 200); | |
| } | |
| }); | |
| } | |
| // Header scroll effect | |
| function handleHeaderScroll() { | |
| const header = document.querySelector('header'); | |
| if (window.scrollY > 100) { | |
| header.style.background = 'rgba(10, 10, 15, 0.98)'; | |
| header.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.3)'; | |
| } else { | |
| header.style.background = 'var(--header-bg)'; | |
| header.style.boxShadow = 'none'; | |
| } | |
| } | |
| // Smooth scrolling for navigation links | |
| function smoothScroll() { | |
| const navLinks = document.querySelectorAll('.nav-links a[href^="#"]'); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetSection = document.querySelector(targetId); | |
| if (targetSection) { | |
| targetSection.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| } | |
| // Initialize everything | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initThree(); | |
| animateThree(); | |
| smoothScroll(); | |
| // Initial animations | |
| setTimeout(() => { | |
| animateOnScroll(); | |
| animateSkillBars(); | |
| }, 500); | |
| }); | |
| // Event listeners | |
| window.addEventListener('scroll', function() { | |
| animateOnScroll(); | |
| animateSkillBars(); | |
| handleHeaderScroll(); | |
| }); | |
| window.addEventListener('resize', function() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| // Particle mouse interaction | |
| document.addEventListener('mousemove', function(event) { | |
| if (particles) { | |
| const mouseX = (event.clientX / window.innerWidth) * 2 - 1; | |
| const mouseY = -(event.clientY / window.innerHeight) * 2 + 1; | |
| particles.rotation.x += mouseY * 0.0001; | |
| particles.rotation.y += mouseX * 0.0001; | |
| } | |
| }); | |
| // Add parallax effect to profile image | |
| window.addEventListener('scroll', function() { | |
| const profileImage = document.querySelector('.profile-image'); | |
| if (profileImage) { | |
| const scrolled = window.pageYOffset; | |
| const parallax = scrolled * 0.1; | |
| profileImage.style.transform = `translateY(${parallax}px)`; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |