Deloryen Studio
Documentation.
Everything you need to go from purchase to live production. Setup takes under 30 minutes. Most teams are deployed within 72 hours of receiving the template.
Quick Start
# 1. Clone the repository
git clone https://github.com/your-repo/del-studio
# 2. Install dependencies
npm install
# 3. Set up environment
cp .env.example .env.local
# 4. Start development server
npm run dev
Getting Started
Prerequisites
Node.js 18.17+, npm 9+, Git
Clone & Install
git clone + npm install in 3 commands
Environment Variables
Copy .env.example, configure your keys
Local Development
npm run dev, live at localhost:3000
Configuration
Brand Colors
CSS custom properties in globals.css, one file, one change
Typography
Playfair Display + DM Mono via next/font, zero layout shift
Tailwind Tokens
tailwind.config.ts, spacing, colors, breakpoints documented
Content
Replace placeholder text in page components and lib/seo-pages-data.ts
SEO & Structured Data
Metadata API
generateMetadata() on every route, title, description, OG, Twitter
JSON-LD Schema
Organization, WebSite, FAQPage, Article, all pre-configured
Sitemap
sitemap.ts auto-generates XML for all routes including SEO pages
robots.ts
Configured to allow crawling and block /api, /_next
Deployment
Vercel (Recommended)
Connect GitHub → deploy, zero config required
Environment Setup
Add env vars in Vercel dashboard before first deploy
Custom Domain
Add in Vercel settings, SSL auto-provisioned
Railway / Docker
Dockerfile and railway.toml included for alternative hosting
Performance
Lighthouse Verification
Test your live demo: pagespeed.web.dev, target 95+
Image Optimization
Use next/image for all images, auto AVIF/WebP conversion
Font Loading
next/font eliminates render-blocking, already configured
CSS Bundle
Tailwind purging keeps production CSS under 10kb
Customization
Adding Pages
Create files in src/app, routing is automatic with App Router
Adding SEO Pages
Extend seo-pages-data.ts or seo-pages-extended.ts with new slugs
Dark / Light Mode
Class strategy in tailwind.config.ts, toggle via className on html
Animation System
GSAP + Framer Motion + Lenis, all configured and documented
Stack Reference
Every dependency. Explained.
| Package | Version | Purpose |
|---|---|---|
| next | 14.x | Framework, App Router, SSR, image optimization |
| react | 18.x | UI library, server + client components |
| typescript | 5.x | Type safety, strict mode, zero any |
| tailwindcss | 3.x | Utility CSS, purged, design token system |
| framer-motion | latest | Page transitions + micro-animations |
| gsap | latest | Advanced scroll animations (FeaturedScroll) |
| lenis | latest | Smooth scroll, zero jank |
| next/font | built-in | Font optimization, zero render-blocking |
| next/image | built-in | Image CDN, AVIF/WebP, lazy loading |
Support
Need help?
Response time
24–48 hours
Business days. Extended support packages available.