ivanodeke.com: a portfolio, CMS and invoicing platform

The problem

I needed more than a brochure site. Clients should be able to read my work, request a quote, receive an invoice and pay online, while I manage content from an admin dashboard. It also had to be fast on mobile data in East Africa and easy for Google and AI assistants to understand.

Architecture

The front end is a Next.js static export served from Apache, so pages load as plain HTML with no server to run. Dynamic data (blogs, projects, testimonials, quotes, invoices) comes from a separate Laravel REST API, authenticated with an API key for public reads and JWT for the admin dashboard.

• Quote builder that generates PDFs in the browser (jsPDF) and saves quotes through the API
• Invoices with online payment through Pesapal, plus payment-status tracking
• Contact form protected with reCAPTCHA v3
• A small PHP proxy that serves pre-rendered HTML to search, social and AI crawlers for dynamic blog and project URLs, while users get the fast static shell

Security: finding and fixing a supply-chain attack

During an audit I found a GitHub Actions workflow, disguised as a "security scan", that posted every repository secret (SSH credentials and the production env file) to an external server on each push.

• Removed the workflow and rotated all exposed credentials
• Gave the deploy job read-only token permissions, stopped persisting git credentials, and passed secrets through env instead of inlining them into shell
• Added Dependabot, CODEOWNERS on .github/, and npm ci --ignore-scripts in CI
• Hardened the server: HTTPS and single-host redirects, HSTS, CSP, X-Content-Type-Options, a Permissions-Policy, blocked dotfiles, real 404s
• Fixed a path-traversal risk in the PHP proxy by whitelisting route types and validating slugs

Performance: profiling scroll jank

After adding GSAP scroll animations, some pages felt laggy. Instead of guessing, I measured frame times while scrolling (with CPU throttling) and switched suspects off one at a time: blur effects, images, smooth scrolling, a WebGL gradient.

The cause was a WebGL shader that redrew every frame even off screen. I mounted it lazily with IntersectionObserver, paused it when not visible, capped its resolution and added a static CSS fallback. Scrolling went from about 8 fps to a steady 60 fps.

SEO and AI-search visibility

I fixed canonical URLs that pointed every page at the homepage, built a linked schema.org graph (Person, WebSite, ProfessionalService, Service, FAQ, Breadcrumb), generated keyword landing pages from a typed data file, and published robots.txt rules and an llms.txt for AI crawlers.

What I would do next

Pre-render blog and project pages at build time from the API, so crawlers no longer depend on the PHP proxy, and add automated Lighthouse and end-to-end checks to CI.