← All projects
Web
Portfolio showcase
This site: multi-page, bilingual, responsive, dark mode, no framework.
Done
Sprint S1-S9+S35+S40+S44+S63 · 16 points
In short, no jargon for non-developers Read the summary Close
What it is The site you are reading: my background, my 22 projects and how I ran them, in French and English, on a computer as on a phone.
What it is for To show in one place what I can do, with demonstrations you try right in the page.
What it shows Care for detail: every change is checked automatically on several browsers and phones, and the site stays usable with a keyboard and with screen readers.
Taught in M1 (human-computer interaction)
How the pieces fit together
Diagram: Data → Generator (read at build time) ; Generator → FR and EN pages (writes) ; Generator → JSON API ; Tests → FR and EN pages ; CI → Tests ; CI → GitHub Pages (deploys if green).
read at build time
writes
deploys if green
Data
JSON, sprints in Markdown
Generator
Node, no framework
FR and EN pages
HTML, CSS, JavaScript
JSON API
read by the dashboards
Tests
node:test, Playwright, axe
CI
GitHub Actions, 3 OSes
GitHub Pages
static site
Data (JSON, sprints in Markdown) → Generator (Node, no framework): read at build time
Generator (Node, no framework) → FR and EN pages (HTML, CSS, JavaScript): writes
Generator (Node, no framework) → JSON API (read by the dashboards)
Tests (node:test, Playwright, axe) → FR and EN pages (HTML, CSS, JavaScript)
CI (GitHub Actions, 3 OSes) → Tests (node:test, Playwright, axe)
CI (GitHub Actions, 3 OSes) → GitHub Pages (static site): deploys if green
Tech stack
Who does what
HTML The pages, generated by a Node script from the data (projects, CV, sprints): no framework in the browser. CSS The brand colours (dark grey, pistachio, chocolate) in a single colour file, light and dark themes, mobile layout. JavaScript The project page demos (viewers, games, editors) and the pages' small behaviours: theme, sorting, filters. Node.js The site generator and the unit and integration tests (node:test), including the private data scan. Playwright End-to-end tests on Chromium, Firefox, WebKit and two phones, with axe for accessibility. GitHub Actions Each project's CI on Linux, Windows and macOS, then the deployment to GitHub Pages.
Definition of Done
Code reviewed, diff by diff Unit and integration tests green Green CI on Linux, Windows and macOS when compiled README, REVIEW.md and DECISIONS.md up to date Texts in French and English Demo deployed and tested on mobile