feat: updated app pages
This commit is contained in:
+119
-59
@@ -1,77 +1,137 @@
|
||||
import type { Metadata } from "next";
|
||||
import Hero from "@/components/content/Hero";
|
||||
import SectionLabel from "@/components/layout/SectionLabel";
|
||||
import Collapsible from "@/components/ui/Collapsible";
|
||||
import { hardware, editorAndShell, aiTools } from "@/constants";
|
||||
import type { ToolGroup } from "@/constants/uses";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Uses — Angel Mankel",
|
||||
};
|
||||
|
||||
type Section =
|
||||
| { label: string; kind: "list"; items: string[] }
|
||||
| { label: string; kind: "prose"; paragraphs: string[] };
|
||||
|
||||
const sections: Section[] = [
|
||||
{
|
||||
label: "Hardware",
|
||||
kind: "list",
|
||||
items: [
|
||||
"Custom desktop — i9-12900H, 32GB RAM, Intel Iris Xe",
|
||||
"Nobara Linux 43 · KDE Plasma 6 · Wayland",
|
||||
"Headphones / keyboard / monitor — placeholder",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Editor & Shell",
|
||||
kind: "list",
|
||||
items: [
|
||||
"VS Code with a personal extension pack — placeholder",
|
||||
"Bash / zsh — placeholder for shell",
|
||||
"JetBrains Mono as the editor font",
|
||||
"Theme — placeholder",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "AI Workflow",
|
||||
kind: "prose",
|
||||
paragraphs: [
|
||||
"Claude Code is the daily driver — custom slash commands, MCP servers wired into my editor, and agent workflows that handle the repeat work so I can stay in the design problem.",
|
||||
"Placeholder paragraph two — name a specific workflow and the time it saves.",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Self-hosting",
|
||||
kind: "list",
|
||||
items: [
|
||||
"Bare-metal home server, exposed to the internet through Traefik",
|
||||
"This site lives on it — Next.js standalone build, no managed host",
|
||||
"Other services — placeholder",
|
||||
],
|
||||
},
|
||||
];
|
||||
function ToolSection({
|
||||
label,
|
||||
groups,
|
||||
}: {
|
||||
label: string;
|
||||
groups: ToolGroup[];
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<SectionLabel label={label} />
|
||||
<div className="space-y-3">
|
||||
{groups.map((group) => (
|
||||
<Collapsible
|
||||
key={group.label}
|
||||
title={group.label}
|
||||
subtitle={`${group.items.length} items`}
|
||||
>
|
||||
<ul className="space-y-2 text-[14px]">
|
||||
{group.items.map((item) => (
|
||||
<li key={item.name} className="flex flex-col gap-0.5">
|
||||
<span className="text-neutral-100">{item.name}</span>
|
||||
{item.description && (
|
||||
<span className="text-neutral-400">{item.description}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Collapsible>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function UsesPage() {
|
||||
return (
|
||||
<div className="space-y-14">
|
||||
<Hero label="Uses" subtitle="What I reach for daily." />
|
||||
<Hero label="Uses" subtitle="The gear, software, and setup behind my work." />
|
||||
|
||||
{sections.map((section) => (
|
||||
<section key={section.label} className="space-y-4">
|
||||
<SectionLabel label={section.label} />
|
||||
{section.kind === "list" ? (
|
||||
<ul className="space-y-2 text-[15px] leading-[1.65] text-neutral-200">
|
||||
{section.items.map((item) => (
|
||||
<li key={item}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="space-y-4 text-[15px] leading-[1.65] text-neutral-200">
|
||||
{section.paragraphs.map((p) => (
|
||||
<p key={p}>{p}</p>
|
||||
<section className="space-y-4">
|
||||
<SectionLabel label="Hardware" />
|
||||
|
||||
<div className="space-y-10">
|
||||
{hardware.map((group) => (
|
||||
<div key={group.label} className="space-y-4">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-neutral-500">
|
||||
{group.label}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{group.machines.map((machine) => (
|
||||
<Collapsible
|
||||
key={machine.name}
|
||||
title={machine.name}
|
||||
subtitle={machine.role}
|
||||
>
|
||||
<dl className="space-y-3 text-[14px]">
|
||||
<div className="flex flex-col gap-1 sm:flex-row sm:gap-3">
|
||||
<dt className="w-20 shrink-0 text-neutral-500">OS</dt>
|
||||
<dd className="text-neutral-200">{machine.os}</dd>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 sm:flex-row sm:gap-3">
|
||||
<dt className="w-20 shrink-0 text-neutral-500">Specs</dt>
|
||||
<dd className="flex flex-wrap gap-1.5">
|
||||
{machine.specs.map((spec) => (
|
||||
<span
|
||||
key={spec}
|
||||
className="rounded-md border border-neutral-800 bg-neutral-900 px-2 py-0.5 text-[12px] text-neutral-300"
|
||||
>
|
||||
{spec}
|
||||
</span>
|
||||
))}
|
||||
</dd>
|
||||
</div>
|
||||
{machine.services && (
|
||||
<div className="flex flex-col gap-1 sm:flex-row sm:gap-3">
|
||||
<dt className="w-20 shrink-0 text-neutral-500">
|
||||
Running
|
||||
</dt>
|
||||
<dd>
|
||||
<ul className="space-y-1 text-neutral-200">
|
||||
{machine.services.map((service) => (
|
||||
<li
|
||||
key={service}
|
||||
className="before:mr-2 before:text-neutral-600 before:content-['–']"
|
||||
>
|
||||
{service}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
</Collapsible>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
))}
|
||||
|
||||
{group.extras?.map((extra) => (
|
||||
<Collapsible
|
||||
key={extra.label}
|
||||
title={extra.label}
|
||||
subtitle={`${extra.items.length} items`}
|
||||
>
|
||||
<ul className="space-y-1.5 text-[14px] text-neutral-200">
|
||||
{extra.items.map((item) => (
|
||||
<li
|
||||
key={item}
|
||||
className="before:mr-2 before:text-neutral-600 before:content-['–']"
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Collapsible>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ToolSection label="Editor & Shell" groups={editorAndShell} />
|
||||
<ToolSection label="AI Tools" groups={aiTools} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user