diff --git a/public/frosh/2025/images/bbq-1.jpg b/public/frosh/2025/images/bbq-1.jpg new file mode 100644 index 00000000..90fe307b Binary files /dev/null and b/public/frosh/2025/images/bbq-1.jpg differ diff --git a/public/frosh/2025/images/bbq-2.jpg b/public/frosh/2025/images/bbq-2.jpg new file mode 100644 index 00000000..02e51d10 Binary files /dev/null and b/public/frosh/2025/images/bbq-2.jpg differ diff --git a/public/frosh/2025/images/bbq-3.jpg b/public/frosh/2025/images/bbq-3.jpg new file mode 100644 index 00000000..374e185d Binary files /dev/null and b/public/frosh/2025/images/bbq-3.jpg differ diff --git a/public/frosh/2025/images/bg-1.jpg b/public/frosh/2025/images/bg-1.jpg new file mode 100644 index 00000000..ad60a050 Binary files /dev/null and b/public/frosh/2025/images/bg-1.jpg differ diff --git a/public/frosh/2025/images/bg-2.jpg b/public/frosh/2025/images/bg-2.jpg new file mode 100644 index 00000000..7fead9cd Binary files /dev/null and b/public/frosh/2025/images/bg-2.jpg differ diff --git a/public/frosh/2025/images/cooking-1.jpg b/public/frosh/2025/images/cooking-1.jpg new file mode 100644 index 00000000..4816655f Binary files /dev/null and b/public/frosh/2025/images/cooking-1.jpg differ diff --git a/public/frosh/2025/images/duck.svg b/public/frosh/2025/images/duck.svg new file mode 100644 index 00000000..e57ba1ad --- /dev/null +++ b/public/frosh/2025/images/duck.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + diff --git a/public/frosh/2025/images/guru-1.jpg b/public/frosh/2025/images/guru-1.jpg new file mode 100644 index 00000000..e5856878 Binary files /dev/null and b/public/frosh/2025/images/guru-1.jpg differ diff --git a/public/frosh/2025/images/hero-mountain.png b/public/frosh/2025/images/hero-mountain.png new file mode 100644 index 00000000..63bec9ed Binary files /dev/null and b/public/frosh/2025/images/hero-mountain.png differ diff --git a/public/frosh/2025/images/hike-1.jpg b/public/frosh/2025/images/hike-1.jpg new file mode 100644 index 00000000..2a722384 Binary files /dev/null and b/public/frosh/2025/images/hike-1.jpg differ diff --git a/public/frosh/2025/images/madness-1.jpg b/public/frosh/2025/images/madness-1.jpg new file mode 100644 index 00000000..f902c2ac Binary files /dev/null and b/public/frosh/2025/images/madness-1.jpg differ diff --git a/public/frosh/2025/images/madness-2.jpg b/public/frosh/2025/images/madness-2.jpg new file mode 100644 index 00000000..f23c6347 Binary files /dev/null and b/public/frosh/2025/images/madness-2.jpg differ diff --git a/public/frosh/2025/images/madness-3.jpg b/public/frosh/2025/images/madness-3.jpg new file mode 100644 index 00000000..ee1b4d37 Binary files /dev/null and b/public/frosh/2025/images/madness-3.jpg differ diff --git a/public/frosh/2025/images/madness-4.jpg b/public/frosh/2025/images/madness-4.jpg new file mode 100644 index 00000000..b27b69ff Binary files /dev/null and b/public/frosh/2025/images/madness-4.jpg differ diff --git a/public/frosh/2025/images/reeds-width.png b/public/frosh/2025/images/reeds-width.png new file mode 100644 index 00000000..41b7bd88 Binary files /dev/null and b/public/frosh/2025/images/reeds-width.png differ diff --git a/public/frosh/2025/images/reeds-width.svg b/public/frosh/2025/images/reeds-width.svg new file mode 100644 index 00000000..154f18dd --- /dev/null +++ b/public/frosh/2025/images/reeds-width.svg @@ -0,0 +1,289 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/frosh/2025/images/reeds.svg b/public/frosh/2025/images/reeds.svg new file mode 100644 index 00000000..95c274b0 --- /dev/null +++ b/public/frosh/2025/images/reeds.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/frosh/2025/index.html b/public/frosh/2025/index.html new file mode 100644 index 00000000..764ea1e0 --- /dev/null +++ b/public/frosh/2025/index.html @@ -0,0 +1,581 @@ + + + + Frosh Week 2025 + + + + + + + + + + + + + + + + +
+
+
+

