React Portfolio Template — Dark/Light Mode, Bilingual (EN+FR) & TypeScript
A fully responsive, customizable portfolio starter built with React 19, Vite 7, and TypeScript — get your portfolio live in under an hour.
If you've ever spent weeks building your personal portfolio from scratch — tweaking layouts, setting up routing, wiring up i18n, debugging responsive breakpoints — you know how much time it takes before you even write a single line of content.
I did exactly that. Then I turned it into a template so nobody else has to.
What's inside
The template is a complete, production-ready portfolio website with 9 fully built sections:
Home — animated hero with dynamic role display
About — education timeline + ID card layout
Skills — icon grid
Certificates — card grid with modal detail view
Achievements — card grid with modal detail view
Experience — timeline with modal detail view
Projects — card grid with modal detail view
Contact — form with validation + contact info cards
Footer
Tech stack
React 19 + Vite 7 — fast dev experience, instant HMR
TypeScript 5.8 — fully typed throughout
React Router DOM 7 — client-side routing
i18next — internationalization, English and French included
Lucide React — clean, consistent icons
Pure CSS — no UI library, fully custom styling with CSS variables
Key features
🌙 Dark / Light theme
One-click theme toggle. Preference is saved to localStorage so it persists across visits. The entire color system is built on CSS custom properties — swapping themes is a single data-theme attribute change on the root element.
🌍 Bilingual support
All content lives in two JSON files — src/locales/en/lang.json and src/locales/fr/lang.json. Switch languages from the header dropdown. Adding a third language takes less than 10 minutes.
✏️ JSON-driven content
You don't need to touch any component code to make this template yours. Every piece of text, every project, every certificate, every experience entry — it all lives in one JSON file. Edit the JSON, save, done.
📱 Fully responsive
Built mobile-first with breakpoints at 480px, 768px, 1024px, and 1200px. Tested on all screen sizes.
How to get started
# Install dependencies
npm install
# Start dev server
cd portfolio-template
npm run dev
Then open src/locales/en/lang.json and replace the placeholder content with your own details. That's it.
Full setup instructions are in the README included with the template.
Live demo
See it running here → click here
Get the template
The full source code is available on Gumroad for $19.
What's included:
Full source code (ZIP)
README with step-by-step customization guide
Lifetime access
Built with React 19, Vite 7, TypeScript, i18next, and a lot of CSS variables.