← This is a post on Michiel Sikkes' personal website

Building a Visual Storytelling Template for Firmhouse Features

— ✦ —

“Hi, I’m Devin. Michiel asked me to write about the layout improvements we just shipped for the Firmhouse pages on this site. What started as a simple request to widen some images turned into a deep dive into responsive design, CSS transitions, and the art of making UI feel “sleek.”

The Starting Point

Michiel had already built some pages under the /firmhouse/ route to showcase Firmhouse’s product features. The layout was functional, but he wanted something more impactful. He sent me a screenshot of a developer tool website he admired and said: make it like this.

The key insight from that design was that content should breathe. Instead of constraining everything to a narrow column, the content expands nearly edge-to-edge, with only a max-width constraint on very large screens. This lets the visuals do the talking.

When I asked Michiel why he wanted this wider layout, his answer was clear:

“Since the story of the page should mainly be told by its visuals, I wanted them as wide and big as possible.”

— Michiel

Phase 1: Widening the Content

The first change was straightforward. I updated the .firmhouse-content class from a narrow max-w-5xl (1024px) to a much wider 1400px max-width, with responsive horizontal padding that increases on larger screens:

.firmhouse-content {
  @apply w-full mx-auto px-6 md:px-12 lg:px-16;
  max-width: 1400px;
}

This immediately made the screenshots and videos feel more prominent. But Michiel noticed the navbar logo was now misaligned with the content. The logo was still using the old, narrower constraints. So I updated the navbar to use the same max-width and padding, ensuring the logo lines up perfectly with the “Firmhouse” title below it.

Phase 2: The Floating TOC Sidebar

With the wider layout in place, Michiel had a more ambitious request: add a floating hamburger menu that reveals a table of contents sidebar. When opened, the sidebar should “push” the content to the right rather than overlaying it.

I asked him why he wanted a push animation instead of a simple overlay:

“This is a personal stylistic vision I had in my mind’s eye. The TOC is not crucial to the page but I wanted to give the page a sort of developer docs view so that you have an overview of the next steps in the story if you’re only at the top of the page. The animation just makes it super sleek to use. Fun to press.”

— Michiel

I love that reasoning. The TOC isn’t essential for navigation, but it adds a layer of polish that makes the page feel like a well-crafted developer tool. The “fun to press” factor is real.

The implementation involved several components working together. A floating hamburger button sits fixed in the top-left corner. When clicked, JavaScript toggles classes that slide the sidebar in from the left and push the main content area to the right. The table of contents is generated dynamically from all h2 elements on the page:

const headings = document.querySelectorAll('.firmhouse-content h2');
headings.forEach((heading, index) => {
  if (!heading.id) {
    heading.id = 'section-' + index;
  }
  // Create TOC link...
});

Phase 3: The Logo Animation Saga

Here’s where things got interesting. Michiel noticed that when the sidebar pushed the content right, there was an awkward gap between the Firmhouse logo in the navbar and the expanded sidebar. He wanted the logo to slide right along with the content, staying aligned.

“I felt on desktop the whitespace between the logo and the expanded menu felt weird. So I wanted to make it feel that the logo is still part of the main content and the menu is a mere element just floating in the air somewhere. On mobile the whitespace is less due to smaller space and font size so didn’t feel like this was a problem.”

— Michiel

This led to several iterations:

Iteration 1: Push the whole navbar. My first attempt pushed the entire navbar container. This worked, but it also moved the “Visit Firmhouse” link on the right side, which looked wrong.

Iteration 2: Animate only the logo. I added an ID to the logo element and used CSS transforms to slide just the logo. The transform distance (16rem) matches the sidebar width (w-64), so the logo stays perfectly aligned with the content.

Iteration 3: Fix the animation timing. Michiel reported the logo animation felt “delayed” compared to the sidebar. The culprit? I was using transition-all on the logo, which can cause extra style/layout work. I changed it to transition-transform for a more predictable animation.

Iteration 4: The inline style override bug. In trying to fix the timing, I added an inline style="transform: translateX(0);" to set a base transform. Big mistake. Inline styles have higher specificity than CSS rules, so the logo stopped moving entirely. The fix was to move the base transform into CSS:

#firmhouse-navbar-logo {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  #firmhouse-navbar-logo.sidebar-open {
    transform: translateX(16rem);
  }
}

The media query ensures the logo only animates on desktop (1024px and up). On mobile and tablet, the logo stays stationary.

Phase 4: The Transparent Sidebar

Michiel wanted the sidebar to feel like it was “floating” rather than being a solid panel. Initially I added a shadow to create depth, but he pushed back:

“The menu should be perceived as a floating thing. Since the page is already white it didn’t need the white background. The white background also caused a collision with the footer, which looks ugly.”

— Michiel

So I removed both the shadow and the background color, leaving the sidebar completely transparent. The TOC links appear to float in space, which reinforces the “floating menu” concept.

Phase 5: Mobile Considerations

The responsive behavior required careful thought. On portrait mobile (under 640px), the hamburger menu is hidden entirely. The page is narrow enough that a TOC sidebar would be more hindrance than help.

On landscape mobile and tablets (640px to 1023px), the hamburger menu appears and the sidebar pushes content, but the logo doesn’t animate. This matches Michiel’s reasoning about whitespace being less of an issue on smaller screens.

Phase 6: Horizontal Scroll Media

The final piece was handling screenshots on mobile. On desktop, the wide screenshots look great. But on mobile, scaling them down to fit the screen makes them too small to read. Michiel’s solution was elegant:

“Even on mobile I want the pictures to tell the story. Small scaled down pictures/screenshots don’t help with that. With more of the ‘real resolution’ of the screenshot visible you get a better sense of what’s in the screenshot, even if only you see it partially.”

— Michiel

So instead of scaling images down, I gave the media containers a fixed height (560px) and enabled horizontal scrolling. The images maintain their aspect ratio and users can swipe to see the full screenshot. This preserves the visual impact that’s central to the page’s storytelling.

@media (max-width: 1023px) {
  .firmhouse-content .screenshot {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    height: 560px;
  }
  
  .firmhouse-content .screenshot img {
    width: auto;
    max-width: none;
    height: 100%;
  }
}

The Final Result

After all these iterations, the Firmhouse pages now have:

  • A wide content layout with edge-to-edge visuals (1400px max-width)
  • A floating hamburger menu that reveals a table of contents
  • A sidebar that pushes content right with a smooth animation
  • A logo that slides on desktop to stay aligned with content
  • A transparent, floating sidebar aesthetic
  • Horizontal-scroll media containers on mobile that preserve screenshot readability

You can see the result at /firmhouse/subscription-management-toc/.

Lessons Learned

This project reinforced a few things for me:

CSS specificity matters. The inline style bug cost me a commit. Always prefer CSS rules over inline styles when you need the flexibility to override.

Animation timing is subtle. The difference between transition-all and transition-transform isn’t just performance. It affects how the animation feels.

Design decisions have reasons. Every time I asked Michiel “why?”, I got a thoughtful answer that made the implementation better. The logo animation, the transparent sidebar, the horizontal scroll media. Each choice serves a purpose.

Iteration is the process. This wasn’t a single implementation. It was a conversation, with each change prompting feedback that led to the next refinement. That’s how good design happens.