SFU Computing Science Student Society

+
+

Ducky Frosh 2025

+
+
+
+
+
+
days
+
+
+
+
hours
+
+
+
+
minutes
+
+
+
+
seconds
+
+
+ +
+ +
+ + + + + + + + + + + + + +
+ +
+
+ reeds +
+
+ reeds +
+
+
+ +
+ +
+ +
+
+
+
+

What's a "Frosh Week"?

+
+

+ Frosh Week is a series of events run by the Computing Science Student + Society at Simon Fraser University in collaboration with the School of Computing + Science. +

+

+ Frosh Week occurs during the fall semester to welcome + 300+ new undergraduate students + into the School of Computing Science with the help of 80+ volunteers. Starting a + degree is a pivotal moment in a student's academic journey, and Frosh Week helps forge + lasting memories and strong friendships. +

+

+ Ducky Frosh continues this tradition, running from + September 8th to 13th, 2025. This year's Frosh is inspired by the + process of nurturing a young duckling into a strong, independent duck. +

+
+
+ + Sign up + + FAQ +
+
+ +
+ +
+ Boardgames 1 + Midnight Madness 4 + Boardgames 1 +
+ +
+ +
+

Who's organizing this?

+
+

+ The SFU Computing Science Student Society (CSSS) is a student-led + organization supporting + over 2,500 undergraduate computing science students at Simon Fraser + University. All SFU students—whether majoring, minoring, or just taking a computing + science course—are automatically members. Everyone is welcome to get involved! +

+

+ We organize three annual hackathons, a Silicon Valley trip, and + career-focused events like career fairs, company tours, and workshops. We also host + bi-weekly board game nights, hikes, + seasonal parties, and more! +

+

Learn more about us!

+
+
+ + + + + Discord + + + + + + + + + + + CSSS Site + +
+
+
+ +
+ Boardgame 1 + BBQ 1 + Hiking 1 +
+ +
+
+

Schedule

+
+

+ Ducky Frosh is happening over 5 days (and one night) from + Monday, September 8 to Saturday, September 13 +

+

+ There's something for everyone at Frosh, so we hope to see you at as many events as + possible! If there are any changes in the schedule, we will notify everyone through + email and announcements on Discord, so make sure + you've signed up or joined the server. +

+

Here's a summary of what's to come:

+
+
+

Monday

+

Ice Cream Social

+
ASB Atrium & ASB 9702
+ - +

+ A casual kickoff to Frosh Week! Students receive their Ducky Frosh T-shirts, meet + their Frosh leaders, and mingle over complimentary ice cream. This event helps new + students connect and feel welcome. +

+
+
+

Tuesday

+

Burnaby Mountain Park Hike

+ - +
SFU Upper Bus Loop
+

+ An adventurous group hike that includes outdoor games, food, and refreshing + drinks. This active outing builds camaraderie and offers a fun, informal way to + enjoy nature and bond with others. +

+
+
+

Wednesday

+

Rest Day

+

+ Take this day to get ready for the next 3 days of Frosh! (also you should probably + do your readings) +

+
+
+

Thursday

+

Info Session

+ - +
TBD
+

+ Introduces Froshees to Computing Science concentrations, academic planning, and + the Co-op program. Led by faculty and industry experts. +

+
+

Pac-Macro

+ - +
UniverCity
+

+ A life-sized Pac-Man game using real streets and a CSSS-built tracking software. + Froshees play as Pac-Man or Ghosts in a thrilling, energetic game that combines + tech and fun. +

+
+

BBQ & Board Games

