Bauhaus Tilted Portfolio — Fixed Content & Full Parallax Plane
A high-impact Bauhaus-inspired Constructivist portfolio style featuring a scroll-reactive 3D perspective plane. Characterized by bold primary colors (#D02020, #1040C0, #F0C020), rigid 4px black borders, and hard-offset shadows. The design utilizes 'Outfit' typography in heavy weights with an editorial layout. Key features include a grain-textured background, binary geometry (strictly sharp corners or perfect circles), and a unique tilted layout that shifts dynamically with user scroll. Suitable for creative portfolios, design agencies, architecture firms, and high-concept engineering showcases.
Summary
A Constructivist design system utilizing a 3D tilted stage, rigid geometric constraints, and primary colors to create a modern digital interpretation of 1920s Bauhaus poster art.
Style
The style essence is 'Binary Modernism'. All elements use either 0px or 100% border-radius. Colors are restricted to a specific palette: Primary Red (#D02020), Primary Blue (#1040C0), and Primary Yellow (#F0C020) against a light grey (#F0F0F0) or white background. Typography is set exclusively in 'Outfit', prioritizing heavy weights (900/800) for headlines. Interactive elements feature a 'press effect' (2px translation) rather than standard fades, and shadows are never blurred—only hard 8px offsets in solid black (#121212).
Layout & Structure
The layout is a single, massive tilted 'board' containing sections separated by thick 4px horizontal dividers. It relies on a CSS grid-based composition box and bento-style card layouts.
Perspective Stage
Hero Section
About Section
Project Showcase
Connect Section
Components
Bauhaus Composition Box
An intricate geometric grid assembly that houses a profile image.
Interactive Bauhaus Button
A tactile, geometric button with a binary state.
Special Notes
MUST: Maintain the 4px border weight consistently across all elements. MUST: Use only hard-edged shadows. MUST: Implement the scroll-parallax effect on the container plane to achieve the 'tilted poster' feel. DO NOT: Use any gradients (except for the background grain) or blurred effects. DO NOT: Use soft-rounded corners; strictly sharp or circular.