Files
skill-tree-portfolio/src/routes/+page.svelte
T
TehRiehlDealandClaude Opus 4.8 df78dc694f feat: make portfolio content crawlable + add SEO structured data
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>
2026-06-03 11:16:17 -07:00

22 lines
385 B
Svelte

<script lang="ts">
import SkillTree from '$lib/components/SkillTree.svelte';
import SeoContent from '$lib/components/SeoContent.svelte';
</script>
<!-- Crawlable / screen-reader text version (visually hidden, prerendered). -->
<SeoContent />
<main>
<SkillTree />
</main>
<style>
main {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
}
</style>