One page · Front-end interface
Rotating Navigation: Click to see a one page with rotating navigation.
This one page uses a rotating navigation menu to present the different sections of the website in an intuitive way. This navigation is a great example of how a menu can be used to create an engaging and user-friendly experience.
It lets users move easily between pages. With this type of navigation menu, users can quickly find the information they need without having to scroll through several pages or search for specific elements. This makes for a pleasant and efficient user experience.
This exercise lets me show my command of integration and micro-interactions: faithfully reproducing a design, animating an interface without any external dependency and keeping the code clear. It illustrates how a well-judged animation makes navigation feel more alive, and confirms my ease with the HTML, CSS and JavaScript trio on components that are a little off the beaten track.
Navigation animation in CSS and JS
The page pivot relies on CSS transforms and transitions, triggered on click by a class toggle in JavaScript, without any external animation library.
Faithful integration of the design
The design was reproduced in HTML and CSS, with a Flexbox layout and particular care given to spacing, colors and the rendering of the interface.
Responsive layout
The one page stays readable and the rotation effect smooth on both desktop and tablet, thanks to a structure designed to adapt to different screen widths.
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.