Content refactor & spacer for the footer

components/footer.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link"
 import styled from 'styled-components'
+import Link from "next/link"
 
 const Footer = styled.footer`
 	display: flex;
@@ -20,14 +20,26 @@ const UList = styled.ul`
 	gap: 2rem;
 `
 
+const Spacer = styled.div`
+	flex: 1;
+`
+
 export default () => {
 	return (
-		<Footer>
+		<>
-			<p>Copyright &copy; {new Date().getFullYear()} Elias Almqvist</p>
+			<Spacer />
-			<UList>
+			<Footer>
-				<li><a href="" target="_blank">GitHub</a></li>
+				<p>Copyright &copy; {new Date().getFullYear()} Elias Almqvist</p>
-				<li><a href="" target="_blank">Wych Git</a></li>
+				<UList>
-			</UList>
+					<li><a href="#">{"<Back to top>"}</a></li>
-		</Footer>
+					<li><Link href="/">{"<Go back home>"}</Link></li>
+				</UList>
+				<p>Source Code</p>
+				<UList>
+					<li><a href="https://github.com/E-Almqvist/wychdev-nextjs" target="_blank">GitHub</a></li>
+					<li><a href="https://git.wych.dev/wychdev-nextjs.git" target="_blank">WychGit</a></li>
+				</UList>
+			</Footer>
+		</>
 	)
 }

components/layout.tsx

@@ -5,7 +5,7 @@ import {ReactNode} from 'react'
 export default ({children}: {children: ReactNode}) => {
 	return <>
 		<Header />
-		<main>{children}</main>
+			<main>{children}</main>
 		<Footer />
 	</>
 }

components/nav.tsx

@@ -20,9 +20,11 @@ const Nav = styled.nav`
 export default () => {
 	return (
 		<Nav>
-			<ActiveLink href="/">Home</ActiveLink>
+			<ActiveLink href="/">About</ActiveLink>
+			<ActiveLink href="/#contact">Contact</ActiveLink>
 			<ActiveLink href="/projects">Projects</ActiveLink>
 			<a href="https://github.com/E-Almqvist" target="_blank">GitHub</a>
+			<a href="https://git.wych.dev">WychGit</a>
 		</Nav>
 	)
 }

pages/index.tsx

@@ -4,14 +4,14 @@ import Layout from '../components/layout'
 import styled from 'styled-components'
 import Link from "next/link"
 
-const Section = styled.section`
+export const Section = styled.section`
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
 	padding: 0 1rem;
 	margin: 2rem 0;
 
