mirror of
https://git.aramjonghu.nl/AramJonghu/aramjonghu-site.git
synced 2026-06-07 01:28:24 +02:00
prettier and package.json fix
This commit is contained in:
+111
-106
@@ -2,115 +2,120 @@ 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: (
|
||||
<>
|
||||
<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>,
|
||||
},
|
||||
];
|
||||
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>
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user