feat: add transition for navbar and light/dark mode

bniedermeyer · Sep 25, 2022 · 17a393f · 17a393f · vercel · Sep 25, 2022
1 parent ccb733b
commit 17a393f
Show file tree

Hide file tree

Showing 32 changed files with 805 additions and 98 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -2,6 +2,7 @@
   "recommendations": [
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "firsttris.vscode-jest-runner"
   ]
 }
diff --git a/apps/brenden-dev/pages/_app.tsx b/apps/brenden-dev/pages/_app.tsx
@@ -1,5 +1,5 @@
 import { AppProps } from 'next/app';
-import { Navbar, Banner } from '@libs/react/components';
+import { Banner } from '@libs/react/components';
 import Head from 'next/head';
 import Script from 'next/script';
 import './styles.css';
@@ -10,7 +10,7 @@ function CustomApp({ Component, pageProps }: AppProps) {
       <Head>
         <title>Welcome to brenden-dev!</title>
       </Head>
-      <main className="app bg-primary-light dark:bg-primary-dark">
+      <main className="app transition-colors ease-in-out duration-300 bg-primary-light dark:bg-primary-dark">
         <Script
           id="dark-mode-script"
           dangerouslySetInnerHTML={{
@@ -25,7 +25,6 @@ function CustomApp({ Component, pageProps }: AppProps) {
             `,
           }}
         />
-        <Navbar />
         <Banner />
         <Component {...pageProps} />
       </main>

diff --git a/apps/brenden-dev/pages/index.tsx b/apps/brenden-dev/pages/index.tsx
@@ -1,14 +1,32 @@
 import { Intro } from '../sections/intro/intro';
 import { Info } from '../sections/info/info';
 import { Skills } from '../sections/skills/skills';
+import { Navbar } from '@libs/react/components';
+import { useDocumentScrollThrottled } from '@libs/react/hooks';
+import { useState } from 'react';
 
 export function Index() {
+  const [displayNavbar, setDisplayNavbar] = useState(false);
+
+  const MINIMUM_SCROLL = 100;
+
+  useDocumentScrollThrottled(
+    ({ previousScrollTop, currentScrollTop }): void => {
+      if (previousScrollTop !== currentScrollTop) {
+        const isMinimumScrolled = currentScrollTop > MINIMUM_SCROLL;
+        setDisplayNavbar(isMinimumScrolled);
+      }
+    }
+  );
   return (
-    <div className="page h-screen">
-      <Intro />
-      <Info />
-      <Skills />
-    </div>
+    <>
+      <Navbar displayFull={displayNavbar} />
+      <div className="page h-screen">
+        <Intro />
+        <Info />
+        <Skills />
+      </div>
+    </>
   );
 }
 

diff --git a/apps/brenden-dev/sections/info/info.module.css b/apps/brenden-dev/sections/info/info.module.css
diff --git a/apps/brenden-dev/sections/info/info.tsx b/apps/brenden-dev/sections/info/info.tsx
@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import { Card } from '@libs/react/components';
-import styles from './info.module.css';
 
 /* eslint-disable-next-line */
 export interface InfoProps {}

diff --git a/apps/brenden-dev/sections/intro/intro.module.css b/apps/brenden-dev/sections/intro/intro.module.css
diff --git a/apps/brenden-dev/sections/intro/intro.tsx b/apps/brenden-dev/sections/intro/intro.tsx
@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import speakingImage from '../../assets/speaking.jpg';
-import styles from './intro.module.css';
 
 /* eslint-disable-next-line */
 export interface IntroProps {}

diff --git a/apps/brenden-dev/sections/skills/skills.module.css b/apps/brenden-dev/sections/skills/skills.module.css
diff --git a/apps/brenden-dev/sections/skills/skills.tsx b/apps/brenden-dev/sections/skills/skills.tsx
@@ -1,55 +1,58 @@
-import styles from './skills.module.css';
 import Image from 'next/image';
 /* eslint-disable-next-line */
 export interface SkillsProps {}
 
+const ImageContainer = ({ children }): JSX.Element => {
+  return <div className="relative aspect-square h-40">{children}</div>;
+};
+
 export function Skills(props: SkillsProps) {
   return (
     <section className="bg-primary-light dark:bg-primary-dark  py-20 md:py-30">
       <h1 className="text-3xl text-center text-primary dark:text-primary-light mb-10">
         I have experience building with
       </h1>
       <div className="grid grid-cols-2 md:grid-cols-3 gap-8 dark:invert place-items-center">
-        <div className="relative aspect-square h-40">
+        <ImageContainer>
           <Image src="/logos/react.png" alt="React" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/angular.png" alt="Angular" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image
             src="/logos/webcomponents.svg"
             alt="web components"
             layout="fill"
           />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/typescript.png" alt="typescript" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/nodejs.png" alt="nodejs" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/html5.png" alt="html5" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/rxjs.png" alt="rxjs" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/google.png" alt="google cloud" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/aws.png" alt="aws" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/terraform.png" alt="terraform" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/kubernetes.png" alt="kubernetes" layout="fill" />
-        </div>
-        <div className="relative aspect-square h-40">
+        </ImageContainer>
+        <ImageContainer>
           <Image src="/logos/sass.png" alt="sass" layout="fill" />
-        </div>
+        </ImageContainer>
       </div>
     </section>
   );

diff --git a/jest.config.ts b/jest.config.ts
@@ -0,0 +1,5 @@
+import { getJestProjects } from '@nrwl/jest';
+
+export default {
+  projects: getJestProjects(),
+};
diff --git a/jest.preset.js b/jest.preset.js
@@ -0,0 +1,3 @@
+const nxPreset = require('@nrwl/jest/preset').default;
+
+module.exports = { ...nxPreset };
diff --git a/libs/react/components/src/lib/banner/banner.module.css b/libs/react/components/src/lib/banner/banner.module.css
diff --git a/libs/react/components/src/lib/banner/banner.tsx b/libs/react/components/src/lib/banner/banner.tsx
@@ -1,5 +1,3 @@
-import styles from './banner.module.css';
-
 /* eslint-disable-next-line */
 export interface BannerProps {}
 

diff --git a/libs/react/components/src/lib/card/card.module.css b/libs/react/components/src/lib/card/card.module.css
diff --git a/libs/react/components/src/lib/card/card.tsx b/libs/react/components/src/lib/card/card.tsx
@@ -1,5 +1,3 @@
-import styles from './card.module.css';
-
 /* eslint-disable-next-line */
 export interface CardProps {
   url?: string;
@@ -14,7 +12,7 @@ export function Card({ url, title, children }: CardProps) {
         url
           ? 'hover:scale-[1.02] transition-all motion-reduce:transition-none'
           : null
-      } max-w-xs bg-primary dark:bg-primary-light rounded-md drop-shadow-md p-4 m-2`}
+      } max-w-xs bg-primary dark:bg-primary-light rounded-md drop-shadow-md p-4 m-2 transition-colors ease-in-out duration-700`}
     >
       {children && (
         <div className="relative aspect-auto flex flex-col items-center justify-center mb-8">

diff --git a/libs/react/components/src/lib/dark-mode-toggle/dark-mode-toggle.module.css b/libs/react/components/src/lib/dark-mode-toggle/dark-mode-toggle.module.css
diff --git a/libs/react/components/src/lib/navbar/navbar.module.css b/libs/react/components/src/lib/navbar/navbar.module.css
diff --git a/libs/react/components/src/lib/navbar/navbar.tsx b/libs/react/components/src/lib/navbar/navbar.tsx
@@ -1,21 +1,44 @@
+import { useState, useEffect } from 'react';
 import DarkModeToggle from '../dark-mode-toggle/dark-mode-toggle';
-import styles from './navbar.module.css';
 
 /* eslint-disable-next-line */
-export interface NavbarProps {}
+export interface NavbarProps {
+  displayFull?: boolean;
+}
+
+export function Navbar({ displayFull = true }: NavbarProps) {
+  const baseStyles =
+    'fixed w-full top-0 z-10 bg-primary-light border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-primary-dark transition-colors ease-in-out duration-300';
+  const [styles, setStyles] = useState(baseStyles);
+
+  useEffect(() => {
+    if (displayFull) {
+      setStyles(
+        `${baseStyles} shadow-xl transition-shadow duration-700 ease-in-out reduce-motion:transition-none`
+      );
+    } else {
+      setStyles(baseStyles);
+    }
+  }, [displayFull]);
 
-export function Navbar(props: NavbarProps) {
   return (
-    <nav className="sticky top-0 z-10 bg-primary-light border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-primary-dark">
+    <header className={styles}>
       <div className="container flex flex-wrap justify-between items-center mx-auto">
-        <a href="https://brenden.dev" className="flex items-center">
+        <a
+          href="https://brenden.dev"
+          className={`flex items-center ${
+            displayFull
+              ? 'opacity-100 transition-opacity duration-700 ease-in-out reduce-motion:transition-none'
+              : 'transition-opacity opacity-0'
+          }`}
+        >
           <span className="self-center text-2xl text-primary-dark font-semibold whitespace-nowrap dark:text-secondary-dark">
             Brenden Niedermeyer
           </span>
         </a>
         <DarkModeToggle />
       </div>
-    </nav>
+    </header>
   );
 }
 

diff --git a/libs/react/hooks/.babelrc b/libs/react/hooks/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/react/hooks/.eslintrc.json b/libs/react/hooks/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/react/hooks/README.md b/libs/react/hooks/README.md
@@ -0,0 +1,7 @@
+# react-hooks
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test react-hooks` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/react/hooks/jest.config.ts b/libs/react/hooks/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+  displayName: 'react-hooks',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../coverage/libs/react/hooks',
+};
diff --git a/libs/react/hooks/project.json b/libs/react/hooks/project.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/react/hooks/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/react/hooks/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/react/hooks"],
+      "options": {
+        "jestConfig": "libs/react/hooks/jest.config.ts",
+        "passWithNoTests": true
+      }
+    }
+  }
+}
diff --git a/libs/react/hooks/src/index.ts b/libs/react/hooks/src/index.ts
@@ -0,0 +1 @@
+export * from './useDocumentScrollThrottled';