メインコンテンツにスキップ

Inkwell

Launch your expert portfolio that converts visitors into premium clients. Bold brutalist design with case studies, service pages, and contact forms—live in hours.

LOLovable
·0 remixes

Designed for

  • Freelance creatives building client-ready portfolios
  • Presenting structured case studies to prospects
  • Positioning services with clear differentiation
  • Converting site visitors into client conversations

Key highlights

  • Brutalist design system
  • Numbered project grid
  • Interactive copy reveals
  • Fluid responsive typography
  • Living styleguide page
  • Contact form
  • Scroll animations
  • WCAG AAA contrast
  • CSS variable theming

Technology stack

Frontend

  • React
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • Recharts

UI Components

  • shadcn/ui

Other

  • Embla Carousel
  • React Resizable Panels

Deployment

  • Lovable
  • GitHub

About this template

This template gives you a portfolio that looks professional and you don't need design skills to make it work. The brutalist aesthetic—dark colors, sharp edges, high contrast typography—communicates confidence and expertise without trying too hard.

The technical parts are already handled. Visitors can navigate your portfolio easily whether they're on desktop or mobile. Your work reveals itself naturally as prospects scroll through your case studies. When someone contacts you, they see immediate confirmation their message was received. You can focus on showcasing your work and attracting the clients you want to work with.

Best Use Cases

Client-Focused Case Studies: Present work through structured case studies showing context, approach, and results. The numbered grid layout gives each project visual weight and makes navigation easy. Each case study follows a clear structure—context, action, result—that tells a complete story about how you solve problems and demonstrates your track record.

Service Positioning and Differentiation: List services with clear descriptions that communicate what you do and who you work with. Clear service descriptions help the right prospects understand why they should choose you. The high-contrast typography ensures your positioning is impossible to miss, while the brutalist design communicates confidence in your expertise.

Professional Contact and Client Acquisition: Convert site visitors into client conversations with a straightforward contact form and clear information about your process. When prospects are ready to move forward, they shouldn't have to hunt for ways to reach you. The contact page uses a two-column layout that puts your form front and center while providing context about response times.

Thought Leadership and Philosophy: Share your approach, perspective, and working philosophy. Prospects looking for expert partners need to understand how you think. The about page provides space for your portrait, biography, service list, client types, and philosophy—everything prospects need to understand your approach and expertise.

Getting Started

Step 1: Remix This Template

Click "Remix" to create your copy. You'll have a complete portfolio site ready to customize. All the pages and features are already working—you just need to make it yours.

Step 2: Customize Your Brand

Change colors to match your brand aesthetic. Update fonts to reflect your professional style. Lovable's visual editor lets you modify layouts and see changes instantly as you work. You don't need to know code to make it look exactly how you want. Changing your accent color from royal blue to your brand color takes seconds. The dark brutalist foundation works with any accent color you choose.

Step 3: Add Your Content

Replace the sample case studies with your actual work. Write descriptions that show your expertise—the problem, your approach, the results. Add your project images and write copy that demonstrates your value. Update the about page with your photo, biography, and service descriptions. The template stays out of your way so your content is what people notice.

Step 4: Update Contact Information

Add your professional social profile links in the footer—LinkedIn, Twitter, Instagram, or whatever platforms where you connect with clients. Update the contact form with your actual email address or preferred contact method. The form provides instant visual feedback when visitors submit, giving them confidence their message was received while you can customize where inquiries actually go.

Step 5: Go Live

Deploy your portfolio with one click. Lovable handles the hosting, security, and performance optimization automatically. Your site goes live worldwide in minutes, and you can start sharing the URL with prospects. Add it to your email signature, share it in proposals, and use it in business development conversations.

Conclusion

This template gives you professional design without hiring a developer, fast performance without technical optimization, and all the features you need to convert visitors into clients. The minimal design puts your work first, with no decorative elements competing for attention.

Whether you're launching your first independent practice or upgrading from a basic portfolio platform, this template gives you professional presence that commands premium rates. The brutalist design uses high contrast and minimal decoration to keep focus on your work.

Features & capabilities

  • Brutalist Design System

    Sharp-edged dark aesthetic with zero border radius, dramatic typography, and royal blue accents creates instant professional credibility.

  • Premium Typography Hierarchy

    Archivo Black display headings with fluid viewport scaling and Inter body text establish clear visual authority and readability.

  • Interactive Copy Transformations

    Hover-triggered before/after text reveals with smooth animations demonstrate value propositions through engaging interactive storytelling.

  • Numbered Project Grid

    Case study cards with large-scale numbering, context-action-result structure, and staggered animations present portfolio work with editorial polish.

  • Mobile-First Responsive Layout

    Twelve-column CSS grid collapses gracefully to single column with fluid typography ensuring pixel-perfect presentation across all devices.

  • Smooth Scroll Animations

    Framer Motion viewport-triggered reveals with staggered timing and precise easing create sophisticated polish without performance overhead.

  • High-Contrast Accessibility

    Near-white text on near-black backgrounds achieves nineteen-to-one contrast ratio exceeding WCAG AAA standards for maximum readability.

  • Functional Contact System

    Three-field contact form with HTML validation and toast feedback provides immediate response while maintaining clean brutalist aesthetic.

  • Living Design Styleguide

    Dedicated styleguide page showcasing color system, typography scale, interactive elements, and brand voice principles for consistent implementation.

  • Performance-Optimized Animations

    All scroll animations trigger once using viewport detection reducing ongoing intersection observer overhead for smooth sixty-frames-per-second performance.

  • Fixed Navigation System

    Transparent backdrop-blur header with animated mobile hamburger menu provides consistent wayfinding without blocking content visibility.

  • Custom CSS Variable System

    HSL-based color tokens enable rapid theme customization while maintaining design integrity across all components and pages.