Showcase site · Service presentation
PS5 / XBOX: Are you more of a PS5 or an Xbox person? Choose your console.
Looking for the perfect console to play your favorite games? Choosing between the PS5 and the Xbox can be overwhelming. Both consoles offer unique features and capabilities, so it's important to take the time to do your research and find the one that's right for you.
To help you make your decision, I created a split landing page that compares the PS5 and the Xbox side by side. You can see their specs at a glance. With this information at your fingertips, you can confidently make an informed decision about which console best suits your gaming needs.
This showcase exercise lets me show my command of integration and browser-side animation: building an interface from an idea, handling hover states in JavaScript and achieving a clean, consistent rendering. It is the kind of project that illustrates how I turn a visual concept into a concrete, readable web page that is faithful to the original intention.
Split-screen layout
The screen is divided into two equal halves in CSS to present the PS5 and the Xbox side by side, with a composition designed to stay readable across different screen sizes.
Interactive split effect on hover
In JavaScript, hovering over one side expands the targeted console and shrinks the other, thanks to smooth CSS transitions that make the interaction immediate and natural.
HTML, CSS and JS integration without a framework
Everything relies on a pure front-end base, without any external library, which demonstrates my ability to build a clean, animated interface using only the browser's tools.
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.