Obliq Studio - Next.js 16 Creative Agency & Design Portfolio Template with Storefront

Obliq Studio is a Next.js 16 template for design studios, creative agencies, branding consultancies, freelance designers and portfolio-led teams — anyone who has to show the work, explain the thinking behind it, hire for it, and sell a package at the end. Built on the App Router with React 19 and TypeScript in strict mode, it ships 21 page templates covering 47 fully static routes, with case studies, articles, services and job postings driven by MDX files and the plans, products and categories by JSON. No CMS or backend required.

Whether you run a brand identity studio, a UI/UX practice, a motion and visual design shop or a one-person portfolio, Obliq Studio gives you every page the case needs — a work index with eight case studies, five service pages, a nine-article journal, a careers board, and a two-plan storefront with a working basket. Content lives in files: add a case study and it appears in the work index, in the home page marquee and at its own URL without touching a component.

Tech Stack

• Next.js 16 — App Router, every route prerendered to static HTML at build time

• React 19 — server components by default, small client islands for the basket and the buy box

• TypeScript — strict mode, npm run typecheck clean

• Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline

• Self-hosted webfonts — Inter Display and DM Mono as woff2, no third-party font requests at runtime

• MDX content layer — gray-matter frontmatter with a prose parser that renders into the design's own markup

• Working basket — localStorage-backed React state shared by every surface that prints it

• Zero animation libraries — the scroll reveals, marquees, scroll-linked sections, counters, tab sets and pointer parallax are one TypeScript file

Included Pages and Templates

Core pages

• Home with a background film, a project marquee, a scroll-linked work rail, an animated services list, two slot-machine counters, a logo ticker and a seven-row FAQ

• About the studio with a second film, a pointer-driven parallax panel and the team

• Contact with an enquiry form and studio details

Work

• Work index with 8 case study pages: tagline, client sheet, industry, year, a photo set and a four-part write-up

Services

• 5 service pages, each with a hero, four labelled sections and the design's photo plates

Journal

• Blog index and 9 full-length articles with published date, reading time, author and an introduction block

Careers

• Careers board with department tabs and 6 job postings: position, location, type, responsibilities, requirements, benefits and how to apply

Storefront

• Pricing grid with Monthly and Project tabs

• 2 buy pages, each with a duration toggle that moves the price, and 2 category pages

• Cart drawer, checkout, PayPal checkout and order confirmation

Utility pages

• Style guide, licenses, changelog, 401 password-protected page and a 404 page

21 page templates. 47 static routes.

Easy Content Editing

Everything you change lives in src/content/. Edit a file, rebuild, done.

• src/content/blog/*.mdx — the 9 articles: date, reading time, author, card and hero images, introduction and body

• src/content/works/*.mdx — the 8 case studies: location, country, design lead, website, industry, work, year, and a four-section write-up

• src/content/services/*.mdx — the 5 services: card copy, hero and four labelled sections

• src/content/careers/*.mdx — the 6 postings: position, location, type and the posting itself

• src/content/plans.json — the 4 pricing cards: price, billing period, feature columns and the classes the design gives each card

• src/content/products.json — the 2 buy pages: price table, feature list and what the basket stores

• src/content/categories.json — the 2 category pages

Each file states its own order, so the sequence the design was built around lives with the content instead of in a separate index. Add a case study and it appears in the work index, the home page marquee and its own route — with no component to touch.

Body copy is Markdown: section headings, paragraphs and lists. A prose parser places each block inside the design's own markup, so the words stay editable and the layout stays exact.

Theming is one file. Every brand colour, font, spacing step and type size is a CSS custom property in the :root block at the top of public/assets/css/styles.css. Change a value there and it propagates across every page.

Performance and SEO

• Every route prerendered as static HTML, ready for a CDN

• Per-page title, description and Open Graph and Twitter card metadata

• Absolute share-image URLs so link previews resolve

• Self-hosted fonts with font-display: swap and zero third-party requests

• Background films are preload="none" with poster frames, so nothing downloads until a visitor reaches them

• Lazy-loaded imagery with responsive srcset on every photograph

• Semantic markup with one H1 per page, real buttons, a skip link and landmarks

• Keyboard-reachable navigation panel, tab sets, accordion and price toggle

• Full prefers-reduced-motion support, and readable with JavaScript off

Deployment

Deploys to Vercel, Netlify, Cloudflare Pages or any static host. npm run build prerenders every route; there is no server, no database and no API to configure. The basket is browser-side, so it works on a static host as shipped.

What You Get

• The complete Next.js 16 project source

• 21 page templates covering 47 static routes

• 9 articles, 8 case studies, 5 services and 6 job postings as editable MDX

• 2 products, 2 categories and 4 pricing cards as JSON, with a working cart, checkout and confirmation flow

• The original stylesheet, self-hosted webfonts and three background films

• Full HTML documentation

• Changelog and third-party license file

Requirements

• Node.js 20 or newer

• npm 10 or newer, or pnpm, yarn or bun