feat: terminal-noir redesign — widget system + design token overhaul
Replace cyan-green modern theme with terminal-noir aesthetic aligned to style-guide.md. Hard edges, monospace-first, linear transitions, no gradients. Introduce Widget component as the single repeatable section primitive: title bar with horizontal rule, optional badge/meta — all pages and sections now use this pattern (Glance-inspired data-driven layout). Design system changes (globals.css): - Palette: #0a0a0a bg, #111111 surface, #00cc44 status green, #cc2200 alert red - Drop Montserrat; Source Code Pro primary, system sans for prose only - Transitions: linear 120ms; no eased animations, no border-radius Component changes: - Nav: flat, border-bottom only, lowercase links - Hero: 56px square photo, status dot, @ email glyph - ProjectCard: flat bordered card, 2-col grid, no gradient tile - Skills: key-value rows with dot-separated values - Footer: minimal text links Pages: all sections wrapped in Widget; homelab uses gap-px grid for at-a-glance, services, and ADRs sections. Archive uses flat list layout. Data: remove gradient field from Project type; add optional year field
This commit is contained in:
lerko96
@@ -1,4 +1,5 @@
|
||||
import type { Metadata } from "next";
|
||||
import Widget from "@/components/Widget";
|
||||
import { archiveProjects } from "@/data/projects";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -9,51 +10,64 @@ export const metadata: Metadata = {
|
||||
export default function ArchivePage() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-14">
|
||||
<p className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-2">
|
||||
Archive
|
||||
</p>
|
||||
<h1 className="font-mono text-2xl font-bold text-[var(--color-text-light)] mb-4">
|
||||
<div className="mb-12">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
|
||||
archive
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
|
||||
</div>
|
||||
<h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
|
||||
Earlier Work
|
||||
</h1>
|
||||
<p className="text-[var(--color-grey-3)] text-sm leading-relaxed max-w-xl">
|
||||
Experiments, browser extensions, and bootcamp projects. Kept here for context — not representative of current work.
|
||||
<p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-xl">
|
||||
Experiments, browser extensions, and bootcamp projects. Kept here for context — not
|
||||
representative of current work.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
{archiveProjects.map((project) => (
|
||||
<a
|
||||
key={project.slug}
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group border border-[var(--color-grey-1)] rounded-lg p-6 bg-[var(--color-bg)] hover:border-[var(--color-green-darker)] transition-colors flex flex-col gap-4"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h2 className="font-mono text-sm font-semibold text-[var(--color-text-light)] group-hover:text-[var(--color-green)] transition-colors">
|
||||
{project.title}
|
||||
</h2>
|
||||
<i className="fas fa-arrow-up-right-from-square text-xs text-[var(--color-grey-2)] shrink-0 mt-0.5 group-hover:text-[var(--color-green)] transition-colors" aria-hidden="true" />
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-[var(--color-grey-3)] leading-relaxed flex-1">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{project.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="font-mono text-xs px-2 py-0.5 border border-[var(--color-grey-1)] text-[var(--color-grey-2)] rounded"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<Widget title="projects" badge={archiveProjects.length} as="section">
|
||||
<div className="flex flex-col gap-px bg-[var(--color-border)]">
|
||||
{archiveProjects.map((project) => (
|
||||
<a
|
||||
key={project.slug}
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-6 px-4 py-4 group"
|
||||
>
|
||||
<div className="flex flex-col gap-2 flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
{project.year && (
|
||||
<span className="font-mono text-xs text-[var(--color-text-dim)] shrink-0">
|
||||
{project.year}
|
||||
</span>
|
||||
)}
|
||||
<span className="font-mono text-xs 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">
|
||||
{project.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-x-3 gap-y-0.5">
|
||||
{project.tags.map((tag) => (
|
||||
<span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="font-mono text-xs text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
↗
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,59 +3,40 @@
|
||||
@variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
/* Colors */
|
||||
--color-green: #2bf3c4;
|
||||
--color-green-dark: #27bb98;
|
||||
--color-green-darker: #238770;
|
||||
--color-green-darkest: #1f4b40;
|
||||
|
||||
--color-bg: #272727;
|
||||
--color-bg-deep: #1b1b1b;
|
||||
--color-surface: #333333;
|
||||
|
||||
--color-grey-1: #4b4b4b;
|
||||
--color-grey-2: #707171;
|
||||
--color-grey-3: #999a9a;
|
||||
--color-grey-4: #c5c6c6;
|
||||
|
||||
--color-text: #c5c6c6;
|
||||
--color-text-muted: #999a9a;
|
||||
--color-text-light: #f7f9fb;
|
||||
/* Terminal-Noir palette */
|
||||
--color-bg: #0a0a0a;
|
||||
--color-surface: #111111;
|
||||
--color-surface-raised: #1a1a1a;
|
||||
--color-border: #2a2a2a;
|
||||
--color-border-bright: #444444;
|
||||
--color-text: #e8e8e8;
|
||||
--color-text-label: #666666;
|
||||
--color-text-dim: #444444;
|
||||
--color-accent-green: #00cc44;
|
||||
--color-accent-red: #cc2200;
|
||||
|
||||
/* Typography */
|
||||
--font-mono: "Source Code Pro", ui-monospace, monospace;
|
||||
--font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* Breakpoints */
|
||||
--breakpoint-xs: 576px;
|
||||
|
||||
/* Animations */
|
||||
--animate-fade-in: fadeIn 0.6s ease forwards;
|
||||
--animate-slide-up: slideUp 0.5s ease forwards;
|
||||
--animate-app-scale: appScale 0.4s ease forwards;
|
||||
--animate-fade-in: fadeIn 120ms linear forwards;
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes appScale {
|
||||
from { transform: scale(0.97); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Base */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background-color: var(--color-bg-deep);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-sans);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -64,6 +45,13 @@ html {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Default transitions — linear, fast */
|
||||
a,
|
||||
button {
|
||||
transition: color 120ms linear, border-color 120ms linear,
|
||||
background-color 120ms linear, opacity 120ms linear;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { Metadata } from "next";
|
||||
import Widget from "@/components/Widget";
|
||||
import { services, categoryOrder, categoryLabels } from "@/data/services";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -7,15 +8,27 @@ export const metadata: Metadata = {
|
||||
"Production-grade personal homelab: Proxmox, pfSense, 8 VLANs, WireGuard, Caddy, Authentik SSO, and 20+ self-hosted services.",
|
||||
};
|
||||
|
||||
const glanceStats = [
|
||||
{ label: "Hypervisor", value: "Proxmox VE" },
|
||||
{ label: "Firewall", value: "pfSense (Intel N100)" },
|
||||
{ label: "Switching", value: "TP-Link Omada (managed)" },
|
||||
{ label: "ISP", value: "AT&T Fiber 1 Gbps" },
|
||||
{ label: "VPN", value: "WireGuard (pfSense)" },
|
||||
{ label: "Reverse Proxy", value: "Caddy + Cloudflare DNS-01" },
|
||||
{ label: "Auth", value: "Authentik SSO" },
|
||||
{ label: "DNS", value: "Pi-hole → Unbound → Cloudflare" },
|
||||
{ label: "Containers", value: "9 LXC + 2 VMs" },
|
||||
];
|
||||
|
||||
const vlans = [
|
||||
{ id: "1000", name: "MGMT", subnet: "10.0.0.0/24", purpose: "Network equipment only" },
|
||||
{ id: "1010", name: "LAN", subnet: "10.1.0.0/24", purpose: "Trusted personal devices" },
|
||||
{ id: "1020", name: "Homelab", subnet: "10.2.0.0/24", purpose: "All self-hosted services" },
|
||||
{ id: "1030", name: "Guests", subnet: "10.3.0.0/24", purpose: "Internet only, RFC1918 blocked" },
|
||||
{ id: "1040", name: "IoT", subnet: "10.4.0.0/24", purpose: "Smart home, isolated" },
|
||||
{ id: "1050", name: "WFH", subnet: "10.5.0.0/24", purpose: "Work devices, no personal access" },
|
||||
{ id: "DMZ", name: "DMZ", subnet: "10.99.0.0/24", purpose: "Public-facing, hard-blocked internally" },
|
||||
{ id: "VPN", name: "VPN", subnet: "10.200.0.0/24", purpose: "WireGuard clients = LAN access" },
|
||||
{ id: "1000", name: "MGMT", subnet: "10.0.0.0/24", purpose: "Network equipment only" },
|
||||
{ id: "1010", name: "LAN", subnet: "10.1.0.0/24", purpose: "Trusted personal devices" },
|
||||
{ id: "1020", name: "Homelab", subnet: "10.2.0.0/24", purpose: "All self-hosted services" },
|
||||
{ id: "1030", name: "Guests", subnet: "10.3.0.0/24", purpose: "Internet only, RFC1918 blocked" },
|
||||
{ id: "1040", name: "IoT", subnet: "10.4.0.0/24", purpose: "Smart home, isolated" },
|
||||
{ id: "1050", name: "WFH", subnet: "10.5.0.0/24", purpose: "Work devices, no personal access" },
|
||||
{ id: "DMZ", name: "DMZ", subnet: "10.99.0.0/24", purpose: "Public-facing, hard-blocked internally" },
|
||||
{ id: "VPN", name: "VPN", subnet: "10.200.0.0/24", purpose: "WireGuard clients = LAN access" },
|
||||
];
|
||||
|
||||
const adrs = [
|
||||
@@ -58,8 +71,8 @@ const adrs = [
|
||||
{
|
||||
title: "Gitea CI/CD: Self-hosted runner with container build + SSH rsync deploy",
|
||||
decision:
|
||||
"act_runner v0.3.1 on Gitea LXC (10.99.0.22). Push to dev → node:22-alpine container builds Next.js → rsync out/ to Portfolio LXC → SSH docker rebuild. Runner WorkingDirectory=/opt/docker/gitea. Feature branches for daily work; merge to dev to deploy.",
|
||||
why: "Keeps the full pipeline internal — no GitHub Actions, no external runners. Build runs in an isolated Alpine container so the Gitea LXC isn't polluted. Portfolio LXC (10.99.0.23) just serves pre-built static files via nginx. Runner must be registered with the LXC IP (10.99.0.22:3000), not localhost — containers can't resolve localhost to the host. The .runner file must live in WorkingDirectory or the daemon crashes on start.",
|
||||
"act_runner v0.3.1 on Gitea LXC (10.99.0.22). Push to dev → node:22-alpine container builds Next.js → rsync out/ to Portfolio LXC → SSH docker rebuild.",
|
||||
why: "Keeps the full pipeline internal — no GitHub Actions, no external runners. Build runs in an isolated Alpine container so the Gitea LXC isn't polluted. Portfolio LXC (10.99.0.23) just serves pre-built static files via nginx.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -67,115 +80,116 @@ export default function HomelabPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="mb-16">
|
||||
<p className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-2">
|
||||
lerkolabs
|
||||
</p>
|
||||
<h1 className="font-mono text-2xl font-bold text-[var(--color-text-light)] mb-4">
|
||||
<div className="mb-12">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
|
||||
lerkolabs
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
|
||||
</div>
|
||||
<h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
|
||||
Home Infrastructure Lab
|
||||
</h1>
|
||||
<p className="text-[var(--color-grey-3)] text-sm leading-relaxed max-w-2xl">
|
||||
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.
|
||||
<p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-2xl">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* At a glance */}
|
||||
<section className="mb-16" aria-labelledby="glance-heading">
|
||||
<h2
|
||||
id="glance-heading"
|
||||
className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-6"
|
||||
>
|
||||
At a Glance
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{[
|
||||
{ label: "Hypervisor", value: "Proxmox VE" },
|
||||
{ label: "Firewall", value: "pfSense (Intel N100)" },
|
||||
{ label: "Switching", value: "TP-Link Omada (managed)" },
|
||||
{ label: "ISP", value: "AT&T Fiber 1 Gbps" },
|
||||
{ label: "VPN", value: "WireGuard (pfSense)" },
|
||||
{ label: "Reverse Proxy", value: "Caddy + Cloudflare DNS-01" },
|
||||
{ label: "Auth", value: "Authentik SSO" },
|
||||
{ label: "DNS", value: "Pi-hole → Unbound → Cloudflare" },
|
||||
{ label: "Containers", value: "9 LXC + 2 VMs" },
|
||||
].map(({ label, value }) => (
|
||||
{/* At a Glance */}
|
||||
<Widget title="at a glance" badge={glanceStats.length} as="section">
|
||||
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
|
||||
{glanceStats.map(({ label, value }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="border border-[var(--color-grey-1)] rounded-lg p-4 bg-[var(--color-bg)]"
|
||||
className="bg-[var(--color-surface)] px-4 py-3"
|
||||
>
|
||||
<p className="font-mono text-xs text-[var(--color-grey-2)] mb-1">{label}</p>
|
||||
<p className="font-mono text-sm text-[var(--color-text-light)]">{value}</p>
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</Widget>
|
||||
|
||||
{/* VLAN table */}
|
||||
<section className="mb-16" aria-labelledby="network-heading">
|
||||
<h2
|
||||
id="network-heading"
|
||||
className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-6"
|
||||
>
|
||||
Network — 8 Isolated VLANs
|
||||
</h2>
|
||||
<p className="text-xs text-[var(--color-grey-3)] mb-4">
|
||||
Default deny inter-VLAN policy. Each VLAN has explicit firewall rules for what it can reach.
|
||||
</p>
|
||||
<Widget
|
||||
title="network"
|
||||
meta="8 isolated vlans · default deny inter-vlan"
|
||||
as="section"
|
||||
>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<table className="w-full text-xs border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--color-grey-1)]">
|
||||
<th className="font-mono text-xs text-[var(--color-grey-2)] text-left py-2 pr-4 uppercase tracking-wider">VLAN</th>
|
||||
<th className="font-mono text-xs text-[var(--color-grey-2)] text-left py-2 pr-4 uppercase tracking-wider">Name</th>
|
||||
<th className="font-mono text-xs text-[var(--color-grey-2)] text-left py-2 pr-4 uppercase tracking-wider">Subnet</th>
|
||||
<th className="font-mono text-xs text-[var(--color-grey-2)] text-left py-2 uppercase tracking-wider">Purpose</th>
|
||||
<tr className="border-b border-[var(--color-border)]">
|
||||
<th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
|
||||
VLAN
|
||||
</th>
|
||||
<th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th className="font-mono text-[var(--color-text-dim)] text-left py-2 pr-6 uppercase tracking-wider">
|
||||
Subnet
|
||||
</th>
|
||||
<th className="font-mono text-[var(--color-text-dim)] text-left py-2 uppercase tracking-wider">
|
||||
Purpose
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{vlans.map((v) => (
|
||||
<tr key={v.id} className="border-b border-[var(--color-grey-1)] border-opacity-30 hover:bg-[var(--color-bg)] transition-colors">
|
||||
<td className="font-mono text-xs text-[var(--color-green)] py-2.5 pr-4">{v.id}</td>
|
||||
<td className="font-mono text-sm text-[var(--color-text-light)] py-2.5 pr-4">{v.name}</td>
|
||||
<td className="font-mono text-xs text-[var(--color-grey-3)] py-2.5 pr-4">{v.subnet}</td>
|
||||
<td className="text-xs text-[var(--color-grey-3)] py-2.5">{v.purpose}</td>
|
||||
<tr
|
||||
key={v.id}
|
||||
className="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]"
|
||||
>
|
||||
<td className="font-mono text-[var(--color-accent-green)] py-2.5 pr-6">
|
||||
{v.id}
|
||||
</td>
|
||||
<td className="font-mono text-[var(--color-text)] py-2.5 pr-6">{v.name}</td>
|
||||
<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>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</Widget>
|
||||
|
||||
{/* Services */}
|
||||
<section className="mb-16" aria-labelledby="services-heading">
|
||||
<h2
|
||||
id="services-heading"
|
||||
className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-6"
|
||||
>
|
||||
Self-Hosted Services
|
||||
</h2>
|
||||
<Widget
|
||||
title="services"
|
||||
badge={services.length}
|
||||
as="section"
|
||||
>
|
||||
<div className="flex flex-col gap-8">
|
||||
{categoryOrder.map((cat) => {
|
||||
const catServices = services.filter((s) => s.category === cat);
|
||||
return (
|
||||
<div key={cat}>
|
||||
<h3 className="font-mono text-xs text-[var(--color-grey-2)] uppercase tracking-wider mb-3">
|
||||
<p className="font-mono text-xs text-[var(--color-text-dim)] uppercase tracking-wider mb-3">
|
||||
{categoryLabels[cat]}
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-3">
|
||||
</p>
|
||||
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
|
||||
{catServices.map((svc) => (
|
||||
<div
|
||||
key={svc.name}
|
||||
className="flex items-start gap-3 border border-[var(--color-grey-1)] rounded-lg p-4 bg-[var(--color-bg)] hover:border-[var(--color-green-darker)] transition-colors"
|
||||
className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-3 px-4 py-3"
|
||||
>
|
||||
<i
|
||||
className={`${svc.icon} text-[var(--color-green)] text-sm mt-0.5 w-4 shrink-0`}
|
||||
className={`${svc.icon} text-[var(--color-text-label)] text-xs mt-0.5 w-3.5 shrink-0`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-mono text-xs text-[var(--color-text-light)] mb-0.5">{svc.name}</p>
|
||||
<p className="text-xs text-[var(--color-grey-2)] leading-relaxed">{svc.description}</p>
|
||||
<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">
|
||||
{svc.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -184,52 +198,48 @@ export default function HomelabPage() {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</Widget>
|
||||
|
||||
{/* ADRs */}
|
||||
<section className="mb-16" aria-labelledby="adr-heading">
|
||||
<h2
|
||||
id="adr-heading"
|
||||
className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-2"
|
||||
>
|
||||
Architecture Decisions
|
||||
</h2>
|
||||
<p className="text-xs text-[var(--color-grey-3)] mb-6">
|
||||
Short-form ADRs — why things are configured the way they are.
|
||||
</p>
|
||||
<div className="flex flex-col gap-5">
|
||||
<Widget
|
||||
title="architecture decisions"
|
||||
meta="why things are configured the way they are"
|
||||
badge={adrs.length}
|
||||
as="section"
|
||||
>
|
||||
<div className="flex flex-col gap-px bg-[var(--color-border)]">
|
||||
{adrs.map((adr) => (
|
||||
<div
|
||||
key={adr.title}
|
||||
className="border border-[var(--color-grey-1)] rounded-lg p-5 bg-[var(--color-bg)] hover:border-[var(--color-green-darker)] transition-colors"
|
||||
className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-4 py-4"
|
||||
>
|
||||
<h3 className="font-mono text-sm text-[var(--color-text-light)] mb-2">{adr.title}</h3>
|
||||
<p className="text-xs text-[var(--color-grey-3)] leading-relaxed mb-2">
|
||||
<span className="text-[var(--color-grey-2)]">Decision: </span>{adr.decision}
|
||||
<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>
|
||||
{adr.decision}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--color-grey-3)] leading-relaxed">
|
||||
<span className="text-[var(--color-grey-2)]">Why: </span>{adr.why}
|
||||
<p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed">
|
||||
<span className="text-[var(--color-text-label)]">why: </span>
|
||||
{adr.why}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</Widget>
|
||||
|
||||
{/* GitHub CTA */}
|
||||
<section className="border border-[var(--color-grey-1)] rounded-lg p-6 bg-[var(--color-bg)] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="font-mono text-sm text-[var(--color-text-light)] mb-1">lerkolabs on GitHub</p>
|
||||
<p className="text-xs text-[var(--color-grey-3)]">
|
||||
Full documentation: VLAN maps, runbooks, service registry, config exports, and setup guides.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
Full documentation: VLAN maps, runbooks, service registry, config exports, and setup guides.
|
||||
</p>
|
||||
<a
|
||||
href="https://github.com/lerko96/homelab-wip"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="shrink-0 font-mono text-xs px-4 py-2 border border-[var(--color-green-darker)] text-[var(--color-green)] rounded hover:bg-[var(--color-green-darkest)] transition-colors"
|
||||
className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
||||
>
|
||||
View repo <i className="fas fa-arrow-up-right-from-square ml-1 text-xs" aria-hidden="true" />
|
||||
↗ github.com/lerko96/homelab-wip
|
||||
</a>
|
||||
</section>
|
||||
</>
|
||||
|
||||
@@ -1,17 +1,11 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Montserrat, Source_Code_Pro } from "next/font/google";
|
||||
import { Source_Code_Pro } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import ThemeScript from "@/components/ThemeScript";
|
||||
import Nav from "@/components/Nav";
|
||||
import Footer from "@/components/Footer";
|
||||
import { ThemeProvider } from "@/context/ThemeContext";
|
||||
|
||||
const montserrat = Montserrat({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-sans",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const sourceCodePro = Source_Code_Pro({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-mono",
|
||||
@@ -19,7 +13,7 @@ const sourceCodePro = Source_Code_Pro({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Tyler Koenig | Portfolio",
|
||||
title: "Tyler Koenig",
|
||||
description:
|
||||
"SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
|
||||
};
|
||||
@@ -41,11 +35,11 @@ export default function RootLayout({
|
||||
/>
|
||||
</head>
|
||||
<body
|
||||
className={`${montserrat.variable} ${sourceCodePro.variable} bg-[var(--color-bg-deep)] text-[var(--color-text)] font-sans min-h-screen`}
|
||||
className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`}
|
||||
>
|
||||
<ThemeProvider>
|
||||
<Nav />
|
||||
<main className="max-w-5xl mx-auto px-6 py-16">
|
||||
<main className="max-w-5xl mx-auto px-6 py-14">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -2,10 +2,11 @@ import type { Metadata } from "next";
|
||||
import Hero from "@/components/Hero";
|
||||
import Skills from "@/components/Skills";
|
||||
import ProjectCard from "@/components/ProjectCard";
|
||||
import Widget from "@/components/Widget";
|
||||
import { featuredProjects } from "@/data/projects";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Tyler Koenig | Portfolio",
|
||||
title: "Tyler Koenig",
|
||||
description:
|
||||
"SOC Helpdesk I by day, building beyond the title. Projects in AI tooling, mobile apps, infrastructure, and more.",
|
||||
};
|
||||
@@ -15,18 +16,13 @@ export default function Home() {
|
||||
<>
|
||||
<Hero />
|
||||
<Skills />
|
||||
|
||||
<section aria-labelledby="projects-heading">
|
||||
<h2
|
||||
id="projects-heading"
|
||||
className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-10"
|
||||
>
|
||||
Projects
|
||||
</h2>
|
||||
{featuredProjects.map((project, i) => (
|
||||
<ProjectCard key={project.slug} project={project} reversed={i % 2 !== 0} />
|
||||
))}
|
||||
</section>
|
||||
<Widget title="projects" badge={featuredProjects.length}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{featuredProjects.map((project) => (
|
||||
<ProjectCard key={project.slug} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</Widget>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user