diff --git a/frontend/public/assets/linusgao/beaver1.svg b/frontend/public/assets/linusgao/beaver1.svg new file mode 100644 index 0000000..74e6596 --- /dev/null +++ b/frontend/public/assets/linusgao/beaver1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/assets/linusgao/beaver2.svg b/frontend/public/assets/linusgao/beaver2.svg new file mode 100644 index 0000000..a1a77ef --- /dev/null +++ b/frontend/public/assets/linusgao/beaver2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/assets/linusgao/beaver3.svg b/frontend/public/assets/linusgao/beaver3.svg new file mode 100644 index 0000000..b4c5740 --- /dev/null +++ b/frontend/public/assets/linusgao/beaver3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/assets/linusgao/beaver4.svg b/frontend/public/assets/linusgao/beaver4.svg new file mode 100644 index 0000000..68d4a5d --- /dev/null +++ b/frontend/public/assets/linusgao/beaver4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/assets/linusgao/beaver5.svg b/frontend/public/assets/linusgao/beaver5.svg new file mode 100644 index 0000000..caaef6a --- /dev/null +++ b/frontend/public/assets/linusgao/beaver5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (1).png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (1).png new file mode 100644 index 0000000..1181a4d Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (1).png differ diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (2).png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (2).png new file mode 100644 index 0000000..ae4eb64 Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (2).png differ diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (3).png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (3).png new file mode 100644 index 0000000..d4e33c1 Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (3).png differ diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (4).png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (4).png new file mode 100644 index 0000000..6d839eb Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_13_54 PM (4).png differ diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_55_42 PM.png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_55_42 PM.png new file mode 100644 index 0000000..cd7fcf5 Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 10_55_42 PM.png differ diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_23 PM (1).png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_23 PM (1).png new file mode 100644 index 0000000..35e0e79 Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_23 PM (1).png differ diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_23 PM (2).png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_23 PM (2).png new file mode 100644 index 0000000..e5975a1 Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_23 PM (2).png differ diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_23 PM (3).png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_23 PM (3).png new file mode 100644 index 0000000..eda5986 Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_23 PM (3).png differ diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_24 PM (4).png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_24 PM (4).png new file mode 100644 index 0000000..20c2c9c Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_24 PM (4).png differ diff --git a/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_24 PM (5).png b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_24 PM (5).png new file mode 100644 index 0000000..ea09f56 Binary files /dev/null and b/frontend/public/assets/linusgao/newhero/ChatGPT Image Jun 7, 2026, 11_30_24 PM (5).png differ diff --git a/frontend/public/assets/linusgao/processed/hero-1.png b/frontend/public/assets/linusgao/processed/hero-1.png new file mode 100644 index 0000000..f0f73b0 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/hero-1.png differ diff --git a/frontend/public/assets/linusgao/processed/hero-2.png b/frontend/public/assets/linusgao/processed/hero-2.png new file mode 100644 index 0000000..7dba7cd Binary files /dev/null and b/frontend/public/assets/linusgao/processed/hero-2.png differ diff --git a/frontend/public/assets/linusgao/processed/hero-3.png b/frontend/public/assets/linusgao/processed/hero-3.png new file mode 100644 index 0000000..55a91f4 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/hero-3.png differ diff --git a/frontend/public/assets/linusgao/processed/hero-4.png b/frontend/public/assets/linusgao/processed/hero-4.png new file mode 100644 index 0000000..c9b00bd Binary files /dev/null and b/frontend/public/assets/linusgao/processed/hero-4.png differ diff --git a/frontend/public/assets/linusgao/processed/hero-5.png b/frontend/public/assets/linusgao/processed/hero-5.png new file mode 100644 index 0000000..64e14f5 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/hero-5.png differ diff --git a/frontend/public/assets/linusgao/processed/hero-6.png b/frontend/public/assets/linusgao/processed/hero-6.png new file mode 100644 index 0000000..a8f45cb Binary files /dev/null and b/frontend/public/assets/linusgao/processed/hero-6.png differ diff --git a/frontend/public/assets/linusgao/processed/hero-7.png b/frontend/public/assets/linusgao/processed/hero-7.png new file mode 100644 index 0000000..e520647 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/hero-7.png differ diff --git a/frontend/public/assets/linusgao/processed/hero-8.png b/frontend/public/assets/linusgao/processed/hero-8.png new file mode 100644 index 0000000..af7c6ac Binary files /dev/null and b/frontend/public/assets/linusgao/processed/hero-8.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-1.png b/frontend/public/assets/linusgao/processed/newhero-1.png new file mode 100644 index 0000000..dacd0a3 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-1.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-2.png b/frontend/public/assets/linusgao/processed/newhero-2.png new file mode 100644 index 0000000..65ac346 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-2.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-3.png b/frontend/public/assets/linusgao/processed/newhero-3.png new file mode 100644 index 0000000..c4e51f1 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-3.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-4.png b/frontend/public/assets/linusgao/processed/newhero-4.png new file mode 100644 index 0000000..c83dd1c Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-4.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-5.png b/frontend/public/assets/linusgao/processed/newhero-5.png new file mode 100644 index 0000000..ef92d57 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-5.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-6.png b/frontend/public/assets/linusgao/processed/newhero-6.png new file mode 100644 index 0000000..e44956f Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-6.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-7.png b/frontend/public/assets/linusgao/processed/newhero-7.png new file mode 100644 index 0000000..3058ef1 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-7.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-8.png b/frontend/public/assets/linusgao/processed/newhero-8.png new file mode 100644 index 0000000..391377e Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-8.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-waterfall-1.png b/frontend/public/assets/linusgao/processed/newhero-waterfall-1.png new file mode 100644 index 0000000..46d8927 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-waterfall-1.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-waterfall-2.png b/frontend/public/assets/linusgao/processed/newhero-waterfall-2.png new file mode 100644 index 0000000..d54293b Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-waterfall-2.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-waterfall-3.png b/frontend/public/assets/linusgao/processed/newhero-waterfall-3.png new file mode 100644 index 0000000..8bdeb96 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-waterfall-3.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-waterfall-4.png b/frontend/public/assets/linusgao/processed/newhero-waterfall-4.png new file mode 100644 index 0000000..5b3efa9 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-waterfall-4.png differ diff --git a/frontend/public/assets/linusgao/processed/newhero-waterfall-5.png b/frontend/public/assets/linusgao/processed/newhero-waterfall-5.png new file mode 100644 index 0000000..4d5e329 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/newhero-waterfall-5.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-1.png b/frontend/public/assets/linusgao/processed/transition-1.png new file mode 100644 index 0000000..2523310 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-1.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-10.png b/frontend/public/assets/linusgao/processed/transition-10.png new file mode 100644 index 0000000..5309749 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-10.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-2.png b/frontend/public/assets/linusgao/processed/transition-2.png new file mode 100644 index 0000000..f338970 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-2.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-3.png b/frontend/public/assets/linusgao/processed/transition-3.png new file mode 100644 index 0000000..b8eacc1 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-3.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-4.png b/frontend/public/assets/linusgao/processed/transition-4.png new file mode 100644 index 0000000..7c2512c Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-4.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-5.png b/frontend/public/assets/linusgao/processed/transition-5.png new file mode 100644 index 0000000..cce6bb4 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-5.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-6.png b/frontend/public/assets/linusgao/processed/transition-6.png new file mode 100644 index 0000000..a318627 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-6.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-7.png b/frontend/public/assets/linusgao/processed/transition-7.png new file mode 100644 index 0000000..fbc843b Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-7.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-8.png b/frontend/public/assets/linusgao/processed/transition-8.png new file mode 100644 index 0000000..cb25743 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-8.png differ diff --git a/frontend/public/assets/linusgao/processed/transition-9.png b/frontend/public/assets/linusgao/processed/transition-9.png new file mode 100644 index 0000000..fc25122 Binary files /dev/null and b/frontend/public/assets/linusgao/processed/transition-9.png differ diff --git a/frontend/public/assets/linusgao/secondpage/ChatGPT Image Jun 8, 2026, 11_26_53 AM.png b/frontend/public/assets/linusgao/secondpage/ChatGPT Image Jun 8, 2026, 11_26_53 AM.png new file mode 100644 index 0000000..290a672 Binary files /dev/null and b/frontend/public/assets/linusgao/secondpage/ChatGPT Image Jun 8, 2026, 11_26_53 AM.png differ diff --git a/frontend/public/assets/linusgao/thirdpage/img1.png b/frontend/public/assets/linusgao/thirdpage/img1.png new file mode 100644 index 0000000..425542b Binary files /dev/null and b/frontend/public/assets/linusgao/thirdpage/img1.png differ diff --git a/frontend/public/assets/linusgao/thirdpage/img2.png b/frontend/public/assets/linusgao/thirdpage/img2.png new file mode 100644 index 0000000..44ba7dc Binary files /dev/null and b/frontend/public/assets/linusgao/thirdpage/img2.png differ diff --git a/frontend/public/assets/linusgao/thirdpage/img3.png b/frontend/public/assets/linusgao/thirdpage/img3.png new file mode 100644 index 0000000..cdbbba2 Binary files /dev/null and b/frontend/public/assets/linusgao/thirdpage/img3.png differ diff --git a/frontend/public/assets/tenzin/arrow.svg b/frontend/public/assets/tenzin/arrow.svg new file mode 100644 index 0000000..d69e33b --- /dev/null +++ b/frontend/public/assets/tenzin/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/public/assets/tenzin/background.png b/frontend/public/assets/tenzin/background.png new file mode 100644 index 0000000..4456225 Binary files /dev/null and b/frontend/public/assets/tenzin/background.png differ diff --git a/frontend/public/assets/tenzin/brown-cookies.otf b/frontend/public/assets/tenzin/brown-cookies.otf new file mode 100644 index 0000000..82c16c3 Binary files /dev/null and b/frontend/public/assets/tenzin/brown-cookies.otf differ diff --git a/frontend/public/assets/tenzin/logo.png b/frontend/public/assets/tenzin/logo.png new file mode 100644 index 0000000..e18d926 Binary files /dev/null and b/frontend/public/assets/tenzin/logo.png differ diff --git a/frontend/public/assets/tenzin/scene.png b/frontend/public/assets/tenzin/scene.png new file mode 100644 index 0000000..ca355cb Binary files /dev/null and b/frontend/public/assets/tenzin/scene.png differ diff --git a/frontend/public/assets/tenzin/sprites.png b/frontend/public/assets/tenzin/sprites.png new file mode 100644 index 0000000..d052be4 Binary files /dev/null and b/frontend/public/assets/tenzin/sprites.png differ diff --git a/frontend/src/components/Hero.astro b/frontend/src/components/Hero.astro new file mode 100644 index 0000000..5a77132 --- /dev/null +++ b/frontend/src/components/Hero.astro @@ -0,0 +1,141 @@ +--- +import caveLayer from "../../public/assets/linusgao/processed/newhero-2.png" +import characterLayer from "../../public/assets/linusgao/processed/newhero-3.png" +import poolLayer from "../../public/assets/linusgao/processed/newhero-4.png" +import waterfallFrame1 from "../../public/assets/linusgao/processed/newhero-waterfall-1.png" +import waterfallFrame2 from "../../public/assets/linusgao/processed/newhero-waterfall-2.png" +import waterfallFrame3 from "../../public/assets/linusgao/processed/newhero-waterfall-3.png" +import waterfallFrame4 from "../../public/assets/linusgao/processed/newhero-waterfall-4.png" +import waterfallFrame5 from "../../public/assets/linusgao/processed/newhero-waterfall-5.png" + +const waterfallFrames = [ + waterfallFrame1, + waterfallFrame2, + waterfallFrame3, + waterfallFrame4, + waterfallFrame5 +]; +--- + +
+
+
+ + + + + +
+ { + waterfallFrames.map((frame, index) => ( + + )) + } +
+ + + +
+ +
+ + * + HC27 + + + +
+ +
+
+

