Layout change

components/layout.tsx

@@ -9,7 +9,7 @@ const Layout = ({children}: {children: ReactNode}) => {
 			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 			<title>wych.dev</title>
 		</Head>
-		<Header />
+		{/*<Header />*/}
 		<main>{children}</main>
 		<Footer />
 	</>)

pages/index.tsx

@@ -1,7 +1,8 @@
-import type {NextPageWithLayout} from './_app'
+import type {NextPageWithLayout} from "./_app"
-import type { ReactElement } from 'react'
+import type { ReactElement } from "react"
-import Layout from '../components/layout'
+import Layout from "../components/layout"
-import styled from 'styled-components'
+import Nav from "../components/nav"
+import styled from "styled-components"
 import Link from "next/link"
 
 export const Section = styled.section`
@@ -9,7 +10,9 @@ export const Section = styled.section`
 	justify-content: center;
 	flex-direction: column;
 	padding: 0 1rem;
-	margin: 2rem 0;
+	/*margin: 2rem 0;*/
+	margin: 0 0;
+	height: 100vh;
 
 	h2, h3 {
 		margin: 8px 0;
@@ -20,6 +23,10 @@ export const Section = styled.section`
 		color: var(--fg);
 	}
 
+	.topmargin {
+		margin-top: 2rem;
+	}
+
 	ul li {
 		margin: .5rem 2.5rem;	
 	}
@@ -49,13 +56,11 @@ const Page: NextPageWithLayout = () => {
 	return (
 		<>
 			<Section> 
-				<h2 id="about">About</h2> 
+				<h2 id="about">$ whoami</h2> 
-				<p>I am a <em>Computer Science & Engineering student</em> with a passion for <em>programming</em>, <em>physics</em>, <em>mathematics</em> and anything <em>*NIX</em> <Nem>(Linux, UNIX etc)</Nem> related.</p>
+				<p>&gt; I am a <em>Computer Science & Engineering student</em> with a passion for <em>programming</em>, <em>physics</em>, <em>mathematics</em> and anything <em>*NIX</em> <Nem>(Linux, UNIX etc)</Nem> related.</p>
 				{/*TODO: Add GitHub code frequency/contrib here*/}
-			</Section> 
+				<p className="topmargin">Most of my projects are open-source, and if you are interested, you can find all of my projects on my <a href="https://git.wych.dev" target="_blank" rel="noreferrer">git-server</a> or <a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">GitHub</a>. You can also check out <Link href="/projects">/projects</Link> to view all of my projects (including hardware projects and so on).</p> 
-
+				<Nav />
-			<Section> 
-				<p>Most of my projects are open-source, and if you are interested, you can find all of my projects on my <a href="https://git.wych.dev" target="_blank" rel="noreferrer">git-server</a> or <a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">GitHub</a>. You can also check out <Link href="/projects">/projects</Link> to view all of my projects (including hardware projects and so on).</p> 
 			</Section> 
 
 			<Section>

styles/globals.css

@@ -2,25 +2,25 @@
 	font-size: 16px;
 	--border-type: solid;
 	--border-size: 1px;
-	--border-color: #373a44;
+	--border-color: var(--fg-faded);
 	--border-radius: 1rem;
 
 	--content-max-width: 60rem;
 	--h-uni-padding: .8rem;
 	--v-uni-padding: .2rem;
 
-	--fg: #bbc2cf;
+	--fg: #ebdbb2;
 	color: var(--fg);
-	--fg-emph: #fff;
+	--fg-emph: #fbebe2;
-	--fg-faded: #aaa;
+	--fg-faded: #928373;
 	--fg-button: var(--fg-faded);
-	--fg-link: #abf;
+	--fg-link: #88aaa3;
 	--fg-code: #ffbe85;
 	--fg-gold: #fff190;
 	--emph-shadow: 0 0 1px;
 
-	--bg: #272a34;
+	--bg: #1d2021;
-	--bg-dark: #21242b; 
+	--bg-dark: #282828; 
 
 	--trans-time: .2s;
 }