app/Hannah/page.tsx

@@ -1,28 +1,20 @@
 import Image from "next/image";
 
+import Referencelink from "@/components/ui/Referencelink";
 import RoundedContainer from "@/components/ui/RoundedContainer";
-import NavLink from "@/components/ui/NavLink";
 
 export default function Hannah() {
   return (
     <div className="flex h-full w-full justify-center py-10">
       <RoundedContainer slim={false}>
         <div className="flex w-full flex-row justify-between">
-          <NavLink name={"Projects"} link={"/Hannah/Projects"} />
+          <Referencelink name={"Projects"} link={"/Hannah/Projects"} />
-          <NavLink name={"CV"} link={"/Hannah/CV"} />
+          <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>
+          <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>
-              "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"
@@ -34,5 +26,5 @@ export default function Hannah() {
         </div>
       </RoundedContainer>
     </div>
-  );
+  )
 }

app/Playground/Components/page.tsx

@@ -8,14 +8,7 @@ import RoundedContainer from "@/components/ui/RoundedContainer";
 
 export default function Components() {
   return (
-    <div className="flex flex-col items-center gap-4 w-full h-full px-10">
+    <div className="flex flex-col items-center gap-4 w-full h-full">
-      <h1>Dropdown</h1>
-      <Dropdown title="Dropdown" mode="DARK">
-        <NavLink name="Home" link="/" />
-        <NavLink name="Admin" link="/Admin" />
-        <NavLink name="Hannah" link="/Hannah" />
-      </Dropdown>
-
       <h1>Button</h1>
       <Button
         title={"Button"}
@@ -56,6 +49,11 @@ export default function Components() {
           <p>More Contents</p>
         </div>
       </RoundedContainer>
+
+      <h1>Dropdown</h1>
+      <Dropdown>
+        <p>Hello!</p>
+      </Dropdown>
     </div>
   );
 }

app/page.tsx

@@ -1,11 +1,11 @@
-import Image from "next/image";
+ import Image from "next/image";
 
-import RoundedContainer from "@/components/ui/RoundedContainer";
+ import RoundedContainer from "@/components/ui/RoundedContainer";
 
 export default function Home() {
   return (
     <main className="flex items-center justify-center w-full bg-zinc-200 font-sans dark:bg-slate-800">
-      <RoundedContainer slim={false}>
+      <RoundedContainer>
         <Image
           className="dark:invert"
           src="/next.svg"
@@ -19,8 +19,7 @@ export default function Home() {
             Welcome to the Dagemark Server
           </h1>
           <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400 italic">
-            Design In Progress, current layout and theme may change, have a good
+            Design In Progress, current layout and theme may change, have a good day :D
-            day :D
           </p>
         </div>
       </RoundedContainer>

components/ui/Button.tsx

@@ -1,25 +1,21 @@
 import { ComponentProps } from "react";
-import React from "react";
 
 type ButtonProps = ComponentProps<"button"> & {
   title: string;
   mode?: "DARK" | "LIGHT";
-  icon?: React.ReactElement;
 };
 
 export default function Button({
   title,
   mode = "LIGHT",
-  icon,
   ...props
 }: ButtonProps) {
   return (
     <button
       {...props}
-      className={`${mode == "LIGHT" ? "bg-slate-400 dark:bg-slate-800 border-slate-800 hover:bg-slate-500" : "bg-gray-400 dark:bg-slate-900 dark:border-slate-900 border-slate-400 hover:bg-slate-600"} flex flex-row items-center border-4 border-double cursor-pointer font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out`}
+      className={`${mode == "LIGHT" ? "bg-slate-400 dark:bg-slate-800 border-slate-800 hover:bg-slate-500" : "bg-gray-400 dark:bg-slate-900 dark:border-slate-900 border-slate-400 hover:bg-slate-600"} border-4 border-double cursor-pointer font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out`}
     >
       {title}
-      {icon}
     </button>
   );
 }

components/ui/Dropdown.tsx

@@ -1,47 +1,19 @@
 import { useState } from "react";
-import React from "react";
-import { ArrowRightIcon } from "@heroicons/react/24/outline";
-
 import Button from "./Button";
-import RoundedContainer from "./RoundedContainer";
 
-export default function Dropdown({
+export default function Dropdown({ children }: { children: React.ReactNode }) {
-  title,
-  mode,
-  children,
-}: {
-  title?: string;
-  mode?: "DARK" | "LIGHT";
-  children: React.ReactNode;
-}) {
   const [dropped, setDropped] = useState<boolean>(false);
-  const [degrees, setDegrees] = useState<number>(0);
 
   return (
     <div>
       <Button
-        title={title ? title : ""}
+        title="Drop down"
-        mode={mode}
+        mode="DARK"
         onClick={() => {
           setDropped(!dropped);
-          if (degrees < 90) {
-            setDegrees(90);
-          } else {
-            setDegrees(0);
-          }
         }}
-        icon={
+      ></Button>
-          <ArrowRightIcon
+      {dropped && <div>{children}</div>}
-            className={`size-4 transition-transform rotate-${degrees}`}
-          />
-        }
-      />
-      <RoundedContainer
-        slim={true}
-        className={`${!dropped && "invisible"} absolute z-10 flex flex-col gap-2 transition-discrete duration-150 ease-out`}
-      >
-        {children}
-      </RoundedContainer>
     </div>
   );
 }

components/ui/Form.tsx

@@ -18,7 +18,7 @@ export default function Form({
       <form action={action}>
         <RoundedContainer slim={false}>
           {children}
-          <Button title={submitText} type="submit" />
+          <Button title={submitText} type="submit"></Button>
         </RoundedContainer>
       </form>
     </div>

components/ui/RoundedContainer.tsx

@@ -4,16 +4,14 @@ export default function RoundedContainer({
   children,
   slim = true,
   direction = "column",
-  className,
 }: {
   children: React.ReactNode;
   slim?: boolean;
   direction?: "column" | "row";
-  className?: string;
 }) {
   return (
     <div
-      className={`flex ${slim ? "max-w-6xl py-3 px-3" : "max-w-3xl py-6 px-6"} rounded-2xl ${direction == "column" ? "flex-col" : "flex-row"} items-center bg-gray-400 dark:bg-slate-900 sm:items-start ${className}`}
+      className={`flex ${slim ? "max-w-6xl" : "max-w-3xl"} rounded-4xl ${direction == "column" ? "flex-col" : "flex-row"} items-center py-8 px-8 bg-gray-400 dark:bg-slate-900 sm:items-start`}
     >
       {children}
     </div>

lib/api/cmFetch.ts

@@ -1,5 +1,7 @@
 import { RequestInit } from "next/dist/server/web/spec-extension/request";
 
+import logger from "../logging/logger";
+
 const FRONTEND_URL = process.env.NEXT_PUBLIC_FRONTEND_URL;
 
 export async function cmFetch<T>(

package-lock.json

@@ -8,7 +8,6 @@
       "name": "app",
       "version": "0.1.1",
       "dependencies": {
-        "@heroicons/react": "^2.2.0",
         "next": "^16.3.4",
         "react": "19.2.3",
         "react-dom": "19.2.3",
@@ -479,15 +478,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@heroicons/react": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
-      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">= 16 || ^19.0.0-rc"
-      }
-    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",

package.json

@@ -10,7 +10,6 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@heroicons/react": "^2.2.0",
     "next": "^16.3.4",
     "react": "19.2.3",
     "react-dom": "19.2.3",