TehRiehlDeal/skill-tree-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor/cohesion pass #1

Merged
TehRiehlDeal merged 10 commits from refactor/cohesion-pass into main 2026-06-03 11:17:48 -07:00
Conversation 0 Commits 10 Files Changed 39
+5408 -2461
TehRiehlDeal commented 2026-06-03 11:17:42 -07:00
Owner
Copy Link
Copy Source
No description provided.
TehRiehlDeal added 10 commits 2026-06-03 11:17:42 -07:00
chore: add ESLint, Prettier, and Vitest tooling a85bd16218 
Add code-quality tooling the project lacked:
- ESLint (flat config via @sveltejs/eslint-config)
- Prettier (tabs, single quotes, matching existing style)
- Vitest (node env, for pure-logic unit tests)
- npm scripts: lint, format, format:check, test, test:watch

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
style: apply Prettier formatting across codebase aa58425f1a 
Isolated reformat commit so subsequent logic changes have clean diffs.
No behavior change.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
refactor: centralize theme/config/utils + fix data and console bugs 6c652e7138 
Phase 1 of the cohesion refactor (behavior-preserving):

Single source of truth:
- New src/lib/theme.ts: category colors (moved from data.ts, re-exported
  for back-compat), derived hex strings, nebula palette, UI colors, CSS var map
- New src/lib/config.ts: breakpoint, zoom, parallax, node radii, particle
  counts, animation timings (previously scattered magic numbers)
- New src/lib/utils/tree.ts: getNodeById, getNodeRadius, getDistanceFromOrigin,
  getBeamIntensity (pure helpers lifted out of onMount)
- New src/lib/utils/stats.ts: branch ids/labels, proficiency order, and the
  stats-panel aggregation helpers (deduped from inline copies)
- SkillTree.svelte now imports all of the above; removed the duplicated
  getCategoryColorHex, stats helpers, branch id/label lists, and inline magic numbers
- Populated src/lib/index.ts barrel

Bug fixes:
- data.ts: tmdbAPI pypiUrl pointed at tvdbAPI -> corrected to tmdbAPI
- Removed/ gated stray console.log noise (skill-tree-loaded, SW logs)
- Removed dead vars (maxAlpha, glowMaxAlpha) and unused catch binding

Tooling: ESLint + Prettier now clean; added Vitest unit tests for the new
pure utils (14 tests). svelte-check: 0 errors. build: ok.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
refactor: drive theme colors through CSS custom properties 6091c62654 
Phase 2 (behavior-preserving):
- Add :root color tokens to app.css mirroring theme.ts cssVars
- Replace solid theme hex literals in SkillTree.svelte <style> with var(--..):
  #ffd700 -> --color-gold (x17), #a8a8b8 -> --text-muted (x8),
  #1a1a2e -> --panel-from, #0f0f1a -> --panel-to, #f9a825 -> --color-skills
- body background now var(--bg-space)

Values are identical to the literals; every referenced var has a :root
definition. rgba() shadows and one-off grays/badge colors left as-is.
check/lint/build all clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
refactor: model TreeNode as a discriminated union bf235680a4 
Phase 3 (behavior-preserving):
- Replace the 45-optional-field TreeNode interface with a tagged union over
  category: OriginNode | ExperienceNode | ProjectNode | SkillNode | EducationNode,
  sharing a BaseNode. Category-specific fields now live only on their member.
- Modal template narrows by category (category === 'experience' && ...) instead
  of bare field-presence checks; equivalent at runtime since each field is
  exclusive to its category (proven by the union compiling against the data).
- stats utils narrow correctly: aggregateSkills filters to SkillNode[] via a type
  predicate; countByProficiency and getPlayerClass guard on category.

svelte-check: 0 errors (every data node conforms). lint/test/build clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
refactor: extract leaf UI components from SkillTree.svelte f08138718a 
Phase 4 (behavior-preserving): split the monolithic component's DOM overlays
into focused children, each owning its markup + scoped CSS:
- LoadingIndicator.svelte, WelcomeTitle.svelte, Tooltip.svelte
- NodeModal.svelte (modal + ~280 lines CSS; onClose callback, category-narrowed)
- StatsPanel.svelte (toggle + backdrop + panel + ~340 lines CSS; onToggle/
  onToggleBranch callbacks). Kept the .stats-panel-toggle class name stable so
  the entrance-animation GSAP querySelector still resolves.

