
# Architecture Portfolio Website Design Build a modern architecture portfolio website with a clean, minimal aesthetic featuring a sophisticated grid-based layout system. ## Overall Layout Structure Create a full-screen modal/overlay design that sits on top of a blurred background showing an interior space. The main content area should be a white container with rounded corners, positioned centrally with subtle shadow/elevation. ## Header Navigation Design a clean horizontal navigation bar with: - Left side: Bold "TELHA CLARKE" logo/brand name in large black typography - Right side: Navigation menu with links for "Work, Process, Studio", location "South Yarra, AUS", and "Contact" - all in clean, minimal black text on white background ## Main Content Grid Implement a dynamic, asymmetrical grid layout featuring: - Various sized rectangular image cards showcasing architectural photography - Mix of interior and exterior architectural shots with different aspect ratios - Cards should have clean white backgrounds with subtle shadows - Images include modern interiors, building exteriors, detail shots, and landscape architecture ## Central Branding Position large "Telha Clarke" text prominently in the center-right area with "(26)" as a superscript number, using bold, modern typography. ## Bottom Action Area Include a dark rectangular button/badge in the bottom area with white text reading "All Work" and "Discover" with an arrow indicator. ## Color Palette - Primary background: Pure white (#FFFFFF) - Text: Deep black (#000000) - Accent elements: Soft grays for shadows and subtle borders - Background blur: Warm beige/tan tones from the underlying interior photo ## Typography Use a modern, clean sans-serif font family throughout: - Brand name: Bold, large weight - Navigation: Regular weight, medium size - Body text: Clean, readable proportions ## Visual Effects - Subtle drop shadows on the main container and image cards - Gentle background blur effect - Clean, minimal borders and spacing - Hover states should be subtle and refined ## Responsive Behavior The grid should reflow gracefully on smaller screens while maintaining the clean, gallery-like aesthetic. Navigation should remain accessible and the modal should scale appropriately. ## Layout Spacing Use consistent spacing tokens with generous white space between elements. Grid gaps should be uniform, and padding should create breathing room around all content areas.
Copy this prompt and paste it into your AI coding assistant to build this design.
We use cookies for analytics and advertising. Essential cookies are always enabled. Learn more