add avatar

config.json

@@ -1,6 +1,7 @@
 {
 	"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.",
+	"avatar": "https://cdn.fascinated.cc/gqL652.jpg",
 	"metadata": {
 		"title": "fascinated.cc",
 		"description": "I'm a 20-year-old software engineer from the UK"

next.config.js

@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+	images: {
+		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "**",
+				port: "",
+				pathname: "/**",
+			},
+		],
+	},
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

src/app/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Config from "../../config.json";
 
 export default function Home() {
@@ -5,7 +6,17 @@ export default function Home() {
 		<main className="flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 text-white">
 			<div className="bg-neutral-800 rounded text-center">
 				<div className="m-5">
-					<h1 className="text-4xl font-bold">{Config.name}</h1>
+					<div className="flex flex-col items-center justify-center">
+						<Image
+							src={Config.avatar}
+							alt="Avatar"
+							width={120}
+							height={120}
+							className="rounded-full"
+						/>
+						<div className="mb-3"></div>
+						<h1 className="text-4xl font-bold">{Config.name}</h1>
+					</div>
 
 					<p className="mt-4 text-lg max-w-lg">{Config.description}</p>