79d3fb142e
Bump body/description text from text-xs to text-sm. Lighten body copy from color-text-dim/label (#444/#666) to near-white with opacity. Increase row padding, card padding, and inter-section spacing to match GitHub Changelog-style breathing room.
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import Widget from "@/components/Widget";
|
|
|
|
const skillGroups = [
|
|
{
|
|
label: "Languages",
|
|
skills: ["JavaScript", "TypeScript", "HTML", "CSS"],
|
|
},
|
|
{
|
|
label: "Frontend",
|
|
skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
|
|
},
|
|
{
|
|
label: "Desktop & Tools",
|
|
skills: ["Electron", "Node.js", "REST APIs", "Git", "Docker", "TDD"],
|
|
},
|
|
{
|
|
label: "Infrastructure",
|
|
skills: ["Proxmox", "pfSense", "VLANs", "WireGuard", "Linux", "Caddy"],
|
|
},
|
|
{
|
|
label: "Practices",
|
|
skills: ["Agile / Scrum", "Relational Databases", "Self-hosting"],
|
|
},
|
|
];
|
|
|
|
const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
|
|
|
|
export default function Skills() {
|
|
return (
|
|
<Widget title="skills" badge={totalCount} as="section">
|
|
<div className="flex flex-col">
|
|
{skillGroups.map(({ label, skills }, i) => (
|
|
<div
|
|
key={label}
|
|
className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-4 ${
|
|
i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : ""
|
|
}`}
|
|
>
|
|
<span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
|
|
{label}
|
|
</span>
|
|
<span className="font-mono text-sm text-[var(--color-text)]">
|
|
{skills.join(" · ")}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Widget>
|
|
);
|
|
}
|