Interactive Logo Deck
An interactive logo and font pairing tool built for client presentations and to prove out a CSS grid technique.
This one started with a YouTube video and a CSS declaration I wanted to try, mixed with an idea to solve a problem. It ended up as a fun tool that I’ve used in my own design studio.
The Idea
Presenting logo concepts to clients has always been a PDF problem. Static files, no interactivity, no sense of scale or context. A client gets three logo options on a white background and has to imagine what any of them might actually look like in use. That gap between the deliverable and the decision always bothered me.
An interactive logo deck was an idea built to close that gap, a shareable interactive presentation where clients can explore logo and font pairings in real time, switch icons, and see their selected option rendered at scale in a live hero section. No PDF. No Figma link. Just a URL.
The Build
The technical premise was a single CSS declaration:
grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));One line. Fully responsive grid. No media queries. I wanted to prove it out in a real project rather than a CodePen, building an interactive logo deck was the perfect excuse. Each card displays a logo option with its font name, switchable icons, and a toggle that promotes that option to the hero section above the grid. The interaction is immediate and obvious without any instruction. Deployed on Cloudflare Pages, which was its own learning objective, and the groundwork that fed directly into later, more complex Cloudflare projects.
What It Taught Me
The most enjoyable projects are the ones where the learning is the point. This interactive logo deck was not a client deliverable, not a revenue play, and not something anyone asked for. It was a question: can I prove this CSS technique works in a real context? A useful tool was the byproduct. When there is no client and no deadline, the only standard is your own.
That discipline transfers. The same instinct that kept the logo deck focused: one problem, one solution. That is what drives every project on this site. Identify the real problem, constrain the scope, build it properly, learn something specific, and find enjoyment in the work when nobody is watching.
A Little More About Me
I’ve been doing this long enough to know what I am good at, I’m honest enough to know what I don’t know, and I’m still curious enough to enjoy the difference.
I started in web development before WordPress was a serious platform, working in HTML, FLASH, ASP.NET and e-commerce at a time when building for the web meant figuring most of it out yourself. That foundation of curiosity and hard work stuck. Twenty years later I still approach problems the same way: understand the system before touching it, and build things that hold up over time.
Along the way I have worked on everything from custom WordPress builds and WooCommerce stores to membership platforms, internal tools, and full SaaS products built from scratch. The problems change. The approach does not.
I work best in environments where quality is valued, documentation is treated as part of the job, and developers are brought into decisions before commitments are made. I am thorough, direct, and most productive when I can go deep on a hard problem and get it right.