From 158e3cbec70504dbe96b286d5ae3bfe9f1fe1f82 Mon Sep 17 00:00:00 2001 From: Aaron Yarborough Date: Fri, 8 Mar 2024 22:06:41 +0000 Subject: [PATCH] Layout and simplification --- src/components/Header.jsx | 21 ---- src/components/Header/Header.jsx | 18 ++++ src/components/Header/Header.module.css | 5 + src/layouts/DefaultLayout/DefaultLayout.jsx | 21 ++++ .../DefaultLayout/DefaultLayout.module.css | 9 ++ src/pages/_app.js | 6 +- src/pages/index.js | 101 ++++++++---------- src/pages/writing/index.js | 2 +- src/styles/globals.css | 9 +- 9 files changed, 105 insertions(+), 87 deletions(-) delete mode 100644 src/components/Header.jsx create mode 100644 src/components/Header/Header.jsx create mode 100644 src/components/Header/Header.module.css create mode 100644 src/layouts/DefaultLayout/DefaultLayout.jsx create mode 100644 src/layouts/DefaultLayout/DefaultLayout.module.css diff --git a/src/components/Header.jsx b/src/components/Header.jsx deleted file mode 100644 index d210acc..0000000 --- a/src/components/Header.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import Link from "next/link"; -import React from "react"; - -function Header() { - return ( -
- -
- ); -} - -export default Header; diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx new file mode 100644 index 0000000..dd6cf83 --- /dev/null +++ b/src/components/Header/Header.jsx @@ -0,0 +1,18 @@ +import Link from "next/link"; +import React from "react"; + +import styles from "./Header.module.css"; + +function Header() { + return ( +
+ +
+ ); +} + +export default Header; diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css new file mode 100644 index 0000000..5516f92 --- /dev/null +++ b/src/components/Header/Header.module.css @@ -0,0 +1,5 @@ +.header nav { + display: flex; + justify-content: center; + gap: 20px; +} diff --git a/src/layouts/DefaultLayout/DefaultLayout.jsx b/src/layouts/DefaultLayout/DefaultLayout.jsx new file mode 100644 index 0000000..38ee60e --- /dev/null +++ b/src/layouts/DefaultLayout/DefaultLayout.jsx @@ -0,0 +1,21 @@ +import React from "react"; + +import style from "./DefaultLayout.module.css"; +import Header from "@/components/Header/Header"; +import Footer from "@/components/Footer"; + +import {Barlow} from "next/font/google"; + +const fontMain = Barlow({ subsets: ["latin"], weight: [ "400", "600" ]}); + +function DefaultLayout({ children }) { + return ( +
+
+
{children}
+
+
+ ); +} + +export default DefaultLayout; diff --git a/src/layouts/DefaultLayout/DefaultLayout.module.css b/src/layouts/DefaultLayout/DefaultLayout.module.css new file mode 100644 index 0000000..3a2e8ac --- /dev/null +++ b/src/layouts/DefaultLayout/DefaultLayout.module.css @@ -0,0 +1,9 @@ +.layout { + display: flex; + flex-direction: column; + min-height: 100dvh; +} + +.layout main { + flex-grow: 1; +} \ No newline at end of file diff --git a/src/pages/_app.js b/src/pages/_app.js index b47e352..995fc27 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,15 +1,13 @@ import "@/styles/tacit-css-1.7.1.min.css"; import "@/styles/globals.css"; -import { Merriweather } from "next/font/google"; import { DefaultSeo } from "next-seo"; -const merriweather = Merriweather({ subsets: ["latin"], weight: [ "400", "700" ]}); export default function App({ Component, pageProps }) { - return
+ return <> -
+ } diff --git a/src/pages/index.js b/src/pages/index.js index 48ef717..2ca23ee 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,81 +1,66 @@ import Head from "next/head"; -import Footer from "@/components/Footer"; -import Header from "@/components/Header"; import ExternalLink from "@/components/ExternalLink"; +import DefaultLayout from "@/layouts/DefaultLayout/DefaultLayout"; export default function Home() { return ( - <> + -
-

Hello!

-
- -

- I'm Aaron. I'm a Brit living in Newcastle-upon-tyne, - UK. I work professionally as a Software Engineer and Tutor, and study + I'm Aaron. I'm a Brit living in Newcastle-upon-tyne, UK. I + work professionally as a Software Engineer and Tutor, and study languages in my spare time.

- This is my little corner of the web! I've always had a terrible - habit of 'lurking' online; I barely interact with the - content I consume, and you'll rarely if ever catch me posting or - commenting on something. That said, this little site endeavours to - pull me by my ankles out of the weeds in the great digital park we - find ourselves, and encourage me to share a bit more about myself - online. + This is my little corner of the web! I've always had a habit of + 'lurking' online; I barely interact with the content I + consume, and you'll rarely if ever catch me posting or commenting + on something. That said, this little site endeavours to pull me by my + ankles out of the weeds in the great digital park we find ourselves, + and encourage me to share a bit more about myself online.

Where to find me

-

- I'm not a massive fan of social media, and prefer to keep my - digital footprint as small as possible. That said, you can find me in - the following places! -

-

- Letterboxd is a social platform for film lovers to - rate, review, and discover movies, akin to "Goodreads for - film." -

-

- - See what I've watched recently. - -

+
    +
  • + + + Letterboxd + + {" "} + is a social platform for film lovers to rate, review, and discover + movies, akin to "Goodreads for film." +
    • +
  • + + + GitHub + + {" "} + is a web-based platform for version control and collaboration on + software development projects. Find out what I've been working + on here! +
    • +
  • + + + LinkedIn + + + , unfortunately. A social network for professionals. +
    • +
-

- GitHub is a web-based platform for version control - and collaboration on software development projects. Find out what - I've been working on here! -

-

- - Check out what I've been working on. - -

- -

- LinkedIn is possibly the worst social network. - Specifically for professional stuff, I'm only on here because I - have to be 😩 -

-

- - Be creepy and stalk me on LinkedIn. - -

- -

+ {/*

Yarbz Tutoring is my tutoring site. You can read a bit more about my tutoring and general software develpment experience, and book a class if it suits you. @@ -84,10 +69,8 @@ export default function Home() { Read more about my tutoring side-gig. -

+

*/}
- -