Skip to content

Change how your company teaches and practices cyber security

logo-black-secure-practice

Overview

Features

Extensive design with many content blocks, Dark/light mode, Squiggles, Pricing tiers and feature matrix, Team pages, Blog, Manifesto's, FAQ's, Guides, Customer stories, Careers

Technology used

AlpineJS, Laravel, Livewire, Peak, Statamic, Tailwind CSS, Canvas
Secure Practice homepage screenshot.

Secure Practice helps companies improve in the field of cybersecurity. They do this with the help of training and their own software. The company is partly funded by the European Union.

Dave Smyth took care of the design and approached me to handle the technical implementation. Secure Practice is a large website and has a light and dark mode. The page builder offers more than 25 dynamic content blocks, each of which can be provided with their own squiggle animations. These are colorful lines that draw themselves as the user scrolls past.

In the following screenshot, you can see how content editors can manage this in Statamic.

Live preview content editing.
Editing squiggles in Live Preview.

Below you see another content block. So-called "Squiggle Cards". Cards with text provided with an animated and colorful line.

Live preview content editing.
Squiggle cards bewerken via Live Preview.

On the front end of the website, users can filter blog articles. With the help of Laravel Livewire, this works quickly and without the browser needing to refresh the page.

Blog filters.
Filtering blog articles.

The different pricing models of Secure Practice, as they are visible to visitors. On the back end, content editors can create different tiers and link them to features.

Pricing tiers screenshot.
Pricing tiers.

Those features appear automatically in a matrix.

Feature matrix screenshot.
Feature matrix.

The creative agency that gives a sh*t

  • Statamic
  • Peak
  • Plyr
  • Lottie
  • AlpineJS
  • Tailwind CSS
  • Barba.js