+ Hack Canada +

+
+

+ March 6-8th +

+ + +
+ +
+
+
+
diff --git a/frontend/src/components/HorizontalStory.astro b/frontend/src/components/HorizontalStory.astro new file mode 100644 index 0000000..6becd41 --- /dev/null +++ b/frontend/src/components/HorizontalStory.astro @@ -0,0 +1,130 @@ +--- +import transitionSky from "../../public/assets/linusgao/processed/transition-1.png" +import transitionClouds from "../../public/assets/linusgao/processed/transition-2.png" +import transitionSun from "../../public/assets/linusgao/processed/transition-3.png" +import transitionWater from "../../public/assets/linusgao/processed/transition-4.png" +import transitionCabin from "../../public/assets/linusgao/processed/transition-5.png" +import transitionRocks from "../../public/assets/linusgao/processed/transition-7.png" +--- + +
+ +
+ + + + + +
+ +
+
+
+

Scroll story

+

+ Horizontal scroll demo +

+

+ The scene pins while this wide strip moves sideways. The background layers drift at different speeds so you can judge the scroll effect without the four story cards. +

+
+ +
+ + + +
+ Pin starts +
+
+ Scrub sideways +
+
+ Parallax layers +
+
+ +
+

HC27

+

Ready for the pier?

+

