How I built this site — design, code to production
The story behind the redesign — handing my old portfolio to Repaint for a visual overhaul, then rebuilding it from the design in Jekyll with SCSS, GSAP, and Decap CMS.

I had an old portfolio that I’d outgrown — it did the job for a while, but it had stopped looking like the work I actually do today. So I shipped this redesign. Here’s how it came together.
Step 1 — Hand the redesign to Repaint
I gave the old site to Repaint, I liked their redesign. It came up with a fresh design system: typography pairing (Inter / Newsreader / JetBrains Mono), a calm light/dark colour palette, a card-led project layout, and the eyebrow + numbered section pattern you see throughout the site. I mean I’m a developer and not a designer so I think using AI or other sources for design is okayish.
Step 2 — Implementation: Jekyll, the boring static-site generator
The codebase is plain Jekyll. No Node build step, no React, no hydration. It compiles to static HTML and ships.
I think jekyll is a very good alternative to js heavy sites for the simple portfolio like mine so I opted for jekyll, also I had worked with it a lot ever since I started working at Biralo Studio, so this was a good option for me to rebuild with jekyll.
Step 3 — SCSS for the design system
All styles live in _sass/ as modular SCSS partials — one per concern: _card.scss, _button.scss, _typography.scss, _grid.scss, _post.scss, and so on. A single index.scss pulls them in. Jekyll compiles it inline into <style> via the scssify filter.
The design tokens (colours, spacing, type ramp, breakpoints) live in _variables.scss and _breakpoints.scss, so light/dark mode and responsive rules are one source of truth rather than scattered media queries.
Step 4 — GSAP for motion
I’m not good with designs and animations so animation is minimal. The small bits of motion across the site — the subtle reveals, the things that animate as you interact — run on GSAP. Loaded once from a CDN, used sparingly enough that you’d barely notice it’s there until you tried to remove it. The goal was for the site to feel alive without feeling busy.
Step 5 — Decap CMS so I can write from anywhere
I didn’t want to be SSH-ing into a laptop every time I wanted to add a blog post or update a project description. So the site has Decap CMS (formerly Netlify CMS) wired up at /admin/.
It’s a tiny SPA that authenticates against GitHub, lets me edit the markdown files through a friendly form UI, and commits the changes straight back to the repo. The schema lives in admin/config.yml — collections for blog posts, projects, skills, plus file collections for every _data/*.yml (hero, footer, CTA, etc).
Net effect: I can update the site from my phone in five minutes if I want to.
A few extras the design didn’t ask for
The Repaint design covered the visual side. I layered a few engineering decisions on top:
- Two personas, one repo. There’s a
/unhinged/mirror of the site with the same layout but a much more chaotic data set in_data/unhinged/*.yml. Same Liquid components, different data namespace.- Minimal SEO. Pure-Liquid
sitemap.xml,robots.txt, RSS feed (no plugins, no Gemfile),og:andtwitter:cards on every page, JSON-LD structured data (WebSite+Personon the home,CreativeWorkon each project), and per-pagemeta_title/meta_descriptionoverrides.- Cloudflare hosting + ccTLD.
sujatachaudhary.com.npruns behind Cloudflare’s global CDN. Total monthly cost: $0.- Auto-TLS on the apex domain via Cloudflare. No certbot rotation, no nginx config to babysit.
What’s next
Now that the site exists in a shape I’m happy with, the writing can start. The next few posts will be the engineering side — backend systems, agentic AI infrastructure at Biralo Studio, and the things that surprised me along the way.
If you want to see the inverse-energy version of this site, the unhinged version of the site is right there.