Link Search Menu Expand Document

Portfolio Website

Your portfolio project will be an opportunity to show off all that you have learned. A portfolio is not only a great way to present your talents and favorite projects to potential clients and employers, but also to learn new things!

If you’ve already made a portfolio website, feel free to skip this step or use it as a chance to update/get feedback on your website using the #design-feedback channel inside Slack. (Or, if you’re feeling adventurous, you can use this chance to recreate your portfolio (or other website) using a new web framework!)

Finding Inspiration

  • GitHub - Portfolio Websites. This page lists any repositories on GitHub with the portfolio-website tag.
  • Reddit. People will often post their portfolios in subreddits such as /r/web_design, /r/webdev, or /r/cscareerquestions. A simple google search (“portfolio website ideas reddit”) should return these.
  • Awwwards.

Once you’ve gotten an idea of what you want to create, create a mock-up using Figma or even a sheet of paper. Feel free to utilize the #design-feedback channel on Slack. (They won’t bite, I promise!). For more on how to give and get feedback, check out this Task Guide on Design.

Suggestions for what to include

  • Contact information (LinkedIn, GitHub, name, email, etc.)
  • An ‘About Me’ page or section. Here, you can put background, education, experiences, photos of your cat, etc.
  • GitHub/GitLab repositories. You can use GitHub’s API to automate this process.
  • A logo and/or professional tagline.
  • A link to your resume and/or CV.
  • Samples of your work. Give us the goods!

Some things to keep in mind while creating your website

  • Accessibility and keyboard navigability. Remember to use color combinations with a contrast ratio of at least 4.5:1, semantic tags, and alternative text. Also, remember that any elements not natively focusable, such as a <div> element, can be made focusable using tabindex.
  • Mobile-friendliness. Use responsive web design techniques such as CSS Flexbox, Grid, and/or media queries. A good place to start is setting the viewport.
  • KISS. (Keep it Simple, Stupid). Most recruiters will spend only 3 minutes or less on your website. So, like a resume, try to keep it to one page if you can and include the most important information (like contact information) near the top, with GitHub repos, side projects, or publications nearer the bottom.
  • Quality over quantity. Include only those projects related to the work you want to continue doing and/or best demonstrate your skills.
  • Easy navigation. Single-page layouts work best, but if you have multiple pages, make sure those pages can be easily found (e.g. put navigation bars and dropdown menus in standard locations). For single-page layouts, you can use skip links or tab navigation.
  • You. Oftentimes we forget what a portfolio is all about. People want to know more about you, not just see your work. Geek out!
  • Continue to ask for feedback. If you need help deciding what graphic to use, how to phrase something, or just generally need to know that you’re on the right track, remember to ask for feedback in the #design-feedback channel on Slack.

I finished the website! Now what?

Documentation.

Include a README and pick a license. If applicable, you can also include installation instructions.

Deploy the website.

For static sites (such as a React app), you can use static site hosting services such as Netlify or Cloudflare Pages. These platforms will provide free-of-cost SSL certificates. For hosting backend servers, you can use Heroku, AWS Lightsail, DigitalOcean, and more (these may require a little more setup).

Now that you have a website, tell everyone about it! Update your LinkedIn, add it to your Slack profile, and tell your friends! If you’re feeling brave, consider posting it on Reddit.