[feat] add hero section (#11)

* update hero * update text styles, minor adjustment to hero layout * remove changes to env.d.ts * tell prettier to ignore env.d.ts * tell lint to ignore env.d.ts * update scroll behavior and padding * microscopic edits * add bouncing arrow
calblueprint · Jan 11, 2024 · 92aaacd · 92aaacd
1 parent 43021ee
commit 92aaacd
Show file tree

Hide file tree

Showing 6 changed files with 199 additions and 47 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -3,6 +3,7 @@
 
 README.md
 
+src/env.d.ts
 .eslintrc.cjs
 .prettierrc.cjs
 astro.config.mjs

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -1,62 +1,104 @@
-<div class="container">
-  <main>
-    <div>
-      <h3>Cal Hacks x Blueprint</h3>
-      <h1>Hack for Impact</h1>
-      <div class="spacer"></div>
-    </div>
-    <div>
-      <h2>February 25, 2024</h2>
-      <p>Pauley Ballroom @ University of California, Berkeley</p>
-      <p class="spacer">
-        We are connecting a community of leaders, creators, and change makers to
-        tackle social challenges.
-      </p>
-      <h4 class="spacer">
-        Registration is opening soon — stay tuned! In the meantime, follow
-        @calblueprint and @calhacks on Instagram for updates.
-      </h4>
-    </div>
-  </main>
-  <aside></aside>
-</div>
+---
+import { Image } from 'astro:assets';
+import Button from './Button.astro';
+import TitleAccent from './TitleAccent.astro';
+import stopwatchIcon from '../graphics/stopwatch.svg';
+import arrowsIcon from '../graphics/arrows.svg';
+---
+
+<section>
+  <h4>FEBRUARY 25, 2024 @ UNIVERSITY OF CALIFORNIA, BERKELEY</h4>
+  <h1>
+    Hack for Impact 2024 connects a community of
+    <TitleAccent
+      words={['change-makers', 'leaders', 'creators', 'visionaries']}
+    />
+    to tackle social challenges
+  </h1>
+  <div>
+    <Button variant="secondary">
+      <p class="btn-text">Registration will open February 1!</p>
+      <Image src={stopwatchIcon} alt="stopwatch" />
+    </Button>
+    <span>
+      Stay tuned! In the meantime, follow
+
+      <a
+        href="https://www.instagram.com/calblueprint/"
+        target="_blank"
+        referrerpolicy="no-referrer"
+      >
+        @calblueprint
+      </a>
+
+      and
+
+      <a
+        href="https://www.instagram.com/calhacks/"
+        target="_blank"
+        referrerpolicy="no-referrer"
+      >
+        @calhacks
+      </a>
+
+      on Instagram for updates.
+    </span>
+  </div>
+  <Image class="arrows" src={arrowsIcon} alt="arrows" />
+</section>
 
 <style lang="scss">
-  @use '../styles/breakpoints';
+  @use '../styles/colors';
 
-  .container {
+  section {
     display: flex;
-    flex-grow: 1;
-    width: 100%;
-    padding-left: 1rem;
-    position: relative;
+    flex-direction: column;
+    align-items: center;
+    width: 862px; // fixed width for now
+    margin: auto;
+    padding-bottom: 50px;
+    text-align: center;
+    gap: 20px;
 
-    @media (min-width: breakpoints.$laptop) {
-      padding: 0 5rem 5rem 5rem;
+    h1 {
+      margin: 0.5rem 0;
     }
-  }
-
-  main {
-    margin: auto 0;
 
-    div:last-child {
-      width: 60%;
+    div {
+      display: flex;
+      flex-direction: column;
+      width: min-content;
+      gap: 20px;
     }
   }
 
-  div.spacer {
-    height: 0.5rem;
-
-    @media (min-width: breakpoints.$phone) {
-      visibility: hidden;
-    }
+  .btn-text {
+    width: max-content;
+    font-size: 1.25rem;
   }
 
-  p.spacer {
-    margin-top: 1.5rem;
+  // arrow scroll indication
+  .arrows {
+    position: absolute;
+    bottom: 5svh;
+    animation: bounce 5s ease infinite;
   }
 
-  h4.spacer {
-    margin-top: 4rem;
+  @keyframes bounce {
+    0%,
+    10%,
+    25%,
+    40%,
+    50% {
+      transform: translateY(0);
+    }
+
+    20% {
+      transform: translateY(-20px);
+    }
+
+    30% {
+      transform: translateY(-10px);
+    }
   }
 </style>
diff --git a/src/components/TitleAccent.astro b/src/components/TitleAccent.astro
@@ -0,0 +1,102 @@
+---
+interface Props {
+  words: string[];
+}
+
+const { words } = Astro.props;
+
+const longestWord = words.reduce((prev, curr) =>
+  curr.length > prev.length ? curr : prev,
+);
+---
+
+<div class="container">
+  <h1 class="ghost">{longestWord}</h1>
+  <div class="window">
+    <div class="scroll">
+      {
+        words.map(w => (
+          <div class="word">
+            <h1 class="accent-1">{w}</h1>
+            <h1 class="accent-2">{w}</h1>
+          </div>
+        ))
+      }
+      <div class="word">
+        <h1 class="accent-1">{words[0]}</h1>
+        <h1 class="accent-2">{words[0]}</h1>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @use '../styles/colors';
+
+  // manually defined (can't use CSS vars in @for)
+  // should be one more than available words
+  $numWords: 5;
+
+  // setting up spacing
+  .container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .ghost {
+    visibility: hidden;
+  }
+
+  // window
+  .window {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow-y: hidden;
+    top: 0;
+  }
+
+  // scroll container
+  .scroll {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-flex;
+    flex-direction: column;
+    animation: scrollUp 4s infinite;
+  }
+
+  // each word
+  .word {
+    position: relative;
+
+    h1 {
+      mix-blend-mode: multiply;
+      text-align: center;
+      width: 100%;
+
+      &.accent-1 {
+        color: colors.$accent-red;
+      }
+
+      &.accent-2 {
+        position: absolute;
+        top: -2px;
+        left: -1px;
+        color: colors.$accent-yellow;
+        z-index: -1;
+      }
+    }
+  }
+
+  // animation
+  // kudos to https://1stwebdesigner.com/10-cool-pure-css-scrolling-text-animations/
+  @keyframes scrollUp {
+    @for $i from 1 through ($numWords - 1) {
+      #{($i * 25) - 10%},
+      #{$i * 25%} {
+        transform: translateY(calc(-100% / $numWords) * $i);
+      }
+    }
+  }
+</style>
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
@@ -1,6 +1,7 @@
 $background: #fff9ef;
 $primary: #80d3f1;
 $secondary: #ccedf9; // nontransparent hex
-$accent: #df7291;
+$accent-yellow: #fddf81;
+$accent-red: #df7291;
 $text: #3d3833; // theres a #3d3935, but the difference is miniscule
 $link: #61c5e3;
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
@@ -5,6 +5,9 @@
 html {
   font-family: fonts.$sans;
   background: colors.$background;
+  color: colors.$text;
+  scroll-behavior: smooth;
+  scroll-padding-top: 20svh;
 }
 
 * {
@@ -39,6 +42,7 @@ h4 {
   letter-spacing: 0.8px;
   font-size: 1rem;
   font-weight: 400;
+  text-transform: uppercase;
 }
 
 h5 {