About

Colophon

The technical and ethical choices behind this site.

Why this site exists

This site is my portfolio. It presents my practice as a Product Designer through selected case studies, within the limits of the confidentiality I owe my clients and employers. It complements florianbeaufils.com, my digital ID card, which remains the reference page for my name.

What it is not:

  • Not a public site — it is deliberately kept out of search engines and shared by direct link
  • Not a blog — no posts published for now
  • Not a booking page — an email is enough

Technical stack

  • Framework: Astro
  • Styles: pure CSS, centralized design tokens, no CSS framework
  • JavaScript: minimal for interactions (theme toggle, comfort panel, micro-interactions)
  • Animations: GSAP, bundled with the site (no third-party CDN)
  • Fonts: system fonts only (zero HTTP request, zero loading)
  • Hosting: Cloudflare Pages
  • Domain: florianbeaufils.design (Gandi registrar, Cloudflare DNS)

Eco-design

The site is aligned with the RGESN framework (French Interministerial Department for Digital Affairs) and the GR491 from the French Institute for Sustainable IT. Concrete choices:

  • System fonts — no downloaded fonts, so no network request for typography
  • Icons — inline SVG, no library loaded
  • Images — modern formats (WebP, AVIF), adapted dimensions, lazy loading (loading="lazy")
  • No third-party scripts — no loading from Google, Meta or any external CDN
  • No commercial profiling tools (see « Privacy » below)
  • Target weight — less than 500 KB on first load

Beyond these technical choices, the approach itself is sustained over time:

  • Measurable targets — a budget of under 500 KB per page, network requests kept to the strict minimum, and publicly verifiable scores (EcoIndex A, Website Carbon A+)
  • Review at every change — each change is weighed against its cost (page weight, requests, rendering) before going live. A feature that doesn't improve the experience at constant cost isn't added
  • Content lifecycle — content that becomes obsolete (expired certificates, unused pages) is removed rather than left to accumulate. The site is deliberately kept to what serves its purpose

One deliberate difference from florianbeaufils.com: this portfolio ships the GSAP animation library to power richer animations, designed for demonstration. That is an extra cost — a few dozen kilobytes of JavaScript, served from the site itself — accepted knowingly: on a portfolio, motion is part of the message. Everything else about the approach holds: system fonts, inline SVG, no third-party scripts, no audience measurement. And every animation respects prefers-reduced-motion as well as the comfort panel's "Stop animations" setting.

Environmental performance notes (EcoIndex, Website Carbon) will be published in the accessibility statement once the redesign goes live.

Accessibility

Web accessibility doesn't start on the site itself: it starts in the system preferences of the person visiting. Text size, high contrast, screen reader, magnifier, reduced motion — these are the tools that people with disabilities configure once, at the device level. A well-built site respects those choices without asking to be reconfigured.

This site targets the WCAG 2.2 level AA standards (AAA on critical contrasts), RGAA and EAA. In practice:

  • System preferences respected: prefers-color-scheme (light/dark mode), prefers-reduced-motion (animations), prefers-contrast (high contrast), prefers-reduced-data (data saving)
  • Strict HTML semantics and respected heading hierarchy
  • All interactive elements keyboard-accessible, distinctive visible focus
  • Minimum interactive area of 44×44 px on all clickable elements (Fitts's Law, WCAG 2.5.8)
  • Skip link (« Skip to main content ») on first tab

In addition, a comfort panel allows on-the-fly display adjustments: text size, spacing, alignment, contrast, hide images, stop animations, and more. This panel is a complement for contextual needs (fatigue, borrowed screen, momentary preference) — it does not replace the assistive tools configured at the OS level, which remain primary.

No accessibility overlay. This site embeds no third-party widget claiming to be a one-click compliance solution — no condition-based simulation profiles (dyslexia, AMD, color blindness…), no built-in text-to-speech, no on-the-fly « dyslexia » fonts. These tools create the illusion of accessibility without changing the underlying code, and the international digital accessibility community has thoroughly documented their limitations and the harm they can cause to the people they claim to help. The only accessibility that works is the one built into the code (HTML semantics, contrast, keyboard navigation, screen reader compatibility) and the one users configure in their operating system and assistive tools. The comfort panel on this site is a complement to personalization, never a substitute.

The full conformance details, audit results and how to report a problem are documented in the accessibility statement.

Privacy

  • No cookies, third-party or otherwise
  • No advertising retargeting pixels or third-party profiling tools (no Meta Pixel, no LinkedIn Insight Tag, no Google Tag Manager)
  • No personal data collected without explicit interaction
  • No audience measurement — no cookies, no measurement script, no beacon. Your visit generates no statistics, even anonymous ones

The full list of tools used and their role is detailed in the privacy policy.