Skip to content

Final Release

Latest
Latest
Compare
Choose a tag to compare
@smiddy-001 smiddy-001 released this 22 Sep 01:54
· 4 commits to main since this release
untagged-d513e973023f5707b4d3
a776c4b

Summary of Project

I created a replacement website for Five Peaks Accounting. It functions very similarly to the existing page however I have addressed some of the things I did not like about the existing page found at 'https://www.fivepeaks.co.nz/'

I also used a website development framework called ReactJS which makes aspects of the website significantly faster than If I used vanilla JavaScript. I utilised React to make the website a single page application which means that upon load of the website It pre-loads every single page so when switching between pages It happens instantly rather than redirecting to another page it changes the page using the users individual hardware which is significantly faster / instant.

End User

My end users are business owners ( 20 - 60 year olds ) looking for someone to help manage or discuss finances. This somewhat specific end user helped me with designing the user experience with the fact that they are looking for a clean and professional website to help portray professionalism and trust in the accounting firm. This led me to use secure & professional colours cyan, white and charcoal grey, I could have incorporated more colours in the site as there is lime in the logo but decided to go with simplicity as it conveys professionalism.

Key Features

  • Navigation Bar
    • Instant switching between pages
    • hover in & out animation transitions
  • Contact Component
    • SVG icons
    • google maps API integration
    • links to more information
  • Footer Page
    • SVG components inside CSS grid
    • Social media links
    • Integrated navigation bar
  • Home Page
    • Buttons that link to the functions called in the navigation bar
    • radial images inside flex
  • Inquiry Page
    • Form integration with "Emailjs" to allow user to send inquiry's through a on page form
    • resizable text input
  • About Page
    • text inside CSS grid
  • Services Page
    • first useful and necessary use of react props and components
    • overlay container that displays when the information link is clicked that can be closed by clicking again
  • Pricing Page
    • simple horizontally centered text div
  • Contact Page
    • only shows the contact and the footer
  • File Structure
    • I ensured all the files in the project were in an appropriate folder That way if the project were to get bigger it would be easy to find things.
    • I used the file structure I picked up on when learning ReactJS which is to have all your seperated pieces of jsx in a '/Components' Folder and I also added my own '/Images' & '/Font' folders

Video Recording

Youtube Link

Burn-down Charts / time management tools

First Sprint

Second Sprint

Third Sprint

Why I used Miro as opposed to a burn-down chart generator?

I used manually made my charts in Miro because Miro was the tool I used for all my previous planning and I wanted to simplify and minimize the amount of planning tools I was using to not only help me focus on writing code rather than switching between multiple planning services, it was also better because when I was on my Miro board referring back to previous wire-frames I'd see the burn-down chart and It would be a constant reminder to keep it updated at the end of each session.

Relevant Implications

Legal

The five peaks current website was built using a website hosting tool and its monthly subscription also puts a lot of power in the hands of this website building tool as if they increased their monthly subscription rate there is little to nothing that Five Peaks can do as they hold the rights to the domain and the website itself.

I also ensured all photos used were either my photographs or from pixabay which is free for commercial & non commercial "Pixabay contents are free to use for commercial and non-commercial purposes. "

Aesthetic

The aesthetics were a big part of the design process of the website and it influenced a lot of my CSS styling decisions. Such as using CSS variables on things that I wanted to stay the same such as border radius which smoothed edges to all either be the var(--Radius) and I ensured I had a primary color to signify points of the webpage such as buttons & hover effects.

I consciously didn't use black as it is not only a very contrasting colour that is seen in almost every website but it also causes eye strain and I found the site much more relaxing to read when it was an off-shade of black.
The white in the site is to balance the colours out and give users space so their eyes can focus on the more important colours and their content.
cyan was used for buttons and important things as colour is better utilised for marking things to interact with.

Sustainability and Future Proofing

To ensure the website was future proofed I not only setup the folder structure so it was easy to replace & locate files but I ensured in the package.json file that most of my external packages such as mail-JS and react-JS had the "^2.1.4" which means “Compatible with version”, will update you to all future minor/patch versions, without incrementing the major version. ^2.3.4 will use releases from 2.3.4 to <3.0.0. Meaning that when the frameworks I am utilizing get minor/patch updates It will install them automatically which generally improves performance or security of those specific frameworks.

Accessibility

Testing

For testing I ensured I was using reactJS which automatically pops up errors on the terminal hence why I only need to validate my CSS and "expected boundary " validation

CSS Validation

Expected Boundary Testing

Assets 2
Loading