Spaces:

pranit144
/

PRANIT_CHILBULE

Running

App Files Files Community

pranit144 commited on 13 days ago

Commit

ff27fd8

verified ·

1 Parent(s): ab5a852

Upload 44 files

Browse files

Files changed (45) hide show

.gitattributes +31 -0
about.html +1378 -0
achievements.html +594 -0
contact.html +288 -0
images/0_rOIc88HfNzBtAhru.gif +3 -0
images/1 (1).jpg +3 -0
images/1 (1).mp4 +3 -0
images/1 (10).jpg +0 -0
images/1 (11).jpg +3 -0
images/1 (12).jpg +3 -0
images/1 (13).jpg +3 -0
images/1 (14).jpg +3 -0
images/1 (15).jpg +3 -0
images/1 (16).jpg +3 -0
images/1 (17).jpg +3 -0
images/1 (18).jpg +0 -0
images/1 (19).jpg +3 -0
images/1 (2).jpg +3 -0
images/1 (20).jpg +3 -0
images/1 (21).jpg +3 -0
images/1 (22).jpg +3 -0
images/1 (23).jpg +3 -0
images/1 (24).jpg +3 -0
images/1 (25).jpg +3 -0
images/1 (26).jpg +3 -0
images/1 (27).jpg +3 -0
images/1 (28).jpg +0 -0
images/1 (29).jpg +3 -0
images/1 (3).jpg +3 -0
images/1 (30).jpg +3 -0
images/1 (31).jpg +0 -0
images/1 (32).jpg +3 -0
images/1 (33).jpg +3 -0
images/1 (34).jpg +3 -0
images/1 (35).jpg +0 -0
images/1 (36).jpg +3 -0
images/1 (4).jpg +0 -0
images/1 (5).jpg +0 -0
images/1 (6).jpg +3 -0
images/1 (7).jpg +3 -0
images/1 (8).jpg +3 -0
images/1 (9).jpg +3 -0
images/121415604.jpeg +0 -0
index.html +1076 -19
projects.html +1558 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,34 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+images/0_rOIc88HfNzBtAhru.gif filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](1).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](1).mp4 filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](11).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](12).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](13).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](14).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](15).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](16).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](17).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](19).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](2).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](20).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](21).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](22).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](23).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](24).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](25).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](26).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](27).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](29).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](3).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](30).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](32).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](33).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](34).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](36).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](6).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](7).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](8).jpg filter=lfs diff=lfs merge=lfs -text
+images/1[[:space:]](9).jpg filter=lfs diff=lfs merge=lfs -text

about.html ADDED Viewed

	@@ -0,0 +1,1378 @@

+<!DOCTYPE html>
+<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 !important;
+                padding-left: 5rem !important;
+                padding-right: 0 !important;
+            }
+            .timeline-date {
+                left: 0 !important;
+                right: auto !important;
+            }
+            .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>

achievements.html ADDED Viewed

	@@ -0,0 +1,594 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Achievements & Blog - Pranit Chilbule</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --bg-primary: #0d1117;
