I'm always excited to take on new projects and collaborate with innovative minds.
https://krafton.my.id
A custom, CMS-managed website for a Dar es Salaam events, fabrication and branding agency: a single-page brand story, a filterable project portfolio with case pages, a team page and a spam-protected enquiry form, built around the company's real setup photography.
Client
Website
Blueprint Solutions Limited is a Tanzania-based creative agency that designs and builds event stages, exhibition booths, branded environments and vehicle branding. They needed a website that shows the quality of their builds and that their own staff can update without a developer.
I designed and built the whole site on Laravel: a custom theme with its own design system, a portfolio module for projects and case pages, and ten reusable page sections that staff edit through simple forms.
Highlights:
• Single-page homepage story: hero slideshow of real builds, about, selected work, services, process, why us, brand patterns and a call to action.
• Our Work: a filterable portfolio with a featured project and individual project pages (facts, overview, mosaic gallery with lightbox, previous/next navigation and related work).
• Our Team: members shown in the order the editor chooses, an organisation chart, and a "Join our team" CV call to action.
• Contact: a validated enquiry form with custom fields and captcha; enquiries are stored in the admin panel.
• Brand-driven design: exact colours taken from the logo vectors, a readable horizontal logo built from the official artwork, and motion inspired by the company's geometric patterns.
• Curated media: about 60 setup-focused photos selected from several sources, converted to WebP with responsive sizes and descriptive alt text.
The agency's online presence did not reflect the scale and quality of their work. Their photography was spread across PDFs, cloud folders and photo galleries, and mixed setup shots with crowd and portrait photos. They needed a premium website that puts the builds first, works well on mobile, and lets non-technical staff add projects, photos and team members on their own.
I started with an audit of the existing CMS installation and a review of the brand assets: logo, pattern sheets and company profile. Instead of editing the vendor theme, I built a custom theme layered on top of it and a separate portfolio module, so updates to the base system can't overwrite the work. Every homepage section is an editable block with form-based settings. A repeatable setup script configures pages, menus, media and settings on any server, keeps a backup of the previous state, and never overwrites changes staff have made in the admin panel.
• Custom Laravel theme: layouts, partials and a design system (colour, type, spacing and motion tokens) that every page inherits automatically.
• Portfolio module: projects and categories with admin screens, clean URLs (/our-work/project-name), SEO metadata, sitemap entries and draft/publish workflow.
• Ten reusable section components (hero, intro, featured work, services, process, why us, brand patterns, call to action, page header, team).
• Motion layer: IntersectionObserver reveals plus GSAP ScrollTrigger for scrubbed effects. Content stays visible without JavaScript, and motion is disabled for users who prefer reduced motion.
• Media pipeline: WebP conversion with 640, 1024 and 1600px variants served through srcset, and a fallback to the original when a variant is missing.
• Cache-busted assets so new releases appear immediately after deployment.
Laravel 12, PHP 8.2, MySQL/MariaDB, Blade templates, SCSS, modern JavaScript (ES modules bundled with esbuild), GSAP 3 and ScrollTrigger, WebP image processing, Schema.org structured data, Playwright and axe-core for automated testing, Git-based deployment to cPanel.
The agency now has a fast, mobile-friendly website that presents twelve real projects through setup-focused photography, plus team, contact and portfolio pages their staff manage themselves. Automated tests covered every page on desktop and mobile with no console errors, broken images or horizontal overflow. Accessibility checks against WCAG 2 AA came back clean, and the contact form, filters, lightbox and mobile menu were verified end to end.
Curating content matters as much as the code: choosing setup shots over crowd photos changed how professional the site feels. Building on top of a vendor theme instead of editing it kept the project easy to maintain, but it meant learning the base system's quirks around asset loading and caching. Making the setup script respect anything staff change in the admin panel turned out to be essential for the client's confidence to manage the site on their own.
Your email address will not be published. Required fields are marked *
