Solanasis Docs

mrsunshine-site-continuation-prompt

18 min read

mrsunshine.me Personal Portfolio Site — Continuation Prompt

Created: 2026-03-22 Purpose: Paste this entire file into a fresh Claude Code session to build the mrsunshine.me personal portfolio site from scratch. All context, decisions, design specs, wireframes, and implementation instructions are included below. No external plan files or prior conversation context needed.

PROMPT START — Paste everything below this line

I need you to build a personal portfolio website for Dmitri Sunshine at mrsunshine.me. This is a fully planned project with all decisions already made. Do NOT ask clarifying questions about the design, palette, content direction, or architecture. All of that is specified below. Just build it.

What This Site Is

A personal portfolio/brand site for Dmitri Sunshine, fractional CIO and founder of Solanasis LLC (solanasis.com). The site complements solanasis.com: this personal site handles thought leadership, personal credibility, and executive positioning; solanasis.com handles service delivery, vertical landing pages, and lead conversion. Both sites cross-link.

Why It Exists

Dmitri is applying to fractional CIO platforms (Fractional Jobs, Shiny, Catalant) and building referral partner relationships. A professional personal site is the #1 credibility signal for fractional executives. Most fractional CIOs lack personal sites, creating a differentiation opportunity.

ALL DECISIONS (Locked — Do Not Change)