+            --bg-secondary: #010409;
+            --bg-card: #21262d;
+            --text-primary: #c9d1d9;
+            --text-secondary: rgba(201, 209, 217, 0.8);
+            --accent-blue: #58a6ff;
+            --accent-green: #10a37f;
+            --accent-gold: #ffd700;
+            --accent-silver: #c0c0c0;
+            --header-bg: rgba(0, 0, 0, 0.6);
+            --border-color: #30363d;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        /* Header */
+        header {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background: var(--header-bg);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            border-bottom: 1px solid var(--border-color);
+        }
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .logo {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--accent-blue);
+        }
+        .nav-links {
+            display: flex;
+            list-style: none;
+            gap: 2rem;
+        }
+        .nav-links a {
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+        .nav-links a:hover {
+            color: var(--accent-blue);
+        }
+        /* Main Content */
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 120px 2rem 2rem;
+        }
+        section {
+            margin-bottom: 4rem;
+        }
+        h2 {
+            font-size: 2.5rem;
+            margin-bottom: 2rem;
+            color: var(--accent-blue);
+            text-align: center;
+            position: relative;
+        }
+        h2::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80px;
+            height: 3px;
+            background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
+            border-radius: 2px;
+        }
+        /* Achievement Cards */
+        .achievements-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 2rem;
+            padding: 2rem 0;
+        }
+        .achievement-card {
+            background: var(--bg-card);
+            border-radius: 16px;
+            padding: 2rem;
+            border: 1px solid var(--border-color);
+            transition: all 0.4s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .achievement-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.1), transparent);
+            transition: left 0.6s ease;
+        }
+        .achievement-card:hover::before {
+            left: 100%;
+        }
+        .achievement-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 15px 40px rgba(88, 166, 255, 0.2);
+            border-color: var(--accent-blue);
+        }
+        .achievement-icon {
+            font-size: 3rem;
+            margin-bottom: 1.5rem;
+            display: block;
+        }
+        .achievement-title {
+            color: var(--accent-blue);
+            font-size: 1.3rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+        }
+        .achievement-description {
+            color: var(--text-secondary);
+            font-size: 1rem;
+            line-height: 1.6;
+        }
+        .achievement-stats {
+            display: flex;
+            gap: 1rem;
+            margin-top: 1rem;
+            font-size: 0.9rem;
+            color: var(--accent-green);
+        }
+        .stat-item {
+            background: rgba(16, 163, 127, 0.1);
+            padding: 0.3rem 0.8rem;
+            border-radius: 12px;
+            border: 1px solid rgba(16, 163, 127, 0.3);
+        }
+        /* Blog Section */
+        .blog-container {
+            overflow-x: auto;
+            padding: 2rem 0;
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+        .blog-container::-webkit-scrollbar {
+            display: none;
+        }
+        .blog-grid {
+            display: flex;
+            gap: 2rem;
+            padding: 0.5rem;
+        }
+        .blog-card {
+            min-width: 350px;
+            max-width: 400px;
+            background: var(--bg-card);
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid var(--border-color);
+            transition: all 0.4s ease;
+            position: relative;
+        }
+        .blog-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+            border-color: var(--accent-blue);
+        }
+        .blog-image {
+            width: 100%;
+            height: 220px;
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+            color: white;
+        }
+        .blog-content {
+            padding: 2rem;
+        }
+        .blog-date {
+            color: var(--accent-green);
+            font-size: 0.9rem;
+            margin-bottom: 0.8rem;
+            font-weight: 500;
+        }
+        .blog-title {
+            color: var(--text-primary);
+            font-size: 1.3rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            line-height: 1.4;
+        }
+        .blog-excerpt {
+            color: var(--text-secondary);
+            font-size: 1rem;
+            margin-bottom: 1.5rem;
+            line-height: 1.6;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+        .blog-link {
+            color: var(--accent-blue);
+            text-decoration: none;
+            font-weight: 500;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+        }
+        .blog-link:hover {
+            color: var(--accent-green);
+            transform: translateX(5px);
+        }
+        /* Footer */
+        footer {
+            background: var(--bg-secondary);
+            padding: 3rem 2rem 2rem;
+            border-top: 1px solid var(--border-color);
+            text-align: center;
+        }
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+        .social-links a {
+            color: var(--text-secondary);
+            font-size: 1.5rem;
+            transition: color 0.3s ease;
+        }
+        .social-links a:hover {
+            color: var(--accent-blue);
+        }
+        .footer-text {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+        /* Animations */
+        .fade-in {
+            opacity: 0;
+            transform: translateY(30px);
+            animation: fadeInUp 0.8s ease forwards;
+        }
+        @keyframes fadeInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .fade-in:nth-child(1) { animation-delay: 0.1s; }
+        .fade-in:nth-child(2) { animation-delay: 0.2s; }
+        .fade-in:nth-child(3) { animation-delay: 0.3s; }
+        .fade-in:nth-child(4) { animation-delay: 0.4s; }
+        .fade-in:nth-child(5) { animation-delay: 0.5s; }
+        .fade-in:nth-child(6) { animation-delay: 0.6s; }
+        /* Mobile Responsiveness */
+        @media (max-width: 768px) {
+            .nav-links {
+                display: none;
+            }
+            main {
+                padding: 100px 1rem 2rem;
+            }
+            h2 {
+                font-size: 2rem;
+            }
+            .achievements-grid {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
+            .achievement-card {
+                padding: 1.5rem;
+            }
+            .blog-card {
+                min-width: 280px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header>
+        <nav>
+            <div class="logo">Pranit Chilbule</div>
+            <ul class="nav-links">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="projects.html">Projects</a></li>
+                <li><a href="achievements.html">Achievements</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <!-- Achievements Section -->
+        <section id="achievements">
+            <h2 class="fade-in">Achievements</h2>
+            <div class="achievements-grid">
+                <div class="achievement-card fade-in">
+                    <div class="achievement-icon">🏆</div>
+                    <h3 class="achievement-title">3× Hackathon Winner</h3>
+                    <p class="achievement-description">First place victories at Cavista, Solvex, and Agri Tech hackathons, delivering innovative solutions across healthcare, agriculture, and engineering domains.</p>
+                    <div class="achievement-stats">
+                        <span class="stat-item">3 Wins</span>
+                        <span class="stat-item">Multiple Domains</span>
+                    </div>
+                </div>
+                <div class="achievement-card fade-in">
+                    <div class="achievement-icon">🥈</div>
+                    <h3 class="achievement-title">Runner-Up & Finalist</h3>
+                    <p class="achievement-description">Runner-up at Smart India Hackathon 2024 and Agri AI Hackathon 2025. Finalist at 8+ hackathons with 20+ total participations, consistently applying AI to solve real-world challenges.</p>
+                    <div class="achievement-stats">
+                        <span class="stat-item">2 Runner-ups</span>
+                        <span class="stat-item">8+ Finals</span>
+                        <span class="stat-item">20+ Participations</span>
+                    </div>
+                </div>
+                <div class="achievement-card fade-in">
+                    <div class="achievement-icon">📑</div>
+                    <h3 class="achievement-title">Research Publications</h3>
+                    <p class="achievement-description">Research papers presented at the Maitri Conference and ICCICN, with publications indexed in prestigious Scopus and Springer databases.</p>
+                    <div class="achievement-stats">
+                        <span class="stat-item">Scopus Indexed</span>
+                        <span class="stat-item">Springer</span>
+                    </div>
+                </div>
+                <div class="achievement-card fade-in">
+                    <div class="achievement-icon">🏅</div>
+                    <h3 class="achievement-title">Best Project Award</h3>
+                    <p class="achievement-description">Best Project Award for Plant Disease Detection System at college level, recognized for innovation among 120+ participants.</p>
+                    <div class="achievement-stats">
+                        <span class="stat-item">120+ Participants</span>
+                        <span class="stat-item">AI/ML Project</span>
+                    </div>
+                </div>
+                <div class="achievement-card fade-in">
+                    <div class="achievement-icon">👥</div>
+                    <h3 class="achievement-title">Innovsphere Club Founder</h3>
+                    <p class="achievement-description">Founded and serve as Tech Lead of Innovsphere Club, a community-driven technology club fostering collaboration among students and industry professionals.</p>
+                    <div class="achievement-stats">
+                        <span class="stat-item">Founder</span>
+                        <span class="stat-item">Tech Lead</span>
+                    </div>
+                </div>
+                <div class="achievement-card fade-in">
+                    <div class="achievement-icon">🌟</div>
+                    <h3 class="achievement-title">Continuous Contributor</h3>
+                    <p class="achievement-description">Actively contributing to data science and AI through open-source projects, technical blog posts, and ongoing academic and industry collaborations.</p>
+                    <div class="achievement-stats">
+                        <span class="stat-item">Open Source</span>
+                        <span class="stat-item">Tech Blogs</span>
+                        <span class="stat-item">Collaborations</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Blog Section -->
+        <section id="blog">
+            <h2 class="fade-in">Technical Blog</h2>
+            <div class="blog-container">
+                <div class="blog-grid">
+                    <!-- Blog Post 1 -->
+                    <article class="blog-card fade-in">
+                        <div class="blog-image">🧠</div>
+                        <div class="blog-content">
+                            <div class="blog-date">December 15, 2024</div>
+                            <h3 class="blog-title">Implementing GANs for Audio Generation</h3>
+                            <p class="blog-excerpt">Exploring the architecture and implementation of Generative Adversarial Networks for creating realistic audio samples with deep learning techniques.</p>
+                            <a href="#" class="blog-link">
+                                Read More
+                                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </article>
+                    <!-- Blog Post 2 -->
+                    <article class="blog-card fade-in">
+                        <div class="blog-image">🌱</div>
+                        <div class="blog-content">
+                            <div class="blog-date">November 28, 2024</div>
+                            <h3 class="blog-title">AI in Agriculture: Plant Disease Detection</h3>
+                            <p class="blog-excerpt">Deep dive into computer vision techniques for early detection of plant diseases, featuring CNN architectures and real-world deployment strategies.</p>
+                            <a href="#" class="blog-link">
+                                Read More
+                                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </article>
+                    <!-- Blog Post 3 -->
+                    <article class="blog-card fade-in">
+                        <div class="blog-image">⚡</div>
+                        <div class="blog-content">
+                            <div class="blog-date">October 10, 2024</div>
+                            <h3 class="blog-title">Building Scalable ML Pipelines</h3>
+                            <p class="blog-excerpt">Best practices for designing and implementing machine learning pipelines that can handle production workloads with MLOps principles.</p>
+                            <a href="#" class="blog-link">
+                                Read More
+                                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </article>
+                    <!-- Blog Post 4 -->
+                    <article class="blog-card fade-in">
+                        <div class="blog-image">🔬</div>
+                        <div class="blog-content">
+                            <div class="blog-date">September 22, 2024</div>
+                            <h3 class="blog-title">Research Paper Insights: AI Ethics</h3>
+                            <p class="blog-excerpt">Key findings from recent research publications on ethical AI development and responsible machine learning practices in industry applications.</p>
+                            <a href="#" class="blog-link">
+                                Read More
+                                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </article>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer>
+        <div class="footer-content">
+            <div class="social-links">
+                <a href="#" aria-label="LinkedIn">📧</a>
+                <a href="#" aria-label="GitHub">💻</a>
+                <a href="#" aria-label="Twitter">🐦</a>
+                <a href="#" aria-label="Medium">📝</a>
+            </div>
+            <p class="footer-text">© 2024 Pranit Chilbule. All rights reserved.</p>
+        </div>
+    </footer>
+    <script>
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+        // Intersection Observer for animations
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.animationPlayState = 'running';
+                }
+            });
+        }, observerOptions);
+        // Observe all elements with fade-in class
+        document.querySelectorAll('.fade-in').forEach(el => {
+            observer.observe(el);
+        });
+        // Add click effects to achievement cards
+        document.querySelectorAll('.achievement-card').forEach(card => {
+            card.addEventListener('click', function() {
+                this.style.transform = 'scale(0.98)';
+                setTimeout(() => {
+                    this.style.transform = '';
+                }, 150);
+            });
+        });
+        // Header background on scroll
+        window.addEventListener('scroll', () => {
+            const header = document.querySelector('header');
+            if (window.scrollY > 100) {
+                header.style.background = 'rgba(0, 0, 0, 0.9)';
+            } else {
+                header.style.background = 'rgba(0, 0, 0, 0.6)';
+            }
+        });
+        // Initialize animations
+        document.addEventListener('DOMContentLoaded', () => {
+            const fadeElements = document.querySelectorAll('.fade-in');
+            fadeElements.forEach((el, index) => {
+                el.style.animationDelay = `${index * 0.1}s`;
+            });
+        });
+    </script>
+</body>
+</html>

