https://github.com/stanleyy7/stanleyy7.github.io

My personal portfolio website made using HTML, CSS/SCSS and Javascript.
https://github.com/stanleyy7/stanleyy7.github.io

css cucumber html javascript page-object-model playwright-tests scss

Last synced: 13 days ago
JSON representation

My personal portfolio website made using HTML, CSS/SCSS and Javascript.

• Host: GitHub
• URL: https://github.com/stanleyy7/stanleyy7.github.io
• Owner: StanleyY7
• Created: 2022-12-14T01:19:22.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-18T09:55:54.000Z (about 1 year ago)
• Last Synced: 2024-11-12T21:40:56.527Z (2 months ago)
• Topics: css, cucumber, html, javascript, page-object-model, playwright-tests, scss
• Language: SCSS
• Homepage:
• Size: 8.57 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Portfolio Project

### Link: https://stanleyy7.github.io/

#### I have also refactored this project into Angular, link: https://github.com/StanleyY7/portfolio-in-angular

#### Main Page

![image](https://user-images.githubusercontent.com/119549394/207509489-d24f9110-d557-42fe-90ba-303f636ebb6d.png)

#### 404 Page

![image](https://user-images.githubusercontent.com/119549394/228779432-96a50594-7757-4ff0-9142-9a1e123ba2c7.png)



# Outline

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.

## MVP

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. 

## Summary 

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.

## Tech Stack

To further summarise, the tech stack I used for this project are:

- HTML

- CSS/SCSS

- JS

- Cucumber-Js