[TN]
[>_]in~/projects$cat /projects/muddyboots.online.md
~/projects/muddyboots.online.md

MuddyBoots

178 words · 1 min read

muddyboots.online · Role: Built + maintain · Platform: WordPress (Gutenberg)

MuddyBoots is an operations platform for oil & gas and building management teams. It helps them maintain assets, track compliance, and see what's happening across hundreds of sites and thousands of pieces of equipment.

What I did

I built the marketing site from scratch in WordPress, turning Figma designs from the Cream & Sugar design team into a custom Gutenberg block build, with no page builder plugin and no off-the-shelf theme. I broke the design into reusable block patterns, so the client's team can edit every section without touching code. I continue to maintain the site.

The problem I solved

WordPress's built-in Additional CSS field was too limited for the responsive, block-level styling the design needed: no nested selectors, no media queries, and no way to scope styles to a single block. So I built additional-css-enhancement-plugin. It adds &-based nested selectors, @media/@supports/@container at-rules, and a compile-validate-preview pipeline that only ships CSS once it matches what's saved in the editor.

Stack: WordPress, Gutenberg, PHP, React, JavaScript, Figma

[>_] in $

type a command and press enter, or press ⌘K for suggestions

Run a command

enter run ↑↓ select tab complete esc close

Help

how this site works · esc to close

About this site

This is Trinh Nguyen's dev blog, dressed up as a terminal. Instead of clicking through pages, you run commands against a small virtual file system with three directories:

~/posts~/topics~/projects~/about

How to use it

  • Type a command at the prompt and press enter. Output is added below, like a shell session.
  • Press ⌘K (Ctrl+K on Windows/Linux) to open the command palette with suggestions and your recent commands.
  • The /posts, /topics, /projects and /about links in the header are shortcuts for cd ~/posts && ls and friends.
  • Chain commands with &&, e.g. cd ~/about && cat me.md.
  • To read an article, ls a directory, then cat the file you want.

Commands