Tracker

Goal tracker. Clarity through restraint.

Technologies Demonstrated

[HTMX] Live search filter + lazy-loaded detail panels for content browser
[Alpine] Sidebar tree navigation, dependency graph, readiness score calculator
[CSS] Warm light-mode tokens with purposeful accent — trk- prefixed component classes

1.0 Color Palette

[Alpine]

Interface colors

Background

#f7f6f3

Page background

Surface

#ffffff

Panel / Card

Surface 2

#edecea

Headers / Elevated

Primary / Orange

#d45b2c

Accent / Headings

Complete

#3a8a5c

Complete status

Progress

#c4880b

In-progress

Locked

#b53d2e

Locked / Error

Info / Links

#3d7ec7

Links / Info

Text

#2c2c2c

Body text

Muted

#8a8780

Secondary text

Border

#dddbd6

Dividers / Edges

<div
							class="trk-panel p-3 cursor-pointer transition-all"
							style="border-color: transparent;"
							{ templ.Attributes{"@click": "navigator.clipboard.writeText('#f7f6f3'); copied='bg'; setTimeout(()=>copied='',1500)"}... }
							{ templ.Attributes{":style": "copied==='bg' ? 'border-color: var(--color-primary)' : 'border-color: transparent'"}... }
						>
							<div style="height: 48px; background: #f7f6f3; border: 1px solid var(--color-border); "></div>
							<p class="mt-2" style="font-family: var(--font-display); font-size: var(--font-size-caption); font-weight: 700;">Background</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='bg' ? 'COPIED' : '#f7f6f3'">#f7f6f3</p>
							<p style="font-size: 0.625rem; color: var(--color-text-muted);">Page background</p>
						</div>

2.0 Typography

Display — Plus Jakarta Sans

Tracker

Heading — Account Overview

Body Mono — Skills Tracked: 8

Caption Mono — LAST UPDATED: 2026-03-07T14:30:00Z

Body — Plus Jakarta Sans

Heading Weight 700

Body text at regular weight. Track your goals, monitor project completion, and visualize learning progression.

Caption — Updated 2 hours ago

Data readout panel

SKILLS:

8

PROJECTS:

6

CERTS:

3

CHALLENGES:

3

3.0 Spacing Scale

Progress bar scale — base unit 4px

4px
8px
12px
16px
24px
32px
48px
64px

4.0 Buttons

[Alpine]

Size variants

Style variants

Toggle demo

NOT TRACKED
<div x-data="{ tracking: false }" class="flex items-center gap-4">
						<button
							class="trk-btn"
							{ templ.Attributes{"@click": "tracking = !tracking"}... }
							{ templ.Attributes{":class": "tracking ? 'trk-btn-primary' : ''"}... }
							x-text="tracking ? 'Untrack' : 'Track'"
						>
							Track
						</button>
						<div class="flex items-center gap-2">
							<span
								class="trk-status-light"
								{ templ.Attributes{":class": "tracking ? 'trk-status-complete' : ''"}... }
							></span>
							<span
								style="font-family: var(--font-display); font-size: var(--font-size-caption); color: var(--color-text-muted);"
								x-text="tracking ? 'TRACKING' : 'NOT TRACKED'"
							>
								NOT TRACKED
							</span>
						</div>
					</div>

5.0 Forms

[HTMX] [Alpine]
Add goal

6.0 Cards / Panels

[Alpine]
PROJECT Full-Stack

REST API

Design and implement a RESTful API with auth and rate limiting.

65% COMPLETE

Blog engine — requirements
Go proficiency
Database design
REST API project
Docker basics

Skill status overview

Go
JavaScript
Python
Rust
SQL
Docker
Git
TypeScript
Search engine — requirements ▶
CLI Todo App
REST API
Go or Rust proficiency
Data structures
File I/O

4/5 requirements met — 1 in progress