DecisionChoice
Domainmrsunshine.me (already owned, Cloudflare DNS)
Theme baseDante (free, MIT): npx degit JustGoodUI/dante-astro-theme mrsunshine-site
Color paletteDark slate (#1E293B) + warm gold (#D4A853) + warm white (#FAFAF7)
Logo/wordmarkText-based “Dmitri Sunshine” in Playfair Display (no icon)
TypographyPlayfair Display (serif headings) + Inter (sans body)
HomepageSingle-scroll, 7 sections (details below)
BlogSeparate blog engine (Astro content collections, markdown)
CTACal.com booking as primary + links to solanasis.com
HeadshotCopy from solanasis-site/public/images/team/dmitri-sunshine.{jpg,webp}
PersonalityFull founder story (Ukrainian immigrant, self-taught, Boulder, Aloha)
Proof storiesInReach Solutions + Cohere + Matchkeyz (named, not anonymized)
HostingCloudflare Pages (same as solanasis.com)
Repo location_mrsunshine/mrsunshine-site/ (new independent git repo)

DESIGN SYSTEM

Color Palette

Primary:      #1E293B  (slate-800) — nav, hero bg, dark sections
Secondary:    #334155  (slate-700) — hover states, card borders
Accent:       #D4A853  (warm gold) — CTAs, links, highlights
Accent Hover: #E0B86A  (lighter gold on hover)
Accent Active:#C49A42  (darker gold on click)
Background:   #FAFAF7  (warm white) — page background
Surface:      #FFFFFF  (white) — card surfaces
Warm Gray:    #F1F0EC  — alternating section backgrounds
Charcoal:     #0F172A  (slate-900) — body text
Muted:        #64748B  (slate-500) — secondary text, dates, meta

Typography

Headings: Playfair Display (serif) — weight 700 for h1-h2, 600 for h3
Body:     Inter (sans-serif) — weight 400 body, 500 labels, 600 bold
Nav:      Inter 500
Sizes:    h1: 3rem, h2: 2.25rem, h3: 1.5rem, body: 1rem, small: 0.875rem

Wordmark

Text-based only: “Dmitri Sunshine” set in Playfair Display.

  • On dark backgrounds: text-accent (warm gold)
  • On light backgrounds: text-primary (dark slate)
  • No icon, no symbol, no graphic element.

Tailwind Config (replace Dante’s defaults)

// tailwind.config.mjs — key customizations
colors: {
  primary: '#1E293B',
  secondary: '#334155',
  accent: {
    DEFAULT: '#D4A853',
    hover: '#E0B86A',
    active: '#C49A42',
  },
  background: '#FAFAF7',
  surface: '#FFFFFF',
  'warm-gray': '#F1F0EC',
  charcoal: '#0F172A',
  muted: '#64748B',
},
fontFamily: {
  display: ['Playfair Display', 'Georgia', 'serif'],
  sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
},
borderRadius: {
  button: '6px',
  card: '12px',
},

DANTE THEME: What to Keep, Customize, and Build

Dante GitHub: https://github.com/JustGoodUI/dante-astro-theme Dante Demo: https://dante-astro-theme.netlify.app/

What Dante Provides (keep as-is or lightly adapt)

  • Clean minimal layout with generous whitespace
  • Blog engine (markdown content collections, tags, RSS, pagination)
  • Projects/portfolio section (repurpose as “proof stories”)
  • Dark mode toggle (light/dark)
  • Responsive design (mobile-first)
  • About page template
  • Contact page template
  • Footer with social links
  • SEO meta tags + sitemap

What We Customize in Dante

  1. Color palette: Replace default cream/brown with slate/gold tokens in tailwind.config
  2. Fonts: Add @fontsource/playfair-display, configure fontFamily.display in Tailwind
  3. Nav: Simplify to wordmark + About, Blog, Contact + CTA button (no dropdowns)
  4. Homepage: Replace default hero with our 7-section single-scroll layout
  5. Footer: Simplify, add solanasis.com link
  6. Contact form: Wire up Brevo API + Cloudflare Turnstile (adapt from solanasis-site)
  7. Cal.com: Add lazy-loaded booking embed (copy pattern from solanasis-site BaseLayout)
  8. JSON-LD: Person schema instead of default
  9. Analytics: Umami cookie-free analytics (copy pattern from solanasis-site)

What We Build Custom (Not in Dante)

  1. Hero.astro (headshot + headline + dual CTAs)
  2. CredibilityBar.astro (4 stats strip)
  3. WhoIHelp.astro (3 cards with lucide icons)
  4. ProblemsISolve.astro (6-item grid on dark background)
  5. ProofStories.astro (3 named story blocks with bullets + pull quotes)
  6. FounderStory.astro (3-4 paragraphs + link to /about)
  7. FinalCTA.astro (booking + contact + solanasis link)
  8. API route: /api/send-email.ts (adapt from solanasis-site, simplified fields)

HISTORICAL CONTEXT (for reference, not for the site)

  • Old personal site was at zasage.me (WordPress/Divi, now SSL expired)
  • Old site was spiritual/community focused (intentional communities, co-living, blue zones)
  • Old personal logo was handwritten teal/terracotta/olive — NOT being reused
  • This site is a complete repositioning: from visionary/community-creator to fractional CIO
  • Three headshots exist: studio (navy zip-up, using this), bamboo (casual), garden (outdoor)
  • Extensive positioning materials exist in solanasis-docs (cheat sheet, voice profile, LinkedIn rewrite, bio lengths)
  • Old site archived at: solanasis-docs/misc/zasage-me-site-archive-2026-03-22.md

FILE STRUCTURE

mrsunshine-site/
├── astro.config.mjs                     (from Dante, adapt: site URL, Cloudflare adapter)
├── tailwind.config.mjs                  (from Dante, REPLACE color palette + add font family)
├── wrangler.toml                        (NEW)
├── package.json                         (from Dante, add deps)
├── tsconfig.json                        (from Dante)
├── .gitignore                           (from Dante)
├── .env.example                         (NEW)
├── CLAUDE.md                            (NEW)
├── playwright.config.ts                 (adapt from solanasis-site)
│
├── public/
│   ├── images/
│   │   ├── headshot/
│   │   │   ├── dmitri-sunshine.jpg       (COPY from solanasis-site)
│   │   │   └── dmitri-sunshine.webp      (COPY from solanasis-site)
│   │   └── og-default.png               (NEW: 1200x630)
│   ├── favicon/                          (NEW: gold DS on slate)
│   │   ├── favicon-16x16.png
│   │   ├── favicon-32x32.png
│   │   ├── apple-touch-icon.png
│   │   └── site.webmanifest
│   └── _headers                          (NEW: CSP)
│
├── src/
│   ├── styles/global.css                 (from Dante, add Playfair Display import)
│   ├── lib/
│   │   ├── constants.ts                  (NEW)
│   │   └── api-helpers.ts                (ADAPT from solanasis-site)
│   ├── layouts/
│   │   └── BaseLayout.astro              (from Dante, add Cal.com + Umami + JSON-LD)
│   ├── components/
│   │   ├── Nav.astro                     (from Dante, simplify)
│   │   ├── Footer.astro                  (from Dante, simplify + solanasis link)
│   │   ├── ContactForm.astro             (ADAPT from solanasis-site)
│   │   ├── BlogCard.astro                (from Dante, recolor)
│   │   ├── Hero.astro                    (NEW custom component)
│   │   ├── CredibilityBar.astro          (NEW custom component)
│   │   ├── WhoIHelp.astro                (NEW custom component)
│   │   ├── ProblemsISolve.astro          (NEW custom component)
│   │   ├── ProofStories.astro            (NEW custom component)
│   │   ├── FounderStory.astro            (NEW custom component)
│   │   └── FinalCTA.astro                (NEW custom component)
│   ├── content/
│   │   └── blog/                         (1 sample post to validate)
│   ├── content.config.ts                 (from Dante, adapt pillars)
│   ├── middleware.ts                     (ADAPT from solanasis-site)
│   └── pages/
│       ├── index.astro                   (NEW: imports 7 custom section components)
│       ├── about.astro                   (from Dante, rewrite content)
│       ├── contact.astro                 (from Dante, add ContactForm)
│       ├── thank-you.astro               (NEW)
│       ├── privacy.astro                 (NEW)
│       ├── 404.astro                     (from Dante, recolor)
│       ├── robots.txt.ts                 (from Dante, adapt)
│       ├── rss.xml.ts                    (from Dante, adapt)
│       ├── blog/
│       │   ├── index.astro               (from Dante, recolor)
│       │   └── [...slug].astro           (from Dante, recolor)
│       └── api/
│           └── send-email.ts             (ADAPT from solanasis-site)
│
└── tests/e2e/
    ├── smoke.spec.ts                     (~7 tests)
    ├── homepage.spec.ts                  (~12 tests)
    ├── blog.spec.ts                      (~5 tests)
    ├── contact-form.spec.ts              (~5 tests)
    ├── seo.spec.ts                       (~8 tests)
    └── mobile-nav.spec.ts                (~4 tests)

HOMEPAGE: 7 Sections (Wireframe + Copy Direction)

Section 1: Hero

  • Background: bg-primary (dark slate), full-width
  • Layout: Two-column desktop (text left, headshot right), stacked mobile (text then headshot)
  • Left column:
    • Small greeting: “Aloha! I’m Dmitri Sunshine.” in font-display text-accent (gold Playfair)
    • Main headline: “I help growing organizations build systems that actually hold up when it matters.” in large font-display text-white
    • Subheadline: “Fractional CIO. Enterprise architect. 23 years of building, scaling, and fixing technology systems.” in text-muted
    • Two CTAs:
      • Primary: “Book a Conversation” — gold bg (bg-accent text-primary font-semibold), Cal.com data-cal-link
      • Secondary: “See how I work” — gold text link (text-accent underline), scrolls to #proof-stories
  • Right column:
    • Circular headshot, 300x300 desktop / 200x200 mobile
    • Gold ring border: border-4 border-accent rounded-full
    • Subtle shadow: shadow-2xl
  • Mobile: Headshot centered above text, smaller

Section 2: Credibility Bar

  • Background: bg-warm-gray, narrow horizontal strip
  • Layout: Flex row of 4 stats, centered. 2x2 grid on mobile.
  • Stats (number in font-display text-primary text-3xl font-bold, label in text-muted text-sm):
    • “23+” — years experience
    • “80+” — clients served
    • “14” — years bootstrapped growth
    • “50” — states reached

Section 3: Who I Help

  • Background: bg-background (warm white)
  • Heading: “Who I Work With” in font-display text-primary
  • Layout: 3 cards in a row (desktop), stacked (mobile)
  • Cards (white surface, rounded-card, subtle shadow):
    1. Icon: Building2 (lucide). Growing Organizations (10-200 people). “You’ve outgrown duct-tape IT but aren’t ready for a full-time CIO. I fill that gap.”
    2. Icon: Heart. Nonprofits and Mission-Driven Teams. “You need serious systems with a lean budget. I’ve operated exactly that way for 23 years.”
    3. Icon: Rocket. Founders and Operators. “You need someone who speaks both business and code. I’ve been both builder and CEO.”
  • Below cards: “I also advise RIAs, estate attorneys, and foundations through Solanasis.” with gold link

Section 4: Problems I Solve

  • Background: bg-primary (dark slate), full-width
  • Heading: “The Problems I Solve” in font-display text-white
  • Layout: 2x3 grid (desktop), stacked (mobile)
  • Each item: Gold icon + white title (font-semibold) + one-sentence description (text-muted)
    1. Systems held together by luck. “Your tech stack works until it doesn’t. I find the brittle parts before they break.”
    2. No one sees the full picture. “When IT, security, and operations live in silos, the gaps between them become expensive.”
    3. Untested disaster recovery. “Having backups is not the same as having recovery. I test it for real.”
    4. AI without guardrails. “AI is powerful and fast. Without governance, it’s also a liability.”
    5. Vendor sprawl and shadow IT. “Too many tools, too little oversight. I consolidate and rationalize.”
    6. The founder bottleneck. “Everything runs through you because no one else knows where the keys are. I fix that.”

Section 5: Proof Stories

  • Background: bg-background (warm white)
  • Heading: “What I’ve Built” in font-display text-primary
  • id: proof-stories (scroll target from hero CTA)
  • Layout: 3 story blocks, stacked vertically

Story 1: InReach Solutions

  • Badge: “Founder & CEO, 2007-2021” in small bg-accent/10 text-accent pill
  • Headline: “Built an ERP SaaS platform from zero. Bootstrapped it to 80 clients across most US states.”
  • Bullets:
    • Bootstrapped from a one-person startup to a lean distributed team serving ~80 organizations
    • Built a code-generation framework that let non-technical staff configure complex workflows
    • Managed PII-sensitive data (adoption records) across state regulatory requirements
    • 14 years of continuous operation with no outside funding
  • Pull quote (gold left border): “Social workers spent more time on their mission and less fighting their software.”

Story 2: Cohere

  • Badge: “COO, 2021-2022”
  • Headline: “Walked into a startup with no tech stack and no SOPs. Built both from scratch.”
  • Bullets:
    • Joined as COO during a critical growth phase; no existing operational infrastructure
    • Built the technology stack, operational workflows, and team processes from zero
    • Established SOPs that survived my departure (the mark of good operations)
    • Bridged technical execution and business strategy as the sole operational leader

Story 3: Matchkeyz

  • Badge: “Founder, 2025-Present”
  • Headline: “Designed an AI-powered community platform with privacy-first architecture.”
  • Bullets:
    • Built on Blazor/SQL Server with responsible AI integration
    • Privacy-first design with full audit trails and data sovereignty
    • Solo founder leveraging AI-native development workflows
    • Demonstrates current technical depth in modern AI-integrated systems

Section 6: Founder Story

  • Background: bg-warm-gray
  • Layout: Single column, max-w-3xl centered, generous padding
  • Heading: “The Origin Story” in font-display text-primary
  • Content (3-4 short paragraphs, Dmitri’s voice, max 3 sentences each):

Paragraph 1: “I came to the United States from Kharkiv, Ukraine when I was seven. By high school I was teaching myself to code; by 19 I had dropped out of college because I realized I would never work for anyone but myself.”

Paragraph 2: “I spent the next 14 years building InReach Solutions, an ERP SaaS platform for adoption agencies. I bootstrapped it from nothing to ~80 clients across the country. No venture capital, no board of directors; just a lean team solving real problems for real people.”

Paragraph 3: “Today I run Solanasis, a boutique firm that helps growing organizations strengthen their systems, reduce their risk, and get serious about operational resilience. I am a builder at heart; that perspective is what makes me different from consultants who only advise.”

Paragraph 4: “I live in Boulder, Colorado with my two kids. I greet everyone with Aloha because it captures what I care about: warmth, respect, and showing up fully.”

  • CTA: “Want the full story?” link to /about

Section 7: Final CTA

  • Background: bg-primary (dark slate), full-width
  • Layout: Centered text block
  • Heading: “Let’s talk about what’s next.” in font-display text-white text-3xl
  • Subtext: “Whether you need a fractional CIO, a systems assessment, or just a second opinion; I’m happy to listen.” in text-muted
  • Two CTAs side by side:
    • Primary: “Book a Conversation” (gold button, Cal.com)
    • Secondary: “Send a Message” (outline button with gold border, links to /contact)
  • Below: “Or explore Solanasis services at solanasis.com” in small muted text

ABOUT PAGE CONTENT

Full founder story expanding on Section 6. Include:

  • Ukrainian immigrant background (born Kharkiv, 1984; immigrated to Atlanta age 7)
  • Self-taught developer path (high school → professional dev, dropped out of college)
  • InReach Solutions story (2007-2021, adoption management ERP, ~80 clients, bootstrapped)
  • Life transformation (divorce, dark night of the soul, purpose discovery)
  • Cohere COO experience (2021-2022, startup operational transformation)
  • Solanasis founding (fractional CIO/CISO, security + resilience + operations)
  • Matchkeyz (2025+, AI-native community platform)
  • Personal: Boulder CO, two kids, mountain biking, community builder
  • Philosophy: builder > consultant, operational resilience, practical over theoretical
  • Closing: the Aloha greeting and what it means

BLOG CONTENT COLLECTION

Pillars (personal, not corporate)

pillar: z.enum([
  'technology-leadership',
  'security-resilience',
  'founder-journey',
  'ai-implementation',
  'operational-insights',
  'community',
])

Schema (simplified from solanasis-site)

// No "author" field — always Dmitri
title: z.string(),
description: z.string(),
date: z.coerce.date(),
tags: z.array(z.string()).default([]),
pillar: z.enum([...]),  // see above
image: z.string().optional(),
imageAlt: z.string().optional(),
readingTime: z.number(),
draft: z.boolean().default(false),

Sample Blog Post

Create one sample post to validate the pipeline:

  • Title: “Why I Greet Everyone with Aloha”
  • Pillar: founder-journey
  • Date: 2026-03-22
  • Draft: true (so it doesn’t publish, just validates the pipeline)

Simple, not solanasis-style. No dropdowns.

Desktop: [Dmitri Sunshine]    About    Blog    Contact    [Book a Conversation]
Mobile:  [Dmitri Sunshine]    [hamburger] → About, Blog, Contact, [Book a Conversation]
  • Sticky header, bg-primary (dark slate)
  • Wordmark: “Dmitri Sunshine” in font-display text-accent
  • Links: text-white/80 hover:text-white
  • CTA button: bg-accent text-primary font-semibold rounded-button
  • Active link: text-accent with gold underline

Simpler than solanasis-site.

┌────────────────────────────────────────────────────┐
│  Dmitri Sunshine              Navigate    Connect  │
│  Fractional CIO               Home       LinkedIn │
│  Boulder, CO                   About      X/Twitter│
│                                Blog       Email    │
│  Solanasis                     Contact             │
│  solanasis.com                                     │
│                                                    │
│  © 2026 Dmitri Sunshine.   Privacy Policy          │
└────────────────────────────────────────────────────┘
  • Background: bg-primary (dark slate)
  • Text: text-white/70
  • Links: text-accent hover:text-accent-hover
  • Email: spam-protected (JS-revealed on hover/focus, same pattern as solanasis-site)

CONTACT FORM

Simplified from solanasis-site. Fields:

  • Name (required, text)
  • Email (required, email)
  • Message (required, textarea)
  • “How did you find me?” (optional dropdown: LinkedIn, Referral, Search, Conference, Podcast, Other)
  • Honeypot field (hidden)
  • Cloudflare Turnstile widget

Sends to dmitri@solanasis.com via same Brevo account as solanasis.com. Auto-reply from “Dmitri Sunshine” (BREVO_SENDER_NAME).

CONSTANTS (src/lib/constants.ts)

export const SITE_URL = import.meta.env.SITE_URL || 'https://mrsunshine.me';
export const SITE_NAME = 'Dmitri Sunshine';
export const SENDER_EMAIL = 'dmitri@solanasis.com';
export const BOOKING_URL = 'https://cal.com/mrsunshine/intro';
export const CTA_TEXT = 'Book a Conversation';
export const SOLANASIS_URL = 'https://solanasis.com';

JSON-LD STRUCTURED DATA (Homepage)

{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Dmitri Sunshine",
  "jobTitle": "Fractional CIO",
  "url": "https://mrsunshine.me",
  "sameAs": [
    "https://www.linkedin.com/in/dmitri-sunshine",
    "https://solanasis.com"
  ],
  "worksFor": {
    "@type": "Organization",
    "name": "Solanasis",
    "url": "https://solanasis.com"
  },
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Boulder",
    "addressRegion": "CO",
    "addressCountry": "US"
  },
  "knowsAbout": [
    "Enterprise Architecture",
    "Cybersecurity",
    "AI Implementation",
    "Disaster Recovery",
    "Operational Resilience",
    "Data Migration",
    "Systems Integration"
  ]
}