contact.html ADDED Viewed

	@@ -0,0 +1,288 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact - Pranit Chilbule</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <style>
+        /* Import existing theme variables */
+        :root {
+            --bg-primary: #0d1117;
+            --bg-secondary: #010409;
+            --bg-card: #21262d;
+            --text-primary: #c9d1d9;
+            --text-secondary: rgba(201, 209, 217, 0.8);
+            --accent-blue: #58a6ff;
+            --accent-green: #10a37f;
+            --header-bg: rgba(0, 0, 0, 0.6);
+            --border-color: #30363d;
+        }
+        /* Base styles */
+        body {
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            font-family: 'Inter', sans-serif;
+            line-height: 1.6;
+            margin: 0;
+        }
+        /* Contact Form Section */
+        .contact-section {
+            max-width: 600px;
+            margin: 100px auto 4rem;
+            padding: 0 2rem;
+        }
+        .form-group {
+            position: relative;
+            margin-bottom: 1.5rem;
+        }
+        .form-label {
+            position: absolute;
+            left: 0.75rem;
+            top: 0.75rem;
+            color: var(--text-secondary);
+            transition: all 0.3s ease;
+            pointer-events: none;
+            font-size: 0.9rem;
+        }
+        .form-input {
+            width: 100%;
+            padding: 0.75rem;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            color: var(--text-primary);
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        .form-input:focus {
+            outline: none;
+            border-color: var(--accent-blue);
+            box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
+        }
+        .form-input:focus + .form-label,
+        .form-input:not(:placeholder-shown) + .form-label {
+            transform: translateY(-1.5rem) scale(0.8);
+            background: var(--bg-primary);
+            padding: 0 0.5rem;
+            color: var(--accent-blue);
+        }
+        textarea.form-input {
+            min-height: 150px;
+            resize: vertical;
+        }
+        .submit-btn {
+            width: 100%;
+            padding: 0.75rem;
+            background: var(--accent-blue);
+            color: white;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .submit-btn:hover {
+            background: #4a8fd6;
+            transform: translateY(-2px);
+        }
+        /* Direct Contact Section */
+        .direct-contact {
+            margin-top: 3rem;
+            text-align: center;
+            padding: 2rem;
+            background: var(--bg-card);
+            border-radius: 1rem;
+            border: 1px solid var(--border-color);
+        }
+        .contact-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--accent-blue);
+            text-decoration: none;
+            margin: 0.5rem 0;
+            transition: all 0.3s ease;
+        }
+        .contact-link:hover {
+            color: var(--accent-green);
+        }
+        .resume-btn {
+            display: inline-block;
+            margin-top: 1.5rem;
+            padding: 0.75rem 2rem;
+            background: var(--accent-green);
+            color: white;
+            text-decoration: none;
+            border-radius: 0.5rem;
+            transition: all 0.3s ease;
+        }
+        .resume-btn:hover {
+            background: #0c8a6a;
+            transform: translateY(-2px);
+        }
+        /* Animation classes */
+        .fade-in {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.6s ease;
+        }
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        header {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background: var(--header-bg);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            border-bottom: 1px solid var(--border-color);
+        }
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .logo {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--accent-blue);
+        }
+        .nav-links {
+            display: flex;
+            list-style: none;
+            gap: 2rem;
+        }
+        .nav-links a {
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+        .nav-links a:hover {
+            color: var(--accent-blue);
+        }
+    </style>
+</head>
+<body>
+    <!-- Header from existing pages -->
+   <header>
+        <nav>
+            <div class="logo">Pranit Chilbule</div>
+            <ul class="nav-links">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="projects.html">Projects</a></li>
+                <li><a href="achievements.html">Achievements</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section class="contact-section">
+            <h2 class="fade-in">Get In Touch</h2>
+            <form id="contactForm" class="fade-in" onsubmit="handleSubmit(event)">
+                <div class="form-group">
+                    <input type="text" id="name" class="form-input" placeholder=" " required>
+                    <label for="name" class="form-label">Name</label>
+                </div>
+                <div class="form-group">
+                    <input type="email" id="email" class="form-input" placeholder=" " required>
+                    <label for="email" class="form-label">Email</label>
+                </div>
+                <div class="form-group">
+                    <textarea id="message" class="form-input" placeholder=" " required></textarea>
+                    <label for="message" class="form-label">Message</label>
+                </div>
+                <button type="submit" class="submit-btn">Send Message</button>
+            </form>
+            <div class="direct-contact fade-in">
+                <h3>Direct Contact</h3>
+                <a href="tel:+919763059811" class="contact-link">
+                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
+                    </svg>
+                    +91-9763059811
+                </a>
+                <br>
+                <a href="mailto:[email protected]" class="contact-link">
+                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                    </svg>
+                    [email protected]
+                </a>
+                <br>
+                <a href="/assets/Pranit_Chilbule_Resume.pdf" class="resume-btn" download>
+                    Download Résumé
+                </a>
+            </div>
+        </section>
+    </main>
+    <!-- Footer from existing pages -->
+    <footer>...</footer>
+    <script>
+        // Form submission handler
+        function handleSubmit(event) {
+            event.preventDefault();
+            const formData = {
+                name: document.getElementById('name').value,
+                email: document.getElementById('email').value,
+                message: document.getElementById('message').value
+            };
+            console.log('Form submitted:', formData);
+            // Add your form submission logic here
+            event.target.reset();
+        }
+        // Animation observer
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('visible');
+                    }
+                });
+            },
+            { threshold: 0.1 }
+        );
+        document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
+    </script>
+</body>
+</html>

