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

Achievements:

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.

Conclusion:

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.