Interactive Resume

A resume page built to outrank LinkedIn for "Arthur Brejon" searches. Combines SEO structured data, interactive UX, and a strict confidentiality layer — because what you don't show matters as much as what you do.

View live resume

The Goal

When someone Googles "Arthur Brejon", this site should appear above LinkedIn. LinkedIn controls your profile — you can't add structured data, custom sections, or expandable details. A self-hosted resume with proper SEO gives you full control over how you appear in search results.

SEO Strategy

JSON-LD Person Schema

Structured data tells Google this page is about a specific person — name, employer, job title, education, languages, past occupations. Enables rich results.

Canonical URL

Single canonical at /resume prevents duplicate content penalty. The old /profile page now redirects here.

OpenGraph + Twitter Cards

Social sharing previews with custom OG image (1200×630). Controls how the page appears when shared on LinkedIn, Twitter, Slack.

Semantic HTML

Proper heading hierarchy (h1 → h2 → h3), section landmarks, and meaningful content structure that search engines can parse.

Keyword-Rich Metadata

Title, description, and keywords target "Arthur Brejon" + role-specific terms. Description reads naturally while hitting search terms.

Design Decisions

Expandable role details

Recruiters scan first, then drill into roles they care about. The summary/expand pattern keeps the page scannable while offering depth on demand.

Company-grouped timeline

Groups multiple roles under one company header (e.g., 5 Lazada roles). Shows career progression within organizations — more meaningful than a flat list.

Products Built section with counts

50+ products across 4 categories, linking to the full /products page. Quantifies breadth in a way a traditional resume cannot.

Career path one-liner

"Banking → Entrepreneurship → Fintech → AI" — tells the story arc in one line. Recruiters pattern-match on career trajectories.

No PDF download

The interactive page IS the resume. A PDF is a static snapshot that can't be updated, tracked, or optimized for search.

Confidentiality Layer

Building a public resume while working at a large tech company requires a strict content filter. Every detail on the site passes through these rules:

  • No internal product names — generic descriptions only (e.g., "AI Agent Framework" not the internal codename)
  • No specific cost/savings figures tied to internal strategies
  • No confidential project details or investment amounts
  • No internal team names or headcount numbers
  • Source of truth: externally-safe resume version, not internal docs
  • Products page uses "Enterprise" attribution for sensitive items

Architecture

01

Layout

layout.tsx (Server Component)

Metadata export + JSON-LD script injection. Handles SEO without client-side JavaScript.

02

Page

page.tsx (Client Component)

Interactive expandable details using React useState. Data defined as typed arrays — easy to update.

03

Content Strategy

Hub & spoke

/resume is the canonical profile. /products links out for depth. /profile redirects here. One strong page beats two weak ones.

Build Your Own

Want to build a resume that outranks your LinkedIn? Here's the playbook — step by step.

1

Pick your stack

Next.js + Vercel is the fastest path. Free hosting, automatic HTTPS, global CDN. Create a new project with `npx create-next-app@latest` and deploy in minutes.

2

Structure your content as data

Define your experience, education, and skills as typed arrays — not hardcoded JSX. This makes it easy to update and lets AI tools help you iterate on content without touching layout code.

3

Add JSON-LD structured data

Create a layout.tsx with a Person schema: name, jobTitle, worksFor, alumniOf, knowsAbout, sameAs (LinkedIn URL). This tells Google exactly who the page is about. Test with Google's Rich Results Test.

4

Set canonical URLs

One canonical URL per page. If you have /profile and /resume, pick one and redirect the other. Duplicate content splits your ranking power.

5

Add OpenGraph metadata

Create a 1200×630 OG image. Add og:title, og:description, og:image to your metadata. This controls how your page looks when shared on LinkedIn, Twitter, and Slack.

6

Make it interactive

Add expandable sections for role details. Recruiters scan first, then drill into what interests them. A simple useState toggle is enough — no libraries needed.

7

Content filter for public sites

If you work at a large company, define clear rules for what can and cannot appear publicly. Use generic descriptions for internal products. Keep a single source-of-truth document for safe content.

8

Submit to Google Search Console

Verify your domain, submit your sitemap, and request indexing for your resume page. Monitor which queries bring traffic and optimize your metadata accordingly.