update page and add config

config.json

@@ -0,0 +1,42 @@
+{
+	"name": "Lee",
+	"description": "I'm a 20-year-old software engineer from the UK, and my true passion lies in creating and exploring the endless possibilities within my homelab.",
+	"metadata": {
+		"title": "fascinated.cc",
+		"description": "I'm a 20-year-old software engineer from the UK"
+	},
+	"links": [
+		{
+			"title": "Git",
+			"url": "https://git-scm.com/",
+			"color": {
+				"normal": "bg-neutral-700",
+				"hover": "bg-neutral-100"
+			}
+		},
+		{
+			"title": "Discord",
+			"url": "https://discord.gg/yjj2U3ctEG",
+			"color": {
+				"normal": "bg-neutral-700",
+				"hover": "bg-neutral-600"
+			}
+		},
+		{
+			"title": "Twitch",
+			"url": "https://twitch.tv/fascinated_",
+			"color": {
+				"normal": "bg-neutral-700",
+				"hover": "bg-neutral-600"
+			}
+		},
+		{
+			"title": "Documentation",
+			"url": "https://docs.fascinated.cc",
+			"color": {
+				"normal": "bg-neutral-700",
+				"hover": "bg-neutral-600"
+			}
+		}
+	]
+}

src/app/layout.tsx

@@ -1,12 +1,11 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
 
+import Config from "../../config.json";
+
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata = {
+export const metadata = Config.metadata;
-	title: "fascinated.cc",
-	description: "I'm a 20-year-old software engineer from the UK",
-};
 
 export default function RootLayout({
 	children,

src/app/page.tsx

@@ -1,18 +1,30 @@
+import Config from "../../config.json";
+
 export default function Home() {
 	return (
-		<main className="flex flex-col items-center justify-center w-screen h-screen">
+		<main className="flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 text-white">
-			<h1 className="text-4xl font-bold">Hello, world!</h1>
+			<div className="bg-neutral-800 rounded text-center">
+				<div className="m-5">
+					<h1 className="text-4xl font-bold">{Config.name}</h1>
 
-			<p className="mt-4 text-lg">
+					<p className="mt-4 text-lg max-w-lg">{Config.description}</p>
-				This is a template for Next.js 13 with Tailwind CSS.
+
-			</p>
+					<div className="flex flex-col items-center">
-			<p className="mt-4 text-lg text-blue-500">
+						{Config.links.map((link, index) => {
-				Created by{" "}
+							return (
-				<a href="https://git.fascinated.cc/Fascinated/nextjs-13-template-with-tailwindcss">
+								<>
-					Fascinated
+									<button
-				</a>
+										key={index}
-				.
+										className={`mt-4 px-4 w-60 py-2 rounded ${link.color.normal} hover:${link.color.hover}`}
-			</p>
+									>
+										<a href={link.url}>{link.title}</a>
+									</button>
+								</>
+							);
+						})}
+					</div>
+				</div>
+			</div>
 		</main>
 	);
 }