Layered Hero Entrance
Separate foreground elements, artwork and typography animate into the composition independently to create depth.
01
The Brief
Reimagining a traditional biography as an interactive web experience.
The assignment was to create a responsive one-page website about an influential historical figure, combining informative content with advanced front-end techniques.
I chose Michelangelo and focused on moving beyond a conventional Wikipedia-style page. The goal was to use layout, motion and interaction to guide visitors through his life and work in a more visual and immersive way.
Core requirements
Responsive Design
CSS Grid & Flexbox
CSS Filters
Scroll Effects
Interactive Elements
BEM / ITCSS
02
Design Direction
A visual language inspired by Renaissance art, without turning the website into a museum archive.
I wanted the interface to feel connected to Michelangelo’s world while still behaving like a contemporary digital experience. Instead of using a neutral editorial layout, I built the visual direction around warm stone tones, classical serif typography and large-scale artwork.
The composition combines historical imagery with strong layering, oversized typography and controlled motion. This creates a more cinematic feeling while keeping the information structured and readable.
#121212
#E5DDD2
#DCC4A6
#F4F2EA
#8C6B4F
Display
Cormorant Garamond
Editorial
Playfair Display
03
Scroll & Motion
Motion was used to reveal content progressively, instead of decorating the interface.
Several sections are built around scroll-triggered transitions. Images, titles and supporting content enter at different moments, creating a controlled sequence as the user moves through the page.
I combined custom keyframe animations with CSS scroll-driven animation features such as view timelines and animation ranges. Where appropriate, the experience falls back to a simpler static layout on smaller screens.
Scroll-driven Reveals
Biography imagery and text are revealed progressively using view timelines instead of relying only on JavaScript.
Sticky Storytelling
Selected artwork remains fixed in the viewport while related information changes around it, creating a focused storytelling moment.
.biography__image {
view-timeline-name: --biography-image;
view-timeline-axis: block;
animation: imageReveal linear both;
animation-timeline: --biography-image;
animation-range: entry 10% cover 40%;
}04
Interactive Timeline
Turning a chronological biography into a visual, interactive sequence.
Instead of presenting Michelangelo’s life as a long block of text, I designed a vertical timeline that alternates content across the page and combines dates, short descriptions and artwork.
Hover states, image filters and subtle scale changes add interaction without making the timeline difficult to scan.
01
Alternating Grid
Events switch between left and right positions to create rhythm while keeping the chronology clear.
02
Image Interaction
Grayscale, brightness and scale effects are used to bring artwork into focus on interaction.
03
Responsive Simplification
On smaller screens, the composition becomes a simpler single-column timeline to preserve readability.
05
Interactive Artwork Map
Exploring the Sistine Chapel through an interactive image map.
The Sistine Chapel section turns a large artwork into an explorable interface. Instead of showing the ceiling as a static gallery image, users can move across the artwork and discover specific scenes through interactive markers.
Each marker reveals contextual information on hover, while animated pulses help users understand that the image contains interactive points.
Scrollable Canvas
The artwork is intentionally larger than its viewport, allowing the user to explore different areas instead of seeing everything at once.
Positioned Markers
Each point is positioned directly over a specific part of the artwork, connecting information to its visual context.
Hover Information
Marker cards use layered positioning and backdrop blur to reveal details without navigating away from the artwork.
06
Responsive Design
The experience adapts, not just the layout.
The desktop experience relies on layered compositions, large imagery and scroll-based interactions. On smaller screens, I simplified these patterns to keep the content readable and the interactions usable.
Complex compositions shift into structured grids, the timeline becomes a single-column flow, and fixed backgrounds are replaced with scroll-based behavior for better mobile performance.
Layered compositions
Large-scale imagery, overlapping elements and immersive scroll interactions create a more cinematic experience.
Simplified structure
Collages become grids, timeline content follows a single flow and spacing is adjusted for smaller viewports.
07
Outcome
A biography designed to be explored, not just read.
The final website combines editorial storytelling with experimental front-end techniques to create a more engaging way of discovering Michelangelo’s life and work.
The project gave me the opportunity to explore advanced CSS beyond conventional layouts, particularly scroll-driven animation, layered compositions, interactive states and responsive adaptation.