A Digital Brutalism Portfolio Website
Digital Brutalism:
- Raw, structural, bold, high-contrast design
- Visible grid lines and borders (blueprint aesthetic)
- Oversized uppercase typography
- Asymmetrical layouts with intentional misalignment
- Stark color palette: Black (#000), White (#fff), Concrete Gray (#808080)
- Sharp, mechanical animations with Expo easing
- Grainy noise texture overlay for concrete/paper feel
- Framework: SvelteKit with Svelte 5 Runes syntax
- Styling: Tailwind CSS v3
- Animation: GSAP (Core, ScrollTrigger, Flip Plugin)
- Smooth Scroll: Lenis
- Font: Oswald (Google Fonts)
- ✅ Custom Cursor - White circle with
mix-blend-mode: differencefor color inversion - ✅ Background Grid Pattern - Blueprint-style grid covering entire page
- ✅ Noise Overlay - Animated grain texture for raw concrete aesthetic
- ✅ Page Transitions - "Concrete Shutter" effect with GSAP animations
- ✅ Smooth Scrolling - Lenis integration with GSAP ScrollTrigger
- ✅ Sticky Navigation - Fixed header with MONOLITH logo
- ✅ Mega Menu - Garage door slide-down effect (black panel)
- ✅ Menu Animation - GSAP-powered smooth transitions
- ✅ Hero Section - Massive "WE BUILD VOIDS." text
- ✅ Asymmetric Gallery - 10 projects in brutalist grid layout
- ✅ GSAP Flip Transitions - Thumbnail to full-screen modal animations
- ✅ Grayscale to Color - Images transition on hover
- ✅ Project Overlays - Large titles with text-stroke
- ✅ Projects List - Archive view with floating image reveal on hover
- ✅ Project Detail - Split-screen layout with sticky info panel
- ✅ Parallax Gallery - ScrollTrigger-powered image effects
- ✅ Next Project Navigation - Seamless project browsing
- ✅ Studio Page - Manifesto with split-screen design
- ✅ Contact Page - Massive email link with infinite marquee
- ✅ Signature Component - Developer credit with blend mode
monolith/
├── src/
│ ├── lib/
│ │ └── components/
│ │ ├── Cursor.svelte # Custom cursor
│ │ ├── Navigation.svelte # Header & mega menu
│ │ ├── Noise.svelte # Grain texture overlay
│ │ ├── PageTransition.svelte # Page transition effects
│ │ ├── ProjectCard.svelte # Project card component
│ │ └── Signature.svelte # Developer signature
│ ├── routes/
│ │ ├── +layout.svelte # Root layout
│ │ ├── +page.svelte # Home page
│ │ ├── projects/
│ │ │ ├── +page.svelte # Projects list
│ │ │ └── [id]/
│ │ │ ├── +page.ts # Project data loader
│ │ │ └── +page.svelte # Project detail
│ │ ├── studio/
│ │ │ └── +page.svelte # Studio manifesto
│ │ └── contact/
│ │ └── +page.svelte # Contact page
│ └── app.css # Global styles
├── static/
│ ├── favicon.png # MONOLITH logo
│ └── robots.txt
└── package.json
- Node.js 18+
- npm or yarn
# Clone the repository
git clone <repository-url>
cd monolith
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewThe site will be available at http://localhost:5173
Custom white circle cursor that follows mouse movement and inverts colors using mix-blend-mode: difference.
- Sticky header with MONOLITH logo (links to home)
- Menu button that triggers garage door slide-down animation
- Full-screen black overlay with navigation links
- GSAP-powered smooth transitions
Animated grain texture overlay that adds raw, concrete-like texture to the entire site. Uses SVG noise pattern with CSS animation.
"Concrete Shutter" effect that slides a black panel down when navigating between pages, creating a heavy, mechanical transition.
Asymmetric grid layout with:
- 10 architectural projects
- Grayscale images that transition to color on hover
- Large project titles with black text-stroke
- GSAP Flip animations for modal transitions
- GSAP Flip: Seamless transitions between thumbnail and full-screen modal
- ScrollTrigger: Scroll-based animations for images and content
- Lenis: Smooth scrolling with GSAP integration
- Easing: Expo/Power2/Power3 for sharp, brutalist movements
- Parallax: Image parallax effects on project detail pages
- Black:
#000000 - White:
#FFFFFF - Concrete Gray:
#808080
- Font: Oswald (Google Fonts)
- Style: Uppercase, bold (700-900), tight tracking
- Hero Text: 8rem - 18rem font size
- Headings: 4xl - 9xl with uppercase
- 12-column grid layout
- Asymmetric spans for intentional misalignment
- Heavy borders (2px - 4px) in black
- Hero section with "WE BUILD VOIDS." text
- Asymmetric project gallery (10 projects)
- GSAP Flip modal transitions
- Archive-style list view
- Floating image reveal on hover
- Year | Project Name | Type layout
- Split-screen layout
- Sticky info panel (left)
- Scrollable gallery with parallax (right)
- Next project navigation
- Split-screen manifesto layout
- Sticky "WE REJECT ORNAMENT." title
- Team table with names and roles
- Massive email link
- Infinite marquee at bottom
- "AVAILABLE FOR COMMISSIONS — WORLDWIDE — MONOLITH —"
Configuration file: tailwind.config.ts
- Custom font family (Oswald)
- Extended theme for brutalist design
- ScrollTrigger registered globally
- Flip plugin for transitions
- Expo easing for mechanical feel
- Smooth scroll with custom easing
- Integrated with GSAP ScrollTrigger
- Touch multiplier for mobile
- Modern browsers (Chrome, Firefox, Safari, Edge)
- Requires CSS Grid and Flexbox support
- JavaScript required for animations
This project is private and proprietary.
Designed & Coded by: Tahsin Mert Mutlu
MONOLITH Architecture Studio
We Build Voids.
We Build Voids.