+ Bring a laptop, a curious idea, and a team spirit. The coast is open for builders. +

+ + Back to top + +
+
+
+
diff --git a/frontend/src/components/Layout.astro b/frontend/src/components/Layout.astro new file mode 100644 index 0000000..3d368bf --- /dev/null +++ b/frontend/src/components/Layout.astro @@ -0,0 +1,33 @@ +--- +import "@styles/global.css"; + +type Props = { + title: string; +}; + +const { title } = Astro.props; +--- + + + + + + + + + + {title} + + + + + + + diff --git a/frontend/src/components/LinusLayout.astro b/frontend/src/components/LinusLayout.astro new file mode 100644 index 0000000..74ac424 --- /dev/null +++ b/frontend/src/components/LinusLayout.astro @@ -0,0 +1,33 @@ +--- +import "../styles/linusgao.css" + +type Props = { + title: string; +}; + +const { title } = Astro.props; +--- + + + + + + + + + + {title} + + + + + + + diff --git a/frontend/src/components/SecondPageParallax.astro b/frontend/src/components/SecondPageParallax.astro new file mode 100644 index 0000000..374a549 --- /dev/null +++ b/frontend/src/components/SecondPageParallax.astro @@ -0,0 +1,67 @@ +--- +import secondPageScene from "../../public/assets/linusgao/secondpage/ChatGPT Image Jun 8, 2026, 11_26_53 AM.png"; + +const stats = [ + { value: 30, label: "Workshops", color: "bg-[#52c83b]", height: "h-44 sm:h-56", valueClass: "text-[3rem] sm:text-[3.75rem]", y: -34, scale: 0.92 }, + { value: 2900, label: "Hours travelled", color: "bg-[#66b4df]", height: "h-48 sm:h-56", valueClass: "text-[2.5rem] sm:text-[3.1rem]", y: 26, scale: 1.06 }, + { value: 295, label: "Schools", color: "bg-[#edae36]", height: "h-44 sm:h-52", valueClass: "text-[3rem] sm:text-[3.55rem]", y: -18, scale: 0.96 }, + { value: 30, label: "Countries", color: "bg-[#d65bbd]", height: "h-36 sm:h-40", valueClass: "text-[2.9rem] sm:text-[3.45rem]", y: 42, scale: 0.9 }, + { value: 220, label: "Mentors", color: "bg-[#52c83b]", height: "h-56 sm:h-72", valueClass: "text-[3rem] sm:text-[3.75rem]", y: -46, scale: 1.08 }, + { value: 550, label: "Projects submitted", color: "bg-[#d65bbd]", height: "h-60 sm:h-72", valueClass: "text-[2.9rem] sm:text-[3.6rem]", y: 34, scale: 1.12 }, + { value: 3000, label: "Hackers", color: "bg-[#edae36]", height: "h-48 sm:h-52", valueClass: "text-[2.5rem] sm:text-[3.1rem]", y: -24, scale: 0.98 } +]; +--- + +
+
+ +
+
+
+ + +
+
diff --git a/frontend/src/components/StoryCard.astro b/frontend/src/components/StoryCard.astro new file mode 100644 index 0000000..cdbcbeb --- /dev/null +++ b/frontend/src/components/StoryCard.astro @@ -0,0 +1,60 @@ +--- +import beaver1 from "../../public/assets/linusgao/beaver1.svg" +import beaver2 from "../../public/assets/linusgao/beaver2.svg" +import beaver3 from "../../public/assets/linusgao/beaver3.svg" +import beaver4 from "../../public/assets/linusgao/beaver4.svg" + +type StoryPanel = { + accent: "coral" | "tide" | "spruce" | "rope"; + body: string; + eyebrow: string; + icon: string; + stat: "01" | "02" | "03" | "04"; + title: string; +}; + +type Props = { + panel: StoryPanel; +}; + +const { panel } = Astro.props; +const accentClasses = { + coral: "bg-coral text-white", + tide: "bg-tide text-white", + spruce: "bg-spruce text-white", + rope: "bg-rope text-ink" +}; +const mascotByStat = { + "01": beaver1, + "02": beaver2, + "03": beaver3, + "04": beaver4 +}; +const mascot = mascotByStat[panel.stat]; +--- + +
+
+
+

