aaron/aaronjy-me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Layout and simplification

Browse source
This commit is contained in:
Aaron Yarborough 2024-03-08 22:06:41 +00:00
parent 0483ec0b93
commit 158e3cbec7
9 changed files with 105 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/Header.jsx
View file

@ -1,21 +0,0 @@
import Link from "next/link";
import React from "react";
function Header() {
return (
<header>
<nav>
<ul>
<li>
<Link href={"/"}>home</Link>
</li>
<li>
<Link href={"/writing"}>writing</Link>
</li>
</ul>
</nav>
</header>
);
}
export default Header;

18
src/components/Header/Header.jsx Normal file
View file

@ -0,0 +1,18 @@
import Link from "next/link";
import React from "react";
import styles from "./Header.module.css";
function Header() {
return (
<header className={styles.header}>
<nav>
<Link href={"/"}>home</Link>
<Link href={"/writing"}>writing</Link>
<Link href={"/cv"}>cv</Link>
</nav>
</header>
);
}
export default Header;

5
src/components/Header/Header.module.css Normal file
View file

@ -0,0 +1,5 @@
.header nav {
display: flex;
justify-content: center;
gap: 20px;
}

21
src/layouts/DefaultLayout/DefaultLayout.jsx Normal file
View file

@ -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 (
<div className={style.layout}>
<Header />
<main className={`${fontMain.className}`}>{children}</main>
<Footer />
</div>
);
}
export default DefaultLayout;

9
src/layouts/DefaultLayout/DefaultLayout.module.css Normal file
View file

@ -0,0 +1,9 @@
.layout {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
.layout main {
flex-grow: 1;
}

6
src/pages/_app.js
View file

@ -1,15 +1,13 @@
import "@/styles/tacit-css-1.7.1.min.css"; import "@/styles/tacit-css-1.7.1.min.css";
import "@/styles/globals.css"; import "@/styles/globals.css";
import { Merriweather } from "next/font/google";
import { DefaultSeo } from "next-seo"; import { DefaultSeo } from "next-seo";
const merriweather = Merriweather({ subsets: ["latin"], weight: [ "400", "700" ]});
export default function App({ Component, pageProps }) { export default function App({ Component, pageProps }) {
return <main className={merriweather.className}> return <>
<DefaultSeo defaultTitle="Aaron Yarborough" titleTemplate="%s | Aaron Yarborough"/> <DefaultSeo defaultTitle="Aaron Yarborough" titleTemplate="%s | Aaron Yarborough"/>
<Component {...pageProps} /> <Component {...pageProps} />
</main> </>
} }

89
src/pages/index.js
View file

@ -1,81 +1,66 @@
import Head from "next/head"; import Head from "next/head";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import ExternalLink from "@/components/ExternalLink"; import ExternalLink from "@/components/ExternalLink";
import DefaultLayout from "@/layouts/DefaultLayout/DefaultLayout";
export default function Home() { export default function Home() {
return ( return (
<> <DefaultLayout>
<Head> <Head>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Header />
<section> <section>
<h1>Hello!</h1> <h1>Hello!</h1>
</section>
<section>
<p> <p>
I&apos;m Aaron. I&apos;m a Brit living in Newcastle-upon-tyne, I&apos;m Aaron. I&apos;m a Brit living in Newcastle-upon-tyne, UK. I
UK. I work professionally as a Software Engineer and Tutor, and study work professionally as a Software Engineer and Tutor, and study
languages in my spare time. languages in my spare time.
</p> </p>
<p> <p>
This is my little corner of the web! I&apos;ve always had a terrible This is my little corner of the web! I&apos;ve always had a habit of
habit of &apos;lurking&apos; online; I barely interact with the &apos;lurking&apos; online; I barely interact with the content I
content I consume, and you&apos;ll rarely if ever catch me posting or consume, and you&apos;ll rarely if ever catch me posting or commenting
commenting on something. That said, this little site endeavours to on something. That said, this little site endeavours to pull me by my
pull me by my ankles out of the weeds in the great digital park we ankles out of the weeds in the great digital park we find ourselves,
find ourselves, and encourage me to share a bit more about myself and encourage me to share a bit more about myself online.
online.
</p> </p>
</section> </section>
<section> <section>
<h2>Where to find me</h2> <h2>Where to find me</h2>
<p>
I&apos;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!
</p>
<p> <ul>
<strong>Letterboxd</strong> is a social platform for film lovers to <li>
rate, review, and discover movies, akin to &quot;Goodreads for <strong>
film.&quot;
</p>
<p>
<ExternalLink href="https://letterboxd.com/aaronyarbz/"> <ExternalLink href="https://letterboxd.com/aaronyarbz/">
See what I&apos;ve watched recently. Letterboxd
</ExternalLink> </ExternalLink>
</p> </strong>{" "}
is a social platform for film lovers to rate, review, and discover
<p> movies, akin to &quot;Goodreads for film.&quot;
<strong>GitHub</strong> is a web-based platform for version control </li>
and collaboration on software development projects. Find out what <li>
I&apos;ve been working on here! <strong>
</p>
<p>
<ExternalLink href="https://github.com/AaronJY"> <ExternalLink href="https://github.com/AaronJY">
Check out what I&apos;ve been working on. GitHub
</ExternalLink> </ExternalLink>
</p> </strong>{" "}
is a web-based platform for version control and collaboration on
<p> software development projects. Find out what I&apos;ve been working
<strong>LinkedIn</strong> is possibly the <i>worst</i> social network. on here!
Specifically for professional stuff, I&apos;m only on here because I </li>
have to be 😩 <li>
</p> <strong>
<p>
<ExternalLink href="https://www.linkedin.com/in/aaronjyarborough/"> <ExternalLink href="https://www.linkedin.com/in/aaronjyarborough/">
Be creepy and stalk me on LinkedIn. LinkedIn
</ExternalLink> </ExternalLink>
</p> </strong>
, unfortunately. A social network for professionals.
</li>
</ul>
<p> {/* <p>
<strong>Yarbz Tutoring</strong> is my tutoring site. You can read a <strong>Yarbz Tutoring</strong> is my tutoring site. You can read a
bit more about my tutoring and general software develpment experience, bit more about my tutoring and general software develpment experience,
and book a class if it suits you. and book a class if it suits you.
@ -84,10 +69,8 @@ export default function Home() {
<ExternalLink href="https://tutoring.yarbz.digital"> <ExternalLink href="https://tutoring.yarbz.digital">
Read more about my tutoring side-gig. Read more about my tutoring side-gig.
</ExternalLink> </ExternalLink>
</p> </p> */}
</section> </section>
</DefaultLayout>
<Footer />
</>
); );
} }

2
src/pages/writing/index.js
View file

@ -1,5 +1,5 @@
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import Header from "@/components/Header"; import Header from "@/components/Header/Header";
export default function Writing() { export default function Writing() {
return ( return (

9
src/styles/globals.css
View file

@ -1,3 +1,8 @@
h1 { html, body {
margin-bottom: 70px; margin: 0;
padding: 0;
}
h1, h2, h3 {
font-weight: 600;
} }