waynebrain/index.html at main · theseason/waynebrain · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WayneBrain!</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
</head>
<body>

    <!-- Header / Navbar -->
    <header>
        <div class="logo">WayneBrain!</div>
        <nav>
            <!-- Checkbox for Toggle Logic -->
            <input type="checkbox" id="menu-toggle">
            <label for="menu-toggle" class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </label>

            <!-- Fullscreen Overlay Menu -->
            <div class="menu-overlay">
                <label for="menu-toggle" class="close-menu">
                    <span class="close-bar"></span>
                    <span class="close-bar"></span>
                </label>
                <ul>
                    <!--<li><a href="/index.html">Go home!</a></li>-->
                    <li><a href="https://store.waynebrain.xyz">Buy tees!</a></li>
                    <!--<li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>-->
                </ul>
            </div>
        </nav>
    </header>

    <!-- Large Fullscreen Intro -->
    <section class="hero">
        <div class="hero-content">
            <h1>All the bad ideas!</h1>
            <!--<p>Immersive experience through design.</p> -->
            <a class="hard-btn" href="https://store.waynebrain.xyz">Shop Tees</a>

        </div>
    </section>

    <!-- Links Section (Appears on Scroll) -->
    <section class="links-section">
        <div class="links-container">
            <ul class="scroll-links">
                <li class="link-item"><a href="https://www.effwhat.com">EffWhat!?</a></li>
                <li class="link-item"><a href="https://www.trexmas.com">T-Rexmas</a></li>
                <li class="link-item"><a href="https://sleigheye.tumblr.com/">Sleigh.I.</a></li>
                <li class="link-item"><a href="https://www.anntaylorswift.com">Ann Taylor Swift</a></li>
                <li class="link-item"><a href="https://www.thedeseavers.com">The Deseavers</a></li>
                <li class="link-item"><a href="https://www.punappetit.com">Punappetit</a></li>
                <li class="link-item"><a href="https://www.captainpijon.com">Captain Pijon</a></li>
                <li class="link-item"><a href="https://www.shartups.com">Shartups</a></li>
                <li class="link-item"><a href="https://designthanking.tumblr.com/">Design Thanking</a></li>
                <li class="link-item"><a href="https://www.lumberjerks.com">Lumberjerks</a></li>
                <li class="link-item"><a href="https://www.thatsbaloney.com/">That's Baloney!</a></li>
                <li class="link-item"><a href="https://loafoutloud.tumblr.com/">Loaf Out Loud</a></li>
                <li class="link-item"><a href="https://hallmarkwahlberg.tumblr.com/">Hallmark Wahlberg</a></li>
                <li class="link-item"><a href="https://meetmeetsweats.tumblr.com/">Meet Sweats</a></li>
            </ul>
        </div>
    </section>

    <script>
        // Scroll Animation for Links
        const linkItems = document.querySelectorAll('.link-item');
        const header = document.querySelector('header');

        function checkScroll() {
            // Link animation
            linkItems.forEach((item, index) => {
                const itemTop = item.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;

                // Trigger animation when item is in viewport
                if (itemTop < windowHeight * 0.8) {
                    setTimeout(() => {
                        item.classList.add('visible');
                    }, index * 100); // Stagger animation
                }
            });

            // Header background change on scroll
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        }

        // Check on scroll and on page load
        window.addEventListener('scroll', checkScroll);
        window.addEventListener('load', checkScroll);
    </script>

</body>
</html>