Build Personal Portfolio Website for Developers

Today I will use my personal website(https://shangguanw.com/) as an example to illustrate how to build your own developer portfolio website from scratch.

Do you really need a personal portfolio website?

A personal portfolio website can give you a competitive edge in the job market. I've noticed many companies, particularly when hiring for junior developer positions, ask for a personal website link. This is an opportunity to showcase your technical skills and convince hiring managers to give you a chance, especially if you come from a non-traditional background. Not only that, a personal website establishes your online presence that goes beyond job-searching purpose. For example, if you are attending a tech conference, a personal website can serve as a powerful networking tool.

Step 0: Planning

As a beginner, there is no rush to build a personal website. After all, it's like a jewelry box to display your portfolio projects, and those projects take time to build. Instead, start by gathering design inspirations. I have a bookmark folder dedicated to collecting outstanding examples. Once you have 2-3 projects under your belt, you can start planning the styles and layout for your website piece by piece.

Step 1: Decide on the Tech Stack

While there are many combinations of tech stacks to choose from, I chose React, Tailwind CSS, and Material UI. I wanted the portfolio website itself to be a project to demonstrate my newly acquired skills and go beyond the plain HTML-CSS-JavaScript combo. If you are targeting specific companies, you may even refer to their frameworks. For example, TypeScript is an open-source project maintained by Microsoft, and Meta invented React.

Step 2: Divide Sections

Since React is based on the core principles of components, it forces you to think about the building blocks for each section. A good framework not only makes coding easier but also teaches you a new way of thinking. Here is a section checklist for my website, feel free to customize to your needs:

• Navigation Bar: jumps to the right section when clicked and should always stay at the top while scrolling.
• Hero:
  • Name, Title
  • Social Icons with links
• About:
  • Profile Photo
  • Bio Paragraph
  • Technical Skills as badges (optional)
  • Experience
  • Education
• Projects: each project should include the following
  • A screenshot
  • Title, a short sentence description, list of tech stack used
  • Live link and Github link
• Footer: include copyrights and the tech stack used to build the site

Step 3: Bonus Points

Once you have the contents, it's time to add some design sprinkles. Remember the design inspirations you collected? Pick some elements you like and blend them into your site, don't copy paste the exact design, and avoid using popular designs that are too common such as the typewriter effect. Here are some sprinkle ideas to consider:

• Animate the social icon with a little bounce when hovered over.
• Add a fade in reveal animation effect while scrolling using the React Awesome Reveal library
• Utilize LottieFiles for animated illustrations.
• Add tooltips to the tech stack icons. A non-technical person may not recognize those language logos, so some tooltip text would be helpful.
• Consider adding a "working in progress" project, this shows potential employers that you are constantly improving yourself through new projects.

Other things to consider:

• Responsive Design: does the page still function well from tablet and mobile screen? My lesson learned here is always start the base CSS with a mobile-first approach, then add rules for larger breakpoints. Mobile layout is usually simpler and nowadays mobile users outnumbers desktop users, so make sure to follow best practices to get the mobile design right first.
• Accessibility: It is also crucial to allow people with disability to enjoy your content.

Further Resources:

• Josh Comeau's free e-book: Building an Effective Dev Portfolio https://www.joshwcomeau.com/effective-portfolio/
• Portfolio review videos on Youtube: Scrimba

I hope you found this post informative and helpful. If you enjoyed it, please consider giving it a like or share it with your friends. Happy Coding!