<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJ Church</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
    <div class="section hero" id="hero">
        <h1><a href="https://www.aj-church.com" target="_blank" class="name-link"></a></h1>
        <div class="social-links" id="socialLinks">
            <a href="https://github.com/ajchurch" target="_blank" title="GitHub" class="social-icon">
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
                </svg>
            </a>
            <a href="https://linkedin.com/in/ajchurch" target="_blank" title="LinkedIn" class="social-icon">
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
                    <rect x="2" y="9" width="4" height="12"/>
                    <circle cx="4" cy="4" r="2"/>
                </svg>
            </a>
        </div>
        <div class="scroll-hint">[scroll_down] ↓</div>
    </div>

    <div class="section about" id="about">
        <div class="about-container">
            <div class="about-left">
                <h2 class="typing-element" data-text="about_me"></h2>
                <p class="typing-element" data-text="Hi. I'm AJ and I am a 2nd year Advanced Computer Science student at UWA majoring in International Cybersecurity."></p>
            </div>
            <div class="about-right">
                <h3 class="typing-element" data-text="currently_working_on"></h3>
                <ul>
                    <li class="typing-element" data-text="Tackling data structures and algorithms.. "></li>
                    <li class="typing-element" data-text="Optimising  not-for-profit businesses with Salesforce automations."></li>
                    <li class="typing-element" data-text="Facilitating intercollege communications."></li>
                    <li class="typing-element" data-text="Representing UWA students as an ordinary guild councillor."></li>
                    <li class="typing-element" data-text="Designed and deployed this website using Amazon S3 for object storage and CloudFront for global content delivery."></li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        let scrolled = false;
        const nameText = 'aj_church';
        let currentAnimations = [];
        let isAnimating = false;
        let nameTyped = false;
        let aboutTyped = false;

        function clearAllAnimations() {
            currentAnimations.forEach(id => clearInterval(id));
            currentAnimations = [];
        }

        window.addEventListener('load', () => {
            isAnimating = true;
            const nameLink = document.querySelector('.name-link');
            nameLink.textContent = '';
            
            typeText(nameLink, nameText, 50, () => {
                nameTyped = true;
                isAnimating = false;
            });
        });

        window.addEventListener('wheel', (e) => {
            if (isAnimating || !nameTyped) return;
            
            if (!scrolled && e.deltaY > 0) {
                scrolled = true;
                document.getElementById('hero').classList.add('fade-out');
                document.getElementById('about').classList.add('fade-in');
                
                if (!aboutTyped) {
                    setTimeout(() => {
                        if (scrolled) {
                            startTypingAnimation();
                            aboutTyped = true;
                        }
                    }, 800);
                }
            } else if (scrolled && e.deltaY < 0) {
                scrolled = false;
                document.getElementById('hero').classList.remove('fade-out');
                document.getElementById('about').classList.remove('fade-in');
            }
        });

        let touchStart = 0;
        window.addEventListener('touchstart', (e) => {
            touchStart = e.touches[0].clientY;
        });

        window.addEventListener('touchmove', (e) => {
            if (isAnimating || !nameTyped) return;
            
            const touchEnd = e.touches[0].clientY;
            const diff = touchStart - touchEnd;

            if (!scrolled && diff > 50) {
                scrolled = true;
                document.getElementById('hero').classList.add('fade-out');
                document.getElementById('about').classList.add('fade-in');
                
                if (!aboutTyped) {
                    setTimeout(() => {
                        if (scrolled) {
                            startTypingAnimation();
                            aboutTyped = true;
                        }
                    }, 800);
                }
            } else if (scrolled && diff < -50) {
                scrolled = false;
                document.getElementById('hero').classList.remove('fade-out');
                document.getElementById('about').classList.remove('fade-in');
            }
        });

        function typeText(element, text, speed, callback) {
            let charIndex = 0;
            element.textContent = '';
            
            const typingInterval = setInterval(() => {
                if (charIndex < text.length) {
                    element.textContent += text.charAt(charIndex);
                    charIndex++;
                } else {
                    clearInterval(typingInterval);
                    const index = currentAnimations.indexOf(typingInterval);
                    if (index > -1) currentAnimations.splice(index, 1);
                    if (callback) callback();
                }
            }, speed);
            
            currentAnimations.push(typingInterval);
        }

        function startTypingAnimation() {
            clearAllAnimations();
            const elements = document.querySelectorAll('.typing-element');
            let delay = 0;
            
            elements.forEach((element) => {
                const originalText = element.getAttribute('data-text');
                setTimeout(() => {
                    if (scrolled) {
                        element.style.opacity = '1';
                        typeText(element, originalText, 30);
                    }
                }, delay);
                
                delay += originalText.length * 30 + 200;
            });
        }
    </script>
</body>
</html>