Bauhaus Portfolio - Fixed Hover Animations
A high-energy Bauhaus-inspired portfolio design featuring neobrutalist aesthetics, primary color blocking, and a unique 3D tilted layout. It utilizes bold typography, heavy hard shadows, and geometric patterns. Ideal for creative developers, design agencies, or architectural portfolios looking for a constructivist, 'form-follows-function' visual identity with tactile interactions.
Summary
A Bauhaus-themed modernist design system characterized by a 3D perspective layout, primary colors (#D02020, #1040C0, #F0C020), heavy 4px black borders, and 'Outfit' typography. The design emphasizes geometric purity and interactive elements that utilize a signature 'press-effect' hover animation.
Style
The style is a mix of Bauhaus constructivism and neobrutalism. It uses the 'Outfit' font family (weights 300 to 900) for high legibility and impact. The color palette is strictly limited to primary colors (#D02020 Red, #1040C0 Blue, #F0C020 Yellow) plus a core off-white (#F0F0F0) and a deep charcoal black (#121212). Elements feature 4px solid black borders and 8px-12px offset hard shadows (no blur). Layouts are contained within a 3D perspective field (8deg X, -5deg Y tilt).
Layout & Structure
The layout uses a modular, bento-like structure within a 3D tilted plane. It follows a vertical progression: Hero, About (text-heavy), Projects (grid-based), and Connect (button-focused footer).
Hero Section
About Section
Projects Grid
Connect Section
Components
Bauhaus Composition Box
An abstract, layered geometric frame for profile pictures.
Neobrutalist Press-Effect Card
A tactile card interaction that feels like physical pressing.
Special Notes
CRITICAL: To ensure the hover animation is smooth, all children elements within a 'press-effect' container must have `pointer-events: none` to prevent mouse-out flickering during rapid movement. The 3D perspective should be applied to a wrapper containing the entire dashboard to ensure consistent depth perception across all sections.