Refactor & stuff

components/footer.tsx

@@ -2,13 +2,32 @@ import Link from "next/link"
 import styled from 'styled-components'
 
 const Footer = styled.footer`
-	border-top: 1px dotted #aaa;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	border-top: var(--border-size) var(--border-type) var(--border-color); 
+	margin-top: auto;
+	padding: 1.2rem;
+
+	color: var(--fg-faded);
+`
+
+const UList = styled.ul`
+	display: flex;
+	flex-direction: row;
+	list-style: none;
+	gap: 2rem;
 `
 
 export default () => {
 	return (
 		<Footer>
-		<p>Footer</p>
+			<p>Copyright &copy; {new Date().getFullYear()} Elias Almqvist</p>
+			<UList>
+				<li><a href="" target="_blank">GitHub</a></li>
+				<li><a href="" target="_blank">Wych Git</a></li>
+			</UList>
 		</Footer>
 	)
 }

components/header.tsx

@@ -1,12 +1,16 @@
-import Link from "next/link"
 import styled from 'styled-components'
+import Nav from './nav'
 
 const Header = styled.header`
 	display: flex;
 	align-items: center;
-	max-width: 70rem;
-	padding: 0 4rem;
-	border-bottom: 1px dotted #aaa;
+	border-bottom: var(--border-size) var(--border-type) var(--border-color);
+	padding: var(--v-uni-padding) var(--h-uni-padding);
+
+	h1 {
+		font-size: 2rem;
+		font-weight: normal;
+	}
 
 	nav {
 		margin-left: auto;
@@ -14,29 +18,11 @@ const Header = styled.header`
 	}
 `
 
-const Nav = styled(Header).attrs({as: "nav"})`
-	gap: 1.5rem;
-	font-size: 1.5rem;
-	border: unset;
-
-	a {
-		transition: .2s opacity
-	}
-
-	a:hover {
-		opacity: .4;
-	}
-`
-
 export default () => {
 	return (
 		<Header>
 			<h1>wych.dev</h1>
-			<Nav>
-				<Link href="/">Home</Link>
-				<Link href="/projects">Projects</Link>
-				<a href="https://github.com/E-Almqvist" target="_blank">GitHub</a>
-			</Nav>
+			<Nav />
 		</Header>
 	)
 }

components/nav.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link"
+import styled from 'styled-components'
+
+const Nav = styled.nav`
+	display: flex;
+	gap: 1.5rem;
+	font-size: 1.2rem;
+	border: unset;
+
+	a {
+		color: var(--fg-button);
+		transition: .2s opacity;
+	}
+
+	a:hover {
+		opacity: .4;
+	}
+`
+
+export default () => {
+	return (
+		<Nav>
+			<Link href="/">Home</Link>
+			<Link href="/projects">Projects</Link>
+			<a href="https://github.com/E-Almqvist" target="_blank">GitHub</a>
+		</Nav>
+	)
+}

pages/index.tsx

@@ -4,7 +4,9 @@ import Layout from '../components/layout'
 
 const Page: NextPageWithLayout = () => {
 	return (
-		<p>yo</p>
+		<>
+			<p>I am a student with a passion for programming, physics/mathematics and *NIX (Linux, UNIX etc).</p>
+		</>
 	)
 }
 

styles/globals.css

@@ -1,19 +1,47 @@
 :root {
 	font-size: 16px;
-	color: #222;
+	--border-type: dotted;
+	--border-size: 1px;
+	--border-color: #ddd;
+	--border-radius: 1rem;
+
+	--content-max-width: 60rem;
+	--h-uni-padding: .8rem;
+	--v-uni-padding: .2rem;
+
+	--fg: #222;
+	--fg-faded: #aaa;
+	--fg-button: #0a070a;
+	--fg-link: #abf;
+
+	--bg: #fefeff;
+	color: var(--fg);
 }
 
-html, body {
+* {
+	box-sizing: border-box;
+	font-family: "IBM Plex Mono", monospace;
 	padding: 0;
 	margin: 0;
-  font-family: "IBM Plex Mono", monospace;
+}
+
+html {
+	background: var(--bg);
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	margin: 0 auto;
+	max-width: var(--content-max-width); 
 }
 
 a {
-  color: inherit;
+	color: var(--fg-link);
 	text-decoration: none;
 }
 
-* {
-  box-sizing: border-box;
+main {
+	min-height: 70vh;
 }
+