Performance Scores
This site achieves near-perfect Lighthouse scores through careful optimization at every layer of the stack:
Test it yourself on PageSpeed Insights to verify these scores.
Performance Optimization
Font Loading Strategy
Fonts are one of the biggest performance killers on the web. We use a multi-layered approach:
- font-display: optional - Fonts only render if cached, eliminating FOIT (Flash of Invisible Text)
- Deferred stylesheet loading - Google Fonts CSS loads via
media="print"with anonloadswap - System font fallback - Inline CSS ensures text is visible immediately with system fonts
- Preconnect hints - Early connection to fonts.googleapis.com and fonts.gstatic.com
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter..."
media="print"
onload="this.media='all'">JavaScript Optimization
The site uses minimal JavaScript, carefully audited for necessity:
| Bundle | Size (gzip) | Purpose |
|---|---|---|
| main.js | 2.05 KB | Core functionality |
| vendor-lenis | 4.79 KB | Smooth scrolling |
| vendor-gsap | 45.01 KB | Scroll animations |
Libraries that added weight without sufficient value were removed:
- SplitType (15KB) - Removed. Caused CLS issues by manipulating DOM on load
- VanillaTilt (10KB) - Removed. Minor visual enhancement not worth the payload
CSS Optimization
- SCSS compilation - Vite compiles and minifies to 7.44KB gzipped
- CSS custom properties - Used for theming, enabling runtime theme switching
- No unused CSS - Manual audit ensures only necessary styles ship
Hosting: Firebase
Firebase Hosting was chosen for several reasons:
- Global CDN - Content served from edge locations worldwide
- Free tier - 10GB storage, 360MB/day transfer (more than enough for a portfolio)
- Simple deployment -
firebase deployfrom CI/CD - Automatic SSL - HTTPS with auto-renewed certificates
- HTTP/2 - Multiplexed connections for faster asset loading
Accessibility Compliance
This site targets WCAG 2.1 AA compliance. Accessibility isn't just about legal compliance—it's about ensuring everyone can access your content.
Implemented Features
- Skip navigation link - Hidden link that becomes visible on focus, allowing keyboard users to skip repetitive navigation
- Semantic HTML - Proper heading hierarchy, landmark regions (
<header>,<main>,<nav>,<footer>) - Color contrast - All text meets 4.5:1 contrast ratio (7:1 for large text)
- Focus indicators - Visible focus rings on all interactive elements
- ARIA labels - Screen reader context for icons and interactive elements
- Keyboard navigation - Full site navigation without a mouse
- Reduced motion - Respects
prefers-reduced-motionmedia query
Mobile Menu Accessibility
The mobile menu implements several accessibility patterns:
- Focus trapping - Tab key cycles within the menu when open
- Escape key - Closes the menu and returns focus to trigger
- aria-expanded - Communicates menu state to screen readers
- role="dialog" - Identifies the menu as a modal to assistive technology
Why Accessibility Matters
Beyond the ethical imperative, accessibility benefits everyone:
- SEO benefits - Search engines favor accessible, semantic markup
- Legal protection - Reduces risk of ADA compliance issues
- Wider audience - ~15% of the world's population has some form of disability
- Professional signal - Demonstrates attention to detail and inclusivity
Content Strategy: Target Personas
This portfolio isn't designed to appeal to everyone—it's strategically crafted for specific hiring personas. Each case study and piece of content addresses the concerns and interests of these target audiences:
The Technical CTO
Who: Engineering leaders at growth-stage startups evaluating senior hires
Cares about: Architecture decisions, scalability thinking, technical depth
Content for them: Case studies with code samples, architecture diagrams, performance metrics
The Technical Recruiter
Who: Agency or in-house recruiters screening for Laravel/PHP senior roles
Cares about: Keyword matching, years of experience, recognizable technologies
Content for them: Clear tech stack listings, quantified achievements, downloadable resume
The VP of Engineering
Who: Senior leaders needing someone who can own complex systems
Cares about: Business impact, cost savings, team leadership, communication
Content for them: ROI-focused case studies, before/after metrics, strategic thinking
Content Choices
Every piece of content serves a purpose:
- Case studies over tutorials - Show judgment and decision-making, not just technical knowledge
- Metrics and numbers - "220M+ requests/month" and "97% cost reduction" are memorable and concrete
- Architecture focus - Positions for senior/lead roles, not junior implementation work
- No blog fluff - Every article demonstrates expertise relevant to the roles I'm targeting
Technical Stack
| Build Tool | Vite 7.x |
| Styling | SCSS with CSS custom properties |
| JavaScript | Vanilla JS + GSAP + Lenis |
| Hosting | Firebase Hosting (CDN) |
| Output | Static HTML/CSS/JS |
Key Takeaways
- Performance is a feature - Fast sites rank better, convert better, and respect users' time
- Accessibility benefits everyone - Good accessibility practices improve usability for all users
- Know your audience - Content should be strategically designed for specific personas
- Measure and iterate - Lighthouse scores provide actionable feedback for continuous improvement
- Simple beats complex - Static sites are fast, secure, and cheap to host
The best portfolio isn't the one with the most features—it's the one that loads instantly, works for everyone, and clearly communicates your value to the right people.