<div class="trk-panel" x-data="{ open: false }">
					<div
						class="trk-panel-header flex items-center justify-between cursor-pointer"
						{ templ.Attributes{"@click": "open = !open"}... }
					>
						<span>Search engine — requirements</span>
						<span
							style="font-size: 0.625rem; transition: transform 0.15s;"
							{ templ.Attributes{":style": "open ? 'transform: rotate(90deg)' : ''"}... }
						>&#9654;</span>
					</div>
					<div x-show="open" x-transition x-cloak class="p-5">
						<div class="space-y-3">
							<div class="flex items-center gap-3">
								<span class="trk-status-light trk-status-complete"></span>
								<span style="font-size: var(--font-size-body);">CLI Todo App</span>
							</div>
							<div class="flex items-center gap-3">
								<span class="trk-status-light trk-status-complete"></span>
								<span style="font-size: var(--font-size-body);">REST API</span>
							</div>
							<div class="flex items-center gap-3">
								<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
								<span style="font-size: var(--font-size-body);">Go or Rust proficiency</span>
							</div>
							<div class="flex items-center gap-3">
								<span class="trk-status-light trk-status-complete"></span>
								<span style="font-size: var(--font-size-body);">Data structures</span>
							</div>
							<div class="flex items-center gap-3">
								<span class="trk-status-light trk-status-complete"></span>
								<span style="font-size: var(--font-size-body);">File I/O</span>
							</div>
						</div>
						<div class="trk-rule mt-4 pt-3">
							<p style="font-family: var(--font-display); font-size: var(--font-size-caption); color: var(--color-text-muted);">
								4/5 requirements met — 1 in progress
							</p>
						</div>
					</div>
				</div>

7.0 Content Browser

[HTMX] [Alpine]
Browse
▶ Skills
Go
JavaScript
Python
Rust
SQL
Docker
Git
TypeScript
▶ Projects
CLI Todo App
REST API
Real-time Chat
Blog Engine
Search Engine
Toy Compiler
▶ Certifications
AWS Cloud Practitioner
AWS Solutions Architect
CKA (Kubernetes)
▶ Challenges
Advent of Code
LeetCode 75
System Design

Select an item to view details

<div class="flex flex-col md:flex-row gap-6" x-data="{ open: { skills: true, projects: false, certifications: false, challenges: false } }">
					<!-- Sidebar -->
					<div class="trk-panel" style="width: 100%; max-width: 280px; flex-shrink: 0;">
						<div class="trk-panel-header">
							Browse
						</div>
						<div class="p-3">
							<!-- Search input -->
							<input
								type="text"
								class="trk-search mb-3"
								placeholder="Search items..."
								name="q"
								hx-get="/guides/tracker/search"
								hx-trigger="input changed delay:300ms"
								hx-target="#trk-search-results"
							/>
							<!-- Search results container -->
							<div id="trk-search-results"></div>
							<!-- Tree navigation -->
							<div class="trk-tree">
								<!-- Skills -->
								<div
									class="trk-tree-node"
									style="font-weight: 700;"
									{ templ.Attributes{"@click": "open.skills = !open.skills"}... }
								>
									<span
										class="trk-tree-toggle"
										{ templ.Attributes{":class": "open.skills ? 'trk-tree-toggle-open' : ''"}... }
									>&#9654;</span>
									<span>Skills</span>
								</div>
								<div x-show="open.skills" x-transition x-cloak style="padding-left: 1rem;">
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/skill/golang" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
										<span>Go</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/skill/javascript" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
										<span>JavaScript</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/skill/python" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-complete"></span>
										<span>Python</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/skill/rust" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
										<span>Rust</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/skill/sql" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
										<span>SQL</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/skill/docker" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
										<span>Docker</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/skill/git" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
										<span>Git</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/skill/typescript" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-complete"></span>
										<span>TypeScript</span>
									</div>
								</div>
								<!-- Projects -->
								<div
									class="trk-tree-node"
									style="font-weight: 700;"
									{ templ.Attributes{"@click": "open.projects = !open.projects"}... }
								>
									<span
										class="trk-tree-toggle"
										{ templ.Attributes{":class": "open.projects ? 'trk-tree-toggle-open' : ''"}... }
									>&#9654;</span>
									<span>Projects</span>
								</div>
								<div x-show="open.projects" x-transition x-cloak style="padding-left: 1rem;">
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/project/todo-cli" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-complete"></span>
										<span>CLI Todo App</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/project/rest-api" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-complete"></span>
										<span>REST API</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/project/chat-app" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
										<span>Real-time Chat</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/project/blog-engine" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-locked"></span>
										<span>Blog Engine</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/project/search-engine" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-locked"></span>
										<span>Search Engine</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/project/compiler" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-locked"></span>
										<span>Toy Compiler</span>
									</div>
								</div>
								<!-- Certifications -->
								<div
									class="trk-tree-node"
									style="font-weight: 700;"
									{ templ.Attributes{"@click": "open.certifications = !open.certifications"}... }
								>
									<span
										class="trk-tree-toggle"
										{ templ.Attributes{":class": "open.certifications ? 'trk-tree-toggle-open' : ''"}... }
									>&#9654;</span>
									<span>Certifications</span>
								</div>
								<div x-show="open.certifications" x-transition x-cloak style="padding-left: 1rem;">
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/certification/aws-ccp" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-complete"></span>
										<span>AWS Cloud Practitioner</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/certification/aws-saa" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
										<span>AWS Solutions Architect</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/certification/k8s-cka" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-locked"></span>
										<span>CKA (Kubernetes)</span>
									</div>
								</div>
								<!-- Challenges -->
								<div
									class="trk-tree-node"
									style="font-weight: 700;"
									{ templ.Attributes{"@click": "open.challenges = !open.challenges"}... }
								>
									<span
										class="trk-tree-toggle"
										{ templ.Attributes{":class": "open.challenges ? 'trk-tree-toggle-open' : ''"}... }
									>&#9654;</span>
									<span>Challenges</span>
								</div>
								<div x-show="open.challenges" x-transition x-cloak style="padding-left: 1rem;">
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/challenge/advent-of-code" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-complete"></span>
										<span>Advent of Code</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/challenge/leetcode-75" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-progress trk-status-pulse"></span>
										<span>LeetCode 75</span>
									</div>
									<div class="trk-tree-node" hx-get="/guides/tracker/detail/challenge/system-design" hx-target="#trk-detail-panel" hx-swap="innerHTML">
										<span class="trk-status-light trk-status-locked"></span>
										<span>System Design</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- Detail Panel -->
					<div id="trk-detail-panel" class="trk-panel p-6" style="flex: 1; min-height: 300px;">
						<p style="font-family: var(--font-display); font-size: var(--font-size-caption); color: var(--color-text-muted);">
							Select an item to view details
						</p>
					</div>
				</div>

