Web / Portfolio / SEO
karimvarela.com
A senior engineer's portfolio. Twenty years of work, distilled.
Client
Personal Project
Role
Design & Full-Stack Engineering
Timeline
2024
The problem
Senior engineers have a portfolio problem. The work that defines a 20-year career doesn't fit in a GitHub profile. The teams you've led, the architecture decisions you've made, the fires you've put out — none of that is in a repo. But it's all the stuff that actually matters to the people worth working with.
The secondary problem: ATS systems. A significant portion of senior hiring still runs through applicant tracking software that can't read a beautiful website. The portfolio needed to be readable by hiring managers and parseable by machines — without compromising either.
The constraints:
Must communicate seniority and taste without being verbose
Must be fast — every 100ms counts when someone is browsing candidates
Must rank well for the engineer's name (basic SEO hygiene that most engineer portfolios skip)
Must not look like a Wix site or a GitHub Pages default
The approach
The framing decision was to treat the portfolio as a product with two user types: the hiring manager reading it in 45 seconds, and the technical peer doing a deeper dive. Most portfolios optimize for one and fail the other.
Hierarchy before design.
We mapped the information hierarchy first: what does a hiring manager see in 10 seconds, 30 seconds, 2 minutes? The design followed that map, not the other way around. Every visual decision was evaluated against whether it helped or hurt the reading flow.
MDX for real writing.
The technical writing sections — project deep dives, engineering philosophy — are authored in MDX, which lets them be as detailed as they need to be while keeping the code maintainable. Good SEO comes from good writing, not keyword stuffing.
A portfolio is a 45-second read and a 10-minute read at the same time. Design for both, or fail both.
The work
Custom design system built for legibility and speed — no unnecessary animation, no cluttered sidebars
Responsive layout with mobile-first thinking (phone browsing is standard at this point)
MDX-based project write-ups with custom components for code blocks, callouts, and timelines
Structured data (JSON-LD) for person/profile schema — helps search engines understand who this is about
OpenGraph and Twitter card meta for clean link previews when shared on LinkedIn
100/100 Lighthouse score on performance, accessibility, and SEO
Vercel Edge Network deployment for global sub-50ms TTFB
Resume page that prints cleanly — because sometimes someone still asks for a PDF
The outcome
The site ranks for the engineer's name on the first page of Google results within 48 hours of launch. Inbound recruiter messages that reference specific projects from the portfolio — versus generic connection requests — increased meaningfully after launch.
More importantly, the site reflects the engineer's actual aesthetic and values. It doesn't look like a portfolio site; it looks like something a senior engineer who cares about craft would build.
The best portfolio is one that filters for the right opportunities before the first call.
Tech stack
Next.js
TypeScript
MDX
Framer Motion
Vercel
Want this kind of work on your team?
We read every message. Real reply within two business days.