{panel.eyebrow}

+

{panel.title}

+
+ + {panel.stat} + +
+ +
+
+ +
+
+ + +
+

{panel.body}

+
+
diff --git a/frontend/src/components/ThirdPageHorizontal.astro b/frontend/src/components/ThirdPageHorizontal.astro new file mode 100644 index 0000000..e1800ea --- /dev/null +++ b/frontend/src/components/ThirdPageHorizontal.astro @@ -0,0 +1,191 @@ +--- +import thirdPage1 from "../../public/assets/linusgao/thirdpage/img1.png" +import thirdPage2 from "../../public/assets/linusgao/thirdpage/img2.png" +import thirdPage3 from "../../public/assets/linusgao/thirdpage/img3.png" + +const backgrounds = [thirdPage1, thirdPage2, thirdPage3]; +--- + +
+
+
+
+ +
+
+ { + backgrounds.map((background, index) => ( +
+ +
+
+ )) + } + +
+
+
+ + +

+ Get inspired by industry leaders +

+ +
+ +
+
+
+= +
+

Keynote

+
+
+
+ +
+ +

Opening keynote

+

+ Maya Chen +

+

Founder, Northstar Labs

+

+ Maya builds climate data tools for coastal cities and leads teams that turn research into public-impact software. Her keynote will focus on building with urgency, care, and a strong demo culture. +