WRANGLER.TOML

name = "mrsunshine-site"
compatibility_date = "2024-01-01"
 
[vars]
TURNSTILE_SITE_KEY = ""
BREVO_SENDER_EMAIL = "dmitri@solanasis.com"
BREVO_SENDER_NAME = "Dmitri Sunshine"
SITE_NAME = "Dmitri Sunshine"
SITE_URL = "https://mrsunshine.me"
 
# Secrets (set via `wrangler pages secret put`):
# BREVO_API_KEY
# TURNSTILE_SECRET_KEY
# BREVO_LIST_ID (if newsletter)

KEY REFERENCE FILES TO READ

Before building, read these files from the solanasis ecosystem for patterns and content:

For code patterns (adapt, don’t copy blindly):

  1. c:/_my/_solanasis/solanasis-site/src/pages/api/send-email.ts — contact form API route
  2. c:/_my/_solanasis/solanasis-site/src/lib/api-helpers.ts — Brevo + Turnstile helper functions
  3. c:/_my/_solanasis/solanasis-site/src/lib/constants.ts — constants pattern
  4. c:/_my/_solanasis/solanasis-site/src/layouts/BaseLayout.astro — Cal.com lazy-load embed (~lines 150-200) + Umami analytics (~line 30)
  5. c:/_my/_solanasis/solanasis-site/src/components/ContactForm.astro — Turnstile widget pattern
  6. c:/_my/_solanasis/solanasis-site/src/middleware.ts — staging noindex header
  7. c:/_my/_solanasis/solanasis-site/playwright.config.ts — test configuration

