Agilaire Customer Portal
A custom portal to distribute our software packages to customers while integrating with our CRM.
Overview
This is the site you’re on right now. I designed and built it from scratch as both a practical portfolio and an exercise in restraint — building only what’s needed, designed with intention.
Design System
The visual language draws from the Bauhaus movement. Key decisions:
- Color palette: Red, yellow, deep blue, black — primary colors at full saturation
- Typography: Jost, a geometric sans-serif in the Futura tradition, at weights 400–900
- Grid: A simple 12-column CSS Grid system with no framework overhead
- Borders: Thick, deliberate borders (2–8px) that frame content rather than decoration
- Shapes: Geometric decorations implemented purely in CSS via pseudo-elements
Technical Architecture
The site is a static site generated by Eleventy 3. Content is authored in Markdown. Templates use Nunjucks. Styling is plain CSS with a design token layer.
Collections
Four Eleventy collections power the content model:
posts— blog posts sorted by dateprojects— portfolio pieces sorted by manual ordertagList— deduplicated tag list for search filteringfeaturedProjects— subset of projects marked as featured
Search
Search is implemented without any external library. At build time, Eleventy outputs a /search.json file — a JSON array of post metadata. On the client, a small JavaScript file fetches this index and filters it in-memory on each keystroke.
Performance
- Zero JavaScript framework
- CSS
@importwith no build step required in development - Images processed by
@11ty/eleventy-imginto WebP + JPEG at multiple widths - HTML minified in production builds
What I Learned
Simplicity is hard. Every design decision was an opportunity to over-engineer — to add a dependency, a feature, a fallback. The discipline was saying no. The result is a site that loads in under a second and will need minimal maintenance.
Photos
