A final project for devChallenges.io. Not actual portfolio.
This site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories:
- User story: I can see personal details
- User story: I can see skills
- User story: I can see projects
- User story: I can filter projects by tag
- User story: I can see hobbies or certificates
- User story (optional): I can see experiences
- User story (optional): I can see blogs
- User story (optional): I can see projects on different pages
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Flexbox
- Mobile-first workflow
- Javascript
-
First time making pagination and filtering. It was easy, thanks to the wonderful pagination tutorial linked below, and it was fun trying to make both pagination and filtering work together, without breaking each other functionality.
-
Tried to make responsive page without using media queries, but there is still one media query - when the viewport gets big enough to have 3 grid columns, make certain grid items span 2 rows, but not before that. Any ideas to do this without a media query are appreciated.
-
First time using Netlify for deployment. It's nice but sticking with github pages for now.
- My Basic Template pretty much based on Stephanie Eckless' HTML / Sass Jumpstart but much simpler;
- grid-column-end - css-tricks almanac, helped with grid items placement;
- Pexels - Images by: ABDUL KAYUM, samer daboul, Magda Ehlers.
- Material Design Icons
- How to Implement Pagination with Vanilla JavaScript - beautifully written tutorial by Jemima Abu.
- Simple example of filtering items based on class;