From 0a85026b71d564fc53d01bc554c6c76c88144ab5 Mon Sep 17 00:00:00 2001
From: Fascinated <admin@fascinated.cc>
Date: Sun, 2 Jul 2023 12:02:11 +0100
Subject: [PATCH] add avatar

---
 config.json      |  1 +
 next.config.js   | 15 +++++++++++++--
 src/app/page.tsx | 13 ++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/config.json b/config.json
index b21ecef..9255751 100644
--- a/config.json
+++ b/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"
diff --git a/next.config.js b/next.config.js
index 767719f..76c2d5a 100644
--- a/next.config.js
+++ b/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;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0c30882..5e19a81 100644
--- a/src/app/page.tsx
+++ b/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>