From 93e05bdeb96596598c4270b30442ae249c1fdbd6 Mon Sep 17 00:00:00 2001 From: Fritz Benning Date: Mon, 13 Feb 2023 17:54:49 +0100 Subject: [PATCH] feat: add tree animation --- app/globals.css | 14 ++++++++++++++ app/layout.js | 16 +++++++++------- app/page.js | 10 +--------- app/page.module.css | 13 ------------- app/party/page.js | 7 +++++++ app/tree/page.js | 7 +++++++ components/Nav/index.js | 22 ++++++++++++++++++++++ components/Nav/styles.module.css | 24 ++++++++++++++++++++++++ public/animations/tree.riv | Bin 0 -> 11083 bytes 9 files changed, 84 insertions(+), 29 deletions(-) delete mode 100644 app/page.module.css create mode 100644 app/party/page.js create mode 100644 app/tree/page.js create mode 100644 components/Nav/index.js create mode 100644 components/Nav/styles.module.css create mode 100644 public/animations/tree.riv diff --git a/app/globals.css b/app/globals.css index ae8973b..ec99b9b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,17 @@ body { height: 100vh; } + +.main { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + position: relative; +} + +.animation { + width: min(72%, 480px); + aspect-ratio: 1 / 1; +} diff --git a/app/layout.js b/app/layout.js index fca8f5b..2c2b44e 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,14 +1,16 @@ -import './globals.css' +import Nav from "@/components/Nav"; +import "./globals.css"; export default function RootLayout({ children }) { return ( - {/* - will contain the components returned by the nearest parent - head.js. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head - */} - {children} + +
+
{children}
+
+ - ) + ); } diff --git a/app/page.js b/app/page.js index 31373e8..284927b 100644 --- a/app/page.js +++ b/app/page.js @@ -1,13 +1,5 @@ "use client"; -import Rive from "@rive-app/react-canvas"; -import styles from "./page.module.css"; export default function RivLab() { - return ( -
-
- -
-
- ); + return <>Hallo; } diff --git a/app/page.module.css b/app/page.module.css deleted file mode 100644 index 235c5a3..0000000 --- a/app/page.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.main { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; -} - -.animation { - width: 30vw; - height: 30vw; - transform: rotate(45deg); -} diff --git a/app/party/page.js b/app/party/page.js new file mode 100644 index 0000000..8df7a66 --- /dev/null +++ b/app/party/page.js @@ -0,0 +1,7 @@ +"use client"; + +import Rive from "@rive-app/react-canvas"; + +export default function Tree() { + return ; +} diff --git a/app/tree/page.js b/app/tree/page.js new file mode 100644 index 0000000..5a67751 --- /dev/null +++ b/app/tree/page.js @@ -0,0 +1,7 @@ +"use client"; + +import Rive from "@rive-app/react-canvas"; + +export default function Tree() { + return ; +} diff --git a/components/Nav/index.js b/components/Nav/index.js new file mode 100644 index 0000000..2b9ddca --- /dev/null +++ b/components/Nav/index.js @@ -0,0 +1,22 @@ +"use client"; +import Link from "next/link"; +import styles from "./styles.module.css"; + +export default function Nav() { + return ( + + ); +} diff --git a/components/Nav/styles.module.css b/components/Nav/styles.module.css new file mode 100644 index 0000000..c064223 --- /dev/null +++ b/components/Nav/styles.module.css @@ -0,0 +1,24 @@ +.navigation { + position: absolute; + bottom: 10vh; + left: 50%; + transform: translate(-50%, 0); +} + +.list { + list-style-type: none; + display: flex; + margin: 0; + padding: 0; +} + +.item { + font-family: sans-serif; + font-size: 1.2rem; + padding: 0 2rem; +} + +.link { + text-decoration: none; + color: #cccccc; +} diff --git a/public/animations/tree.riv b/public/animations/tree.riv new file mode 100644 index 0000000000000000000000000000000000000000..ad367c98bb0937c8510eb17d538024d286fdf343 GIT binary patch literal 11083 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