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 used Repaint as a design reference for the visual direction. It helped establish the typography pairing (Inter / Newsreader / JetBrains Mono), a calm light/dark colour palette, a card-led project layout, and the eyebrow + numbered section pattern used throughout the site. The implementation and content remain tailored to our studio.
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 engineers, one repo. The site keeps the content model simple so a small team can maintain the design, projects, and writing together.
- 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 work with us, the about page has more about the team and how we work.