HTMLify

Portfolio.html
Views: 30 | Author: chiilaceraj
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OmRaj | Video Editor & Motion Graphics Artist</title>
    <meta name="description" content="Professional Video Editor & Motion Graphics Artist specializing in high-retention Gen-Z content">
    
    <!-- External Resources -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollToPlugin.min.js" defer></script>
    
    <style>
        /* CSS Variables */
        :root {
            --dark-bg: #0a0a0f;
            --darker-bg: #050509;
            --neon-blue: #00f3ff;
            --neon-purple: #9d4edd;
            --neon-cyan: #00ffea;
            --neon-pink: #ff00ff;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
            --text-primary: #ffffff;
            --text-secondary: #b0b0d0;
            --accent-gradient: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
            --cinematic-gradient: linear-gradient(45deg, #0a0a0f 30%, #1a0b2e 70%);
        }
        
        /* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
            cursor: none;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--dark-bg);
            color: var(--text-primary);
            overflow-x: hidden;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            min-height: 100vh;
        }
        
        /* Custom Cursor */
        .cursor {
            width: 20px;
            height: 20px;
            border: 2px solid var(--neon-cyan);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
            transition: transform 0.1s ease;
        }
        
        .cursor-follower {
            width: 40px;
            height: 40px;
            border: 2px solid rgba(0, 243, 255, 0.3);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9998;
            transition: all 0.3s ease;
        }
        
        .cursor.hover {
            transform: scale(1.5);
            background-color: var(--neon-cyan);
        }
        
        .cursor-follower.hover {
            transform: scale(1.8);
            border-color: var(--neon-cyan);
        }
        
        h1, h2, h3, h4 {
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
        }
        
        /* Layout */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(15px, 4vw, 30px);
        }
        
        section {
            padding: clamp(60px, 8vw, 100px) 0;
            position: relative;
            overflow: hidden;
        }
        
        /* Typography */
        .section-title {
            font-size: clamp(1.8rem, 5vw, 2.8rem);
            margin-bottom: clamp(30px, 5vw, 60px);
            text-align: center;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            width: clamp(60px, 10vw, 100px);
            height: 4px;
            background: var(--accent-gradient);
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }
        
        /* Enhanced Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            background: var(--cinematic-gradient);
            padding: 20px;
        }
        
        #three-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .hero-content {
            text-align: center;
            z-index: 10;
            position: relative;
            padding: 0 clamp(15px, 4vw, 30px);
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* Animated Title */
        .hero-title {
            font-size: clamp(2.5rem, 10vw, 5rem);
            margin-bottom: clamp(15px, 3vw, 20px);
            letter-spacing: 2px;
            position: relative;
            display: inline-block;
        }
        
        .hero-title span {
            display: inline-block;
            text-shadow: 
                0 0 10px rgba(0, 243, 255, 0.5),
                0 0 20px rgba(0, 243, 255, 0.3),
                0 0 30px rgba(0, 243, 255, 0.1);
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-pink));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 200% auto;
            animation: gradientShift 3s ease-in-out infinite;
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        /* Glitch Effect */
        .glitch {
            position: relative;
            animation: glitch 5s infinite;
        }
        
        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .glitch::before {
            animation: glitch-top 1s infinite;
            clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
        }
        
        .glitch::after {
            animation: glitch-bottom 1.5s infinite;
            clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
            -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
        }
        
        @keyframes glitch {
            0%, 10% { transform: translate(0); }
            2% { transform: translate(-2px, 2px); }
            4% { transform: translate(-2px, -2px); }
            6% { transform: translate(2px, 2px); }
            8% { transform: translate(2px, -2px); }
        }
        
        @keyframes glitch-top {
            0%, 100% { transform: translate(0); opacity: 1; }
            50% { transform: translate(-1px, -1px); opacity: 0.8; }
        }
        
        @keyframes glitch-bottom {
            0%, 100% { transform: translate(0); opacity: 1; }
            50% { transform: translate(1px, 1px); opacity: 0.8; }
        }
        
        /* Typewriter Effect */
        .typewriter {
            min-height: clamp(50px, 10vw, 70px);
            margin-bottom: clamp(20px, 4vw, 40px);
            position: relative;
            display: inline-block;
        }
        
        .typewriter-text {
            font-size: clamp(1.3rem, 4vw, 2.5rem);
            display: inline-block;
            position: relative;
        }
        
        .typewriter-text::after {
            content: '|';
            position: absolute;
            right: -10px;
            animation: blink 1s infinite;
            color: var(--neon-cyan);
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        
        /* Floating Elements */
        .floating-element {
            position: absolute;
            z-index: 2;
            opacity: 0.7;
            filter: blur(1px);
        }
        
        .floating-element:nth-child(1) {
            top: 20%;
            left: 10%;
            width: 40px;
            height: 40px;
            background: var(--neon-blue);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }
        
        .floating-element:nth-child(2) {
            top: 60%;
            right: 15%;
            width: 60px;
            height: 60px;
            background: var(--neon-purple);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            animation: float 8s ease-in-out infinite reverse;
        }
        
        .floating-element:nth-child(3) {
            bottom: 30%;
            left: 20%;
            width: 30px;
            height: 30px;
            background: var(--neon-pink);
            border-radius: 50%;
            animation: float 7s ease-in-out infinite 2s;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
        
        /* Hero Description */
        .hero-description {
            font-size: clamp(1rem, 3vw, 1.5rem);
            max-width: min(800px, 90vw);
            margin: 0 auto clamp(20px, 4vw, 30px);
            color: var(--text-secondary);
            line-height: 1.6;
            position: relative;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            border: 1px solid var(--glass-border);
            box-shadow: 0 10px 30px rgba(0, 243, 255, 0.1);
        }
        
        /* Enhanced CTA Buttons */
        .cta-buttons {
            display: flex;
            gap: clamp(15px, 3vw, 25px);
            justify-content: center;
            margin-top: clamp(20px, 4vw, 40px);
            flex-wrap: wrap;
            position: relative;
            z-index: 10;
        }
        
        .btn {
            padding: clamp(12px, 2vw, 16px) clamp(20px, 4vw, 32px);
            border-radius: 50px;
            font-family: 'Orbitron', sans-serif;
            font-weight: 600;
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            cursor: none;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            border: none;
            z-index: 1;
            text-align: center;
            min-width: 140px;
            isolation: isolate;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
            z-index: -1;
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn-primary {
            background: var(--accent-gradient);
            color: white;
            box-shadow: 0 0 30px rgba(157, 78, 221, 0.7);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--neon-cyan);
            border: 2px solid var(--neon-cyan);
            box-shadow: 0 0 20px rgba(0, 255, 234, 0.5);
            text-shadow: 0 0 5px rgba(0, 255, 234, 0.5);
        }
        
        .btn:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 15px 35px rgba(0, 243, 255, 0.6);
        }
        
        .btn:active {
            transform: translateY(-2px) scale(1.02);
        }
        
        /* About Section with 3D Tilt Effect */
        .about-content {
            display: flex;
            justify-content: center;
            perspective: 1000px;
        }
        
        .about-card {
            max-width: 800px;
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: clamp(25px, 5vw, 40px);
            border: 1px solid var(--glass-border);
            box-shadow: 
                0 15px 35px rgba(0, 0, 0, 0.2),
                0 0 50px rgba(0, 243, 255, 0.1) inset;
            position: relative;
            overflow: hidden;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            will-change: transform;
        }
        
        .about-card:hover {
            transform: rotateX(5deg) rotateY(5deg);
        }
        
        .about-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--accent-gradient);
        }
        
        .about-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                45deg,
                transparent 0%,
                rgba(0, 243, 255, 0.1) 50%,
                transparent 100%
            );
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
        }
        
        .about-card:hover::after {
            opacity: 1;
        }
        
        .about-text {
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            color: var(--text-secondary);
            line-height: 1.8;
            text-align: center;
        }
        
        .highlight {
            color: var(--neon-cyan);
            font-weight: 600;
        }
        
        /* Skills Section */
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
            gap: clamp(20px, 3vw, 30px);
            margin-top: 40px;
        }
        
        .skill-card {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: clamp(20px, 3vw, 25px);
            border: 1px solid var(--glass-border);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            cursor: none;
        }
        
        .skill-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 243, 255, 0.3);
            border-color: var(--neon-blue);
        }
        
        .skill-card i {
            font-size: clamp(2rem, 4vw, 2.5rem);
            margin-bottom: 15px;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .skill-card h3 {
            font-size: clamp(1.2rem, 3vw, 1.5rem);
            margin-bottom: 10px;
        }
        
        .skill-card p {
            font-size: clamp(0.9rem, 2vw, 1rem);
            color: var(--text-secondary);
        }
        
        /* Portfolio Section */
        .portfolio-folders {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
            gap: clamp(20px, 4vw, 40px);
            margin-top: 50px;
        }
        
        .folder {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: clamp(25px, 4vw, 30px);
            border: 1px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: none;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-align: center;
            aspect-ratio: 1/1;
            max-width: 400px;
            margin: 0 auto;
        }
        
        .folder:hover {
            transform: translateY(-15px) scale(1.05);
            box-shadow: 0 30px 50px rgba(157, 78, 221, 0.4);
            border-color: var(--neon-purple);
        }
        
        .folder-icon {
            font-size: clamp(3.5rem, 8vw, 5rem);
            margin-bottom: clamp(15px, 3vw, 20px);
            transition: all 0.3s ease;
        }
        
        .folder:hover .folder-icon {
            transform: scale(1.2) rotate(10deg);
        }
        
        .folder h3 {
            font-size: clamp(1.3rem, 3vw, 1.8rem);
            margin-bottom: 10px;
        }
        
        .folder p {
            color: var(--text-secondary);
            font-size: clamp(0.9rem, 2vw, 1rem);
            line-height: 1.5;
        }
        
        /* Results Section */
        .results-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
            gap: clamp(20px, 4vw, 40px);
            margin-top: 50px;
        }
        
        .result-card {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: clamp(20px, 3vw, 30px) clamp(15px, 2vw, 20px);
            text-align: center;
            border: 1px solid var(--glass-border);
            transition: all 0.3s ease;
            cursor: none;
        }
        
        .result-card:hover {
            transform: translateY(-10px);
            border-color: var(--neon-blue);
            box-shadow: 0 20px 40px rgba(0, 243, 255, 0.2);
        }
        
        .counter {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 10px;
            font-family: 'Orbitron', sans-serif;
        }
        
        .result-card h3 {
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            color: var(--text-secondary);
        }
        
        /* AI Section */
        .ai-card {
            max-width: 800px;
            margin: 50px auto 0;
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: clamp(30px, 5vw, 50px);
            border: 1px solid var(--glass-border);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .ai-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 243, 255, 0.1) 0%, rgba(157, 78, 221, 0.05) 70%, transparent 100%);
            z-index: -1;
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .ai-card h2 {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            margin-bottom: 20px;
        }
        
        .ai-card p {
            font-size: clamp(1rem, 2.5vw, 1.3rem);
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        /* Contact Section */
        .contact-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .contact-form {
            width: 100%;
        }
        
        .form-group {
            margin-bottom: clamp(15px, 3vw, 25px);
        }
        
        .form-control {
            width: 100%;
            padding: clamp(15px, 3vw, 18px) clamp(15px, 3vw, 20px);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
            color: white;
            font-size: clamp(0.9rem, 2vw, 1rem);
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
            cursor: none;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--neon-blue);
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        .contact-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
            gap: clamp(15px, 3vw, 20px);
            margin-top: 40px;
        }
        
        .contact-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: clamp(15px, 3vw, 18px) clamp(20px, 3vw, 30px);
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            border: 1px solid var(--glass-border);
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            justify-content: center;
            text-align: center;
            cursor: none;
        }
        
        .contact-btn:hover {
            transform: translateY(-5px);
            border-color: var(--neon-cyan);
            box-shadow: 0 15px 30px rgba(0, 255, 234, 0.3);
        }
        
        .contact-btn i {
            font-size: clamp(1.2rem, 2vw, 1.5rem);
        }
        
        .contact-btn span {
            font-size: clamp(0.9rem, 2vw, 1rem);
        }
        
        /* Footer */
        footer {
            background-color: var(--darker-bg);
            padding: clamp(30px, 5vw, 50px) 0 30px;
            text-align: center;
            border-top: 1px solid var(--glass-border);
        }
        
        .social-icons {
            display: flex;
            justify-content: center;
            gap: clamp(15px, 3vw, 25px);
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .social-icon {
            width: clamp(45px, 5vw, 50px);
            height: clamp(45px, 5vw, 50px);
            border-radius: 50%;
            background: var(--glass-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: clamp(1.2rem, 2vw, 1.5rem);
            text-decoration: none;
            transition: all 0.3s ease;
            border: 1px solid var(--glass-border);
            cursor: none;
        }
        
        .social-icon:hover {
            transform: translateY(-5px) scale(1.1);
            background: var(--accent-gradient);
            box-shadow: 0 15px 30px rgba(157, 78, 221, 0.4);
        }
        
        .copyright {
            color: var(--text-secondary);
            font-size: clamp(0.8rem, 2vw, 0.9rem);
            margin-top: 20px;
        }
        
        /* Scroll Progress */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: var(--accent-gradient);
            z-index: 10000;
            transition: width 0.1s ease;
        }
        
        /* WhatsApp Chat Widget Styles */
        #whatsapp-widget {
            position: fixed;
            bottom: 100px;
            right: 25px;
            z-index: 9997;
            font-family: 'Poppins', sans-serif;
        }
        
        #wa-chat-toggle {
            width: 60px;
            height: 60px;
            background: #25D366;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            cursor: none;
            box-shadow: 0 5px 20px rgba(37, 211, 102, 0.5);
            transition: all 0.3s ease;
            border: none;
            position: relative;
            z-index: 9998;
        }
        
        #wa-chat-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(37, 211, 102, 0.8);
        }
        
        .chat-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff4757;
            color: white;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            animation: pulse 2s infinite;
        }
        
        #wa-chat-box {
            position: absolute;
            bottom: 80px;
            right: 0;
            width: 320px;
            background: var(--darker-bg);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
            display: none;
            flex-direction: column;
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(10px);
            transform-origin: bottom right;
            animation: chatSlideUp 0.3s ease-out;
        }
        
        @keyframes chatSlideUp {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        #wa-chat-header {
            background: linear-gradient(135deg, #25D366, #128C7E);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        #wa-chat-header .wa-avatar {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #25D366;
        }
        
        #wa-chat-header .wa-info {
            flex: 1;
        }
        
        #wa-chat-header .wa-name {
            font-weight: 600;
            font-size: 16px;
        }
        
        #wa-chat-header .wa-status {
            font-size: 12px;
            opacity: 0.9;
        }
        
        #wa-chat-close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: none;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.3s ease;
        }
        
        #wa-chat-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        #wa-chat-body {
            padding: 20px;
            max-height: 300px;
            overflow-y: auto;
            flex: 1;
        }
        
        .chat-message {
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
        }
        
        .chat-message.received {
            align-items: flex-start;
        }
        
        .chat-message.sent {
            align-items: flex-end;
        }
        
        .message-bubble {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 18px;
            position: relative;
            line-height: 1.4;
        }
        
        .message-bubble.received {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
            border-bottom-left-radius: 4px;
        }
        
        .message-bubble.sent {
            background: linear-gradient(135deg, #25D366, #128C7E);
            color: white;
            border-bottom-right-radius: 4px;
        }
        
        .message-time {
            font-size: 11px;
            opacity: 0.7;
            margin-top: 4px;
        }
        
        #wa-chat-input {
            padding: 15px 20px;
            background: rgba(0, 0, 0, 0.3);
            border-top: 1px solid var(--glass-border);
            display: flex;
            gap: 10px;
        }
        
        #wa-message-input {
            flex: 1;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--glass-border);
            border-radius: 25px;
            color: white;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            outline: none;
            transition: all 0.3s ease;
        }
        
        #wa-message-input:focus {
            border-color: #25D366;
            box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2);
        }
        
        #wa-send-button {
            width: 46px;
            height: 46px;
            background: #25D366;
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 18px;
            cursor: none;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        #wa-send-button:hover {
            background: #128C7E;
            transform: scale(1.1);
        }
        
        #whatsapp-float {
            position: fixed;
            bottom: 25px;
            right: 25px;
            width: clamp(50px, 8vw, 60px);
            height: clamp(50px, 8vw, 60px);
            background: #25D366;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(24px, 5vw, 32px);
            text-decoration: none;
            z-index: 9999;
            box-shadow: 0 5px 20px rgba(37, 211, 102, 0.5);
            transition: all 0.3s ease;
            cursor: none;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
            100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
        }
        
        #whatsapp-float:hover {
            transform: scale(1.2);
            box-shadow: 0 8px 25px rgba(37, 211, 102, 0.8);
            animation: none;
        }
        
        /* Mobile Optimizations */
        @media (max-width: 768px) {
            html {
                cursor: default;
            }
            
            .cursor, .cursor-follower {
                display: none;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn, .contact-btn {
                cursor: pointer;
                width: 100%;
                max-width: 300px;
            }
            
            .portfolio-folders {
                grid-template-columns: 1fr;
            }
            
            .skills-grid {
                grid-template-columns: 1fr;
            }
            
            .results-container {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .contact-buttons {
                grid-template-columns: 1fr;
            }
            
            .floating-element {
                display: none;
            }
            
            #whatsapp-widget {
                bottom: 90px;
                right: 15px;
            }
            
            #wa-chat-box {
                width: 280px;
                right: -10px;
            }
            
            #whatsapp-float {
                bottom: 20px;
                right: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .results-container {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .folder {
                aspect-ratio: auto;
                min-height: 250px;
            }
            
            .hero-title {
                font-size: 2.5rem;
            }
            
            .typewriter-text {
                font-size: 1.3rem;
            }
            
            .about-text {
                text-align: left;
            }
            
            #whatsapp-widget {
                bottom: 80px;
                right: 10px;
            }
            
            #wa-chat-box {
                width: 260px;
            }
        }
        
        /* Touch device detection */
        @media (hover: none) and (pointer: coarse) {
            html {
                cursor: default;
            }
            
            .cursor, .cursor-follower {
                display: none;
            }
            
            .btn, .contact-btn, .skill-card, .folder, .social-icon, #whatsapp-float, #wa-chat-toggle, #wa-send-button, #wa-chat-close {
                cursor: pointer;
            }
            
            .about-card:hover {
                transform: none;
            }
        }
    </style>
