RollingBarrel.github.io/team.html at main · RollingBarrel/RollingBarrel.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<html lang="en">

<head>
    <!-- El head se gestiona aquí directamente -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Rolling Barrel Studio</title>
    <!-- Favicons -->
    <link href="assets/img/favicon.png" rel="icon">
    <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <!-- Vendor CSS Files -->
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/vendor/aos/aos.css" rel="stylesheet">
    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <!-- Main CSS File -->
    <link href="assets/css/main.css" rel="stylesheet">
    <!-- Font Awesome -->
    <script src='assets/js/font_awesome_a076d05399.js' crossorigin='anonymous'></script>
</head>

<body class="gallery-page">

    <!-- Aquí se incluirá el header mediante JavaScript -->
    <div id="header-placeholder"></div>

    <main class="main">

        <!-- Hero Section -->
        <section id="hero" class="hero">
            <img class="overlay team-header-img" src="assets/img/Rolling_Barrel_Team.jpg" alt="">
            <div class="bg-absolute-negro"></div>
            <div class="container d-flex flex-column align-items-left team-title">
				<p class="mini-titular">Team</p>
				<h1 class="glitch-effect color-primario titular" data-text="Rolling Barrel">Rolling Barrel</h1>
				<!-- <p data-aos="fade-up" data-aos-delay="200">Know more about Us</p> -->
			</div>
        </section>
        <!-- /Hero Section -->

        <!-- Studio section -->
        <section id="studio-info" class="bg-default border-primario-b border-primario-t py-5">
			<div class="container color-negro">
				<div class="contenedor-flex-horizontal color-blanco">
					<div class="container">
						<p>Based in Barcelona, we are a dedicated team of game developers, combining the talents of both art and programming students.
                            United by a shared passion for innovation, we have collaboratively developed a video game that showcases our unique skills and collective vision.
						</p>
					</div>
					<div class="container p-3">
						<p>Throughout this journey, we have leveraged the strengths of each member—artists and programmers alike—to bring our creative concepts to
                            life. Working as a cohesive unit, we have navigated the challenges of game development with professionalism and commitment. Below,
                            meet the talented individuals whose expertise and dedication have turned our vision into a reality.
						</p>
					</div>
				</div>
			</div>
		</section>
        <!-- /Studio section -->


        </section>

        <!-- /Studio section -->

        <!-- Gallery Section -->
        <section id="galeria" class="container">
            <h1 class="text-center titular">Team</h1>
            <div class="layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
                <ul class="container gallery-filters botones-linea-primario pb-5 mb-0">
                    <li data-filter="*" class="filter-active">All</li>
                    <li data-filter=".filter-artist">Artists</li>
                    <li data-filter=".filter-programmer">Programmers</li>
                </ul>

                <div id="gallery-placeholder">
                    <!-- Items will be dynamically added here -->
                </div>
            </div>
        </section>
        <!-- /Gallery Section -->

    </main>

    <!-- Aquí se incluirá el footer mediante JavaScript -->
    <div id="footer-placeholder"></div>

    <!-- Incluir el header con JavaScript -->
    <script>
        // Cargar el header
        fetch("inc/header.html")
            .then(response => response.text())
            .then(data => {
                document.getElementById("header-placeholder").outerHTML = data;
                // Header current active page
                var currentPage = window.location.pathname;
                var navLinks = document.querySelectorAll("#navmenu ul li a");
                navLinks.forEach(function (link) {
                    if (link.getAttribute("href") === currentPage) {
                        link.classList.add("active");
                    } else {
                        link.classList.remove("active");
                    }
                });
            });
        // Cargar footer
        fetch("inc/footer.html")
            .then(response => response.text())
            .then(data => {
                document.getElementById("footer-placeholder").innerHTML = data;
                // Compute current year for footer
                document.getElementById("current-year").innerHTML = new Date().getFullYear();
            });
    </script>

    <script>
        // Function to create the gallery
        function createGallery(data) {
            let content = `<div class="galeria-contenedor border-primario-t pt-5">`;
            data.forEach((person) => {
                content += `<div class="galeria-item filter-${person.Filter}">
                    <span class="badge-${person.Filter}">${person.Filter}</span>
					<div class="img-team"><img src="assets/img/team/${person.Photo ? person.Photo : `team-placeholder.jpg`}" class="" alt=""></div>
					<div class="miembro-info" data-text="ERROR">
						<h4 class="miembro-nombre" data-text="CHRYSALIS">${person.Name}</h4>
						<div class="miembro-detalles">
							<span data-text="ERROR">${person.Roles}</span>
							<div class="social">
								${person.Linkedin ? `<a href="${person.Linkedin}" target="_blank"><i class="bi bi-linkedin"></i></a>` : ""}
                                    ${person.GitHub ? `<a href="${person.GitHub}" target="_blank"><i class="bi bi-github"></i></a>` : ""}
                                    ${person.ArtStation ? `<a href="${person.ArtStation}" target="_blank"><i class="fab fa-artstation"></i></a>` : ""}
                                    ${person.Website ? `<a href="${person.Website}" target="_blank"><i class="bi bi-globe"></i></a>` : ""}
                                    ${person.Other ? `<a href="${person.Other}" target="_blank"><i class="bi bi-globe"></i></a>` : ""}
							</div>
						</div>
					</div>
				</div>`;
            });
            content += `</div>`;

            const gallery = document.getElementById("gallery-placeholder");
            gallery.outerHTML = content;
        }

        function addFilterLogic() {
            var filterButtons = document.querySelectorAll('.gallery-filters li');
            filterButtons.forEach(button => {
                button.addEventListener('click', function () {
                    // Set active
                    var activeFilter = document.querySelector('li.filter-active')
                    if (activeFilter) {
                        activeFilter.classList.remove("filter-active");
                    }
                    this.classList.add("filter-active");

                    // Filter elements
                    var filterValue = this.getAttribute('data-filter');
                    var items = document.querySelectorAll('.galeria-item');
                    if (filterValue == '*') {
                        items.forEach(item => { item.style.display = "block" });
                    } else {
                        items.forEach(item => { item.style.display = "none" });
                        var itemsToEnable = document.querySelectorAll(filterValue);
                        itemsToEnable.forEach(item => { item.style.display = "block" });
                    }
                });
            });
        }

        // Read gallery data from JSON
        fetch("assets/json/team_info.json")
            .then(response => response.json())
            .then(data => {
                // Call the function to generate the gallery
                createGallery(data);
                addFilterLogic();
            });

    </script>

    <!-- Scroll Top -->
    <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center">
        <i class="bi bi-arrow-up-short"></i>
    </a>

    <!-- Preloader -->
    <!-- <div id="preloader"></div> -->

    <!-- Vendor JS Files -->
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- <script src="assets/vendor/php-email-form/validate.js"></script> -->
    <script src="assets/vendor/aos/aos.js"></script>
    <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
    <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
    <!-- <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script> -->

    <!-- Main JS File -->
    <script src="assets/js/main.js"></script>

</body>

</html>