barteker.github.io/index.html at main · barteker/barteker.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/styles/newstyles.css">
    <title>Bart Baker</title>

    <style>
        .side-nav {
            z-index: 2;
        }
        .projects-container {
            margin-top: 10vw;
        }
    </style>
</head>
<body>
    <nav class="side-nav " role="navigation" aria-label="Main navigation" id="site-nav"></nav>
    <script src="src/scripts/nav.js"></script>

    <main>
        <!-- Projects content section -->
        <div class="projects-container">
            <div class="projects-gallery">
                <!-- W/AV TRAILER -->
                <div class="gallery-row full-width">
                    <a href="visual/wav.html" class="gallery-item video-preview-item">
                        <img src="src/assets/wav/WAV_Trailer_poster.webp" alt="W/AV Trailer">
                        <video class="hover-preview" muted loop playsinline preload="none">
                            <source src="src/assets/wav/WAV_Trailer_preview.mp4" type="video/mp4">
                        </video>
                    </a>
                </div>

                <!-- CATTLEDOGS -->
                <div class="gallery-row full-width">
                    <a href="visual/cattledogs.html"
                       class="gallery-item multi-image-variant-preview"
                       data-default-src="src/assets/cattledogs/heroimage.webp"
                       data-variant-srcs="src/assets/cattledogs/slide1.webp,src/assets/cattledogs/slide2.webp,src/assets/cattledogs/slide3.webp">
                        <img src="src/assets/cattledogs/heroimage.webp" alt="The Cattledogs" width="1920" height="1080" loading="lazy">
                    </a>
                </div>

                <!-- thisisdrugs. BRANDING -->
                <div class="gallery-row full-width">
                    <a href="visual/this-is-drugs.html"
                       class="gallery-item multi-image-variant-preview"
                       data-default-src="src/assets/thisisdrugs/general.webp"
                       data-variant-srcs="src/assets/thisisdrugs/general.webp,src/assets/thisisdrugs/guatemala.webp,src/assets/thisisdrugs/ethiopia.webp">
                        <img src="src/assets/thisisdrugs/general.webp" alt="this is drugs. coffee packaging system">
                    </a>
                </div>

                <!-- ROCKY MOUNTAIN MAVERICKS -->
                <div class="gallery-row multi-image">
                    <a href="visual/rocky-mountain-mavericks.html"
                       class="gallery-item multi-image-variant-preview"
                       data-default-src="src/assets/mavs/MavsTitleImage.webp"
                       data-variant-srcs="src/assets/mavs/TitleSlide1.webp,src/assets/mavs/TitleSlide2.webp,src/assets/mavs/TitleSlide3.webp,src/assets/mavs/TitleSlide4.webp">
                        <img src="src/assets/mavs/MavsTitleImage.webp" alt="Rocky Mountain Mavericks Brand Title Slide" width="1920" height="1080">
                    </a>
                </div>

                <!-- cultof8 BRANDING -->
                <div class="gallery-row full-width">
                    <a href="visual/" class="gallery-item">
                        <img src="src/assets/cultof8/MainLogo.webp" alt="cultof8 Logotype">
                    </a>
                </div>
            </div>
        </div>
        <footer>
            <p>©2026 Bart Baker, All Rights Reserved</p>
        </footer>
    </main>
    <script src="src/scripts/pages.js"></script>
    <script src="src/scripts/gsap.min.js"></script>
    <script src="src/scripts/ScrambleTextPlugin.min.js"></script>
    <script src="src/scripts/animations.js"></script>
    <script src="src/scripts/gallery-previews.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.min.js"></script>
    <script>
        const lenis = new Lenis({
            autoRaf: true,
        });
    </script>
</body>
</html>