- {isLoading ? (
-
- ) : (
-
-
- {children}
-
- );
- }
-
- return (
-
- {children}
-
- );
- },
-
- pre({ children, ...props }) {
- return (
-
- {children}
-
- );
- },
-
- h1: ({ children }) => (
-
- {children}
-
- ),
-
- h2: ({ children }) => (
-
- {children}
-
- ),
-
- h3: ({ children }) => (
-
- {children}
-
- ),
-
- p: ({ children }) => (
- {children}
- ),
-
- ul: ({ children }) => (
-
- ),
-
- ol: ({ children }) => (
-
- {children}
-
- ),
-
- li: ({ children }) => (
- {children}
- ),
-
- a: ({ children, href }) => (
-
- {children}
-
- ),
-
- blockquote: ({ children }) => (
-
- {children}
-
- ),
-
- img: ({ src, alt }) => {
- const resolved = resolveImageSrc(src, base);
-
- return (
- 
- );
- },
- }}
- >
- {readmeContent}
-
-
- )}
+ return (
+
+ {isLoading ? (
+
- );
+ ) : (
+
+
+ {children}
+
+ );
+ }
+
+ return (
+
+ {children}
+
+ );
+ },
+
+ pre({ children, ...props }) {
+ return (
+
+ {children}
+
+ );
+ },
+
+ h1: ({ children }) => (
+
+ {children}
+
+ ),
+
+ h2: ({ children }) => (
+
+ {children}
+
+ ),
+
+ h3: ({ children }) => (
+
+ {children}
+
+ ),
+
+ p: ({ children }) => (
+ {children}
+ ),
+
+ ul: ({ children }) => (
+
+ ),
+
+ ol: ({ children }) => (
+ {children}
+ ),
+
+ li: ({ children }) => {children},
+
+ a: ({ children, href }) => (
+
+ {children}
+
+ ),
+
+ blockquote: ({ children }) => (
+
+ {children}
+
+ ),
+
+ img: ({ src, alt }) => {
+ const resolved = resolveImageSrc(src, base);
+
+ return (
+
+ );
+ },
+ }}
+ >
+ {readmeContent}
+
+
+ )}
+
+ );
}
diff --git a/frontend/src/hooks/useTheme.js b/frontend/src/hooks/useTheme.js
index e0e766e..6a3750a 100644
--- a/frontend/src/hooks/useTheme.js
+++ b/frontend/src/hooks/useTheme.js
@@ -2,15 +2,15 @@ import { useEffect, useState } from "react";
import { getInitialTheme, applyTheme, toggleTheme } from "../utils/theme";
export function useTheme() {
- const [theme, setTheme] = useState(getInitialTheme);
+ const [theme, setTheme] = useState(getInitialTheme);
- useEffect(() => {
- applyTheme(theme);
- }, [theme]);
+ useEffect(() => {
+ applyTheme(theme);
+ }, [theme]);
- const handleToggle = () => {
- setTheme((prev) => toggleTheme(prev));
- };
+ const handleToggle = () => {
+ setTheme((prev) => toggleTheme(prev));
+ };
- return { theme, toggleTheme: handleToggle };
+ return { theme, toggleTheme: handleToggle };
}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 35cd9a4..637e43b 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
-
-
- ,
+
+
+ ,
);
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 8923ff3..3e6dc03 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -2,120 +2,115 @@ import { useState } from "react";
import ProjectsReadme from "../components/ProjectsReadme";
export default function Home() {
- const projectList = [
- {
- id: "site",
- name: "aramjonghu-site",
- url: "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/raw/branch/master/README.md",
- },
- {
- id: "game",
- name: "Game (Gameron the Lost Level)",
- url: "https://git.aramjonghu.nl/AramJonghu/gameron-the-lost-level/src/branch/master/README.md",
- },
- {
- id: "nvim",
- name: "Nvim Config",
- url: "https://git.aramjonghu.nl/AramJonghu/nvim/src/branch/main/README.md",
- },
- ];
+ const projectList = [
+ {
+ id: "site",
+ name: "aramjonghu-site",
+ url: "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/raw/branch/master/README.md",
+ },
+ {
+ id: "game",
+ name: "Game (Gameron the Lost Level)",
+ url: "https://git.aramjonghu.nl/AramJonghu/gameron-the-lost-level/src/branch/master/README.md",
+ },
+ {
+ id: "nvim",
+ name: "Nvim Config",
+ url: "https://git.aramjonghu.nl/AramJonghu/nvim/src/branch/main/README.md",
+ },
+ ];
- const [projIdx, setProjIdx] = useState(0);
- const prevProject = () =>
- setProjIdx((i) => (i - 1 + projectList.length) % projectList.length);
- const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length);
+ const [projIdx, setProjIdx] = useState(0);
+ const prevProject = () =>
+ setProjIdx((i) => (i - 1 + projectList.length) % projectList.length);
+ const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length);
- const [activeTab, setActiveTab] = useState("about");
+ const [activeTab, setActiveTab] = useState("about");
- const sections = [
- {
- id: "projects",
- title: "Projects",
- content: (
- <>
-
- Projects
-
-
-
-
- {projectList[projIdx].name} ({projIdx + 1}/
- {projectList.length})
-
-
-
-
-
- ),
- },
- {
- id: "systems",
- title: "Systems",
- content:
Systems content goes here.
,
- },
- {
- id: "about",
- title: "About",
- content:
About content goes here.
,
- },
- ];
+ const sections = [
+ {
+ id: "projects",
+ title: "Projects",
+ content: (
+ <>
+
+ Projects
+
+
+
+
+ {projectList[projIdx].name} ({projIdx + 1}/{projectList.length})
+
+
+
+
+
+ ),
+ },
+ {
+ id: "systems",
+ title: "Systems",
+ content:
Systems content goes here.
,
+ },
+ {
+ id: "about",
+ title: "About",
+ content:
About content goes here.
,
+ },
+ ];
- return (
-
-
-
- AramJonghu
-
-
- Software engineer building systems, services, and
- experiments across a self-hosted environment.
-
-
- This site acts as a hub for projects, infrastructure, and
- personal tooling.
-
-
-
- {sections.map((section) => (
-
- ))}
-
-
- {sections.map((section) => (
-
- {section.content}
-
- ))}
-
-
-
+ return (
+
+
+
AramJonghu
+
+ Software engineer building systems, services, and experiments across a
+ self-hosted environment.
+
+
+ This site acts as a hub for projects, infrastructure, and personal
+ tooling.
+
+
+
+ {sections.map((section) => (
+
+ ))}
+
+
+ {sections.map((section) => (
+
+ {section.content}
+
+ ))}
+
- );
+
+
+ );
}
diff --git a/frontend/src/utils/theme.js b/frontend/src/utils/theme.js
index 82fefe6..e0b8fe7 100644
--- a/frontend/src/utils/theme.js
+++ b/frontend/src/utils/theme.js
@@ -2,29 +2,29 @@ const LIGHT = "latte";
const DARK = "macchiato";
export function getSystemTheme() {
- return window.matchMedia("(prefers-color-scheme: dark)").matches
- ? DARK
- : LIGHT;
+ return window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? DARK
+ : LIGHT;
}
export function getStoredTheme() {
- return localStorage.getItem("theme");
+ return localStorage.getItem("theme");
}
export function getInitialTheme() {
- return getStoredTheme() || getSystemTheme();
+ return getStoredTheme() || getSystemTheme();
}
export function applyTheme(theme) {
- const root = document.documentElement;
+ const root = document.documentElement;
- root.classList.remove(LIGHT, DARK);
+ root.classList.remove(LIGHT, DARK);
- root.classList.add(theme);
+ root.classList.add(theme);
- localStorage.setItem("theme", theme);
+ localStorage.setItem("theme", theme);
}
export function toggleTheme(current) {
- return current === DARK ? LIGHT : DARK;
+ return current === DARK ? LIGHT : DARK;
}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 259c440..cc1f82e 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,8 +1,8 @@
export default {
- darkMode: "class",
- content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
- theme: {
- extend: {},
- },
- plugins: [],
+ darkMode: "class",
+ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
};
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index a8a5dda..ff5bb18 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -4,9 +4,9 @@ import babel from "@rolldown/plugin-babel";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
- plugins: [
- tailwindcss(),
- react(),
- babel({ presets: [reactCompilerPreset()] }),
- ],
+ plugins: [
+ tailwindcss(),
+ react(),
+ babel({ presets: [reactCompilerPreset()] }),
+ ],
});