<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Portfolio</title>
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* Base Styles */
        :root {
            --bg-color: #0d0d0d;
            --text-color: #f5f5f5;
            --accent-color: #64ffda;
            --secondary-color: #8892b0;
            --tertiary-color: #233554;
            --hover-color: #ff5277;
            --font-mono: 'SF Mono', 'Fira Code', monospace;
            --font-sans: 'Inter', 'Helvetica', sans-serif;
            --easing: cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--font-sans);
            line-height: 1.6;
            overflow-x: hidden;
            cursor: default;
        }
        
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #0f0f0f;
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--tertiary-color);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent-color);
        }
        
        a {
            color: var(--accent-color);
            text-decoration: none;
            transition: all 0.25s var(--easing);
        }
        
        a:hover {
            color: var(--hover-color);
        }
        
        /* Loader Styles */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .loader.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .loader-text {
            font-family: var(--font-mono);
            font-size: 1.5rem;
            color: var(--accent-color);
            overflow: hidden;
        }
        
        .loader-text span {
            display: inline-block;
            transform: translateY(100%);
            animation: revealText 1s var(--easing) forwards;
        }
        
        @keyframes revealText {
            to {
                transform: translateY(0);
            }
        }
        
        /* Noise Effect */
        .noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAABBlJREFUaEPtmttx2zAQRbkSXIJLUCfxfMQ/LsGdJJ1YJagTuxOX4BJcQuaD4wUokVySIGWNPfMhkeCDu2cXuwCpPW38s23cbz+A/quR7DAiZralPkRkb2b/IvKZJFiS4HPxvcT/IvPezF7N7NXdfwQAiJyVYaUBQORsZoch4pfuvj9HBgCRi5m9ufv3xrgRMQbRzLDKj+6OlKm2GRGqxvfMaZKZtYiYGVb6EHcmuWZEzOwgIix8b2aJFBkZy9URMTMWflfLwMxaRJj/wd0JhNW2FSLv7k4AG21bIOJmhjVaeTTbtoiwuVjktLsfRxdYk4iZzZKoLbZGhPWQWTuodCOyFSKjm70WETI8bKpZLwWRrRBhc5+KGFkz9YOZjZLGQmQYHK6xTCMsLgnLRiIyJPNhZu/ufrmG8Na4QSLDfQ+P2IyEEBmHAD1JmqxQnIGhFyNPCJECmSF5DBXOZ/3YSGXJ5a6FhsgIGRImCB+2aBEhc7LDmxsaoUBmGEpP7l5LvRfRk1GfQeTWGZPrPkNCZILM8LOr9kfkxTmqSBYiE2Rw4+Z5g+qbGbIFWTa0EJkhE/yx+uARIsYzJSaLW1X/GSITZGCQlnGS1SoSIH+vWQq2qv8MEWtK3sMNQTnRHu2K+o9G5CSZm7wBN1nNHyDSXP8ZIhbWJohcRYT+d/cn1ayi/r1EPM/AxLIeY2aWVwzZ72MHU17T9xKpnTl5Q1M75/Yg8tKbhXuJWGnHbhAZpOWrk2/Jcw+RTyTWpaCRqO387iMSfJojE/cqRIbzLMmeKpfBMcVLcpXHV7N9eBER6oLvefSl+wFbQeTFzGi1SzK1tRwlXHnYVS8iNSJBZjL31m727qeAU2S6i0iNyPC1X22NJSJIi8jU89k5rBKRaK1TIpMzU9Ua3vqcE5mOo9eSiHkrYc35tGtfcx6pnmRXO8eBCM3fYnF1U0TmZPPwiR2KnKc4t5ZcJmcwVeGuIWLfykJLRNQIESkXmSRkZUdQXFcrVNjYQxGJKmJpkbWELInQiX4cSlqxsVXZa8j7Js6t0Y3GBKqNr0g+kMlnGv7e/QSgJ4OicrDQrT/vrPWN7TJntkAC91pEACFD0uKrR5JE7i5k6pXExb/VbnJWXYxAZKI2CBEZBUPg1+E2ahBkRyLZ/x7UnYmEFDM/EJnZYF5rMsY3HphCKP3O33OvZkJhLIcP6SYOZ2Y2S6bH3f/mteCaCZC5URMk8ZSERMTwmTGZHlf7p7XIhLvlLllkd2GZHnfO0cNWZMwsErE+waxOhkzPUgm26sJDMkH6EoG/WnqlZNZqfcR/yRgwzZFZKo0q448Q6Qn4oJ/+AFirqKD8YgH7AAAAAElFTkSuQmCC');
            opacity: 0.03;
            z-index: -1;
            pointer-events: none;
        }
        
        /* Cursor Styles */
        .custom-cursor {
            position: fixed;
            width: 40px;
            height: 40px;
            border: 2px solid var(--accent-color);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9999;
            transition: width 0.3s, height 0.3s, border-color 0.3s;
            mix-blend-mode: difference;
        }
        
        .custom-cursor.hover {
            width: 80px;
            height: 80px;
            border-color: var(--hover-color);
        }
        
        .dot {
            position: fixed;
            width: 8px;
            height: 8px;
            background-color: var(--accent-color);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9999;
            transition: background-color 0.3s;
            mix-blend-mode: difference;
        }
        
        .dot.hover {
            background-color: var(--hover-color);
        }
        
        /* Navigation */
        .nav-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 50px;
            z-index: 100;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            mix-blend-mode: difference;
        }
        
        /* Space theme portfolio button */
        .space-portfolio-btn {
            position: fixed;
            top: 130px;  /* Changed from 80px to 130px */
            right: 50px;
            background: linear-gradient(135deg, var(--accent-color), var(--hover-color));
            color: var(--bg-color);
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 0 15px var(--accent-color);
            z-index: 110;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-mono);
            font-size: 14px;
            transition: all 0.3s var(--easing);
            border: 1px solid transparent;
        }
        
        .space-portfolio-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 25px var(--accent-color);
            background: transparent;
            color: var(--accent-color);
            border-color: var(--accent-color);
        }
        
        .space-portfolio-btn i {
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .space-portfolio-btn {
                top: auto;
                bottom: 80px;
                right: 20px;
                padding: 8px 16px;
                font-size: 12px;
            }
        }
        
        .nav-link {
            position: relative;
            font-family: var(--font-mono);
            color: var(--text-color);
            margin: 0 20px;
            font-size: 14px;
            overflow: hidden;
            cursor: pointer;
        }
        
        .nav-link::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--accent-color);
            transform: translateX(-100%);
            transition: transform 0.3s var(--easing);
        }
        
        .nav-link:hover::before {
            transform: translateX(0);
        }
        
        .logo {
            position: fixed;
            top: 30px;
            left: 50px;
            font-family: var(--font-mono);
            font-size: 24px;
            color: var(--accent-color);
            mix-blend-mode: difference;
        }
        
        /* Back Button */
        .back-btn {
            position: fixed;
            bottom: 30px;
            left: 30px;
            font-family: var(--font-mono);
            color: var(--accent-color);
            padding: 10px 20px;
            border: 1px solid var(--accent-color);
            border-radius: 4px;
            z-index: 100;
            transition: all 0.3s var(--easing);
            overflow: hidden;
        }
        
        .back-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--accent-color);
            transform: translateX(-100%);
            transition: transform 0.3s var(--easing);
            z-index: -1;
        }
        
        .back-btn:hover {
            color: var(--bg-color);
        }
        
        .back-btn:hover::before {
            transform: translateX(0);
        }
        
        /* Main Sections */
        section {
            min-height: 100vh;
            padding: 100px 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .section-title {
            font-size: 32px;
            margin-bottom: 40px;
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 70px;
            height: 4px;
            background-color: var(--accent-color);
        }
        
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s var(--easing);
        }
        
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Enhanced animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-20px);
            }
            60% {
                transform: translateY(-10px);
            }
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.4);
            }
            70% {
                transform: scale(1.05);
                box-shadow: 0 0 0 10px rgba(100, 255, 218, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(100, 255, 218, 0);
            }
        }
        
        .animate-on-scroll {
            animation-duration: 1s;
            animation-fill-mode: both;
            animation-play-state: paused;
        }
        
        .animate-fadeInUp {
            animation-name: fadeInUp;
        }
        
        .animate-fadeInLeft {
            animation-name: fadeInLeft;
        }
        
        .animate-fadeInRight {
            animation-name: fadeInRight;
        }
        
        .animate-scaleIn {
            animation-name: scaleIn;
        }
        
        .animate-bounce {
            animation-name: bounce;
        }
        
        .animate-pulse {
            animation-name: pulse;
        }
        
        /* About Section */
        .about-content {
            display: grid;
            grid-template-columns: 3fr 2fr;
            gap: 50px;
            align-items: center;
        }
        
        .about-text p {
            color: var(--secondary-color);
            margin-bottom: 20px;
            font-size: 18px;
            line-height: 1.7;
        }
        
        .about-text p strong {
            color: var(--text-color);
        }
        
        .profile-pic {
            position: relative;
            width: 100%;
            max-width: 300px;
            border-radius: 6px;
            overflow: hidden;
            filter: grayscale(20%);
            transition: all 0.3s var(--easing);
        }
        
        .profile-pic:hover {
            filter: grayscale(0);
            transform: translateY(-5px);
        }
        
        .profile-pic-container {
            position: relative;
            display: flex;
            justify-content: center;
        }
        
        .profile-pic::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px solid var(--accent-color);
            border-radius: 6px;
            z-index: -1;
            transform: translate(15px, 15px);
            transition: transform 0.3s var(--easing);
        }
        
        .profile-pic:hover::after {
            transform: translate(10px, 10px);
        }
        
        .profile-pic img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Skills Section */
        .skills {
            background-color: rgba(35, 53, 84, 0.1);
            position: relative;
        }
        
        .rpg-card {
            background-color: rgba(15, 15, 15, 0.8);
            border: 3px solid var(--accent-color);
            border-radius: 10px;
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            box-shadow: 0 0 30px rgba(100, 255, 218, 0.15);
            position: relative;
            overflow: hidden;
        }

        .rpg-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(135deg, rgba(100, 255, 218, 0.1) 0%, transparent 50%, rgba(255, 82, 119, 0.05) 100%),
                url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2364ffda' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
            z-index: -1;
        }
        
        .character-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            border-bottom: 2px solid var(--tertiary-color);
            padding-bottom: 20px;
        }
        
        .character-avatar {
            width: 120px;
            height: 120px;
            border-radius: 10px;
            border: 2px solid var(--accent-color);
            overflow: hidden;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .character-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .character-details {
            flex: 1;
            padding-left: 30px;
        }
        
        .character-name {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-color);
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-family: var(--font-mono);
        }
        
        .character-class {
            font-size: 18px;
            color: var(--secondary-color);
            margin-bottom: 15px;
            font-style: italic;
        }
        
        .character-level {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .level-label {
            font-family: var(--font-mono);
            font-size: 14px;
            color: var(--secondary-color);
            margin-right: 10px;
        }
        
        .level-value {
            font-family: var(--font-mono);
            font-size: 24px;
            color: var(--text-color);
            font-weight: bold;
        }
        
        .experience-bar {
            width: 100%;
            height: 8px;
            background-color: var(--tertiary-color);
            border-radius: 4px;
            margin-top: 5px;
            overflow: hidden;
        }
        
        .experience-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-color), var(--hover-color));
            width: 75%;
            border-radius: 4px;
            transition: width 1.5s var(--easing);
        }
        
        .stats-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .primary-stats, .secondary-stats {
            border: 1px solid var(--tertiary-color);
            border-radius: 8px;
            padding: 20px;
            background-color: rgba(10, 10, 10, 0.4);
        }
        
        .stat-category-title {
            color: var(--accent-color);
            font-family: var(--font-mono);
            font-size: 16px;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
            border-bottom: 1px solid var(--tertiary-color);
            padding-bottom: 10px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .stat-icon {
            width: 30px;
            height: 30px;
            background-color: var(--tertiary-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            color: var(--accent-color);
            font-size: 14px;
        }
        
        .stat-details {
            flex: 1;
        }
        
        .stat-name {
            font-family: var(--font-mono);
            font-size: 14px;
            color: var(--secondary-color);
            margin-bottom: 5px;
        }
        
        .stat-bar {
            position: relative;
            width: 100%;
            height: 10px;
            background-color: var(--tertiary-color);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .stat-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: linear-gradient(90deg, var(--accent-color), var(--hover-color));
            border-radius: 5px;
            transition: width 1.5s var(--easing);
        }
        
        .stat-value {
            position: absolute;
            right: -25px;
            top: -5px;
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--text-color);
            background-color: var(--tertiary-color);
            border-radius: 10px;
            padding: 2px 8px;
        }
        
        .special-abilities {
            border: 1px solid var(--tertiary-color);
            border-radius: 8px;
            padding: 20px;
            background-color: rgba(10, 10, 10, 0.4);
        }
        
        .ability-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed var(--tertiary-color);
        }
        
        .ability-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .ability-name {
            font-family: var(--font-mono);
            font-size: 16px;
            color: var(--accent-color);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        
        .ability-name i {
            margin-right: 10px;
        }
        
        .ability-description {
            font-size: 14px;
            color: var(--secondary-color);
            line-height: 1.5;
        }
        
        /* Media Queries */
        @media (max-width: 768px) {
            .stats-container {
                grid-template-columns: 1fr;
            }
            
            .character-info {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            
            .character-details {
                padding-left: 0;
                padding-top: 20px;
            }
        }
        
        /* Skills Container */
        .skills-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .skill-card {
            background-color: rgba(15, 15, 15, 0.6);
            border: 1px solid var(--tertiary-color);
            border-radius: 8px;
            padding: 30px;
            transition: all 0.3s var(--easing);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(5px);
        }
        
        .skill-card::before {
            content: "";
            position: absolute;
            top: -2px;
            left: -2px;
            width: calc(100% + 4px);
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
            animation: scanline 2s linear infinite;
            opacity: 0;
            transition: opacity 0.3s var(--easing);
        }
        
        .skill-card:hover::before {
            opacity: 1;
        }
        
        @keyframes scanline {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
        
        .skill-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            border-color: var(--accent-color);
        }
        
        .skill-card h3 {
            font-size: 24px;
            margin-bottom: 20px;
            color: var(--text-color);
            display: flex;
            align-items: center;
        }
        
        .skill-card h3 i {
            margin-right: 10px;
            color: var(--accent-color);
        }
        
        .skill-item {
            margin-bottom: 15px;
        }
        
        .skill-name {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-family: var(--font-mono);
            font-size: 16px;
            color: var(--secondary-color);
        }
        
        .skill-bar {
            width: 100%;
            height: 6px;
            background-color: var(--tertiary-color);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }
        
        .skill-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: var(--accent-color);
            border-radius: 3px;
            width: 0;
            transition: width 1.5s var(--easing);
        }
        
        /* Experience Section */
        .timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .timeline::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 100%;
            background-color: var(--tertiary-color);
            transform: translateX(-50%);
        }
        
        .timeline-item {
            position: relative;
            width: 45%;
            margin-bottom: 60px;
            opacity: 0;
            transition: all 0.5s var(--easing);
        }
        
        .timeline-item.active {
            opacity: 1;
        }
        
        .timeline-item:nth-child(odd) {
            left: 0;
            transform: translateX(-30px);
        }
        
        .timeline-item:nth-child(odd).active {
            transform: translateX(0);
        }
        
        .timeline-item:nth-child(even) {
            left: 55%;
            transform: translateX(30px);
        }
        
        .timeline-item:nth-child(even).active {
            transform: translateX(0);
        }
        
        .timeline-icon {
            position: absolute;
            top: 20px;
            width: 40px;
            height: 40px;
            background-color: var(--bg-color);
            border: 2px solid var(--accent-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--accent-color);
            z-index: 1;
        }
        
        .timeline-item:nth-child(odd) .timeline-icon {
            right: -65px;
        }
        
        .timeline-item:nth-child(even) .timeline-icon {
            left: -65px;
        }
        
        .timeline-content {
            position: relative;
            padding: 30px;
            background-color: rgba(15, 15, 15, 0.6);
            border: 1px solid var(--tertiary-color);
            border-radius: 8px;
            backdrop-filter: blur(5px);
            transition: all 0.3s var(--easing);
        }
        
        .timeline-content:hover {
            border-color: var(--accent-color);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .timeline-content::before {
            content: "";
            position: absolute;
            top: 20px;
            width: 20px;
            height: 20px;
            background-color: var(--bg-color);
            border-top: 1px solid var(--tertiary-color);
            border-right: 1px solid var(--tertiary-color);
            transform: rotate(45deg);
        }
        
        .timeline-item:nth-child(odd) .timeline-content::before {
            right: -11px;
        }
        
        .timeline-item:nth-child(even) .timeline-content::before {
            left: -11px;
            transform: rotate(-135deg);
        }
        
        .timeline-date {
            font-family: var(--font-mono);
            color: var(--accent-color);
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .timeline-title {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        .timeline-company {
            font-size: 16px;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }
        
        .timeline-description {
            color: var(--secondary-color);
            line-height: 1.6;
        }
        
        /* Projects Section */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            column-gap: 80px;
            row-gap: 60px;
        }
        
        /* Updated project card styles */
        .project-card {
            display: flex;
            flex-direction: column;
            height: 380px;
            position: relative;
        }

        .project-header {
            padding: 15px 20px;
            border-bottom: 1px solid var(--tertiary-color);
            background-color: rgba(15, 15, 15, 0.8);
            z-index: 5;
        }

        .view-project-btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: var(--accent-color);
            color: var(--bg-color);
            border-radius: 4px;
            font-family: var(--font-mono);
            font-size: 14px;
            transition: all 0.3s var(--easing);
            text-align: center;
            width: 100%;
        }
        
        .view-project-btn i {
            margin-left: 8px;
            transition: transform 0.3s var(--easing);
        }
        
        .view-project-btn:hover {
            background-color: var(--hover-color);
            transform: translateY(-2px);
        }

        .view-project-btn:hover i {
            transform: translateX(5px);
        }
        
        .project-image {
            height: 180px;
            object-fit: cover;
        }
        
        .project-content {
            padding: 20px;
            position: relative;
            min-height: 150px; /* Ensure enough space for links */
        }
        
        .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .project-tag {
            font-family: var(--font-mono);
            font-size: 12px;
            padding: 3px 8px;
            background-color: var(--tertiary-color);
            color: var(--text-color);
            border-radius: 4px;
        }
        
        .project-title {
            font-size: 20px;
            margin-bottom: 10px;
            transition: color 0.3s var(--easing);
        }
        
        .project-card:hover .project-title {
            color: var(--accent-color);
        }
        
        .project-description {
            color: var(--secondary-color);
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .project-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .project-link {
            font-size: 18px;
            color: var(--bg-color);
            background-color: var(--accent-color);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s var(--easing);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .project-link:hover {
            background-color: var(--hover-color);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        /* Contact Section */
        .contact {
            position: relative;
        }
        
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        
        .contact-form {
            background-color: rgba(15, 15, 15, 0.6);
            border: 1px solid var(--tertiary-color);
            border-radius: 8px;
            padding: 40px;
            backdrop-filter: blur(5px);
            transition: all 0.3s var(--easing);
        }
        
        .contact-form:hover {
            border-color: var(--accent-color);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-family: var(--font-mono);
            font-size: 14px;
            color: var(--secondary-color);
        }
        
        .form-input,
        .form-textarea {
            width: 100%;
            padding: 12px;
            background-color: rgba(35, 53, 84, 0.3);
            border: 1px solid var(--tertiary-color);
            border-radius: 4px;
            font-family: var(--font-sans);
            font-size: 16px;
            color: var(--text-color);
            transition: all 0.3s var(--easing);
        }
        
        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 2px rgba(100, 255, 218, 0.2);
        }
        
        .form-textarea {
            resize: vertical;
            min-height: 120px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background-color: transparent;
            border: 1px solid var(--accent-color);
            border-radius: 4px;
            font-family: var(--font-mono);
            font-size: 16px;
            color: var(--accent-color);
            cursor: pointer;
            transition: all 0.3s var(--easing);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--accent-color);
            transform: translateX(-100%);
            transition: transform 0.3s var(--easing);
            z-index: -1;
        }
        
        .btn:hover {
            color: var(--bg-color);
        }
        
        .btn:hover::before {
            transform: translateX(0);
        }
        
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 15px;
            transition: transform 0.3s var(--easing);
        }
        
        .contact-item:hover {
            transform: translateX(5px);
        }
        
        .contact-icon {
            width: 50px;
            height: 50px;
            background-color: rgba(15, 15, 15, 0.6);
            border: 1px solid var(--tertiary-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: var(--accent-color);
            transition: all 0.3s var(--easing);
        }
        
        .contact-item:hover .contact-icon {
            background-color: var(--accent-color);
            color: var(--bg-color);
        }
        
        .contact-text {
            flex: 1;
        }
        
        .contact-label {
            font-family: var(--font-mono);
            font-size: 14px;
            color: var(--secondary-color);
            margin-bottom: 5px;
        }
        
        .contact-value {
            font-size: 16px;
            color: var(--text-color);
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        
        .social-link {
            width: 45px;
            height: 45px;
            background-color: rgba(15, 15, 15, 0.6);
            border: 1px solid var(--tertiary-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: var(--accent-color);
            transition: all 0.3s var(--easing);
        }
        
        .social-link:hover {
            background-color: var(--accent-color);
            color: var(--bg-color);
            transform: translateY(-5px);
        }
        
        /* Footer */
        .footer {
            padding: 30px 0;
            text-align: center;
            font-family: var(--font-mono);
            font-size: 14px;
            color: var(--secondary-color);
            border-top: 1px solid var(--tertiary-color);
        }
        
        .footer .heart {
            color: var(--hover-color);
        }
        
        /* Hero Section */
        .hero {
            position: relative;
        }
        
        .hero-subtitle {
            font-family: var(--font-mono);
            color: var(--accent-color);
            font-size: 16px;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.8s var(--easing) forwards;
            animation-delay: 1.5s;
        }
        
        .hero-title {
            font-size: 80px;
            line-height: 1.1;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.8s var(--easing) forwards;
            animation-delay: 1.7s;
        }
        
        .hero-description {
            font-size: 24px;
            max-width: 600px;
            color: var(--secondary-color);
            margin-bottom: 40px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.8s var(--easing) forwards;
            animation-delay: 1.9s;
        }
        
        /* Glitch Text Effect */
        .glitch {
            position: relative;
            color: var(--text-color);
            font-weight: bold;
        }
        
        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }
        
        .glitch::before {
            color: var(--hover-color);
            z-index: -1;
            animation: glitch-anim 0.3s infinite ease alternate-reverse;
        }
        
        .glitch::after {
            color: var(--accent-color);
            z-index: -2;
            animation: glitch-anim2 0.3s infinite ease alternate-reverse;
        }
        
        @keyframes glitch-anim {
            0% {
                clip-path: inset(20% 0 80% 0);
                transform: translate(-1px, 1px);
            }
            20% {
                clip-path: inset(30% 0 70% 0);
                transform: translate(1px, -1px);
            }
            40% {
                clip-path: inset(40% 0 60% 0);
                transform: translate(2px, 2px);
            }
            60% {
                clip-path: inset(10% 0 90% 0);
                transform: translate(-2px, -2px);
            }
            80% {
                clip-path: inset(50% 0 50% 0);
                transform: translate(1px, -1px);
            }
            100% {
                clip-path: inset(70% 0 30% 0);
                transform: translate(-1px, 1px);
            }
        }
        
        @keyframes glitch-anim2 {
            0% {
                clip-path: inset(10% 0 90% 0);
                transform: translate(1px, -1px);
            }
            20% {
                clip-path: inset(20% 0 80% 0);
                transform: translate(-1px, 1px);
            }
            40% {
                clip-path: inset(30% 0 70% 0);
                transform: translate(2px, -2px);
            }
            60% {
                clip-path: inset(40% 0 60% 0);
                transform: translate(-2px, 2px);
            }
            80% {
                clip-path: inset(50% 0 50% 0);
                transform: translate(1px, 1px);
            }
            100% {
                clip-path: inset(60% 0 40% 0);
                transform: translate(-1px, -1px);
            }
        }
        
        /* Typewriter Animation */
        .typewriter {
            font-family: var(--font-mono);
            overflow: hidden;
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: 0.05em;
        }
        
        .cursor {
            display: inline-block;
            width: 3px;
            height: 0.8em;
            background-color: var(--accent-color);
            margin-left: 5px;
            vertical-align: middle;
            animation: blink 1s step-end infinite;
        }
        
        @keyframes blink {
            from, to { opacity: 1; }
            50% { opacity: 0; }
        }
        
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--accent-color) }
        }
        
        /* Animations */
        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes float {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0);
            }
        }
        
        /* Media Queries */
        @media (max-width: 1200px) {
            section {
                padding: 100px 100px;
            }
            
            .hero-title {
                font-size: 70px;
            }
        }
        
        @media (max-width: 768px) {
            section {
                padding: 100px 50px;
            }
            
            .hero-title {
                font-size: 50px;
            }
            
            .hero-description {
                font-size: 18px;
            }
            
            .nav-container {
                padding: 20px 20px;
            }
            
            .logo {
                left: 20px;
            }
        }
        
        @media (max-width: 480px) {
            section {
                padding: 80px 30px;
            }
            
            .hero-title {
                font-size: 40px;
            }
            
            .hero-description {
                font-size: 16px;
            }
        }
        
        /* Easter Eggs & Fun Sections */
        .konami-activated {
            animation: glitchScreen 0.5s infinite;
        }
        
        @keyframes glitchScreen {
            0% {
                filter: hue-rotate(0deg) invert(0%);
            }
            25% {
                filter: hue-rotate(90deg) invert(10%);
            }
            50% {
                filter: hue-rotate(180deg) invert(0%);
            }
            75% {
                filter: hue-rotate(270deg) invert(10%);
            }
            100% {
                filter: hue-rotate(360deg) invert(0%);
            }
        }
        
        /* Interactive Terminal */
        .terminal-section {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 50px auto;
            overflow: hidden;
            display: none;
        }
        
        .terminal {
            background-color: rgba(10, 10, 10, 0.9);
            border-radius: 8px;
            border: 1px solid var(--accent-color);
            padding: 20px;
            font-family: var(--font-mono);
            color: var(--accent-color);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            max-height: 400px;
            overflow-y: auto;
        }
        
        .terminal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--tertiary-color);
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .terminal-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .terminal-buttons {
            display: flex;
            gap: 8px;
        }
        
        .terminal-button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        
        .terminal-close {
            background-color: #ff5f56;
        }
        
        .terminal-minimize {
            background-color: #ffbd2e;
        }
        
        .terminal-expand {
            background-color: #27c93f;
        }
        
        .terminal-prompt {
            display: flex;
            margin-bottom: 10px;
        }
        
        .terminal-user {
            color: #64ffda;
            margin-right: 8px;
        }
        
        .terminal-at {
            color: #f8f8f8;
        }
        
        .terminal-path {
            color: #bd93f9;
            margin-right: 8px;
        }
        
        .terminal-dollar {
            color: #f8f8f8;
            margin-right: 8px;
        }
        
        .terminal-input {
            flex: 1;
            background: transparent;
            border: none;
            color: var(--text-color);
            font-family: var(--font-mono);
            font-size: 14px;
            caret-color: var(--accent-color);
            outline: none;
        }
        
        .terminal-output {
            margin-top: 10px;
            line-height: 1.5;
            white-space: pre-wrap;
        }
        
        .terminal-output ul {
            list-style-type: none;
            padding-left: 0;
        }
        
        .terminal-output ul li {
            margin-bottom: 5px;
        }
        
        /* 3D Cube */
        .cube-container {
            perspective: 800px;
            width: 200px;
            height: 200px;
            position: relative;
            margin: 50px auto;
            cursor: grab;
            display: none;
        }
        
        .cube {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }
        
        .cube-face {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 2px solid var(--accent-color);
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(15, 15, 15, 0.8);
            box-shadow: 0 0 10px rgba(100, 255, 218, 0.3) inset;
            backface-visibility: visible;
            font-size: 24px;
            color: var(--accent-color);
            text-align: center;
            padding: 20px;
        }
        
        .cube-face i {
            font-size: 48px;
            margin-bottom: 10px;
        }
        
        .cube-front {
            transform: translateZ(100px);
        }
        
        .cube-back {
            transform: rotateY(180deg) translateZ(100px);
        }
        
        .cube-right {
            transform: rotateY(90deg) translateZ(100px);
        }
        
        .cube-left {
            transform: rotateY(-90deg) translateZ(100px);
        }
        
        .cube-top {
            transform: rotateX(90deg) translateZ(100px);
        }
        
        .cube-bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
        
        /* Matrix Code Rain */
        #matrix-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0;
            transition: opacity 1s ease;
            pointer-events: none;
        }
        
        .show-matrix #matrix-canvas {
            opacity: 0.15;
        }
        
        /* Secret Button */
        .secret-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 15px;
            height: 15px;
            background-color: var(--bg-color);
            border: 1px solid var(--bg-color);
            border-radius: 50%;
            cursor: pointer;
            z-index: 99;
            opacity: 0.3;
            transition: all 0.3s var(--easing);
        }
        
        .secret-button:hover {
            opacity: 1;
            border-color: var(--accent-color);
            transform: scale(1.2);
        }
        
        /* Fun Sections */
        .fun-sections {
            padding-top: 50px;
            padding-bottom: 100px;
        }
        
        .fun-section {
            margin-top: 50px;
            padding: 30px;
            background-color: rgba(15, 15, 15, 0.6);
            border: 1px solid var(--tertiary-color);
            border-radius: 8px;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
            backdrop-filter: blur(5px);
            transition: all 0.3s var(--easing);
        }
        
        .fun-section:hover {
            border-color: var(--accent-color);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .fun-section-title {
            font-size: 24px;
            margin-bottom: 20px;
            color: var(--text-color);
            text-align: center;
        }
        
        /* Particle Network */
        .particle-container {
            width: 100%;
            height: 300px;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }
        
        #particle-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #0f0f0f;
        }
        
        /* Audio Visualizer */
        .audio-container {
            width: 100%;
            height: 300px;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            background-color: #0f0f0f;
        }
        
        #audio-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .audio-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            align-items: center;
            background-color: rgba(35, 53, 84, 0.7);
            padding: 10px 20px;
            border-radius: 50px;
            z-index: 1;
        }
        
        .audio-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--accent-color);
            color: var(--bg-color);
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s var(--easing);
        }
        
        .audio-btn:hover {
            background-color: var(--hover-color);
            transform: scale(1.1);
        }
        
        #volume-control {
            -webkit-appearance: none;
            appearance: none;
            width: 100px;
            height: 6px;
            background: var(--tertiary-color);
            border-radius: 3px;
            outline: none;
        }
        
        #volume-control::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent-color);
            cursor: pointer;
        }
        
        #visualization-type {
            background-color: var(--tertiary-color);
            color: var(--text-color);
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            font-family: var(--font-mono);
            font-size: 14px;
            outline: none;
            cursor: pointer;
        }
        
        /* Typing Game */
        .typing-game {
            background-color: rgba(35, 53, 84, 0.3);
            padding: 20px;
            border-radius: 8px;
        }
        
        .typing-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-family: var(--font-mono);
            color: var(--accent-color);
        }
        
        .typing-text {
            background-color: rgba(15, 15, 15, 0.7);
            padding: 20px;
            border-radius: 8px;
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 20px;
            color: var(--secondary-color);
            height: 100px;
            overflow-y: auto;
            white-space: pre-wrap;
        }
        
        #typing-input {
            width: 100%;
            padding: 15px;
            background-color: rgba(15, 15, 15, 0.5);
            border: 1px solid var(--tertiary-color);
            border-radius: 8px;
            font-family: var(--font-sans);
            font-size: 16px;
            color: var(--text-color);
            resize: none;
            height: 80px;
            margin-bottom: 20px;
        }
        
        #typing-input:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 2px rgba(100, 255, 218, 0.2);
        }
        
        /* Easter Eggs & Fun Sections */
        .konami-activated {
            animation: glitchScreen 0.5s infinite;
        }
        
        @keyframes glitchScreen {
            0% {
                filter: hue-rotate(0deg) invert(0%);
            }
            25% {
                filter: hue-rotate(90deg) invert(10%);
            }
            50% {
                filter: hue-rotate(180deg) invert(0%);
            }
            75% {
                filter: hue-rotate(270deg) invert(10%);
            }
            100% {
                filter: hue-rotate(360deg) invert(0%);
            }
        }

        /* New Easter Eggs and Humor Elements */
        .hover-text {
            position: relative;
        }
        
        .hover-text:hover::after {
            content: attr(data-hover-text);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--bg-color);
            color: var(--accent-color);
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid var(--accent-color);
            font-size: 14px;
            white-space: nowrap;
            z-index: 100;
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateX(-50%) translateY(10px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        
        .secret-message {
            position: absolute;
            font-size: 0;
            color: transparent;
            opacity: 0;
            transition: all 0.5s ease;
        }
        
        .secret-message.revealed {
            font-size: 16px;
            color: var(--accent-color);
            opacity: 1;
        }
        
        .shake-element {
            animation: shake 0.5s ease-in-out;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        .spin-hover:hover {
            animation: spin 0.5s ease-in-out;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Special ability animations */
        @keyframes powerPulse {
            0% { box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(100, 255, 218, 0); }
            100% { box-shadow: 0 0 0 0 rgba(100, 255, 218, 0); }
        }
        
        .power-active {
            animation: powerPulse 1.5s infinite;
            background-color: rgba(100, 255, 218, 0.1);
            border-color: var(--accent-color);
        }
        
        .rgb-text {
            background: linear-gradient(90deg, 
                #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, 
                #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000);
            background-size: 1000% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: rainbow 8s linear infinite;
        }
        
        @keyframes rainbow { 
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }
        
        .floating-icons {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9998;
            pointer-events: none;
        }
        
        .floating-icon {
            position: absolute;
            font-size: 24px;
            animation: float-up 10s linear forwards;
            color: var(--accent-color);
            opacity: 0.7;
            text-shadow: 0 0 5px var(--bg-color);
        }
        
        @keyframes float-up {
            0% {
                opacity: 0.7;
                transform: translateY(100vh) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: translateY(-50px) rotate(360deg);
            }
        }
        
        .camera-flash {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            opacity: 0;
            z-index: 9997;
            pointer-events: none;
        }
        
        @keyframes flash {
            0%, 100% { opacity: 0; }
            50% { opacity: 0.8; }
        }
        
        @keyframes steam {
            0% { transform: translateY(0) scale(1); opacity: 0.7; }
            100% { transform: translateY(-20px) scale(1.5); opacity: 0; }
        }
        
        /* Developer Console Message */
        .console-message {
            display: none;
        }
        
        .coffee-cup {
            position: fixed;
            bottom: 30px;
            right: 70px;
            width: 20px;
            height: 20px;
            opacity: 0.3;
            z-index: 99;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .coffee-cup:hover {
            opacity: 1;
            transform: scale(1.2);
            filter: drop-shadow(0 0 5px var(--accent-color));
        }
        
        .coffee-steam {
            position: absolute;
            top: -10px;
            left: 5px;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.2);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .coffee-cup:hover .coffee-steam {
            animation: steam 2s ease-out infinite;
            opacity: 0.7;
        }

        /* Add these new styles to your CSS */
        .project-card {
            display: flex;
            flex-direction: column;
            height: 380px;  /* Increased height to accommodate footer */
        }

        .project-content {
            flex: 1;
            padding: 20px;
        }

        .project-footer {
            padding: 15px 20px;
            border-top: 1px solid var(--tertiary-color);
            background-color: rgba(15, 15, 15, 0.8);
        }

        .view-project-btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: var(--accent-color);
            color: var(--bg-color);
            border-radius: 4px;
            font-family: var(--font-mono);
            font-size: 14px;
            transition: all 0.3s var(--easing);
            text-align: center;
            width: 100%;
        }

        .view-project-btn i {
            margin-left: 8px;
            transition: transform 0.3s var(--easing);
        }

        .view-project-btn:hover {
            background-color: var(--hover-color);
            transform: translateY(-2px);
        }

        .view-project-btn:hover i {
            transform: translateX(5px);
        }
    </style>
</head>
<body>
    <!-- Space Portfolio Button -->
    <a href="professional.html" class="space-portfolio-btn">
        <i class="fas fa-briefcase"></i> Space Portfolio
    </a>
    
    <!-- Loader -->
    <div class="loader">
        <div class="loader-text">
            <span>Initializing</span>
        </div>
    </div>
    
    <!-- Noise Effect -->
    <div class="noise"></div>
    
    <!-- Custom Cursor -->
    <div class="custom-cursor"></div>
    <div class="dot"></div>
    
    <!-- Navigation -->
    <div class="logo">A.S</div>
    <nav class="nav-container">
        <a href="#about" class="nav-link hover-text" data-hover-text="Who's this mysterious code wizard?">About</a>
        <a href="#experience" class="nav-link hover-text" data-hover-text="Where I've caused bugs... and fixed them!">Experience</a>
        <a href="#skills" class="nav-link hover-text" data-hover-text="My digital superpowers">Skills</a>
        <a href="#projects" class="nav-link hover-text" data-hover-text="Stuff I built while drinking coffee">Projects</a>
        <a href="#contact" class="nav-link hover-text" data-hover-text="Send me a digital carrier pigeon">Contact</a>
        <a href="#" class="nav-link hover-text spin-hover" data-hover-text="Do a barrel roll!" style="font-size: 0.8em; opacity: 0.7;">🔄</a>
    </nav>
    
    <!-- Back to Main Site Button -->
    <a href="#" class="back-btn hover-text" data-hover-text="Escape while you still can!">
        <span><i class="fas fa-arrow-left"></i> Back to Main</span>
    </a>
    
    <!-- Coffee Cup Easter Egg -->
    <div class="coffee-cup" id="coffee-cup">
        <i class="fas fa-mug-hot" style="color: var(--accent-color);"></i>
        <div class="coffee-steam"></div>
    </div>
    
    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-subtitle">I'm</div>
        <h1 class="hero-title">
            <span id="typewriter-text" class="typewriter">Abhinav Singh.</span>
            <span class="cursor"></span>
        </h1>
        <h2 class="hero-description">I craft <span class="glitch" data-text="digital experiences">digital experiences</span> that live on the web.</h2>
        <div class="secret-message" id="hero-secret">Psst... try the Konami code: ↑↑↓↓←→←→BA</div>
    </section>
    
    <!-- About Section -->
    <section class="about" id="about">
        <h2 class="section-title animate-on-scroll animate-fadeInUp">About Me</h2>
        <div class="about-content">
            <div class="about-text animate-on-scroll animate-fadeInLeft">
                <p>Hello! I'm Abhinav, a passionate web developer with a keen interest in creating elegant solutions to complex problems. My journey in web development began over 5 years ago, and I've been in love with crafting digital experiences ever since.</p>
                <p>I specialize in building modern, responsive web applications using <strong>JavaScript</strong>, <strong>React</strong>, and <strong>Node.js</strong>. I enjoy turning complex problems into simple, beautiful, and intuitive designs.</p>
                <p>When I'm not coding, you'll find me exploring new technologies, contributing to open-source projects, or engaging in design discussions. I believe in continuous learning and pushing the boundaries of what's possible on the web.</p>
                <p class="hover-text" data-hover-text="WARNING: May talk about JavaScript for hours without stopping!" style="font-style: italic; font-size: 0.9em; color: var(--accent-color);">Fun fact: I once debugged code in my sleep. My roommate heard me muttering "console.log" at 3 AM.</p>
            </div>
            <div class="profile-pic-container animate-on-scroll animate-fadeInRight">
                <div class="profile-pic hover-text" data-hover-text="Oh no, you found my awkward professional photo!">
                    <img src="assets/images/profile.jpg" alt="Abhinav Singh">
                </div>
            </div>
        </div>
    </section>
    
    <!-- Skills Section -->
    <section class="skills" id="skills">
        <h2 class="section-title animate-on-scroll animate-fadeInUp">Skills</h2>
        
        <div class="rpg-card animate-on-scroll animate-scaleIn">
            <div class="character-info">
                <div class="character-avatar hover-text" data-hover-text="Click for secret power!">
                    <img src="assets/images/avatar.jpg" alt="Abhinav Singh" id="character-avatar">
                </div>
                <div class="character-details">
                    <div class="character-name hover-text" data-hover-text="Not my final form">Abhinav Singh</div>
                    <div class="character-class hover-text" data-hover-text="Coffee consumption: Legendary">Full Stack Developer | Lvl 5</div>
                    <div class="character-level">
                        <div class="level-label">EXPERIENCE:</div>
                        <div class="level-value">5750 / 7500</div>
                    </div>
                    <div class="experience-bar">
                        <div class="experience-fill"></div>
                    </div>
                </div>
            </div>
            
            <div class="stats-container">
                <div class="primary-stats">
                    <div class="stat-category-title">Primary Skills</div>
                    
                    <div class="stat-item">
                        <div class="stat-icon"><i class="fab fa-js"></i></div>
                        <div class="stat-details">
                            <div class="stat-name">JavaScript</div>
                            <div class="stat-bar">
                                <div class="stat-fill" style="width: 90%"></div>
                                <div class="stat-value">9/10</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-item">
                        <div class="stat-icon"><i class="fab fa-html5"></i></div>
                        <div class="stat-details">
                            <div class="stat-name">HTML5 / CSS3</div>
                            <div class="stat-bar">
                                <div class="stat-fill" style="width: 95%"></div>
                                <div class="stat-value">9.5/10</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-item">
                        <div class="stat-icon"><i class="fab fa-react"></i></div>
                        <div class="stat-details">
                            <div class="stat-name">React</div>
                            <div class="stat-bar">
                                <div class="stat-fill" style="width: 88%"></div>
                                <div class="stat-value">8.8/10</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-item">
                        <div class="stat-icon"><i class="fab fa-node-js"></i></div>
                        <div class="stat-details">
                            <div class="stat-name">Node.js</div>
                            <div class="stat-bar">
                                <div class="stat-fill" style="width: 87%"></div>
                                <div class="stat-value">8.7/10</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="secondary-stats">
                    <div class="stat-category-title">Secondary Skills</div>
                    
                    <div class="stat-item">
                        <div class="stat-icon"><i class="fab fa-typescript"></i></div>
                        <div class="stat-details">
                            <div class="stat-name">TypeScript</div>
                            <div class="stat-bar">
                                <div class="stat-fill" style="width: 85%"></div>
                                <div class="stat-value">8.5/10</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-item">
                        <div class="stat-icon"><i class="fas fa-database"></i></div>
                        <div class="stat-details">
                            <div class="stat-name">MongoDB</div>
                            <div class="stat-bar">
                                <div class="stat-fill" style="width: 80%"></div>
                                <div class="stat-value">8/10</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-item">
                        <div class="stat-icon"><i class="fas fa-mobile-alt"></i></div>
                        <div class="stat-details">
                            <div class="stat-name">Responsive Design</div>
                            <div class="stat-bar">
                                <div class="stat-fill" style="width: 92%"></div>
                                <div class="stat-value">9.2/10</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-item">
                        <div class="stat-icon"><i class="fab fa-git-alt"></i></div>
                        <div class="stat-details">
                            <div class="stat-name">Git / GitHub</div>
                            <div class="stat-bar">
                                <div class="stat-fill" style="width: 88%"></div>
                                <div class="stat-value">8.8/10</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="special-abilities">
                <div class="stat-category-title">Special Abilities</div>
                
                <div class="ability-item">
                    <div class="ability-name"><i class="fas fa-bolt"></i> Full Stack Mastery</div>
                    <div class="ability-description">Can seamlessly navigate between frontend and backend development, creating complete end-to-end solutions with powerful UIs and robust server implementations.</div>
                </div>
                
                <div class="ability-item">
                    <div class="ability-name"><i class="fas fa-magic"></i> Responsive Design Wizardry</div>
                    <div class="ability-description">Possesses the power to craft interfaces that adapt perfectly to any device size, ensuring an optimal user experience from desktop to mobile.</div>
                </div>
                
                <div class="ability-item">
                    <div class="ability-name"><i class="fas fa-bug"></i> Debugging Mastery</div>
                    <div class="ability-description">Enhanced ability to track down and eliminate even the most elusive bugs with logical thinking and systematic troubleshooting.</div>
                </div>

                <div class="ability-item hover-text" data-hover-text="Click to activate this power!" id="secret-ability">
                    <div class="ability-name"><i class="fas fa-question"></i> ??? Secret Ability ???</div>
                    <div class="ability-description">This mysterious power has not yet been unlocked. Perhaps you need to level up more?</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Experience Section -->
    <section class="experience" id="experience">
        <h2 class="section-title animate-on-scroll animate-fadeInUp">Experience</h2>
        <p style="text-align: center; color: var(--secondary-color); font-style: italic; margin-bottom: 40px;">Also known as "Places Where I've Pretended to Know What I'm Doing"</p>
        <div class="timeline">
            <div class="timeline-item animate-on-scroll animate-fadeInLeft">
                <div class="timeline-icon">
                    <i class="fas fa-briefcase"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">2021 - Present</div>
                    <h3 class="timeline-title">Senior Frontend Developer</h3>
                    <div class="timeline-company">Company A</div>
                    <div class="timeline-description">
                        Led the development of responsive web applications using React and TypeScript. Collaborated with the design team to implement new features and improve user experience. Mentored junior developers and contributed to code reviews.
                    </div>
                </div>
            </div>
            
            <div class="timeline-item animate-on-scroll animate-fadeInRight">
                <div class="timeline-icon">
                    <i class="fas fa-briefcase"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">2019 - 2021</div>
                    <h3 class="timeline-title">Web Developer</h3>
                    <div class="timeline-company">Company B</div>
                    <div class="timeline-description">
                        Developed and maintained multiple client websites. Implemented new features and ensured cross-browser compatibility. Worked closely with the design team to translate mockups into responsive layouts.
                    </div>
                </div>
            </div>
            
            <div class="timeline-item animate-on-scroll animate-fadeInLeft">
                <div class="timeline-icon">
                    <i class="fas fa-briefcase"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">2018 - 2019</div>
                    <h3 class="timeline-title">Junior Web Developer</h3>
                    <div class="timeline-company">Company C</div>
                    <div class="timeline-description">
                        Assisted in building websites using HTML, CSS, and JavaScript. Learned about responsive design and modern web development practices. Collaborated with senior developers on client projects.
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Projects Section -->
    <section class="projects" id="projects">
        <h2 class="section-title animate-on-scroll animate-fadeInUp">Projects</h2>
        <p style="text-align: center; color: var(--secondary-color); font-style: italic; margin-bottom: 40px;">A.K.A. "Things I Built When StackOverflow Was Down"</p>
        <div class="projects-grid">
            <!-- Neural Network Visualizer Project -->
            <div class="project-card animate-on-scroll animate-scaleIn">
                <div class="project-header">
                    <a href="neural-net-viz/index.html" class="view-project-btn">View Project <i class="fas fa-arrow-right"></i></a>
                </div>
                <img src="assets/images/project-neural-network.jpg" alt="Neural Network Visualizer" class="project-image">
                <div class="project-content">
                    <div class="project-tags">
                        <span class="project-tag">JavaScript</span>
                        <span class="project-tag">Machine Learning</span>
                        <span class="project-tag">TensorFlow.js</span>
                    </div>
                    <h3 class="project-title">Neural Network Visualizer</h3>
                    <p class="project-description">An interactive visualization tool that lets you design, train and visualize neural networks in real-time with different datasets.</p>
                </div>
            </div>

            <!-- Existing Projects -->
            <div class="project-card animate-on-scroll animate-scaleIn">
                <div class="project-header">
                    <a href="taskapp.html" class="view-project-btn">View Project <i class="fas fa-arrow-right"></i></a>
                </div>
                <img src="assets/images/project-task-app.jpg" alt="Task Management App" class="project-image">
                <div class="project-content">
                    <div class="project-tags">
                        <span class="project-tag">HTML/CSS</span>
                        <span class="project-tag">JavaScript</span>
                        <span class="project-tag">Firebase</span>
                    </div>
                    <h3 class="project-title">Task Management App</h3>
                    <p class="project-description">A collaborative task management application with real-time updates, user presence, and room-based collaboration features.</p>
                </div>
            </div>
            
            <div class="project-card animate-on-scroll animate-scaleIn">
                <div class="project-header">
                    <a href="business-landing-new/index.html" class="view-project-btn">View Project <i class="fas fa-arrow-right"></i></a>
                </div>
                <img src="assets/images/project-business-landing.jpg" alt="Business Landing Page" class="project-image">
                <div class="project-content">
                    <div class="project-tags">
                        <span class="project-tag">HTML/CSS</span>
                        <span class="project-tag">JavaScript</span>
                        <span class="project-tag">Responsive Design</span>
                    </div>
                    <h3 class="project-title">Business Landing Page</h3>
                    <p class="project-description">A modern, responsive landing page for businesses with smooth animations and interactive elements.</p>
                </div>
            </div>
            
            <div class="project-card animate-on-scroll animate-scaleIn">
                <div class="project-header">
                    <a href="discord-clone/index.html" class="view-project-btn">View Project <i class="fas fa-arrow-right"></i></a>
                </div>
                <img src="assets/images/project-discord.jpg" alt="Discord Clone" class="project-image">
                <div class="project-content">
                    <div class="project-tags">
                        <span class="project-tag">HTML/CSS</span>
                        <span class="project-tag">JavaScript</span>
                        <span class="project-tag">UI/UX</span>
                    </div>
                    <h3 class="project-title">Discord Clone</h3>
                    <p class="project-description">A faithful recreation of the Discord interface with responsive design and interactive features.</p>
                </div>
            </div>
            
            <div class="project-card animate-on-scroll animate-scaleIn">
                <div class="project-header">
                    <a href="ecommerce/index.html" class="view-project-btn">View Project <i class="fas fa-arrow-right"></i></a>
                </div>
                <img src="assets/images/project-ecommerce.jpg" alt="E-commerce Platform" class="project-image">
                <div class="project-content">
                    <div class="project-tags">
                        <span class="project-tag">HTML/CSS</span>
                        <span class="project-tag">JavaScript</span>
                        <span class="project-tag">E-commerce</span>
                    </div>
                    <h3 class="project-title">E-commerce Platform</h3>
                    <p class="project-description">A complete e-commerce solution with product listing, cart functionality, and checkout process.</p>
                </div>
            </div>

            <!-- Template Showcase Project -->
            <div class="project-card" data-category="web">
                <div class="project-header">
                    <a href="template-showcase/index.html" class="view-project-btn">View Project <i class="fas fa-arrow-right"></i></a>
                </div>
                <img src="template-showcase/assets/preview.jpg" alt="Template Showcase" class="project-image">
                <div class="project-content">
                    <div class="project-tags">
                        <span class="project-tag">HTML5</span>
                        <span class="project-tag">CSS3</span>
                        <span class="project-tag">JavaScript</span>
                        <span class="project-tag">Responsive Design</span>
                    </div>
                    <h3 class="project-title">Template Showcase</h3>
                    <p class="project-description">A modern platform showcasing professional website templates for small businesses. Features responsive design, interactive demos, and smooth animations.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Contact Section -->
    <section class="contact" id="contact">
        <h2 class="section-title animate-on-scroll animate-fadeInUp">Contact</h2>
        <p style="text-align: center; color: var(--secondary-color); font-style: italic; margin-bottom: 40px;">Promise I won't reply with "Have you tried turning it off and on again?"</p>
        <div class="contact-container">
            <div class="contact-form animate-on-scroll animate-fadeInLeft">
                <form id="contact-form">
                    <div class="form-group">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" id="name" class="form-input" required placeholder="Your name (or your robot overlord's designation)">
                    </div>
                    <div class="form-group">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" id="email" class="form-input" required placeholder="your@email.com (no spam, I promise)">
                    </div>
                    <div class="form-group">
                        <label for="subject" class="form-label">Subject</label>
                        <input type="text" id="subject" class="form-input" required placeholder="What's this about? (Wrong answers only)">
                    </div>
                    <div class="form-group">
                        <label for="message" class="form-label">Message</label>
                        <textarea id="message" class="form-textarea" rows="5" required placeholder="Your message here. Pro tip: Mention pizza to get a faster response."></textarea>
                    </div>
                    <button type="submit" class="btn">Send Message</button>
                </form>
            </div>
            <div class="contact-info animate-on-scroll animate-fadeInRight">
                <div class="contact-item animate-on-scroll animate-scaleIn">
                    <div class="contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="contact-text">
                        <div class="contact-label">Email</div>
                        <div class="contact-value">abhinav.singh@example.com</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer class="footer">
        <p>Designed & Built by Abhinav Singh with <span class="heart animate-on-scroll animate-pulse hover-text" data-hover-text="...and a concerning amount of caffeine">♥</span></p>
        <p style="font-size: 0.8em; margin-top: 10px; color: var(--tertiary-color);">© 2023 - Made with 37 cups of coffee, 14 pizza slices, and only 378 StackOverflow visits</p>
    </footer>
    
    <!-- Interactive Terminal Section -->
    <div class="terminal-section" id="terminal-section">
        <div class="terminal">
            <div class="terminal-header">
                <div class="terminal-buttons">
                    <div class="terminal-button terminal-close"></div>
                    <div class="terminal-button terminal-minimize"></div>
                    <div class="terminal-button terminal-expand"></div>
                </div>
                <div class="terminal-title">abhinav@portfolio:~</div>
            </div>
            <div class="terminal-content">
                <div class="terminal-output">
                    Welcome to Abhinav's Interactive Terminal!
                    Type 'help' to see available commands.
                </div>
                <div class="terminal-prompt">
                    <span class="terminal-user">abhinav</span><span class="terminal-at">@</span><span class="terminal-path">portfolio:~</span><span class="terminal-dollar">$</span>
                    <input type="text" class="terminal-input" id="terminal-input" autocomplete="off" spellcheck="false">
                </div>
            </div>
        </div>
    </div>
    
    <!-- Console Message Easter Egg -->
    <div class="console-message" id="console-message">
        Hey there curious developer! 👋
        
        Since you're looking at the console, you must be a developer too.
        Want to see something cool? Try typing the following function:
        
        showSecretMessage()
        
        P.S. There are a few more Easter eggs hidden in this site.
        Hint: Try clicking on the coffee cup, character avatar, and the secret ability.
    </div>
    
    <!-- 3D Cube Section -->
    <div class="cube-container" id="cube-container">
        <div class="cube" id="cube">
            <div class="cube-face cube-front">
                <i class="fas fa-code"></i>
                <div>Frontend</div>
            </div>
            <div class="cube-face cube-back">
                <i class="fas fa-server"></i>
                <div>Backend</div>
            </div>
            <div class="cube-face cube-right">
                <i class="fas fa-mobile-alt"></i>
                <div>Responsive</div>
            </div>
            <div class="cube-face cube-left">
                <i class="fas fa-paint-brush"></i>
                <div>Design</div>
            </div>
            <div class="cube-face cube-top">
                <i class="fas fa-database"></i>
                <div>Database</div>
            </div>
            <div class="cube-face cube-bottom">
                <i class="fas fa-cogs"></i>
                <div>DevOps</div>
            </div>
        </div>
    </div>

    <!-- Matrix Canvas -->
    <canvas id="matrix-canvas"></canvas>

    <!-- Secret Button -->
    <div class="secret-button" id="secret-button"></div>
    
    <script>
        // Loader
        window.addEventListener('load', () => {
            setTimeout(() => {
                document.querySelector('.loader').classList.add('hidden');
            }, 1500);
        });
        
        // Typewriter effect for name
        const typewriterText = document.getElementById('typewriter-text');
        const texts = ['Abhinav Singh', 'The Developer'];
        let textIndex = 0;
        let charIndex = 0;
        let isDeleting = false;
        let typeDelay = 100;
        
        function typeEffect() {
            const currentText = texts[textIndex];
            
            if (isDeleting) {
                // Remove character
                typewriterText.textContent = currentText.substring(0, charIndex - 1);
                charIndex--;
                typeDelay = 50;
            } else {
                // Add character
                typewriterText.textContent = currentText.substring(0, charIndex + 1);
                charIndex++;
                typeDelay = 150;
            }
            
            // Handle text completion or deletion
            if (!isDeleting && charIndex === currentText.length) {
                // Pause at end of typing
                typeDelay = 2000;
                isDeleting = true;
            } else if (isDeleting && charIndex === 0) {
                // Move to next text
                isDeleting = false;
                textIndex = (textIndex + 1) % texts.length;
                typeDelay = 500;
            }
            
            setTimeout(typeEffect, typeDelay);
        }
        
        // Start the typewriter effect after page load
        setTimeout(() => {
            typeEffect();
        }, 2000);
        
        // Scroll reveal animation - enhanced to replay animations
        function revealElements() {
            const animatedElements = document.querySelectorAll('.animate-on-scroll');
            const skillBars = document.querySelectorAll('.skill-progress');
            const windowHeight = window.innerHeight;
            
            animatedElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementBottom = element.getBoundingClientRect().bottom;
                const elementVisible = 150;
                
                // Check if element is in viewport
                if (elementTop < windowHeight - elementVisible && elementBottom > 0) {
                    element.style.animationPlayState = 'running';
                } else {
                    // Reset animation when element is not in viewport
                    element.style.animationPlayState = 'paused';
                    // Force DOM reflow to restart animation
                    void element.offsetWidth;
                }
            });
            
            // Animate skill bars when in viewport
            skillBars.forEach(bar => {
                const barTop = bar.getBoundingClientRect().top;
                const barBottom = bar.getBoundingClientRect().bottom;
                
                if (barTop < windowHeight - 100 && barBottom > 0) {
                    const width = bar.getAttribute('data-width');
                    bar.style.width = width;
                } else {
                    // Reset width when out of viewport
                    bar.style.width = '0';
                }
            });
            
            // Timeline items animation
            const timelineItems = document.querySelectorAll('.timeline-item');
            timelineItems.forEach(item => {
                const itemTop = item.getBoundingClientRect().top;
                const itemBottom = item.getBoundingClientRect().bottom;
                
                if (itemTop < windowHeight - 100 && itemBottom > 0) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });
            
            // Project cards staggered animation
            const projectCards = document.querySelectorAll('.project-card');
            projectCards.forEach((card, index) => {
                const cardTop = card.getBoundingClientRect().top;
                const cardBottom = card.getBoundingClientRect().bottom;
                
                if (cardTop < windowHeight - 100 && cardBottom > 0) {
                    setTimeout(() => {
                        card.classList.add('active');
                    }, 200 * index);
                } else {
                    card.classList.remove('active');
                }
            });
        }
        
        // Call the reveal function more frequently for smoother animations
        window.addEventListener('scroll', revealElements);
        window.addEventListener('resize', revealElements);
        
        // Create a more responsive animation system with IntersectionObserver
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (entry.target.classList.contains('animate-on-scroll')) {
                        entry.target.style.animationPlayState = 'running';
                    }
                } else {
                    if (entry.target.classList.contains('animate-on-scroll')) {
                        // Reset animation
                        entry.target.style.animationName = 'none';
                        // Force DOM reflow
                        void entry.target.offsetWidth;
                        // Restart animation
                        entry.target.style.animationName = '';
                    }
                }
            });
        }, observerOptions);
        
        // Observe all animated elements
        document.querySelectorAll('.animate-on-scroll').forEach(element => {
            observer.observe(element);
        });
        
        // Animate skill bars on scroll with better tracking
        const skillObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const width = entry.target.getAttribute('data-width');
                    entry.target.style.width = width;
                } else {
                    entry.target.style.width = '0';
                }
            });
        }, observerOptions);
        
        document.querySelectorAll('.skill-progress').forEach(bar => {
            skillObserver.observe(bar);
        });

        // Handle form submission
        const contactForm = document.getElementById('contact-form');
        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                // In a real implementation, you'd handle the form submission here
                alert('Form submission would be processed here in a real implementation.');
                contactForm.reset();
            });
        }
        
        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Custom Cursor
        const cursor = document.querySelector('.custom-cursor');
        const dot = document.querySelector('.dot');
        
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
            
            // Delay the dot movement for smooth effect
            setTimeout(() => {
                dot.style.left = e.clientX + 'px';
                dot.style.top = e.clientY + 'px';
            }, 100);
        });
        
        // Hover effect on links
        const links = document.querySelectorAll('a, .nav-link, button, .btn');
        
        links.forEach(link => {
            link.addEventListener('mouseenter', () => {
                cursor.classList.add('hover');
                dot.classList.add('hover');
            });
            
            link.addEventListener('mouseleave', () => {
                cursor.classList.remove('hover');
                dot.classList.remove('hover');
            });
        });
        
        // Terminal text effect for loader
        const loaderText = document.querySelector('.loader-text span');
        const originalText = loaderText.textContent;
        let dots = 0;
        
        const terminalEffect = setInterval(() => {
            dots = (dots + 1) % 4;
            let dotString = '.'.repeat(dots);
            loaderText.textContent = originalText + dotString;
        }, 300);
        
        setTimeout(() => {
            clearInterval(terminalEffect);
        }, 1500);
        
        // Hide cursor on mobile
        function isMobile() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }
        
        if (isMobile()) {
            cursor.style.display = 'none';
            dot.style.display = 'none';
        }
        
        // --- EASTER EGGS & FUN FEATURES ---
        
        // Ensure all elements are loaded before attaching events
        document.addEventListener('DOMContentLoaded', function() {
            // Identify all interactive elements for Easter eggs
            const secretAbility = document.getElementById('secret-ability');
            const characterAvatar = document.getElementById('character-avatar');
            const coffeeCup = document.getElementById('coffee-cup');
            const terminalSection = document.getElementById('terminal-section');
            const heroSecret = document.getElementById('hero-secret');
            const projectCards = document.querySelectorAll('.project-card');
            const spinElement = document.querySelector('.spin-hover');
            
            // Initialize all Easter eggs
            initKonamiCode();
            initSecretAbility();
            initCharacterAvatar();
            initCoffeeCup();
            initProjectCardEffects();
            initSpinEffect();
            initConsoleMessages();
            initKeyboardShortcuts();
            
            // 1. Konami Code Easter Egg
            function initKonamiCode() {
                const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
                let konamiIndex = 0;
                
                document.addEventListener('keydown', (e) => {
                    // Check for Konami code
                    if (e.key === konamiCode[konamiIndex]) {
                        konamiIndex++;
                        
                        if (konamiIndex === konamiCode.length) {
                            // Konami code completed
                            activateKonamiCode();
                            konamiIndex = 0;
                        }
                    } else {
                        konamiIndex = 0;
                    }
                });
            }
            
            // Activate Konami code effects
            function activateKonamiCode() {
                // Show terminal if it exists
                const terminalSection = document.getElementById('terminal-section');
                if (terminalSection) {
                    terminalSection.style.display = 'block';
                    terminalSection.scrollIntoView({ behavior: 'smooth' });
                }
                
                // Add visual effects
                document.body.classList.add('konami-activated');
                
                // Remove effects after 2 seconds
                setTimeout(() => {
                    document.body.classList.remove('konami-activated');
                }, 2000);
                
                // Show secret message if it exists
                const heroSecret = document.getElementById('hero-secret');
                if (heroSecret) {
                    heroSecret.classList.add('revealed');
                }
                
                // Alert user
                setTimeout(() => {
                    alert("🎮 KONAMI CODE ACTIVATED! 🎮\n\nYou've unlocked developer mode!\n\nTry typing 'matrix()' in the console to see something cool!");
                }, 500);
                
                // Trigger confetti
                if (typeof window.confetti === 'function') {
                    window.confetti();
                }
            }
            
            // 2. Secret Ability Easter Egg
            function initSecretAbility() {
                if (!secretAbility) return;
                
                let clickCount = 0;
                let powerActive = false;
                
                secretAbility.addEventListener('click', () => {
                    clickCount++;
                    
                    if (clickCount === 1) {
                        // First click - just change text
                        secretAbility.querySelector('.ability-name').innerHTML = '<i class="fas fa-coffee"></i> Caffeine Overdrive';
                        secretAbility.querySelector('.ability-description').textContent = 'Almost unlocked! Need more power... Click again!';
                        
                        // Add glowing effect
                        secretAbility.classList.add('shake-element');
                        setTimeout(() => {
                            secretAbility.classList.remove('shake-element');
                        }, 500);
                        
                        // Brief matrix flash
                        document.body.classList.add('show-matrix');
                        setTimeout(() => {
                            document.body.classList.remove('show-matrix');
                        }, 500);
                    } 
                    else if (clickCount === 2) {
                        // Second click - power charging
                        secretAbility.querySelector('.ability-name').innerHTML = '<i class="fas fa-bolt"></i> Power Charging...';
                        secretAbility.querySelector('.ability-description').textContent = 'Power at 50%... One more click to unleash full potential!';
                        
                        // Add pulsing effect
                        secretAbility.classList.add('power-active');
                        
                        // Matrix flash
                        document.body.classList.add('show-matrix');
                        setTimeout(() => {
                            document.body.classList.remove('show-matrix');
                        }, 1000);
                        
                        // Play power up sound
                        playSound('https://www.soundjay.com/buttons/sounds/button-09.mp3', 0.3);
                    }
                    else if (clickCount === 3) {
                        // Third click - full power activation
                        powerActive = true;
                        
                        // Create camera flash effect
                        const flash = document.createElement('div');
                        flash.className = 'camera-flash';
                        document.body.appendChild(flash);
                        flash.style.animation = 'flash 0.5s ease-in-out';
                        
                        setTimeout(() => {
                            if (flash.parentNode) {
                                flash.parentNode.removeChild(flash);
                            }
                        }, 500);
                        
                        // Play power unleashed sound
                        playSound('https://www.soundjay.com/mechanical/sounds/laser-gun-19.mp3', 0.3);
                        
                        // Activate full power
                        document.body.classList.add('show-matrix');
                        setTimeout(() => {
                            document.body.classList.remove('show-matrix');
                            
                            // Change ability text with RGB effect
                            secretAbility.querySelector('.ability-name').innerHTML = '<i class="fas fa-fire"></i> <span class="rgb-text">ULTIMATE CODE NINJA</span>';
                            secretAbility.querySelector('.ability-description').textContent = 'Power Unlocked! You can now code with your eyes closed, debug in your sleep, and your pull requests are always approved on the first try.';
                            
                            // Create floating coding icons
                            createFloatingIcons();
                            
                            // Trigger confetti
                            window.confetti();
                            
                            // Update all stats to max
                            document.querySelectorAll('.stat-fill').forEach(statFill => {
                                statFill.style.width = '100%';
                            });
                            
                            document.querySelectorAll('.stat-value').forEach(statValue => {
                                statValue.textContent = '10/10';
                            });
                            
                            // Add new hidden ability
                            const specialAbilitiesContainer = document.querySelector('.special-abilities');
                            if (specialAbilitiesContainer) {
                                const newAbility = document.createElement('div');
                                newAbility.className = 'ability-item';
                                newAbility.innerHTML = `
                                    <div class="ability-name"><i class="fas fa-hat-wizard"></i> Code Whisperer</div>
                                    <div class="ability-description">You can now talk to your code and it actually listens. Functions come when called, bugs reveal themselves willingly, and your keyboard types by itself when you're getting coffee.</div>
                                `;
                                newAbility.style.opacity = '0';
                                newAbility.style.transform = 'translateY(20px)';
                                newAbility.style.transition = 'all 0.5s ease';
                                
                                specialAbilitiesContainer.appendChild(newAbility);
                                
                                setTimeout(() => {
                                    newAbility.style.opacity = '1';
                                    newAbility.style.transform = 'translateY(0)';
                                }, 300);
                            }
                            
                            // Add magical effect to the entire RPG card
                            const rpgCard = document.querySelector('.rpg-card');
                            if (rpgCard) {
                                rpgCard.style.boxShadow = '0 0 30px rgba(100, 255, 218, 0.5)';
                                rpgCard.style.borderColor = '#64ffda';
                            }
                        }, 1000);
                    }
                    else {
                        // Easter egg for clicking too many times
                        const messages = [
                            "Whoa! Power overload!",
                            "You're clicking too much!",
                            "System can't handle this much power!",
                            "*Critical system error*",
                            "TOO... MUCH... POWER...!",
                            "POWER LEVEL OVER 9000!"
                        ];
                        
                        // Random message
                        const randomMsg = messages[Math.floor(Math.random() * messages.length)];
                        
                        // Create floating message
                        const floatingMsg = document.createElement('div');
                        floatingMsg.textContent = randomMsg;
                        floatingMsg.style.position = 'absolute';
                        floatingMsg.style.left = '50%';
                        floatingMsg.style.top = '50%';
                        floatingMsg.style.transform = 'translate(-50%, -50%)';
                        floatingMsg.style.color = '#ff5277';
                        floatingMsg.style.fontWeight = 'bold';
                        floatingMsg.style.fontSize = '24px';
                        floatingMsg.style.zIndex = '100';
                        
                        secretAbility.style.position = 'relative';
                        secretAbility.appendChild(floatingMsg);
                        
                        // Add shake effect
                        secretAbility.classList.add('shake-element');
                        setTimeout(() => {
                            secretAbility.classList.remove('shake-element');
                        }, 500);
                        
                        // Remove message after animation
                        setTimeout(() => {
                            if (floatingMsg.parentNode) {
                                floatingMsg.parentNode.removeChild(floatingMsg);
                            }
                        }, 2000);
                        
                        // Brief screen shake
                        document.body.style.animation = 'shake 0.5s ease-in-out';
                        setTimeout(() => {
                            document.body.style.animation = '';
                        }, 500);
                    }
                });
            }
            
            // 3. Character Avatar Easter Egg
            function initCharacterAvatar() {
                if (!characterAvatar) return;
                
                characterAvatar.addEventListener('click', () => {
                    // Temporary "power up" visual effect
                    const rpgCard = document.querySelector('.rpg-card');
                    if (rpgCard) {
                        rpgCard.style.boxShadow = '0 0 50px rgba(100, 255, 218, 0.7)';
                    }
                    
                    characterAvatar.parentElement.classList.add('shake-element');
                    
                    // Experience boost
                    const expFill = document.querySelector('.experience-fill');
                    if (expFill) {
                        expFill.style.width = '100%';
                    }
                    
                    const levelValue = document.querySelector('.level-value');
                    if (levelValue) {
                        levelValue.textContent = '7500 / 7500';
                    }
                    
                    // Level up message
                    alert("🎮 You found a power-up! Your level has increased!\n\nNew abilities unlocked:\n- Coffee Absorption: +50%\n- Deadline Survival: +75%\n- Stack Overflow Reputation: +1000");
                    
                    setTimeout(() => {
                        if (rpgCard) {
                            rpgCard.style.boxShadow = '';
                        }
                        characterAvatar.parentElement.classList.remove('shake-element');
                    }, 1000);
                });
            }
            
            // 4. Coffee Cup Easter Egg
            function initCoffeeCup() {
                if (!coffeeCup) return;
                
                coffeeCup.addEventListener('click', () => {
                    const randomCups = Math.floor(Math.random() * 10) + 5;
                    alert("☕ You found my coffee tracker!\n\nCups consumed today: " + randomCups + "\nCurrent caffeine level: OVER 9000!\n\nThanks for keeping me going!");
                    coffeeCup.classList.add('shake-element');
                    setTimeout(() => {
                        coffeeCup.classList.remove('shake-element');
                    }, 500);
                });
            }
            
            // 5. Project Card 3D Effect
            function initProjectCardEffects() {
                // Select all project cards
                const projectCards = document.querySelectorAll('.projects-grid .project-card');

                projectCards.forEach(card => {
                    // Exclude the Template Showcase card from the hover effect
                    const viewProjectLink = card.querySelector('.view-project-btn');
                    if (viewProjectLink && viewProjectLink.getAttribute('href') === 'template-showcase/index.html') {
                        // Skip this card
                        return;
                    }

                    card.addEventListener('mousemove', function(e) {
                        const rect = this.getBoundingClientRect();
                        const x = e.clientX - rect.left; // x position within the card
                        const y = e.clientY - rect.top; // y position within the card
                        
                        const centerX = rect.width / 2;
                        const centerY = rect.height / 2;
                        
                        const rotateX = (y - centerY) / 20; // negative if above center
                        const rotateY = (centerX - x) / 20; // negative if right of center
                        
                        this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
                        this.style.transition = 'transform 0.1s ease';
                    });
                    
                    card.addEventListener('mouseleave', function() {
                        this.style.transform = 'translateY(0)';
                        this.style.transition = 'transform 0.5s ease';
                    });
                });
            }
            
            // 6. Spin Effect (Do a barrel roll)
            function initSpinEffect() {
                if (!spinElement) return;
                
                spinElement.addEventListener('click', (e) => {
                    e.preventDefault();
                    document.body.style.animation = 'spin 1s ease-in-out';
                    setTimeout(() => {
                        document.body.style.animation = '';
                    }, 1000);
                });
            }
            
            // 7. Console Messages
            function initConsoleMessages() {
                // Log message to console for developers
                console.log(`%c
                👋 Hello fellow developer! 
                
                Since you're inspecting the code, I thought you might enjoy some Easter eggs:
                
                1. Try the Konami code: ↑↑↓↓←→←→BA
                2. Type showSecretMessage() in the console
                3. Type matrix() in the console
                4. Type confetti() in the console
                5. Press Alt+C for confetti
                6. Click on the coffee cup in the bottom right
                7. Click on the character avatar in the skills section
                8. Click on the "Secret Ability" in the skills section
                
                Happy hunting!
                `, "color: #64ffda; background-color: #0d0d0d; padding: 10px; border-radius: 5px; font-size: 14px;");
            }
            
            // 8. Keyboard Shortcuts
            function initKeyboardShortcuts() {
                document.addEventListener('keydown', (e) => {
                    // Alt+C for confetti
                    if (e.altKey && e.key === 'c') {
                        window.confetti();
                    }
                });
            }
        });
        
        // Utility Functions 
        
        // Function to create floating coding icons
        function createFloatingIcons() {
            const floatingIconsContainer = document.createElement('div');
            floatingIconsContainer.className = 'floating-icons';
            document.body.appendChild(floatingIconsContainer);
            
            const icons = [
                'fa-code', 'fa-bug', 'fa-coffee', 'fa-laptop-code', 
                'fa-terminal', 'fa-keyboard', 'fa-database', 'fa-server',
                'fa-code-branch', 'fa-sitemap', 'fa-wifi', 'fa-cogs'
            ];
            
            // Create 20 random icons
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    const icon = document.createElement('i');
                    icon.className = `fas ${icons[Math.floor(Math.random() * icons.length)]} floating-icon`;
                    icon.style.left = `${Math.random() * 100}%`;
                    icon.style.fontSize = `${Math.random() * 16 + 16}px`;
                    icon.style.animationDuration = `${Math.random() * 5 + 5}s`;
                    
                    floatingIconsContainer.appendChild(icon);
                    
                    // Remove after animation
                    setTimeout(() => {
                        if (icon.parentNode) {
                            icon.parentNode.removeChild(icon);
                        }
                        
                        // Remove container when all icons are gone
                        if (i === 19) {
                            setTimeout(() => {
                                if (floatingIconsContainer.parentNode) {
                                    floatingIconsContainer.parentNode.removeChild(floatingIconsContainer);
                                }
                            }, 10000);
                        }
                    }, 10000);
                }, i * 200); // Stagger the appearance of icons
            }
        }
        
        // Play sound with error handling
        function playSound(url, volume = 0.5) {
            try {
                const sound = new Audio(url);
                sound.volume = volume;
                sound.play().catch(e => console.log('Audio play failed:', e));
            } catch (error) {
                console.log('Sound playback error:', error);
            }
        }
        
        // Secret message function for console
        window.showSecretMessage = function() {
            const heroSecret = document.getElementById('hero-secret');
            if (heroSecret) {
                heroSecret.classList.add('revealed');
                console.log('%c🎉 You found a secret! The Konami code has been revealed on the page.', 'color: #64ffda; background-color: #0d0d0d; padding: 5px;');
            }
        };
        
        // Add Matrix activation command to console
        window.matrix = function() {
            document.body.classList.add('show-matrix');
            console.log('%c🎉 Matrix mode activated! Press ESC to exit.', 'color: #64ffda; background-color: #0d0d0d; padding: 5px;');
            
            // Allow ESC to exit matrix mode
            const escHandler = (e) => {
                if (e.key === 'Escape') {
                    document.body.classList.remove('show-matrix');
                    document.removeEventListener('keydown', escHandler);
                    console.log('%c🎉 Matrix mode deactivated!', 'color: #64ffda; background-color: #0d0d0d; padding: 5px;');
                }
            };
            
            document.addEventListener('keydown', escHandler);
        };
        
        // Confetti shower easter egg
        window.confetti = function() {
            if (!document.querySelector('#confetti-canvas')) {
                const canvas = document.createElement('canvas');
                canvas.id = 'confetti-canvas';
                canvas.style.position = 'fixed';
                canvas.style.top = '0';
                canvas.style.left = '0';
                canvas.style.width = '100%';
                canvas.style.height = '100%';
                canvas.style.pointerEvents = 'none';
                canvas.style.zIndex = '9999';
                document.body.appendChild(canvas);
                
                const ctx = canvas.getContext('2d');
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                
                const pieces = [];
                const colors = ['#64ffda', '#ff5277', '#ffe066', '#7795f8'];
                
                class Piece {
                    constructor() {
                        this.x = Math.random() * canvas.width;
                        this.y = -20;
                        this.size = Math.random() * 15 + 5;
                        this.speedY = Math.random() * 3 + 1;
                        this.speedX = Math.random() * 6 - 3;
                        this.spin = Math.random() * 0.2 - 0.1;
                        this.rotate = 0;
                        this.color = colors[Math.floor(Math.random() * colors.length)];
                        this.shape = Math.random() > 0.5 ? 'circle' : 'rect';
                    }
                    
                    update() {
                        this.y += this.speedY;
                        this.x += this.speedX;
                        this.rotate += this.spin;
                        
                        if (this.y > canvas.height) {
                            this.y = -20;
                            this.x = Math.random() * canvas.width;
                        }
                    }
                    
                    draw() {
                        ctx.save();
                        ctx.translate(this.x, this.y);
                        ctx.rotate(this.rotate);
                        ctx.fillStyle = this.color;
                        
                        if (this.shape === 'circle') {
                            ctx.beginPath();
                            ctx.arc(0, 0, this.size / 2, 0, Math.PI * 2);
                            ctx.fill();
                        } else {
                            ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
                        }
                        
                        ctx.restore();
                    }
                }
                
                for (let i = 0; i < 100; i++) {
                    pieces.push(new Piece());
                }
                
                function animate() {
                    if (!document.querySelector('#confetti-canvas')) return;
                    
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    
                    pieces.forEach(piece => {
                        piece.update();
                        piece.draw();
                    });
                    
                    requestAnimationFrame(animate);
                }
                
                animate();
                
                // Auto-remove after 8 seconds
                setTimeout(() => {
                    if (canvas.parentNode) {
                        canvas.parentNode.removeChild(canvas);
                    }
                }, 8000);
                
                console.log('%c🎉 Confetti party activated! Enjoy!', 'color: #64ffda; background-color: #0d0d0d; padding: 5px;');
            }
        };
        
        // Add random "dad joke" coding quotes to the typing game
        const dadJokeQuotes = [
            "Why do programmers always mix up Christmas and Halloween? Because Oct 31 == Dec 25",
            "How many programmers does it take to change a light bulb? None, that's a hardware problem.",
            "Why did the functions stop calling each other? They had too many arguments.",
            "A SQL query walks into a bar, walks up to two tables and asks, 'Can I join you?'",
            "Why was the JavaScript developer sad? Because he didn't Node how to Express himself.",
            "Why do programmers prefer dark mode? Because light attracts bugs.",
            "Why did the developer go broke? Because he used up all his cache.",
            "['hip', 'hip'] // hip hip array!",
            "Why couldn't the React component understand the joke? It didn't get the props."
        ];
        
        // Add dad jokes to the typing game
        if (typeof quotes !== 'undefined') {
            quotes.push(...dadJokeQuotes);
        }
        
        // Add a chance for random encouraging messages during typing
        if (typingInput) {
            const originalInputHandler = typingInput.oninput;
            
            typingInput.addEventListener('input', (e) => {
                // Random encouraging messages (1% chance on each keystroke)
                if (Math.random() < 0.01) {
                    const messages = [
                        "You're typing like a boss! 🚀",
                        "Look at those fingers go! 💨",
                        "Are you a robot? Too fast! ⚡",
                        "You're making the keyboard smoke! 🔥",
                        "Your WPM is over 9000! 📈"
                    ];
                    
                    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
                    
                    // Create floating message
                    const floatingMsg = document.createElement('div');
                    floatingMsg.textContent = randomMessage;
                    floatingMsg.style.position = 'absolute';
                    floatingMsg.style.left = `${Math.random() * 80}%`;
                    floatingMsg.style.top = '-20px';
                    floatingMsg.style.color = 'var(--accent-color)';
                    floatingMsg.style.fontWeight = 'bold';
                    floatingMsg.style.animation = 'floatUp 2s forwards ease-out';
                    floatingMsg.style.opacity = '0.9';
                    floatingMsg.style.pointerEvents = 'none';
                    floatingMsg.style.zIndex = '100';
                    
                    // Add floating animation
                    if (!document.querySelector('style#typing-animations')) {
                        const style = document.createElement('style');
                        style.id = 'typing-animations';
                        style.textContent = `
                            @keyframes floatUp {
                                0% { transform: translateY(0); opacity: 0.9; }
                                100% { transform: translateY(-50px); opacity: 0; }
                            }
                        `;
                        document.head.appendChild(style);
                    }
                    
                    const typingGame = document.querySelector('.typing-game');
                    if (typingGame) {
                        typingGame.style.position = 'relative';
                        typingGame.appendChild(floatingMsg);
                        
                        // Remove after animation
                        setTimeout(() => {
                            if (floatingMsg.parentNode) {
                                floatingMsg.parentNode.removeChild(floatingMsg);
                            }
                        }, 2000);
                    }
                }
            });
        }

        // Add Terminal Functionality
        const terminalInput = document.getElementById('terminal-input');
        const terminalOutput = document.querySelector('.terminal-output');
        
        // Secret button functionality
        const secretButton = document.getElementById('secret-button');
        if (secretButton) {
            secretButton.addEventListener('click', () => {
                // Toggle Matrix effect
                document.body.classList.toggle('show-matrix');
                
                // Show terminal if not visible
                if (!document.body.classList.contains('show-matrix')) {
                    const terminalSection = document.getElementById('terminal-section');
                    if (terminalSection) {
                        terminalSection.style.display = 'block';
                        terminalSection.scrollIntoView({ behavior: 'smooth' });
                    }
                }
            });
        }
        
        // 3D Cube Interaction
        const cube = document.getElementById('cube');
        const cubeContainer = document.getElementById('cube-container');
        if (cube && cubeContainer) {
            let isDragging = false;
            let previousX, previousY;
            let rotX = 0, rotY = 0;
            
            cubeContainer.addEventListener('mousedown', (e) => {
                isDragging = true;
                previousX = e.clientX;
                previousY = e.clientY;
                cubeContainer.style.cursor = 'grabbing';
            });
            
            document.addEventListener('mouseup', () => {
                isDragging = false;
                if (cubeContainer) {
                    cubeContainer.style.cursor = 'grab';
                }
            });
            
            document.addEventListener('mousemove', (e) => {
                if (isDragging && cube) {
                    const deltaX = e.clientX - previousX;
                    const deltaY = e.clientY - previousY;
                    
                    rotY += deltaX * 0.5;
                    rotX -= deltaY * 0.5;
                    
                    cube.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
                    
                    previousX = e.clientX;
                    previousY = e.clientY;
                }
            });
            
            // Auto-rotate when not interacting
            let autoRotateInterval;
            
            function startAutoRotate() {
                autoRotateInterval = setInterval(() => {
                    if (!isDragging && cube) {
                        rotY += 0.5;
                        cube.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
                    }
                }, 50);
            }
            
            function stopAutoRotate() {
                clearInterval(autoRotateInterval);
            }
            
            cubeContainer.addEventListener('mouseenter', stopAutoRotate);
            cubeContainer.addEventListener('mouseleave', startAutoRotate);
            
            // Initialize auto-rotation for cube
            startAutoRotate();
        }

        // Terminal commands and input handling
        if (terminalInput && terminalOutput) {
            // Terminal commands
            const commands = {
                help: {
                    description: 'Show available commands',
                    execute: () => {
                        let output = 'Available commands:\n';
                        for (const cmd in commands) {
                            output += `  ${cmd.padEnd(12)} - ${commands[cmd].description}\n`;
                        }
                        return output;
                    }
                },
                about: {
                    description: 'Display information about me',
                    execute: () => {
                        return `Hi, I'm Abhinav Singh, a passionate web developer.\nI love creating responsive web applications with modern technologies.\nMy main focus is on delivering clean, efficient, and user-friendly interfaces.`;
                    }
                },
                skills: {
                    description: 'List my technical skills',
                    execute: () => {
                        return `Technical Skills:\n` +
                               `- Frontend: HTML5, CSS3, JavaScript, React, TypeScript\n` +
                               `- Backend: Node.js, Express.js, MongoDB\n` +
                               `- Tools: Git, GitHub, VS Code, Figma\n` +
                               `- Other: Responsive Design, RESTful APIs, Testing`;
                    }
                },
                projects: {
                    description: 'Show my projects',
                    execute: () => {
                        return `Projects:\n` +
                               `1. Task Management App - React, Node.js, MongoDB\n` +
                               `2. E-commerce Platform - React, Redux, Firebase\n` +
                               `3. Data Visualization Dashboard - JavaScript, Chart.js\n` +
                               `4. Collaborative Code Editor - TypeScript, React, Node.js`;
                    }
                },
                contact: {
                    description: 'Display contact information',
                    execute: () => {
                        return `Contact Information:\nEmail: abhinav.singh@example.com`;
                    }
                },
                matrix: {
                    description: 'Toggle Matrix code rain effect',
                    execute: () => {
                        if (typeof window.matrix === 'function') {
                            window.matrix();
                        }
                        return document.body.classList.contains('show-matrix') ? 
                            'Matrix mode activated. Welcome to the real world...' : 
                            'Matrix mode deactivated.';
                    }
                },
                confetti: {
                    description: 'Trigger a confetti celebration',
                    execute: () => {
                        if (typeof window.confetti === 'function') {
                            window.confetti();
                        }
                        return 'Confetti party started!';
                    }
                },
                cube: {
                    description: 'Show 3D skills cube',
                    execute: () => {
                        if (cubeContainer) {
                            cubeContainer.style.display = 'block';
                        }
                        return 'Displaying 3D skills cube. Drag to rotate!';
                    }
                },
                clear: {
                    description: 'Clear the terminal screen',
                    execute: () => {
                        terminalOutput.innerHTML = '';
                        return '';
                    }
                },
                exit: {
                    description: 'Close the terminal',
                    execute: () => {
                        const terminalSection = document.getElementById('terminal-section');
                        if (terminalSection) {
                            terminalSection.style.display = 'none';
                        }
                        return 'Terminal closed.';
                    }
                }
            };
            
            // Handle terminal input
            terminalInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    const command = terminalInput.value.trim().toLowerCase();
                    
                    // Add command to output
                    const commandOutput = document.createElement('div');
                    commandOutput.innerHTML = `<div class="terminal-prompt">
                        <span class="terminal-user">abhinav</span><span class="terminal-at">@</span><span class="terminal-path">portfolio:~</span><span class="terminal-dollar">$</span> ${command}
                    </div>`;
                    terminalOutput.appendChild(commandOutput);
                    
                    // Process command
                    if (command in commands) {
                        const output = commands[command].execute();
                        if (output) {
                            const outputElement = document.createElement('div');
                            outputElement.textContent = output;
                            terminalOutput.appendChild(outputElement);
                        }
                    } else if (command) {
                        const outputElement = document.createElement('div');
                        outputElement.textContent = `Command not found: ${command}. Type 'help' for available commands.`;
                        terminalOutput.appendChild(outputElement);
                    }
                    
                    // Clear input and scroll to bottom
                    terminalInput.value = '';
                    terminalOutput.scrollTop = terminalOutput.scrollHeight;
                }
            });
        }
    </script>
</body>
</html>