OffSec Rebrand

I led the website side of Offensive Security becoming OffSec: a Figma design system, and a rebuild of offsec.com on Astro, Svelte, and Tailwind that replaced a decade-old PHP stack.

2023 · Design · Dev · ~2 min

  • Astro
  • Svelte
  • Tailwind CSS
  • GraphQL
  • NGINX
  • Cloudflare Workers
  • GitLab
  • Figma
The OffSec logo over a blurred view of the offsec.com homepage.

In 2022 Offensive Security became OffSec, the company behind Kali Linux and the OSCP. I led the rebrand of offsec.com: the design system in Figma, the new front end, and the content pipeline behind it.

  • Timeline: April 2022 to March 2023
  • Scale: 40k daily visitors and 1M+ unique monthly page views
  • Stack: Astro, Svelte, Tailwind, a headless CMS over GraphQL, NGINX, Cloudflare Workers, GitLab CI

01

Off a decade-old PHP stack

The old site ran on a PHP stack more than ten years old. With that much traffic running through it, the new brand needed a platform that could keep up.

I moved the front end to Astro, with Svelte for the interactive pieces and Tailwind for styling. Content moved to a headless CMS on NGINX, served to Astro over GraphQL. The site now runs at the edge on Cloudflare Workers.

  1. Headless CMSContent on NGINX, queried over GraphQL
  2. Astro + SvelteTailwind UI built from the design system
  3. GitLab CILinting, conventional commits, staged checks
  4. Cloudflare Workersoffsec.com served from the edge
How a page gets from the CMS to 40k visitors a day.

02

One system for brand and engineering

I designed the Figma prototypes and component libraries every team worked from. The design system was the contract between brand and implementation, so both sides shipped from the same components.

Figma concept for the Climb course-financing page, with the new type, color, and illustration style at full-page scale

A full-page concept in Figma for Climb, the course-financing partner page.

03

OffSec.com Today

OffSec.com still runs on Astro. These are the live pages today: the homepage, the Learn mega-menu, the course catalog, and pricing.

offsec.com homepage hero reading “Cybersecurity skills that matter” above a row of customer logos

The Learn mega-menu open, grouping every OffSec certification by discipline with its course icon

The Learn mega-menu groups every certification by discipline, each with its own course icon.

Course catalog grid with illustrated cards for OSAI, OSCP, OSEP, OSWA, OSWE, and OSED

Pricing page with Learn One, Course + Cert Bundle, and CyberCore plan cards

04

Shipping and measuring

GitLab CI/CD handled deploys, with linting, conventional commits, and staged checks on every change. That let brand and content updates ship without a fragile release process.

I also managed the measurement side: Google Tag Manager, Google Analytics, and Plausible, with conversion tracking, so the team could see what the new site was actually doing.

05

Also at OffSec, I built the Kali Linux 10 Year competition, a public event app that had to hold up under launch traffic on a $5 server.

Later, I spent about two years building the OffSec checkout in SvelteKit, the flow that sells the courses.

Status: available for hire

Hiring a full-stack engineer?

Twenty years of shipping for the web, from first sketch to last deploy.

Email me View CV