images/0_rOIc88HfNzBtAhru.gif ADDED Viewed

Git LFS Details

SHA256: 9a347cfeb7fb4e974589defa9c381c32922e30315e0b631c3ad80c832ed3ef2f
Pointer size: 132 Bytes
Size of remote file: 2.68 MB

images/1 (1).jpg ADDED Viewed

Git LFS Details

SHA256: 3609a3071d904da19f13ee38673a021d6a5582332e943637b95de7c32c912285
Pointer size: 131 Bytes
Size of remote file: 462 kB

images/1 (1).mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:ee59fad349454d94db6c3d1b50870c6bfab3f63a8c7f24d8b4e75c4d93a06f7c
+size 1155684

images/1 (10).jpg ADDED Viewed

images/1 (11).jpg ADDED Viewed

Git LFS Details

SHA256: 38417eea9a4a92c9ae66f537a9ce896167029fbb03a88d0051dbc2203f8cb191
Pointer size: 131 Bytes
Size of remote file: 221 kB

images/1 (12).jpg ADDED Viewed

Git LFS Details

SHA256: 184f14b2a9c4750d39d6f0b065ee146e9b1829f2219ac99bafc8db082ed02860
Pointer size: 131 Bytes
Size of remote file: 235 kB

images/1 (13).jpg ADDED Viewed

Git LFS Details

SHA256: f1144df4a2bf334021774b6758ce088dce7747efb4a366bdb6ba9c09c69ec652
Pointer size: 131 Bytes
Size of remote file: 257 kB

images/1 (14).jpg ADDED Viewed

Git LFS Details

SHA256: 82a280fdf4ce3bdc22a9ba51919bd43886a76dbb8fc49e74484e455450f66d32
Pointer size: 131 Bytes
Size of remote file: 387 kB

images/1 (15).jpg ADDED Viewed

Git LFS Details

SHA256: bc624e5511dcd2e8de17c77c7df2a37873d5d1880f439daaf2287e7530e81f70
Pointer size: 131 Bytes
Size of remote file: 191 kB

images/1 (16).jpg ADDED Viewed

Git LFS Details

SHA256: 23856add212a1582147e61d54cfa3120761e568050a41c7ad62b60ea9c9ef10a
Pointer size: 131 Bytes
Size of remote file: 150 kB

images/1 (17).jpg ADDED Viewed

Git LFS Details

SHA256: 0d501932a93a288e72d1ee85029b123239b440d65408bcd85d0c115a76384596
Pointer size: 131 Bytes
Size of remote file: 174 kB

images/1 (18).jpg ADDED Viewed

images/1 (19).jpg ADDED Viewed

Git LFS Details

SHA256: 5a790eaa29b7f6e6fa19b0fef9aff007ef13792561cc86bf560cb79c0a4d437e
Pointer size: 131 Bytes
Size of remote file: 229 kB

images/1 (2).jpg ADDED Viewed

Git LFS Details

SHA256: ad9d26c9055a9c0c87e8e174694f3b53ba24006b036473ab82c7cae070070dcb
Pointer size: 131 Bytes
Size of remote file: 547 kB

images/1 (20).jpg ADDED Viewed

Git LFS Details

SHA256: dd87abd40dd919c65e81ee38ba7ad4e370e6b1e5f8c9a01e8354d33218c4530e
Pointer size: 131 Bytes
Size of remote file: 220 kB

images/1 (21).jpg ADDED Viewed

Git LFS Details

SHA256: 78a4f23e3b493bb0ab78fcc15baa86f562cf577dfe10c83b894f4f9eff48efd6
Pointer size: 131 Bytes
Size of remote file: 678 kB

images/1 (22).jpg ADDED Viewed

Git LFS Details

SHA256: f1296c903fd02ca753f653df4f2d240c89a90935056a465441021964da63afd3
Pointer size: 131 Bytes
Size of remote file: 175 kB

images/1 (23).jpg ADDED Viewed

Git LFS Details