For content (use as source material, rewrite in personal voice):

  1. c:/_my/_solanasis/solanasis-docs/_to_organize_categorize/Dmitri_Sunshine_Fractional_CIO_Cheat_Sheet.md — 300+ positioning points, bios, proof stories, one-liners
  2. c:/_my/_solanasis/solanasis-docs/_to_organize_categorize/LinkedIn_Profile_Rewrite_2026-03-16.md — headline, About section
  3. c:/_my/_solanasis/solanasis-docs/solanasis-voice-profile.md — voice rules (MUST follow)

For assets:

  1. c:/_my/_solanasis/solanasis-site/public/images/team/dmitri-sunshine.jpg — headshot (copy to public/images/headshot/)
  2. c:/_my/_solanasis/solanasis-site/public/images/team/dmitri-sunshine.webp — headshot WebP version

VOICE RULES (Must Follow)

All copy on the site must follow these rules from the voice profile:

  • NO em dashes (—) — use semicolons, periods, parentheses, or commas instead
  • NO these words: “genuinely”, “seamless”, “frictionless”, “SMBs”, “audit”
  • Bold list items: Use period+sentence or colon, never em dash
  • Semicolons as warm connectors: Use naturally as sentence joiners
  • Parenthetical asides: Use for inline definitions or editorial color
  • Signature terms: quiet failure, false comfort, drift, blind spot, risk debt, operational drag, hidden risk, brittle systems, messy handoffs
  • Max 3 sentences per paragraph (body text)
  • First person: Use “I” throughout (this is a personal site)
  • Greeting: “Aloha!” is Dmitri’s signature

