Case study · Web · Education & personal brand
Chloe Bates website
A personal brand and education resource site for a qualified Primary teacher — inclusive practice, SEND, and neurodiversity. Nuxt 3, a structured resource hub, a real blog, and a UI that reads warm and human without sacrificing a professional bar.
01 · Overview
Project overview
I designed and developed this site for a qualified Primary School Teacher whose work sits at the intersection of mainstream teaching, SEND support, and neurodiversity awareness. The brief wasn’t “make a nice portfolio” — it was to give her a credible home online that could also carry real value: structured guidance people can return to, not just a bio and a contact form.
The result pairs a professional personal brand with a resource hub — areas such as AuDHD, teaching strategies, emotional regulation, and SEND — so the same site serves positioning and usefulness. Visually, it needed to feel warm and approachable while staying clean, modern, and readable on phones (where most of this traffic actually happens).
Under the hood it’s Nuxt 3 with the same priorities I bring to other content-led builds: sensible information architecture, patterns that scale when new posts land, and metadata that matches what each page is actually doing.
02 · Focus
What I focused on
- Clear positioning and messagingWho this is for, what she stands for, and how the resource areas fit together — so visitors don’t have to guess why the site exists.
- Trust through design and contentLayout, tone, and structure that signal competence and care — important in education and SEND spaces where shallow marketing reads wrong immediately.
- Scalable content structureRoutes and sections built to grow — blog posts and resources over time without turning every addition into a one-off layout problem.
03 · Design
Design & brand
The brand system centres on orange and pink — energetic without feeling childish, and distinct from the cold “institutional” palette you often see around education sites. Typography and spacing are tuned for long reading sessions and quick scanning: clear hierarchy, no noisy gradients fighting the copy.
The goal was a site that feels human first: someone scrolling at 10pm after a school day should still find it calm and legible. That’s a different problem than a law firm or a trades site — but the discipline is the same: respect the reader, don’t decorate over the message.
04 · Content
Resource hub & blog
Content is organised into a structured hub — themes like AuDHD, SEND, teaching tips, and neurodiversity — so related material sits in context instead of disappearing into a flat list. That structure also supports internal linking: when a new post goes live, it has obvious places to connect without feeling forced.
The blog is there for ongoing publishing and long-term SEO — not as an empty “news” column. Routes and page framing are set up so titles, intros, and headings can do their job for both readers and search without the layout breaking when the archive grows.
05 · Build
Technical build
- Nuxt 3 / Vue 3 — file-based routing and composable UI that stays maintainable as pages multiply.
- LESS — shared variables and scoped styles so the orange/pink system stays consistent across components.
- Strong UX hierarchy — predictable section rhythm and navigation that reduce dead ends.
- Fully responsive — layout and type tested across breakpoints, not just scaled down.
- SEO-ready structure — semantic landmarks, sensible headings, and page-level thinking for titles and descriptions.
06 · Result
Outcome
The site is live as a credible base for her brand and a foundation for content-led growth — resources and blog posts can stack on top of the same architecture instead of forcing a redesign every six months.
I’m not attaching traffic screenshots or ranking claims; those fluctuate and depend on publishing rhythm and niche competition. What this project delivers is structure, presentation, and a build that matches the brief — which is the honest read.
07 · Stack
Tech stack
Core tools for this build — aligned with how I ship other Nuxt/Vue frontends.
Technologies & practice areas
- Nuxt 3
- Vue 3
- LESS
- Blog & content routes
- Responsive frontend
Also involved