Bauhaus Constructivist Portfolio - Refined Animations
A high-impact Bauhaus-inspired design system utilizing Constructivist geometric principles. Features a primary palette of red (#D02020), blue (#1040C0), and yellow (#F0C020) against an ink-black (#121212) and off-white (#F0F0F0) background. Characterized by a 3D perspective 'tilted plane' layout that reacts to scroll, heavy 4px borders, and solid 'hard' shadows without blur. Ideal for creative portfolios, design agencies, or editorial tech products seeking a bold, structural aesthetic with experimental 3D interactions.
Summary
A modular, geometric design system based on Bauhaus and Constructivist art, featuring a 3D perspective stage where the entire content sits on a single tilted plane. It uses hard-edged aesthetics, primary color blocking, and scroll-reactive parallax rotation.
Style
The style is a mix of modernist poster design and interactive 3D physics. It relies on the Outfit font family for bold, uppercase typography with wide tracking. Colors are strictly limited to primary Bauhaus tones. The UI is defined by 'hard shadows' (offset solid blocks) and thick 4px borders. Micro-interactions include 1.03x scaling on hover and a 2px offset 'press' effect for buttons.
Layout & Structure
The layout is housed within a 3D perspective stage. The entire content area (the 'plane') is tilted on X, Y, and Z axes. Content is organized into blocks with heavy horizontal separators.
Perspective Stage
Top Label Row
Hero Section
Content Sections (About/Projects)
Social/Contact Grid
Components
Bauhaus Composition Box
A decorative layout element mirroring modernist abstract art.
Interactive Hard-Shadow Button
A button that mimics physical depth via solid shadow offsets.