BUILD PHASES (Execute in order)

Phase 1: Scaffold (est. 15 min)

cd c:/_my/_mrsunshine
npx degit JustGoodUI/dante-astro-theme mrsunshine-site
cd mrsunshine-site
git init

Then update package.json — add these dependencies:

  • @astrojs/cloudflare (deployment adapter)
  • @fontsource/playfair-display (serif headings)
  • sharp (image optimization)
  • lucide-astro (icons)
  • @playwright/test (dev dependency, testing)

Then:

npm install

Create: wrangler.toml, .env.example, CLAUDE.md

CLAUDE.md note: Adapt from c:/_my/_solanasis/solanasis-site/CLAUDE.md. Key sections to carry over:

  • Design system (slate/gold palette instead of parchment/white)
  • Code conventions (TypeScript, Astro components, import.meta.env)
  • Page requirements (unique title, meta description, OG tags, canonical URL)
  • Quality gate (Senior Reviewer Agent + Playwright E2E tests)
  • Voice rules (from the container-level _mrsunshine/CLAUDE.md)
  • Screenshots go to _mrsunshine/_screenshots/{YYYY-MM-DD}/

Phase 2: Design System (est. 15 min)

  • Replace Dante’s color palette in tailwind.config.mjs with the palette above
  • Add fontFamily.display (Playfair Display) to Tailwind config
  • Update global.css to import @fontsource/playfair-display and @fontsource/inter
  • Create src/lib/constants.ts
  • Adapt src/lib/api-helpers.ts from solanasis-site (change ALLOWED_ORIGIN to mrsunshine.me)

