Compression Template

Compression is a kinetic portfolio HTML CSS template built entirely with CSS Flexbox and hover-driven transitions. Five vertical panels share the viewport equally by default, then expand and compress on hover using a custom cubic-bezier easing curve that delivers a heavy, mechanical feel. Each panel reveals project details, metadata, and a call-to-action button when expanded, while compressed panels desaturate into grayscale. No JavaScript is required for the core layout interaction.

This dark-themed template features an industrial color palette with off-white typography, neon chartreuse accents, and zero border-radius throughout. The type system pairs Anton for massive vertical spine titles with Space Mono for monospaced project details. CSS-only modal overlays for Work, About, and Contact pages open via the :target pseudo-class, complete with backdrop blur and smooth entry animations.

Compression is fully responsive and stacks into a vertical mobile layout below 900px. It includes staggered entrance animations, custom scrollbar styling, gradient header and footer scrims, and prefers-reduced-motion support. This free template is ideal for designers, photographers, creative agencies, and studios looking for a bold, no-framework portfolio with a distinctive editorial aesthetic.