Resume Website

At some point I realized my resume shouldn't just live in a PDF buried in a Google Drive folder. It should be a real website — fast, clean, and something I'd actually enjoy sending to people.

So I built one from scratch. No frameworks, no build tools, no npm install. Just HTML, CSS, and a tiny bit of JavaScript for the theme toggle. It's hosted at resume.ashwin.co.in and it loads in under a second.

Live Demo

Here's the actual site running live — fully interactive, scroll around, toggle the theme, click the links.

Why Vanilla?

I work with React and Next.js every day, so going back to raw HTML felt almost rebellious. But for a resume, it made perfect sense:

• Zero build step — edit, save, deploy. That's it.
• Instant load times — no JavaScript bundle to parse, no hydration delay
• Total control — every pixel is exactly where I want it
• Universal compatibility — works in any browser, even with JS disabled (minus the theme toggle)

Sometimes the simplest tool really is the right one.

Design Decisions

Theming

The site supports light and dark modes using CSS custom properties with data-theme attribute toggling:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --link-color: #0066cc;
}
 
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --link-color: #4d9eff;
}

The theme preference persists via localStorage, so returning visitors get their preferred theme instantly — no flash of wrong colors.

Typography

I went with Fira Sans — it's clean and professional without being boring. The monospace Courier New is used for dates and tech tags, giving them a subtle "code" feel that fits the developer resume context.

Responsive Layout

The layout shifts across six breakpoints — from full desktop down to tiny mobile screens. Projects and skills use a CSS Grid that gracefully collapses to a single column. Section headers, tag lists, and the theme toggle button all adapt proportionally.

section#projects > ul,
section#skills > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.8em;
}
 
@media (max-width: 768px) {
  section#projects > ul {
    grid-template-columns: 1fr;
  }
}

Interactive Details

Small touches that make it feel polished:

• Animated underlines on links that slide in on hover
• Smooth theme transitions — background and text colors fade between modes
• External link arrows (↗) that increase opacity on hover
• Theme toggle button that morphs into a circle on very small screens

Tech Stack

Intentionally minimal:

No bundler, no preprocessor, no runtime dependencies. The entire site is two files plus a font.

What I Learned

There's something refreshing about stripping away all the tooling and just writing HTML. No npm install, no config files, no waiting for dev servers to spin up. You save the file and it's done.

It also reminded me that good design doesn't require complex tools — it requires intentional choices. Every spacing value, every color variable, every breakpoint was deliberate. And honestly, constraining myself to vanilla CSS made me think harder about each decision than I would have with a utility framework.

Sometimes the best project is the one with the fewest moving parts.