SHA256: 1f97171290c9ccbf1ebf6ed5ae4ce23714cf1337b1b7c7f69a1a71634d4789d2
Pointer size: 131 Bytes
Size of remote file: 620 kB

images/1 (24).jpg ADDED Viewed

Git LFS Details

SHA256: b5a853507afa00f8c4c4c9ddcedea065babcdf0346f0ce17945d87f70fd098d0
Pointer size: 131 Bytes
Size of remote file: 161 kB

images/1 (25).jpg ADDED Viewed

Git LFS Details

SHA256: 2833a94753333fc495ac62ad0b1ee36f25d1f25048b2a33e7e305b38f8af1e36
Pointer size: 131 Bytes
Size of remote file: 157 kB

images/1 (26).jpg ADDED Viewed

Git LFS Details

SHA256: 25e4a3bdd779fc12e37cbf8b010b84a74fd1b2cb5cc0c8ac9990e116b4de496f
Pointer size: 131 Bytes
Size of remote file: 188 kB

images/1 (27).jpg ADDED Viewed

Git LFS Details

SHA256: 1dca8493680ba6d001e9301f48738365db5dd16f1a40c8710eff3f47575cb45b
Pointer size: 131 Bytes
Size of remote file: 168 kB

images/1 (28).jpg ADDED Viewed

images/1 (29).jpg ADDED Viewed

Git LFS Details

SHA256: a03d2641d9f35133b357f640988d92804b42c24823709fd11b11af6a2d2166bd
Pointer size: 132 Bytes
Size of remote file: 1.04 MB

images/1 (3).jpg ADDED Viewed

Git LFS Details

SHA256: 0aefac963a1bf6fe7dbed861d3a856eaeb29239464676fb2c86014bf8fab56f1
Pointer size: 131 Bytes
Size of remote file: 477 kB

images/1 (30).jpg ADDED Viewed

Git LFS Details

SHA256: 654d0ab572808b9fd88cc1f16bc5ec0fcfe086b2744e71e0aa54c632da467524
Pointer size: 131 Bytes
Size of remote file: 874 kB

images/1 (31).jpg ADDED Viewed

images/1 (32).jpg ADDED Viewed

Git LFS Details

SHA256: 3589ae39c1a975122c4720f9ab095b9b88d445dd265ba9dbd1770a6505c34f83
Pointer size: 131 Bytes
Size of remote file: 185 kB

images/1 (33).jpg ADDED Viewed

Git LFS Details

SHA256: 1f9b7fdbfdea87a9e9b6b147a88d578acca720215cad9048017a297260f721ca
Pointer size: 132 Bytes
Size of remote file: 1.68 MB

images/1 (34).jpg ADDED Viewed

Git LFS Details

SHA256: c2d878e66418831693714b5b542594ba0fc3bec79b1eca63f682b30010f8206a
Pointer size: 131 Bytes
Size of remote file: 158 kB

images/1 (35).jpg ADDED Viewed

images/1 (36).jpg ADDED Viewed

Git LFS Details

SHA256: 55755bab7b2f2479bd967f56d2218c1e9117ce171d2a531f530bfb90396e1022
Pointer size: 131 Bytes
Size of remote file: 897 kB

images/1 (4).jpg ADDED Viewed

images/1 (5).jpg ADDED Viewed

images/1 (6).jpg ADDED Viewed

Git LFS Details

SHA256: dafff8c0864dd19f1e2933745d508ada60e11cd7237e9e4acf23ec88cb17fb72
Pointer size: 131 Bytes
Size of remote file: 169 kB

images/1 (7).jpg ADDED Viewed

Git LFS Details

SHA256: 65b46a5f2b37a1e38f38a6605c9b74e9b6f53c4c1b787e313568cfbe52aead0c
Pointer size: 131 Bytes
Size of remote file: 319 kB

images/1 (8).jpg ADDED Viewed

Git LFS Details

SHA256: 8d9dd958238b57a9de5e4598a5e0d14eb8a98d96dd9a75f93d9e2e7552e4d48f
Pointer size: 131 Bytes
Size of remote file: 743 kB

images/1 (9).jpg ADDED Viewed

Git LFS Details

SHA256: 35edd5fd4062e6fd387afd9108493cdde448be3bcf55a9c3b32f6745a1128c1a
Pointer size: 131 Bytes
Size of remote file: 105 kB

images/121415604.jpeg ADDED Viewed

index.html CHANGED Viewed

