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 inlib/content.tsparses frontmatter withgray-matterand 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@themetokens inapp/globals.cssso 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.tsgenerated from the case-study and article loaders, JSON-LDPerson+ProfessionalService@graphroot 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 byorder, supports apublishedflag 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-migrationwith 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.
