From f4d1c50f3781635ad1dfc986ade48a51b9e98d57 Mon Sep 17 00:00:00 2001
From: hcsong213 <51963099+hcsong213@users.noreply.github.com>
Date: Sat, 28 Aug 2021 18:46:26 -0700
Subject: [PATCH 1/2] Landing Page Title Slider first pass

Incorporated basic functionality of the slider. Basic functionality
should be bug-free. Reponsiveness considered.

Points for further consideration/development
- Having just the verbs slide through while having the entire line
  adjust slightly so that it is always centered.
- Having the verbs fade in/out instead of sliding in
- Visual refinements (eg: having Nova start sparkling at the end)
---
 src/components/PageAssets.js  | 60 +++++++++++++++---------------
 src/components/TextVSlider.js | 70 +++++++++++++++++++++++++++++++++++
 src/pages/index.js            |  5 ++-
 3 files changed, 103 insertions(+), 32 deletions(-)
 create mode 100644 src/components/TextVSlider.js

diff --git a/src/components/PageAssets.js b/src/components/PageAssets.js
index 5bc1a56..5cf5939 100644
--- a/src/components/PageAssets.js
+++ b/src/components/PageAssets.js
@@ -1,14 +1,14 @@
-import styled from "@emotion/styled"
-import { Link } from "gatsby"
-import React, { useState } from "react"
-import Sparkles from "./Sparkle"
-import Fade from "react-reveal/fade"
+import styled from "@emotion/styled";
+import { Link } from "gatsby";
+import React, { useState } from "react";
+import Sparkles from "./Sparkle";
+import Fade from "react-reveal/fade";
 
 const fonts = {
   main: "Prompt",
-}
+};
 
-const mobile = `@media (max-width: 800px)`
+export const mobile = `@media (max-width: 800px)`;
 
 export const NovaH1 = styled.div`
   font-family: ${fonts.main};
@@ -24,7 +24,7 @@ export const NovaH1 = styled.div`
   ${mobile} {
     font-size: 32px;
   }
-`
+`;
 export const NovaH2 = styled.div`
   font-family: ${fonts.main};
   font-style: normal;
@@ -40,7 +40,7 @@ export const NovaH2 = styled.div`
   ${mobile} {
     font-size: 24px;
   }
-`
+`;
 
 export const NovaH4 = styled.div`
   font-family: ${fonts.main};
@@ -57,7 +57,7 @@ export const NovaH4 = styled.div`
   ${mobile} {
     font-size: 18px;
   }
-`
+`;
 
 export const NovaDiv = styled.div`
   font-family: Rubik;
@@ -68,7 +68,7 @@ export const NovaDiv = styled.div`
   ${mobile} {
     font-size: ${({ fontSize }) => `${(2 / 3) * fontSize || 12}px`};
   }
-`
+`;
 
 export const NovaSpacer = styled.div`
   width: 100%;
@@ -76,7 +76,7 @@ export const NovaSpacer = styled.div`
   ${mobile} {
     height: ${({ mobileY, y }) => `${mobileY || (2 / 3) * y}`}px;
   }
-`
+`;
 
 export const MainBox = styled.div`
   margin-top: 100px;
@@ -88,7 +88,7 @@ export const MainBox = styled.div`
     width: 95%;
     min-width: 0;
   }
-`
+`;
 
 export const NovaP = styled.p`
   -webkit-font-smoothing: antialiased;
@@ -106,7 +106,7 @@ export const NovaP = styled.p`
   ${mobile} {
     font-size: 16px;
   }
-`
+`;
 
 export const Button = styled(Link)`
   color: ${({ textColor }) => `${textColor || "#FFFFFF"}`};
@@ -132,10 +132,10 @@ export const Button = styled(Link)`
     padding: 12px 15px;
     margin: 5px;
   }
-`
+`;
 
 export function SparklyButton(props) {
-  const [hover, setHover] = useState(false)
+  const [hover, setHover] = useState(false);
   return (
     <Sparkles hide={!hover}>
       <Button
@@ -147,7 +147,7 @@ export function SparklyButton(props) {
         {props.children}
       </Button>
     </Sparkles>
-  )
+  );
 }
 
 const SectionBoxStyled = styled.div`
@@ -159,15 +159,15 @@ const SectionBoxStyled = styled.div`
     width: 95%;
     min-width: 0;
   }
