how I built this website: a Sunday, free tools, and a lot of learning

It started with a single thought on a slow Saturday: I should have a place where I can tell my story, share what I learn, and build things the way I want. What followed was one of those small projects that turned into a joyful obsession.
That Sunday I sketched the ideas, argued about fonts and colors with my wife for a few minutes, and then just started. The first draft of the homepage was up before dinner. It felt like making a model from scratch, fast, messy, and somehow satisfying.
the design: mockups in Canva, polish with free tools
I began with a simple wireframe in Canva, hero image, short intro, and blocks for projects and posts. Canva made it quick to try layouts, swap images, and test typography, their free tier gives you plenty of features, and elements to get moving.
Once the layout was set, I wanted a profile image that felt personal, not stock. I edited the portrait in GIMP (crop, color-correct, remove background), which is completely free and surprisingly powerful for simple photo work. Nothing paid, just time, patience, and a few tutorial videos.
why Next.js + Tailwind? (short technical reasoning)
I tried a couple of builders and stacks before landing on Next.js with Tailwind CSS. The reasons were practical:
- Developer experience & flexibility: Next.js is a React framework that gives you everything you need to build interactive pages and scale later, routing, fast refresh, and options for static or server rendering. That let me start simple and still keep the door open for dynamic features.
- Performance and deployment options: Next.js supports static site generation and incremental/static rendering patterns, which help pages load fast and scale cheaply. That matched my goal of a lightweight, responsive personal site.
- Design speed with control: Tailwind is utility-first CSS, so I could build a clean, original look without fighting a framework. It keeps styles in HTML (so I see changes faster) and makes small UI effects easier to iterate on. The Tailwind + Next.js setup is straightforward to follow.
In short: Next.js gave me structure and performance; Tailwind gave me design speed and fine control.
tools & software I used (all free / low-cost)
- Design & mockups: Canva (free tier).
- Image editing: GIMP (free, open-source).
- Code editor: Visual Studio Code (free, extensions for React/TS).
- Framework & starter: Next.js (create-next-app) to bootstrap the project quickly.
- Styling: Tailwind CSS (installed via the official Next.js guide).
- Version control: Git + GitHub (free repos for public projects).
Everything I used was free or offered a useful free tier, the only cost was my time.
a short "how I built it" that you can copy
- Mock up in Canva: layout blocks, pick a color palette, export assets.
- Bootstrap site: npx create-next-app@latest my-site (or use the CLI) to get a Next.js starter.
- Install Tailwind: follow the Next.js + Tailwind guide to wire up Tailwind config and utility classes.
- Edit images in GIMP: crop, remove background, export optimized PNG/JPEG for the web.
- Develop pages: home, about, projects, blog. Keep components small and reusable.
If you want, I can turn that into a separate step-by-step tutorial with commands and screenshots.
why I did it all from scratch
Two reasons:
- Learning' Building from the ground up forces you to learn every layer, from layout decisions to build configuration. The mistakes you make teach you faster than copy-pasting templates.
- Creative freedom' When you own everything, you can experiment with small, original touches, a subtle hover, a layout quirk, an effect that feels personal. Tailwind made those experiments low-friction.
There's real joy in iterating until something feels right.
how satisfied I am, and why I'll keep iterating
I'm happy with the result: the site is fast, clean, and mine. But it's also a living project. As I learn new UI patterns or discover better performance tricks, I'll iterate, add a11y improvements, progressive images, small animations, or richer project pages. The playground is open.
✌🏾 ~S.D.