Phase 3: Layout Shell (est. 20 min)

  • Simplify Nav.astro: wordmark + About, Blog, Contact + CTA button (no dropdowns)
  • Simplify Footer.astro: personal footer with solanasis.com link
  • Update BaseLayout.astro: add Cal.com embed, Umami analytics, Person JSON-LD, update OG/Twitter meta
  • Copy headshot images to public/images/headshot/
  • Verify npm run dev renders the shell

Phase 4: Homepage Components (est. 45 min)

Create 7 custom Astro components and assemble in index.astro:

  1. Hero.astro (headshot, headline, dual CTAs)
  2. CredibilityBar.astro (4 stats strip)
  3. WhoIHelp.astro (3 cards with lucide icons)
  4. ProblemsISolve.astro (6-item grid on dark bg)
  5. ProofStories.astro (3 named story blocks)
  6. FounderStory.astro (3-4 paragraphs + link to /about)
  7. FinalCTA.astro (booking + contact + solanasis link)

Write all copy using content from the Cheat Sheet + voice profile rules.

Phase 5: Blog (est. 15 min)

  • Update content.config.ts with personal pillars
  • Recolor blog/index.astro and […slug].astro with new palette
  • Update BlogCard.astro colors
  • Create 1 sample blog post (draft: true) to validate pipeline
  • Update rss.xml.ts and robots.txt.ts

