Overview

This project took an existing full-stack portfolio platform, a Next.js public site and admin panel backed by an Express and MySQL CMS API, and turned it into the website of a software services company. The platform itself, including the CMS, publishing, SEO tooling and AI chat, was built by another developer; my part was the rebrand, redesign and front-end motion.

My role

I made five commits on a dedicated rebrand branch: the brand and content restructure, a redesign on a new type system, a canvas flow-field hero and a round of fixes to it, and site-wide scroll animation, parallax and a custom cursor.

What it does

• Presents services, case studies and articles, still managed through the existing admin panel.
• Replaces the personal-portfolio identity with a company one: a violet accent built as design tokens, a code-drawn SVG logo and service glyphs, generative cover art per project and article, and a generated Open Graph image.
• Turns the resume page into an About page with a permanent redirect, switches structured data from a Person to an Organization, and moves brand settings, navigation and socials into a migration so they apply on every deploy.
• Marks placeholder content as placeholder: unverified testimonials render without review schema and team cards carry roles, not invented names.

How it's built

The redesign replaced an all-monospace look with three type roles, Bricolage Grotesque for display, Inter for reading and mono only for small metadata, and swapped boxed cards for editorial rows. The hero is a canvas particle system: particles follow curl noise derived from 3D Perlin noise blended with a slow vortex, leave trails by fading the previous frame, and flow around the pointer, which is modelled as a rounded-box signed distance field. Scroll reveals and parallax use framer-motion, with reduced-motion fallbacks.

Highlights

• Measured performance: pinning the canvas to 1x pixel ratio, precomputing the noise field on a grid every third frame and batching strokes by colour took the hero from 24 fps to 55 to 65 fps, and the loop pauses off-screen or in a hidden tab.
• Flow that parts around the cursor: particles are pushed out along the distance field's normal and slid along its surface, so streaks travel around the block instead of stalling, and the cursor is a DOM element so it leaves no ghost trail.
• Bugs fixed on the way: a reveal animation that left 25 of 26 sections invisible, a hydration mismatch from server-rendered motion, a hash that gave the first three projects identical cover art, and an undefined CSS variable.