lerko/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

style: improve readability across all pages

Browse Source 
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.
This commit is contained in:
lerko96
2026-04-12 20:00:05 -04:00
parent b3fc7b2114
commit 79d3fb142e
6 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/archive/page.tsx
View File

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
export default function ArchivePage() { export default function ArchivePage() {
return ( return (
<> <>
<div className="mb-12"> <div className="mb-16">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase"> <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
archive archive
@@ -20,7 +20,7 @@ export default function ArchivePage() {
<h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3"> <h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
Earlier Work Earlier Work
</h1> </h1>
<p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-xl"> <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
Experiments, browser extensions, and bootcamp projects. Kept here for context — not Experiments, browser extensions, and bootcamp projects. Kept here for context — not
representative of current work. representative of current work.
</p> </p>
@@ -43,11 +43,11 @@ export default function ArchivePage() {
{project.year} {project.year}
</span> </span>
)} )}
<span className="font-mono text-xs text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate"> <span className="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
{project.title} {project.title}
</span> </span>
</div> </div>
<p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed"> <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
{project.description} {project.description}
</p> </p>
<div className="flex flex-wrap gap-x-3 gap-y-0.5"> <div className="flex flex-wrap gap-x-3 gap-y-0.5">

24
src/app/homelab/page.tsx
View File

@@ -80,7 +80,7 @@ export default function HomelabPage() {
return ( return (
<> <>
{/* Header */} {/* Header */}
<div className="mb-12"> <div className="mb-16">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase"> <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
lerkolabs lerkolabs
@@ -90,7 +90,7 @@ export default function HomelabPage() {
<h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3"> <h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
Home Infrastructure Lab Home Infrastructure Lab
</h1> </h1>
<p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-2xl"> <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
Personal infrastructure environment for learning, self-hosting, and operational Personal infrastructure environment for learning, self-hosting, and operational
practice. Running 24/7 on production-grade hardware with real network segmentation, practice. Running 24/7 on production-grade hardware with real network segmentation,
SSO, monitoring, and IaC-style documentation. SSO, monitoring, and IaC-style documentation.
@@ -108,7 +108,7 @@ export default function HomelabPage() {
<p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-1"> <p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-1">
{label} {label}
</p> </p>
<p className="font-mono text-xs text-[var(--color-text)]">{value}</p> <p className="font-mono text-sm text-[var(--color-text)]">{value}</p>
</div> </div>
))} ))}
</div> </div>
@@ -151,7 +151,7 @@ export default function HomelabPage() {
<td className="font-mono text-[var(--color-text-label)] py-2.5 pr-6"> <td className="font-mono text-[var(--color-text-label)] py-2.5 pr-6">
{v.subnet} {v.subnet}
</td> </td>
<td className="font-sans text-[var(--color-text-label)] py-2.5">{v.purpose}</td> <td className="font-sans text-sm text-[var(--color-text)] py-2.5 opacity-80">{v.purpose}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@@ -187,7 +187,7 @@ export default function HomelabPage() {
<p className="font-mono text-xs text-[var(--color-text)] mb-0.5"> <p className="font-mono text-xs text-[var(--color-text)] mb-0.5">
{svc.name} {svc.name}
</p> </p>
<p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed"> <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
{svc.description} {svc.description}
</p> </p>
</div> </div>
@@ -213,13 +213,13 @@ export default function HomelabPage() {
key={adr.title} key={adr.title}
className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-4 py-4" className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-4 py-4"
> >
<p className="font-mono text-xs text-[var(--color-text)] mb-2">{adr.title}</p> <p className="font-mono text-sm text-[var(--color-text)] mb-2">{adr.title}</p>
<p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed mb-1.5"> <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed mb-1.5 opacity-75">
<span className="text-[var(--color-text-label)]">decision: </span> <span className="text-[var(--color-text-label)] opacity-100">decision: </span>
{adr.decision} {adr.decision}
</p> </p>
<p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed"> <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
<span className="text-[var(--color-text-label)]">why: </span> <span className="text-[var(--color-text-label)] opacity-100">why: </span>
{adr.why} {adr.why}
</p> </p>
</div> </div>
@@ -229,8 +229,8 @@ export default function HomelabPage() {
{/* GitHub CTA */} {/* GitHub CTA */}
<section className="border-t border-[var(--color-border)] pt-6"> <section className="border-t border-[var(--color-border)] pt-6">
<p className="font-mono text-xs text-[var(--color-text-label)] mb-1">lerkolabs on GitHub</p> <p className="font-mono text-sm text-[var(--color-text-label)] mb-1">lerkolabs on GitHub</p>
<p className="font-sans text-xs text-[var(--color-text-dim)] mb-3"> <p className="font-sans text-sm text-[var(--color-text)] mb-3 opacity-75">
Full documentation: VLAN maps, runbooks, service registry, config exports, and setup guides. Full documentation: VLAN maps, runbooks, service registry, config exports, and setup guides.
</p> </p>
<a <a

4
src/components/Hero.tsx
View File

@@ -2,7 +2,7 @@ import Image from "next/image";
export default function Hero() { export default function Hero() {
return ( return (
<section className="mb-12"> <section className="mb-16">
{/* Section header */} {/* Section header */}
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase"> <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
@@ -31,7 +31,7 @@ export default function Hero() {
</p> </p>
</div> </div>
<p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-lg"> <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-lg opacity-80">
I write software and run infrastructure that goes well past what my I write software and run infrastructure that goes well past what my
job title implies. Games, AI tooling, mobile apps, and a homelab job title implies. Games, AI tooling, mobile apps, and a homelab
running 20+ self-hosted services on segmented VLANs. Continuously running 20+ self-hosted services on segmented VLANs. Continuously

4
src/components/ProjectCard.tsx
View File

@@ -6,7 +6,7 @@ type Props = {
export default function ProjectCard({ project }: Props) { export default function ProjectCard({ project }: Props) {
return ( return (
<article className="border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-bright)] flex flex-col gap-3 p-4"> <article className="border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-bright)] flex flex-col gap-4 p-5">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<a <a
href={project.githubUrl} href={project.githubUrl}
@@ -34,7 +34,7 @@ export default function ProjectCard({ project }: Props) {
</div> </div>
</div> </div>
<p className="font-sans text-xs text-[var(--color-text-label)] leading-relaxed flex-1"> <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-75">
{project.description} {project.description}
</p> </p>

4
src/components/Skills.tsx
View File

@@ -32,14 +32,14 @@ export default function Skills() {
{skillGroups.map(({ label, skills }, i) => ( {skillGroups.map(({ label, skills }, i) => (
<div <div
key={label} key={label}
className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-3 ${ className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-4 ${
i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : "" 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"> <span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
{label} {label}
</span> </span>
<span className="font-mono text-xs text-[var(--color-text)]"> <span className="font-mono text-sm text-[var(--color-text)]">
{skills.join(" · ")} {skills.join(" · ")}
</span> </span>
</div> </div>

4
src/components/Widget.tsx
View File

@@ -16,8 +16,8 @@ export default function Widget({
children, children,
}: WidgetProps) { }: WidgetProps) {
return ( return (
<Tag className={`mb-12 ${className ?? ""}`}> <Tag className={`mb-16 ${className ?? ""}`}>
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-8">
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase whitespace-nowrap"> <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase whitespace-nowrap">
{title} {title}
</span> </span>