</head>
<body>
    <!-- Custom Cursor -->
    <div class="cursor"></div>
    <div class="cursor-follower"></div>
    
    <!-- Scroll Progress Indicator -->
    <div class="scroll-progress"></div>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <!-- 3D Background -->
        <div id="three-container"></div>
        
        <!-- Floating Elements -->
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        
        <div class="hero-content">
            <!-- Animated Title with Glitch Effect -->
            <h1 class="hero-title glitch" data-text="OMRAJ">
                <span class="glitch-text">OMRAJ</span>
            </h1>
            
            <!-- Typewriter Effect -->
            <div class="typewriter">
                <div class="typewriter-text" id="typed-text"></div>
            </div>
            
            <!-- Hero Description -->
            <p class="hero-description">
                Transforming raw footage into high-retention Gen-Z content that stops the scroll and drives results.
            </p>
            
            <!-- CTA Buttons -->
            <div class="cta-buttons">
                <a href="https://portfolio.malloy.sg/omraj" class="btn btn-primary" id="portfolio-btn">
                    <i class="fas fa-eye"></i> View Portfolio
                </a>
                <a href="#" class="btn btn-secondary" id="hire-btn">
                    <i class="fas fa-briefcase"></i> Hire Me
                </a>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about">
        <div class="container">
            <h2 class="section-title">About Me</h2>
            <div class="about-content">
                <div class="about-card">
                    <p class="about-text">
                        I am a <span class="highlight">high-energy Video Editor and Motion Graphics Artist</span> with <span class="highlight">2+ years</span> of professional experience.
                        <br><br>
                        I specialize in transforming raw footage into <span class="highlight">high-retention Gen-Z style content</span> that stops the scroll and drives results.
                        <br><br>
                        I have partnered with <span class="highlight">20+ clients</span> including medical professionals, real estate agents, and luxury brands to create engaging visual content that connects with audiences.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Skills Section -->
    <section id="skills">
        <div class="container">
            <h2 class="section-title">Expertise</h2>
            <div class="skills-grid">
                <div class="skill-card">
                    <i class="fas fa-film"></i>
                    <h3>Cinematic Storytelling</h3>
                    <p>Creating compelling narratives that engage audiences from start to finish.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-chart-line"></i>
                    <h3>Viral Reel Strategy</h3>
                    <p>Designing content optimized for maximum engagement and shareability.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-tachometer-alt"></i>
                    <h3>Speed Ramping</h3>
                    <p>Mastering time manipulation techniques for dynamic pacing.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-exchange-alt"></i>
                    <h3>Seamless Transitions</h3>
                    <p>Crafting smooth, creative transitions that enhance visual flow.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-shapes"></i>
                    <h3>Motion Graphics</h3>
                    <p>Adding animated elements that bring concepts to life.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-text-height"></i>
                    <h3>Text Animation</h3>
                    <p>Creating kinetic typography that enhances messaging.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-robot"></i>
                    <h3>AI-Powered Editing</h3>
                    <p>Leveraging cutting-edge AI tools for next-gen workflows.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-volume-up"></i>
                    <h3>Audio Hooks</h3>
                    <p>Designing soundscapes that capture attention instantly.</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-palette"></i>
                    <h3>Color Grading</h3>
                    <p>Establishing visual tone and mood through color science.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio">
        <div class="container">
            <h2 class="section-title">Portfolio</h2>
            <div class="portfolio-folders">
                <div class="folder" id="folder1">
                    <div class="folder-icon">🎬</div>
                    <h3>Viral Reels</h3>
                    <p>High-engagement social media content designed to stop the scroll and drive results.</p>
                </div>
                <div class="folder" id="folder2">
                    <div class="folder-icon">🎥</div>
                    <h3>Cinematic Edits</h3>
                    <p>Professional-grade video edits with cinematic storytelling and advanced techniques.</p>
                </div>
                <div class="folder" id="folder3">
                    <div class="folder-icon">✨</div>
                    <h3>Motion Graphics</h3>
                    <p>Dynamic animations and motion design for brands and content creators.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Results Section -->
    <section id="results">
        <div class="container">
            <h2 class="section-title">Results & Achievements</h2>
            <div class="results-container">
                <div class="result-card">
                    <div class="counter" data-count="20">0</div>
                    <h3>Clients</h3>
                </div>
                <div class="result-card">
                    <div class="counter" data-count="40">0</div>
                    <h3>K+ Views Generated</h3>
                </div>
                <div class="result-card">
                    <div class="counter" data-count="2">0</div>
                    <h3>Years Experience</h3>
                </div>
                <div class="result-card">
                    <div class="counter" data-count="95">0</div>
                    <h3>Client Satisfaction</h3>
                </div>
            </div>
        </div>
    </section>

    <!-- AI Section -->
    <section id="ai">
        <div class="container">
            <div class="ai-card">
                <h2>AI-Powered Editing</h2>
                <p>I use AI-powered voice and video tools to create next-gen content that outperforms traditional editing workflows. Leveraging the latest technology to deliver faster, more creative, and impactful results for your projects.</p>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact">
        <div class="container">
            <h2 class="section-title">Get In Touch</h2>
            <div class="contact-container">
                <form class="contact-form" id="contact-form">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Your Email" required>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" placeholder="Project Details (Type of reel, quantity, timeline, etc.)" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%;">
                        <i class="fas fa-paper-plane"></i> Send Message
                    </button>
                </form>
                
                <div class="contact-buttons">
                    <a href="https://wa.me/8789777497?text=Hello%20OmRaj!%20I'm%20interested%20in%20your%20video%20editing%20services.%20Here%20are%20my%20project%20details:%20" class="contact-btn" target="_blank">
                        <i class="fab fa-whatsapp"></i>
                        <span>Chat on WhatsApp</span>
                    </a>
                    <a href="mailto:omraj0503@gmail.com?subject=Video%20Editing%20Project%20Inquiry&body=Hello%20OmRaj%2C%0A%0AI%20came%20across%20your%20portfolio%20and%20would%20like%20to%20discuss%20a%20potential%20video%20editing%20project.%0A%0AProject%20Overview%3A%0A%0APlease%20let%20me%20know%20your%20availability%20for%20a%20brief%20discussion.%0A%0ABest%20regards%2C" class="contact-btn">
                        <i class="fas fa-envelope"></i>
                        <span>Send Professional Inquiry</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="social-icons">
                <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-behance"></i></a>
            </div>
            <p class="copyright">© 2023 OmRaj. All Rights Reserved.</p>
        </div>
    </footer>

    <!-- WhatsApp Chat Widget -->
    <div id="whatsapp-widget">
        <button id="wa-chat-toggle">
            <i class="fab fa-whatsapp"></i>
            <span class="chat-badge">1</span>
        </button>
        
        <div id="wa-chat-box">
            <div id="wa-chat-header">
                <div class="wa-avatar">
                    <i class="fab fa-whatsapp"></i>
                </div>
                <div class="wa-info">
                    <div class="wa-name">OmRaj</div>
                    <div class="wa-status">Typically replies in minutes</div>
                </div>
                <button id="wa-chat-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div id="wa-chat-body">
                <div class="chat-message received">
                    <div class="message-bubble received">
                        Hi there! 👋 I'm OmRaj. How can I help you with your video editing project today?
                    </div>
                    <div class="message-time">10:00 AM</div>
                </div>
                
                <div class="chat-message received">
                    <div class="message-bubble received">
                        Feel free to type your message here, and I'll get back to you as soon as possible!
                    </div>
                    <div class="message-time">10:01 AM</div>
                </div>
            </div>
            
            <div id="wa-chat-input">
                <input type="text" id="wa-message-input" placeholder="Type your message...">
                <button id="wa-send-button">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Floating WhatsApp Button -->
    <a href="#" id="whatsapp-float">
        <i class="fab fa-whatsapp"></i>
    </a>

    <script>
        // Main JavaScript
        document.addEventListener('DOMContentLoaded', function() {
            // Custom Cursor
            const cursor = document.querySelector('.cursor');
            const follower = document.querySelector('.cursor-follower');
            
            if (window.matchMedia("(min-width: 769px)").matches) {
                document.addEventListener('mousemove', (e) => {
                    cursor.style.left = e.clientX + 'px';
                    cursor.style.top = e.clientY + 'px';
                    
                    follower.style.left = e.clientX + 'px';
                    follower.style.top = e.clientY + 'px';
                });
                
                // Add hover effect for interactive elements
                const interactiveElements = document.querySelectorAll('a, button, .skill-card, .folder, .contact-btn, .social-icon, #whatsapp-float, #wa-chat-toggle, #wa-send-button, #wa-chat-close');
                
                interactiveElements.forEach(element => {
                    element.addEventListener('mouseenter', () => {
                        cursor.classList.add('hover');
                        follower.classList.add('hover');
                    });
                    
                    element.addEventListener('mouseleave', () => {
                        cursor.classList.remove('hover');
                        follower.classList.remove('hover');
                    });
                });
            }
            
            // Typewriter Effect (Mobile Compatible)
            const typingTextElement = document.getElementById('typed-text');
            const texts = [
                "High-Energy Video Editor",
                "Motion Graphics Artist", 
                "Viral Content Specialist"
            ];
            
            let textIndex = 0;
            let charIndex = 0;
            let isDeleting = false;
            let typingSpeed = 100;
            let typingAnimationId;
            
            function typeEffect() {
                if (!typingTextElement) return;
                
                const currentText = texts[textIndex];
                
                if (isDeleting) {
                    typingTextElement.textContent = currentText.substring(0, charIndex - 1);
                    charIndex--;
                    typingSpeed = 50;
                } else {
                    typingTextElement.textContent = currentText.substring(0, charIndex + 1);
                    charIndex++;
                    typingSpeed = 100;
                }
                
                if (!isDeleting && charIndex === currentText.length) {
                    typingSpeed = 1500;
                    isDeleting = true;
                } else if (isDeleting && charIndex === 0) {
                    isDeleting = false;
                    textIndex = (textIndex + 1) % texts.length;
                    typingSpeed = 500;
                }
                
                typingAnimationId = setTimeout(typeEffect, typingSpeed);
            }
            
            // Start typing effect
            typeEffect();
            
            // Handle page visibility for mobile
            document.addEventListener('visibilitychange', function() {
                if (document.hidden) {
                    clearTimeout(typingAnimationId);
                } else {
                    typeEffect();
                }
            });
            
            // Scroll Progress Indicator
            function updateScrollProgress() {
                const scrollProgress = document.querySelector('.scroll-progress');
                const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
                const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
                const scrolled = (winScroll / height) * 100;
                scrollProgress.style.width = scrolled + "%";
            }
            
            window.addEventListener('scroll', updateScrollProgress);
            
            // About Card 3D Tilt Effect
            const aboutCard = document.querySelector('.about-card');
            if (aboutCard && window.matchMedia("(min-width: 769px)").matches) {
                aboutCard.addEventListener('mousemove', (e) => {
                    const rect = aboutCard.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    const centerX = rect.width / 2;
                    const centerY = rect.height / 2;
                    
                    const rotateY = ((x - centerX) / centerX) * 5;
                    const rotateX = ((centerY - y) / centerY) * 5;
                    
                    aboutCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
                });
                
                aboutCard.addEventListener('mouseleave', () => {
                    aboutCard.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
                });
            }
            
            // WhatsApp Chat Widget Functionality
            const waChatToggle = document.getElementById('wa-chat-toggle');
            const waChatBox = document.getElementById('wa-chat-box');
            const waChatClose = document.getElementById('wa-chat-close');
            const waSendButton = document.getElementById('wa-send-button');
            const waMessageInput = document.getElementById('wa-message-input');
            const waChatBody = document.getElementById('wa-chat-body');
            const chatBadge = document.querySelector('.chat-badge');
            
            // Toggle chat box
            waChatToggle.addEventListener('click', () => {
                waChatBox.style.display = waChatBox.style.display === 'flex' ? 'none' : 'flex';
                if (waChatBox.style.display === 'flex') {
                    chatBadge.style.display = 'none';
                }
            });
            
            // Close chat box
            waChatClose.addEventListener('click', () => {
                waChatBox.style.display = 'none';
            });
            
            // Send message function
            function sendMessage() {
                const message = waMessageInput.value.trim();
                if (message) {
                    // Add sent message to chat
                    const messageElement = document.createElement('div');
                    messageElement.className = 'chat-message sent';
                    messageElement.innerHTML = `
                        <div class="message-bubble sent">${message}</div>
                        <div class="message-time">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
                    `;
                    waChatBody.appendChild(messageElement);
                    
                    // Clear input
                    waMessageInput.value = '';
                    
                    // Scroll to bottom
                    waChatBody.scrollTop = waChatBody.scrollHeight;
                    
                    // Simulate auto-reply after 2 seconds
                    setTimeout(() => {
                        const replies = [
                            "Thanks for your message! I'll review it and get back to you shortly.",
                            "Great! Could you share more details about your project?",
                            "I typically respond within 2-4 hours. Meanwhile, you can check my portfolio at portfolio.malloy.sg/omraj",
                            "What's your timeline for this project?",
                            "Do you have any specific style or reference in mind for your video?"
                        ];
                        
                        const randomReply = replies[Math.floor(Math.random() * replies.length)];
                        
                        const replyElement = document.createElement('div');
                        replyElement.className = 'chat-message received';
                        replyElement.innerHTML = `
                            <div class="message-bubble received">${randomReply}</div>
                            <div class="message-time">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
                        `;
                        waChatBody.appendChild(replyElement);
                        waChatBody.scrollTop = waChatBody.scrollHeight;
                    }, 2000);
                }
            }
            
            // Send button click
            waSendButton.addEventListener('click', sendMessage);
            
            // Enter key to send
            waMessageInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
            
            // Initialize Three.js 3D Background
            function init3DBackground() {
                const container = document.getElementById('three-container');
                if (!container) return;
                
                // Scene
                const scene = new THREE.Scene();
                
                // Camera
                const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
                camera.position.z = 5;
                
                // Renderer
                const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
                container.appendChild(renderer.domElement);
                
                // Create glowing particles
                const particlesGeometry = new THREE.BufferGeometry();
                const particlesCount = 500;
                const posArray = new Float32Array(particlesCount * 3);
                
                for(let i = 0; i < particlesCount * 3; i++) {
                    posArray[i] = (Math.random() - 0.5) * 10;
                }
                
                particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
                
                // Material
                const particlesMaterial = new THREE.PointsMaterial({
                    size: 0.005,
                    color: new THREE.Color(0x00f3ff),
                    transparent: true,
                    opacity: 0.8,
                    blending: THREE.AdditiveBlending
                });
                
                // Mesh
                const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
                scene.add(particlesMesh);
                
                // Create floating shapes
                const shapes = [];
                const geometryTypes = [
                    new THREE.IcosahedronGeometry(0.3, 0),
                    new THREE.TorusGeometry(0.2, 0.1, 16, 100),
                    new THREE.OctahedronGeometry(0.25, 0)
                ];
                
                for(let i = 0; i < 5; i++) {
                    const geometry = geometryTypes[Math.floor(Math.random() * geometryTypes.length)];
                    const material = new THREE.MeshBasicMaterial({
                        color: new THREE.Color(Math.random() * 0xffffff),
                        wireframe: true,
                        transparent: true,
                        opacity: 0.3
                    });
                    
                    const mesh = new THREE.Mesh(geometry, material);
                    mesh.position.x = (Math.random() - 0.5) * 8;
                    mesh.position.y = (Math.random() - 0.5) * 8;
                    mesh.position.z = (Math.random() - 0.5) * 8;
                    
                    mesh.userData = {
                        speed: Math.random() * 0.02 + 0.01,
                        rotationSpeed: Math.random() * 0.02 + 0.01
                    };
                    
                    scene.add(mesh);
                    shapes.push(mesh);
                }
                
                // Animation
                function animate() {
                    requestAnimationFrame(animate);
                    
                    // Rotate particles
                    particlesMesh.rotation.x += 0.001;
                    particlesMesh.rotation.y += 0.002;
                    
                    // Animate shapes
                    shapes.forEach((shape, i) => {
                        shape.rotation.x += shape.userData.rotationSpeed;
                        shape.rotation.y += shape.userData.rotationSpeed;
                        
                        // Float up and down
                        shape.position.y += Math.sin(Date.now() * 0.001 + i) * 0.005;
                    });
                    
                    // Render
                    renderer.render(scene, camera);
                }
                
                // Handle resize
                function onWindowResize() {
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                }
                
                window.addEventListener('resize', onWindowResize);
                
                // Start animation
                animate();
                
                // Cleanup
                window.addEventListener('beforeunload', () => {
                    renderer.dispose();
                });
            }
            
            // Initialize 3D background
            init3DBackground();
            
            // Animated Counters
            function animateCounters() {
                const counters = document.querySelectorAll('.counter');
                
                counters.forEach(counter => {
                    const target = +counter.getAttribute('data-count');
                    let count = 0;
                    const increment = target / 30;
                    
                    const updateCounter = () => {
                        if (count < target) {
                            count += increment;
                            counter.innerText = Math.ceil(count);
                            requestAnimationFrame(updateCounter);
                        } else {
                            counter.innerText = target + (counter.getAttribute('data-count') === '40' ? 'k+' : '+');
                        }
                    };
                    
                    updateCounter();
                });
            }
            
            // Initialize GSAP animations
            gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
            
            // Hero animations
            gsap.from('.hero-title', {
                duration: 1.5,
                y: 100,
                opacity: 0,
                ease: 'power4.out',
                delay: 0.5
            });
            
            gsap.from('.typewriter', {
                duration: 1,
                y: 50,
                opacity: 0,
                delay: 1,
                ease: 'power3.out'
            });
            
            gsap.from('.hero-description', {
                duration: 1,
                y: 30,
                opacity: 0,
                delay: 1.5,
                ease: 'power3.out'
            });
            
            gsap.from('.cta-buttons', {
                duration: 1,
                y: 30,
                opacity: 0,
                delay: 2,
                ease: 'power3.out',
                stagger: 0.3
            });
            
            // Section animations
            const sections = document.querySelectorAll('section:not(.hero)');
            sections.forEach(section => {
                gsap.from(section, {
                    scrollTrigger: {
                        trigger: section,
                        start: 'top 80%',
                        toggleActions: 'play none none reverse'
                    },
                    y: 50,
                    opacity: 0,
                    duration: 1,
                    ease: 'power3.out'
                });
            });
            
            // Initialize counters when results section is in view
            ScrollTrigger.create({
                trigger: '#results',
                start: 'top 80%',
                onEnter: animateCounters,
                once: true
            });
            
            // Portfolio folder click event
            const portfolioLink = 'https://drive.google.com/drive/folders/1VuKLudqe4mJc_z9mSQ_VJBp_3z9HzROW?usp=sharing';
            const folders = document.querySelectorAll('.folder');
            
            folders.forEach(folder => {
                folder.addEventListener('click', (e) => {
                    e.preventDefault();
                    
                    // Animation
                    gsap.to(folder, {
                        scale: 1.1,
                        duration: 0.2,
                        ease: 'back.out(1.5)',
                        onComplete: () => {
                            window.open(portfolioLink, '_blank');
                            gsap.to(folder, {
                                scale: 1,
                                duration: 0.2
                            });
                        }
                    });
                });
            });
            
            // Hire Me button
            document.getElementById('hire-btn').addEventListener('click', function(e) {
                e.preventDefault();
                const message = `Hello OmRaj,

I came across your portfolio and am interested in discussing potential video editing services for my project.

Could we schedule a brief call to discuss:
1. Project scope and requirements
2. Timeline expectations
3. Budget considerations

Please let me know your availability.

Best regards`;
                window.open(`https://wa.me/918789777497?text=${encodeURIComponent(message)}`, '_blank');
            });
            
            // Contact form submission
            document.getElementById('contact-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const name = this.querySelector('input[type="text"]').value;
                const email = this.querySelector('input[type="email"]').value;
                const projectDetails = this.querySelector('textarea').value;
                
                const message = `Hello OmRaj,

My name is ${name}. I came across your portfolio and was impressed by your video editing work.

Project Requirements:
${projectDetails}

Contact Information:
Email: ${email}

I would appreciate discussing this project further at your convenience.

Best regards,
${name}`;
                
                window.open(`https://wa.me/918789777497?text=${encodeURIComponent(message)}`, '_blank');
                this.reset();
                
                // Show notification
                showNotification('Message sent successfully!', 'success');
            });
            
            // WhatsApp Floating Button
            const whatsappFloat = document.getElementById('whatsapp-float');
            if (whatsappFloat) {
                whatsappFloat.addEventListener('click', function(e) {
                    e.preventDefault();
                    const message = "Hello OmRaj! I'm interested in your video editing services. Let's discuss my project.";
                    window.open(`https://wa.me/918789777497?text=${encodeURIComponent(message)}`, '_blank');
                });
            }
            
            // Notification function
            function showNotification(message, type = 'success') {
                const notification = document.createElement('div');
                const bgColor = type === 'success' ? 'rgba(0, 243, 255, 0.1)' : 'rgba(255, 0, 0, 0.1)';
                const borderColor = type === 'success' ? 'var(--neon-cyan)' : 'var(--neon-pink)';
                
                notification.style.cssText = `
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: ${bgColor};
                    color: white;
                    padding: 15px 25px;
                    border-radius: 10px;
                    border-left: 4px solid ${borderColor};
                    backdrop-filter: blur(10px);
                    border: 1px solid var(--glass-border);
                    z-index: 10000;
                    max-width: 300px;
                    transform: translateX(120%);
                    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    box-shadow: 0 10px 30px rgba(0, 243, 255, 0.2);
                `;
                
                notification.innerHTML = `
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <div style="background: var(--accent-gradient); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-check" style="color: white; font-size: 16px;"></i>
                        </div>
                        <div>
                            <h4 style="color: var(--neon-cyan); margin-bottom: 5px; font-size: 14px;">Success!</h4>
                            <p style="font-size: 13px; color: var(--text-secondary);">${message}</p>
                        </div>
                    </div>
                `;
                
                document.body.appendChild(notification);
                
                // Animate in
                setTimeout(() => {
                    notification.style.transform = 'translateX(0)';
                }, 100);
                
                // Auto-remove after 4 seconds
                setTimeout(() => {
                    notification.style.transform = 'translateX(120%)';
                    setTimeout(() => notification.remove(), 400);
                }, 4000);
            }
        });
    </script>
</body>
</html>
HTMLify

Share this file:
