diff --git a/package.json b/package.json index f3f66b4..c7e859d 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,12 @@ "homepage": "https://github.com/loxygenK/f4n.dev#readme", "dependencies": { "@svgr/webpack": "^5.5.0", + "@types/react-transition-group": "^4.4.3", "@types/webpack-dev-middleware": "^5.0.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.3.0", + "react-transition-group": "^4.4.2", "ress": "^4.0.0", "webpack-dev-middleware": "^5.2.1" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0669c0e..c737535 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,6 +13,7 @@ specifiers: '@types/react': ^17.0.20 '@types/react-dom': ^17.0.9 '@types/react-router-dom': ^5.3.0 + '@types/react-transition-group': ^4.4.3 '@types/sass': ^1.16.1 '@types/webpack': ^5.28.0 '@types/webpack-dev-middleware': ^5.0.2 @@ -31,6 +32,7 @@ specifiers: react: ^17.0.2 react-dom: ^17.0.2 react-router-dom: ^5.3.0 + react-transition-group: ^4.4.2 ress: ^4.0.0 sass: ^1.39.0 sass-loader: ^12.1.0 @@ -47,10 +49,12 @@ specifiers: dependencies: '@svgr/webpack': 5.5.0 + '@types/react-transition-group': 4.4.3 '@types/webpack-dev-middleware': 5.0.2_webpack-cli@4.8.0 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 react-router-dom: 5.3.0_react@17.0.2 + react-transition-group: 4.4.2_react-dom@17.0.2+react@17.0.2 ress: 4.0.0 webpack-dev-middleware: 5.2.1_webpack@5.52.0 @@ -1568,7 +1572,6 @@ packages: /@types/prop-types/15.7.4: resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==} - dev: true /@types/q/1.5.5: resolution: {integrity: sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==} @@ -1603,13 +1606,18 @@ packages: '@types/react': 17.0.20 dev: true + /@types/react-transition-group/4.4.3: + resolution: {integrity: sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==} + dependencies: + '@types/react': 17.0.20 + dev: false + /@types/react/17.0.20: resolution: {integrity: sha512-wWZrPlihslrPpcKyCSlmIlruakxr57/buQN1RjlIeaaTWDLtJkTtRW429MoQJergvVKc4IWBpRhWw7YNh/7GVA==} dependencies: '@types/prop-types': 15.7.4 '@types/scheduler': 0.16.2 csstype: 3.0.8 - dev: true /@types/retry/0.12.1: resolution: {integrity: sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==} @@ -1623,7 +1631,6 @@ packages: /@types/scheduler/0.16.2: resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} - dev: true /@types/serve-index/1.9.1: resolution: {integrity: sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==} @@ -2644,7 +2651,6 @@ packages: /csstype/3.0.8: resolution: {integrity: sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==} - dev: true /debug/2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} @@ -2802,6 +2808,13 @@ packages: utila: 0.4.0 dev: true + /dom-helpers/5.2.1: + resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} + dependencies: + '@babel/runtime': 7.15.4 + csstype: 3.0.8 + dev: false + /dom-serializer/0.2.2: resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==} dependencies: @@ -5009,6 +5022,20 @@ packages: tiny-warning: 1.0.3 dev: false + /react-transition-group/4.4.2_react-dom@17.0.2+react@17.0.2: + resolution: {integrity: sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==} + peerDependencies: + react: '>=16.6.0' + react-dom: '>=16.6.0' + dependencies: + '@babel/runtime': 7.15.4 + dom-helpers: 5.2.1 + loose-envify: 1.4.0 + prop-types: 15.7.2 + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + dev: false + /react/17.0.2: resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} engines: {node: '>=0.10.0'} diff --git a/src/App.tsx b/src/App.tsx index 61ffc25..192cf5a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { AppRouter } from "./pages/Router"; +import { AppRouter } from "./pages/router/Router"; export const App = () => ; diff --git a/src/comps/shared/LogoImage.module.scss b/src/comps/shared/LogoImage.module.scss index 73dd27d..e0ad620 100644 --- a/src/comps/shared/LogoImage.module.scss +++ b/src/comps/shared/LogoImage.module.scss @@ -8,14 +8,16 @@ $pcpc-range: 10deg; width: 100%; text-align: center; - animation: 1.5s ease-out text-appear; + animation: + 1.5s 0.75s ease-out text-appear-scale, + 0.75s 0.75s ease-out text-appear-opacity; mask[id="masker"] path { stroke: rgb(255, 255, 255); stroke-dasharray: 31; stroke-dashoffset: 31; - animation: 4.5s $masking-ease anim forwards; + animation: 4.5s 0.75s $masking-ease anim forwards; } g[id="main-text"] { @@ -28,9 +30,9 @@ $pcpc-range: 10deg; transform: scale(1, 0.25); animation: - 0.8s 0.35s $catear-appear-ease forwards appear, - 0.75s 1.10s $catear-pcpc-ease forwards prepare-for-pcpc, - 1.5s 1.85s $catear-pcpc-ease alternate infinite pcpc; + 0.8s 1.35s $catear-appear-ease forwards appear, + 0.75s 2.10s $catear-pcpc-ease forwards prepare-for-pcpc, + 1.5s 2.85s $catear-pcpc-ease alternate infinite pcpc; } g[id="hover-extend"] { @@ -62,8 +64,13 @@ $pcpc-range: 10deg; to { transform: skewX(-$pcpc-range)} } - @keyframes text-appear { - from { transform: scale(1.1); opacity: 0%; } - to { transform: scale(1); opacity: 100%; } + @keyframes text-appear-scale { + from { transform: scale(1.1); } + to { transform: scale(1); } + } + + @keyframes text-appear-opacity { + from { opacity: 0%; } + to { opacity: 100%; } } } diff --git a/src/comps/shared/SimpleButton.module.scss b/src/comps/shared/SimpleButton.module.scss index 305016f..97bd982 100644 --- a/src/comps/shared/SimpleButton.module.scss +++ b/src/comps/shared/SimpleButton.module.scss @@ -1,13 +1,47 @@ @use "~/styling/animation.module.scss"; @use "~/styling/color.module.scss"; +$skew_original: -15deg; + .wrapper { + position: relative; + padding: 0.5em 1.5em; + overflow: hidden; border: 2px solid color.get-theme-color(text-color-accent-primary); line-height: 100%; - vertical-align: center; + vertical-align: middle; + + transition: 0.2s all; + + &:before { + position: absolute; + top: 0; + left: 0; + + z-index: -1; + content: ""; + width: 110%; + height: 100%; + background: color.get-theme-color(background-alt); + transform-origin: right top; + transform: skewX($skew_original) scale(0, 1); + transition: 0.4s transform; + } + + &:hover { + transform: scale(1.10); + + &:before { + transform-origin: left top; + transform: skewX($skew_original) scale(1, 1); + } + } + + &:active { + transform: scale(1.05); + } - @include animation.hover; @include animation.click; } diff --git a/src/comps/shared/SimpleButton.tsx b/src/comps/shared/SimpleButton.tsx index 3e34154..6abf39c 100644 --- a/src/comps/shared/SimpleButton.tsx +++ b/src/comps/shared/SimpleButton.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { Link } from "react-router-dom"; import styles from "./SimpleButton.module.scss"; export type SimpleButtonProps = { @@ -6,7 +7,7 @@ export type SimpleButtonProps = { linkTo: string; }; export const SimpleButton = ({ caption, linkTo }: SimpleButtonProps) => ( - + {caption} - + ); diff --git a/src/comps/style/transition/TransitionAnimator.module.scss b/src/comps/style/transition/TransitionAnimator.module.scss new file mode 100644 index 0000000..7535664 --- /dev/null +++ b/src/comps/style/transition/TransitionAnimator.module.scss @@ -0,0 +1,70 @@ +@use "~/styling/color.module.scss"; + +%transition-base { + position: fixed; + z-index: 1; + + &:before { + transition: all 750ms; + + position: absolute; + top: 0; + left: 0; + z-index: 1; + + content: ""; + width: 170%; + height: 170%; + background-color: color.get-theme-color(background-alt); + } +} + +.transition-enter { + @extend %transition-base; + + &:before { + transition-delay: 650ms; + + transform-origin: right top; + transform: skewX(-15deg) scale(1, 1); + } +} + +.transition-enter-active { + @extend %transition-base; + + &:before { + transition-delay: 650ms; + + transform-origin: right top; + transform: skewX(-15deg) scale(0, 1); + } +} + +.transition-exit { + @extend %transition-base; + + &:before { + transform-origin: left top; + transform: skewX(-15deg) scale(0, 1); + } +} + +.transition-exit-active { + @extend %transition-base; + + &:before { + transform-origin: left top; + transform: skewX(-15deg) scale(1, 1); + } +} + +.transition-exit-done { + @extend %transition-base; + + &:before { + transform-origin: left top; + transform: skewX(-30deg) scale(0, 1); + } +} + diff --git a/src/comps/style/transition/TransitionAnimator.tsx b/src/comps/style/transition/TransitionAnimator.tsx new file mode 100644 index 0000000..79f138c --- /dev/null +++ b/src/comps/style/transition/TransitionAnimator.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { useLocation } from "react-router-dom"; +import { TransitionGroup, CSSTransition } from "react-transition-group"; +import { CSSTransitionClassNames } from "react-transition-group/CSSTransition"; + +import styles from "./TransitionAnimator.module.scss"; + +const transitionClassNames: CSSTransitionClassNames = { + enter: styles.transitionEnter, + enterActive: styles.transitionEnterActive, + exit: styles.transitionExit, + exitActive: styles.transitionExitActive, + exitDone: styles.transitionExitDone, +}; + +export type TransitionAnimatorProps = { + children: React.ReactNode; +}; + +export const TransitionAnimator = ({ children }: TransitionAnimatorProps) => { + const location = useLocation(); + + console.log(location.pathname); + + return ( + + + {children} + + + ); +}; diff --git a/src/pages/Router.tsx b/src/pages/Router.tsx deleted file mode 100644 index 3375322..0000000 --- a/src/pages/Router.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import { BrowserRouter, Route, Switch } from "react-router-dom"; -import { ContentWrapper } from "~/comps/layout/CotentWrapper"; -import { Main } from "./main/Main"; -import { Splash } from "./splash/Splash"; - -export const AppRouter = () => ( - - - - - - - - -); diff --git a/src/pages/main/Main.module.scss b/src/pages/main/Main.module.scss index b1f3d7d..0723c5c 100644 --- a/src/pages/main/Main.module.scss +++ b/src/pages/main/Main.module.scss @@ -11,13 +11,13 @@ display: grid; grid-auto-flow: column; - grid-auto-columns: fix-content; - grid-gap: 3em; + grid-auto-columns: max-content; + grid-gap: 2em; justify-content: center; width: 100%; - animation: 1s 1s both appear; + animation: 1s 1.5s both appear; } .logoImage { diff --git a/src/pages/router/Router.tsx b/src/pages/router/Router.tsx new file mode 100644 index 0000000..95890ba --- /dev/null +++ b/src/pages/router/Router.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { BrowserRouter, Route, Switch, useLocation } from "react-router-dom"; +import { ContentWrapper } from "~/comps/layout/CotentWrapper"; +import { TransitionAnimator } from "~/comps/style/transition/TransitionAnimator"; +import { routingTable } from "./routing"; + +export const InternalAppRouter = () => { + const location = useLocation(); + + return ( + + + + {routingTable.map((r, i) => ( + + ))} +
Hello!
} /> + + + + ); +}; + +export const AppRouter = () => { + return ( + + + + ); +}; diff --git a/src/pages/router/routing.ts b/src/pages/router/routing.ts new file mode 100644 index 0000000..7dbc9d0 --- /dev/null +++ b/src/pages/router/routing.ts @@ -0,0 +1,8 @@ +import { RouteProps } from "react-router-dom"; +import { Splash } from "~/pages/splash/Splash"; +import { Main } from "~/pages/main/Main"; + +export const routingTable: RouteProps[] = [ + { path: "/", component: Splash, exact: true }, + { path: "/me", component: Main, exact: true }, +]; diff --git a/src/pages/splash/Splash.module.scss b/src/pages/splash/Splash.module.scss index 3d01cff..f929c66 100644 --- a/src/pages/splash/Splash.module.scss +++ b/src/pages/splash/Splash.module.scss @@ -6,7 +6,7 @@ @include layout.extendAbsolutely; overflow: clip; - background-color: color.get-theme-color(background); + background-color: color.get-theme-color(background-alt); } .splash{ diff --git a/src/styling/animation.module.scss b/src/styling/animation.module.scss index 3aaf690..65529ff 100644 --- a/src/styling/animation.module.scss +++ b/src/styling/animation.module.scss @@ -7,8 +7,6 @@ } @mixin click($duration: 0.2s, $scale: 1.05) { - transition: $duration all; - &:active { transform: scale($scale); }