
Client
theHoracle
theHoracle Studio Website
Built for theHoracle, this page walks through the process, deliverables, and outcomes behind the 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.
Related
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."
Read more about this project
Supporting posts and case studies with extra context on the work.
Why I Build Business Websites With Next.js and Payload CMS
Why theHoracle Studio builds business websites with Next.js and Payload CMS: faster pages, an easy admin panel, no plugin sprawl, built-in SEO and room to grow.
Website Speed for Nigerian Mobile Users: What to Fix First
How to measure and fix website speed for visitors on Nigerian mobile networks: Core Web Vitals explained, the biggest culprits, and a practical fix-first checklist.
How Much Does a Website Cost in Nigeria? (2026 Guide)
What a website really costs in Nigeria in 2026: real starting prices, the 7 factors that change your quote, hidden costs to ask about, and how to budget.
Explore more design galleries
Browse grouped design collections, campaign assets, and visual systems from the studio portfolio.
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