-`
+`;
 
 export const SectionBox = ({ children }) => {
   return (
     <Fade>
       <SectionBoxStyled>{children}</SectionBoxStyled>
     </Fade>
-  )
-}
+  );
+};
 
 export const SectionHeading = styled(NovaH2)`
   font-family: ${fonts.main};
@@ -181,7 +181,7 @@ export const SectionHeading = styled(NovaH2)`
   margin: 0;
   /* identical to box height, or 65px */
   letter-spacing: 0.05em;
-`
+`;
 
 export const SectionSubHeading = styled.h2`
   font-family: ${fonts.main};
@@ -196,7 +196,7 @@ export const SectionSubHeading = styled.h2`
   ${mobile} {
     font-size: 20px;
   }
-`
+`;
 
 export const NovaLink = styled(Link)`
   color: #ffffff;
@@ -206,7 +206,7 @@ export const NovaLink = styled(Link)`
   &:hover {
     color: #ffc650;
   }
-`
+`;
 
 export const NovaA = styled.a`
   color: #ffffff;
@@ -217,7 +217,7 @@ export const NovaA = styled.a`
   &:hover {
     color: #ffc650;
   }
-`
+`;
 
 export const Img = styled.img`
   width: 100%;
@@ -228,7 +228,7 @@ export const Img = styled.img`
   ${mobile} {
     margin: 32px 0;
   }
-`
+`;
 
 export const Span = styled.span`
   font-family: Rubik;
@@ -238,7 +238,7 @@ export const Span = styled.span`
   line-height: 160%;
   /* or 22px */
   color: #d7a3e1;
-`
+`;
 
 export const ListItem = styled.li`
   list-style-type: none;
@@ -248,7 +248,7 @@ export const ListItem = styled.li`
   &::before {
     content: "•\xa0\xa0";
   }
-`
+`;
 
 const ArrowStyled = styled.b`
   color: #ffc650;
@@ -258,7 +258,7 @@ const ArrowStyled = styled.b`
   ${mobile} {
     font-size: 14px;
   }
