Portfolio

A space-themed personal portfolio built with React + TypeScript + Vite. Light design with a single restrained accent color, a starry background, and a centred content flow.

Pages

Route	Page
/	Home
/projects	Projects
/projects/:slug	Project detail
/about	About me
/contact	Contact

The Projects page includes a live search bar and category filters. Each project links to a dedicated detail page.

Tech

• React with react-router-dom
• TypeScript
• Vite for dev/build
• lucide-react for icons
• Biome for linting, Prettier for formatting

Theming

All design lives in src/styles/theme.css as CSS custom properties (colors, typography, spacing, ...). Retheme the whole site by editing that single file.

Customizing content

• Projects — src/data/projects.ts
• Profile, skills, timeline, contact links — src/data/profile.ts

Project cards render a themed placeholder cover when no image is set. Add a screenshot path to a project's image field to use a real screenshot instead.

Languages (French / English)

The site is bilingual with the language carried in the URL (/fr/…, /en/…); French is the default and the choice is remembered in localStorage. A flag toggle switches language while keeping you on the current page.

Every piece of text has a stable ID (e.g. nav.home, home.greeting, project.orbit-dashboard.summary). Components reference the ID only, via the translate() function from useTranslation():

const { translate } = useTranslation();
translate("home.greeting"); // -> "Salut, je suis QQtin." (fr) / "Hi, I'm qqtin." (en)

• Translations — src/i18n/translations.ts. One entry per ID with both languages ({ en, fr }). Editing a translation happens here, in one place — you never touch the pages. TypeScript enforces that every entry has both locales.
• Variables — src/i18n/variables.ts. Set scalar values like name, country, email once. Any {token} in a translation is substituted from here (e.g. "Salut, je suis {name}.").

Unknown IDs return the ID itself and log a dev-only warning, so missing translations are easy to spot.

Scripts

npm run dev          # start the dev server
npm run build        # type-check + production build
npm run preview      # preview the production build
npm run lint         # Biome checks
npm run lint:fix     # Biome checks with safe fixes
npm run format       # Prettier write
npm run format:check # Prettier check