very basic header for landing page

.env

@@ -1,2 +1,2 @@
 DATABASE_URL=postgresql://portfolio:portfolio@localhost:5432/portfolio?schema=public
-LANDING_JSON_LOCATION=./landing.json
+DATA_DIR=./data

package.json

@@ -28,6 +28,7 @@
 		"next-themes": "^0.2.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-icons": "^5.0.1",
 		"timeago.js": "^4.0.2",
 		"zod": "^3.20.6"
 	},

src/app/(landing)/Header.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Button } from "@nextui-org/button";
+import { Image } from "@nextui-org/image";
+import { Spacer } from "@nextui-org/react";
+import { Tooltip } from "@nextui-org/tooltip";
+import { Component } from "@typings/component";
+import Link from "next/link";
+
+import { useMemo } from "react";
+import { FiGithub, FiMail, FiLinkedin } from "react-icons/fi";
+
+import Owner from "@models/owner";
+
+export const Header: Component<{ owner: Owner }> = ({ owner }) => {
+	const socials = useMemo(
+		() => [
+			{
+				link: `mailto:${owner.contact.email}`,
+				name: "Email address",
+				icon: <FiMail />
+			},
+			{
+				link: owner.contact.git,
+				name: "Github",
+				icon: <FiGithub />
+			},
+			{
+				link: owner.contact.linkedin,
+				name: "LinkedIn",
+				icon: <FiLinkedin />
+			}
+		],
+		[owner.contact]
+	);
+
+	return (
+		<div className="container min-h-screen">
+			<div>
+				{owner.avatar !== undefined && (
+					<Image
+						src={owner.avatar}
+						width={300}
+						alt={`A picture of ${owner.fullName}`}
+					/>
+				)}
+
+				<h1 className="text-4xl">{owner.fullName}</h1>
+				<Spacer y={4} />
+
+				<h2 className="text-2xl">{owner.description}</h2>
+				<Spacer y={4} />
+
+				{socials.map((social) => (
+					<Link href={social.link}>
+						<Tooltip content={social.name}>
+							<Button
+								className="text-2xl mr-4"
+								color="primary"
+								isIconOnly
+								aria-label={social.name}
+							>
+								{social.icon}
+							</Button>
+						</Tooltip>
+					</Link>
+				))}
+			</div>
+		</div>
+	);
+};

src/app/(landing)/page.tsx

@@ -1,15 +1,23 @@
+import { Header } from "./Header";
+
 import Landing from "@models/landing";
 
+import { dataDirLocation } from "@utils/constants";
 import { readLandingJson } from "@utils/landing";
 
 const getLanding = async (): Promise<Landing> => {
-	return await readLandingJson();
+	// Any error will get handled by the `error.tsx` file.
+	return await readLandingJson(dataDirLocation);
 };
 
 export default async function Page() {
 	const landing = await getLanding();
 
-	return <div>{/* <Button color="primary">Click me</Button> */}</div>;
+	return (
+		<>
+			<Header owner={landing.owner} />
+		</>
+	);
 }
 
 export const revalidate = 3600;

src/app/error.tsx

@@ -1,17 +1,11 @@
 "use client";
 
-import { Link, Spacer } from "@nextui-org/react";
+import { Link } from "@nextui-org/react";
+import { ErrorPage } from "@typings/errorPage";
 
-// Error components must be Client Components
 import { useEffect } from "react";
 
-export default function Error({
-	error,
-	reset
-}: {
-	error: Error & { digest?: string };
-	reset: () => void;
-}) {
+const errorPage: ErrorPage = ({ error, reset }) => {
 	useEffect(() => {
 		console.error(error);
 	}, [error]);
@@ -27,4 +21,6 @@ export default function Error({
 			</div>
 		</div>
 	);
-}
+};
+
+export default errorPage;

src/models/owner.ts

@@ -3,8 +3,8 @@ import z from "zod";
 export const OwnerModel = z.object({
 	fullName: z.string(),
 	name: z.string(),
-	description: z.string(),
 	avatar: z.string().optional(),
+	description: z.string(),
 	contact: z.object({
 		email: z.string().email(),
 		linkedin: z.string().url(),

src/styles/global.scss

@@ -3,23 +3,21 @@
 @tailwind utilities;
 
 .container {
-    display: flex;
-    min-width: 100%;
-    flex-direction: column;
-    justify-content: center;
+	display: flex;
+	min-width: 100%;
+	flex-direction: column;
+	justify-content: center;
 
-    @media screen and (width >=600px) {
-        padding-right: 1rem;
-        padding-left: 1rem;
-    }
+	padding-right: 1rem;
+	padding-left: 1rem;
 
-    @media screen and (width >=800px) {
-        padding-right: 4rem;
-        padding-left: 4rem;
-    }
+	@media screen and (width >=800px) {
+		padding-right: 4rem;
+		padding-left: 4rem;
+	}
 
-    @media screen and (width >=1200px) {
-        padding-right: 16rem;
-        padding-left: 16rem;
-    }
-}
+	@media screen and (width >=1200px) {
+		padding-right: 16rem;
+		padding-left: 16rem;
+	}
+}

src/typings/component.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from "react";
+
+export type Component<P> = FC<PropsWithChildren<P>>;

src/typings/errorPage.ts

@@ -0,0 +1,6 @@
+import { Component } from "./component";
+
+export type ErrorPage = Component<{
+	error: Error & { digest?: string };
+	reset: () => void;
+}>;

src/utils/constants.ts

@@ -1,2 +1,3 @@
-export const landingJsonLocation =
-	process.env.LANDING_JSON_LOCATION ?? "/app/landing.json";
+import path from "path";
+
+export const dataDirLocation = process.env.DATA_DIR ?? "/app/data";

src/utils/landing.ts

@@ -1,20 +1,24 @@
 import { readJson } from "fs-extra";
+import path from "path";
 
 import Landing, { LandingModel } from "@models/landing";
 
-import { landingJsonLocation } from "@utils/constants";
 import exists from "@utils/fileExists";
 
-export const readLandingJson = async (): Promise<Landing> => {
-	const location = landingJsonLocation;
+export const readLandingJson = async (
+	dataDirLocation: string
+): Promise<Landing> => {
+	const landingJsonLocation = path.join(dataDirLocation, "landing.json");
 
-	const fileExists = await exists(location);
+	const fileExists = await exists(landingJsonLocation);
 
 	if (!fileExists) {
-		throw new Error(`Could not find landing json file at: ${location}`);
+		throw new Error(
+			`Could not find landing json file at: ${landingJsonLocation}`
+		);
 	}
 
-	const rawJson: unknown = await readJson(location);
+	const rawJson: unknown = await readJson(landingJsonLocation);
 
 	const landingResult = LandingModel.safeParse(rawJson);
 
@@ -23,3 +27,5 @@ export const readLandingJson = async (): Promise<Landing> => {
 
 	return landingResult.data;
 };
+
+// const readPfpFile = async (location: string): Promise<> => {};

tsconfig.json

@@ -23,6 +23,9 @@
     "paths": {
       "@styles/*": [
         "styles/*"
+      ],
+       "@typings/*": [
+        "typings/*"
       ],
       "@components/*": [
         "components/*"

yarn.lock

@@ -4671,6 +4671,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-icons@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee"
+  integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"