<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ayoub | Creative Technologist</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="toekomstige-baan.css">
</head>
<body>
    <nav class="navbar">
        <a href="#hero" class="nav-link">Home</a>
        <a href="#coding" class="nav-link">Development</a>
        <a href="#producing" class="nav-link">Music</a>
        <a href="#favorites" class="nav-link">Favorites</a>
        <a href="#future" class="nav-link">Future</a>
    </nav>

    <!-- Audio Player at Top Left -->
    <div class="music-player">
        <audio id="background-music" src="Foot On Em - Izaya Tiji Archive.mp3" loop></audio>
        <div class="audio-controls">
            <button id="play-pause-btn" class="play-pause">
                <!-- Custom SVG Icons -->
                <svg class="play-icon active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M8 5v14l11-7z"/>
                </svg>
                <svg class="pause-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
            </button>
            <div class="audio-progress">
                <input type="range" id="progress-slider" min="0" max="100" value="0">
                <div class="progress-bar"></div>
            </div>
            <div class="volume-control">
                <svg class="volume-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
                </svg>
                <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="1">
            </div>
        </div>
    </div>

    <section id="hero">
        <div class="hero-content">
            <div class="standalone-images">
                <img src="sama.jpeg" alt="Image 1">
                <img src="flower.gif" alt="Image 2">
                <img src="tokyoghoul.gif" alt="Image 3">
            </div>
            <h1>Ayoub</h1>
            <p>Developer & Music Producer | Navigating the Intersection of Technology and Creativity</p>
            <button class="cta-btn">Dive Into My World</button>
        </div>
    </section>

    <section id="coding">
        <div class="section-container">
            <div class="section-text">
                <h2>C++ Development</h2>
                <p>Diving deep into the realm of systems programming, I craft intricate digital landscapes that push the boundaries of computational efficiency. My journey is a relentless exploration of code's potential, transforming abstract concepts into tangible, high-performance solutions.</p>
                <div class="skill-tags">
                    <span class="skill-tag">Game Development</span>
                    <span class="skill-tag">Systems Programming</span>
                    <span class="skill-tag">Performance Optimization</span>
                </div>
            </div>
            <div class="section-image">
                <img src="coding.png" alt="C++ Development">
            </div>
        </div>
    </section>

    <section id="producing">
        <div class="section-container">
            <div class="section-image">
                <img src="fl.png" alt="Music Production">
            </div>
            <div class="section-text">
                <h2>Music Production</h2>
                <p>Sonic architecture is my canvas, where rhythms and frequencies collide to create immersive auditory experiences. Each track is a meticulously crafted journey through sound, blending technical precision with raw emotional resonance.</p>
                <div class="music-skills">
                    <div class="skill-tag">Hip Hop</div>
                    <div class="skill-tag">Electronic</div>
                </div>
                <!-- "See My Beats" Button -->
                <button class="see-beats-btn" onclick="pauseMusicAndOpenBeats()">See My Beats</button>
            </div>
        </div>
    </section>

    <section id="favorites">
        <div class="section-container">
            <div class="favorites-grid">
                <div class="favorites-column movies">
                    <h3>Top 3 Movies</h3>
                    <ul>
                        <li>
                            <img src="parasite.jpg" alt="Parasite">
                            <span>Parasite</span>
                        </li>
                        <li>
                            <img src="memories of murder.jpg" alt="Memories of Murder">
                            <span>Memories of Murder</span>
                        </li>
                        <li>
                            <img src="getout.jpg" alt="The Host">
                            <span>Get out</span>
                        </li>
                    </ul>
                </div>
                <div class="favorites-column artists">
                    <h3>Top 3 Artists</h3>
                    <ul>
                        <li>
                            <img src="summrs.jpg" alt="Summrs">
                            <span>Summrs</span>
                        </li>
                        <li>
                            <img src="izaya tiji.jpg" alt="Izaya Tiji">
                            <span>Izaya Tiji</span>
                        </li>
                        <li>
                            <img src="ohsxnta.jpg" alt="Ohxnsta">
                            <span>Ohxnsta</span>
                        </li>
                    </ul>
                </div>
                <div class="favorites-column games">
                    <h3>Top 3 Games</h3>
                    <ul>
                        <li>
                            <img src="fortnite.jpg" alt="Fortnite">
                            <span>Fortnite</span>
                        </li>
                        <li>
                            <img src="sekiro.jpg" alt="Sekiro">
                            <span>Sekiro</span>
                        </li>
                        <li>
                            <img src="skate3.jpg" alt="Skate 3">
                            <span>Skate 3</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="favorites-preview">
                <img id="preview-image" src="images/default.jpg" alt="Preview Image">
            </div>
        </div>
    </section>

    <section id="future">
        <div class="section-container">
            <div class="future-roadmap">
                <h2>Future Vision</h2>
                <p>Charting a course through the uncharted territories of technological and artistic innovation, my roadmap is a testament to perpetual growth and boundless creativity.</p>
                <div class="timeline">
                    <div class="timeline-item active">
                        <span class="year">2024</span>
                        <p>Advanced C++ Projects</p>
                    </div>
                    <div class="timeline-item">
                        <span class="year">2025</span>
                        <p>AI-Driven Music Production</p>
                    </div>
                    <div class="timeline-item">
                        <span class="year">2026</span>
                        <p>Interactive Audio Applications</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
    <script src="toekomstige-baan.js"></script>
    <script>
        // Function to pause music and open beats.html in a new tab
        function pauseMusicAndOpenBeats() {
            const audio = document.getElementById('background-music');
            audio.pause(); // Pause the music
            window.open('beats.html', '_blank'); // Open beats.html in a new tab
        }
    </script>
</body>
</html>