https://github.com/derektypist/sidebar-project
https://github.com/derektypist/sidebar-project
Last synced: 30 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/derektypist/sidebar-project
- Owner: derektypist
- Created: 2021-04-23T15:52:54.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-27T16:07:48.000Z (about 5 years ago)
- Last Synced: 2025-07-11T16:51:12.133Z (11 months ago)
- Language: HTML
- Size: 51.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sidebar Project
The purpose of the project is to provide a sidebar using plain JavaScript without using frameworks. However, Font Awesome and Google Fonts (e.g. to use Font Roboto) will be used.
## UX
### User Stories
As a user, I expect to show or hide the sidebar.
As a user, when the sidebar is shown and the times icon is clicked, the sidebar is hidden.
As a user, when I hover on to the links, the color changes.
As a user, when I hover on to the icons (except bars and times), I expect a tooltip (e.g. LinkedIn) to be displayed.
As a user, when I click on a link, I expect to go to the correct page.
As a user, when I click on an external link, I expect the link to open in a new window without leaving the Sidebar Project page.
### Information Architecture
The project consists of:
- index.html (Home Page)
- about.html
- projects.html
- contact.html
Organising principle is interests or biography.
In the projects page, there are links to live projects and GitHub repositories in each project. These projects are with Code Institute and FreeCodeCamp.
In the contact page, there are links to professional associations (e.g. British Computer Society) and professional social media (e.g. LinkedIn).
## Features
Links to Professional Associations, Professional Social Media (e.g. LinkedIn), Live Projects and GitHub Repositories. Sidebar Toggle and Close Button.
## Technologies
This project uses the technologies of HTML5, CSS3, JavaScript, Google Fonts and Font Awesome 5.15.2.
## Testing
Ensure all the user stories have been met. For example, manually check the links to ensure that they are pointing in the correct direction. External Links (e.g. BCS) open in a new window.
## Deployment
Deployed on [GitHub Pages](https://derektypist.github.io/sidebar-project) at the main branch.
## Credits
WebAIM for checking contrast. Styles in style.css taken from John Smilga, see acknowlegements. Last accessed on 25 April 2021.
### Acknowledgements
- [FreeCodeCamp](https://www.youtube.com/watch?v=3PHXvlpOkf4&t=1825s)
- [John Smilga](https://github.com/john-smilga/javascript-basic-projects)
- [WebAIM](https://www.webaim.org/resources/contrastchecker)