How to Design & Develop a Portfolio Website

Steve Jones
2 min readDec 18, 2015

--

There are limitless options for how to design and develop your portfolio website. This is an opportunity for you to learn and demonstrate to employers your proficiency of a new technology or framework.

If you are not confident with your design and development skills you can always use a template or a third party service. Below are a few that I recommend if you choose that route:

Bootstrap

For my portfolio website I chose to go with Bootstrap. Bootstrap is a very popular free and open-source front-end framework for creating websites and web applications.

Bootstrap contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is incredibly popular, it is the most-starred project on GitHub, with 90,000+ stars 38,000+ forks.

You can take advantage of the components and resources Bootstrap provides while still having the freedom to design and develop your site without limitations.

I highly recommend checking out the Hackathon Hackers directory of portfolio websites. There you will find a list of 350+ portfolio websites. Take a look at these websites to inspire your design.

You can also post your site or any questions you have in the HH Websites and Resumes Facebook group to get feedback.

Portfolio Website Guide Directory

This article is part of a guide to building a portfolio website to help land a software engineering position. It includes a link to my portfolio website’s public GitHub repository that I welcome you to clone and use as a template.

Check out other resources in the guide below:

  1. What is a Portfolio Website?
  2. Buying a Domain Name for a Portfolio Website
  3. How to Hosting Your Portfolio Website with GitHub Pages
  4. How to Point a Domain on Google Domains to GitHub Pages
  5. How to Design & Develop a Portfolio Website
  6. What to Include on a Portfolio Website
  7. Software Engineering Resume — Best Practices
  8. Resources to Help Land a Software Engineering Position

GitHub Repository — Portfolio Website

My Portfolio Website: http://stevejones.io

Questions?

Shoot me an email, I’m happy to help: steve@stevejones.io

--

--