Site vitrine · Presentation de services

PS5 / XBOX : une landing page « split screen » interactive en HTML, CSS et JS

PS5 / XBOX est un exercice front-end que j'ai réalisé pour travailler la mise en page en plein écran. Le principe est une landing page « split screen » : deux univers, la PS5 et la Xbox, présentés côte à côte sur la même page. Ce n'est pas un projet pour un vrai client, mais une démonstration d'intégration pensée autour d'une seule idée visuelle forte et lisible immédiatement.

Côté technique, l'interface repose uniquement sur HTML, CSS et JavaScript, sans framework. Le partage de l'écran en deux moitiés est géré en CSS, et JavaScript écoute le survol pour étendre la console pointée tout en réduisant l'autre. Cet effet de division interactif s'appuie sur des transitions fluides, avec une structure simple et une intégration soignée plutôt que sur des bibliothèques externes.

Ce site vitrine d'exercice me sert à montrer ma maîtrise de l'intégration et de l'animation côté navigateur : construire une interface à partir d'une idée, gérer les états au survol en JavaScript et obtenir un rendu propre et cohérent. C'est le type de projet qui illustre comment je traduis un concept visuel en page web concrète, lisible et fidèle à l'intention de départ.

Mise en page « split screen »

L'écran est divisé en deux moitiés égales en CSS pour présenter la PS5 et la Xbox côte à côte, avec une composition pensée pour rester lisible sur différentes tailles d'écran.

Effet de division interactif au survol

En JavaScript, le survol d'un côté étend la console pointée et réduit l'autre, grâce à des transitions CSS fluides qui rendent l'interaction immédiate et naturelle.

Intégration HTML, CSS et JS sans framework

Tout repose sur une base front-end pure, sans bibliothèque externe, ce qui démontre ma capacité à construire une interface animée propre avec les seuls outils du navigateur.