react-frontend-dev-portfolio is an open-source portfolio template built with React and Tailwind CSS that helps developers launch a personal portfolio site with sections for about, experience, skills, and projects.
What is react-frontend-dev-portfolio?
react-frontend-dev-portfolio is a developer portfolio template that combines React, TypeScript (via Vite), and Tailwind CSS. It fetches all portfolio content from JSON files, so you can update your personal information, skills, and projects without touching component code. The project is a complete rewrite of Dorota1997/react-frontend-dev-portfolio and is maintained on GitHub by devmahmud.
Key Features
- Multilingual — built-in support for switching between languages (demonstrated in the live demo).
- Mobile friendly — responsive layout that adapts to mobile devices, shown in the included demo GIF.
- Light/dark mode — toggle between themes using a switch component based on react-switch.
- JSON-fetched data — all portfolio content is loaded from JSON files, making content updates simple.
- Expandable sections — modular React components for about, experience, skills, and projects, based on inspirations like react-vertical-timeline and react-awesome-slider.
- Easy deployment — deploys to GitHub Pages with the yarn deploy command after setting the homepage and base path.
- Modern tooling — built with Vite (vite.config.ts) and Tailwind CSS, with icons from Iconify Design.
Who should use it?
- Frontend developers who want a ready-to-use portfolio template they can fork, customize, and deploy without building from scratch.
- Job seekers in tech who need a clean, responsive way to present their work experience and projects to recruiters.
- Open-source learners who want to study how a React + Tailwind + Vite project is structured and extend it for their own needs.
Use cases
- Developers: quickly set up a personal portfolio by editing JSON files and running two commands (yarn install and yarn dev).
- Students: showcase academic projects and skills in a professional layout with light/dark theme switching.
- Freelancers: present a multilingual portfolio to international clients, with content stored separately from the UI.
How does it work?
Clone or fork the repository, then run yarn install to install dependencies. Before running locally, remove the homepage field from package.json or set it to a dot, otherwise the JSON data will not load. Use yarn dev for local development and yarn deploy to publish to GitHub Pages. If your portfolio lives in a subdirectory, update the homepage and the base in vite.config.ts accordingly.
Pricing
The template is free and open source, hosted on GitHub for anyone to use and modify.
FAQ
Is react-frontend-dev-portfolio free?
Yes, the template is open source and available on GitHub. You can clone, fork, and use it for personal or commercial projects without charge.
How do I change the portfolio content?
Edit the JSON files that the template fetches — they contain the data for sections such as about, experience, skills, and projects. Replace the values with your own information.
Does the template support dark mode?
Yes, a light/dark mode toggle is included in the interface. It uses a react-switch component and persists your preference during the session.
Can I deploy it to GitHub Pages?
Yes, after adjusting the homepage property in package.json and the base in vite.config.ts, run yarn deploy. The command publishes the built site to GitHub Pages.
What are the main dependencies?
The template uses React, Tailwind CSS, Vite, and several animation libraries including react-vertical-timeline, react-awesome-slider, react-switch, and react-type-animation.
