About this template
This template gives you a professional agency portfolio and case study site, and you don't need design skills or development experience to make it work. The monochrome editorial aesthetic, clean typography, and polished animations create the kind of presentation that wins client trust on first impression.
The technical parts are already handled. Responsive layouts across mobile, tablet, and desktop, a CMS-powered content system for portfolio pieces and blog posts, a contact form with spam protection, and Cal.com scheduling. All done. You can focus on presenting your work and landing new clients.
Seven routes come ready to go: a homepage with a typing-animated hero, process slider, pricing calculator, FAQ section, and testimonials grid; a portfolio listing page with a two-column gallery; individual case study detail pages with up to four preview images; a blog listing and individual post pages; and a contact page with form validation and optional pricing pre-fill. A fullscreen overlay navigation menu ties it all together with smooth staggered animations.
Instead of paying monthly for a portfolio platform that limits your layout options, or spending weeks building a custom site from scratch, you get a complete editorial portfolio with built-in booking, a working pricing calculator, CMS-driven content, and a professional contact system you can customize freely.
Best Use Cases
Agency Portfolio and Case Studies
Present your agency's work through dedicated case study pages with up to four preview images per project. The two-column portfolio grid and detail pages give prospects a clear view of your process and results. Agencies that show their work professionally shorten the sales cycle because clients arrive already understanding what you deliver.
Freelance Creative Portfolio
Build a portfolio that positions you alongside higher-budget competitors. The monochrome editorial design, typing-animated hero, and smooth page transitions create a first impression that justifies premium rates. Categories like fashion, editorial, portrait, commercial, lifestyle, and fine art are built into the CMS structure, so organizing your work by specialty takes minutes.
Service Business with Integrated Booking
Combine your portfolio, pricing, and scheduling into a single site. The pricing calculator lets prospects see costs for three plan tiers with team-size adjustments and annual discounts, then routes them directly to the contact form with pricing details pre-filled. A Cal.com booking modal handles appointment scheduling without sending visitors to a third-party page.
Content-Driven Studio Blog
Publish journal entries alongside your portfolio to build authority in your field. The blog listing displays posts in a three-column grid with thumbnails, read-time estimates, and category labels. CMS-powered content means you update posts through a database rather than touching code. Consistent publishing builds search visibility and gives repeat visitors a reason to come back.
See yourself in one of these? Remix this template and start building.
What You Can Build
This template gives you the foundation for:
- A case-study-driven agency site where each project gets its own detail page with multiple preview images, a description, and category tagging
- A freelance portfolio with built-in pricing transparency, where prospects calculate costs and book calls without leaving your site
- A studio website that pairs visual portfolio work with a regularly updated journal to build credibility and organic search traffic
Getting Started
Step 1: Remix This Template
Click "Remix" to create your copy. You'll have a complete editorial portfolio ready to customize, with seven routes including your homepage, portfolio listing, case study detail pages, blog listing, blog post pages, a contact page, and a 404 not found page. All the pages and features are already working. You just need to make it yours.
If this template isn't the right fit, you can remix a different one. No wasted work.
Step 2: Customize Your Brand
Change colors to match your brand identity. The default monochrome palette (near-black text on near-white backgrounds) works out of the box, and dark mode tokens are already defined if you want to activate them. Update the Inter typeface to reflect your style, or keep it for its clean editorial feel. 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.
Step 3: Add Your Content
Replace the sample projects with your own case studies. Upload your strongest portfolio images (up to four per project), write descriptions that walk prospects through your process, and assign categories. Swap the sample blog posts with your own articles, tips, or behind-the-scenes content. Update the testimonials with real client quotes and ratings. The template stays out of your way so your work is what people notice.
Step 4: Connect Your Tools
Set your Cal.com scheduling link through the site settings so the booking modal opens your actual calendar. Your contact form is wired to Lovable Cloud so inquiries land directly in your submissions inbox. Link your workflow to stay on top of every message as it arrives. Lovable's integrations keep the essentials connected so you can focus on your work.
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, adding it to proposals, and linking it from your social profiles.
Conclusion
This editorial portfolio template works for creative professionals and agencies who want their site to match the quality of their work. You get a polished case study system without building it from scratch, integrated pricing and booking without stitching together separate tools, and CMS-driven content without learning a new platform.
Whether you're launching your first portfolio or replacing a site that no longer reflects what you're capable of, this template gives you a strong foundation. The process slider, typing hero animation, and fullscreen navigation create a memorable first impression. The pricing calculator and Cal.com booking modal turn visitors into conversations. The template is free and takes a few hours to customize. You could have a portfolio site live and ready to share before your next client call.
Features & capabilities
Typing-Animated Hero
Letter-by-letter headline animation with blinking cursor creates an engaging first impression that keeps visitors on your page longer.
Process Slider Showcase
Full-width carousel with Ken-Burns parallax effects, auto-play, and smooth transitions to walk prospects through your workflow visually.
Interactive Pricing Calculator
Three-tier pricing with team-size slider, annual discount toggle, and live price updates that pre-fill contact forms for faster conversions.
Cal.com Booking Modal
Embedded scheduling appears in a polished modal so prospects book calls without leaving your site or losing momentum.
Case Study Detail Pages
Dedicated portfolio pages with up to four preview images, descriptions, and category tagging to showcase your best work professionally.
Blog & Journal System
Three-column CMS-driven blog with thumbnails, read-time estimates, and category labels to build authority and organic search traffic.
Testimonials Grid
Client quotes with star ratings and avatars pulled from your CMS, giving social proof that builds trust with new prospects.
Fullscreen Overlay Navigation
Staggered link reveal with backdrop blur creates a memorable navigation experience that feels polished on any device.
Spam-Protected Contact Form
Server-side validation, honeypot bot detection, and rate limiting keep your inbox clean while capturing real client inquiries.
Monochrome Editorial Design
Clean black-and-white aesthetic with Inter typography and tight letter-spacing positions you alongside top-tier creative agencies.
Fluid Typography Scale
Headlines and body text adapt across three breakpoints for exceptional readability on mobile, tablet, and desktop screens.
Smooth Page Animations
Framer Motion scroll reveals and staggered transitions create a polished feel that justifies premium rates to clients.
