theHoracle

Client

theHoracle

theHoracle Studio Website

Built for theHoracle, this page walks through the process, deliverables, and outcomes behind the project.

Project typeWebsite
Visit live project

Overview

This is the website you're on right now. theHoracle Studio needed more than a brochure site: a fast, search-friendly home for case studies, design galleries, service pages and guides that could be updated in minutes, plus tools that help potential clients understand cost and book a call. James Morgan (theHoracle) designed and built it as a showcase of how the studio approaches websites for clients.

Goals

  • Publish projects, galleries, service pages and posts without touching code
  • Load quickly on mobile networks in Nigeria
  • Give search engines a clear picture of the studio, its founder and its work
  • Let visitors estimate project costs and book a call without back-and-forth
  • Keep the personal portfolio of James Morgan connected to the studio site

What we built

A flexible page builder

Pages are assembled from reusable sections — heroes, content grids, bento grids, card grids, project showcases, testimonial grids, galleries, featured posts, call-to-action blocks and a booking scheduler — so new pages can be created in the CMS while staying on brand.

Case studies and design galleries

Projects have structured fields for the client, project type, timeline, gallery, tools, team and results, which power the portfolio and each case-study page. Design work such as e-flyers lives in browsable galleries.

Blog and guides with Markdown import

Posts can be written in a rich text editor or pasted in as Markdown and converted automatically, making it quick to publish long-form guides like how much a website costs in Nigeria.

A multi-currency cost calculator

The project cost calculator lets visitors choose a service and package, add pages and extras, and see an estimate in US dollars, naira and other currencies. Prices and exchange rates are managed in the CMS.

Booking and contact

A Cal.com scheduler lets visitors book a free call directly, and contact forms deliver enquiries by email.

SEO and structured data

Every page has editable titles, descriptions and share images, canonical URLs and an automatically updated XML sitemap. Schema.org structured data connects the studio, its founder James Morgan and its work, so search engines can understand who is behind the site.

A connected personal portfolio

James Morgan's personal portfolio and resume are served from their own subdomain, me.thehoraclestudio.xyz, within the same project, linking the founder's profile to the studio.

Tech stack

  • Next.js (App Router) and React with TypeScript
  • Payload CMS with MongoDB for content
  • Tailwind CSS for styling
  • Cloudflare R2 (S3-compatible) object storage for media
  • Resend for transactional email
  • Cal.com for scheduling
  • Sentry for error monitoring

Result

The studio can now publish a new case study, gallery or guide in minutes, from any device, with SEO handled consistently across every page. The site doubles as a working example of the kind of fast, CMS-driven website we build for clients.

See our web design and development service and read why we build business websites with Next.js and Payload CMS.

Client feedback

What the client shared about the work and the collaboration.

James Morgan

Software Developer

★★★★★

"This website is a work of art, every new week i am moved by it. Its also very modular."

Browse grouped design collections, campaign assets, and visual systems from the studio portfolio.

View galleries

Project team

  • Developer

Tools used

  • Next.js

    Development

  • Payload CMS

    Development

  • TypeScript

    Development

  • Tailwind CSS

    Development

  • MongoDB

    Database

Key results

  • Moves to a CMS and reduced time for changes and updates by 99%

    Faster updates