AramJonghu/aramjonghu-site
1
0
Fork 0
mirror of https://git.aramjonghu.nl/AramJonghu/aramjonghu-site.git synced 2026-06-07 01:28:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Prettier through whole project. Updated home page to include

Browse Source 
introduction. Includes container for projects, systems, and about
section with animation.
This commit is contained in:
AramJonghu
2026-04-21 00:36:02 +02:00
parent 9d7215968c
commit 9b3c7e9a4d
21 changed files with 265 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Home.jsx
+93 -5
View File
@@ -1,9 +1,97 @@
export default function Home({}) {
import { useState } from "react";
export default function Home() {
const [active, setActive] = useState("projects");
return (
<>
<div className="p-8 text-center">
<h1 className="text-ctp-text text-4xl">Under Construction</h1>
<div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6">
<div className="w-full max-w-6xl text-center">
<h1 className="text-4xl font-bold text-ctp-mauve">
Aram Jonghu
</h1>
<p className="mt-4">
Software engineer building systems, services, and
experiments across a self-hosted environment.
</p>
<p className="mt-3">
This site acts as a hub for projects, infrastructure, and
personal tooling.
</p>
<div className="mt-10 border rounded p-4">
<div className="flex flex-wrap justify-center gap-12">
<button
onClick={() => setActive("projects")}
className={`ui-btn ${
active === "projects" ? "ui-btn-active" : ""
}`}
>
Projects
</button>
<button
onClick={() => setActive("systems")}
className={`ui-btn ${
active === "systems" ? "ui-btn-active" : ""
}`}
>
Systems
</button>
<button
onClick={() => setActive("about")}
className={`ui-btn ${
active === "about" ? "ui-btn-active" : ""
}`}
>
About
</button>
</div>
<div className="mt-6 text-left relative min-h-20">
<div
className={`transition-all duration-300 ${
active === "projects"
? "opacity-100 translate-y-0"
: "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
}`}
>
<h2 className="text-2xl font-bold text-ctp-mauve">
Projects
</h2>
<p>Project content</p>
</div>
<div
className={`transition-all duration-300 ${
active === "systems"
? "opacity-100 translate-y-0"
: "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
}`}
>
<h2 className="text-2xl font-bold text-ctp-mauve">
Systems
</h2>
<p>Systems content</p>
</div>
<div
className={`transition-all duration-300 ${
active === "about"
? "opacity-100 translate-y-0"
: "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
}`}
>
<h2 className="text-2xl font-bold text-ctp-mauve">
About
</h2>
<p>About content</p>
</div>
</div>
</div>
</div>
</>
</div>
);
}