Mackinations

Overview

Built to Do One Thing Well

Mackinations is the web presence for a solo cybersecurity and AI consultancy. The brief was simple in scope but demanding in execution: a fast, polished marketing site that converts — with no CMS, no heavy framework overhead, and content that adapts to who's reading it.

It's built on Nuxt 4 with Vue 3, styled with Tailwind v4 (no config file), animated with GSAP ScrollTrigger, and deployed to Cloudflare Pages with a FastAPI backend on Fly.io handling lead capture. The most interesting parts aren't the stack — they're the patterns.

Feature

Dual-Audience Content Rendering

You may have noticed the Business / Technical toggle in the top-right corner. This isn't cosmetic — it bifurcates nearly all content on the site. Service descriptions, skill displays, CTA copy, and even section headings have distinct variants per audience mode.

The preference persists to localStorage so returning visitors see their mode immediately. Every page that varies by mode reads from useAudienceStore() — a Pinia store that exposes isBusiness and isTechnical computed refs.

<div class="grid">
  <div class="[grid-area:1/1]"><AudienceNudge direction="up" /></div>
  <div class="[grid-area:1/1]"><AudienceNudge direction="down" /></div>
</div>

The SSR hydration problem — where the server renders "business" mode but the client immediately reads a different preference from localStorage — was solved by deferring the localStorage read to onMounted in the root layout. The store initializes with the default on both server and client, Vue reconciles the identical DOMs, then the saved preference is applied as a normal reactive update.

Feature

Availability as a State Machine

Whether I'm actively taking new clients, at capacity, on a break, or not accepting inquiries changes not just the contact form — it changes the entire site's tone. Every CTA, every button label, every header badge, every subheading is driven by a single field in a TypeScript config file.

// Change this one line — the whole site updates
export const config = {
  status: 'open' // 'open' | 'setup' | 'waitlist' | 'hiatus' | 'closed'
}

Each status maps to a complete set of copy: pill text, pill color, contact heading, CTA heading, button label, and waitlist form text. The contact page conditionally renders the full form, a waitlist sign-up, or a locked state based on the computed showContactForm and showNotifyForm flags — no logic scattered across components.

Design System

Tokens Over Config

Tailwind v4 eliminates the config file — all theme customization lives in CSS. The entire color palette is defined as CSS custom properties inside a single @theme {} block, which Tailwind exposes as utility classes automatically.

Animation

GSAP ScrollTrigger Abstraction

GSAP and ScrollTrigger are registered client-side in a Nuxt plugin, which provides $gsap and $ScrollTrigger via useNuxtApp(). A shared composable wraps the three patterns used across the site.

Each page-level animation composable (for portfolio deep-dives) follows the same pattern: setup() called from onMounted, cleanup() from onUnmounted, with useNuxtApp() called inside setup() (not at the composable root) to avoid SSR errors.

Detail

The Portrait Scene System

The about page portrait isn't a single image — it's a layered composition. A background-removed PNG of the portrait sits above three absolutely-positioned media layers (an office photo, a Dalhousie campus video, and a Toronto skyline video), all cross-fading via opacity transitions over 2 seconds.

The clever part: instead of swapping the portrait image, the portrait's CSS filter property changes to match the color temperature of each background scene. Work mode cools and desaturates slightly; education mode warms and lifts brightness; Toronto mode adds a golden sepia cast. The portrait always reads as if it was photographed in that environment.

Architecture

Four Decisions Worth Explaining