Replication Guide: Build This Website

Complete documentation to replicate the earthy design system, local-first AI stack, Cloudflare Pages deployment, and maximum SEO/AEO setup — so anyone can build their own version.

👤 Author: Ishaan Dalvi (14) 📅 Updated: August 2026 🎯 Level: Intermediate ⏱️ Time: 2-4 hours

Overview & Philosophy

This website was built by a 14-year-old builder from Pune with zero budget, maximum output, and a local-first philosophy. Every decision optimizes for:

  • Ownership: No platform lock-in. Static files on Cloudflare Pages. Data in local PostgreSQL.
  • Speed: 100 Lighthouse across the board. No frameworks. No heavy JS.
  • Discoverability: Maximum SEO + AEO (Answer Engine Optimization) — schema.org, sitemap.xml, robots.txt, Open Graph, Twitter Cards, JSON-LD.
  • Personality: Earthy, vibrant, handcrafted. Not corporate. Not template.
  • Extensibility: Design system via CSS variables. Easy to fork and customize.

🎯 What You'll Build

A personal website that loads instantly, ranks aggressively, looks distinctive, and costs $0/month to host. Plus the documentation so others can replicate it.

Design System

Color Palette (Earthy + Vibrant)

No standard tech blues/purples. This palette draws from soil, terracotta pots, sage leaves, forest canopy, sand, cream paper.

Primary

Cream #FAF8F5 — Background base Forest #1B3B2B — Text, primary actions

Accents

Terracotta #D76F30 — CTAs, links, highlights Sage #7B9E87 — Secondary, muted elements Sand #EEDFBE — Code backgrounds, subtle fills

Dark Mode

Night #0E1712 — Base Moss #ECF5EF — Text Clay #E28D58 — Accent (warmer)

Typography

RoleFontWeightsUsage
HeadingsFraunces (Serif)300–900 variablePersonality, warmth, editorial feel
BodyPlus Jakarta Sans200–800 variableClean, modern, highly legible
CodeJetBrains Mono400, 500Technical, monospace

Both fonts loaded via preconnect + variable font files for minimal requests.

Spacing & Radii

Fluid spacing using clamp() for responsive scaling. Border radii scale: 8px → 16px → 24px → 36px. Transitions: 0.2s → 0.4s → 0.8s with cubic-bezier(0.16, 1, 0.3, 1) for natural feel.

Semantic HTML5 Structure

Every element has semantic purpose. No

soup. Structure:



  
    
  
  
    
    
    

    
    

      

        
Hero / Intro

        
        
...

        ...
      

    

    
    
...

Key Principles

  • Single

    per page

  • Heading hierarchy never skipped (h1 → h2 → h3)
  • with aria-labelledby pointing to heading
  • All images have descriptive alt text
  • Interactive elements are

CSS Architecture

CSS Custom Properties (Design Tokens)

:root {
  /* Colors */
  --color-cream: #FAF8F5;
  --color-forest: #1B3B2B;
  --color-terracotta: #D76F30;
  --color-sage: #7B9E87;
  --color-sand: #EEDFBE;
  --color-white: #FFFFFF;
  --color-shadow: rgba(27, 59, 43, 0.08);
  
  /* Typography */
  --font-heading: 'Fraunces', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Spacing */
  --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 36px;
  --container-width: 900px;
}

/* Dark mode via data attribute */
[data-theme="dark"] {
  --color-cream: #0E1712;
  --color-forest: #ECF5EF;
  --color-terracotta: #E28D58;
  /* ... */
}

Component Patterns

Reusable utility classes: .btn, .btn-primary, .btn-secondary, .card, .tag, .skip-link. All use variables — change tokens, whole site updates.

Animations

  • Mesh gradient: 3 blurred blobs with @keyframes float-mesh (22-28s, alternate)
  • Scroll reveal: IntersectionObserver adds .visible class for fade-up
  • Hover lifts: transform: translateY(-4px) + shadow on cards/buttons
  • Theme toggle: 15° rotation + scale on hover
  • Respects prefers-reduced-motion — all animations disabled

Vanilla JS Interactions (~150 lines)

Theme Toggle

Persists to localStorage, applies data-theme on , syncs SVG icons.

Scroll Reveal

IntersectionObserver with threshold: 0.1, rootMargin: '0px 0px -50px 0px'. Adds .visible for CSS fade-up.

Header Scroll State

Adds .scrolled class after 20px scroll — backdrop blur + shadow.

Smooth Scroll

Native scrollIntoView({behavior: 'smooth'}) for anchor links.

Code Copy

Click button on 

 blocks → navigator.clipboard.writeText() → toast feedback.

Active Nav Highlight

ScrollSpy updates TOC active link based on section in viewport.

Maximum SEO/AEO Implementation

Meta Tags (All Pages)


Page Title | Ishaan Dalvi













... (same as OG)

JSON-LD Schema.org (Homepage)

Technical SEO Files

sitemap.xml

All URLs + annotations +

robots.txt

Allow: /, Sitemap: ..., disallows private paths

manifest.json

PWA config: name, icons, shortcuts, theme_color, display: standalone

