Skip to content
Self — Bryan Christian Dianco · PH — serving US/UK/AU/NZ/APAC

bcdianco.com — AI-Augmented Portfolio Shipped in Days

Production portfolio shipped in days, not weeks

AI-Augmented Web DevelopmentDigital OperationsSEO
Self — Bryan Christian Dianco
≈5 days

Time to launchdesign → live → indexed

#1

Branded SEO rankingfor 'Bryan Christian Dianco'

All green

Core Web Vitalsmobile, on PageSpeed

Context

bcdianco.com had a deadline that wasn't on a calendar: every week without a portfolio was a week of inbound that didn't happen. A digital operator without a digital presence is a contradiction prospects notice immediately — the claim on the business card has to match what happens when someone Googles the name.

The brief: build a portfolio that proves the "AI-augmented digital operator" claim — fast, with international SEO from day one, on a budget, without falling into the template-Squarespace aesthetic that every other freelancer uses. The site itself had to be the work sample. If the site wasn't a convincing demonstration of AI-augmented operator thinking, nothing linked from it would be either.

The Challenge

Three problems stacked on top of each other:

  • Proof of capability. Anyone evaluating an AI-augmented operator judges by the site itself before reading a single case study. The medium had to be the message — performance, SEO posture, interaction polish, and content quality all had to carry the claim before a prospect even reached the "Book a call" button.
  • Time pressure. No room for a six-week design sprint. Every week the site didn't exist was a week of inbound evaporating into the void. The build had to ship in days, and it had to ship at a quality prospects wouldn't forgive if it slipped.
  • International SEO from launch. Most personal sites get indexed in months and ranked for their own name in quarters. This one needed to be findable within weeks — and findable across the primary Tier-1 markets (US, UK, AU, NZ, Canada, Ireland, Singapore, Hong Kong, Philippines), not just the home country.

The failure mode I was designing against: a portfolio that looks fine but reads as "a freelancer who learned web design once." The site had to read as operator-grade.

Approach

Built end-to-end across roughly five working days using a Cursor + Claude Code pair-programming loop. The stack and decisions:

  • Next.js 16, App Router, MDX content — a version that ships, not a CMS that needs configuring. Case studies live as MDX files in content/work/; the loader in lib/content.ts parses frontmatter with gray-matter and renders bodies via the App Router's dynamic MDX pattern. Adding a case study is a file, not a deploy ritual.
  • Brutalist visual language — orange accent (#ff4500) on black and white, JetBrains Mono for mono labels, Inter Tight for display. An intentional rejection of the founder-gradient template aesthetic. Tailwind CSS v4 with @theme tokens in app/globals.css so the visual language is a typed design system rather than ad-hoc classes.
  • Vercel hosting + Cloudflare DNS — same-day deploys via vercel --prod, edge-cached globally. DNS sits on Cloudflare (grey cloud, DNS-only) so the domain can move hosts without a transfer window.
  • Cal.com booking + Resend transactional email — the conversion stack. Contact form is React Hook Form + Zod with honeypot and rate limiting; on submit, Resend sends a dual email — lead notification to me, auto-reply to the prospect — so the lead doesn't bounce waiting for a human to respond. Cal.com runs as a modal popup, not an inline embed, because the inline version forced a time-slot panel that didn't match the designed UX.
  • SEO from day one — dynamic app/sitemap.ts generated from the case-study and article loaders, JSON-LD Person + ProfessionalService @graph root schema, per-page Open Graph cards, full metadata audit at build time, Search Console submission on launch day. SEO wasn't a post-launch phase; every route shipped with its schema in place.
  • Real client logos — every case study client's actual mark, not stock placeholders. Trust is in the details. A prospect who recognizes a logo has already decided to take the next call more seriously.

The AI-augmented part wasn't "AI wrote my site." It was "every decision happened faster because there was a senior pair-programmer at the keyboard who never gets tired." The tool doesn't replace judgment; it removes the waiting time between judgments.

What I Built

  • Seven primary routes — home, services, work index, dynamic /work/[slug], writing, about, contact — each with per-page metadata, canonical links, and appropriate JSON-LD.
  • Case study MDX system — frontmatter schema in lib/content.schema.ts, loader filters unpublished drafts, sorts by order, supports a published flag for staging content before publish.
  • Writing MDX system — parallel architecture in content/writing/ with its own schema (lib/writing.schema.ts), loader, and dynamic route. First article shipped alongside the scaffolding.
  • Services landing pages — problem-anchored landing pages at /services/cut-software-costs, /services/ecommerce-automation, /services/finance-data-migration with FAQPage and Service JSON-LD for rich results.
  • Analytics layer — Vercel Web Analytics wired via <Analytics /> component with custom event tracking for CTA clicks and contact submissions.
  • Component system — primitives (Container, Button, Tag) and modules (ArticleCard, CalEmbed, ContactForm, MetricStrip) composable across pages, keeping visual consistency without duplication.

Timeline

Roughly five working days. The shape:

  • Day 1 — spec and scaffold. Next.js 16 project scaffolded, Tailwind v4 configured, design tokens in place, initial page skeletons.
  • Day 2 — content system. MDX loader, schema validation, case study template, first two case studies written.
  • Day 3 — conversion stack. Cal.com popup, Resend contact form with dual-email flow, rate limiting, honeypot.
  • Day 4 — SEO layer. Dynamic sitemap, JSON-LD graph, per-page metadata, Open Graph cards, PageSpeed tuning.
  • Day 5 — polish and ship. Remaining case studies in, Vercel production deploy, Search Console submission, DNS cutover.

Everything after Day 5 — the /writing route, analytics, problem-anchored landing pages, case study expansions — shipped through the same repo as subsequent PRs, which is the point: the site was architected to grow without rebuild.

Results

  • Shipped in roughly five working days from empty repo to live, indexed site.
  • Indexed by Google within the first crawl window after Search Console submission.
  • Ranked #1 for "Bryan Christian Dianco" within the first month — the foundational branded query.
  • All mobile Core Web Vitals green on PageSpeed for the primary routes.
  • Multiple case studies live out of the gate, with new ones added through the MDX pipeline without manual sitemap edits.

What I'd repeat

The pitch for AI-augmented work usually lands on tools. The real story is decisions. A traditional build cycle has hundreds of small "is this right?" moments where momentum dies. With Claude Code in the loop, those moments compress into seconds. The output is the same; the time-to-output is what changes.

Also: the site itself as proof-of-capability is a pattern I'd repeat for anyone selling operator-grade work. Don't describe how you build — show a build. Don't describe how you handle SEO — have the site rank. Don't describe your judgment — let the decisions on the page speak for themselves.

The site you're reading is the product. It does the talking.

Need a similar engagement?

Book a call →
tactic