fix story etc

ashharrison90 · Nov 19, 2023 · 85b629b · 85b629b
1 parent 5ae14a9
commit 85b629b
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 28 deletions.
diff --git a/components/Header/Header.module.scss b/components/Header/Header.module.scss
@@ -10,7 +10,7 @@
   top: 0;
   transition: top 0.2s ease-in-out;
   width: 100%;
-  z-index: 1;
+  z-index: 2;
 }
 
 .nav {

diff --git a/components/Layout/Layout.module.scss b/components/Layout/Layout.module.scss
@@ -1,14 +1,6 @@
-.container {
-  height: 100%;
-  width: 100%;
-}
-
 .heroContent {
-  box-shadow: inset 0 0 60px 0 black;
   display: flex;
   flex-direction: column;
-  position: relative;
-  width: 100%;
 }
 
 .contentContainer {

diff --git a/components/Layout/Layout.stories.tsx b/components/Layout/Layout.stories.tsx
@@ -6,7 +6,7 @@ const meta: Meta<typeof Layout> = {
   title: 'Components/Layout',
   component: Layout,
   args: {
-    backgroundContent: (
+    heroContent: (
       <div
         style={{
           backgroundColor: 'red',
@@ -16,7 +16,7 @@ const meta: Meta<typeof Layout> = {
         }}
       />
     ),
-    backgroundHeight: 50,
+    heroHeight: 50,
     children: (
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -28,7 +28,6 @@ const meta: Meta<typeof Layout> = {
         mollit anim id est laborum.
       </p>
     ),
-    foregroundContent: <h1>HELLO</h1>,
     hideHeaderUntilScroll: false,
     metaDescription: 'The description seen on Google',
     metaTitle: 'The title seen on Google',

diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -65,15 +65,15 @@ const Layout = forwardRef<HTMLDivElement, Props>(
     }, [hideHeaderUntilScroll])
 
     return (
-      <div ref={containerRef} className={styles.container}>
+      <div ref={containerRef}>
         <Head>
           <title>{metaTitle}</title>
           <meta name='description' content={metaDescription} />
         </Head>
         <Header show={showHeader} ref={headerRef} />
         <div
           style={{
-            height: `${heroHeight}%`,
+            height: `${heroHeight}vh`,
           }}
           className={styles.heroContent}
         >

diff --git a/components/PostLayout/PostLayout.tsx b/components/PostLayout/PostLayout.tsx
@@ -43,18 +43,20 @@ export default function PostLayout({ children, metadata }: Props) {
     const ctx = gsap.context(() => {
       gsap.from(`.${layoutStyles.heroContent}`, {
         duration: 0.5,
-        height: '100%',
+        height: '100vh',
         ease: 'back',
         delay: 0.1,
       })
 
       gsap.to('[data-speed]', {
         y: (i, el) =>
-          (1 - parseFloat(el.getAttribute('data-speed'))) *
-          ScrollTrigger.maxScroll(window),
+          -(
+            parseFloat(el.getAttribute('data-speed')) *
+            ScrollTrigger.maxScroll(window)
+          ),
         ease: 'none',
         scrollTrigger: {
-          start: 0,
+          start: '0',
           end: 'max',
           scrub: true,
         },
@@ -90,7 +92,7 @@ export default function PostLayout({ children, metadata }: Props) {
   const hero = (
     <img
       alt=''
-      data-speed='1.05'
+      data-speed='0.05'
       className={styles.coverImage}
       src={coverImage}
     />

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "test-e2e-ci": "start-server-and-test serve http://localhost:3000 test-e2e",
     "test-e2e-headed": "PWDEBUG=1 npx playwright test __test__/e2e --headed",
     "test-lighthouse": "lhci autorun",
-    "typecheck": "tsc",
+    "typecheck": "tsc --noEmit",
     "storybook": "storybook dev"
   },
   "devDependencies": {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -22,11 +22,13 @@ export default function Home({ allPosts }: Props) {
     const ctx = gsap.context(() => {
       gsap.to('[data-speed]', {
         y: (i, el) =>
-          (1 - parseFloat(el.getAttribute('data-speed'))) *
-          ScrollTrigger.maxScroll(window),
+          -(
+            parseFloat(el.getAttribute('data-speed')) *
+            ScrollTrigger.maxScroll(window)
+          ),
         ease: 'none',
         scrollTrigger: {
-          start: 0,
+          start: '0',
           end: 'max',
           scrub: true,
         },
@@ -42,15 +44,15 @@ export default function Home({ allPosts }: Props) {
     <>
       {!pageLoaded && (
         <img
-          data-speed='1.05'
+          data-speed='0.05'
           alt=''
           src='/assets/home/hero-fallback.webp'
           data-testid='heroFallback'
           className={classnames(styles.fallback)}
         />
       )}
       <img
-        data-speed='1.05'
+        data-speed='0.05'
         onLoad={() => setPageLoaded(true)}
         alt='A nice background'
         src='/assets/home/hero-background.webp'
@@ -60,15 +62,15 @@ export default function Home({ allPosts }: Props) {
         })}
       />
       <img
-        data-speed='1.15'
+        data-speed='0.15'
         alt='Me'
         src='/assets/home/hero-cutout.webp'
         data-testid='heroCutout'
         className={classnames(styles.heroCutout, {
           [styles.hide]: !pageLoaded,
         })}
       />
-      <div className={styles.heroTitleContainer}>
+      <div data-speed='1' className={styles.heroTitleContainer}>
         <h1>
           <Typewriter
             options={{

diff --git a/styles/Home.module.scss b/styles/Home.module.scss
@@ -43,7 +43,7 @@
   justify-content: flex-end;
   max-width: 1024px;
   padding: 0 1em;
-  position: relative;
+  position: fixed;
   width: 100%;
 
   h1 {