Context: I run two public portfolios: this Gatsby/Netlify site (case studies, honesty logs) and a lighter semantic template on GitHub Pages. Every application still includes a PDF résumé.
AI assist: ChatGPT summarized recruiter conversations and analytics excerpts; I edited the tone and numbers to match my actual dashboards.
Status: Advice from someone still job hunting. Use it as peer notes, not a definitive playbook.

Reality snapshot

  • Recruiters and hiring managers consistently ask for a PDF first. Interactive sites are “nice to have” once they’ve skimmed the basics.
  • My Netlify analytics show average session length ~2m15s. Most visitors read the hero + first project, maybe one blog post, then bounce.
  • Accessibility is non-negotiable: skip links, focus outlines, alt text, and a big “Download PDF résumé” button near the top.

Dual-track setup

AssetPurposeNotes
PDF résuméATS-friendly, 1 page (bullets, measurable outcomes).Updated monthly. Stored in /static/BradleyMatera-Resume.pdf with a visible timestamp.
Interactive SPADeep dive with honesty logs, case studies, live demos.Gatsby on Netlify, content stored in MDX so I can diff claims.
Semantic templateLightweight version (HTML/CSS/JS) on GitHub Pages.Useful for recruiters who block heavy JS. Links straight back here.

Every job application gets both: PDF in the ATS, SPA link in the cover letter or “Additional Materials” field.

Design + honesty principles

  1. Navigation clarity: Sticky nav, skip links, and CTA buttons (“Contact”, “Download PDF”) at the top.
  2. Accessibility: axe + Lighthouse scans on each deploy, manual keyboard + screen reader pass.
  3. Reality blocks: Every project/blog post starts with context + AI disclosure so visitors know what’s real.
  4. Analytics + feedback: Netlify analytics + LinkedIn DMs from recruiters drive my backlog (e.g., one DM prompted a bigger “Download PDF” button).
  5. Changelog: honesty.md logs every copy update with dates + rationale. The homepage shows “Last honesty update” so readers know the site isn’t stale.

When I iterate or retire content

  • If analytics show high exit rates on a section (>60% drop), I rewrite or remove it. Example: I trimmed the old “Mission” fluff because nobody scrolled past it.
  • If a project becomes misleading (Car-Match before it had a live backend), I add disclaimers or demote it until the copy matches reality.
  • When recruiters ask for clarity (“Is Triangle Shader Lab your framework?”), I update the site immediately so the next visitor isn’t confused.

Checklists I run before sharing the SPA

  • PDF résumé link visible in hero + footer.
  • All outbound proof links (GitHub PRs, Render demos, CodePens) open in new tabs and include context.
  • Accessibility audit: axe zero critical issues, manual keyboard walkthrough recorded.
  • Netlify deploy log clean (no warnings about sharp, images, etc.).
  • Honesty log updated with what changed (date, summary).

Lessons so far

  • Interactive ≠ replacement. Recruiters still skim the PDF first. The SPA is a guided tour for those who want more context.
  • Maintenance beats novelty. A static, honest site beats a flashy but broken experience.
  • Share proof. Every claim links to a repo, PR, or log. If the link breaks, the claim goes with it.
  • Listen to feedback. When hiring managers say “I couldn’t find X,” I fix it and note the change in honesty.md.

Real recruiter feedback (and what I did)

  • “Couldn’t find your PDF.” → Added a red “Download PDF résumé” button in the hero and footer.
  • “Too much JS; page felt heavy.” → Built the semantic HTML/CSS fallback and linked it in the nav.
  • “Which projects are real vs. labs?” → Added “Reality snapshot” + AI disclosure atop every case study.
  • “Links 404 on mobile VPN.” → Prefixed all internal links correctly and added status badges to demos (up/down/slow).

How I measure if the site is working

  • Analytics: Track scroll depth and exit rates. If a project card has high exits, I rewrite or move it lower.
  • Speed: Lighthouse scores stay in the high 90s; bundle size monitored on each deploy.
  • Engagement: Count clicks on “Contact” + PDF downloads after each update to see if changes help.
  • Honesty velocity: honesty.md updates at least monthly; if it’s stale, I question whether the site is.

Playbook before a job application

  • Update résumé date, regenerate PDF, and verify the link.
  • Ensure top 3 projects have working demos + screenshots + proof links.
  • Add a short “Why I’m applying” blurb to the homepage (temporary, removed after the cycle).
  • Check dark mode readability and mobile nav; recruiters often open on phones.

Open questions I’m still testing

  • Whether to add a 60-second Loom walkthrough or if that adds friction.
  • How much animation is acceptable before it distracts from content.
  • Best way to surface “what changed” without making the homepage feel like a changelog.
  • Whether to auto-detect ATS bots and serve the semantic version first.

References