+
+
+
+
+ +
+
+
+

+ Dream big and build bigger +

+ +
+ +
+
+ +
+ +
+
+
+ +
+
+
+ +
+

Featured project

+

+ Signal Harbor +

+

+ A rapid-response platform that helps community teams triage calls, map incidents, and coordinate resources during coastal emergencies. +

+ + View project -> + +
+
+ + +
+
+ +
+
+
+

Sponsors

+

+ Built with support from partners +

+

+ Our sponsors help hackers access tools, mentors, prizes, and the resources to ship ambitious projects. +

+
+ +
+
+
+ + + + + + + + ETHGlobal +
+
+ +
+
+ R + RBC +
+
+ +
+ co:here +
+ +
+
+ datadog +
+
+ DigitalOcean +
+
+
+
+
+
+
+
diff --git a/frontend/src/components/Welcome.astro b/frontend/src/components/Welcome.astro index 4c095b8..2c4dfd8 100644 --- a/frontend/src/components/Welcome.astro +++ b/frontend/src/components/Welcome.astro @@ -13,10 +13,10 @@ import { Highlighter } from '@/components/ui/highlighter'; // replace the label and href with your name when you add your page (for example label: "Faiz", href: "/faiz"). const teamLinks = [ - { label: 'Name 1', href: '' }, - { label: 'Name 2', href: '' }, + { label: 'Linus', href: '/linusgao' }, + { label: 'tenzin', href: '/tenzin' }, { label: 'Name 3', href: '' }, - { label: 'Name 4', href: '' }, + { label: 'Amy', href: '/amy-huang' }, ]; // List of mascot image URLs in play order (beaver → next frame → next frame). diff --git a/frontend/src/pages/amy-huang.astro b/frontend/src/pages/amy-huang.astro new file mode 100644 index 0000000..1bb8da2 --- /dev/null +++ b/frontend/src/pages/amy-huang.astro @@ -0,0 +1,3 @@ +

hello, still working on first draft!

