I have also refactored this project into Angular, link: https://github.com/StanleyY7/portfolio-in-angular
The overall goal of this project was to create a functioning and responsive portfolio website (using HTML, CSS/SCSS and JS) to showcase our skills and the projects that we are working on.
The main requirements for this project were:
- The project needed to be stored/shared as a public repository on Github.
- The website needed to be styled using SCSS.
- The website needed to look good on all devices and therefore needed to be responsive.
- BEM naming convention should be used for scss selectors.
- The project also needed to be hosted live on Github pages.
As well the website needed to contain:
- A Landing page or section.
- An About page or section (to provide a brief summary as to who I am).
- A Projects page or section (to showcase my current and/or future projects that I am working on).
- And a Skills page or section (to showcase the programming languages that I am skilled in).
- functional links to my projects on Github and to its associated live webpage.
I achieved the above requirements by first designing (in general) how I would like my website to "look and feel", as well as ensuring that the MVP requirements are met first and then adding on additional styling/animations once that has been completed. The main challenges I experienced working on this project were making it responsive and ensuring that it "flowed" nicely no matter which device was being used. To resolve these challenges I consulted material available online (i.e. looking up common breakpoints for devices, common screen resolutions for devices etc...) as well as looking at reference websites that were provided for the project to see how they were structured, looked and flowed.
To further summarise, the tech stack I used for this project are:
- HTML
- CSS/SCSS
- JS
- Cucumber-Js