Latitude Technolabs Website
Agency site on headless Strapi with a typed component layer the content team owns.
Role
Next.js Developer → Senior Next.js / React Developer
Engagement
Full-time at Latitude Technolabs
Client
Latitude Technolabs
Period
2021 — 2022
The problem
The company's own site needed to look like the work it was selling, load fast on mobile, and be editable by a marketing team without filing engineering tickets for every copy change.
My responsibility
Built the frontend, defined the Strapi content model, and created the block-to-component mapping that lets editors compose pages safely.
Surfaces shipped
Marketing site
Services, work, careers and blog, authored in Strapi and rendered with Next.js SSG/ISR.
Content model
Structured content types and a block-based page builder mapped to typed React components.
Architecture
How it was structured, and the reasoning behind each boundary.
- 01
Block-based page builder
Editors assemble pages from a constrained set of blocks; each block maps to a typed React component with runtime validation, so an impossible layout can't be published.
- 02
SSG with ISR revalidation
Pages build statically and revalidate on publish, giving marketing speed and the site a static performance profile.
- 03
Motion with restraint
Scroll-triggered reveals and image parallax implemented with GPU transforms only, and disabled entirely under prefers-reduced-motion.
Key challenges
- 01
Editor freedom vs broken layouts
The block set was deliberately limited and every block validated its own props, which kept the design intact while still feeling flexible to editors.
- 02
Animated but fast
Scroll animation had to coexist with a strong Lighthouse score — animations were transform/opacity only, initialised once, and torn down properly.
Implementation
- 01
Content-model-first
Types were modelled with the marketing team before any page was built, so the CMS reflects how they actually think about the site.
- 02
Preview before publish
Draft preview routes let editors see the real rendered page against draft content.
Results
- 01Marketing publishes new pages and case studies without engineering involvement.
- 02Static-first rendering with fast mobile loads and clean SEO metadata.
- 03A content model reused as the starting point for later client sites.
Technologies
- Next.js
- React
- TypeScript
- Strapi
- GSAP
- Tailwind CSS
- Vercel
Technical highlights
- Constrained block builder with typed, validated components
- Strapi draft preview against production rendering
- Reduced-motion-aware GSAP scroll implementation
Building something similar? I’d like to hear about it.
Start a conversation