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.