OCJ.
All projects

Business · Client build · In development

Teaching Portfolio

A quiet, editorial portfolio site for Jennifer Amaka, a specialist who works one to one with children and young people with autism, Down syndrome, and other developmental delays, building a plan around each child rather than a fixed program.

HTML5 Custom CSS Vanilla JavaScript No framework, no backend
Teaching Portfolio homepage screenshot

The challenge

Parents landing on this page are often anxious and looking for reassurance, not a sales pitch. The site had to feel calm, credible, and human first, and only then get into the specifics of the work, without ever feeling clinical or cold.

The approach

Structured the site around About, Approach, Work, Evidence, and Contact, so a visitor can move from "who is this person" to "how do they work" to "what's the proof" at their own pace, with a gated Private Portfolio area kept separate from the public case history.

Design

A warm, editorial serif headline over a soft neutral palette (cream in light mode, near-black in dark mode), built to feel like a considered personal practice rather than a template, with a light/dark toggle carried across every page.

Development

Plain HTML with a hand-built CSS system (separate tokens, base, components, and premium-polish stylesheets) plus hand-written JavaScript, structured across About, Approach, a Work section with dropdown navigation, an Evidence section for credibility markers, and Contact, all responsive from phone through iPad-sized tablets to desktop.

What I solved

  • A tone that reads as reassuring and credible on the very first screen, not just further down the page.
  • A dropdown-based Work and Evidence navigation structure that organizes case history without overwhelming a first-time visitor.
  • A gated Private Portfolio link, separate from the public-facing pages, for sensitive case material.
  • A light/dark theme toggle and fully responsive layout, tested down to tablet breakpoints.

Where it stands

It's live at justixxprime.github.io/teaching-portfolio, and still being built out page by page, with real photography and evidence content being added as it becomes available. The structure and design system are locked in; what's left is mostly filling it with the client's real material.

Everything in the box

Over 30 pages, structured to build trust in stages rather than everything at once:

Core pages

  • About, Approach, Specialisms, Qualifications, Experience, and Services (with dedicated pages for Individual Support, Academic Support, and Parent Collaboration)
  • Results, Testimonials, FAQ, and Contact

Case studies & evidence

  • A case studies index plus individual write-ups on communication, independence, and reading confidence
  • An insights section and five articles: down syndrome at home, the first consultation, routines for developmental delay, sensory processing, working with schools, and what individual support actually looks like

Media & credibility

  • A media page, a video library, and a public portfolio page
  • A gated Private Portfolio area, separate from the public case history, plus a consent page for sensitive material

The essentials

  • Privacy policy, a CV page, and a custom 404
  • Light/dark theme toggle carried consistently across every page

Under the hood

  • The contact and enquiry form runs on Web3Forms, same lightweight, no-backend pattern as my other static builds, so a message from a worried parent lands directly in an inbox with nothing to host or maintain.
  • A genuinely separate gated area for the Private Portfolio, kept structurally apart from the public case-study pages rather than just hidden behind a link, since sensitive case material for real children needs a real boundary, not just an unlisted URL.

Screens

Teaching Portfolio desktop screenshot, light mode Teaching Portfolio tablet screenshot, dark mode Teaching Portfolio mobile screenshot, light mode Teaching Portfolio mobile screenshot, dark mode