favicon.svg

Vector logo, scales perfectly,

AEO (Answer Engine Optimization)

  • FAQ-style content with clear Q&A structure
  • Schema.org TechArticle / FAQPage where applicable
  • Concise, direct answers in first paragraph of each section
  • Structured data for "HowTo" steps (deployment, customization)
  • Entity optimization: consistent name, bio, links across all platforms

Local-First AI Stack (The "Backend")

This website is the frontend. The real power is the local automation stack running on a VPS:

🦙 Ollama (Local LLMs)

qwen2.5-coder:14b — code generation, review, documentation. qwen3:30b (MoE) — complex reasoning. Zero API costs. Private.

🔄 n8n (Workflows)

Daily 9AM trigger → Instagram automation → Composio MCP → Telegram bot review → post. Visual workflow editor. Self-hosted.

🔌 Composio MCP

Managed integrations: Instagram, GitHub, Discord, Gmail, Notion. v3 MCP protocol. Replaces custom API code.

🛡️ SkillClaw Proxy

Port 30000. Routes all AI traffic. Auth, rate limits, logging, model switching. Single endpoint for all tools.

🐘 PostgreSQL

Local database for content, automation logs, Instagram copy drafts, project metadata. No Supabase/Firebase.

🛠️ Strix AI Pentesting

Pre-launch security scans on projects (RTO calculator, this site). Multi-agent: recon → exploit → validate → report.

Cloudflare Pages Deployment

One-Command Deploy

# 1. Install Wrangler
npm install -g wrangler

# 2. Authenticate (one-time)
wrangler login
# Opens browser → authorize → done

# 3. Deploy
wrangler pages deploy ./ishaan-site --project-name=ishaan-dalvi

# Output: https://.ishaan-dalvi.pages.dev (preview)
# Production: https://ishaan-dalvi.pages.dev (auto-propagates)

Custom Domain

  1. Cloudflare Dashboard → Pages → ishaan-dalvi → Custom domains
  2. Add ishaan-dalvi.pages.dev (or your domain)
  3. DNS auto-configures (if on Cloudflare) or add CNAME
  4. SSL auto-provisioned (usually < 5 min)

Git Integration (Optional)

Connect GitHub repo → auto-deploy on push to main. Preview deployments on PRs.

Performance & Lighthouse 100

Performance: 100

No frameworks. Critical CSS inlined. Fonts preconnected. Images optimized (WebP/AVIF). No render-blocking JS.

Accessibility: 100

  • Skip link, focus-visible, ARIA labels
  • WCAG AAA contrast (tested)
  • Semantic HTML, heading hierarchy
  • prefers-reduced-motion support

    • Best Practices: 100

    HTTPS, CSP-ready, no console errors, modern image formats, efficient caching headers via Cloudflare.

    SEO: 100

    Meta tags, canonical, structured data, sitemap, robots.txt, mobile-friendly, fast, secure.

    Core Web Vitals (Target)

    MetricTargetAchieved Via
    LCP< 1.5sInlined critical CSS, preconnected fonts, optimized hero image
    INP< 100msMinimal JS, no main-thread blocking, passive event listeners
    CLS< 0.05Explicit image dimensions, font-display: swap, reserved space

    Customization Checklist (Fork & Make It Yours)

  • Replace Ishaan Dalvi → your name (HTML, JSON-LD, manifest, meta tags)
  • Update https://ishaan-dalvi.pages.dev → your domain (everywhere)
  • Swap portrait.jpg → your photo (same aspect ratio, 1080x1080+)
  • Customize color tokens in :root — pick your earthy palette
  • Replace Fraunces/Plus Jakarta Sans → your font pair (Google Fonts or self-hosted)
  • Rewrite all section content (About, Projects, Journey, Skills, Contact)
  • Update knowsAbout, sameAs in JSON-LD Person schema
  • Add/remove projects in Projects section + update sitemap.xml
  • Update manifest.json name, shortcuts, theme_color
  • Regenerate favicon.svg with your initials/logo
  • Run wrangler pages deploy with your project name
  • Submit sitemap to Google Search Console
  • Add site to Bing Webmaster Tools, Yandex Webmaster
  • Create Wikidata entry once you have 3+ independent sources

    • 📁 File Structure

    ishaan-site/
├── index.html          # Main page (copy for other pages)
├── docs/
│   └── index.html      # This documentation page
├── portrait.jpg        # Your photo (1080x1080+)
├── favicon.svg         # Vector logo
├── manifest.json       # PWA config
├── sitemap.xml         # All URLs
├── robots.txt          # Crawler rules
├── schema.json         # AID machine-readable profile
├── SHARING.md          # Publicity/distribution plan
└── deploy.sh           # wrangler deploy wrapper

    License & Attribution

    This design system, code, and documentation are released under MIT License. Free to use, modify, distribute, commercialize.

    Attribution appreciated but not required: "Based on Ishaan Dalvi's personal website design system (ishaan-dalvi.pages.dev)"

    The goal: more distinctive personal websites on the internet. Less templates. More personality.

    ← Back to Website View Sharing Plan →