Author: Benjamin Stuart
Date: 06/03/2022
Website: https://benjaminstuart.dev/
Github Repo: https://github.com/BenjaminStuartDev/My-First-Portfolio
Git Log: Git Log
My portfolios purpose is to showcase my best works, personality, skills and creativity in a design that is accessible, clean and colourful. The goal of my design is to portray my human and developer skills in a way that is engaging the target audience, employers and potential clients.
My target audience is prospective employers and clients on all device widths.
My portfolio consists of four pages: Home, About, Experience and Works. With the purpose of these pages to direct potential employers/clients to contact me,view my work, view my resume, see my experience and learn more about my interests and personality.
Through the use of components the website is completely responsive, accessible, easy to navigate and emphasises page quality.
The main components used throughout my website include:
Navbar:
- The navbar is at the top of all pages and serves as a linking point between them.
- The navbar caters to accessibility through the use of bold text and contrast verified colours.
- The navbar caters to screen readers through the clear use of semantic tags.
- The navbar utilises a border effect which highlights to the user which page they are "actively" on and serves as a feature for users to identify that the inactive pages are clickable.
Footer:
- The footer is at the bottom of all pages and serves as a linking point to my twitter, github and linkedin.
- The footer caters to accessibility in the same way as the navbar using appropriate colours and semantic tags that are useable by screen readers.
- The footer utilises a scale effect which highlights to the user that they are clickeable.
Contact Form:
- The contact form is on my homepage and encourages potential employers/clients to contact me directly.
- The form caters to screen readers through the clear usage of input labels.
- The form is user friendly and accessible through the usage of the autocomplete field as well as changing to blue when the users is active inside the input area.
Cards:
- Cards are a generic styling used across the website to style and contain items.
- The first card is the page-wrapper card which serves to contain sections of text and images in any order and is used across all pages.
- The second card is the blog-card which is a clear component and serves to style and contain blog related information on the works page in a heading, text, image format.
- The third card is the exp-card which wraps a header, image and text container used on the experience page.
Minor components that are relevant include:
Contents:
- The contents is used on the Works page and serves as a way for users to navigate the page without needing to scroll.
- The contents uses correct semantic tags which are both accessible and readable by screen readers.
- The contents are also designed to look like links so that it is clear to the user that they are clickable.
PDF link:
- The pdf link utilises a link wrapper for styling and an anchor tag and is a component used throughout the website to encourage the user to view my resume pdf.
- Text-wrapper is a container used to style text and contain text/specific-images that are relevant.
- Image-wrapper is a container used on most pages to style and contain images.
- alt-page-wrapper is another container similar to the page-wrapper card which is used to override styling for responsiveness on the about page.
The homepage is the sites landing page and from there all other sites are navigated to via the navbar at the top of the screen.
The list of technologies used to build and design this website include:
- Figma for the design of the website.
- html and CSS for the manual building of the website.
- Live-server for ongoing previews of the website during the build phase.
- Git for the repository cloud service.
- Netlify for the hosting of the website.
- Webaim and Webaims WAVE extension for debugging accessibility.