Personal Portfolio 5.0 REDO
This is the last version and final version of my portfolio before I starting to apply for jobs in web development.
You can check out the previous version here.
Portfolio 5.0 screenshot(this is the latest version):
- This is my personal portfolio where I showcased some of the projects I have been doing. (frontend only)
- I built this site using these technologies:
- CSS Grid
- No jQuery, No bootstrap
- Everything from the design and the code was done by me.
- Fully responsive, whether on mobile or desktop.
- No CSS library was used in this site.
- Individual card design. https://codepen.io/zhouxiang19910319/pen/ZqNZOp
- 1st draft done.
- About me section is done.
- Right column Project Gallery section is done
Make the page a 2 column design page????? Then add media queries to it? Only use CSS grid for the right section of the page?????
Challenges I run into when building this site
- Making an image slider using css , and makes sure it is responsive...
- Making the whole site responsive.
- How to handle two column design.
✅(I just used CSS-grid instead of making 2 individual columns)
- Make project image banner automatically appear whenever your mouse hovers on the image.
Details I need to change/ Known Bug
Image sliding section has one blank page at the end. Add in banner on every project picture. The last project's height when viewport becomes narrow is way too small.
- Browser compatibilities?
- IE (version??)
- Firefox? (Firefox will display horizontal bar when you narrow your viewport to a certain extent, instead of narrowing down the whole viewport which is really weird.)
Contact me section has too much height by default. When viewport is too narrow, right side grids do not show up. Choose a better font to work with the linear design.