Skip to content

Commit 17a393f

Browse files
bniedermeyerbniedermeyer
committed
feat: add transition for navbar and light/dark mode
1 parent ccb733b commit 17a393f

32 files changed

+805
-98
lines changed

‎.vscode/extensions.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"recommendations": [
33
"nrwl.angular-console",
44
"esbenp.prettier-vscode",
5-
"dbaeumer.vscode-eslint"
5+
"dbaeumer.vscode-eslint",
6+
"firsttris.vscode-jest-runner"
67
]
78
}

‎apps/brenden-dev/pages/_app.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AppProps } from 'next/app';
2-
import { Navbar, Banner } from '@libs/react/components';
2+
import { Banner } from '@libs/react/components';
33
import Head from 'next/head';
44
import Script from 'next/script';
55
import './styles.css';
@@ -10,7 +10,7 @@ function CustomApp({ Component, pageProps }: AppProps) {
1010
<Head>
1111
<title>Welcome to brenden-dev!</title>
1212
</Head>
13-
<main className="app bg-primary-light dark:bg-primary-dark">
13+
<main className="app transition-colors ease-in-out duration-300 bg-primary-light dark:bg-primary-dark">
1414
<Script
1515
id="dark-mode-script"
1616
dangerouslySetInnerHTML={{
@@ -25,7 +25,6 @@ function CustomApp({ Component, pageProps }: AppProps) {
2525
`,
2626
}}
2727
/>
28-
<Navbar />
2928
<Banner />
3029
<Component {...pageProps} />
3130
</main>

‎apps/brenden-dev/pages/index.tsx

+23-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,32 @@
11
import { Intro } from '../sections/intro/intro';
22
import { Info } from '../sections/info/info';
33
import { Skills } from '../sections/skills/skills';
4+
import { Navbar } from '@libs/react/components';
5+
import { useDocumentScrollThrottled } from '@libs/react/hooks';
6+
import { useState } from 'react';
47

58
export function Index() {
9+
const [displayNavbar, setDisplayNavbar] = useState(false);
10+
11+
const MINIMUM_SCROLL = 100;
12+
13+
useDocumentScrollThrottled(
14+
({ previousScrollTop, currentScrollTop }): void => {
15+
if (previousScrollTop !== currentScrollTop) {
16+
const isMinimumScrolled = currentScrollTop > MINIMUM_SCROLL;
17+
setDisplayNavbar(isMinimumScrolled);
18+
}
19+
}
20+
);
621
return (
7-
<div className="page h-screen">
8-
<Intro />
9-
<Info />
10-
<Skills />
11-
</div>
22+
<>
23+
<Navbar displayFull={displayNavbar} />
24+
<div className="page h-screen">
25+
<Intro />
26+
<Info />
27+
<Skills />
28+
</div>
29+
</>
1230
);
1331
}
1432

‎apps/brenden-dev/sections/info/info.module.css

-7
This file was deleted.

‎apps/brenden-dev/sections/info/info.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Image from 'next/image';
22
import { Card } from '@libs/react/components';
3-
import styles from './info.module.css';
43

54
/* eslint-disable-next-line */
65
export interface InfoProps {}

‎apps/brenden-dev/sections/intro/intro.module.css

-7
This file was deleted.

‎apps/brenden-dev/sections/intro/intro.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Image from 'next/image';
22
import speakingImage from '../../assets/speaking.jpg';
3-
import styles from './intro.module.css';
43

54
/* eslint-disable-next-line */
65
export interface IntroProps {}

‎apps/brenden-dev/sections/skills/skills.module.css

-7
This file was deleted.

‎apps/brenden-dev/sections/skills/skills.tsx

+28-25
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,58 @@
1-
import styles from './skills.module.css';
21
import Image from 'next/image';
32
/* eslint-disable-next-line */
43
export interface SkillsProps {}
54

5+
const ImageContainer = ({ children }): JSX.Element => {
6+
return <div className="relative aspect-square h-40">{children}</div>;
7+
};
8+
69
export function Skills(props: SkillsProps) {
710
return (
811
<section className="bg-primary-light dark:bg-primary-dark py-20 md:py-30">
912
<h1 className="text-3xl text-center text-primary dark:text-primary-light mb-10">
1013
I have experience building with
1114
</h1>
1215
<div className="grid grid-cols-2 md:grid-cols-3 gap-8 dark:invert place-items-center">
13-
<div className="relative aspect-square h-40">
16+
<ImageContainer>
1417
<Image src="/logos/react.png" alt="React" layout="fill" />
15-
</div>
16-
<div className="relative aspect-square h-40">
18+
</ImageContainer>
19+
<ImageContainer>
1720
<Image src="/logos/angular.png" alt="Angular" layout="fill" />
18-
</div>
19-
<div className="relative aspect-square h-40">
21+
</ImageContainer>
22+
<ImageContainer>
2023
<Image
2124
src="/logos/webcomponents.svg"
2225
alt="web components"
2326
layout="fill"
2427
/>
25-
</div>
26-
<div className="relative aspect-square h-40">
28+
</ImageContainer>
29+
<ImageContainer>
2730
<Image src="/logos/typescript.png" alt="typescript" layout="fill" />
28-
</div>
29-
<div className="relative aspect-square h-40">
31+
</ImageContainer>
32+
<ImageContainer>
3033
<Image src="/logos/nodejs.png" alt="nodejs" layout="fill" />
31-
</div>
32-
<div className="relative aspect-square h-40">
34+
</ImageContainer>
35+
<ImageContainer>
3336
<Image src="/logos/html5.png" alt="html5" layout="fill" />
34-
</div>
35-
<div className="relative aspect-square h-40">
37+
</ImageContainer>
38+
<ImageContainer>
3639
<Image src="/logos/rxjs.png" alt="rxjs" layout="fill" />
37-
</div>
38-
<div className="relative aspect-square h-40">
40+
</ImageContainer>
41+
<ImageContainer>
3942
<Image src="/logos/google.png" alt="google cloud" layout="fill" />
40-
</div>
41-
<div className="relative aspect-square h-40">
43+
</ImageContainer>
44+
<ImageContainer>
4245
<Image src="/logos/aws.png" alt="aws" layout="fill" />
43-
</div>
44-
<div className="relative aspect-square h-40">
46+
</ImageContainer>
47+
<ImageContainer>
4548
<Image src="/logos/terraform.png" alt="terraform" layout="fill" />
46-
</div>
47-
<div className="relative aspect-square h-40">
49+
</ImageContainer>
50+
<ImageContainer>
4851
<Image src="/logos/kubernetes.png" alt="kubernetes" layout="fill" />
49-
</div>
50-
<div className="relative aspect-square h-40">
52+
</ImageContainer>
53+
<ImageContainer>
5154
<Image src="/logos/sass.png" alt="sass" layout="fill" />
52-
</div>
55+
</ImageContainer>
5356
</div>
5457
</section>
5558
);

‎jest.config.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { getJestProjects } from '@nrwl/jest';
2+
3+
export default {
4+
projects: getJestProjects(),
5+
};

‎jest.preset.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const nxPreset = require('@nrwl/jest/preset').default;
2+
3+
module.exports = { ...nxPreset };

‎libs/react/components/src/lib/banner/banner.module.css

-7
This file was deleted.

‎libs/react/components/src/lib/banner/banner.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import styles from './banner.module.css';
2-
31
/* eslint-disable-next-line */
42
export interface BannerProps {}
53

‎libs/react/components/src/lib/card/card.module.css

-7
This file was deleted.

‎libs/react/components/src/lib/card/card.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import styles from './card.module.css';
2-
31
/* eslint-disable-next-line */
42
export interface CardProps {
53
url?: string;
@@ -14,7 +12,7 @@ export function Card({ url, title, children }: CardProps) {
1412
url
1513
? 'hover:scale-[1.02] transition-all motion-reduce:transition-none'
1614
: null
17-
} max-w-xs bg-primary dark:bg-primary-light rounded-md drop-shadow-md p-4 m-2`}
15+
} 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`}
1816
>
1917
{children && (
2018
<div className="relative aspect-auto flex flex-col items-center justify-center mb-8">

‎libs/react/components/src/lib/dark-mode-toggle/dark-mode-toggle.module.css

-7
This file was deleted.

‎libs/react/components/src/lib/navbar/navbar.module.css

-7
This file was deleted.

‎libs/react/components/src/lib/navbar/navbar.tsx

+29-6
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,44 @@
1+
import { useState, useEffect } from 'react';
12
import DarkModeToggle from '../dark-mode-toggle/dark-mode-toggle';
2-
import styles from './navbar.module.css';
33

44
/* eslint-disable-next-line */
5-
export interface NavbarProps {}
5+
export interface NavbarProps {
6+
displayFull?: boolean;
7+
}
8+
9+
export function Navbar({ displayFull = true }: NavbarProps) {
10+
const baseStyles =
11+
'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';
12+
const [styles, setStyles] = useState(baseStyles);
13+
14+
useEffect(() => {
15+
if (displayFull) {
16+
setStyles(
17+
`${baseStyles} shadow-xl transition-shadow duration-700 ease-in-out reduce-motion:transition-none`
18+
);
19+
} else {
20+
setStyles(baseStyles);
21+
}
22+
}, [displayFull]);
623

7-
export function Navbar(props: NavbarProps) {
824
return (
9-
<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">
25+
<header className={styles}>
1026
<div className="container flex flex-wrap justify-between items-center mx-auto">
11-
<a href="https://brenden.dev" className="flex items-center">
27+
<a
28+
href="https://brenden.dev"
29+
className={`flex items-center ${
30+
displayFull
31+
? 'opacity-100 transition-opacity duration-700 ease-in-out reduce-motion:transition-none'
32+
: 'transition-opacity opacity-0'
33+
}`}
34+
>
1235
<span className="self-center text-2xl text-primary-dark font-semibold whitespace-nowrap dark:text-secondary-dark">
1336
Brenden Niedermeyer
1437
</span>
1538
</a>
1639
<DarkModeToggle />
1740
</div>
18-
</nav>
41+
</header>
1942
);
2043
}
2144

‎libs/react/hooks/.babelrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"presets": [
3+
[
4+
"@nrwl/react/babel",
5+
{
6+
"runtime": "automatic",
7+
"useBuiltIns": "usage"
8+
}
9+
]
10+
],
11+
"plugins": []
12+
}

‎libs/react/hooks/.eslintrc.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7+
"rules": {}
8+
},
9+
{
10+
"files": ["*.ts", "*.tsx"],
11+
"rules": {}
12+
},
13+
{
14+
"files": ["*.js", "*.jsx"],
15+
"rules": {}
16+
}
17+
]
18+
}

‎libs/react/hooks/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# react-hooks
2+
3+
This library was generated with [Nx](https://nx.dev).
4+
5+
## Running unit tests
6+
7+
Run `nx test react-hooks` to execute the unit tests via [Jest](https://jestjs.io).

‎libs/react/hooks/jest.config.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
export default {
3+
displayName: 'react-hooks',
4+
preset: '../../../jest.preset.js',
5+
transform: {
6+
'^.+\\.[tj]sx?$': 'babel-jest',
7+
},
8+
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
9+
coverageDirectory: '../../../coverage/libs/react/hooks',
10+
};

‎libs/react/hooks/project.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
3+
"sourceRoot": "libs/react/hooks/src",
4+
"projectType": "library",
5+
"tags": [],
6+
"targets": {
7+
"lint": {
8+
"executor": "@nrwl/linter:eslint",
9+
"outputs": ["{options.outputFile}"],
10+
"options": {
11+
"lintFilePatterns": ["libs/react/hooks/**/*.{ts,tsx,js,jsx}"]
12+
}
13+
},
14+
"test": {
15+
"executor": "@nrwl/jest:jest",
16+
"outputs": ["coverage/libs/react/hooks"],
17+
"options": {
18+
"jestConfig": "libs/react/hooks/jest.config.ts",
19+
"passWithNoTests": true
20+
}
21+
}
22+
}
23+
}

‎libs/react/hooks/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './useDocumentScrollThrottled';

0 commit comments

Comments
 (0)