Skip to content

Commit a4f3f38

Browse files
wizzdomwizzdom
committed
add images and animations go brrr
1 parent d4287cd commit a4f3f38

4 files changed

Lines changed: 131 additions & 32 deletions

File tree

‎src/_data/site.yml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,3 +155,45 @@ home:
155155
username: pearse
156156
about:
157157
heading: About Us!
158+
graphic:
159+
image1:
160+
image: https://img.redbrick.dcu.ie/250x175/https://cdn.redbrick.dcu.ie/atlas/static/img/hackerdom.jpg
161+
alt: Wizzdom Hackerclub
162+
image2:
163+
image: https://media.discordapp.net/stickers/1170064614973788270.png
164+
alt: Distro Bopping
165+
image3:
166+
image: https://img.redbrick.dcu.ie/300x150/https://cdn.redbrick.dcu.ie/atlas/static/img/groupbanner.jpg
167+
alt: Susquehanna Event
168+
image4:
169+
image: https://img.redbrick.dcu.ie/150x150/https://cdn.redbrick.dcu.ie/atlas/static/img/sistem-mag1c.webp
170+
alt: SISTEM crew
171+
image5:
172+
image: https://img.redbrick.dcu.ie/150x200/https://cdn.redbrick.dcu.ie/atlas/static/img/hackergroup.jpg
173+
alt: Hackerclub crew
174+
image6:
175+
alt: Discord emote
176+
image7:
177+
alt: Redbrick logo
178+
events:
179+
heading: Events
180+
graphic:
181+
image1:
182+
image: https://img.redbrick.dcu.ie/250x175/https://cdn.redbrick.dcu.ie/atlas/static/img/hackerdom.jpg
183+
alt: Wizzdom Hackerclub
184+
image2:
185+
image: https://media.discordapp.net/stickers/1170064614973788270.png
186+
alt: Distro Bopping
187+
image3:
188+
image: https://img.redbrick.dcu.ie/300x150/https://cdn.redbrick.dcu.ie/atlas/static/img/groupbanner.jpg
189+
alt: Susquehanna Event
190+
image4:
191+
image: https://img.redbrick.dcu.ie/150x150/https://cdn.redbrick.dcu.ie/atlas/static/img/sistem-mag1c.webp
192+
alt: SISTEM crew
193+
image5:
194+
image: https://img.redbrick.dcu.ie/150x200/https://cdn.redbrick.dcu.ie/atlas/static/img/hackergroup.jpg
195+
alt: Hackerclub crew
196+
image6:
197+
alt: Discord emote
198+
image7:
199+
alt: Redbrick logo

‎src/_includes/home/sections/about.njk‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,49 @@
11
<section class="relative hero min-h-50%">
2-
<img class="absolute inset-0" src="https://cdn.redbrick.dcu.ie/atlas/static/img/spotlight-bg.webp" alt="" />
2+
<img class="absolute inset-0 object-cover w-full h-full -z-30" src="https://cdn.redbrick.dcu.ie/atlas/static/img/spotlight-bg.webp" alt="" />
3+
<div class="absolute inset-0 -z-40 bg-base-content [mask-image:url(https://cdn.redbrick.dcu.ie/atlas/static/svg/grid-bg.svg)]"></div>
34
<div class="absolute inset-0 -z-50 bg-base-200"></div>
4-
<div class="hero-content px-5 py-10 lg:py-20 h-full w-full flex-col md:flex-row" id="about">
5-
<div class="max-w-md lg:max-w-2xl text-center md:text-start">
5+
<div class="hero-content px-5 py-10 lg:py-20 h-full w-full flex-col md:flex-row gap-10 lg:gap-20 items-center justify-between" id="about">
6+
<div class="max-w-md lg:max-w-2xl text-center md:text-start z-10">
67
<h1 class="text-3xl lg:text-5xl font-bold">
7-
About Us
8+
{{ site.home.about.heading }}
89
</h1>
910
<div class="mt-4 text-md prose whitespace-normal">
1011
{{ includeMarkdown("./src/_includes/home/sections/about.md") | safe }}
1112
</div>
1213
</div>
14+
<div class="relative z-10 perspective-1600 w-full md:w-1/2 aspect-square">
15+
<img class="hero-card absolute bottom-[62%] left-[12%] h-[32%] object-contain drop-shadow-2xl hover:-translate-y-2 hover:scale-105"
16+
src="{{ site.home.about.graphic.image1.image }}"
17+
alt="{{ site.home.about.graphic.image1.alt }}" data-about-img />
18+
<img class="hero-card absolute bottom-[30%] left-[35%] h-[50%] object-contain drop-shadow-2xl hover:-translate-y-2 hover:scale-105"
19+
src="{{ site.home.about.graphic.image2.image }}"
20+
alt="{{ site.home.about.graphic.image2.alt }}" data-about-img />
21+
<img class="hero-card absolute bottom-[10%] left-[10%] h-[26%] object-contain drop-shadow-2xl hover:-translate-y-2 hover:scale-105"
22+
src="{{ site.home.about.graphic.image3.image }}"
23+
alt="{{ site.home.about.graphic.image3.alt }}" data-about-img />
24+
<img class="hero-card absolute bottom-[10%] left-[50%] h-[22%] object-contain drop-shadow-2xl hover:-translate-y-2 hover:scale-105"
25+
src="{{ site.home.about.graphic.image4.image }}"
26+
alt="{{ site.home.about.graphic.image4.alt }}" data-about-img />
27+
</div>
1328
</div>
1429
</section>
30+
<script>
31+
gsap.registerPlugin(ScrollTrigger)
32+
gsap.from("[data-about-img]", {
33+
scrollTrigger: {
34+
trigger: "#about",
35+
start: "top 75%",
36+
},
37+
opacity: 0,
38+
scale: 0,
39+
y: 50,
40+
delay: 0.2,
41+
ease: "elastic(1,1)",
42+
duration: 1.25,
43+
stagger: 0.2,
44+
clearProps: "transform",
45+
onComplete: function() {
46+
this.targets().forEach(el => el.classList.add("transition-transform", "duration-300"));
47+
}
48+
})
49+
</script>

