<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Creative | Experimental Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary: #FF3F8E;
            --secondary: #00F0FF;
            --bg: #0A0A0A;
            --text: #F5F5F5;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: none;
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Space Grotesk', sans-serif;
            overflow-x: hidden;
        }

        .custom-cursor {
            position: fixed;
            width: 20px;
            height: 20px;
            border: 2px solid var(--primary);
            border-radius: 50%;
            pointer-events: none;
            mix-blend-mode: difference;
            transition: transform 0.3s, opacity 0.3s;
            z-index: 1000;
        }

        /* Hero Section - Matrix Effect */
        .hero {
            height: 150vh;
            position: relative;
            overflow: hidden;
        }

        .matrix-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, 
                transparent 0%,
                var(--bg) 70%),
                repeating-linear-gradient(
                    45deg,
                    var(--primary) 0px,
                    var(--primary) 2px,
                    transparent 2px,
                    transparent 8px
                );
        }

        .hero-content {
            position: relative;
            padding-top: 30vh;
            mix-blend-mode: difference;
        }

        .name-headline {
            font-size: 8vw;
            line-height: 0.8;
            text-transform: uppercase;
            margin-left: 10%;
        }

        .name-headline span {
            display: block;
            -webkit-text-stroke: 2px var(--secondary);
            color: transparent;
            transition: 0.4s;
        }

        .name-headline:hover span {
            color: var(--secondary);
        }

        /* Project Gallery - Horizontal Scroll */
        .project-scroll {
            height: 300vh;
        }

        .project-track {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
        }

        .project-strip {
            display: flex;
            position: absolute;
            gap: 2rem;
            padding: 0 10%;
            will-change: transform;
        }

        .project-card {
            width: 80vw;
            height: 60vh;
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            padding: 2rem;
            transform-style: preserve-3d;
        }

        .project-card:hover {
            transform: rotateY(10deg) rotateX(10deg);
        }

        /* Morphing Grid */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            margin: 10vh 5%;
        }

        .grid-item {
            aspect-ratio: 1;
            background: rgba(255,255,255,0.05);
            transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
        }

        .grid-item:hover {
            background: var(--primary);
            transform: scale(1.1);
            z-index: 2;
        }

        /* Dynamic Typography */
        .dynamic-text {
            font-size: 4vw;
            padding: 5%;
            line-height: 1.2;
            text-align: center;
        }

        .dynamic-text span {
            display: inline-block;
            transition: 0.3s;
        }

        .dynamic-text:hover span {
            transform: rotate(3deg) scale(1.1);
            color: var(--secondary);
        }

        /* Glitch Effect */
        @keyframes glitch {
            0% { clip-path: inset(10% 0 30% 0); }
            20% { clip-path: inset(5% 0 15% 0); }
            100% { clip-path: inset(0 0 0 0); }
        }

        .glitch-text {
            position: relative;
            animation: glitch 1s infinite alternate;
        }

        .glitch-text::before,
        .glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .glitch-text::before {
            left: 2px;
            text-shadow: -2px 0 cyan;
            animation: glitch 3s infinite linear alternate-reverse;
        }

        .glitch-text::after {
            left: -2px;
            text-shadow: 2px 0 magenta;
            animation: glitch 2s infinite linear alternate-reverse;
        }

    </style>
</head>
<body>
    <div class="custom-cursor"></div>

    <section class="hero">
        <div class="matrix-bg"></div>
        <div class="hero-content">
            <h1 class="name-headline">
                <span>Digital</span>
                <span>Alchemist</span>
                <span>& Creative</span>
                <span>Coder</span>
            </h1>
        </div>
    </section>

    <section class="project-scroll">
        <div class="project-track">
            <div class="project-strip">
                <div class="project-card">
                    <h3 class="glitch-text" data-text="Neuro Nexus">Neuro Nexus</h3>
                    <p>AI-Powered Interactive Installation</p>
                </div>
                <!-- Add 5+ project cards -->
            </div>
        </div>
    </section>

    <div class="grid-container">
        <!-- 30+ grid items -->
        <div class="grid-item"></div>
        ...
    </div>

    <script>
        // Custom Cursor
        const cursor = document.querySelector('.custom-cursor');
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
        });

        // Horizontal Scroll
        const track = document.querySelector('.project-strip');
        window.addEventListener('scroll', () => {
            const scrollY = window.scrollY;
            track.style.transform = `translateX(-${scrollY * 0.5}px)`;
        });

        // Random Grid Animation
        const gridItems = document.querySelectorAll('.grid-item');
        gridItems.forEach(item => {
            item.style.transform = `
                rotate(${Math.random() * 10 - 5}deg)
                scale(${0.9 + Math.random() * 0.2})
            `;
            
            item.addEventListener('mouseenter', () => {
                item.style.borderRadius = `${Math.random() * 50}%`;
            });
        });

        // Dynamic Text Interaction
        const dynamicSpans = document.querySelectorAll('.dynamic-text span');
        dynamicSpans.forEach(span => {
            span.style.transform = `
                rotate(${Math.random() * 6 - 3}deg)
                translateX(${Math.random() * 20 - 10}px)
            `;
        });
    </script>
</body>
</html>