Frontend Mentor - Single-page design portfolio solution

This is a solution to the Single-page design portfolio challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Navigate the slider using either their mouse/trackpad or keyboard

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

Useful resources

• CSS Reset - Article by Andy Bell.
• Assesible Icon Links - Accessiblilty pattern links with only an icon or image.
• Bento Grid - Video by Kevin Powell. This helped me for creating the bento grid layout.
• Scroll snap gallery - This is an great article which helped me for the scroll snap gallery slideshow. It's pretty simple and not a lot of css or js!

Author

• Website - marcushugo.com
• Frontend Mentor - @marcus-hugo