Creating a Software Engineer Portfolio Website: An Overview

Creating a Software Engineer Portfolio Website: An Overview

Zainab Tijani's photo
Zainab Tijani
·Jan 9, 2023·

3 min read

Play this article

This article documents the implementation of a project challenge as part of my Bootcamp at AltSchool Africa. The project involved creating a portfolio website for a software engineer, using the GitHub API to display a list of the engineer's repositories, as well as a page for each individual repository. The portfolio also included an Error Boundary page to test error handling, as well as a 404 page for non-existent routes. You can visit the project at portfolio

In this article, we will cover:

  • What was achieved in the challenge

  • The tools that were used to build the project

  • Future updates that are planned for the project


A modern web design for a software engineer's portfolio was implemented using Create React App. The application features a navigation menu, landing page, project page, and other sections.

  • The landing page: includes an easy-to-use navigation menu and displays a hero section with an introduction to the portfolio, as well as sections for About, Skills, and Blog.

    • The About section provides more information about the engineer and their portfolio.

    • The Skills section lists the tools and technologies the engineer is proficient in.

    • The landing page also includes a contact section for reaching out to the engineer.

    • The footer section includes links to the engineer's social media and email.

  • The project page uses the GitHub API to generate a list of the engineer's repositories, including the code bases and links to live versions on the web.

    • Clicking on a single repository brings up details and instructions for that specific project.

    • The page also includes a next and previous button for easy pagination through the list of repositories.

As required from the challenge:

  • A test error page was implemented to test JavaScript errors with React's error boundary feature.

  • A 404 page was created to handle when a user attempts to visit a non-existent route.

  • Good SEO and accessibility were implemented, using proper semantics and the site features full responsiveness on all screen sizes.

Tools and technologies:

The project was bootstrapped with Create React App and used additional dependencies such as react-router-dom, SASS, TypeScript, and react-ts-particles to complete the project. Additional information on these tools can be found on their respective websites.

  • Create React App

  • Dependencies:

    • react-router-dom

    • SASS

    • TypeScript

    • ts-particles

  • Necessary React hooks

  • GitHub and Hashnode API

Further updates:

Future updates that are planned for this project include:

  • Displaying a cover image for each repository on the project page for aesthetics.

  • Changing the next and previous buttons to include 1-5 pagination navigation for easier use.

  • Adding another section on the project page detailing a quote or fun fact about the engineer.

  • Fixing the bug in the blog section on the landing page and displaying articles accordingly.


In conclusion, the project challenge has been successfully implemented with a modern web design, the use of the GitHub API, and proper SEO and error handling. Future updates will further enhance the aesthetics and user experience of the portfolio.

Share this