Building a Retro-Technical Footer

Footers are often an afterthought, but in a technical portfolio, they are a primary anchor for your brand. This post explores how we combined a "Blueprint" aesthetic with modern utilities.

The Design Philosophy

The goal was to move away from soft, rounded "SaaS" bubbles and toward a high-contrast, grid-based layout. By using dashed borders and monochromatic tones, we create a sense of structure.

Core Visual Elements

1. Grid Dividers: Using gap-px to create 1px lines.
2. Corner Squares: Using absolute positioning to anchor the corners.
3. Monospace Typography: For that "terminal" feel.

Technical Implementation

We used DaisyUI to handle the heavy lifting of theme management. This allows the footer to transition seamlessly between light and dark modes without writing custom media queries.

The Code Structure

Here is a snippet of how the responsive grid was handled to ensure borders don't disappear on mobile:

<div class="grid grid-cols-2 border-t border-l border-base-300 md:grid-cols-6">
  <div class="border-r border-b p-4">Item 1</div>
  <div class="border-r border-b p-4">Item 2</div>
</div>

Adding the Progress Bar

The progress bar is a simple calculation. We take the scroll position () and divide it by the total height minus the viewport height (): This gives us a percentage that we apply to the width of a div pinned to our sticky header.

Final Thoughts

A great developer site should feel like the tools you use every day: functional, structured, and fast. By treating your blog like documentation, you signal to visitors that you care about clarity and precision.