+ + diff --git a/frontend/src/pages/linusgao.astro b/frontend/src/pages/linusgao.astro new file mode 100644 index 0000000..12f8998 --- /dev/null +++ b/frontend/src/pages/linusgao.astro @@ -0,0 +1,11 @@ +--- +import SecondPageParallax from "@/components/SecondPageParallax.astro" +import Layout from "@/components/LinusLayout.astro" +import Hero from "@/components/Hero.astro" +import ThirdPageHorizontal from "@/components/ThirdPageHorizontal.astro" +--- + + + + + \ No newline at end of file diff --git a/frontend/src/pages/tenzin.astro b/frontend/src/pages/tenzin.astro new file mode 100644 index 0000000..5f50ed2 --- /dev/null +++ b/frontend/src/pages/tenzin.astro @@ -0,0 +1,229 @@ +--- +import Layout from '../layouts/Layout.astro'; + +// Hack Canada — "Build For Canada's Future" hero. +// Nova Scotia / coastal-Canada theme, hand-drawn cozy aesthetic. +// Environment art lives on a fixed-aspect artboard that cover-fits the viewport +// (so the lighthouse / waterfall / boat stay glued), while the text layer reflows +// responsively on top. Motion is GSAP (text reveal + floating elements). +const base = '/assets/tenzin'; +--- + + + + + +
+ +
+
+ + + + +
+ + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+ +
+ + +
+ +
+
+
+ +
+
+ + +
+ + + + + +
+ + + + + +
+
+

+ + Build For + + + Canada’s Future + +

+ +

+ Hack Canada is a nationwide student-led movement building a more innovative, + inclusive, and diverse Canada. +

