Building My Resume Website With Only Browser Tools

Here's a challenge I gave myself last month: build a personal resume website from scratch using nothing but browser-based tools. No VSCode. No Photoshop. No command line. No local server. If it couldn't be done in a browser tab, I couldn't do it. This was partly an experiment and partly me being lazy. But I ended up with a genuinely nice-looking site, and the process taught me something about how far web development tooling has come. **Step 1: Content with Markdown Editor.** I started with the words. Instead of writing HTML directly, I wrote the entire site content in a Markdown editor. Name, bio, work experience, skills, projects — all in plain Markdown. The editor shows a live preview, so I could see my headers, lists, and links rendered in real time. Writing in Markdown instead of HTML kept me focused on content instead of markup. I exported the Markdown and converted it to HTML. **Step 2: Design with CSS Animations and Font Pairing.** This was the fun part. I wanted the site to feel polished without being heavy. For fonts, I used a font pairing tool to find combinations that work well together — a clean sans-serif for headings (Inter) and a readable serif for body text (Merriweather). The tool let me preview the pair on sample text before committing. I copied the Google Fonts link and CSS directly from the preview. For visual flair, I added subtle CSS animations. A fade-in on the hero section when the page loads. A gentle hover lift on project cards. A smooth scroll on navigation links. Nothing crazy — just enough to communicate that attention was paid. I iterated on these directly in the browser using a CSS animation playground that showed me the timing and easing curves visually. Once I liked the effect, I copied the keyframes into my stylesheet. **Step 3: Images with Image Compress.** My photo and project screenshots needed optimization. I ran everything through an image compressor. The browser tool showed me a before-and-after comparison so I could balance quality against file size. I settled on around 80% quality for photos and 60% for screenshots. The hero photo went from 1.2MB to 180KB. You can't tell the difference on screen. **Step 4: Piecing It Together.** Here's where it could have fallen apart. Without a local development server, how do you actually build a multi-page site? The answer: you don't need one for a single-page site. I wrote the HTML structure, embedded the CSS in a style tag, and used a CDN for the Google Fonts. No build step. No npm install. No webpack config. It's just a static HTML file. I tested everything by opening the file directly in the browser. The CSS animations worked. The font pair looked right. The images loaded fast. I made adjustments by switching between the Markdown editor, CSS playground, and browser — all in separate tabs. No local filesystem involved until the final save. **The result:** A responsive, good-looking resume site that loads in under two seconds on a mobile connection. Lighthouse score of 98. Zero dependencies. One HTML file, one CSS file, four optimized images. Total time from start to finish: about four hours, including the time I spent obsessing over whether to use 400ms or 500ms for the fade-in animation. Could I have built a React app with a headless CMS and a CI/CD pipeline? Sure. But I didn't need to. I needed a resume site. And the browser gave me everything I needed to build one. I still have VSCode installed. But lately, when I'm doing quick projects, I find myself reaching for browser tools first. The barrier to entry is lower. The iteration loop is faster. And honestly, it's just more fun.