Nonprofit · Personal build
Amani Community Trust
A nonprofit website concept for Amani Community Trust, covering its mission, programs, impact, and donation flow for community work across East Africa.
The challenge
Nonprofit sites need to build trust quickly: mission, programs, and impact have to be easy to find. Meanwhile, a mobile menu bug meant that on real devices the navigation was rendering squished and mostly empty, undermining that trust on the exact device most visitors would use.
The approach
Diagnosed the mobile menu bug down to its actual CSS cause rather than patching the symptom, then rebuilt the mobile navigation as a right-side sliding drawer with a dismissible overlay. What started as an eight page site has since grown into a 22 page, fully animated, installable web app, built out in stages rather than one big rewrite.
Design
A warm, mission-driven layout across all 22 pages, with dark mode and a cinematic homepage hero: four photos slowly crossfading with a subtle zoom and, on desktop, a gentle parallax shift as you move the mouse.
Development
Built with HTML, Tailwind CSS, and JavaScript, with every form on the site (contact, volunteer sign-up, donate, newsletter) wired to Web3Forms for real email delivery, no backend server needed.
Grown into a real 22-page app
This one kept growing well past the original brief. It's now installable like a native app, with a 4-step donation flow, a volunteer portal, a field journal and news section with real calculated reading times, and a partners page. A few of the fixes along the way mattered more than any new feature:
- Removed the site's dependency on an external styling CDN by compiling its roughly 270 actually-used rules into a local file, closing off a whole class of "the page loses its layout if that connection is slow" bugs.
- Fixed 12 form fields that had visible labels but weren't linked for screen readers, and 135 icon-only buttons with no accessible name.
- Cut total image weight from 50MB to under 5MB by converting everything to WebP, same visual quality, over 90% smaller.
- Added a full mock payment step to the donation flow, card with a live-updating card preview, mobile money across three providers, and bank transfer with a generated reference, ending in a printable receipt with a transaction ID, clearly labeled as a demo with no real payment processed.
- Added full SEO essentials (structured data, sitemap, Open Graph tags, a real social share image) and native cross-page transitions.
What I solved
- Root-caused a mobile menu rendering bug to a CSS backdrop-filter containing-block issue, not just patched the symptom.
- Rebuilt the mobile menu as a right-side sliding drawer with an overlay, a more predictable pattern than the previous full-screen overlay.
- Grew the site from 8 to 22 pages without a rewrite, adding donations, volunteering, a field journal, and impact stories as their own dedicated spaces.
Result
It's live at justixxprime.github.io/amani-community-trust. Honestly the part I'm proudest of still isn't a feature, it's that when things broke (the menu, an invisible-text bug in dark mode, a scroll animation pointed at nothing) I went and found the actual cause each time instead of papering over it.
Everything in the box
22 pages in total, organized under Home, About, Programs, Impact, News, and Contact, plus two dropdown menus:
Navigation & structure
- "Get Involved" dropdown (Get Involved, Volunteer Portal) and "Explore" dropdown (Impact Stories, Partners, Field Journal, FAQ)
- Mobile menu with tap-to-expand accordion sections instead of dropdowns, and matching active-link highlighting across nav, mobile menu, and footer
Design & feel
- Fraunces for headings, Karla for body text, on a warm cream background with a purple/gold/terracotta color system
- A cinematic homepage hero: 4 photos slowly crossfading with subtle zoom/pan and film-grain texture, with the extra motion turned off on mobile to save battery
- Dark mode, applied consistently across every page
Donation & forms
- A real 4-step donate flow with progress tracking, rebuilt from scratch using proper button elements after an earlier version wasn't clickable
- Working forms site-wide via Web3Forms, a volunteer sign-up, and a newsletter box in the footer
Installable & responsive
- Installable as a PWA, with single-column mobile layouts, 2-column tablet grids, and a full desktop nav from 1280px up
- Respects reduced-motion accessibility settings by turning off decorative animation automatically
SEO & accessibility
- Open Graph and Twitter Card tags, a custom social-share preview image, canonical URLs, sitemap.xml, robots.txt, and Organization structured data
- 12 form labels and 135 icon-only buttons fixed for screen readers, plus a `<main>` landmark added to every page
Performance
- Total image weight cut from 50MB to under 5MB by resizing and converting everything to WebP, same visual quality
Under the hood
- Every form on the site, real and working, through Web3Forms: the donate flow, volunteer sign-up, newsletter box, and contact form all land as real submissions with no backend to host, spread consistently across all 22 pages rather than just the contact page.
- A real root-cause fix, not a patch: the site's dependency on an external CDN was removed entirely by compiling its full styling system, roughly 270 rules, into a single local file, closing off a whole class of load-order bugs that only showed up intermittently depending on network speed.
Screens