Phase 6: Contact + Supporting Pages (est. 20 min)

  • Create ContactForm.astro (Name, Email, Message, “How did you find me?” dropdown, honeypot, Turnstile)
  • Wire up contact.astro with ContactForm
  • Create api/send-email.ts (adapt from solanasis-site, simplified fields)
  • Create thank-you.astro
  • Rewrite about.astro with full founder story (see About Page Content section above)
  • Create privacy.astro

Phase 7: Assets (est. 10 min)

  • Create public/_headers with CSP for mrsunshine.me
  • Generate placeholder favicons (text “DS” in gold on slate bg)
  • Generate OG image (1200x630: slate bg, “Dmitri Sunshine | Fractional CIO” in gold Playfair)
  • Update middleware.ts for staging detection

Phase 8: Testing (est. 20 min)

Create playwright.config.ts + 6 test files:

  • smoke.spec.ts (7 tests: all pages return 200, no console errors)
  • homepage.spec.ts (12 tests: all 7 sections visible, headshot, CTAs, JSON-LD)
  • blog.spec.ts (5 tests: index renders, sample post, RSS valid)
  • contact-form.spec.ts (5 tests: fields, validation, honeypot hidden, Turnstile present)
  • seo.spec.ts (8 tests: title, description, OG, canonical, sitemap, JSON-LD)
  • mobile-nav.spec.ts (4 tests: hamburger, open/close, navigation)

