How to Build a Minimal Developer Portfolio Website Using React + Tailwind + Vite

As you may know, I built a minimal developer portfolio website. Not just the GitHub profile page from last video. Or the Terminal Website from earlier this year. But a custom website with an intuitive, minimal design that gives a prospective client a quick look at you and your work as a developer. And now, I've decided to create a tutorial to teach you how to build this exact website for yourself.

The tools I used for this project include:
Vite - Build tool for the boilerplate and structure
JavaScript - Programming language
React - JavaScript library for building user interfaces
Tailwind - CSS framework
Hostinger - Web hosting platform
GitHub - Version control & CI/CD via Hostinger integration

0:00 Overview & Tools
2:14 Create project w/ Vite and Tailwind
4:14 Setup boilerplate and connect files
11:25 Intro
16:43 Portfolio
28:34 Timeline
39:04 Contact
45:20 Footer
46:42 Title
49:01 Dark mode
58:25 GitHub, Hostinger, and Actions
1:07:12 Thanks for Watching!!

This video is sponsored by Hostinger.

------------------------


📓 Learning Resources:

👨‍💻 My Coding Gear:

[saibfps]

I never wanted to do a code-along tutorial but you made me change my mind because of the tech stack you decided to go with and the project you chose. Forrest, you're such a great teacher, especially the way you go about explaining what each step means!

[ayubhaji]

I like what you said in the end about knowing what the code is doing if you want to add it as your own project, which is why I always tend to switch things up when I watch a tutorial and add something different instead, using a similar idea. I feel that way I understand what each part is doing and I really actually doing something instead just copying code line for line. Thanks for the video, keep it up!

[wilfredomartinez]

I've been wanting to build a site for the last 2 years. Not a cs student or anything, but have dabbled with just some languages, vscode, wsl, github, and lots of technologies you used outside of the language itself. The way you brought it all together fit perfectly in my head, and taught me a lot on how to tie these random bits of knowledge I have together at long last. This was a great tutorial, appreciate it lots man

[cjwilliams]

This came right on time. My original portfolio site had all the bells and whistles, fancy animations, pretty icons, colors and gradients. It served it purpose at first to show off my Front-End skills, however as I developed more into a Back-End Dev I wanted something less "pazzazy". Looked around for some examples of simple and minimal, not much was out there until Forrest did a teaser about his site a few weeks ago. I couldn't wait for him to post this tutorial. Thank you Forrest, great work brother, I really appreciate it. 💯🤛🏾

[jackstrickland]

The tutorials help me a ton especially when using technologies and dependencies I haven't used before. I had never heard of Tailwind or Vite and might not have been compelled to touch them until after the tutorial. It really demystifies the whole process of picking up a new technology and the quality of videos and the quality of your teaching ability gives me a ton of confidence to take what I learn and continue building my own projects with these new tools. Great tutorial!

[binarydrool]

would love to see more tutorials about building databases, when and what ones to use. allowing millions of user to join your site.

[anshuldagar]

Best tutorial I have seen from setting up the project to deploying the site.

[Milan]

This is the best video I have ever seen on web development. As an intermediate web developer, I found it to be very helpful and informative. The explanation of the concepts was clear and concise, and the examples were easy to follow. I would highly recommend this video to anyone who is interested in learning more about web development.

My only suggestion for improvement would be to include a discussion of React Router DOM. and I think it would have been helpful to see how it is used in practice.

[derekprieur]

Very helpful tip in the portfolio section with rearranging the assets folder for the production build. I have never seen that covered before, thanks man!

[okage_]

wow i was not expecting to learn setting up github actions for auto deployment and generating an ssh key for a private repo. really well made tutorial i really like this style and yes i would love to see more

[iskrenivanov]

Hey Forrest, very good video! I like how you separate your data from your components. and used Tailwind for your styles . The explanations shows more reasoning behind your choices so I like this type of tutorials. Maybe you can do one for Node and Typescript and build a back end service and to fetch the portfolio data from there.

[ishanchoudhary]

Tbh this is the first tutorial I didn't try skipping or shit. Informative :D

[JBurky]

I mostly did this tutorial to learn more about Tailwind and it definitely did not disappoint. Good job on this one Forrest!

[samadams]

If you are struggling with github actions be sure that your yml file specifies 'main' branch if you are using main. Not 'master'

[gevcrln]

a tiny tip is that you can just type "code ." to open vs code on the current folder and it opens it just as you did without needing to cd upwards.

[ZYoungdale]

Not sure if this was available at the time of making this video, but Tailwind now has a setup guide for Vite to make setup a little easier!

[DataCraftsman]

This took me hours to do, loved every minute of it.

[Torbikini]

Thank you for the tutorial. I’m a Vue dev myself, but I might have to give this a try. 😊

[sora_dev]

Thanks a lot Forrest, this was a fun project really, on top of which now I have an awesome minimal portfolio!

[vivcomplex]

Really good video. Sadly don’t have enough of a reason to make a portfolio in my self taught journey but once I do I’ll be back to build it 🙏🙏🙏