Diogo Miyake — Portfolio

Personal portfolio site for miyake-san.github.io. It presents enterprise Data & AI engagements using the STARL method (Situation, Tasks, Actions, Results, Lessons Learned): a home page with a searchable, filterable summary of every project, and a dedicated page per project with the full case study. Sections for certifications and writing/talks round out the home page.

The site is static HTML/CSS/JS — GitHub Pages serves it directly, no build step required at deploy time.

For maintainability, the page content is separated from the markup and code:

content/
  site.yaml          # Profile, skills, categories, contact links
  diagrams.yaml       # One "solution overview" diagram spec per project slug
  projects/*.yaml      # One file per STARL case study (25 files)
models.py            # Pydantic schemas that validate everything in content/
content.py           # Loads + validates content/*.yaml, exposes SITE/PROJECTS/DIAGRAMS
build.py             # Generator that renders index.html, projects/*/index.html and sitemap.xml
index.html           # GENERATED — project summaries only; do not edit by hand
projects/<slug>/index.html  # GENERATED — one full case-study page per project; do not edit by hand
sitemap.xml          # GENERATED — home + every project page
tests/               # pytest suite for models.py, content.py and build.py
.github/workflows/build.yml  # CI: lint, format check, tests, then verify generated files are up to date
assets/css/styles.css
assets/js/main.js
assets/img/favicon.svg
assets/img/og-cover.svg / .png  # Social share image (1200×630)
assets/img/diagrams/ # Drop your own architecture images here to override SVGs
robots.txt · site.webmanifest  # SEO / PWA

Each project has a summary card on the home page (tags, executive summary, tech, and a "Read the full case study" link) and its own page at /projects/<slug>/ with the full STARL breakdown and an auto-generated inline SVG "solution overview" diagram (pastel, accessible, defined per-slug in content/diagrams.yaml). You can refine the text of any diagram there, or replace it entirely with your own image — see assets/img/diagrams/README.md.

Requires Python 3.11+ and uv:

uv sync                       # one-time: install pinned dependencies
uv run task build             # regenerate index.html, projects/*/index.html and sitemap.xml
uv run task check              # lint + format check + tests (what CI runs)

index.html, projects/*/index.html and sitemap.xml are all generated. If you prefer editing HTML directly, you can — just remember your edits are overwritten the next time build.py runs, and CI (see below) fails a push where any of them don't match content/.

Full editing instructions (including how to add a project, the YAML schema, and a corporate-network proxy workaround for uv sync) live in EDITING_GUIDE.md.

TODO before publishing: set your real LinkedIn URL and public email in content/site.yaml's contact block (placeholders are marked there).

uv run task test    # pytest: schemas, content loader, render output
uv run task lint    # ruff check

Every push/PR to main runs lint, format check, tests, and a rebuild-and-diff check against index.html, projects/ and sitemap.xml (.github/workflows/build.yml).

python -m http.server 8000
# then open http://localhost:8000/

• Accessibility: dark ink on light pastel surfaces; all text/background pairs meet WCAG 2.1 AA contrast (most reach AAA). Includes skip link, visible focus styles, reduced-motion support and a print stylesheet.
• Privacy: client identities are anonymized to their sector (e.g. "a banking client"); no internal links or names are published.
• Navigation: sticky index (table of contents), category filters and live text search over titles, sectors and technologies.
• SEO & social: canonical URL, Open Graph / Twitter cards with a 1200×630 share image, JSON-LD Person structured data, sitemap.xml, robots.txt and a web manifest.
• Diagrams: every project has an inline SVG solution-overview diagram generated from content/diagrams.yaml (no external image needed), rendered on that project's own page, overridable per project.
• Multi-page: the home page lists project summaries; each project has its own URL at /projects/<slug>/ with the full STARL breakdown, diagram, and previous/next navigation — both are generated by build.py from the same content/ data.

See context.md for the original content/design rationale, and docs/adr/ for the why behind every tooling decision (YAML content, Pydantic validation, uv, Ruff, taskipy, CI).