SkillTree.svelte drops from 2453 -> ~600 lines. Modernized the moved event
handlers (on:click -> onclick), clearing the 9 Svelte deprecation warnings.

svelte-check: 0 errors, 0 warnings. lint/test/build clean. Verified the stats
panel renders identically in-browser (LVL/mastery/branches all correct).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
refactor: extract PixiJS rendering into pixi/ modules 84112d8e42 
Phase 5 (behavior-preserving): decompose the ~1000-line onMount into focused
modules coordinated by a plain (non-reactive) controller object:
- pixi/types.ts        LineObject / NodeObject / BackgroundLayers
- pixi/controller.ts   shared mutable pan/zoom state + Pixi refs (NOT $state,
                       which would break PixiJS object identity)
- pixi/background.ts   gradient/nebula/stars/dust/vignette + ambient loops
- pixi/lines.ts        plasma-beam connections
- pixi/nodes.ts        origin + regular nodes; collapses the duplicated pointer
                       handlers into one attachNodeInteraction helper
- pixi/interaction.ts  pan/zoom/parallax + keyboard nav (return cleanups)
- pixi/animation.ts    sequenced entrance animation

onMount is now a thin orchestrator. SkillTree.svelte: 1177 -> 274 lines
(2453 at the start of the refactor). Listener passivity, the hasMoved click
guard, eventMode-until-animated ordering, and the R-reset parallax rebaseline
are all preserved.

svelte-check: 0 errors/0 warnings. lint/test/build clean. Verified onMount runs
with no runtime exceptions (background + stats panel render). NOTE: pan/zoom/
node-click/keyboard need a manual real-browser check (headless can't paint nodes).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat: add Open Graph / Twitter preview image for link unfurls 6ff99e0d51 
Link previews need an og:image — the tags existed but the image was
commented out. Generated a 1200x630 branded card (static/og-preview.jpg,
~100KB: dark space gradient, circular headshot with gold ring, gold serif
title + tagline) and wired up:
- og:image (+ secure_url, type, width, height, alt)
- twitter:image (+ alt); twitter:card already summary_large_image

Absolute URLs point at https://tehriehldeal.com/og-preview.jpg so crawlers
(Slack/Discord/iMessage/Twitter/Facebook) can fetch it. Tags verified present
in the prerendered build/index.html.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
chore: add scripts/generate-og-image.sh to regenerate the OG card 6f17cba9c5 
Reproducible ImageMagick script that rebuilds static/og-preview.jpg from the
headshot + theme colours (with serif-font fallbacks so it runs on other
machines). Exposed as `npm run og:image`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat: make portfolio content crawlable + add SEO structured data df78dc694f 
The entire portfolio rendered only on the PixiJS canvas, so crawlers saw a
near-empty body and the site ranked poorly for non-personalized searches. Fixes:

- NEW SeoContent.svelte: screen-reader/crawler-only (.sr-only) semantic HTML
  (h1 + bio + contact + Experience/Projects/Skills/Education), generated from
  data.ts (single source of truth, reuses aggregateSkills). Prerenders into
  build/index.html — verified it now contains the job/project/education text
  that was previously canvas-only. Also a big screen-reader accessibility win.
- JSON-LD schema.org Person in +layout (name, jobTitle, alumniOf, knowsAbout,
  sameAs LinkedIn/GitHub) — strong entity signal for name searches.
- Canonical URL; static/sitemap.xml + robots.txt Sitemap reference.
- Keyword-tuned <title>, description, og/twitter titles (name + role + stack).
- Demoted the transient welcome <h1> to a <div> so SeoContent's <h1> is the
  single canonical heading. Bumped SW cache to v2.

.sr-only utility added to app.css. check/lint/test/build clean; verified no
visual regression and no runtime exceptions (background + canvas unchanged).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
TehRiehlDeal merged commit d6b148239d into main 2026-06-03 11:17:48 -07:00
TehRiehlDeal deleted branch refactor/cohesion-pass 2026-06-03 11:17:48 -07:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
TehRiehlDeal (Kevin Riehl)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: TehRiehlDeal/skill-tree-portfolio#1
Delete Branch "refactor/cohesion-pass"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?