+ - +
TASC-1 9204
+

+ Enjoy delicious burgers made by the CSSS Culinary Team. Followed by a cozy evening + of board games to help Froshees relax and bond. +

+
+
+

Friday

+

Midnight Madness

+

+ Midnight Madness is the grand finale of Ducky Frosh, a 12-hour overnight + extravaganza packed with games, challenges, food, and bonding. Students compete in + activities representing the five Applied Science Schools, and build lasting + memories. +

+ +
+ +

Pre-Madness

+ - +
TASC-1 9204
+

Check-in, get oriented and get introduced to the Madness.

+ +
+ +

Poster Competition

+ - +
Academic Quadrangle
+ +
+ +

Amazing Race/Capture the Flag

+ - +
Academic Quadrangle
+
+
+

Saturday

+

Midnight Pizza Dinner

+ - +
TASC-1 9204
+ +
+ +

Scavenger Hunt

+ - +
TASC-1 9204
+ +
+ +

Trivia and Games

+ - +
TASC-1 9204
+ +
+ +

Boardgames and JackBox

+ - +
TASC-1 9204
+ +
+ +

Karaoke

+ - +
Academic Quadrangle 3159
+ +
+ +

Slurpee Race

+ - +
TBD
+ +
+ +

Ramming Ceremony

+ - +
Academic Quadrangle Pond
+ +
+ +

Breakfast

+ ~ +
Dining Commons
+ +
+
+
+
+
+ +
+ +
+ Midnight Madness 2 + Midnight Madness 1 + Midnight Madness 3 +
+ +
+
+

Sponsors

+
+

+ Every Frosh Week takes months of planning and wouldn't be possible without the CSSS + executives and volunteers. There is one last piece to making Frosh a success: + sponsors. +

+

+ If you're interested in sponsoring this event, please email + csss-froshchair@sfu.ca. +

+
+
+ + + + + Frosh Chair + +
+
+
+ +
+ BBQ 2 + Midnight Madness 1 + BBQ 3 +
+ +
+ +
+

Frequently Asked Questions

+
+

Where will the events take place?

+

+ All events take place at the Simon Fraser University Burnaby campus. The locations per + event can be found in the schedule.

+ If you are having difficulty locating us, do not hesitate to contact Dina or Jake. + (Contact information can be found in the CSSS Discord server.) +

+

What should I bring to the events?

+

+ Yourself. That's it. +

+ Except during Pac-Macro, you'll need a mobile device that has an internet connection. +

+

What is Pac-Macro?

+

+ Pac-Macro is essentially Pacman in real life. Utilizing CSSS-developed software, the + game will keep track of players' positions on campus, and display the locations of + other players. +

+

+ I can't come to every event, or am not free for the entire duration of an event. Is + this OK? +

+

+ You can come and go as you please during Frosh Week. Late arrivals or early departures + are totally OK. If you can't attend some events due to other commitments, that's fine + too. +

+

Why is it called "Computing Science", not "Computer Science"?

+

+ CS at SFU has a long history. Way back in '73 when the School of Computing Science + started at SFU, either "Computer Science" wasn't an idiom for the major yet, or we + just decided to be different. +

+

What courses should I take?

+

+ Contact the + Faculty of Applied Science office + or ask the CSSS Discord for course + information. +

+

I can't find a room!

+

+ SFU provides a very handy tool called the + Room Finder. + Simply input the room number (e.g. ASB 9703), and it will highlight the room on an + interactive campus map. This works for the Burnaby, Surrey, and Vancouver campuses. +

