Project Overview
Octo Agency needed a portfolio site that matched the ambition of their own work — something cinematic rather than templated — and, just as importantly, one they could run themselves. The project delivers both: a public-facing site built around the agency's "eight sides, one vision" identity, and a private admin panel where every piece of content on the site is editable. Home page header imagery, the project archive, individual case studies and their inner sections, the team gallery, the trusted-by marquee, and the careers listings are all managed from the CMS. Nothing is hardcoded, so the agency can publish a new case study or open a new role in minutes without a developer or a redeploy.
Features & Functionality
The public site covers Home, Work, individual case-study pages, About, Services, Careers, and Contact, all tied together by full-page transitions and scroll-based reveal animations. Highlights include a typewriter hero, a stacked-image header that the client controls image-by-image, a curved marquee of client names, a WebGL circular team gallery, and a work grid that reorders from the admin. The admin side is a password-protected dashboard with drag-free ordering controls (move up / move down) for every list, live-editable project sections that mix headings, body copy, and captioned images, and a careers manager that publishes open positions straight to the /careers page. Every image on the site is a CDN link entered through the admin, keeping the deployed bundle light and letting the agency swap visuals instantly.
Development & Technology
The frontend is Next.js 16 (App Router) with React 19, TypeScript, and Tailwind CSS v4, using server components and server actions so the browser never talks to the API directly — which removes CORS from the equation entirely. The backend is a Go REST API built on Fiber v2 with pgx v5 and sqlc-generated, type-safe queries over PostgreSQL; database migrations are embedded in the binary and run automatically on boot. Authentication is a single-admin flow: Go validates the credentials against a bcrypt hash and issues an HS256 JWT, Next stores it in an httpOnly cookie, the protected layout verifies it locally, and every write forwards it as a Bearer token for the Go middleware to re-verify — defense in depth on both sides. The public login endpoint is rate-limited per client IP against brute force. Motion work is handled with GSAP, Motion, and OGL (WebGL).
Performance, SEO & Deployment
Public pages render dynamically at request time instead of being statically prerendered, so live content is never baked in stale — and since the API sits on the same host, those fetches cost single-digit milliseconds. Images are optimized through next/image into AVIF and WebP with long-lived caching, CSS is inlined to remove a render-blocking request, animation libraries are tree-shaken, and console output is stripped from the production bundle. Branding runs all the way down to the tab icon, page titles, and a generated Open Graph / Twitter link preview card. Both apps ship as Docker images — Next.js in standalone output mode for a lean container — with a docker-compose setup for local development, and are deployed through Coolify on a single VPS: PostgreSQL, the Go API at api.octo.krd, and the Next.js site at octo.krd.