-	h2 {
+	h2, h3 {
 		margin: 8px 0;
 	}
 
@@ -19,16 +19,26 @@ const Section = styled.section`
 		margin: 0;
 		color: var(--fg);
 	}
+
+	ul li {
+		margin: .5rem 2.5rem;	
+	}
+`
+
+export const Gold = styled.em`
+	color: var(--fg-gold);
+	font-weight: normal;
+	text-shadow: var(--emph-shadow) var(--fg-gold);
 `
 
-const Code = styled.code`
+export const Code = styled.code`
 	background-color: var(--bg-dark);
 	color: var(--fg-code);
 	border-radius: .4rem;
 	padding: .1rem .4rem;
 `
 
-const CList = styled.code`
+export const CList = styled.code`
 	list-style: none;
 
 	li {
@@ -36,17 +46,64 @@ const CList = styled.code`
 	}
 `
 
+export const Nem = styled.span`
+	color: var(--fg-faded);
+	opacity: .8;
+`
+
 const Page: NextPageWithLayout = () => {
 	return (
 		<>
+			<Section> 
+				<h2 id="about">About</h2> 
+				<p>I am a full-stack developer <Nem>(58% backend / 42% frontend ish)</Nem> with a passion for <Gold>programming</Gold>, <Gold>physics</Gold>, <Gold>mathematics</Gold> and anything <Gold>*NIX</Gold> (Linux, UNIX etc) related.</p> 
+			</Section> 
+
+			<Section> 
+				<h2>Projects</h2> 
+				<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">git-server</a> or <a href="https://github.com/E-Almqvist" target="_blank">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>
-				<h2 id="about">About</h2>
+				<h2 id="skills">Skills</h2>
-				<p>I am a student with a passion for programming, physics, mathematics and *NIX (Linux, UNIX etc). </p>
+				<p>Here are programming languages/technologies that I know/use (<em>not limited to or ranked in any particular order</em>):</p>
+				<h3>Languages</h3>
+				<ul>
+					<li>C/C++</li>
+					<li>Rust</li>
+					<li>Python</li>
+					<li>TypeScript/JavaScript</li>
+					<li>Lua Script</li>
+					<li>Ruby</li>
+					<li>Assembly (NASM)</li>
+					<li>Bash</li>
+					<li>C#</li>
+				</ul>
+
+				<h3>Technologies</h3>
+				<ul>
+					<li>Next.js (+ React)</li>
+					<li>HTML + CSS/SASS/SCSS</li>
+					<li>Docker</li>
+					<li>
+						GNU/Linux
+						<ul>
+							<li>Arch</li>
+							<li>Ubuntu (Server)</li>
+							<li>Debian</li>
+							<li>Alpine</li>
+						</ul>
+					</li>
+					<li>Git</li>
+					<li>Jira</li>
+					<li>SSH</li>
+					<li>NGINX</li>
+				</ul>
 			</Section>
 
 			<Section>
 				<h2 id="contact">Contact</h2>
-				<p>You can contact me through email. And if you prefer it, you can contact me using PGP. Do note that my <em>email address below is encrypted</em> as a precaution for bots et cetera. Do not worry, it is easy to crack. Alternatively you could search for my PGP fingerprint on some key server (i.e. <a href="https://pgp.mit.edu/" target="_blank">MIT</a>, <a href="https://keyserver.ubuntu.com/" target="_blank">Ubuntu</a>) as my email is "connected" to it.</p>
+				<p>You can contact me through email. And if you prefer it, you can contact me using PGP. Do note that my <em>email address below is encrypted</em> as a precaution against bots et cetera. <em>Do not worry, it is easy to crack</em>. Alternatively you could query for my email with my PGP fingerprint (key-id) on some PGP key server (i.e. the <a href="https://pgp.mit.edu/" target="_blank">MIT</a> or <a href="https://keyserver.ubuntu.com/" target="_blank">Ubuntu</a> key-server).</p>
 				<CList>
 					<li>
 						PGP Fingerprint: <Code>68B2976849F03C7238AEB081E31A99CE3E75A158</Code>
@@ -59,11 +116,6 @@ const Page: NextPageWithLayout = () => {
 					</li>
 				</CList>
 			</Section>
-
-			<Section>
-				<h2>Projects</h2>
-				<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://github.com/E-Almqvist">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>
 		</>
 	)
 }

pages/projects.tsx

@@ -1,11 +1,17 @@
 import type {NextPageWithLayout} from './_app'
 import type { ReactElement } from 'react'
 import Layout from '../components/layout'
+import { Section } from './index'
+import Link from "next/link"
 
 const Page: NextPageWithLayout = () => {
 	return (
 		<>
-			<h1>yo, projects here</h1>
+			<Section>
+				<h2>Page under development...</h2>
+				<p>While you wait, why not check out my <a href="https://github.com/E-Almqvist">GitHub</a>? Or perhaps my very own <a href="https://git.wych.dev">git-server</a>?</p>
+				<p>Or you could also <Link href="/">go back</Link> to the home page.</p>
+			</Section>
 		</>
 	)
 }

styles/globals.css

@@ -16,9 +16,11 @@
 	--fg-button: var(--fg-faded);
 	--fg-link: #abf;
 	--fg-code: #ffbe85;
+	--fg-gold: #fff190;
+	--emph-shadow: 0 0 4px;
 
 	--bg: #272a34;
-	--bg-dark: #161f27; 
+	--bg-dark: #21242b; 
 
 	--trans-time: .2s;
 }
@@ -34,11 +36,12 @@ html {
 	background: var(--bg);
 }
 
-body {
+#__next { /*body*/
 	display: flex;
 	flex-direction: column;
 	margin: 0 auto;
 	max-width: var(--content-max-width); 
+	min-height: 100vh;
 }
 
 a {
@@ -54,8 +57,13 @@ a:hover {
 h1, h2, h3, h4, h5, em {
 	color: var(--fg-emph);
 }
+
 p {
 	margin: .5rem 0;
 }
 
-
+em {
+	font-weight: normal;
+	font-style: normal;
+	text-shadow: var(--emph-shadow) currentColor;
+}