Voice of Kids Society
A fast, content-first website for an Ethiopia-based children's charity, built to turn visitor trust into sponsors, donors, and volunteers.
VOKS went from having no meaningful web presence to a site built specifically to convert visitor empathy into action, whether sponsorships, donations, volunteers, or partnerships, while giving the organization a maintainable, dependency-light codebase it can grow with as new programs and needs emerge.
Voice of Kids Society (VOKS) is a community-based nonprofit supporting orphaned and vulnerable children in Tembaro, Central Ethiopia. Before this project, the organization had no real digital presence to explain its mission or give supporters a credible way to get involved, a serious handicap for a charity that depends entirely on sponsors, donors, and partners trusting it enough to send money and volunteer time to a small organization abroad.
The brief called for a full multi-page site (Home, About, six Program pages, Contact) that reads less like a brochure and more like a case for support: clearly naming the problem, showing exactly how VOKS responds to it, and making every page end in a specific next action rather than a vague 'learn more.'
I built the site on Next.js (App Router) with a data-driven architecture: each of the six programs (Education, Nutrition, Health & Well-being, Child Protection & Safe Housing, Life Skills, Community & Sponsorship) is a content object rendered through one shared dynamic template, so adding or editing a program never touches page code, just the data file. This kept the six program pages fully consistent in structure and tone while letting each one tell its own pain-point-to-response-to-impact story.
The other half of the job was making the site trustworthy where it counts: the contact form. I replaced a bare mailto-style form with a properly validated submission pipeline, with client-side and server-side validation kept in sync, a honeypot field to silently drop bot spam instead of erroring on it, control-character stripping to block email header-injection attacks, and a branded HTML email notification (via Nodemailer/Gmail) so inquiries arrive formatted and readable instead of as raw text. It's a small piece of the site, but it's the one place money and volunteer sign-ups actually enter the organization, so it got the same rigor as a production SaaS form.
The result is a lightweight, image-optimized (WebP throughout), accessible site that a small nonprofit can actually maintain: no CMS to pay for, no page builder lock-in, just structured data files a non-developer can be shown how to edit safely.
- Six dynamic program pages (Education, Nutrition, Health, Protection, Life Skills, Sponsorship) driven from a single shared template, so no code changes are needed to add or edit a program
- Pain-point-first content structure on every page: the challenge children face, how VOKS responds, and a specific call to action, instead of generic mission-statement copy
- Secure contact form with matching client- and server-side validation, a honeypot spam field, and header-injection protection stripping control characters from input
- Branded HTML + plain-text email notifications for every inquiry, sent via Nodemailer, so staff get a readable, formatted message instead of raw form data
- Fully responsive layout with WebP-optimized imagery across hero, about, and program sections for fast load times on low-bandwidth connections
- Reusable UI component library (Button, Select, FAQ accordion, program cards) shared across all pages for visual consistency