8.0 Dependency Graph

[Alpine]
JavaScript
SKILL
SQL
SKILL
TypeScript
SKILL
Go proficiency
SKILL
Database design
SKILL
REST API
PROJECT
Docker
SKILL
Git workflow
SKILL
Full-Stack App
PROJECT
Docker
SKILL
Linux admin
SKILL
Networking
SKILL
All projects complete
PROJECT
System design
CHALLENGE
Docker mastery
SKILL
CKA cert
CERT
Senior Engineer
CHALLENGE
AWS CCP
CERT
Networking
SKILL
Security
SKILL
Database design
SKILL
Cost optimization
SKILL
AWS Solutions Architect
CERT
<div x-data="{ selected: 'fullstack', highlighted: null }">
					<!-- Goal selector buttons -->
					<div class="flex gap-2 mb-6 flex-wrap">
						<button
							class="trk-btn"
							{ templ.Attributes{"@click": "selected = 'fullstack'; highlighted = null"}... }
							{ templ.Attributes{":class": "selected === 'fullstack' ? 'trk-btn-primary' : ''"}... }
						>
							Full-Stack App
						</button>
						<button
							class="trk-btn"
							{ templ.Attributes{"@click": "selected = 'senior'; highlighted = null"}... }
							{ templ.Attributes{":class": "selected === 'senior' ? 'trk-btn-primary' : ''"}... }
						>
							Senior Engineer
						</button>
						<button
							class="trk-btn"
							{ templ.Attributes{"@click": "selected = 'awssa'; highlighted = null"}... }
							{ templ.Attributes{":class": "selected === 'awssa' ? 'trk-btn-primary' : ''"}... }
						>
							AWS Solutions Architect
						</button>
					</div>

					<!-- Full-Stack App graph -->
					<div x-show="selected === 'fullstack'" x-transition class="flex items-start gap-0 overflow-x-auto pb-4">
						<!-- Sub-deps column (REST API deps) -->
						<div class="flex flex-col gap-2 justify-center">
							<div
								class="trk-dep-node trk-dep-node-complete"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'fs3a' ? null : 'fs3a'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'fs3a' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">JavaScript</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-complete"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'fs3b' ? null : 'fs3b'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'fs3b' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">SQL</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-complete"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'fs3c' ? null : 'fs3c'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'fs3c' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">TypeScript</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
						</div>

						<!-- Connecting lines: sub-deps to REST API -->
						<div class="flex flex-col gap-2 justify-center">
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
						</div>

						<!-- Deps column (middle) -->
						<div class="flex flex-col gap-2 justify-center">
							<div
								class="trk-dep-node trk-dep-node-complete"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'fs1' ? null : 'fs1'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'fs1' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Go proficiency</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'fs2' ? null : 'fs2'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'fs2' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Database design</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-complete"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'fs3' ? null : 'fs3'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'fs3' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">REST API</div>
								<span class="trk-tag trk-tag-project">PROJECT</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'fs4' ? null : 'fs4'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'fs4' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Docker</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-complete"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'fs5' ? null : 'fs5'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'fs5' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Git workflow</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
						</div>

						<!-- Connecting lines: deps to goal -->
						<div class="flex flex-col gap-2 justify-center">
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
						</div>

						<!-- Goal node (right) -->
						<div class="flex items-center">
							<div
								class="trk-dep-node trk-dep-node-locked"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'fullstack-goal' ? null : 'fullstack-goal'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'fullstack-goal' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer; padding: 1rem 1.25rem; min-width: 160px;"
							>
								<div style="font-weight: 700; font-size: var(--font-size-body);">Full-Stack App</div>
								<span class="trk-tag trk-tag-project">PROJECT</span>
							</div>
						</div>
					</div>

					<!-- Senior Engineer graph -->
					<div x-show="selected === 'senior'" x-transition class="flex items-start gap-0 overflow-x-auto pb-4">
						<!-- Sub-deps column (CKA deps) -->
						<div class="flex flex-col gap-2 justify-center">
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'se4a' ? null : 'se4a'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'se4a' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Docker</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'se4b' ? null : 'se4b'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'se4b' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Linux admin</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'se4c' ? null : 'se4c'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'se4c' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Networking</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
						</div>

						<!-- Connecting lines: sub-deps to CKA -->
						<div class="flex flex-col gap-2 justify-center">
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
						</div>

						<!-- Deps column (middle) -->
						<div class="flex flex-col gap-2 justify-center">
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'se1' ? null : 'se1'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'se1' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">All projects complete</div>
								<span class="trk-tag trk-tag-project">PROJECT</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-locked"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'se2' ? null : 'se2'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'se2' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">System design</div>
								<span class="trk-tag trk-tag-challenge">CHALLENGE</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'se3' ? null : 'se3'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'se3' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Docker mastery</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-locked"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'se4' ? null : 'se4'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'se4' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">CKA cert</div>
								<span class="trk-tag trk-tag-certification">CERT</span>
							</div>
						</div>

						<!-- Connecting lines: deps to goal -->
						<div class="flex flex-col gap-2 justify-center">
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
						</div>

						<!-- Goal node (right) -->
						<div class="flex items-center">
							<div
								class="trk-dep-node trk-dep-node-locked"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'senior-goal' ? null : 'senior-goal'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'senior-goal' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer; padding: 1rem 1.25rem; min-width: 160px;"
							>
								<div style="font-weight: 700; font-size: var(--font-size-body);">Senior Engineer</div>
								<span class="trk-tag trk-tag-challenge">CHALLENGE</span>
							</div>
						</div>
					</div>

					<!-- AWS Solutions Architect graph -->
					<div x-show="selected === 'awssa'" x-transition class="flex items-start gap-0 overflow-x-auto pb-4">
						<!-- No sub-deps for AWS SA, so skip that column -->

						<!-- Deps column -->
						<div class="flex flex-col gap-2 justify-center">
							<div
								class="trk-dep-node trk-dep-node-complete"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'aw1' ? null : 'aw1'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'aw1' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">AWS CCP</div>
								<span class="trk-tag trk-tag-certification">CERT</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'aw2' ? null : 'aw2'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'aw2' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Networking</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'aw3' ? null : 'aw3'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'aw3' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Security</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-complete"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'aw4' ? null : 'aw4'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'aw4' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Database design</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'aw5' ? null : 'aw5'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'aw5' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer;"
							>
								<div style="font-weight: 600;">Cost optimization</div>
								<span class="trk-tag trk-tag-skill">SKILL</span>
							</div>
						</div>

						<!-- Connecting lines: deps to goal -->
						<div class="flex flex-col gap-2 justify-center">
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
							<div class="trk-dep-line"></div>
						</div>

						<!-- Goal node (right) -->
						<div class="flex items-center">
							<div
								class="trk-dep-node trk-dep-node-progress"
								{ templ.Attributes{"@click": "highlighted = highlighted === 'awssa-goal' ? null : 'awssa-goal'"}... }
								{ templ.Attributes{":class": "highlighted && highlighted !== 'awssa-goal' ? 'trk-dep-node-dimmed' : ''"}... }
								style="cursor: pointer; padding: 1rem 1.25rem; min-width: 160px;"
							>
								<div style="font-weight: 700; font-size: var(--font-size-body);">AWS Solutions Architect</div>
								<span class="trk-tag trk-tag-certification">CERT</span>
							</div>
						</div>
					</div>
				</div>