@@ -1,19 +1,1076 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pranit Chilbule - AI/ML Engineer & MERN Developer</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --bg-primary: #0d1117;
+            --bg-secondary: #010409;
+            --text-primary: #c9d1d9;
+            --text-secondary: rgba(201, 209, 217, 0.8);
+            --accent-blue: #58a6ff;
+            --accent-green: #10a37f;
+            --header-bg: rgba(0, 0, 0, 0.6);
+            --border-color: rgba(201, 209, 217, 0.1);
+        }
+        body {
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            font-family: 'Inter', sans-serif;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        /* Three.js Canvas */
+        #three-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            pointer-events: none;
+        }
+        /* Header */
+        header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            padding: 1rem 2rem;
+            background: var(--header-bg);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .logo {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+        .logo:hover {
+            color: var(--accent-blue);
+        }
+        .nav-links {
+            display: flex;
+            list-style: none;
+            gap: 2rem;
+        }
+        .nav-links a {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s ease;
+            position: relative;
+        }
+        .nav-links a:hover {
+            color: var(--accent-blue);
+        }
+        .nav-links a::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--accent-blue);
+            transition: width 0.3s ease;
+        }
+        .nav-links a:hover::after {
+            width: 100%;
+        }
+        /* Main Hero Section */
+        main {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 2rem;
+            position: relative;
+        }
+        .hero-content {
+            text-align: center;
+            max-width: 1200px;
+            width: 100%;
+            margin: 0 auto;
+            padding-top: 80px; /* Added to account for fixed header */
+            animation: fadeInUp 1s ease-out;
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .hero-content h1 {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 4rem;
+            font-weight: 700;
+            white-space: nowrap; /* Keeps name in one line */
+            margin-left: 0; /* Removed left margin */
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from {
+                text-shadow: 0 0 20px rgba(88, 166, 255, 0.5);
+            }
+            to {
+                text-shadow: 0 0 30px rgba(88, 166, 255, 0.8);
+            }
+        }
+        .hero-content p {
+            font-size: 1.25rem;
+            letter-spacing: 1px;
+            opacity: 0.8;
+            margin-bottom: 2.5rem;
+            font-weight: 300;
+        }
+        .cta-buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 50px;
+            font-size: 1rem;
+            font-weight: 500;
+            text-decoration: none;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-block;
+        }
+        .btn-primary {
+            background: var(--accent-blue);
+            color: white;
+        }
+        .btn-primary:hover {
+            box-shadow: 0 0 20px rgba(88, 166, 255, 0.6);
+            transform: translateY(-2px);
+        }
+        .btn-secondary {
+            background: transparent;
+            color: var(--accent-green);
+            border: 2px solid var(--accent-green);
+        }
+        .btn-secondary:hover {
+            background: var(--accent-green);
+            color: white;
+            box-shadow: 0 0 20px rgba(16, 163, 127, 0.4);
+            transform: translateY(-2px);
+        }
+        /* About Section */
+        #about {
+            padding: 4rem 2rem;
+            background: rgba(13, 17, 23, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            border: 1px solid var(--border-color);
+            margin: 2rem auto;
+            max-width: 1200px;
+        }
+        .about-grid {
+            display: grid;
+            grid-template-columns: 1fr 2fr;
+            gap: 4rem;
+            align-items: center;
+        }
+        .profile-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .profile-image img {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            border: 4px solid var(--accent-blue);
+            box-shadow: 0 10px 30px rgba(88, 166, 255, 0.3);
+            transition: transform 0.3s ease;
+        }
+        .profile-image img:hover {
+            transform: scale(1.05);
+        }
+        .about-content {
+            max-width: 600px;
+        }
+        .about-content h2 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            position: relative;
+            display: inline-block;
+        }
+        .about-content h2::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            bottom: -5px;
+            left: 0;
+            background: var(--accent-blue);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+        .about-content h2:hover::after {
+            transform: scaleX(1);
+        }
+        .quick-info {
+            display: flex;
+            gap: 2rem;
+            margin: 2rem 0;
+        }
+        .info-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .info-icon {
+            font-size: 1.5rem;
+        }
+        /* Journey Sliders */
+        .journey-sliders {
+            padding: 4rem 2rem;
+            overflow: hidden;
+            background: rgba(13, 17, 23, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            border: 1px solid var(--border-color);
+            margin: 2rem auto;
+            max-width: 1400px;
+        }
+        .section-title {
+            text-align: center;
+            font-size: 2.5rem;
+            margin-bottom: 2rem;
+            color: var(--text-primary);
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .slider-container {
+            position: relative;
+            padding: 2rem 0;
+            margin-bottom: 2rem;
+        }
+        .slider-track {
+            display: flex;
+            width: calc(250px * 18);
+            animation: scroll 40s linear infinite;
+        }
+        .slider-track.reverse {
+            animation-direction: reverse;
+        }
+        .slider-item {
+            width: 250px;
+            height: 180px;
+            padding: 0 15px;
+            flex-shrink: 0;
+        }
+        .slider-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 10px;
+            border: 2px solid var(--accent-blue);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .slider-item img:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 20px rgba(88, 166, 255, 0.3);
+        }
+        @keyframes scroll {
+            0% {
+                transform: translateX(0);
+            }
+            100% {
+                transform: translateX(calc(-250px * 9));
+            }
+        }
+        .slider-container::before,
+        .slider-container::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 200px;
+            height: 100%;
+            z-index: 2;
+        }
+        .slider-container::before {
+            left: 0;
+            background: linear-gradient(to right, var(--bg-primary), transparent);
+        }
+        .slider-container::after {
+            right: 0;
+            background: linear-gradient(to left, var(--bg-primary), transparent);
+        }
+        /* Footer */
+        footer {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 1rem 2rem;
+            background: var(--bg-secondary);
+            z-index: 100;
+        }
+        .footer-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+            gap: 0.5rem;
+        }
+        .social-icon {
+            width: 24px;
+            height: 24px;
+            fill: var(--text-secondary);
+            transition: fill 0.3s ease;
+            cursor: pointer;
+        }
+        .social-icon:hover {
+            fill: var(--accent-green);
+        }
+        /* Mobile Menu Toggle */
+        .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;
+        }
+        /* Update the header styles */
+        .header-profile-img {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            margin-left: 1rem;
+            border: 2px solid var(--accent-blue);
+            object-fit: cover;
+        }
+        .logo-container {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .header-profile-img {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: 2px solid var(--accent-blue);
+            object-fit: cover;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .header-profile-img:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 15px rgba(88, 166, 255, 0.4);
+        }
+        /* Add to your existing styles */
+        .profile-container {
+            display: flex;
+            align-items: center;
+            justify-content: center; /* Changed to center */
+            margin-bottom: 2rem;
+            padding: 0 2rem;
+            gap: 6rem;
+            width: 100%; /* Added to ensure full width */
+        }
+        .profile-wrapper {
+            position: relative;
+            width: 300px;  /* Increased width */
+            height: 300px; /* Increased height */
+            border-radius: 10px; /* Changed from 50% to 10px for slight rounding */
+            overflow: hidden;
+            border: 3px solid var(--accent-blue);
+            box-shadow: 0 0 20px rgba(88, 166, 255, 0.3);
+            animation: float 6s ease-in-out infinite;
+            background: var(--bg-primary);
+        }
+        .profile-img {
+            width: 450px; /* Increased size */
+            height: 450px; /* Increased size */
+            object-fit: contain;
+            transform: scale(1);
+            transition: all 0.3s ease;
+            border: 4px solid var(--accent-blue); /* Added bright border */
+            box-shadow: 0 0 30px rgba(88, 166, 255, 0.5); /* Added glow effect */
+            border-radius: 15px; /* Optional: slight rounded corners */
+            padding: 10px;
+            background: rgba(13, 17, 23, 0.8); /* Semi-transparent background */
+        }
+        .profile-img:hover {
+            transform: scale(1.02);
+            border-color: var(--accent-green); /* Color change on hover */
+            box-shadow: 0 0 40px rgba(16, 163, 127, 0.6); /* Enhanced glow on hover */
+        }
+        .ai-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+        .scanning-line {
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
+            animation: scan 2s linear infinite;
+        }
+        .ai-particles {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at center, transparent 30%, rgba(88, 166, 255, 0.1));
+            animation: pulse 2s ease-in-out infinite;
+        }
+        @keyframes scan {
+            0% {
+                top: 0;
+                opacity: 0;
+            }
+            50% {
+                opacity: 1;
+            }
+            100% {
+                top: 100%;
+                opacity: 0;
+            }
+        }
+        @keyframes pulse {
+            0%, 100% {
+                transform: scale(1);
+                opacity: 0.5;
+            }
+            50% {
+                transform: scale(1.1);
+                opacity: 0.8;
+            }
+        }
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+        /* Responsive Design */
+        @media (max-width: 1200px) {
+            .hero-content h1 {
+                font-size: 3.5rem;
+            }
+            .profile-container {
+                gap: 4rem;
+            }
+            .hero-content h1 {
+                margin-left: 1rem;
+            }
+        }
+        @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(10px);
+                flex-direction: column;
+                padding: 1rem 0;
+                gap: 1rem;
+            }
+            .nav-links.active {
+                display: flex;
+            }
+            .menu-toggle {
+                display: flex;
+            }
+            .hero-content h1 {
+                font-size: 2.5rem;
+            }
+            .hero-content p {
+                font-size: 1.1rem;
+            }
+            .cta-buttons {
+                flex-direction: column;
+                align-items: center;
+            }
+            .btn {
+                width: 200px;
+            }
+            .about-grid {
+                grid-template-columns: 1fr;
+            }
+            .journey-sliders {
+                padding: 2rem 1rem;
+            }
+            .section-title {
+                font-size: 2rem;
+            }
+            .slider-item {
+                width: 200px;
+                height: 150px;
+            }
+            .logo-container {
+                gap: 0.5rem;
+            }
+            .header-profile-img {
+                width: 32px;
+                height: 32px;
+            }
+            .profile-container {
+                flex-direction: column;
+                text-align: center;
+                gap: 2rem;
+            }
+            .hero-content h1 {
+                margin-left: 0;
+            }
+        }
+        @media (max-width: 480px) {
+            main {
+                padding: 0 1rem;
+            }
+            .hero-content h1 {
+                font-size: 2rem;
+            }
+            .hero-content p {
+                font-size: 1rem;
+                letter-spacing: 0.5px;
+            }
+            header {
+                padding: 0.75rem 1rem;
+            }
+            footer {
+                padding: 0.75rem 1rem;
+            }
+        }
+        /* Smooth scroll behavior */
+        html {
+            scroll-behavior: smooth;
+        }
+        /* Loading animation */
+        .loading {
+            opacity: 0;
+            animation: fadeIn 0.5s ease-in forwards;
+        }
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+            }
+        }
+        /* AI Particles */
+        .ai-particles {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            overflow: hidden;
+            z-index: 0;
+        }
+        .ai-particle {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: var(--accent-blue);
+            border-radius: 50%;
+            pointer-events: none;
+        }
+        @keyframes particleFloat {
+            0% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+            100% {
+                transform: translateY(0);
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Three.js Canvas -->
+    <canvas id="three-canvas"></canvas>
+    <!-- Header -->
+    <header>
+        <nav>
+            <div class="logo-container">
+                <a href="index.html" class="logo">Pranit Chilbule</a>
+                <img src="images/0_rOIc88HfNzBtAhru.gif" alt="Profile" class="header-profile-img">
+            </div>
+            <div class="menu-toggle" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+            <ul class="nav-links" id="navLinks">
+                <li><a href="index.html" class="nav-home">Home</a></li>
+                <li><a href="about.html" class="nav-about">About</a></li>
+                <li><a href="projects.html" class="nav-projects">Projects</a></li>
+                <li><a href="achievements.html" class="nav-achievements">Achievements</a></li>
+                <li><a href="contact.html" class="nav-contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <!-- Main Hero Section -->
+    <main id="home">
+        <div class="hero-content loading">
+            <div class="profile-container">
+                <h1>Pranit Chilbule</h1>
+                <img src="images/0_rOIc88HfNzBtAhru.gif" alt="Profile" class="profile-img">
+            </div>
+            <p>AI/ML Engineer | MERN Developer | Tech Enthusiast</p>
+            <div class="cta-buttons">
+                <a href="#about" class="btn btn-primary">Learn More</a>
+                <a href="projects.html" class="btn btn-secondary">View Projects</a>
+            </div>
+        </div>
+    </main>
+    <!-- Journey Sliders Section -->
+    <section class="journey-sliders fade-in">
+        <h2 class="section-title">My Journey</h2>
+        <!-- First Slider - Moving Left -->
+        <div class="slider-container">
+            <div class="slider-track">
+                <!-- First set of images -->
+                <div class="slider-item"><img src="images/1 (1).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (2).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (3).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (4).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (5).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (6).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (7).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (8).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (9).jpg" alt="Journey moment"></div>
+                <!-- Duplicate for seamless loop -->
+                <div class="slider-item"><img src="images/1 (1).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (2).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (3).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (4).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (5).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (6).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (7).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (8).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (9).jpg" alt="Journey moment"></div>
+            </div>
+        </div>
+        <!-- Second Slider - Moving Right -->
+        <div class="slider-container">
+            <div class="slider-track reverse">
+                <!-- Second set of images -->
+                <div class="slider-item"><img src="images/1 (10).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (11).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (12).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (13).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (14).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (15).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (16).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (17).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (18).jpg" alt="Journey moment"></div>
+                <!-- Duplicate for seamless loop -->
+                <div class="slider-item"><img src="images/1 (10).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (11).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (12).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (13).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (14).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (15).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (16).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (17).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (18).jpg" alt="Journey moment"></div>
+            </div>
+        </div>
+        <!-- Third Slider - Moving Left -->
+        <div class="slider-container">
+            <div class="slider-track">
+                <!-- Third set of images -->
+                <div class="slider-item"><img src="images/1 (19).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (20).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (21).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (22).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (23).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (24).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (25).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (26).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (27).jpg" alt="Journey moment"></div>
+                <!-- Duplicate for seamless loop -->
+                <div class="slider-item"><img src="images/1 (19).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (20).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (21).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (22).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (23).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (24).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (25).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (26).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (27).jpg" alt="Journey moment"></div>
+            </div>
+        </div>
+        <!-- Fourth Slider - Moving Right -->
+        <div class="slider-container">
+            <div class="slider-track reverse">
+                <!-- Fourth set of images -->
+                <div class="slider-item"><img src="images/1 (28).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (29).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (30).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (31).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (32).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (33).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (34).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (35).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (36).jpg" alt="Journey moment"></div>
+                <!-- Duplicate for seamless loop -->
+                <div class="slider-item"><img src="images/1 (28).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (29).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (30).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (31).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (32).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (33).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (34).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (35).jpg" alt="Journey moment"></div>
+                <div class="slider-item"><img src="images/1 (36).jpg" alt="Journey moment"></div>
+            </div>
+        </div>
+    </section>
+  <!-- About Section -->
+    <section id="about" class="fade-in">
+        <div class="about-grid">
+            <div class="profile-image">
+    <img src="images/121415604.jpeg" alt="Pranit Chilbule Profile Picture">
+</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>
+                <div class="quick-info">
+                    <div class="info-item">
+                        <span class="info-icon">🎓</span>
+                        <span>AI/ML Engineer</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-icon">💻</span>
+                        <span>MERN Developer</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-icon">🚀</span>
+                        <span>Tech Enthusiast</span>
+                    </div>
+                </div>
+                <div class="cta-buttons">
+                    <a href="about.html" class="btn btn-primary">Full Bio</a>
+                    <a href="#contact" class="btn btn-secondary">Get in Touch</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer>
+        <div class="footer-content">
+            <a href="www.linkedin.com/in/pranit-chilbule-03ba7b1b5" target="_blank">
+                <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/pranit144" target="_blank">
+                <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="/blog.html" target="_blank">
+                <svg class="social-icon" viewBox="0 0 24 24">
+                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                </svg>
+            </a>
+        </div>
+    </footer>
+    <script>
+        // Three.js Particle Network Background
+        let scene, camera, renderer, particles, lines;
+        let particleCount = 100;
+        let mouseX = 0, mouseY = 0;
+        let windowHalfX = window.innerWidth / 2;
+        let windowHalfY = window.innerHeight / 2;
+        function initThreeJS() {
+            const canvas = document.getElementById('three-canvas');
+            // Scene setup
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setClearColor(0x000000, 0);
+            // Create particles
+            const geometry = new THREE.BufferGeometry();
+            const positions = new Float32Array(particleCount * 3);
+            const velocities = [];
+            for (let i = 0; i < particleCount; i++) {
+                positions[i * 3] = (Math.random() - 0.5) * 2000;
+                positions[i * 3 + 1] = (Math.random() - 0.5) * 2000;
+                positions[i * 3 + 2] = (Math.random() - 0.5) * 2000;
+                velocities.push({
+                    x: (Math.random() - 0.5) * 2,
+                    y: (Math.random() - 0.5) * 2,
+                    z: (Math.random() - 0.5) * 2
+                });
+            }
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            const material = new THREE.PointsMaterial({
+                color: 0x58a6ff,
+                size: 2,
+                transparent: true,
+                opacity: 0.8
+            });
+            particles = new THREE.Points(geometry, material);
+            particles.userData = { velocities: velocities };
+            scene.add(particles);
+            // Create lines
+            const lineGeometry = new THREE.BufferGeometry();
+            const lineMaterial = new THREE.LineBasicMaterial({
+                color: 0x58a6ff,
+                transparent: true,
+                opacity: 0.3
+            });
+            lines = new THREE.LineSegments(lineGeometry, lineMaterial);
+            scene.add(lines);
+            camera.position.z = 1000;
+            // Start animation
+            animate();
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            // Update particles positions
+            const positions = particles.geometry.attributes.position.array;
+            const velocities = particles.userData.velocities;
+            for (let i = 0; i < particleCount; i++) {
+                positions[i * 3] += velocities[i].x;
+                positions[i * 3 + 1] += velocities[i].y;
+                positions[i * 3 + 2] += velocities[i].z;
+                // Boundary check
+                if (positions[i * 3] > 1000 || positions[i * 3] < -1000) velocities[i].x *= -1;
+                if (positions[i * 3 + 1] > 1000 || positions[i * 3 + 1] < -1000) velocities[i].y *= -1;
+                if (positions[i * 3 + 2] > 1000 || positions[i * 3 + 2] < -1000) velocities[i].z *= -1;
+            }
+            particles.geometry.attributes.position.needsUpdate = true;
+            // Update lines between close particles
+            updateLines();
+            // Camera movement based on mouse
+            camera.position.x += (mouseX - camera.position.x) * 0.05;
+            camera.position.y += (-mouseY - camera.position.y) * 0.05;
+            camera.lookAt(scene.position);
+            renderer.render(scene, camera);
+        }
+        function updateLines() {
+            const positions = particles.geometry.attributes.position.array;
+            const linePositions = [];
+            for (let i = 0; i < particleCount; i++) {
+                for (let j = i + 1; j < particleCount; j++) {
+                    const dx = positions[i * 3] - positions[j * 3];
+                    const dy = positions[i * 3 + 1] - positions[j * 3 + 1];
+                    const dz = positions[i * 3 + 2] - positions[j * 3 + 2];
+                    const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+                    if (distance < 120) {.style.display = 'block';
+                        linePositions.push(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
+                        linePositions.push(positions[j * 3], positions[j * 3 + 1], positions[j * 3 + 2]);
+                    }
+                }
+            }
+nks = document.getElementById('navLinks');
+            lines.geometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));nks.classList.toggle('active');
+        }
+        // Mouse movement tracking        // Smooth scroll for internal links
+        document.addEventListener('mousemove', (event) => {]').forEach(anchor => {
+            mouseX = event.clientX - windowHalfX;nction (e) {
+            mouseY = event.clientY - windowHalfY;efault();
+        });    const target = document.querySelector(this.getAttribute('href'));
+        // Window resize handlerollIntoView({
+        window.addEventListener('resize', () => {
+            windowHalfX = window.innerWidth / 2;    block: 'start'
+            windowHalfY = window.innerHeight / 2;         });
+                }
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+ge loads
+            // Pause animation on mobile
+            if (window.innerWidth < 600) {eJS();
+                renderer.domElement.style.display = 'none';
+            anchor.addEventListener('click', function (e) {/ Show content with animation
+                e.preventDefault(); setTimeout(() => {
+                const target = document.querySelector(this.getAttribute('href'));   document.querySelector('.hero-content').classList.remove('loading');
+                if (target) {     }, 100);
+                    target.scrollIntoView({ });

projects.html ADDED Viewed

	@@ -0,0 +1,1558 @@

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