Designing for the small screen first

Start with a 360-pixel canvas. Write down the action a visitor should take, then arrange the page so that action is easy to find. For a portfolio, that might mean opening a project or getting in touch.

Choose the reading order

Put the headline and supporting sentence before the decorative elements. If a project card has an image, a title and a description, check that those elements still make sense when stacked vertically.

Design for real content

Try a long project title, a translated button label, and an image with a different aspect ratio. Give the layout room to grow and use a single column when the cards become too narrow to scan.

Check the interactions

Test the navigation with a keyboard and the primary action with a thumb. Open the page with reduced motion enabled and on a slow connection. If the page still makes sense while the images load, the layout is doing its job.