How I Built My First Portfolio with React and Vite

#vercel #vite #react #portfolio

Hello, developers! In this article, I want to share how I built my first portfolio using React and the Vite bundler. I had always wanted a personal website to showcase my projects, tell a bit of my story, and make it easier for recruiters and clients to get in touch.

I chose React for its popularity and flexibility, and used Vite to speed up development with a modern, fast, and practical environment. I’ll tell you how I planned, developed, and published my portfolio — and the lessons I learned along the way.

Motivation

Having an online portfolio today is essential for anyone working in tech. Besides being a business card, it’s a concrete way to demonstrate your skills and stand out.

I chose React and Vite because:

React gives me freedom and a powerful component-based architecture
Vite has a super fast build and efficient hot reload
The React community is huge, with tons of documentation
Deployment is easy on platforms like Vercel or Netlify

Planning

Before opening the code editor, I did a bit of planning:

✅ Portfolio sections:

Home
About
Projects
Contact

✅ Chosen technologies:

React
Vite
Vercel

✅ Design
I got inspiration from Dribbble and Behance references to define the color palette, typography, and layout. I made a quick wireframe on paper to guide me.

Development

I started the project with:

npm create vite@latest my-portfolio --template react

Then I configured Tailwind CSS following the official documentation, which really sped up the styling process.

I organized the project structure like this:

/src/components for reusable components (navbar, footer, project cards)
/src/pages for the main pages
/public for images and favicons

One of my initial challenges was keeping components clean and separated, since it’s easy to end up with giant files. Later I refactored and split them into smaller, easier-to-maintain components.

I also added a JSON file to store the projects, so I can update them later without changing the layout code directly.

Deployment

For hosting, I used Vercel, which works great with React projects. You just connect your GitHub repository, and Vercel takes care of the entire build and deployment process automatically.

I also set up a custom domain to make my portfolio more professional.

Conclusion

Building my portfolio with React and Vite was a great experience. I learned how to better organize my code, practiced using modern tools, and launched my site in just a few days.

If you’d like to take a look, check it out here:

👉 (https://danielfilemon)*

Feel free to leave a comment or question — I’d love to connect!