One page · Front-end interface
Card expansion: The card expansion is a feature that lets users enlarge an image to see more detail.
The card expansion is a feature that lets users enlarge an image to see more detail.
By tapping the image, the user can get a larger, more detailed version of it, giving them access to additional information.
This exercise demonstrates my command of the front-end fundamentals: faithfully integrating a design, structuring clean HTML code and writing the JavaScript that drives a concrete interaction such as image enlargement. It also shows my attention to detail on responsiveness and animation. A short demonstration, but representative of the way I approach an interface: clear, polished and pleasant to use.
Image enlargement on click
A click on the card opens the image full size in an overlaid lightbox, then closes it cleanly. All of the open and close logic is handled in JavaScript.
Faithful HTML/CSS integration
A product card integrated from a design, with semantic HTML and carefully crafted CSS, attentive to spacing, typography and the visual rendering.
Responsive layout
A readable, consistent one-page interface from mobile to large screens, with restrained transitions that smooth out the interaction without weighing down the display.
Desktop version
Tablet version
Carousel Vertical
Discover a new way to scroll through your photos, with a vertical carousel.
Carte Animee
The animated card is an interactive feature that lets users hide information on a card and reveal it on hover.
Carte QR Code
Carte QR Code is a build based on the Frontend Mentor challenges, starting from a design image to recreate a one-page layout from scratch with HTML & CSS.
A project along the same lines?
Tell me about your needs — I'll quickly let you know what's relevant and realistic.