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() {
return (
<>
<div className="mb-12">
<div className="mb-16">
<div className="flex items-center gap-3 mb-4">
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
archive
@@ -20,7 +20,7 @@ export default function ArchivePage() {
<h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
Earlier Work
</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
representative of current work.
</p>
@@ -43,11 +43,11 @@ export default function ArchivePage() {
{project.year}
</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}
</span>
</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}
</p>
<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 (
<>
{/* Header */}
<div className="mb-12">
<div className="mb-16">
<div className="flex items-center gap-3 mb-4">
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
lerkolabs
@@ -90,7 +90,7 @@ export default function HomelabPage() {
<h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
Home Infrastructure Lab
</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
practice. Running 24/7 on production-grade hardware with real network segmentation,
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">
{label}
</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>
@@ -151,7 +151,7 @@ export default function HomelabPage() {
<td className="font-mono text-[var(--color-text-label)] py-2.5 pr-6">
{v.subnet}
</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>
))}
</tbody>
@@ -187,7 +187,7 @@ export default function HomelabPage() {
<p className="font-mono text-xs text-[var(--color-text)] mb-0.5">
{svc.name}
</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}
</p>
</div>
@@ -213,13 +213,13 @@ export default function HomelabPage() {
key={adr.title}
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-sans text-xs text-[var(--color-text-dim)] leading-relaxed mb-1.5">
<span className="text-[var(--color-text-label)]">decision: </span>
<p className="font-mono text-sm text-[var(--color-text)] mb-2">{adr.title}</p>
<p className="font-sans text-sm text-[var(--color-text)] leading-relaxed mb-1.5 opacity-75">
<span className="text-[var(--color-text-label)] opacity-100">decision: </span>
{adr.decision}
</p>
<p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed">
<span className="text-[var(--color-text-label)]">why: </span>
<p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
<span className="text-[var(--color-text-label)] opacity-100">why: </span>
{adr.why}
</p>
</div>
@@ -229,8 +229,8 @@ export default function HomelabPage() {
{/* GitHub CTA */}
<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-sans text-xs text-[var(--color-text-dim)] mb-3">
<p className="font-mono text-sm text-[var(--color-text-label)] mb-1">lerkolabs on GitHub</p>
<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.
</p>
<a

4
src/components/Hero.tsx
View File

@@ -2,7 +2,7 @@ import Image from "next/image";
export default function Hero() {
return (
<section className="mb-12">
<section className="mb-16">
{/* Section header */}
<div className="flex items-center gap-3 mb-6">
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
@@ -31,7 +31,7 @@ export default function Hero() {
</p>
</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
job title implies. Games, AI tooling, mobile apps, and a homelab
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) {
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">
<a
href={project.githubUrl}
@@ -34,7 +34,7 @@ export default function ProjectCard({ project }: Props) {
</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}
</p>

4
src/components/Skills.tsx
View File

@@ -32,14 +32,14 @@ export default function Skills() {
{skillGroups.map(({ label, skills }, i) => (
<div
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)]" : ""
}`}
>
<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-xs text-[var(--color-text)]">
<span className="font-mono text-sm text-[var(--color-text)]">
{skills.join(" · ")}
</span>
</div>

4
src/components/Widget.tsx
View File

@@ -16,8 +16,8 @@ export default function Widget({
children,
}: WidgetProps) {
return (
<Tag className={`mb-12 ${className ?? ""}`}>
<div className="flex items-center gap-3 mb-6">
<Tag className={`mb-16 ${className ?? ""}`}>
<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">
{title}
</span>