The brief
What needed solving
An education provider lives or dies by search. Prospective students look for a course, not for an institute by name, so every course page has to be individually discoverable, load fast on a mid-range phone over mobile data, and make enrolment obvious once someone lands. A client-rendered brochure site fails all three.
Approach
How it was built
01Rendering chosen per page, not per project
Marketing and course pages are statically rendered so search engines and first-time visitors get complete HTML immediately, with no client round-trip before content appears. Interactive surfaces stay client-side. The routing structure mirrors how people search, giving each course its own indexable, linkable URL.
02SEO treated as architecture
Semantic heading structure, per-page metadata and Open Graph tags, descriptive alt text and a clean internal linking graph were built into the page templates from the start — not retrofitted as tags after launch, which is where most sites lose their ranking headroom.
03Motion that carries meaning
Framer Motion is used for orientation — section entrances, state transitions, hierarchy on scroll — with reduced-motion preferences respected. Animation supports the reading order rather than competing with it, and never delays content that is already available.
Scope
What shipped
- Statically rendered, individually indexable course pages
- Per-page metadata and Open Graph tags for search and social
- Full type safety across the codebase with TypeScript
- Motion-supported navigation with reduced-motion support
- Team and credibility surfaces built for conversion
- Responsive layouts tuned for mobile-data conditions
Engineering notes
The hard parts
Challenge
Rich motion and heavy imagery pull directly against Core Web Vitals, which is the exact metric an SEO-first site cannot afford to lose.
Solution
Images are served responsively with explicit dimensions to eliminate layout shift, and animation is restricted to compositor-friendly transform and opacity properties so nothing on the critical path is blocked by decoration.
Challenge
A course catalogue grows continuously, and hand-maintained pages stop scaling almost immediately.
Solution
Course pages are generated from a single content source through shared templates, so publishing a new course yields a fully structured, metadata-complete, indexable page without touching layout code.
Outcome
Where it landed
- 01Live at rivendelltech.co with a static-first, search-ready architecture
- 02Every course independently discoverable rather than buried behind client-side rendering
- 03A content model that scales to new courses without new layout work