Skip to main content
  • Website redesign
  • Motion design
  • Static export

CybrForge

Sector
Cybersecurity
Delivered as
  • Website
Year
2025
Languages
FR / EN

“Your Security • Our Priority”

(The project)

A full redesign of an independent cybersecurity firm’s website: a dark, forge-inspired single page with smooth scrolling, scroll-driven motion and a bilingual content layer rebuilt from the original site.

(Context)

A credibility-first site for a security firm.

CybrForge presents an independent Moroccan cybersecurity consultancy: its vision and mission, leadership team, five service lines, certifications, client references and publications, on one long-form page that ends with a contact form.

We rebuilt the original site from scratch as a statically exported Next.js application with a dark forge aesthetic, and restructured its French and English content into a typed content layer.

(Key figures)

animated sections
10
certification badges
13
bilingual content
FR / EN
static export
100%

The decisions that shaped it

  1. Statically exported

    The production build emits a fully static bundle that deploys to any host, with asset paths that stay portable across sub-path deployments.

    Zero-server hosting

  2. Content as data

    Navigation, services, team, certifications and publications live in a typed content layer instead of hard-coded markup, so translation and edits stay simple.

    Single source of truth

  3. Motion control per section

    A central configuration switches scroll effects on or off section by section, which made it possible to isolate and remove scroll jank.

    Performance control

  4. Scroll-driven motion

    Lenis smooth scrolling, GSAP reveals, animated counters and magnetic buttons form one coherent interaction layer.

    Motion system

(How it works)

Page composition

  1. Content layer

    Every string is keyed by section and language, and a language provider selects French or English at runtime.

  2. Section components

    Each section reads the content layer and shared interface primitives: magnetic buttons, reveals and counters.

  3. Static export

    The build prerenders everything to static files, with no server runtime needed in production.

Captures of the delivered build, grouped by product. Select one to see it at full size.

Technology

Framework
  • Next.js 14
  • App Router
  • Static export
Interface
  • React 18
  • TypeScript
  • Tailwind CSS 3
Motion
  • GSAP
  • Framer Motion
  • Lenis
Content
  • Typed content layer
  • FR / EN provider

(Next project)

LIPACK

Industry, 2025

Your project could be the next system we build.