<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flora Rose | Game Dev</title>
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="page-content">
        <nav>
            <ul class="nav-links">
                <li><a href="#hero">Home</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#about">About Me</a></li>
                <li><a href="cv.html">CV</a></li>
            </ul>
        </nav>

        <section id="hero">
            <div class="hero-box">
                <div class="hero-content">
                    <img src="me lol.jpg" alt="Flora Rose" class="headshot">
                    <h1>FLORA ROSE</h1>
                    <h2 class="typing-text"></h2>
                    <p class="typing-text-p"></p>
                    <div class="hero-actions">
                        <a href="cv.html" class="btn-secondary">View CV</a>
                    </div>
                </div>
            </div>
            <div class="scroll-indicator">↓</div>
            <div class="hero-social">
                <a href="https://x.com/floraxdev" target="_blank" aria-label="Twitter/X"><img src="x.svg" alt="Twitter/X"></a>
                <a href="https://www.tiktok.com/@flora.r.dev?lang=en-GB" target="_blank" aria-label="TikTok"><img src="tiktok.svg" alt="TikTok"></a>
                <a href="https://bsky.app/profile/flora-dev.bsky.social" target="_blank" aria-label="Bluesky"><img src="bluesky.svg" alt="Bluesky"></a>
                <a href="https://flosr.itch.io/" target="_blank" aria-label="itch.io"><img src="itchio.svg" alt="itch.io"></a>
                <a href="https://www.linkedin.com/in/flora-rose-341309267/" target="_blank" aria-label="LinkedIn"><img src="linkedin.svg" alt="LinkedIn"></a>
                <a href="mailto:floralilithrose@gmail.com" aria-label="Email"><img src="email.svg" alt="Email"></a>
            </div>
        </section>

        <section id="projects">
            <h2>PROJECTS</h2>

            <div class="showreel">
                <h3>SHOWREEL</h3>
                <div class="showreel-wrapper">
                    <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Showreel" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>

            <div class="projects-grid">
                <a href="project1.html">
                    <div class="project-card">
                        <span class="card-badge">Featured</span>
                        <img src="twinpeak.gif" alt="Project 1">
                        <div>
                            <h3>PROJECT 1</h3>
                            <p>A short description.</p>
                            <div class="project-tags">
                                <span>Unity</span>
                                <span>C#</span>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="project-card project-card-placeholder">
                    <span class="card-question">?</span>
                    <img src="twinpeak.gif" alt="Project 2">
                    <div>
                        <h3>PROJECT 2</h3>
                        <p>A short description.</p>
                        <div class="project-tags">
                            <span>Unreal</span>
                            <span>Blueprints</span>
                        </div>
                    </div>
                </div>
                <div class="project-card project-card-placeholder">
                    <span class="card-question">?</span>
                    <img src="twinpeak.gif" alt="Project 3">
                    <div>
                        <h3>PROJECT 3</h3>
                        <p>A short description.</p>
                        <div class="project-tags">
                            <span>Godot</span>
                            <span>GDScript</span>
                        </div>
                    </div>
                </div>
                <div class="project-card project-card-placeholder">
                    <span class="card-question">?</span>
                    <img src="twinpeak.gif" alt="Project 4">
                    <div>
                        <h3>PROJECT 4</h3>
                        <p>A short description.</p>
                        <div class="project-tags">
                            <span>Unity</span>
                            <span>3D</span>
                        </div>
                    </div>
                </div>
                <div class="project-card project-card-placeholder">
                    <span class="card-question">?</span>
                    <img src="twinpeak.gif" alt="Project 5">
                    <div>
                        <h3>PROJECT 5</h3>
                        <p>A short description.</p>
                        <div class="project-tags">
                            <span>Web</span>
                            <span>JS</span>
                        </div>
                    </div>
                </div>
                <div class="project-card project-card-placeholder">
                    <span class="card-question">?</span>
                    <img src="twinpeak.gif" alt="Project 6">
                    <div>
                        <h3>PROJECT 6</h3>
                        <p>A short description.</p>
                        <div class="project-tags">
                            <span>Design</span>
                            <span>Prototype</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="view-all-wrapper">
                <a href="#" class="view-all">View All Projects →</a>
            </div>
        </section>

        <section id="about">
            <h2>ABOUT ME</h2>
            <div class="about-container">
                <div class="about-section about-section-text">
                    <p class="about-typing"></p>
                </div>
                <div class="about-section about-section-box">
                    <h3>Skills & Tools</h3>
                    <ul>
                        <li>GDScript</li>
                        <li>C#</li>
                        <li>Unreal Blueprints</li>
                        <li>Unity</li>
                        <li>Godot</li>
                        <li>Blender</li>
                        <li>Aseprite</li>
                        <li>Game Design</li>
                    </ul>
                </div>
                <div class="about-cta">
                    <a href="mailto:floralilithrose@gmail.com">Let's work together →</a>
                </div>
            </div>
        </section>

        <footer>
            <p>&copy; 2026 FLORA ROSE | Made with <span class="heart">&hearts;</span> on <a href="https://neocities.org" target="_blank">Neocities</a></p>
        </footer>

        <button id="back-to-top" aria-label="Back to top">&uarr;</button>
    </div>

    <script>
        const $ = s => document.querySelector(s);

        // Hero typing
        const heroLines = [
            { el: $('.typing-text'), text: "GAME DEVELOPER", speed: 50, delay: 500 },
            { el: $('.typing-text-p'), text: "Welcome! I'm Flora, a Games Development student. This is what I've been making.", speed: 30, delay: 200 }
        ];
        let lineIndex = 0, charIndex = 0;

        function typeHero() {
            const c = heroLines[lineIndex];
            if (!c) return;
            if (charIndex < c.text.length) {
                c.el.textContent += c.text.charAt(charIndex++);
                setTimeout(typeHero, c.speed);
            } else {
                lineIndex++;
                charIndex = 0;
                if (lineIndex < heroLines.length) setTimeout(typeHero, c.delay);
            }
        }

        // About typing
        const aboutText = "I'm Flora, a game designer and developer based in the UK. Currently studying Games Development. I've built experience across game design and programming in GDScript, C# and Unreal Engine Blueprints. When I'm not making games, I'm playing them, tinkering with recycled hardware or exploring historical sites.";
        const aboutEl = $('.about-typing');
        let aboutIndex = 0, aboutStarted = false;

        function typeAbout() {
            if (aboutIndex < aboutText.length) {
                aboutEl.textContent += aboutText.charAt(aboutIndex++);
                setTimeout(typeAbout, 25);
            }
        }

        new IntersectionObserver((entries, obs) => {
            if (entries[0].isIntersecting && !aboutStarted) {
                aboutStarted = true;
                setTimeout(typeAbout, 300);
                obs.disconnect();
            }
        }, { threshold: 0.3 }).observe($('#about'));

        // Back to top
        const btn = $('#back-to-top');
        window.addEventListener('scroll', () => btn.classList.toggle('visible', window.scrollY > 300));
        btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

        // Active nav
        const sections = document.querySelectorAll('section[id]');
        const navLinks = document.querySelectorAll('.nav-links a');
        window.addEventListener('scroll', () => {
            let current = '';
            sections.forEach(s => { if (window.scrollY >= s.offsetTop - 120) current = s.id; });
            navLinks.forEach(l => l.classList.toggle('active', l.getAttribute('href') === '#' + current));
        });

        setTimeout(typeHero, 500);
    </script>
</body>
</html>