aramjonghu-site/frontend/src/pages/Home.jsx

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 [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 sections = [
    {
      id: "projects",
      title: "Projects",
      content: (
        <>
          <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
            Projects
          </h1>
          <div className="flex justify-center mb-6">
            <button
              onClick={prevProject}
              className="px-3 py-1 rounded ui-btn text-ctp-text"
            >
              ◀︎ Prev
            </button>
            <span className="self-center mx-6 font-medium">
              {projectList[projIdx].name} ({projIdx + 1}/{projectList.length})
            </span>
            <button
              onClick={nextProject}
              className="px-3 py-1 rounded ui-btn text-ctp-text"
            >
              Next ▶︎
            </button>
          </div>
          <ProjectsReadme repoUrl={projectList[projIdx].url} />
        </>
      ),
    },
    {
      id: "systems",
      title: "Systems",
      content: <p>Systems content goes here.</p>,
    },
    {
      id: "about",
      title: "About",
      content: <p>About content goes here.</p>,
    },
  ];

  return (
    <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">AramJonghu</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 mb-6">
            {sections.map((section) => (
              <button
                key={section.id}
                onClick={() => setActiveTab(section.id)}
                className={`ui-btn ${
                  activeTab === section.id ? "ui-btn-active" : ""
                }`}
              >
                {section.title}
              </button>
            ))}
          </div>
          <div className="mt-6 text-left relative min-h-20">
            {sections.map((section) => (
              <div
                key={section.id}
                className={`transition-all duration-300 ${
                  activeTab === section.id
                    ? "opacity-100 translate-y-0"
                    : "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
                }`}
              >
                {section.content}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}