Layout function o.O
Cleaned up the code and that's about it.
This commit is contained in:
Robert S
parent
b9ed40b2b9
commit
79cc0cb8d1
10 changed files with 234 additions and 283 deletions
|
|
@ -1,11 +1,12 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import RomanNumerals from './romanNumerals';
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<footer className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
|
<footer className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
|
||||||
<p className="text-xl">
|
<p className="text-xl">
|
||||||
© MMXXI
|
© {RomanNumerals(new Date().getFullYear())}
|
||||||
{" "}
|
{" "}
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a>Robert S.</a>
|
<a>Robert S.</a>
|
||||||
37
components/layout.js
Normal file
37
components/layout.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import Navbar from "./navbar";
|
||||||
|
import Footer from "./footer";
|
||||||
|
|
||||||
|
export default function Layout({
|
||||||
|
children,
|
||||||
|
title = '',
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<meta charSet="UTF-8"/>
|
||||||
|
<title>Robert S. {title && `- ${title}`}</title>
|
||||||
|
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
|
||||||
|
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Tailwind,TailwindCSS,Bootstrap" />
|
||||||
|
<meta name="author" content="Robert Stokreef" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta property="og:title" content="Robert S. - My work" />
|
||||||
|
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
||||||
|
<meta property="og:url" content="https://robert-s.dev/work" />
|
||||||
|
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
||||||
|
<meta name="theme-color" content="#F43F5E" />
|
||||||
|
<meta name="twitter:card" content="summary" />
|
||||||
|
<meta name="twitter:site" content="@ThatGuy5275" />
|
||||||
|
<meta name="twitter:title" content="Robert S. - My work" />
|
||||||
|
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
||||||
|
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
||||||
|
</Head>
|
||||||
|
<div className="flex flex-col min-h-screen">
|
||||||
|
<Navbar />
|
||||||
|
{children}
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import {useState} from "react";
|
import {useState} from "react";
|
||||||
import NavLink from "./NavLink";
|
import NavLink from "./navlink";
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const [active, setActive] = useState(false)
|
const [active, setActive] = useState(false)
|
||||||
13
components/romanNumerals.js
Normal file
13
components/romanNumerals.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
export default function RomanNumerals(num) {
|
||||||
|
if (isNaN(num))
|
||||||
|
return NaN;
|
||||||
|
let digits = String(+num).split(""),
|
||||||
|
key = ["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM",
|
||||||
|
"", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC",
|
||||||
|
"", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"],
|
||||||
|
roman = "",
|
||||||
|
i = 3;
|
||||||
|
while (i--)
|
||||||
|
roman = (key[+digits.pop() + (i * 10)] || "") + roman;
|
||||||
|
return Array(+digits.join("") + 1).join("M") + roman;
|
||||||
|
}
|
||||||
|
|
@ -1,32 +1,9 @@
|
||||||
import Head from "next/head";
|
import Layout from "../components/layout";
|
||||||
import Navbar from "../components/Navbar";
|
|
||||||
import Footer from "../components/Footer";
|
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
export default function About() {
|
export default function About() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Layout title="About me">
|
||||||
<Head>
|
|
||||||
<meta charSet="UTF-8"/>
|
|
||||||
<title>Robert S. - About me</title>
|
|
||||||
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
|
|
||||||
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Tailwind,TailwindCSS,Bootstrap" />
|
|
||||||
<meta name="author" content="Robert Stokreef" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
<meta property="og:title" content="Robert S. - About me" />
|
|
||||||
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
|
||||||
<meta property="og:url" content="https://robert-s.dev/about" />
|
|
||||||
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
|
||||||
<meta name="theme-color" content="#F43F5E" />
|
|
||||||
<meta name="twitter:card" content="summary" />
|
|
||||||
<meta name="twitter:site" content="@ThatGuy5275" />
|
|
||||||
<meta name="twitter:title" content="Robert S. - About me" />
|
|
||||||
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
|
||||||
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<div className="flex flex-col min-h-screen">
|
|
||||||
<Navbar />
|
|
||||||
<div className="flex flex-grow items-center">
|
<div className="flex flex-grow items-center">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="container flex mx-auto justify-center">
|
<div className="container flex mx-auto justify-center">
|
||||||
|
|
@ -66,8 +43,6 @@ export default function About() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
</Layout>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,9 @@
|
||||||
import Head from "next/head";
|
import Layout from "../components/layout";
|
||||||
import Navbar from "../components/Navbar";
|
|
||||||
import Footer from "../components/Footer";
|
|
||||||
import {motion} from "framer-motion";
|
import {motion} from "framer-motion";
|
||||||
|
|
||||||
export default function Contact() {
|
export default function Contact() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Layout title="Contact me">
|
||||||
<Head>
|
|
||||||
<meta charSet="UTF-8"/>
|
|
||||||
<title>Robert S. - Contact me</title>
|
|
||||||
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
|
|
||||||
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Tailwind,TailwindCSS,Bootstrap" />
|
|
||||||
<meta name="author" content="Robert Stokreef" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
<meta property="og:title" content="Robert S. - Contact me" />
|
|
||||||
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
|
||||||
<meta property="og:url" content="https://robert-s.dev/contact" />
|
|
||||||
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
|
||||||
<meta name="theme-color" content="#F43F5E" />
|
|
||||||
<meta name="twitter:card" content="summary" />
|
|
||||||
<meta name="twitter:site" content="@ThatGuy5275" />
|
|
||||||
<meta name="twitter:title" content="Robert S. - Contact me" />
|
|
||||||
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
|
||||||
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<div className="flex flex-col min-h-screen">
|
|
||||||
<Navbar />
|
|
||||||
<div className="flex flex-grow items-center">
|
<div className="flex flex-grow items-center">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="container flex mx-auto justify-center">
|
<div className="container flex mx-auto justify-center">
|
||||||
|
|
@ -95,8 +72,6 @@ export default function Contact() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
</Layout>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,9 @@
|
||||||
import Head from "next/head";
|
import Layout from "../components/layout";
|
||||||
import Navbar from "../components/Navbar";
|
|
||||||
import Footer from "../components/Footer";
|
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Layout>
|
||||||
<Head>
|
|
||||||
<meta charSet="UTF-8"/>
|
|
||||||
<title>Robert S.</title>
|
|
||||||
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
|
|
||||||
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Tailwind,TailwindCSS,Bootstrap" />
|
|
||||||
<meta name="author" content="Robert Stokreef" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
<meta property="og:title" content="Robert S." />
|
|
||||||
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
|
||||||
<meta property="og:url" content="https://robert-s.dev/" />
|
|
||||||
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
|
||||||
<meta name="theme-color" content="#F43F5E" />
|
|
||||||
<meta name="twitter:card" content="summary" />
|
|
||||||
<meta name="twitter:site" content="@ThatGuy5275" />
|
|
||||||
<meta name="twitter:title" content="Robert S." />
|
|
||||||
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
|
||||||
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<div className="flex flex-col min-h-screen">
|
|
||||||
<Navbar />
|
|
||||||
<div className="flex flex-grow items-center">
|
<div className="flex flex-grow items-center">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="container flex mx-auto justify-center">
|
<div className="container flex mx-auto justify-center">
|
||||||
|
|
@ -41,8 +18,6 @@ export default function Home() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
</Layout>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,9 @@
|
||||||
import Head from "next/head";
|
import Layout from "../components/layout";
|
||||||
import Navbar from "../components/Navbar";
|
|
||||||
import Footer from "../components/Footer";
|
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
export default function Work() {
|
export default function Work() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Layout title="My work">
|
||||||
<Head>
|
|
||||||
<meta charSet="UTF-8"/>
|
|
||||||
<title>Robert S. - My work</title>
|
|
||||||
<meta name="description" content="A developer and tech enthusiast from the Netherlands." />
|
|
||||||
<meta name="keywords" content="HTML,CSS,JavaScript,Python,SQL,MySQL,PostgreSQL,MongoDB,Redis,Flask,Tailwind,TailwindCSS,Bootstrap" />
|
|
||||||
<meta name="author" content="Robert Stokreef" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
<meta property="og:title" content="Robert S. - My work" />
|
|
||||||
<meta property="og:description" content="A developer and tech enthusiast from the Netherlands." />
|
|
||||||
<meta property="og:url" content="https://robert-s.dev/work" />
|
|
||||||
<meta property="og:image" content="https://robert-s.dev/logo.jpg" />
|
|
||||||
<meta name="theme-color" content="#F43F5E" />
|
|
||||||
<meta name="twitter:card" content="summary" />
|
|
||||||
<meta name="twitter:site" content="@ThatGuy5275" />
|
|
||||||
<meta name="twitter:title" content="Robert S. - My work" />
|
|
||||||
<meta name="twitter:description" content="A developer and tech enthusiast from the Netherlands."/>
|
|
||||||
<meta name="twitter:image" content="https://robert-s.dev/logo.jpg"/>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<div className="flex flex-col min-h-screen">
|
|
||||||
<Navbar />
|
|
||||||
<div className="flex flex-grow items-center">
|
<div className="flex flex-grow items-center">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="container flex mx-auto justify-center">
|
<div className="container flex mx-auto justify-center">
|
||||||
|
|
@ -98,8 +75,6 @@ export default function Work() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
</Layout>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
public/forum-banner.jpg
Normal file
BIN
public/forum-banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Loading…
Add table
Reference in a new issue