-`
+`;
 export const Arrow = () => {
-  return <ArrowStyled>&#8594;&ensp;</ArrowStyled>
-}
+  return <ArrowStyled>&#8594;&ensp;</ArrowStyled>;
+};
diff --git a/src/components/TextVSlider.js b/src/components/TextVSlider.js
new file mode 100644
index 0000000..a8fa50b
--- /dev/null
+++ b/src/components/TextVSlider.js
@@ -0,0 +1,70 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/core";
+import { mobile, NovaH1 } from "./PageAssets";
+
+// First pass: keyframes for the text slider will be fixed, so if user
+// were to add more elements, they would need to change the keyframes
+// accordingly.
+// Huge credits to W.S. Toh
+// https://code-boxx.com/responsive-pure-css-text-slider/#sec-v
+
+const DimensionedDiv = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+  height: 66px;
+
+  ${mobile} {
+    height: 49px;
+  }
+`;
+
+const SlideV = keyframes`
+  0% { bottom: 0; }
+  18% { bottom: 0; }
+  20% { bottom: 100%; }
+  38% { bottom: 100%; }
+  40% { bottom: 200%; }
+  58% { bottom: 200%; }
+  60% { bottom: 300%; }
+  78% { bottom: 300%; }
+  80% { bottom: 400%; }
+  100% { bottom: 400%; }
+`;
+
+const VWrap = styled(DimensionedDiv)`
+  overflow: hidden;
+`;
+
+const VMove = styled.div`
+  position: relative;
+  bottom: 0%;
+  animation: ${SlideV} 12s forwards;
+`;
+
+// VSlide is left as a somewhat redundant component for better semantics
+// and easier styling in the future.
+const VSlide = styled(DimensionedDiv)``;
+
+const verbs = ["Build", "Code", "Design", "Innovate", "Nova"];
+
+const TextVSlider = (params) => {
+  return (
+    <VWrap>
+      <VMove>
+        {verbs.map((verb) => {
+          return (
+            // <VSlide as={NovaH1} center>
+            //   <NovaH1 as center>{verb} for Good</NovaH1>
+            // </VSlide>
+            <VSlide as={NovaH1} center>
+              {verb} for Good
+            </VSlide>
+          );
+        })}
+      </VMove>
+    </VWrap>
+  );
+};
+
+export default TextVSlider;
diff --git a/src/pages/index.js b/src/pages/index.js
index 0c37d38..87d548f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -29,6 +29,7 @@ import {
   NovaA,
 } from "../components/PageAssets";
 import styled from "@emotion/styled";
+import TextVSlider from "../components/TextVSlider";
 
 const mobile = `@media (max-width: 800px)`;
 const notMobile = `@media (min-width: 801px)`;
@@ -140,8 +141,8 @@ export default function Home({ data }) {
           <MobileView>
             <NovaSpacer y={48} />
           </MobileView>
-          <NovaH1 center>Nova, Tech for Good.</NovaH1>
-          <NovaSpacer y={36} />
+          <TextVSlider />
+          <NovaSpacer y={34} />
           <Description center>
             We are a team of students at UCLA who aim to create high-impact
             technology that empowers nonprofits to better serve their

From f8c360c3f6d6c51ca1756e3ce9c4ec4ab046a127 Mon Sep 17 00:00:00 2001
From: hcsong213 <51963099+hcsong213@users.noreply.github.com>
Date: Sat, 28 Aug 2021 23:02:01 -0700
Subject: [PATCH 2/2] Change transition speed and direction

Transitions are slower, direction is down
---
 src/components/TextVSlider.js | 41 +++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/TextVSlider.js b/src/components/TextVSlider.js
index a8fa50b..f0eba94 100644
--- a/src/components/TextVSlider.js
+++ b/src/components/TextVSlider.js
@@ -2,6 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 import { keyframes } from "@emotion/core";
 import { mobile, NovaH1 } from "./PageAssets";
+import Sparkles from "./Sparkle";
 
 // First pass: keyframes for the text slider will be fixed, so if user
 // were to add more elements, they would need to change the keyframes
@@ -19,19 +20,37 @@ const DimensionedDiv = styled.div`
   }
 `;
 
+// Vertical slider (move up)
+// Keeping just in case we want to revert.
+// const SlideV = keyframes`
+//   0% { bottom: 0; }
+//   16% { bottom: 0; }
+//   20% { bottom: 100%; }
+//   36% { bottom: 100%; }
+//   40% { bottom: 200%; }
+//   56% { bottom: 200%; }
+//   60% { bottom: 300%; }
+//   76% { bottom: 300%; }
+//   80% { bottom: 400%; }
+//   100% { bottom: 400%; }
+// `;
+
+// Vertical slider (move down)
 const SlideV = keyframes`
-  0% { bottom: 0; }
-  18% { bottom: 0; }
-  20% { bottom: 100%; }
-  38% { bottom: 100%; }
+  0% { bottom: 400%; }
+  16% { bottom: 400%; }
+  20% { bottom: 300%; }
+  36% { bottom: 300%; }
   40% { bottom: 200%; }
-  58% { bottom: 200%; }
-  60% { bottom: 300%; }
-  78% { bottom: 300%; }
-  80% { bottom: 400%; }
-  100% { bottom: 400%; }
+  56% { bottom: 200%; }
+  60% { bottom: 100%; }
+  76% { bottom: 100%; }
+  80% { bottom: 0%; }
+  100% { bottom: 0%; }
 `;
 
+// TODO: "for Good" horizontal re-centering
+
 const VWrap = styled(DimensionedDiv)`
   overflow: hidden;
 `;
@@ -52,13 +71,13 @@ const TextVSlider = (params) => {
   return (
     <VWrap>
       <VMove>
-        {verbs.map((verb) => {
+        {verbs.map((verb, i, a) => {
           return (
             // <VSlide as={NovaH1} center>
             //   <NovaH1 as center>{verb} for Good</NovaH1>
             // </VSlide>
             <VSlide as={NovaH1} center>
-              {verb} for Good
+              {a[a.length - i - 1]} for Good
             </VSlide>
           );
         })}