Run full suite and fix issues.

Phase 9: Deployment (manual steps — document for Dmitri)

Write a DEPLOYMENT.md with these manual steps Dmitri needs to do:

  1. Create Cloudflare Pages project mrsunshine-site in dashboard
  2. Create Turnstile widget for mrsunshine.me → get SITE_KEY + SECRET_KEY
  3. Create Umami website entry → get data-website-id
  4. Set env vars + secrets in Cloudflare Pages dashboard
  5. Add mrsunshine.me custom domain
  6. Add www.mrsunshine.me redirect
  7. First deploy: npx wrangler pages deploy dist/
  8. Verify SSL, test all pages

VERIFICATION CHECKLIST

After building, verify all of these:

  • npm run dev → all pages render at localhost:4321
  • npm run build → clean build, no errors
  • npm run test → all ~41 tests pass
  • Homepage: all 7 sections visible and responsive (375px, 768px, 1024px+)
  • Headshot displays correctly (circle crop, gold ring border)
  • Cal.com embed opens on CTA button clicks
  • Contact form has all fields + Turnstile container
  • Blog index + sample post render correctly
  • RSS feed returns valid XML at /rss.xml
  • JSON-LD Person schema in homepage source
  • OG/Twitter meta tags on all pages
  • Dark mode toggle works (light ↔ dark)
  • Cross-links to solanasis.com work correctly
  • Privacy page accessible from footer
  • No em dashes anywhere in site copy
  • Lighthouse: 90+ on all 4 categories
  • No console errors on any page

WHAT NOT TO DO

  • Do NOT ask clarifying questions about design/palette/content decisions — they’re all specified above
  • Do NOT use em dashes in any copy
  • Do NOT use the words: genuinely, seamless, frictionless, SMBs, audit
  • Do NOT create a complex multi-dropdown nav — keep it simple (4 items + CTA)
  • Do NOT add a newsletter signup — that’s a future enhancement
  • Do NOT import content from solanasis blog — this is a separate blog
  • Do NOT pretend Dmitri is a large team — first person “I” throughout
  • Do NOT add pricing or rate information to the site
  • Do NOT save screenshots to the project root — use _screenshots/{YYYY-MM-DD}/

Graph View