Linusgao

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
+];
+---
+
+<section
+  id="top"
+  class="relative isolate min-h-[100svh] overflow-hidden bg-[#020b26] px-5 pb-10 pt-5 text-white sm:px-8 lg:px-12"
+  aria-labelledby="hero-title"
+  data-hero
+>
+  <div class="absolute inset-0 -z-40 bg-[radial-gradient(circle_at_70%_56%,rgba(21,207,231,0.32)_0%,rgba(4,24,65,0.8)_26%,rgba(2,8,31,1)_66%)]"></div>
+  <div class="absolute inset-0 -z-30 bg-[linear-gradient(90deg,rgba(2,8,31,0.98)_0%,rgba(2,8,31,0.82)_31%,rgba(2,8,31,0.42)_55%,rgba(2,8,31,0.76)_100%)]"></div>
+
+  <img
+    src={caveLayer.src}
+    width={caveLayer.width}
+    height={caveLayer.height}
+    alt=""
+    class="hero-cave absolute inset-0 -z-20 h-full w-full object-cover object-center opacity-95"
+    data-hero-cave
+    loading="eager"
+  />
+
+  <img
+    src={poolLayer.src}
+    width={poolLayer.width}
+    height={poolLayer.height}
+    alt=""
+    class="absolute inset-0 -z-10 h-full w-full object-cover object-center opacity-90"
+    data-hero-asset
+    loading="eager"
+  />
+
+  <div class="absolute inset-0 -z-[8] mix-blend-screen" data-hero-asset>
+    {
+      waterfallFrames.map((frame, index) => (
+        <img
+          src={frame.src}
+          width={frame.width}
+          height={frame.height}
+          alt=""
+          class:list={[
+            "waterfall-frame absolute inset-0 h-full w-full object-cover object-center",
+            index === 0 && "is-active"
+          ]}
+          data-waterfall-frame
+          loading="eager"
+        />
+      ))
+    }
+  </div>
+
+  <img
+    src={characterLayer.src}
+    width={characterLayer.width}
+    height={characterLayer.height}
+    alt=""
+    class="absolute inset-0 z-0 h-full w-full object-cover object-center"
+    data-hero-asset
+    loading="eager"
+  />
+
+  <div class="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(circle_at_72%_60%,rgba(49,236,246,0.14),transparent_28%),linear-gradient(180deg,rgba(2,8,31,0)_0%,rgba(2,8,31,0.42)_100%)]"></div>
+
+  <header class="relative z-30 mx-auto flex max-w-[92rem] items-center justify-between gap-5 px-1 py-4 text-white">
+    <a href="#top" class="flex shrink-0 items-center gap-3 text-lg font-black tracking-tight">
+      <span class="grid h-10 w-10 place-items-center rounded-full border border-cyan-200/30 bg-cyan-300/10 text-xl text-cyan-300">*</span>
+      <span class="sr-only">HC27</span>
+    </a>
+    <nav aria-label="Primary" class="hidden items-center gap-8 text-base font-black text-white/92 md:flex">
+      <a class="border-b-2 border-cyan-300 pb-1 text-cyan-200" href="#top">Home</a>
+      <a class="transition hover:text-cyan-200" href="#story">About</a>
+      <a class="transition hover:text-cyan-200" href="#story">Projects & Stories</a>
+      <a class="transition hover:text-cyan-200" href="#sponsors">Sponsors</a>
+      <a class="transition hover:text-cyan-200" href="#story">FAQ</a>
+      <a class="rounded border border-cyan-300/80 px-2 py-0.5 text-cyan-100 shadow-[0_0_12px_rgba(103,232,249,0.18)] transition hover:bg-cyan-300 hover:text-[#041334]" href="#story">2027</a>
+    </nav>
+    <div class="hidden items-center gap-4 text-base font-black text-white/90 lg:flex">
+      <a class="transition hover:text-cyan-200" href="#story">IG</a>
+      <a class="transition hover:text-cyan-200" href="#story">X</a>
+      <a class="transition hover:text-cyan-200" href="#story">in</a>
+      <a class="transition hover:text-cyan-200" href="#story">tt</a>
+    </div>
+  </header>
+
+  <div class="relative z-20 mx-auto grid min-h-[calc(100svh-5.5rem)] max-w-[92rem] items-center pt-8">
+    <div class="max-w-[44rem]">
+      <h1 id="hero-title" class="font-display text-[clamp(3.1rem,5.25vw,5.4rem)] font-black leading-[1.02] tracking-normal text-white drop-shadow-[0_4px_18px_rgba(0,0,0,0.35)]">
+        <span class="reveal-line sm:whitespace-nowrap font-serif"><span>Hack Canada</span></span>
+      </h1>
+      <div class="hero-squiggle mt-5 h-px w-80 max-w-[80vw] bg-cyan-300/80"></div>
+      <p class="hero-copy mt-8 max-w-[31rem] font-serif text-xl font-semibold leading-8 text-cyan-50/84 sm:text-2xl">
+        March 6-8th
+      </p>
+      <div class="hero-actions mt-8 flex flex-wrap items-center gap-5">
+        <a
+          href="#apply"
+          class="rounded-full bg-cyan-300 px-9 py-4 text-base font-black text-[#041334] shadow-[0_0_28px_rgba(60,230,232,0.24)] transition hover:-translate-y-0.5 hover:bg-cyan-200"
+        >
+          Apply Now -&gt;
+        </a>
+        <a
+          href="#story"
+          class="rounded-full border-2 border-cyan-300 px-9 py-4 text-base font-black text-cyan-50 transition hover:bg-cyan-300 hover:text-[#041334]"
+        >
+          Learn More
+        </a>
+      </div>
+
+      <div class="hero-features mt-14 grid max-w-[45rem] gap-6 text-sm text-cyan-50/74 sm:grid-cols-3">
+        <!-- <div class="border-cyan-300/16 sm:border-r sm:pr-6">
+          <p class="font-black text-cyan-200">Build together</p>
+          <p class="mt-2 leading-6">Meet passionate builders and creators.</p>
+        </div>
+        <div class="border-cyan-300/16 sm:border-r sm:pr-6">
+          <p class="font-black text-cyan-200">Ship your ideas</p>
+          <p class="mt-2 leading-6">Turn concepts into real demos.</p>
+        </div>
+        <div>
+          <p class="font-black text-cyan-200">Win prizes</p>
+          <p class="mt-2 leading-6">Celebrate strong projects.</p>
+        </div> -->
+      </div>
+    </div>
+  </div>
+</section>

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"
+---
+
+<section
+  id="story"
+  class="relative isolate min-h-screen overflow-hidden bg-[#f9efd1] py-0"
+  data-horizontal-section
+  aria-labelledby="story-title"
+>
+  <span id="sponsors" class="absolute top-1/2 h-px w-px overflow-hidden"></span>
+  <div class="pointer-events-none absolute inset-0 -z-20 bg-[#f7a34d]"></div>
+  <img
+    src={transitionSky.src}
+    width={transitionSky.width}
+    height={transitionSky.height}
+    alt=""
+    class="absolute inset-0 -z-20 h-full w-full object-cover"
+    loading="lazy"
+  />
+  <img
+    src={transitionClouds.src}
+    width={transitionClouds.width}
+    height={transitionClouds.height}
+    alt=""
+    class="parallax-layer absolute left-0 top-0 -z-10 h-[58vh] min-h-72 w-[180vw] max-w-none object-cover opacity-80"
+    data-depth="0.09"
+    loading="lazy"
+  />
+  <img
+    src={transitionSun.src}
+    width={transitionSun.width}
+    height={transitionSun.height}
+    alt=""
+    class="parallax-layer absolute left-[12vw] top-[8vh] -z-10 h-[50vh] min-h-72 w-[160vw] max-w-none object-cover opacity-75"
+    data-depth="0.14"
+    loading="lazy"
+  />
+  <img
+    src={transitionWater.src}
+    width={transitionWater.width}
+    height={transitionWater.height}
+    alt=""
+    class="parallax-layer absolute bottom-[5vh] left-[-8vw] -z-10 h-[58vh] min-h-[30rem] w-[220vw] max-w-none object-cover opacity-95"
+    data-depth="0.22"
+    loading="lazy"
+  />
+  <img
+    src={transitionCabin.src}
+    width={transitionCabin.width}
+    height={transitionCabin.height}
+    alt=""
+    class="parallax-layer absolute bottom-[-3rem] left-[-15rem] z-0 h-[72vh] min-h-[34rem] w-auto max-w-none opacity-70"
+    data-depth="0.38"
+    loading="lazy"
+  />
+  <div class="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-[28vh] bg-[linear-gradient(180deg,rgba(50,106,88,0)_0%,rgba(50,106,88,0.82)_78%)]"></div>
+
+  <div class="horizontal-pin relative z-10 flex min-h-screen items-center overflow-hidden px-5 py-16 sm:px-8 lg:px-12">
+    <div class="horizontal-track flex items-stretch gap-8 pr-[12vw] sm:gap-10 lg:gap-14">
+      <div class="grid min-h-[520px] w-[86vw] max-w-[640px] shrink-0 content-center gap-6 sm:min-h-[560px] lg:w-[48vw]">
+        <p class="text-xs font-black uppercase tracking-[0.2em] text-coral">Scroll story</p>
+        <h2 id="story-title" class="font-display text-[clamp(3rem,8vw,7rem)] font-black leading-[0.9] text-ink">
+          Horizontal scroll demo
+        </h2>
+        <p class="max-w-xl text-lg font-semibold leading-8 text-ink/72">
+          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.
+        </p>
+      </div>
+
+      <div class="relative min-h-[520px] w-[180vw] max-w-none shrink-0 overflow-hidden rounded-lg border-2 border-ink/80 bg-cream/55 shadow-[10px_10px_0_rgba(24,49,69,0.12)] sm:min-h-[560px] lg:w-[170vw]">
+        <img
+          src={transitionClouds.src}
+          width={transitionClouds.width}
+          height={transitionClouds.height}
+          alt=""
+          class="parallax-layer absolute left-[-6%] top-[-10%] h-[58%] w-[132%] max-w-none object-cover opacity-60"
+          data-depth="0.08"
+          loading="lazy"
+        />
+        <img
+          src={transitionWater.src}
+          width={transitionWater.width}
+          height={transitionWater.height}
+          alt=""
+          class="parallax-layer absolute bottom-0 left-[-8%] h-[72%] w-[135%] max-w-none object-cover opacity-90"
+          data-depth="0.16"
+          loading="lazy"
+        />
+        <img
+          src={transitionRocks.src}
+          width={transitionRocks.width}
+          height={transitionRocks.height}
+          alt=""
+          class="parallax-layer absolute bottom-[-4rem] left-[18%] h-[48%] w-[70%] max-w-none object-contain opacity-90"
+          data-depth="0.27"
+          loading="lazy"
+        />
+        <div class="absolute left-[8%] top-10 rounded-full border-2 border-ink bg-foam/80 px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-ink">
+          Pin starts
+        </div>
+        <div class="absolute left-[44%] top-1/2 rounded-full border-2 border-ink bg-coral px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-white">
+          Scrub sideways
+        </div>
+        <div class="absolute bottom-10 right-[8%] rounded-full border-2 border-ink bg-spruce px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-white">
+          Parallax layers
+        </div>
+      </div>
+
+      <div id="apply" class="grid min-h-[520px] w-[86vw] max-w-[620px] shrink-0 content-center gap-5 rounded-lg border-2 border-ink bg-ink p-6 text-foam shadow-[10px_10px_0_rgba(239,116,98,0.32)] sm:min-h-[560px] sm:p-8 lg:w-[48vw]">
+        <p class="text-xs font-black uppercase tracking-[0.2em] text-coral">HC27</p>
+        <h3 class="font-display text-5xl font-black leading-none sm:text-6xl">Ready for the pier?</h3>
+        <p class="max-w-md text-base font-semibold leading-7 text-foam/78">
+          Bring a laptop, a curious idea, and a team spirit. The coast is open for builders.
+        </p>
+        <a
+          href="#top"
+          class="mt-2 w-fit rounded-full border-2 border-foam bg-cream px-5 py-3 text-sm font-black uppercase tracking-[0.12em] text-ink transition hover:bg-coral hover:text-white"
+        >
+          Back to top
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

frontend/src/components/Layout.astro

@@ -0,0 +1,33 @@
+---
+import "@styles/global.css";
+
+type Props = {
+  title: string;
+};
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="A playful Nova Scotia themed HC27 frontend onboarding project." />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#eaf8f5" />
+    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+    <svg aria-hidden="true" class="fixed h-0 w-0">
+      <filter id="roughen">
+        <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" seed="9" />
+        <feDisplacementMap in="SourceGraphic" scale="1.4" />
+      </filter>
+    </svg>
+    <script>
+      import "@scripts/animations";
+    </script>
+  </body>
+</html>

frontend/src/components/LinusLayout.astro

@@ -0,0 +1,33 @@
+---
+import "../styles/linusgao.css"
+
+type Props = {
+  title: string;
+};
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="A playful Nova Scotia themed HC27 frontend onboarding project." />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#eaf8f5" />
+    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+    <svg aria-hidden="true" class="fixed h-0 w-0">
+      <filter id="roughen">
+        <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" seed="9" />
+        <feDisplacementMap in="SourceGraphic" scale="1.4" />
+      </filter>
+    </svg>
+    <script>
+      import "@/scripts/animations"
+    </script>
+  </body>
+</html>