Websmith Studio Portfolio Site Template

Overview

Websmith Studio is a minimalist, high-end agency portfolio that prioritizes large-scale typography and expansive imagery over complex UI. It provides a robust reference for builders who need a clean, grid-based layout that manages project case studies, service offerings, and testimonials with sophisticated simplicity.

Design System

• Color Palette & Visual Hierarchy: The design uses a high-contrast foundation with a light-cream/off-white background and deep charcoal (text-primary) for text. A subtle accent strategy is used in the "What We Do" section, employing muted pastel backgrounds (light blue, emerald, and red) to categorize different service phases while maintaining a professional aesthetic.
• Typography: The system relies on a bold, sans-serif typeface (Inter or similar) featuring extreme weight variants. Headlines use font-semibold with tracking-tight at scales up to text-8xl, creating a strong visual anchor. Body text maintains readability with large sizes (text-lg to text-xl) and generous leading.
• Page Structure & Flow: The layout follows a classic vertical stack: a bold hero headline, a 2-column project grid with immersive image cards, a 4-item service grid ("Plan, Build, Deploy, Maintain"), a split-screen testimonial block, and finally a blog feed.
• Reusable Components:
  • Project Cards: Feature an aspect-6/4 or aspect-5/3 ratio with a top-down gradient overlay (to-black/60) to ensure white text remains legible over imagery.
  • Process Cards: Responsive containers that shift from aspect-2/1 on mobile to aspect-video on desktop, utilizing absolute-positioned SVG icons for visual flair.
  • Action Buttons: Rounded-lg primary buttons with a smooth duration-300 transition to a medium-gray hover state.
• Interaction Patterns: The project grid utilizes a subtle group-hover:scale-[1.025] effect on images combined with duration-500 transitions for a fluid, premium feel. The HTML suggests a split-text implementation for headline animations.
• Responsive Implementation: Built with Tailwind CSS, the site uses a max-w-[1340px] container. The project and process grids seamlessly transition from a stacked 1-column layout on mobile to a balanced 2-column grid starting at the md breakpoint.

Use Cases

• Who should clone this: Freelance developers, design agencies, or architectural firms looking for a