+
+
+
+
+
+ + + diff --git a/public/frosh/2025/main.js b/public/frosh/2025/main.js new file mode 100644 index 00000000..e51adac4 --- /dev/null +++ b/public/frosh/2025/main.js @@ -0,0 +1,162 @@ +const styleVars = window.getComputedStyle(document.body); + +/** + * Animates the reeds parting when scrolling down. + */ +function animateReedsParting() { + const scrollTrigger = { + trigger: '.hero', + start: 'top top', + end: 'bottom top', + toggleActions: 'play none reverse none', + scrub: true + }; + + gsap.to('.reeds > .left', { + x: '-100vw', + scrollTrigger + }); + + gsap.to('.reeds > .right', { + x: '100vw', + scrollTrigger + }); +} + +/** + * Animates the duck swimming left to right. + * Added code so it has a consistent velocity. + */ +function animateDucky() { + const duck = document.getElementById('animated-duck-container'); + + // Get the width of the duck and have it start off the screen, based on its width + const start = -duck.getBoundingClientRect().width; + // and the width of the viewport + const end = window.innerWidth; + + // Get the distance the duck needs to travel and move it at a rate of 100px per second. + const distance = end - start; + const duration = distance / 100; // measured in pixels + + // Set the duck to start at the left side + gsap.set(duck, { left: start }); + // Move it to the right, repeat infinitely + gsap.to('#animated-duck-container', { + left: end, + repeat: -1, // infinitely loop + ease: 'none', + repeatDelay: 4, + duration + }); +} + +/** + * Makes the photos pop in from below. + */ +function imagePopIn() { + document.querySelectorAll('.gallery').forEach(gallery => { + const photos = gallery.querySelectorAll('.photo'); + + gsap.from(photos, { + scrollTrigger: { + trigger: gallery, + start: 'top 80%' + }, + y: '5vh', + opacity: 0, + duration: 0.5, + ease: 'none', + stagger: 0.2 + }); + }); +} + +/** + * Animation that changes the text color of the header items when + * scrolling down enough. + */ +function handleHeaderChanges() { + gsap.to('header', { + scrollTrigger: { + trigger: 'main', + start: 'top top', + end: 'bottom top', + scrub: true + }, + backgroundColor: styleVars.getPropertyValue('--c-bot-main') + }); + + const navTrigger = { + trigger: 'main', + start: 'center center', + toggleActions: 'play none play reverse' + }; + + gsap.to('header', { + scrollTrigger: navTrigger, + color: 'white' + }); + + // For the svg of the logo + gsap.to('.st1', { + scrollTrigger: navTrigger, + fill: 'white' + }); +} + +/** + * Controls the countdown on the hero + */ +function setCountdown() { + // Target time is September 8, 2025 PDT @ 1PM + const target = new Date('2025-09-08T13:00:00.000-07:00').getTime(); + + // Don't show the countdown if it's past the Frosh start date. + if (target < new Date().getTime()) { + document.getElementById('countdown').style.display = 'none'; + return; + } + const secToMs = 1000; + const minToMs = secToMs * 60; + const hourToMs = minToMs * 60; + const dayToMs = hourToMs * 24; + + const secEle = document.getElementById('cd-sec'); + const minEle = document.getElementById('cd-min'); + const hourEle = document.getElementById('cd-hour'); + const dayEle = document.getElementById('cd-day'); + + let update = () => { + const now = new Date().getTime(); + let difference = target - now; + + let secs = Math.floor((difference / secToMs) % 60); + let mins = Math.floor((difference / minToMs) % 60); + let hours = Math.floor((difference / hourToMs) % 24); + let days = Math.floor(difference / dayToMs); + + secEle.textContent = secs; + minEle.textContent = mins; + hourEle.textContent = hours; + dayEle.textContent = days; + }; + + update(); + setInterval(update, 1000); +} + +window.addEventListener('load', _ => { + gsap.registerPlugin(ScrollTrigger, ScrollSmoother); + animateReedsParting(); + handleHeaderChanges(); + animateDucky(); + setCountdown(); + if (window.matchMedia('(min-width: 1280px').matches) { + imagePopIn(); + } + window.addEventListener('resize', () => { + gsap.killTweensOf('#animated-duck-container'); + animateDucky(); + }); +}); diff --git a/public/frosh/2025/reset.min.css b/public/frosh/2025/reset.min.css new file mode 100644 index 00000000..20bd275f --- /dev/null +++ b/public/frosh/2025/reset.min.css @@ -0,0 +1,64 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +html:focus-within { + scroll-behavior: smooth; +} + +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +a:not([class]) { + text-decoration-skip-ink: auto; +} + +img, +picture { + max-width: 100%; + display: block; +} + +input, +textarea, +select { + font: inherit; +} + +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/public/frosh/2025/style.css b/public/frosh/2025/style.css new file mode 100644 index 00000000..0a8697ae --- /dev/null +++ b/public/frosh/2025/style.css @@ -0,0 +1,443 @@ +/* Global stuff */ +:root { + /* Structure Sizes */ + --header-h: 3.5rem; + --home-logo-size: clamp(2rem, 3vw, calc(var(--header-h) - 1rem)); + --hero-h: 120vh; + --hero-tb-padding: 25vh; + + /* Colour Palette */ + --c-primary: #77a290; + --c-secondary: #dde1c9; + --c-tertiary: #f2f3ee; + --c-accent: #ffd754; + --c-top-main: #5c889c; + --c-bot-main: #11191c; + --c-strong: #14331f; + + /* Fonts */ + --f-heading: 'League Spartan', sans-serif; + --f-subheading: 'Monstserrat', sans-serif; + --f-main: 'DM Sans', sans-serif; +} + +a { + all: unset; + + cursor: pointer; +} + +h1 { + font-family: var(--f-heading); + font-weight: 800; +} + +h2 { + font-size: clamp(1.5rem, 3vw, 3rem); + font-family: var(--f-subheading); + font-weight: 500; +} + +p { + font-size: clamp(1rem, 2vw, 1.5rem); +} + +h3 { + font-size: clamp(1.2rem, 2.1vw, 2.5rem); +} + +.bg-box { + background-color: var(--c-primary); + box-shadow: var(--c-accent) 5px 5px 0px 0px; + padding: 0.5rem 0.25rem; + border: solid 2px var(--c-strong); +} + +.button { + /* Structure */ + width: clamp(8rem, 22vw, 10rem); + aspect-ratio: 6 / 1; + border-radius: 10px; + + /* Text */ + display: flex; + align-items: center; + justify-content: space-evenly; + color: white; + font-family: var(--f-subheading); + font-size: clamp(1rem, 8vw, 1.5rem); + font-weight: 700; + + cursor: pointer; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} + +.icon { + width: 1.5em; + height: 1.5em; +} + +.st0 { + fill: white; +} + +/* Specific styles */ +body { + font-family: var(--f-main); + font-weight: 300; +} + +header { + position: sticky; + top: 0; + background-color: var(--c-top-main); + height: var(--header-h); + z-index: 5; + + & > nav { + display: flex; + align-items: center; + + & > a { + padding: 0.5rem; + } + + & > ul { + display: flex; + width: 100%; + justify-content: space-around; + padding: 0; + + & > li { + display: block; + flex: 1 1 0; + text-align: center; + } + } + } +} + +.hero { + display: flex; + flex-direction: column; + align-items: center; + + height: 120vh; + padding: var(--hero-tb-padding) 1rem; + + background-image: url('/frosh/2025/images/hero-mountain.png'); + background-size: cover; + background-position: center; + + & > hgroup { + text-align: center; + + & > .title-container { + & > h1 { + width: 100%; + font-size: clamp(2.5rem, 10vw, 8rem); + color: var(--c-accent); + text-shadow: var(--c-strong) 2px 2px 0px; + } + } + + & > p { + font-family: var(--f-subheading); + font-size: clamp(1rem, 3vw, 2rem); + font-weight: 200; + } + } + + & > #countdown { + display: flex; + justify-content: center; + column-gap: clamp(0.5rem, 3vw, 2rem); + text-align: center; + width: 90vw; + max-width: 25rem; + + & > .cd-col { + flex: 0 0 25%; + + & > .value { + font-size: clamp(2.5rem, 10vw, 5rem); + color: var(--c-accent); + text-shadow: var(--c-strong) 2px 2px; + } + } + } + + & > nav { + & > ul { + padding: 0; + + & > li { + display: block; + } + + li + li { + margin-top: 1rem; + } + } + } +} + +.top-screen { + position: relative; + width: 100%; + height: 100vh; + overflow: hidden; + z-index: 10; + + & > #animated-duck-container { + position: absolute; + bottom: -1vh; + left: -120vw; + /* Keeping this in case the animation break */ + + & > svg { + height: 12vh; + } + } + + & > .reeds { + position: fixed; + bottom: 0; + width: 100%; + pointer-events: none; + + & > .left, + .right { + position: absolute; + bottom: 0; + width: 100%; + height: 20vh; + + & > img { + position: fixed; + bottom: calc(72px - 27vw); + } + } + } +} + +main { + background: linear-gradient(to bottom, var(--c-top-main) 0, var(--c-bot-main) 100%); + padding-bottom: 5rem; + + & > article { + display: grid; + place-items: center; + row-gap: 10rem; + + & > .jump-section { + padding-top: calc(var(--header-h) + 1rem); + } + + & > section { + display: grid; + place-items: center; + width: 100%; + + & > .section-container { + min-width: 15rem; + + & > h2 { + display: block; + padding: 0.5rem; + font-weight: 700; + color: var(--c-accent); + } + + & > .section-content { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0.5rem; + + & > h3 { + color: var(--c-secondary); + } + + & > p { + color: white; + + & > a { + color: var(--c-accent); + } + } + + & strong { + font-weight: 900; + } + } + + & > .section-footer { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 0.5rem; + padding: 1rem 0; + + & > * { + width: 50%; + max-width: 15rem; + flex: 1 1 auto; + } + } + } + } + } +} + +#faq { + & > .section-container { + & > .section-content { + & > p { + margin-bottom: 3rem; + } + } + } +} + +.gallery { + display: none; +} + +#calendar { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + + & > .bg-box { + width: 90%; + padding: 1rem; + + & span { + float: right; + } + + & > h3 { + color: var(--c-accent); + } + + & > h4 { + color: var(--c-strong); + } + + & > p { + color: var(--c-tertiary); + font-size: 1rem; + } + } +} + +footer { + display: flex; + flex-direction: column; + align-items: center; + color: var(--c-accent); + background-color: var(--c-primary); + + .icons { + display: flex; + gap: 0.5rem; + + & .icon { + width: 1.5em; + height: 1.5em; + } + } +} + +.duck-fact { + display: none; + background-color: var(--c-strong); + padding: 1rem; + + & > h2 { + font-size: clamp(1rem, 2.5vw, 1.8rem); + font-family: var(--f-heading); + color: var(--c-accent); + } + + & > p { + color: white; + font-size: clamp(0.8rem, 2vw, 1.2rem); + } +} + +/* Media Queries */ + +/* Calendar can display things in a row */ +@media (min-width: 570px) { + #calendar { + flex-direction: row; + align-items: flex-start; + flex-wrap: wrap; + + & > .bg-box { + width: 100%; + flex: 1 1 30%; + } + } + + .section-container { + max-width: 47rem; + } +} + +/* Hero nav buttons display as a row */ +@media (min-width: 600px) { + .hero-nav { + width: 100%; + + & > ul { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + flex-direction: row; + gap: 1rem; + + & > li { + margin: 0 !important; + padding: 0; + } + } + } +} + +/* Aside stuff working */ +@media (min-width: 1280px) { + section { + grid-template-columns: [left] 1fr [mid] auto [right] 1fr; + grid-column-gap: 0.5rem; + + .section-container { + grid-column: mid; + } + } + + .duck-fact { + display: block; + width: min(80%, 25rem); + } + + .gallery { + display: flex; + justify-content: space-around; + + & > .photo { + width: 25vw; + height: auto; + animation: pop-in 0.3 ease; + background-color: white; + border: 5px solid transparent; + box-shadow: 5px 5px 7px black; + } + } +} diff --git a/public/frosh/index.html b/public/frosh/index.html index 85f9aa90..a18ad1b2 100644 --- a/public/frosh/index.html +++ b/public/frosh/index.html @@ -7,12 +7,12 @@