diff --git a/.gitignore b/.gitignore
old mode 100755
new mode 100644
index 2c3db25..69f33a2
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,42 @@
-nextcloud/
+.git/
+.gitattributes
+
+.idea/
+.vscode/
+.settings/
+.classpath
+.project
+
+target/
+backend/target/
+.mvn/
+backend/.mvn/
+**/target/
+
+.DS_Store
+Thumbs.db
+
+*.pid
+*.log
+docker-compose.override.yml
+
+*.log
+*.tmp
+*.swp
+*.bak
+
+frontend/node_modules/
+frontend/dist/
+frontend/build/
+frontend/package-lock.json
+
+.env
+.env.local
+*.iml
+
+*storybook.log
+storybook-static
+
+*.mp3
+*.mp4
+*.webm
diff --git a/composer.json b/composer.json
deleted file mode 100755
index 7a73a41..0000000
--- a/composer.json
+++ /dev/null
@@ -1,2 +0,0 @@
-{
-}
\ No newline at end of file
diff --git a/favicons/android-chrome-192x192.png b/favicons/android-chrome-192x192.png
deleted file mode 100755
index b682129..0000000
Binary files a/favicons/android-chrome-192x192.png and /dev/null differ
diff --git a/favicons/android-chrome-512x512.png b/favicons/android-chrome-512x512.png
deleted file mode 100755
index 298c358..0000000
Binary files a/favicons/android-chrome-512x512.png and /dev/null differ
diff --git a/favicons/apple-touch-icon.png b/favicons/apple-touch-icon.png
deleted file mode 100755
index f29b1d5..0000000
Binary files a/favicons/apple-touch-icon.png and /dev/null differ
diff --git a/favicons/favicon-16x16.png b/favicons/favicon-16x16.png
deleted file mode 100755
index f28bed1..0000000
Binary files a/favicons/favicon-16x16.png and /dev/null differ
diff --git a/favicons/favicon-32x32.png b/favicons/favicon-32x32.png
deleted file mode 100755
index 893876a..0000000
Binary files a/favicons/favicon-32x32.png and /dev/null differ
diff --git a/favicons/favicon.ico b/favicons/favicon.ico
deleted file mode 100755
index 7144346..0000000
Binary files a/favicons/favicon.ico and /dev/null differ
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..e16d995
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,18 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+
+Note: This will impact Vite dev & build performances.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
new file mode 100644
index 0000000..4fa125d
--- /dev/null
+++ b/frontend/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{js,jsx}'],
+ extends: [
+ js.configs.recommended,
+ reactHooks.configs.flat.recommended,
+ reactRefresh.configs.vite,
+ ],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ parserOptions: {
+ ecmaVersion: 'latest',
+ ecmaFeatures: { jsx: true },
+ sourceType: 'module',
+ },
+ },
+ rules: {
+ 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+ },
+ },
+])
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..13627cc
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ aramjonghu-site
+
+
+
+
+
+
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..983d232
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "aramjonghu-site",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "eslint .",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@tailwindcss/vite": "^4.2.2",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4",
+ "tailwindcss": "^4.2.2"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.29.0",
+ "@catppuccin/tailwindcss": "^1.0.0",
+ "@eslint/js": "^9.39.4",
+ "@rolldown/plugin-babel": "^0.2.2",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
+ "babel-plugin-react-compiler": "^1.0.0",
+ "eslint": "^9.39.4",
+ "eslint-plugin-react-hooks": "^7.0.1",
+ "eslint-plugin-react-refresh": "^0.5.2",
+ "globals": "^17.4.0",
+ "vite": "^8.0.4"
+ }
+}
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/frontend/public/favicon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/public/icons.svg b/frontend/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/frontend/public/icons.svg
@@ -0,0 +1,24 @@
+
diff --git a/frontend/src/App.css b/frontend/src/App.css
new file mode 100644
index 0000000..8330cbe
--- /dev/null
+++ b/frontend/src/App.css
@@ -0,0 +1,187 @@
+@import "tailwindcss";
+@import "@catppuccin/tailwindcss/macchiato.css";
+
+.counter {
+ font-size: 16px;
+ padding: 5px 10px;
+ border-radius: 5px;
+ color: var(--accent);
+ background: var(--accent-bg);
+ border: 2px solid transparent;
+ transition: border-color 0.3s;
+ margin-bottom: 24px;
+
+ &:hover {
+ border-color: var(--accent-border);
+ }
+ &:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+ }
+}
+
+.hero {
+ position: relative;
+
+ .base,
+ .framework,
+ .vite {
+ inset-inline: 0;
+ margin: 0 auto;
+ }
+
+ .base {
+ width: 170px;
+ position: relative;
+ z-index: 0;
+ }
+
+ .framework,
+ .vite {
+ position: absolute;
+ }
+
+ .framework {
+ z-index: 1;
+ top: 34px;
+ height: 28px;
+ transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+ scale(1.4);
+ }
+
+ .vite {
+ z-index: 0;
+ top: 107px;
+ height: 26px;
+ width: auto;
+ transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+ scale(0.8);
+ }
+}
+
+#center {
+ display: flex;
+ flex-direction: column;
+ gap: 25px;
+ place-content: center;
+ place-items: center;
+ flex-grow: 1;
+
+ @media (max-width: 1024px) {
+ padding: 32px 20px 24px;
+ gap: 18px;
+ }
+}
+
+#next-steps {
+ display: flex;
+ border-top: 1px solid var(--border);
+ text-align: left;
+
+ & > div {
+ flex: 1 1 0;
+ padding: 32px;
+ @media (max-width: 1024px) {
+ padding: 24px 20px;
+ }
+ }
+
+ .icon {
+ margin-bottom: 16px;
+ width: 22px;
+ height: 22px;
+ }
+
+ @media (max-width: 1024px) {
+ flex-direction: column;
+ text-align: center;
+ }
+}
+
+#docs {
+ border-right: 1px solid var(--border);
+
+ @media (max-width: 1024px) {
+ border-right: none;
+ border-bottom: 1px solid var(--border);
+ }
+}
+
+#next-steps ul {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ gap: 8px;
+ margin: 32px 0 0;
+
+ .logo {
+ height: 18px;
+ }
+
+ a {
+ color: var(--text-h);
+ font-size: 16px;
+ border-radius: 6px;
+ background: var(--social-bg);
+ display: flex;
+ padding: 6px 12px;
+ align-items: center;
+ gap: 8px;
+ text-decoration: none;
+ transition: box-shadow 0.3s;
+
+ &:hover {
+ box-shadow: var(--shadow);
+ }
+ .button-icon {
+ height: 18px;
+ width: 18px;
+ }
+ }
+
+ @media (max-width: 1024px) {
+ margin-top: 20px;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ li {
+ flex: 1 1 calc(50% - 8px);
+ }
+
+ a {
+ width: 100%;
+ justify-content: center;
+ box-sizing: border-box;
+ }
+ }
+}
+
+#spacer {
+ height: 88px;
+ border-top: 1px solid var(--border);
+ @media (max-width: 1024px) {
+ height: 48px;
+ }
+}
+
+.ticks {
+ position: relative;
+ width: 100%;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ top: -4.5px;
+ border: 5px solid transparent;
+ }
+
+ &::before {
+ left: 0;
+ border-left-color: var(--border);
+ }
+ &::after {
+ right: 0;
+ border-right-color: var(--border);
+ }
+}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
new file mode 100644
index 0000000..0aa8e46
--- /dev/null
+++ b/frontend/src/App.jsx
@@ -0,0 +1,14 @@
+import "./App.css";
+
+import Layout from "./components/Layout";
+import Home from "./pages/Home";
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+export default App;
diff --git a/frontend/src/assets/images/aku.png b/frontend/src/assets/images/aku.png
new file mode 100644
index 0000000..ff2d4ac
Binary files /dev/null and b/frontend/src/assets/images/aku.png differ
diff --git a/frontend/src/assets/images/forgejo.svg b/frontend/src/assets/images/forgejo.svg
new file mode 100644
index 0000000..04df0a5
--- /dev/null
+++ b/frontend/src/assets/images/forgejo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
new file mode 100644
index 0000000..ac9b37b
--- /dev/null
+++ b/frontend/src/components/Footer.jsx
@@ -0,0 +1,24 @@
+import forgejo from "../assets/images/forgejo.svg";
+
+export default function Footer() {
+ const currentYear = new Date().getFullYear();
+
+ const goToRepo = () => {
+ window.location.href = "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site";
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
new file mode 100644
index 0000000..3aa189e
--- /dev/null
+++ b/frontend/src/components/Header.jsx
@@ -0,0 +1,53 @@
+import Aku from "../assets/images/aku.png";
+
+export default function Header() {
+ const navItems = [
+ {
+ label: "Nextcloud",
+ url: "https://aramjonghu.nl/nextcloud",
+ },
+ {
+ label: "Navidrome",
+ url: "https://music.aramjonghu.nl",
+ },
+ {
+ label: "Forgejo Git",
+ url: "https://git.aramjonghu.nl",
+ },
+ {
+ label: "Stream",
+ url: "https://stream.aramjonghu.nl",
+ },
+ {
+ label: "SearXNG",
+ url: "https://xng.aramjonghu.nl",
+ },
+ ];
+
+ const goHome = () => {
+ window.location.href = "/";
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
new file mode 100644
index 0000000..8b98128
--- /dev/null
+++ b/frontend/src/components/Layout.jsx
@@ -0,0 +1,16 @@
+import Footer from "./Footer";
+import Header from "./Header";
+
+export default function Layout({ children }) {
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..2c84af0
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,111 @@
+:root {
+ --text: #6b6375;
+ --text-h: #08060d;
+ --bg: #fff;
+ --border: #e5e4e7;
+ --code-bg: #f4f3ec;
+ --accent: #aa3bff;
+ --accent-bg: rgba(170, 59, 255, 0.1);
+ --accent-border: rgba(170, 59, 255, 0.5);
+ --social-bg: rgba(244, 243, 236, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+ --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+ --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+ --mono: ui-monospace, Consolas, monospace;
+
+ font: 18px/145% var(--sans);
+ letter-spacing: 0.18px;
+ color-scheme: light dark;
+ color: var(--text);
+ background: var(--bg);
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ @media (max-width: 1024px) {
+ font-size: 16px;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text: #9ca3af;
+ --text-h: #f3f4f6;
+ --bg: #16171d;
+ --border: #2e303a;
+ --code-bg: #1f2028;
+ --accent: #c084fc;
+ --accent-bg: rgba(192, 132, 252, 0.15);
+ --accent-border: rgba(192, 132, 252, 0.5);
+ --social-bg: rgba(47, 48, 58, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+ }
+
+ #social .button-icon {
+ filter: invert(1) brightness(2);
+ }
+}
+
+body {
+ margin: 0;
+}
+
+#root {
+ width: 1126px;
+ max-width: 100%;
+ margin: 0 auto;
+ text-align: center;
+ border-inline: 1px solid var(--border);
+ min-height: 100svh;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+}
+
+h1,
+h2 {
+ font-family: var(--heading);
+ font-weight: 500;
+ color: var(--text-h);
+}
+
+h1 {
+ font-size: 56px;
+ letter-spacing: -1.68px;
+ margin: 32px 0;
+ @media (max-width: 1024px) {
+ font-size: 36px;
+ margin: 20px 0;
+ }
+}
+h2 {
+ font-size: 24px;
+ line-height: 118%;
+ letter-spacing: -0.24px;
+ margin: 0 0 8px;
+ @media (max-width: 1024px) {
+ font-size: 20px;
+ }
+}
+p {
+ margin: 0;
+}
+
+code,
+.counter {
+ font-family: var(--mono);
+ display: inline-flex;
+ border-radius: 4px;
+ color: var(--text-h);
+}
+
+code {
+ font-size: 15px;
+ line-height: 135%;
+ padding: 4px 8px;
+ background: var(--code-bg);
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
new file mode 100644
index 0000000..b9a1a6d
--- /dev/null
+++ b/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+
+
+ ,
+)
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
new file mode 100644
index 0000000..a6c794e
--- /dev/null
+++ b/frontend/src/pages/Home.jsx
@@ -0,0 +1,9 @@
+export default function Home({}) {
+ return (
+ <>
+
+
Under Construction
+
+ >
+ );
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..a8a5dda
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react, { reactCompilerPreset } from "@vitejs/plugin-react";
+import babel from "@rolldown/plugin-babel";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+ plugins: [
+ tailwindcss(),
+ react(),
+ babel({ presets: [reactCompilerPreset()] }),
+ ],
+});
diff --git a/gameron.php b/gameron.php
deleted file mode 100755
index b3d9bbc..0000000
--- a/gameron.php
+++ /dev/null
@@ -1 +0,0 @@
-
-
-
-Welcome to nginx!
-
-
-
-Welcome to nginx!
-If you see this page, the nginx web server is successfully installed and
-working. Further configuration is required.
-
-For online documentation and support please refer to
-nginx.org.
-Commercial support is available at
-nginx.com.
-
-Thank you for using nginx.
-
-
diff --git a/index.php b/index.php
deleted file mode 100755
index 8975bd9..0000000
--- a/index.php
+++ /dev/null
@@ -1,135 +0,0 @@
-
-
-
-
-
-
- AramJonghu
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Grid Item 1
-
This is some content for grid item 1.
-
-
-
Grid Item 2
-
This is some content for grid item 2.
-
-
-
Grid Item 3
-
This is some content for grid item 3.
-
-
-
Grid Item 4
-
This is some content for grid item 4.
-
-
-
Grid Item 5
-
This is some content for grid item 5.
-
-
-
Grid Item 6
-
This is some content for grid item 6.
-
-
-
Grid Item 7
-
This is some content for grid item 7.
-
-
-
Grid Item 8
-
This is some content for grid item 8.
-
-
-
Grid Item 9
-
This is some content for grid item 9.
-
-
-
Grid Item 10
-
This is some content for grid item 10.
-
-
-
Grid Item 11
-
This is some content for grid item 11.
-
-
-
Grid Item 12
-
This is some content for grid item 12.
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/info.php b/info.php
deleted file mode 100755
index 147cebc..0000000
--- a/info.php
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/socials.php b/socials.php
deleted file mode 100755
index b3d9bbc..0000000
--- a/socials.php
+++ /dev/null
@@ -1 +0,0 @@
-