In May 2026 I decided to give this website a visual refresh. Instead of spending days tweaking CSS by hand, I had a conversation with GitHub Copilot (Claude Sonnet 4.6) inside VS Code. Here is an honest account of what I asked and what actually happened.
What I asked
I started by saying I wanted a full visual redesign of the site — same content, new look. Copilot offered three named directions to choose from. I picked "Warm Professional": a palette built on terracotta, amber and cream, with editorial serif headings and clean sans-serif body text.
From there the requests came in waves:
- Apply the new palette, font pair (Fraunces + Manrope), and Bootstrap variable overrides across the whole site.
- Redesign the navbar, hero section, blog/portfolio cards, CTA, bio section, and footer.
- Fix mobile layout issues (brand title not visible on small screens, hero chip label).
- Remove the hard-coded
bg-whitethat was breaking the sidebar background on blog posts. - Configure Zola 0.22.1's new
[markdown.highlighting]API correctly and pick a warm-toned theme (rose-pine-dawn). - Replace the eight GitHub Gist
<script>embeds scattered across blog posts with native fenced code blocks, so Zola's syntax highlighter could actually style them. - Fix the code block indentation — tabs were being rendered at full tab-stop width; I wanted 2–4 characters of visual indent like any normal editor.
- Constrain inline post images to the same max-width as the cover photo, so screenshots stopped stretching edge to edge.
- Shrink the Render "Deploy to Render" badge back to button size.
- Redesign the contact page with a two-column layout (intro + 3-step process on the left, Cal.com calendar filling the right column at matching height).
What was done
Sass / styles.scss received the most changes. Bootstrap variables ($primary, $body-bg, $body-color, border radii, button shapes) are overridden before the Bootstrap import. CSS custom properties in :root carry the warm palette tokens. Every major component got a dedicated class: .hero-shell, .hero-chip, .metric-box, .section-panel, .content-card, .bio-section, .bio-avatar, .site-navbar, .site-footer, .social-link, .cta-section, .process-step, .calendar-panel, .blog-content, .post-media, .deploy-button, and the syntax highlight pre block.
config.toml was updated to use the new Zola 0.22.1 highlighting API:
[markdown.highlighting]
highlight_code = true
theme = "rose-pine-dawn"Eight Gist embeds across five markdown files were replaced with fenced code blocks in the correct language (JSON, YAML, Dockerfile, Bash), so the rose-pine-dawn theme could colour them properly. Tab indentation inside those files was also normalised to two spaces.
The blog page template gained the .blog-content wrapper so scoped image and code styles apply only inside post bodies, and the .post-media class on the cover image keeps both cover and inline screenshots aligned at the same max-width: 980px.
The contact page template went from a single centred column to a true two-panel layout: the intro text and the three-step process sit in the left column, and the Cal.com inline calendar fills the right column at matching height using align-items-stretch and flex-grow-1.
Takeaway
The whole session took a couple of hours of conversation. The parts that required the most back-and-forth were the Zola syntax highlight API (it changed in 0.22.1 and Copilot had to iterate on the config subtable key names) and the Gist replacement (Copilot had to fetch all eight Gist contents from the GitHub API, decode the JSON, and rewrite the markdown files). Everything else — palette, layout, components — landed on the first or second attempt.
Using an AI assistant for a visual redesign is less about generating perfect code on the first try and more about being able to express intent in plain language and iterate quickly. The diff between the old site and the new one is large; the number of decisions I had to make was small.
Final note
This text has been also written by Github Copilot, directly in VS Code !
