Most portfolios are just a list of skills and a contact form. This one actually tells a story.
Features · Quick Start · Why ferion? · Getting Started · Contributing
I got tired of the standard "here are my projects, here are my skills, here is my LinkedIn" format. Because that's not who I am. I'm not one thing. Never have been. Technology, gaming, psychology, content creation, sports, language, culture, entertainment I live in all of it. Picking one felt like lying. So I built ferion. A portfolio that actually reflects how my brain works. Every domain I operate in gets its own large type statement. With personality. Not bullet points. It's not a project showcase. It's a living document of someone who refused to specialize. Built on React 19, Vite 8, and Tailwind CSS 4. Fast, clean, and easy to keep building on. Because a portfolio for a polymath should never really be finished.
- Dark / Light mode — a glitch-effect transition that feels satisfying every time you toggle it
- Glassmorphic navigation — fixed header with a smooth animated pill highlight that follows your scroll position
- Animated Domains grid — seven interest areas, each revealed with staggered IntersectionObserver animations
- Responsive typography — fluid font sizes using
vmin/vwunits; looks great from a phone to a 4K display - About section — personal biography with a live ChatGPT interface mockup embedded inline
- Noise overlay — subtle fractal SVG texture that adds depth without distraction
- Mobile menu — hamburger overlay navigation for small screens
- Zero external dependencies for UI — no heavy component libraries; just React, Tailwind, and lucide-react icons
# Clone the repo
git clone https://github.com/your-username/ferion.git
cd ferion
# Install dependencies
npm install
# Start the dev server
npm run devOpen http://localhost:5173 and you're live.
Most portfolio templates are built for one type of person. A developer. A few side projects. A skills section. A contact form.
ferion is built for everyone else.
The people who are hard to put in a box. Who have too many interests to list. Who want their portfolio to show how they think before it shows what tools they know.
The layout is bold. The typography hits. The writing is actually honest.
"Everyone around me had a plan. I couldn't do it. Not because I was lazy. The opposite, actually. I wanted to do everything." — Ujjwal Kumar Rai
If you read that and felt something, ferion was probably built for you too.
Not a template for a job title. A starting point for people who never wanted just one.
- Node.js 18 or later
- npm 9 or later (or pnpm / yarn)
git clone https://github.com/your-username/ferion.git
cd ferion
npm installnpm run dev # Start dev server with HMR at localhost:5173
npm run build # Production build → dist/
npm run preview # Preview the production build locally
npm run lint # Run ESLint checksAll the content you'll want to change lives in one file: src/App.jsx.
| What to change | Where to find it |
|---|---|
| Social links (Reddit, LinkedIn, HN) | socialLinks array at the top of App.jsx |
| Domains / interest areas | domainsData array at the top of App.jsx |
| About me text | AboutSection component |
Accent color (#FF0055) |
--accent CSS variable in the <style> block |
| Fonts | @import URL in the <style> block |
| Site title | <title> in index.html |
The dist/ folder produced by npm run build is a fully static site. Deploy it anywhere:
- Vercel — drop the repo in, it auto-detects Vite
- Netlify — build command:
npm run build, publish dir:dist - GitHub Pages — use the
vite-plugin-gh-pagespackage or a GitHub Actions workflow
ferion/
├── public/
│ ├── favicon.png
│ └── logo.svg
├── src/
│ ├── App.jsx # All sections and components
│ ├── main.jsx # React root entry
│ └── index.css # Tailwind CSS imports
├── index.html
├── vite.config.js
├── tailwind.config.js
├── postcss.config.cjs
└── package.json
| Tool | Version | Role |
|---|---|---|
| React | 19 | UI library |
| Vite | 8 | Build tool + dev server |
| Tailwind CSS | 4 | Utility-first styling |
| lucide-react | 1.7 | Icon set |
| Outfit + Caveat | — | Typography (Google Fonts) |
Contributions are welcome whether you're fixing a bug, improving accessibility, or adding a feature that makes sense for a portfolio like this.
# Fork and clone
git clone https://github.com/your-username/ferion.git
cd ferion
# Create a feature branch
git checkout -b feat/your-feature-name
# Make your changes, then stage specific files
git add src/App.jsx
# Commit with a clear message
git commit -m "feat: add scroll progress indicator"
# Push and open a PR
git push origin feat/your-feature-nameBefore submitting:
- Run
npm run lintand fix any warnings - Test in both light and dark mode
- Test on mobile (use browser DevTools responsive mode)
- Keep PRs focused — one change per PR
This project follows the Contributor Covenant Code of Conduct. Be respectful, constructive, and kind.
- Bug reports / feature requests — open a GitHub Issue
- Connect with the author — LinkedIn · Reddit · Hacker News
MIT © Ujjwal Kumar Rai
See MIT LICENSE for details.