Written by
Jan Kaiponen
on
on
Responsive Portfolio Website Part II & III & IV
Part II
Objectives
- Create the homepage HTML markup
- Create the core Sass/CSS for the project
- Use Sass variables, nesting, mixins and includes, and import partials
I finished working on the main page of the portfolio project. I have done similar tutorials in the past, nothing surprises me here.
I played around with some color tools online, changed the fonts, etc. I used my own variable naming for the colors in the _config.scssfile.
Some useful tools I used
- Image resizer https://www.shutterstock.com/image-resizer
- Website color generator http://colormind.io/bootstrap/
Part III
Objectives
- Apply CSS transforms to the menu button (open/close)
- Add JavaScript code to handle handle the menu button click event
CSS Transforms
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform
- CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp
Part IV
Objectives
- Add media query SASS mixins to make the site responsive
CSS Transforms
To slide the menu open:
I created some original art for my site.
- Generated the portrait picture from my own photo using AI Gahaku