diff --git a/app/Hannah/Projects/page.tsx b/app/Hannah/Projects/page.tsx index fdff9ed..bdcf956 100644 --- a/app/Hannah/Projects/page.tsx +++ b/app/Hannah/Projects/page.tsx @@ -1,10 +1,10 @@ "use client"; -import React, {useState} from "react"; +import React, { useState } from "react"; import Image from "next/image"; import RoundedContainer from "@/components/ui/RoundedContainer"; -import Hyperlink from "@/components/ui/Hyperlink"; +import Hyperlink from "@/components/ui/NavLink"; type Project = { id: number; @@ -12,7 +12,7 @@ type Project = { parentProject?: number; title: string; content: React.ReactNode; -} +}; const projects: Project[] = [ { @@ -22,13 +22,20 @@ const projects: Project[] = [ content: (

Hello!

-

{"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."}

+

+ { + "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." + } +

- +
- ) + ), }, { id: 2, @@ -36,7 +43,11 @@ const projects: Project[] = [ title: "Dagemark Homelab", content: (
-

{"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."}

+

+ { + "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." + } +

(Server UML Image Here) -

{"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."}

+

+ { + "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." + } +

- ) + ), }, { id: 3, @@ -55,23 +70,36 @@ const projects: Project[] = [ title: "Main Website", content: (
- Click here to go to Git Page -

{"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."}

-

{"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."}

-

{"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."}

+ + Click here to go to Git Page + +

+ { + "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." + } +

+

+ { + "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." + } +

+

+ { + "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." + } +

- ) + ), }, { id: 4, isChildProject: false, title: "Count Duch King", - content: "[To be implemented]" + content: "[To be implemented]", }, -] +]; export default function Projects() { - // TODO: make the content server stored, of course! const [activeProject, setActiveProject] = useState(projects[0]); @@ -82,7 +110,6 @@ export default function Projects() {
{/* Notebook Wrapper */}
- {/* Chapter Tabs */}
{projects.map((project) => ( @@ -92,10 +119,10 @@ export default function Projects() { 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" - }`} + activeProject.id === project.id + ? "bg-slate-300 shadow-md" + : "bg-slate-400 hover:bg-slate-500" + }`} > {project.title} @@ -107,14 +134,11 @@ export default function Projects() {

{activeProject.title}

-

- {activeProject.content} -

+

{activeProject.content}

-
- ) -} \ No newline at end of file + ); +} diff --git a/app/Playground/Components/page.tsx b/app/Playground/Components/page.tsx index 522f645..2fc6257 100644 --- a/app/Playground/Components/page.tsx +++ b/app/Playground/Components/page.tsx @@ -1,14 +1,21 @@ +"use client"; + import Button from "@/components/ui/Button"; import Form from "@/components/ui/Form"; -import Hyperlink from "@/components/ui/Hyperlink"; -import Referencelink from "@/components/ui/Referencelink"; +import NavLink from "@/components/ui/NavLink"; import RoundedContainer from "@/components/ui/RoundedContainer"; export default function Components() { return (

Button

- +
diff --git a/components/ui/Hyperlink.tsx b/components/ui/NavLink.tsx similarity index 64% rename from components/ui/Hyperlink.tsx rename to components/ui/NavLink.tsx index 4308fcb..080ded6 100644 --- a/components/ui/Hyperlink.tsx +++ b/components/ui/NavLink.tsx @@ -1,17 +1,21 @@ -export default function Hyperlink({ +import Link from "next/link"; + +export default function NavLink({ name, link, + external = false, }: { name: string; link: string; + external?: boolean; }) { return (
- +

{name}

- +
); } diff --git a/components/ui/Referencelink.tsx b/components/ui/Referencelink.tsx deleted file mode 100644 index f06c08d..0000000 --- a/components/ui/Referencelink.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export default function Referencelink({ - name, - link, -}: { - name: string; - link: string; -}) { - return ( -
- -

- {name} -

- -
- ); -}