Case Study: How We Rebuilt MalekHijazi.com (Strategy, UX, SEO, and Performance)
• 14 min read • 2/27/2026 
Rebuilding a personal site sounds easy until you care about the details.
This project started as “let’s refresh an old portfolio” and quickly became a full-stack brand + UX + content + performance rebuild. In this post, I’m documenting exactly how we went from an outdated multi-section portfolio to a modern single-page brand site with a native blog and clean SEO foundations.
If you’re a founder, engineer, or operator trying to do the same, this is the step-by-step playbook.
Project goals
We set clear goals up front:
- Rebrand around Product Engineering + AI agents
- Build a single-page site that feels modern, warm, and credible
- Keep a minimal visual language with playful personality
- Preserve speed, accessibility, and SEO from day one
- Prepare for long-term growth via native blog + project subpages
Positioning and copy strategy
The biggest unlock was copy clarity.
We tested multiple directions and converged on this hero:
- H1: I build useful things with code, AI, and curiosity.
- Sub: I help teams go from idea to shipped product with product thinking, AI agents, and full-stack execution.
- CTA: Let’s build something
Why this worked
- It sounds human, not corporate.
- It communicates delivery, not fluff.
- It attracts the right audience: founders/startups/accelerators/clients.
Information architecture decisions
We locked a clear sequence and optimized for scan-ability:
- Hero
- Trust strip
- What I do
- Selected work
- Sentry series
- About
- Resume snapshot
- Final CTA
- Footer
This order moves from identity → proof → credibility → conversion.
UI direction and inspiration research
We sampled inspiration from portfolio and editorial-style personal sites, then chose a minimal baseline with selective visual personality.
Design principles we followed:
- Strong typography hierarchy
- Plenty of white/negative space
- Rounded cards for content rhythm
- Subtle color accents in tags/chips
- Personality illustrations without overwhelming layout
Flow diagram (design process)
flowchart TD
A[Brand Inputs] --> B[Positioning]
B --> C[Hero Copy]
C --> D[Wireframe]
D --> E[Visual Iteration]
E --> F[A11y + SEO]
F --> G[Performance]
G --> H[Blog Expansion]Screenshots from the build
Selected Work structure and card hierarchy
Sentry + About composition iteration
Blog layout and consistency checks
Technical implementation
Stack choice
- Astro for static-first speed and SEO
- Vanilla CSS (small and explicit)
- Minimal JS for theme toggling and essentials
Why Astro
- Fast by default
- Easy content system via Markdown/collections
- Great fit for portfolio + blog architecture
Accessibility and reader experience
We added and validated:
- Skip-to-content link
- Keyboard-visible focus states
- Proper landmark structure (
header,nav,main,footer) - Better contrast on tags/chips
- Better blog typography (line-height, heading rhythm, list spacing)
- Better code block and inline code styling
SEO strategy implemented
- Title + meta description per page
- Canonical URLs
- Open Graph + Twitter cards
PersonJSON-LD structured data- Clean internal linking (home ↔ blog)
Performance work (what moved the needle)
The biggest problem was image weight.
We fixed this by:
- Cropping large hero art
- Converting images to transparent WebP (alpha preserved)
- Adding responsive
srcset/sizes - Reducing unnecessary JS work on mobile
Optimization flow
flowchart TD
A[Run Lighthouse] --> B[Find Bottlenecks]
B --> C[Optimize Images]
C --> D[Reduce Main-Thread JS]
D --> E[Retest]
E --> F[Repeat Until Stable]Result: consistent top-tier Lighthouse outcomes after iterations.
Skills and tooling used
We used ClawHub skills directly during planning and execution.
ClawHub skills used in this project
Copy + SEO
- ai-seo-writer (SEO-oriented writing structure)
- seo-optimizer (SEO checks and optimization guidance)
- copywriting (copy refinement support)
UI / Design direction
- superdesign (modern UI baseline and design heuristics)
- frontend-design-3 (distinctive frontend polish direction)
- awwwards-design (high-end inspiration, selectively borrowed)
Diagram support
- mermaid-diagrams (diagram generation workflow)
Other tooling
- Mermaid for process visualization in the case study
- Git commits per change batch for safe rollback
What we learned
- Great portfolio work is mostly positioning + editing
- Small visual tweaks compound fast
- Performance must be handled early (especially images)
- SEO and accessibility are easier when baked into the foundation
- A living content system (blog + project pages) beats one-off static copy
What’s next
- Expand blog with more migrated + original posts
- Build dedicated project subpages (Flyp, Toothpick, Markit, etc.)
- Add richer case-study depth and outcome metrics
- Decide final production blog architecture (
/blogvs subdomain)
Prompt you can use to replicate this process
Copy this prompt and adapt:
I want to rebuild my personal website into a fast, minimal, modern single-page portfolio with a warm and human tone.
Context:
- My audience: founders, startups, clients
- My positioning: Product Engineer building with AI
- Required sections: Hero, Trust strip, What I do, Selected Work, About, Resume snapshot, CTA, Footer
- I also want a native blog with consistent header/footer and author identity support
What I need from you:
1) Propose 3 brand directions and hero copy options
2) Create a final section architecture and wireframe
3) Build with a static-first stack (SEO + performance friendly)
4) Add accessibility best practices (focus states, landmarks, contrast)
5) Implement SEO essentials (meta, OG, canonical, schema)
6) Run Lighthouse and fix bottlenecks until scores are excellent
7) Create a blog structure and migrate one sample post with cover image
8) Provide a clear changelog and next-step roadmap
Constraints:
- Keep design minimal and tasteful
- Avoid generic templates
- Use small iterative commits so rollback is easyIf you use this process well, you won’t just get a better website — you’ll get a better narrative.