+ + +
+
+
+
+ + + + + + diff --git a/frontend/src/scripts/animations.ts b/frontend/src/scripts/animations.ts new file mode 100644 index 0000000..276e5d1 --- /dev/null +++ b/frontend/src/scripts/animations.ts @@ -0,0 +1,269 @@ +import gsap from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; + +gsap.registerPlugin(ScrollTrigger); + +const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; + +function revealHero() { + const hero = document.querySelector("[data-hero]"); + if (!hero) return; + + if (reduceMotion) { + hero.querySelectorAll(".reveal-line > span").forEach((line) => { + line.style.transform = "translateY(0)"; + }); + return; + } + + const cave = hero.querySelector("[data-hero-cave]"); + const heroAssets = hero.querySelectorAll("[data-hero-asset]"); + const timeline = gsap.timeline({ defaults: { ease: "power3.out" } }); + + timeline + .from( + cave, + { + opacity: 0, + scale: 1.035, + filter: "blur(18px)", + duration: 1.05, + clearProps: "opacity,scale,filter" + }, + 0 + ) + .from( + heroAssets, + { + opacity: 0, + y: 18, + filter: "blur(12px)", + duration: 0.78, + stagger: { + each: 0.16, + from: "start" + }, + clearProps: "opacity,transform,filter" + }, + 0.58 + ) + .to(".reveal-line > span", { + y: 0, + rotate: 0, + duration: 1.05, + stagger: 0.14 + }, 0.72) + .from( + "header, .hero-squiggle, .hero-copy, .hero-actions, .hero-features", + { + y: 22, + opacity: 0, + duration: 0.72, + stagger: 0.1 + }, + 1.05 + ); +} + +function createHorizontalStory() { + if (reduceMotion) return; + + document.querySelectorAll("[data-horizontal-section]").forEach((section) => { + const track = section.querySelector(".horizontal-track"); + if (!track) return; + + const distance = () => Math.max(0, track.scrollWidth - window.innerWidth + window.innerWidth * 0.08); + + gsap.to(track, { + x: () => -distance(), + ease: "none", + scrollTrigger: { + trigger: section, + start: "top top", + end: () => `+=${distance()}`, + pin: true, + scrub: 0.9, + anticipatePin: 1, + invalidateOnRefresh: true + } + }); + + section.querySelectorAll(".parallax-layer").forEach((layer) => { + const depth = Number(layer.dataset.depth ?? 0.12); + gsap.to(layer, { + x: () => -distance() * depth, + ease: "none", + scrollTrigger: { + trigger: section, + start: "top top", + end: () => `+=${distance()}`, + scrub: true, + invalidateOnRefresh: true + } + }); + }); + }); +} + +function createScrollParallax() { + document.querySelectorAll("[data-parallax-section]").forEach((section) => { + const layer = section.querySelector("[data-parallax-layer]"); + const copy = section.querySelector("[data-parallax-copy]"); + + if (layer) { + if (reduceMotion) { + layer.style.transform = "scale(1.08)"; + } else { + gsap.fromTo( + layer, + { yPercent: -6, scale: 1.08 }, + { + yPercent: 7, + scale: 1.14, + ease: "none", + scrollTrigger: { + trigger: section, + start: "top bottom", + end: "bottom top", + scrub: 1, + invalidateOnRefresh: true + } + } + ); + } + } + + if (copy && !reduceMotion) { + gsap.from(copy, { + y: 36, + opacity: 0, + duration: 0.85, + ease: "power2.out", + scrollTrigger: { + trigger: section, + start: "top 58%", + once: true + } + }); + } + }); +} + +function createStatsAnimation() { + const stage = document.querySelector("[data-stats-stage]"); + if (!stage) return; + + const cards = stage.querySelectorAll("[data-stat-card]"); + const values = stage.querySelectorAll("[data-stat-value]"); + const shapes = stage.querySelectorAll(".stats-shape"); + const section = stage.closest("[data-parallax-section]") ?? stage; + const formatter = new Intl.NumberFormat("en-US"); + + values.forEach((value) => { + const count = Number(value.dataset.count ?? 0); + value.textContent = reduceMotion ? formatter.format(count) : "0"; + }); + + if (reduceMotion) return; + + gsap.set(cards, { transformOrigin: "50% 100%" }); + + const timeline = gsap.timeline({ + scrollTrigger: { + trigger: stage, + start: "top 72%", + once: true + } + }); + + timeline + .from(cards, { + yPercent: 35, + opacity: 0, + rotate: -2, + duration: 0.9, + stagger: 0.08, + ease: "back.out(1.35)" + }) + .from( + shapes, + { + scale: 0, + opacity: 0, + rotate: -24, + duration: 0.75, + stagger: 0.07, + ease: "back.out(1.7)" + }, + 0.18 + ); + + gsap.to(cards, { + y: (_index, card: HTMLElement) => Number(card.dataset.scrollY ?? 0), + scale: (_index, card: HTMLElement) => Number(card.dataset.scrollScale ?? 1), + ease: "none", + scrollTrigger: { + trigger: section, + start: "top top", + end: "bottom top", + scrub: 0.8, + invalidateOnRefresh: true + } + }); + + values.forEach((value, index) => { + const count = Number(value.dataset.count ?? 0); + const counter = { current: 0 }; + + timeline.to( + counter, + { + current: count, + duration: 1.05, + ease: "power2.out", + onUpdate: () => { + value.textContent = formatter.format(Math.round(counter.current)); + } + }, + 0.2 + index * 0.05 + ); + }); + + shapes.forEach((shape, index) => { + gsap.to(shape, { + y: index % 2 === 0 ? -18 : 16, + x: index % 2 === 0 ? 12 : -10, + rotate: index % 2 === 0 ? 12 : -10, + duration: 4.8 + index * 0.45, + repeat: -1, + yoyo: true, + ease: "sine.inOut", + delay: 0.8 + index * 0.08 + }); + }); +} + +function animateWaterfallFrames() { + const frames = Array.from(document.querySelectorAll("[data-waterfall-frame]")); + if (frames.length <= 1 || reduceMotion) return; + + let activeIndex = 0; + frames.forEach((frame, index) => frame.classList.toggle("is-active", index === activeIndex)); + + window.setInterval(() => { + frames[activeIndex]?.classList.remove("is-active"); + activeIndex = (activeIndex + 1) % frames.length; + frames[activeIndex]?.classList.add("is-active"); + }, 140); +} + +function init() { + revealHero(); + animateWaterfallFrames(); + createScrollParallax(); + createStatsAnimation(); + createHorizontalStory(); + window.addEventListener("load", () => ScrollTrigger.refresh(), { once: true }); +} + +init(); diff --git a/frontend/src/styles/linusgao.css b/frontend/src/styles/linusgao.css new file mode 100644 index 0000000..faf8f69 --- /dev/null +++ b/frontend/src/styles/linusgao.css @@ -0,0 +1,233 @@ +@import "tailwindcss"; + +:root { + color-scheme: light; + --ink: #183145; + --paper: #fff7df; + --foam: #f7fbf7; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + background: var(--paper); +} + +body { + margin: 0; + min-width: 320px; + overflow-x: hidden; + color: var(--ink); + background: + radial-gradient( + circle at 18% 6%, + rgba(255, 255, 255, 0.72), + transparent 18rem + ), + linear-gradient(180deg, #eaf8f5 0%, #fff6dc 54%, #f5ecce 100%); + font-family: Inter, ui-sans-serif, system-ui, sans-serif; +} + +body::before { + position: fixed; + inset: 0; + z-index: 100; + pointer-events: none; + content: ""; + opacity: 0.38; + mix-blend-mode: multiply; + background-image: url("/assets/paper-grain.svg"); + background-size: 260px 260px; +} + +img, +svg { + display: block; +} + +button, +a { + -webkit-tap-highlight-color: transparent; +} + +.sketch-card { + border: 2px solid rgba(24, 49, 69, 0.84); + border-radius: 8px; + background: rgba(255, 250, 229, 0.86); + box-shadow: 8px 8px 0 rgba(24, 49, 69, 0.12); +} + +.rough-line { + filter: url("#roughen"); +} + +.reveal-line { + display: block; + overflow: clip; +} + +.reveal-line > span { + display: inline-block; + transform: translateY(112%) rotate(1.5deg); +} + +.float-slow { + animation: float-slow 6s ease-in-out infinite; +} + +.float-medium { + animation: float-medium 4.8s ease-in-out infinite; +} + +.cloud-drift { + animation: cloud-drift 44s ease-in-out infinite alternate; +} + +.cloud-drift-reverse { + animation: cloud-drift-reverse 56s ease-in-out infinite alternate; +} + +.horizontal-track { + will-change: transform; +} + +.parallax-layer { + will-change: transform; +} + +.waterfall-frame { + opacity: 0; + transition: opacity 120ms linear; + will-change: opacity; +} + +.waterfall-frame.is-active { + opacity: 0.9; +} + +.stats-card, +.stats-shape { + will-change: opacity, transform; +} + +.stats-card { + overflow: hidden; +} + +.stats-number { + max-width: 100%; + white-space: nowrap; +} + +.stats-label { + max-width: 100%; + overflow-wrap: break-word; +} + +.stats-shape { + position: absolute; + display: block; + width: 5rem; + height: 5rem; + filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.18)); +} + +.stats-shape-blob { + width: 2.8rem; + height: 4.4rem; + border-radius: 55% 45% 48% 52% / 62% 44% 56% 38%; +} + +.stats-shape-star { + clip-path: polygon( + 50% 0%, + 63% 31%, + 98% 28%, + 71% 52%, + 82% 87%, + 50% 69%, + 18% 87%, + 29% 52%, + 2% 28%, + 37% 31% + ); +} + +.stats-shape-burst { + width: 8.5rem; + height: 8.5rem; + clip-path: polygon( + 50% 0%, + 59% 24%, + 82% 12%, + 76% 37%, + 100% 47%, + 76% 58%, + 83% 84%, + 59% 73%, + 50% 100%, + 40% 73%, + 15% 84%, + 23% 58%, + 0% 47%, + 24% 37%, + 17% 12%, + 41% 24% + ); +} + +@keyframes float-slow { + 0%, + 100% { + transform: translate3d(0, 0, 0) rotate(-1deg); + } + + 50% { + transform: translate3d(0, -16px, 0) rotate(1deg); + } +} + +@keyframes float-medium { + 0%, + 100% { + transform: translate3d(0, 0, 0) rotate(1deg); + } + + 50% { + transform: translate3d(8px, -12px, 0) rotate(-2deg); + } +} + +@keyframes cloud-drift { + from { + transform: translate3d(-2vw, 0, 0) scale(1); + } + + to { + transform: translate3d(7vw, -1.5vh, 0) scale(1.03); + } +} + +@keyframes cloud-drift-reverse { + from { + transform: translate3d(5vw, 0, 0) scale(1.02); + } + + to { + transform: translate3d(-4vw, 1vh, 0) scale(1); + } +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } +}