Changed /Hannah sub-routes, added a Projects page, and changed the /Hannah main page :]

app/Hannah/CV/page.tsx

@@ -0,0 +1,10 @@
+import Referencelink from "@/components/ui/Referencelink";
+
+export default function CVPage(){
+  return (
+      <div className="flex w-full h-full justify-center flex-col">
+        <iframe src="/cv.pdf" className={'w-full h-[90vh] max-w-4xl border rounded-xl shadow'} />
+        <Referencelink name={"Download"} link={"/cv.pdf"}/>
+      </div>
+  )
+}

app/Hannah/Portfolio/CV/page.tsx

@@ -1,7 +0,0 @@
-import UnderConstruction from "@/components/static_pages/UnderConstruction";
-
-export default function CVPage(){
-  return (
-    <UnderConstruction />
-  )
-}

app/Hannah/Portfolio/Projects/page.tsx

@@ -1,7 +0,0 @@
-import UnderConstruction from "@/components/static_pages/UnderConstruction";
-
-export default function Projects() {
-  return (
-    <UnderConstruction />
-  )
-}

app/Hannah/Projects/page.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import React, {useState} from "react";
+import Image from "next/image";
+
+import RoundedContainer from "@/components/ui/RoundedContainer";
+import Hyperlink from "@/components/ui/Hyperlink";
+
+type Project = {
+  id: number;
+  isChildProject: boolean; // TODO: Better implementation of defining Project slide as child project
+  parentProject?: number;
+  title: string;
+  content: React.ReactNode;
+}
+
+const projects: Project[] = [
+  {
+    id: 1,
+    isChildProject: false,
+    title: "Project Page Information",
+    content: (
+      <div className="prose space-y-2">
+        <p className="text-xl">Hello!</p>
+        <p>{"This is the project view page. Here you can get a quick idea of what sort of things I've worked on. Unfortunately it relies on me making these project sides manually, and thus only notable projects will end up on here. If you're looking for a brief overview of, for example what languages I've worked in, I suggest you take a peek at my git page."}</p>
+        <div className="flex flex-row justify-around">
+          <Hyperlink name={"My self-hosted Git"} link={"dagemark.se/git/Hannah"} />
+          <Hyperlink name={"My Github"} link={"github.com/Hannah-Dagemark"} />
+        </div>
+      </div>
+    )
+  },
+  {
+    id: 2,
+    isChildProject: false,
+    title: "Dagemark Homelab",
+    content: (
+      <div className="prose space-y-2">
+        <p>{"The main project which I've been working on since December. For those unfamiliar with the concept, a HomeLab is a custom server one builds and runs in their own home to give them more autonomy and control over their digital services. In my case, it's also to let me get some very useful experience in networking, docker management, service handling, server interfacing, and more. Due to this project's size, it's been split up into sub-projects."}</p>
+        <Image
+          src="/ServerUML.png"
+          alt="(Server UML Image Here)"
+          width={800}
+          height={500}
+          priority
+        />
+        <p>{"Here's an example of how the networking looks like inside the server right now, with most services (including this website!) being ran with docker using a docker compose setup. One of those services is Nginx Proxy Manager which does reverse proxying and routing for the server."}</p>
+      </div>
+    )
+  },
+  {
+    id: 3,
+    isChildProject: true,
+    parentProject: 2, // TODO: Not used right now, but still put down here for reference during implementation
+    title: "Main Website",
+    content: (
+      <div className="prose space-y-3">
+        <a href="https://dagemark.se/git/Hannah/Dagemark-Webapp" >Click here to go to Git Page</a>
+        <p>{"The main website that you're currently on. The website is written in Typescript, using the NextJS React toolkit. It also uses TailwindCSS for CSS styling, as well as eslint to keep code clean and uniform."}</p>
+        <p>{"Currently the website is only a frontend page, although a backend is in the works. The idea is to have the website be very editable online, including these project pages as an example. For that a robust user handling system needs to be created however, and a good backend api, which is the planned next step."}</p>
+        <p>{"This project has been a very nice way for me to jog my memory from my technical fourth year, where I originally learned this development stack. I also find web development to be a good way of training the other aspects of development, as planning routes, page layouts, apis, reusable components and thematics is very essential."}</p>
+      </div>
+    )
+  },
+  {
+    id: 4,
+    isChildProject: false,
+    title: "Count Duch King",
+    content: "[To be implemented]"
+  },
+]
+
+export default function Projects() {
+
+  // TODO: make the content server stored, of course!
+
+  const [activeProject, setActiveProject] = useState(projects[0]);
+
+  return (
+    <div className="flex h-full w-full justify-center py-10">
+      <RoundedContainer>
+        <div className="flex w-230 h-250 justify-center min-h-screen bg-gray-600 rounded-2xl py-10">
+          {/* Notebook Wrapper */}
+          <div className="relative flex w-full h-full pr-5">
+
+            {/* Chapter Tabs */}
+            <div className="flex flex-col justify-start pt-10 pr-5">
+              {projects.map((project) => (
+                <button
+                  key={project.id}
+                  onClick={() => setActiveProject(project)}
+                  className={`${project.isChildProject ? "ml-2 mr-2 pl-3 border-l-4 border-t-2 border-slate-500 text-sm" : "mt-2 rounded-r-lg"}
+                  px-4 py-2  text-left transition
+                ${
+                    activeProject.id === project.id
+                      ? "bg-slate-300 shadow-md"
+                      : "bg-slate-400 hover:bg-slate-500"
+                  }`}
+                >
+                  {project.title}
+                </button>
+              ))}
+            </div>
+
+            {/* Main Notebook Page */}
+            <div className="flex-1 bg-gray-200 rounded-xl shadow-xl p-5 border-2 border-gray-800">
+              <h2 className="text-slate-800 text-2xl font-bold mb-4">
+                {activeProject.title}
+              </h2>
+              <p className="text-slate-700">
+                {activeProject.content}
+              </p>
+            </div>
+
+          </div>
+        </div>
+      </RoundedContainer>
+    </div>
+  )
+}

app/Hannah/layout.tsx

@@ -3,7 +3,7 @@ import React from "react";
 export default function AdminLayout({children}: {children: React.ReactNode}) {
   // TODO: Put custom portfolio layout :]
   return (
-    <div>
+    <div className={'w-full h-full'}>
       {children}
     </div>
   )

app/Hannah/page.tsx

@@ -1,10 +1,30 @@
+import Image from "next/image";
+
 import Referencelink from "@/components/ui/Referencelink";
+import RoundedContainer from "@/components/ui/RoundedContainer";
 
 export default function Hannah() {
   return (
-    <div className="flex flex-col items-center justify-center w-full h-full">
-      <iframe src="/cv.pdf" className={'w-full h-[90vh] max-w-4xl border rounded-xl shadow'} />
-      <Referencelink name={"Download"} link={"/cv.pdf"}/>
+    <div className="flex h-full w-full justify-center py-10">
+      <RoundedContainer slim={false}>
+        <div className="flex w-full flex-row justify-between">
+          <Referencelink name={"Projects"} link={"/Hannah/Projects"} />
+          <Referencelink name={"CV"} link={"/Hannah/CV"} />
+        </div>
+        <div className="flex w-full flex-col space-y-2 py-10">
+          <h1 className="text-2xl font-bold">Hi!</h1>
+          <p>{"I'm Hannah, and I made this website! It's currently very much in it's early stages, but I am actively developing it and soon it'll hopefully contain some good examples of what I do. Besides being a place to display my projects, it also acts as a hub for the different services I've incorporated into our home web ecosystem, or HomeLab."}</p>
+          <p>{"If you came here from a job application, chances are you'll want to take a look at the Projects tab. As said It's still fairly new, but it'll give you a good example of what I put my time into! Just press the \"Projects\" button if you're interested"}</p>
+          <p>{"In the meantime, here's a picture of my cat :D"}</p>
+          <Image
+            src="/Missy.jpg"
+            alt="(If no cat image here, it has broken :C)"
+            width={400}
+            height={400}
+            priority
+          />
+        </div>
+      </RoundedContainer>
     </div>
   )
 }