Building My Own Website: When Strategy Meets Execution

This website is the result of deliberate collaboration between strategy and execution. Not me building it all, not AI building it all. I define vision and philosophy, AI researches and implements, we validate together. Final decisions remain mine.

This is different from "I built it all" or "AI built it all"—it's about understanding who is qualified for what, and maintaining responsibility in the right place.

The Problem & Initial Vision

A year ago I inherited systems from others. What I learned: not about tools or code quality, but whether the next person can understand the system quickly.

This year I'm building a website for people who want to understand who I am. No single source of truth before.

But I didn't just need "a good website". I had a specific vision:

• Theme: Software engineer who thinks philosophically and psychologically
• Style: Thoughtful, sustainable, not flashy or trendy
• Content: Story-based like a medieval novel with deep narrative
• Audience: HR from large companies, developers who want to learn, international market
• Language: Two languages with the same values but different registers per audience

This all came from me. AI was not asked to define this.

Division of Responsibility: Who Decides What

AI: Research, Execution, Options

After I defined vision, I asked:

"What's the best tech stack? Scalable folder structure? Colors and imagery that signal 'thoughtful engineer'?"

AI did:

• Research tech stack within my constraints
• Design folder structure for sustainability
• Execute components, styling, full implementation
• Research imagery and color palette aligned with brief
• Revise code and content based on feedback
• Analyze performance and suggest multiple improvement options

Concrete example:

For color palette, AI suggested options with reasoning:

• Monochrome plus single accent (minimal, professional signal)
• Warm neutrals plus accent (approachable, thoughtful tone)
• Cool tones plus accent (technical, clean aesthetic)

AI provided reasoning for each: device compatibility, accessibility implications, psychological effect on audience, alignment with positioning.

Me: Strategy, Philosophy, Final Validation

I decided:

• Monochrome plus single accent (aligns with "not flashy", organized thinking signal, tech recruiters recognize this)
• Blueprint motifs (architecture thinking for problem solver positioning)
• Font combination: serif plus sans (formal but approachable)

For every decision, I validated AI's reasoning and decided based on strategic intent—not "looks good" but "does this communicate the right narrative?"

Theme & Philosophy: Why Medieval Novel Structure?

This was a pure strategic decision from me.

Reasoning:

HR from large companies scan dozens of resumes. Most are linear: "two thousand nineteen IC, two thousand twenty-one specialist, two thousand twenty-four lead". Boring.

I wanted engaging narrative—but still credible.

Medieval novel structure (five acts, each with tension and resolution) creates memorable story that audiences want to continue reading. Each act has specific achievement clear in the heading.

AI didn't suggest this—AI executed this.

I briefed: "Five acts from my career progression. Act one: beginnings, Act two: domain expertise, Act three: maintaining systems, Act four: understanding architecture, Act five: now. Each act explains problem, decision, and impact. Tone: thoughtful, not boastful."

AI generated prose matching the tone, structured narrative with good pacing, added metrics for credibility.

Bilingual Content: Different Philosophy, Same Values

This was a pure strategic decision from me about marketing strategy.

Different audience equals different register equals different approach.

English Version

Target: International recruiters, engineers interested in technical deep-dive.

Strategy: Full five-act narrative with elaborate reasoning. Formal conclusion with philosophical reflection.

Tone: Reflective, detailed, somewhat literary.

Indonesian Version

Target: HR from large Indonesian companies who scan quickly.

Strategy: Facts first, reasoning second. Scan-friendly headings. Direct positioning: "System with wrong math equals salary doesn't arrive equals my responsibility to prevent this."

Tone: Direct, professional, confident.

Same values: Two languages with different tones, but both communicate engineer who thinks systematically, solves real problems, takes responsibility for outcomes.

AI translated and adapted for different register, but strategy came from me.

HRD & Marketing Perspective: Communication Strategy

This was marketing analysis that I created.

When building this website, I thought from several angles:

HRD Perspective (Large Companies)

What HR looks for:

• Clear career progression
• Evidence of growth (IC to specialist to lead)
• Solves real problems (payroll, banking, marketplace)
• Can explain thinking
• Stable (seven years at one company equals unusual, positive signal)

Website strategy: Position as engineer who cares about outcomes, not just coding. HR recognizes that people who think like this care about production systems.

Local Market (Indonesia)

What's valued:

• Loyalty and stability
• Technical depth in specific domains
• Leadership experience
• Indonesian presence

Website strategy: Use Indonesian language natively, reference Indonesian context, show deep domain expertise in areas local market understands.

International Market

What's valued:

• Systems thinking
• Problem-solving approach
• Philosophical perspective
• Ability to articulate

Website strategy: Emphasize systems-thinking angle, include philosophical reflection, show how problems were solved.

AI didn't suggest this—AI executed this. After I briefed on this strategy, AI implemented it in tone, content selection, messaging.

Development Process: Research → Execute → Validate → Decide

Stage one: Define

• I define vision, theme, philosophy
• I define goals and audience understanding

Stage two: Research & Recommend

• AI researches tech stack within my constraints
• AI researches design direction matched with brief
• AI provides multiple options with analysis

Stage three: Validate & Decide

• I review AI recommendations
• I ask: "Aligns with vision?"
• I decide direction

Stage four: Execute & Iterate

• AI builds implementation
• I test and feedback
• AI revises based on feedback
• Loop until it matches intent

Stage five: Analyze & Optimize

• AI analyzes performance
• AI suggests improvements with options
• I decide priorities

Metrics & Results

Technical: Lighthouse ninety-five plus, page load under one second, zero layout shift, fully accessible

First days: Organic traffic, no paid ads, trajectory pointing up

What matters: this result is combination of clear vision (me) and capable execution (AI).

Lessons Learned: About Strategic Collaboration

Lesson one: Define vision before delegating execution

Clarity at the beginning equals better output at the end. Specific vision helps AI optimize for the right direction.

Lesson two: Delegate expertise to those qualified

I don't research tech stack from random blogs. I delegate to AI trained on massive technical documentation. AI recommends with solid reasoning—I validate, decide.

Lesson three: Maintain strategic control

Delegating execution doesn't mean delegating strategy. I keep control: vision, philosophy, tone, messaging, validation.

Lesson four: Feedback must be specific and strategic

Don't say "improve this". Say "landing page feels empty because whitespace is too much relative to content—and this is a problem because recruiter scanning twenty seconds needs visual anchor immediately."

Lesson five: Multiple options beat single recommendation

AI provided three options for color palette with trade-off analysis. I chose what aligned with strategy.

Transparency: Why This Matters

People ask: "Who actually made this?"

Honest answer: Both, and both matter.

AI: Solid research, capable execution, fast iteration, multiple options to evaluate.

Me: Clear vision, sound strategy, careful validation, final decision.

This collaboration model shows:

• Strategic thinking (clear vision)
• Judgment (thoughtful evaluation and decision)
• Pragmatism (smart tool use)
• Responsibility (final decisions remain mine)

We don't control the tools that exist. But we control how we use them, and whether we stay in the place of decision.

That's what separates good craft from just getting it done.