TL;DR Continuous scrolling, single page website with subtle CSS animation and parallax effect on desktop view. The webpage uses W3.CSS as an alternative to Bootstrap and JQuery. Very little JavaScript codes were used. Parallax effect has been disabled on mobile devices because it does not render properly. CSS codes have been added to reflect this.
You can view the webpage here: https://gavinpwd.github.io/website-parallax/
This webpage was created using the following:
- HTML5, CSS3, JavaScript
- W3.CSS
- Google Fonts API
- Font Awesome Icons v4.7.0 library
My Design Goals:
- Neutral theme yet elegant and warm
- Create a single webpage with continuous scrolling
- Show curated images
- Use Google fonts to create a logo without actually creating a logo outside VSCode
- Use of minimal colours and icons but still present an elegant and cohesive layout
- Consider using floating elements, transparency, opacity, shadows
- Mobile-friendly layout
My Coding Goals:
- Create sections within the webpage rather than use navigation links wihtint he website
- Use animation in a subtle way without using too much JavaScript
- Learn about W3.CSS instead of using Bootstrap as previously learned from JWD Bootcamp
- Create a logotype using CSS
- Use comments strategically
- Codes should be well organised and easy to read
- Create separate .js and .css folders for better organisation
Trajectory of this project:
- Use this webpage as template for future projects that require navigation links and more webpages
- Ability to customise page using theme slider button
- Add Modal forms when required for future projects
- Add JS animation when required for future projects
Stretch Goal:
- Find a solution to render content in modal page from another source (e.g. another text file) to change content easily without hardcoding in html
Here is a sample screenshot of the webpage:
Top section
Modal page on button click
Mobile view of colour scheme
Contact section with avatar and contact links
Moodboard
