- 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
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
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
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
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
Content layer
Every string is keyed by section and language, and a language provider selects French or English at runtime.
Section components
Each section reads the content layer and shared interface primitives: magnetic buttons, reveals and counters.
Static export
The build prerenders everything to static files, with no server runtime needed in production.
Inside the project
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
