The Roshan Kr Soni Portfolio is an open-source React and Vite single-page portfolio template for developers that serves as a digital resume, with system-based dark/light modes and a perfect 100/100 Lighthouse score.
What is the Roshan Kr Soni Portfolio?
It is a personal portfolio website built by Roshan Kr Soni using React 19, Vite 6, and Tailwind CSS v4. It takes developer profile content (projects, experience, skills) and renders a responsive one-page site with animations and theme toggling. The site is deployed on GitHub Pages.
Key Features
- Perfect Lighthouse scores — The site holds 100/100 across all Lighthouse categories thanks to aggressive code splitting in Vite and ARIA-labeled UI.
- Dark and light modes — Automatically follows the system theme, implemented with Tailwind CSS v4.
- Modern React 19 + Vite 6 stack — Uses React 19 for components and Vite 6 for fast builds and code splitting.
- Tailwind CSS v4 styling — Utility-first CSS that handles responsive layouts and theme variants.
- Micro-animations — Uses the Motion API for fluid scroll and entrance animations.
- Icons — Integrates Lucide and React Icons for UI glyphs.
- Responsive one-page layout — Built for mobile viewing with a fluid layout.
Who is it for?
- Software engineers — to showcase their portfolio, experience, and projects in a single-page format.
- Job seekers in tech — as a resume website that can be deployed on GitHub Pages to share with recruiters.
- Developers learning React/Vite — as a codebase to study how to set up a modern React app with Tailwind and animations.
What can you do with it?
- Personal branding: Set up a live portfolio at a GitHub Pages URL with your own name and project details.
- Code learning: Explore a production-quality React 19 + Vite 6 project structure with Tailwind CSS v4 and Motion API.
- Rapid deployment: Clone, install, and deploy to GitHub Pages using the provided npm run deploy command.
How does it work?
The repository provides a local development workflow. You clone the repo, run npm install to install dependencies, then npm run dev to start the development server. To deploy, run npm run deploy which builds and publishes to GitHub Pages.
Pricing
Free and open-source. The author asks only that you replace personal details and credit the original in your footer or README.
FAQ
Is this portfolio template free?
Yes, the repository is open-sourced. You can use it for your own portfolio as long as you swap in your details and credit Roshan Kr Soni (e.g., in the footer or README).
What tech stack does it use?
It uses React 19, Vite 6, Tailwind CSS v4, the Motion API for animations, and Lucide/React Icons for icons. It also uses JavaScript. No CMS or backend is included; it's a static single-page site.
How do I deploy to GitHub Pages?
After cloning and installing dependencies, run npm run deploy. This script builds the site and publishes it to GitHub Pages. The live demo is at https://roshankrsoni.github.io.
What Lighthouse scores does it achieve?
The author reports a perfect 100/100 across all Lighthouse categories, achieved via aggressive code splitting and proper ARIA labels.
