Oscar Martínez

note

How I built this site without frameworks

HTML, CSS, and a bit of JS. Why I chose zero frameworks, how the hero ended up being my own dataLayer, and what I gained in speed and clarity.

This site doesn't use React, or Vue, or a 300 MB node_modules build to show five paragraphs. It's HTML, CSS, and a bit of JavaScript. And it was a decision, not a limitation.

I wanted a personal site that did three things: load instantly, have a personality of its own, and be something I could fully understand by opening the source. All three point the same way: fewer layers between the idea and what reaches the browser.

Zero frameworks, on purpose

Most personal sites I see load an entire framework to render content that is, essentially, static. It's bringing a crane to hang a picture.

For a page that doesn't change between visits, HTML served directly is unbeatable: nothing to hydrate, nothing to wait for, nothing that breaks between versions. The result feels instant because it is.

The fastest framework is the one you don't load.

That doesn't mean giving up tools. For this notes section I use a static generator that turns Markdown into HTML at build time — but what ships is still plain HTML, no client framework. The comfort of writing in Markdown, without the runtime cost.

The hero is my own dataLayer

The real challenge wasn't technical, it was about identity. A dark background with gradients could be anyone's portfolio. I work in digital analytics: taxonomies, measurement plans, data governance. My craft is structure.

So the hero on the homepage isn't a gradient headline. It's a schema that describes me, rendered like the code I write every day:

const oscar = {
  role:      "Software Engineering · Digital Analytics",
  based_in:  "Costa Rica",
  principle: "structure first, flexibility when needed",
  measuring: {
    building: "analytics frameworks",
    next:     "becoming_father"   // the metric that matters most
  }
}

All the boldness of the design lives in that single piece. A lone amber accent highlights the line that truly matters, and the rest of the page stays quiet around it. It's Coco Chanel's rule applied to web design: before you leave, take one accessory off.

What I took care of underneath

Personality is seen; quality shouldn't be noticed. The things I cared about without announcing them:

  • Performance. Fonts with display: swap, Google Analytics deferred 1.5 s so it doesn't block render, the background grid in pure CSS (no images).
  • Accessibility. Visible keyboard focus, prefers-reduced-motion respected (the schema animation turns off), careful contrast.
  • Real responsiveness. On mobile, the schema lines wrap instead of forcing horizontal scroll — a detail you only notice when it's missing.
  • SEO with intent. schema.org structured data, hreflang for the Spanish and English versions, an image for social previews.

None of those decisions needed a framework. They needed judgment.

Structure first

If I had to sum up how I built the site in one sentence, it would be the same one I use for an analytics implementation or for planning a trip: define the base well and the rest flows.

Zero frameworks isn't nostalgia or purism. It's the same idea I defend in my work: most hard problems aren't solved with more technology, but with better structure. This site is, at its core, that argument made page.

All notes