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..c607f107 --- /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..b8b1a294 --- /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('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/tech-fair/2025/images/companies/arista.jpg b/public/tech-fair/2025/images/companies/arista.jpg new file mode 100644 index 00000000..6d9fc007 Binary files /dev/null and b/public/tech-fair/2025/images/companies/arista.jpg differ diff --git a/public/tech-fair/2025/images/companies/fortisBC.jpg b/public/tech-fair/2025/images/companies/fortisBC.jpg new file mode 100644 index 00000000..73a89afe Binary files /dev/null and b/public/tech-fair/2025/images/companies/fortisBC.jpg differ diff --git a/public/tech-fair/2025/images/companies/gatekeeper.png b/public/tech-fair/2025/images/companies/gatekeeper.png new file mode 100644 index 00000000..6b962b70 Binary files /dev/null and b/public/tech-fair/2025/images/companies/gatekeeper.png differ diff --git a/public/tech-fair/2025/images/companies/icbc.png b/public/tech-fair/2025/images/companies/icbc.png new file mode 100644 index 00000000..95c2d8d6 Binary files /dev/null and b/public/tech-fair/2025/images/companies/icbc.png differ diff --git a/public/tech-fair/2025/images/companies/kardium.png b/public/tech-fair/2025/images/companies/kardium.png new file mode 100644 index 00000000..e299d9b2 Binary files /dev/null and b/public/tech-fair/2025/images/companies/kardium.png differ diff --git a/public/tech-fair/2025/images/companies/planview.png b/public/tech-fair/2025/images/companies/planview.png new file mode 100644 index 00000000..d3e7f9a8 Binary files /dev/null and b/public/tech-fair/2025/images/companies/planview.png differ diff --git a/public/tech-fair/2025/images/companies/safe.png b/public/tech-fair/2025/images/companies/safe.png new file mode 100644 index 00000000..40159889 Binary files /dev/null and b/public/tech-fair/2025/images/companies/safe.png differ diff --git a/public/tech-fair/2025/images/companies/telus.png b/public/tech-fair/2025/images/companies/telus.png new file mode 100644 index 00000000..14694e5e Binary files /dev/null and b/public/tech-fair/2025/images/companies/telus.png differ diff --git a/public/tech-fair/2025/index.html b/public/tech-fair/2025/index.html index 73ce526c..3e777ece 100644 --- a/public/tech-fair/2025/index.html +++ b/public/tech-fair/2025/index.html @@ -75,8 +75,8 @@

Tech Fair 2025

Long shot 1 Old photo 1 -
-
+
+

What is Tech Fair?


@@ -94,8 +94,8 @@

What is Tech Fair?

-

ChatGPT, summarize this section

-
+

ChatGPT, summarize this section

+
  • When: Wednesday, October 15, 2025 from @@ -127,8 +127,8 @@

    ChatGPT, summarize this section

    -
    -
    +
    +

    I'm a student, why should I go?

    Here are 3 reasons:

      @@ -176,12 +176,208 @@

      I'm a student, why should I go?

      +
      + +
      +
      +

      Who's coming?

      +

      Join this list of companies interested in hiring you!

      +
      +
      + +
      + + +
      -
      -
      +
      +

      I work for a company


      @@ -195,7 +391,7 @@

      I work for a company

      thrive in your workplace!

      -
      +

      My company is interested, what else can you tell me?


      @@ -215,8 +411,8 @@

      My company is interested, what else can you tell me?

      Don't miss this chance to show off who you are!

      -
      -

      How do I sign up?

      +
      +

      How do I sign us up?


      Send an email to @@ -235,7 +431,7 @@

      How do I sign up?

      -

      See You There!

      +

      See You There!

      Attendees 1 Attendees 2 diff --git a/public/tech-fair/2025/style.css b/public/tech-fair/2025/style.css index 66ee8488..4a7a8db1 100644 --- a/public/tech-fair/2025/style.css +++ b/public/tech-fair/2025/style.css @@ -1,6 +1,6 @@ @font-face { font-family: 'Questrial'; - src: url('fonts/Questrial-Regular.ttf') format('truetype') + src: url('fonts/Questrial-Regular.ttf') format('truetype'); } :root { @@ -9,11 +9,48 @@ --square-logo-dim: 2.5rem; --paper-shadow: 5px 5px 7px black; --photo-w: 460px; + + /* Colours */ + --insurance: hsl(356 49.5% 49.3%); + --telecom: hsl(41 49.5% 49.3%); + --energy: hsl(65 100% 35.5%); + --medical: hsl(124 47.4% 50%); + --software: hsl(194 59.3% 50%); + --networking: hsl(235 100% 35.5%); + --data-analytics: hsl(284 59.3% 50%); +} + +[class*='--insurance'] { + --clr-main: var(--insurance); +} + +[class*='--telecom'] { + --clr-main: var(--telecom); +} + +[class*='--energy'] { + --clr-main: var(--energy); +} + +[class*='--medical'] { + --clr-main: var(--medical); +} + +[class*='--software'] { + --clr-main: var(--software); +} + +[class*='--networking'] { + --clr-main: var(--networking); +} + +[class*='--data-analytics'] { + --clr-main: var(--data-analytics); } body { font-family: 'Questrial'; - background-image: url('./images/mountain-landscape.svg'); + background-image: url('images/mountain-landscape.svg'); background-position: center; background-size: cover; background-repeat: no-repeat; @@ -26,15 +63,9 @@ ol { a:link, a:visited { - color: black; text-decoration: none; } -a:link:active, -a:visited:active { - color: black; -} - .centering { display: flex; justify-content: center; @@ -48,7 +79,6 @@ a:visited:active { width: fit-content; } - .sticky-note { background-color: yellow; aspect-ratio: 1 / 1; @@ -65,8 +95,9 @@ a:visited:active { max-width: var(--photo-w); height: auto; transform: rotate(-5deg); + transition: transform 0.1s linear; - &>img { + & > img { object-fit: contain; } @@ -77,48 +108,57 @@ a:visited:active { &:hover { transform: scale(1.25); z-index: 3; - transition: transform 0.1s linear; } } +.btn-anchor { + color: #d16711; +} + header { width: 100%; z-index: 10; position: fixed; top: 0; - &>nav { + & > nav { display: flex; align-items: center; justify-content: center; position: relative; padding: 0.25rem; - width: 100%; + width: 100vw; backdrop-filter: blur(5px); /* CSSS Logo */ - &>a { + & > a { /* This keeps the icon at the far left and the nav links centered */ position: absolute; left: 1vw; top: 1vh; - &>#home-logo { + & > #home-logo { width: var(--square-logo-dim); height: var(--square-logo-dim); } } - &>ul { + & a:visited, + a:active, + a:link, + a:hover { + color: black; + } + + & > ul { display: flex; justify-content: space-evenly; list-style-type: none; margin: 0; padding: 1rem 0 0; - &>li { - - &>a { + & > li { + & > a { text-align: center; padding: 0 1rem; } @@ -134,7 +174,7 @@ header { align-items: center; text-align: center; - &>.hero-content { + & > .hero-content { position: relative; height: 70%; width: 90%; @@ -143,7 +183,7 @@ header { justify-content: center; align-items: center; - &>p { + & > p { font-size: max(1rem, 2vw); } @@ -151,52 +191,55 @@ header { font-size: max(2rem, 5vw); } - &>img { + & > img { width: min(30vw, 30rem); height: auto; } - &>section { + & > section { padding: 1rem; } } } main { - &>article { + & > article { display: grid; - &>section { + & a:visited, + a:active, + a:link, + a:hover { + color: #d16711; + } + + & > section { display: flex; flex-direction: column; align-items: center; padding: 0 1rem 0; - &>aside { + & > aside { display: none; } - & .section-content { + & .section__content { margin: var(--header-height) 0 2rem; padding: 1.5rem; max-width: 40rem; - - & a { - color: #d16711; - } } - &>.main { + & > .section__main { display: flex; flex-direction: column; align-items: center; - &>.chat-section { + & > .chat-section { display: flex; flex-direction: column; align-items: center; - &>.right { + & > .right { align-self: flex-end; display: block; box-shadow: 5px 5px black; @@ -205,22 +248,21 @@ main { margin-right: 1rem; } - &>.left { + & > .left { align-self: flex-start; width: fit-content; max-width: 80%; margin-left: 1rem; } - } - &>p, + & > p, ul, ol { font-size: clamp(1rem, 1.5vw, 1.05rem); } - &>ul, + & > ul, ol { margin: 0; @@ -233,6 +275,75 @@ main { } } +#company-gallery { + padding: 0; + display: block; +} + +ul.section__main { + padding-left: 0; +} + +.company__gallery { + display: flex; + gap: 4vw; + padding: 1rem 5rem; + flex-wrap: wrap; + justify-content: center; +} + +.company-card { + flex: 0 0 auto; + + display: grid; + place-items: center; + grid-template-rows: 35% 60% 5%; + padding: 1.5rem; + width: 20.75rem; + height: calc(700px - 5rem); +} + +.company-card__img { + display: flex; + height: 100%; + aspect-ratio: 1 / 1; + padding: 1rem; + + & > img { + object-fit: contain; + } +} + +.company-card__descriptor { + overflow: auto; + height: 100%; +} + +.company-card__footer { + display: flex; + justify-content: space-between; + width: 100%; + position: relative; + bottom: 0; + margin-top: 1rem; + + & > * { + color: white; + border-radius: 50px; + padding: 0.5rem; + font-size: clamp(1rem, 60%, 1.7rem); + -webkit-user-select: none; + user-select: none; + } + + & > a { + color: #d16711; + } + + & > p { + background-color: var(--clr-main); + } +} #final { display: flex; @@ -240,12 +351,12 @@ main { align-items: center; padding-bottom: 3rem; - &>h2 { + & > h2 { text-align: center; font-size: 2rem; } - &>.gallery { + & > .gallery { display: flex; flex-wrap: wrap; justify-content: center; @@ -263,7 +374,6 @@ footer { display: flex; gap: 0.5rem; - & .icon { width: 1.5em; height: 1.5em; @@ -273,21 +383,20 @@ footer { /* Media queries */ @media (max-width: 400px) { - header>nav { - - /* These will ensure the nav links will be pushed to the right so CSSS icon will become + header > nav { + /* These will ensure the nav links will be pushed to the right so CSSS icon will become * part of the nav's flow again */ - &>a { + & > a { position: relative; left: 0; - &>img { + & > img { height: 2rem; width: 2rem; } } - &>ul { + & > ul { flex-shrink: 0; } } @@ -299,21 +408,20 @@ footer { @media (min-width: 1200px) { main { - &>article { - &>section { + & > article { + & > section { display: grid; grid-template-columns: 1fr 50% 1fr; - grid-template-areas: - 'left center right'; + grid-template-areas: 'left center right'; - &>.main { + & > .main { grid-area: center; display: flex; flex-direction: column; align-items: center; } - &>aside { + & > aside { display: flex; flex-direction: column; justify-content: space-between; @@ -322,12 +430,12 @@ footer { padding: var(--header-height) 0 0; } - &>aside:nth-of-type(1) { + & > aside:nth-of-type(1) { grid-area: left; align-items: end; } - &>aside:nth-of-type(2) { + & > aside:nth-of-type(2) { grid-area: right; align-items: start; } @@ -335,3 +443,24 @@ footer { } } } + +@media (hover: none) { + ul.section__main { + padding-left: 0; + } + + .company__gallery { + width: 100vw; + justify-content: flex-start; + flex-wrap: nowrap; + overflow-x: scroll; + overflow-y: hidden; + scroll-snap-type: x mandatory; + scrollbar-width: none; + } + + .company-card { + width: 19rem; + scroll-snap-align: center; + } +}