‎src/_includes/home/sections/events.njk‎

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,56 @@
11
<section class="relative hero min-h-50%">
2-
<div class="hero-content px-5 py-5 lg:py-10 w-full flex-col md:flex-row" id="events">
3-
<div class="max-w-md lg:max-w-2xl text-center md:text-start">
2+
<div
3+
class="absolute inset-0 -z-40 bg-base-content [mask-image:url(https://cdn.redbrick.dcu.ie/atlas/static/svg/grid-bg.svg)]">
4+
</div>
5+
<div class="absolute inset-0 -z-50 bg-base-200"></div>
6+
<div
7+
class="hero-content px-5 py-5 lg:py-10 w-full flex-col md:flex-row-reverse gap-10 lg:gap-20 items-center justify-between"
8+
id="events">
9+
<div class="max-w-md lg:max-w-2xl text-center md:text-start z-10">
410
<h1 class="text-3xl lg:text-5xl font-bold">
5-
Events
11+
{{ site.home.events.heading }}
612
</h1>
713
<p class="mt-4 text-md/relaxed">
814
Redbrick hosts a variety of events throughout the year, from LAN parties to workshops and talks...
915
</p>
1016
</div>
11-
<div class="relative -z-20 perspective-1600 w-full md:w-1/2 aspect-square">
12-
<img class="hero-card absolute bottom-[62%] left-[12%] h-[32%] object-contain"
13-
src="{{ site.home.hero.graphic.image1.image }}"
14-
alt="{{ site.home.hero.graphic.image1.alt }}" data-events-card />
15-
<img class="hero-card absolute bottom-[30%] left-[35%] h-[50%] object-contain"
16-
src="{{ site.home.hero.graphic.image2.image }}"
17-
alt="{{ site.home.hero.graphic.image2.alt }}" data-events-card />
18-
<img class="hero-card absolute bottom-[10%] left-[10%] h-[26%] object-contain"
19-
src="{{ site.home.hero.graphic.image3.image }}"
20-
alt="{{ site.home.hero.graphic.image3.alt }}" data-events-card />
21-
<img class="hero-card absolute bottom-[10%] left-[50%] h-[22%] object-contain"
22-
src="{{ site.home.hero.graphic.image4.image }}"
23-
alt="{{ site.home.hero.graphic.image4.alt }}" data-events-card />
17+
<div class="relative z-10 perspective-1600 w-full md:w-1/2 aspect-square">
18+
<img
19+
class="hero-card absolute bottom-[62%] left-[12%] h-[32%] object-contain drop-shadow-2xl hover:-translate-y-2 hover:scale-105"
20+
src="{{ site.home.events.graphic.image1.image }}" alt="{{ site.home.events.graphic.image1.alt }}"
21+
data-events-img />
22+
<img
23+
class="hero-card absolute bottom-[30%] left-[35%] h-[50%] object-contain drop-shadow-2xl hover:-translate-y-2 hover:scale-105"
24+
src="{{ site.home.events.graphic.image2.image }}" alt="{{ site.home.events.graphic.image2.alt }}"
25+
data-events-img />
26+
<img
27+
class="hero-card absolute bottom-[10%] left-[10%] h-[26%] object-contain drop-shadow-2xl hover:-translate-y-2 hover:scale-105"
28+
src="{{ site.home.events.graphic.image3.image }}" alt="{{ site.home.events.graphic.image3.alt }}"
29+
data-events-img />
30+
<img
31+
class="hero-card absolute bottom-[10%] left-[50%] h-[22%] object-contain drop-shadow-2xl hover:-translate-y-2 hover:scale-105"
32+
src="{{ site.home.events.graphic.image4.image }}" alt="{{ site.home.events.graphic.image4.alt }}"
33+
data-events-img />
2434
</div>
2535
</div>
2636
</section>
27-
2837
<script>
29-
gsap.from("[data-events-card]", {
38+
gsap.registerPlugin(ScrollTrigger)
39+
gsap.from("[data-events-img]", {
40+
scrollTrigger: {
41+
trigger: "#events",
42+
start: "top 75%",
43+
},
3044
opacity: 0,
3145
scale: 0,
3246
y: 50,
33-
delay: 0.8,
47+
delay: 0.2,
3448
ease: "elastic(1,1)",
3549
duration: 1.25,
36-
stagger: 0.2
50+
stagger: 0.2,
51+
clearProps: "transform",
52+
onComplete: function() {
53+
this.targets().forEach(el => el.classList.add("transition-transform", "duration-300"));
54+
}
3755
})
3856
</script>

‎src/_includes/home/sections/hero/hero-graphic.njk‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
11
<div class="relative -z-20 perspective-1600 w-full md:w-1/2 aspect-square">
22
<img
3-
class="hero-card bottom-[62%] left-[12%] h-[32%]"
3+
class="hero-card bottom-[62%] left-[12%] h-[32%] hover:-translate-y-2 hover:scale-105"
44
src="{{ site.home.hero.graphic.image1.image }}"
55
alt="{{ site.home.hero.graphic.image1.alt }}"
66
data-hero-card
77
/>
88
<img
9-
class="hero-card bottom-[66%] left-[35%] h-[10%]"
9+
class="hero-card bottom-[66%] left-[35%] h-[10%] hover:-translate-y-2 hover:scale-105"
1010
src="{{ site.home.hero.graphic.image2.image }}"
1111
alt="{{ site.home.hero.graphic.image2.alt }}"
1212
data-hero-card
1313
/>
1414
<img
15-
class="hero-card bottom-[18%] left-[14%] h-[26%]"
15+
class="hero-card bottom-[18%] left-[14%] h-[26%] hover:-translate-y-2 hover:scale-105"
1616
src="{{ site.home.hero.graphic.image3.image }}"
1717
alt="{{ site.home.hero.graphic.image3.alt }}"
1818
data-hero-card
1919
/>
2020
<img
21-
class="hero-card bottom-[12%] left-[58%] h-[22%]"
21+
class="hero-card bottom-[12%] left-[58%] h-[22%] hover:-translate-y-2 hover:scale-105"
2222
src="{{ site.home.hero.graphic.image4.image }}"
2323
alt="{{ site.home.hero.graphic.image4.alt }}"
2424
data-hero-card
2525
/>
2626
<img
27-
class="hero-card bottom-[48%] left-[64%] h-[30%]"
27+
class="hero-card bottom-[48%] left-[64%] h-[30%] hover:-translate-y-2 hover:scale-105"
2828
src="{{ site.home.hero.graphic.image5.image }}"
2929
alt="{{ site.home.hero.graphic.image5.alt }}"
3030
data-hero-card
3131
/>
3232
<img
33-
class="absolute bottom-[75%] left-[60%] h-[10%]"
33+
class="absolute bottom-[75%] left-[60%] h-[10%] hover:-translate-y-2 hover:scale-105"
3434
src="{{ site.images.emote.src }}"
3535
alt="{{ site.home.hero.graphic.image6.alt }}"
3636
data-hero-card
3737
/>
3838
<img
39-
class="absolute bottom-[45%] left-[38%] h-[20%]"
39+
class="absolute bottom-[45%] left-[38%] h-[20%] hover:-translate-y-2 hover:scale-105"
4040
src="{{ site.images.brick.src }}"
4141
alt="{{ site.home.hero.graphic.image7.alt }}"
4242
data-hero-card
@@ -50,6 +50,10 @@
5050
delay: 0.5,
5151
ease: "elastic(1,1)",
5252
duration: 1.25,
53-
stagger: 0.2
53+
stagger: 0.2,
54+
clearProps: "transform",
55+
onComplete: function() {
56+
this.targets().forEach(el => el.classList.add("transition-transform", "duration-300"));
57+
}
5458
})
5559
</script>

0 commit comments

Comments
 (0)