Description

The Mozambique Capacity Building (MCB) website is a digital platform developed for a non-profit organization in Mozambique dedicated to community development and capacity strengthening. The website was built to present the organization's mission, projects, strategic pillars, partners, and team — offering a modern, responsive, and bilingual experience for both local and international visitors. It includes a cloud-based photo gallery, animated UI sections, and a secure contact system with email delivery.

My Role and Contributions

• Full Website Development: Designed and developed the complete landing page with multiple sections (Hero, About, Strategic Pillars, Organizational Structure, Projects, Gallery, Testimonials, Partners, Services, and Contact), ensuring a responsive and visually engaging experience across all devices. 

• Email Integration: Implemented a secure contact form system using Nodemailer with SMTP configuration, honeypot spam protection, input sanitization, and rate limiting to prevent abuse. 

• Bilingual System (PT/EN): Built a custom internationalization (i18n) system with a React context provider that allows visitors to switch between Portuguese and English, making the platform accessible to both local and international audiences. 

• Cloud-Based Gallery: Developed a dynamic photo gallery integrated with Cloudinary, featuring category filtering, lightbox navigation, lazy loading, and automatic image metadata parsing from filenames. 

• SEO Optimization: Configured metadata, Open Graph tags, sitemap generation, and robots.txt to maximize the organization's visibility on search engines. 

Key Features

• Bilingual Website (PT/EN): Custom language switcher allowing visitors to navigate the entire website in Portuguese or English. 

• Contact Form with Email Delivery: Secure contact system with automated email notifications via SMTP, honeypot spam protection, and IP-based rate limiting. 

• Dynamic Photo Gallery: Cloudinary-powered gallery with category filtering, image lightbox, pagination, and optimized image delivery with blur placeholders. 

• Smooth Animations: Entrance animations and micro-interactions powered by Framer Motion and GSAP ScrollTrigger for parallax and reveal effects. 

• Responsive Design: Mobile-first, fully responsive interface optimized for desktop, tablet, and mobile devices. 

• SEO Ready: Sitemap generation, Open Graph metadata, structured keywords, and robots.txt configuration for improved search engine ranking. 

Technology Stack

• Frontend Framework: Next.js 15 (App Router) with React 18 and TypeScript for a modern, type-safe, and performant application. 

• Styling: Tailwind CSS for utility-first responsive styling with custom design tokens (earth-tone color palette). 

• Animations: Framer Motion for component animations and GSAP with ScrollTrigger for scroll-based parallax and reveal effects. 

• Image Management: Cloudinary for cloud-based image storage, optimization, and delivery with automatic format and quality adjustments. 

• Email Services: Nodemailer with SMTP integration for handling contact form submissions, with LRU cache-based rate limiting. 

• Internationalization: Custom React Context-based i18n system supporting Portuguese and English with dynamic language switching.