This project is an iteration of the Web Developer’s Professional Page (2023) and Web Developer’s Professional Page (Bootstrap) (2023).
Further to previous iterations, the project brief specified that the website should make use of React and React Router for dynamic rendering. As a minimum, six components were also required consisting of:
- App (as the top level component, rendering children components)
- Header (containing a navbar, and rendered across the entire site)
- Home
- Project Gallery (dynamically rendering instances of the Project component)
- Project (reusable, and ingests JSON data as a props)
- Contact (containing a Form for handling events)
In addition to the above, the website makes use of Web3Forms API for handling the contact form submissions. The website also goes beyond the scope of the project brief, by including additional components (e.g. Skills, Footer, Modal etc) and functionality (e.g. API calls).
The js and jsx files have been commented throughout to explain the functionality of the code.
The website was designed with mobile-first design in mind and the site’s colour palette was chosen for its aesthetics; although later adjusted to meet WCAG color requirements.
Home page:
Projects page:
Contact page:
N/A
Users navigate to the website via the URL (Code Em - Web Developer). When on the home page, users are presented with a navigation bar, profile section, skills section and footer. The profile section includes three buttons, two of which link to external sites (email and gitHub) and one prompts a file download (CV).
The navigation bar and footer are displayed on each page of the site. As users navigate to different pages, the styling of the navigation bar updates (indicating which page the user is currently on).
On the projects page, several cards are displayed; each of which includes an image of the project, a shortened version of the project brief and (where applicable) buttons which link to the deployed application and repository.
A fully functional contact form is displayed on the contact page, alongside buttons which (again) link to external sites (email and gitHub) and file download (CV). The contact form includes validation on each input field. If the user completes the form incorrectly, a modal with an error message is displayed. When the form is completed successfully and a message is submitted, a modal with a pending/ confirmation message is displayed.
The website is fully responsive and adjusts for different screen sizes and viewports. As an example, the home page displays as follows:
On a resolution of 1400px:
On a resolution of 375px:
- Wireframes (re README): Excalidraw (2023) Hand-drawn look & feel.
- Avatar (re Home): Anon (no date) Avatar Maker.
- Badges (re Skills, Projects and README): Shields.io (no date) Static Badge.
- Icons (re Whole Site): Bootstrap (no date) Bootstrap Icons - Official open source SVG icon library for Bootstrap.
- Colour palette (re Whole Site): Coolors (no date) The super fast color palettes generator!.
- Accessibility Checker (re Whole Site): Accessibility Checker (no date) Accessibility Color Contrast Checker WCAG Compliance.
All other credits are cited in the code comments and referenced below.
Select the badge or visit the LICENSE.txt (above) for more information.
Code written by Code0Em (email/ GitHub).
lasjorg via freeCodeCamp Forum (2022) Closing bootstrap navbar on click of link.
Medium (2022) How to Open a Link in a New Tab in React.
Net Ninja (2023) React Router in Depth.
Saeed Rohani via Stack Overflow (2020) React-router scroll to top on every transition.
Web3Forms Documentation (no date) Simple React Contact Form.
Web3Forms Documentation (no date) Troubleshooting.
Xpert Learning Assistant (2024) (accessed via Virtual Learning Environment).