9.0 Learning Overview

[Alpine]
2 / 8

Skills mastered

2 / 6

Projects complete

Skill completion

Certification tiers

Foundational 1 / 1
Associate 0 / 1
Professional 0 / 1
Specialty 0 / 0

Readiness score

<div
					class="trk-panel p-6"
					x-data="{
						golang: 75, javascript: 82, python: 70, sql: 52,
						docker: 85, git: 72, systemDesign: 30,
						get readinessScore() {
							let w = { golang: 0.20, javascript: 0.15, python: 0.10, sql: 0.15, docker: 0.15, git: 0.10, systemDesign: 0.15 };
							let score = this.golang * w.golang + this.javascript * w.javascript + this.python * w.python + this.sql * w.sql + this.docker * w.docker + this.git * w.git + this.systemDesign * w.systemDesign;
							return Math.round(score);
						}
					}"
				>
					<p class="mb-4" style="font-family: var(--font-display); font-size: var(--font-size-caption); color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.01em;">
						Readiness score
					</p>
					<div class="trk-readout mb-4" x-text="readinessScore"></div>
					<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
						<div>
							<label style="font-family: var(--font-display); font-size: var(--font-size-caption); font-weight: 600; display: block; margin-bottom: 0.25rem;">Go</label>
							<input type="number" min="1" max="100" class="trk-input" x-model.number="golang"/>
						</div>
						<div>
							<label style="font-family: var(--font-display); font-size: var(--font-size-caption); font-weight: 600; display: block; margin-bottom: 0.25rem;">JavaScript</label>
							<input type="number" min="1" max="100" class="trk-input" x-model.number="javascript"/>
						</div>
						<div>
							<label style="font-family: var(--font-display); font-size: var(--font-size-caption); font-weight: 600; display: block; margin-bottom: 0.25rem;">Python</label>
							<input type="number" min="1" max="100" class="trk-input" x-model.number="python"/>
						</div>
						<div>
							<label style="font-family: var(--font-display); font-size: var(--font-size-caption); font-weight: 600; display: block; margin-bottom: 0.25rem;">SQL</label>
							<input type="number" min="1" max="100" class="trk-input" x-model.number="sql"/>
						</div>
						<div>
							<label style="font-family: var(--font-display); font-size: var(--font-size-caption); font-weight: 600; display: block; margin-bottom: 0.25rem;">Docker</label>
							<input type="number" min="1" max="100" class="trk-input" x-model.number="docker"/>
						</div>
						<div>
							<label style="font-family: var(--font-display); font-size: var(--font-size-caption); font-weight: 600; display: block; margin-bottom: 0.25rem;">Git</label>
							<input type="number" min="1" max="100" class="trk-input" x-model.number="git"/>
						</div>
						<div>
							<label style="font-family: var(--font-display); font-size: var(--font-size-caption); font-weight: 600; display: block; margin-bottom: 0.25rem;">System Design</label>
							<input type="number" min="1" max="100" class="trk-input" x-model.number="systemDesign"/>
						</div>
					</div>
				</div>