Project case study
Portfolio & Career Content System
A static Astro portfolio and resume-generation platform built around one schema-validated professional data source. The system keeps portfolio pages, browser resume previews, and generated PDF and DOCX resumes aligned without duplicating career information.
Foundation
The challenge
Portfolio pages and multiple resume formats can easily become separate, conflicting copies of the same career history. The system needed to keep public website content, ATS-focused documents, editable templates, and future targeted resumes accurate without manual synchronization.
The solution
The project treats professional information as structured domain data. A schema-validated career record feeds public portfolio selectors and a separate resume view-model pipeline, allowing each presentation to filter and format the same verified facts without owning duplicate career content.
Original work
Original implementation, built from a blank foundation
I designed and implemented this portfolio and career-content system from scratch. It is not a reskinned portfolio template, purchased theme, or copied starter presentation. The information architecture, content model, visual system, Astro components, resume pipeline, automated tests, and delivery workflows are my own engineering work.
- I use open-source tools deliberately for framework, document, and test capabilities, while keeping product decisions and application architecture inside the repository.
- The repository is public so reviewers can compare the case study with the implementation, tests, generated documents, and deployment workflows rather than relying on unsupported claims.
- Every published career statement is intended to remain traceable to the canonical data record or to code that can be inspected and executed.
Product thinking
(04)Trust before volume
The portfolio presents a focused record of work and exposes implementation evidence. I prefer a smaller number of defensible claims over a long list of technologies without context.
One fact, one owner
Professional facts are edited once, validated once, and projected into the portfolio and resumes. Presentation layers can shorten or reorder evidence, but they do not own duplicate career histories.
Progressive enhancement
Semantic navigation, disclosures, downloads, themes, and content remain usable without advanced browser features. New CSS and browser capabilities enhance the experience without becoming a functional dependency.
Restraint is a feature
The design uses a limited type scale, deliberate whitespace, quiet borders, and subtle motion so the interface supports the content instead of competing with it.
Development lifecycle
(05)Discover and define
I began with the real content problem: one career history needed to serve a public site, recruiter-focused documents, detailed technical review, and future targeted resumes without drifting into separate copies.
Model and validate
I converted professional information into a strict domain schema with visibility, publication channels, priorities, keywords, and review metadata before building presentation components around it.
Design and implement
I developed a reusable Astro page shell, semantic components, tokenized light and dark themes, intrinsic responsive layouts, and independent HTML, PDF, and DOCX renderers.
Verify and diagnose
Unit-style transformation tests, Astro diagnostics, design-token rules, browser E2E coverage, accessibility scans, link checks, document inspection, and retained Playwright traces make failures reproducible.
Package and deliver
A static production build, deterministic resume artifacts, pull-request quality gates, and a controlled GitHub Pages workflow provide a repeatable path from reviewed source to deployment.
Architecture
(05)Canonical career content
One JSON record stores identity, contact details, positioning, skills, employment, projects, education, credentials, publication channels, priorities, and review items. Astro validates the complete structure during checks and builds.
Portfolio presentation
Typed selectors apply portfolio-channel rules and feed reusable Astro components for the home, work, about, contact, resume-download, and project experiences.
Resume view model
Short and detailed configurations select, order, condense, format, and deduplicate canonical evidence before any document renderer receives it.
Document generation
Semantic Astro resume pages are printed to searchable tagged PDFs with Playwright and Chromium. A dedicated renderer creates genuine editable Office Open XML DOCX documents with portable Arial typography and normal-flow paragraphs and lists.
Quality gates
Node test suites, Astro diagnostics, token governance, static builds, Playwright browser tests, axe accessibility scans, PDF extraction, page-limit checks, hyperlink checks, DOCX package inspection, and deterministic-output normalization protect the published results.
Modern web platform
(06)Astro 7.2 static architecture
Astro produces semantic static pages with strict TypeScript, canonical metadata, sitemap output, reusable layouts, and no client framework. Client-side code is reserved for behavior that cannot be expressed safely in HTML or CSS.
Native CSS design system
Central OKLCH color, typography, spacing, container, border, radius, shadow, and motion tokens keep light and dark themes consistent. A repository validator rejects undefined tokens and direct visual values outside the token foundation.
Intrinsic responsive layout
Grid, Flexbox, auto-fit, minmax(), min(), clamp(), logical properties, fluid type, and container queries let components respond to available space instead of accumulating device-specific breakpoints.
Modern selectors with safe fallbacks
:has(), :is(), details and summary disclosure controls, color-mix(), and cross-document View Transitions improve interaction and visual continuity while the underlying links, content, and downloads remain functional in simpler browsers.
Accessible motion
A shared motion system limits timing and easing choices, excludes persistent header and footer regions from page transitions, and replaces or removes nonessential movement when prefers-reduced-motion is enabled.
Portable typography
Astro's Fonts API self-hosts website fonts at build time with no runtime Google request. Generated Word documents use Arial, while PDFs embed browser-rendered font data so recipients do not need to install project fonts.
One source, multiple documents
(05)The website and every resume format begin with the same validated professional evidence. Selection and layout happen downstream, which lets each format serve its audience without changing the underlying facts.
Canonical career record
Identity, contact information, summaries, skills, employment, accomplishments, projects, education, credentials, visibility, and targeting metadata live in one schema-validated JSON document.
Audience-aware selection
Typed selectors use publication channels, priority, visibility, and short-text alternatives to build portfolio, two-page, and detailed resume projections without copying career content.
Shared resume view model
Formatting, chronological ordering, deduplication, contact normalization, page expectations, and deterministic filenames are resolved before a renderer receives content.
Searchable PDF
Semantic Astro resume HTML is printed on US Letter through Playwright and Chromium, then receives stable metadata. Text remains selectable, searchable, linked, and available to assistive technology and ATS extraction.
Editable Word document
A dedicated DOCX renderer creates genuine Office Open XML with normal paragraphs, headings, bullets, links, portable Arial typography, reusable styles, and deterministic package timestamps.
CI/CD and delivery
(02)Continuous integration
- Trigger
- Pull requests to main or manual dispatch
- Jobs
- Lint, test, build, and browser checks
GitHub Actions validates filenames, runs ESLint with zero warnings, enforces design tokens, executes career, resume, motion, UI, and tooling tests, checks Astro and TypeScript, builds the static site, then runs desktop and mobile Playwright tests with axe accessibility analysis. Failure artifacts retain reports, screenshots, videos, and traces for diagnosis.
Deploy GitHub Pages
- Trigger
- Pushes to main or manual dispatch
- Jobs
- Validate and build · Deploy
The deployment workflow repeats the complete static and browser validation sequence, uploads the generated dist directory with the official Pages artifact action, and deploys it with minimal read, Pages, and identity-token permissions. Build and deployment remain separate jobs, and concurrency replaces outdated releases with the latest validated commit.
Capabilities
(11)- Original portfolio implementation built from a blank Astro foundation rather than a portfolio template
- Static Astro portfolio with semantic pages, canonical metadata, sitemap output, and GitHub Pages deployment
- Schema-validated professional content shared by the website and every resume format
- Short and detailed resume variants rendered as accessible HTML previews
- Searchable, selectable, tagged US Letter PDF generation with working hyperlinks
- Editable ATS-friendly DOCX generation plus empty short and detailed Word templates
- Deterministic resume filenames, PDF metadata, DOCX timestamps, hyperlink relationships, and ZIP packaging
- Native CSS design tokens, intrinsic Grid and Flexbox layouts, fluid typography, light and dark themes, and reduced-motion behavior
- Astro Fonts API self-hosting for Fraunces, Inter, and Space Mono without runtime Google requests
- Progressive-enhancement controls for resume downloads with functional no-JavaScript behavior
- Privacy filtering, evidence channels, priorities, keywords, and technology metadata prepared for accurate job-specific targeting
Quality controls
(08)- Strict career-schema and public-data projection tests
- Short and detailed resume selection, ordering, exclusion, deduplication, and URL-formatting tests
- Design-token validation that rejects undefined tokens, inline styles, and direct visual values outside the token foundation
- Motion-catalog validation including usage, alternatives, progressive fallbacks, and reduced-motion expectations
- PDF validation for signatures, Letter dimensions, page limits, extractable text, expected career evidence, and hyperlinks
- DOCX validation for genuine ZIP and Office Open XML structure, expected text, reusable Word styles, and non-HTML packaging
- Deterministic-output verification so unchanged source content produces byte-identical Word documents
- Astro diagnostics, Playwright desktop and mobile E2E checks, axe accessibility analysis, internal-link validation, and a complete static production build before deployment
Engineering decisions
(06)Facts and presentation are separate
Career facts live in the canonical content record. Portfolio selectors, resume configuration, view models, and renderers own downstream selection and presentation only.
Structured JSON for structured facts
Deeply nested professional data remains JSON because it is primarily validated and transformed by code; long-form narrative content can use Markdown when a future project genuinely requires authored body content.
Native web platform first
Semantic HTML, native CSS, details and summary disclosures, Grid, Flexbox, fluid functions, and progressive enhancement keep the static site resilient and minimize client JavaScript.
Different formats share a view model, not layout code
PDF and DOCX intentionally use different renderers because browsers and Word have different strengths, while both consume the same selected resume evidence.
ATS compatibility outranks decoration
Resume content stays selectable and searchable in normal reading order without text boxes, images containing text, complex tables, or recipient-installed fonts.
Advanced CSS remains progressive
New platform features are adopted when they simplify a real interaction and degrade safely; unsupported enhancements never control content visibility, navigation, or access to downloads.
Implementation highlights
(09)- Designed a shared career-content architecture using Astro Content Collections and strict TypeScript validation.
- Built deterministic, ATS-friendly short and detailed resume generation for HTML, PDF, and editable DOCX outputs.
- Created a responsive native-CSS design system with self-hosted fonts, light and dark themes, and accessible motion preferences.
- Centralized portfolio projections and reusable record layouts so pages consume the same selection rules and design primitives.
- Added automated validation for career data, resume transformation, ATS text extraction, document packaging, motion metadata, design tokens, and UI architecture.
- Added Playwright browser journeys across desktop and mobile viewports with axe accessibility analysis, internal-link validation, and retained failure artifacts for diagnosis.
- Integrated pull-request quality gates and a controlled GitHub Pages delivery workflow with separate build and deployment responsibilities.
- Configured deterministic public filenames and download data derived from the canonical professional identity.
- Designed privacy-aware public filtering and targeting metadata for future job-specific resumes without fabricating experience.