Website Development for fynk

In November 2025, I was hired by fynk, a contract management platform based in Germany, to rebuild their entire marketing website. fynk had a complete Figma redesign ready to go, but their existing Hugo site was running on legacy tooling that needed updating.

They wanted to migrate from Tailwind CSS v3 to the new v4 architecture while implementing complex animations, interactive carousels, and polished UI components across 20+ pages. Everything had to work smoothly on mobile, tablet, and desktop, with full support for both English and German content.

I kicked things off by tackling the Tailwind v3 to v4 migration. This wasn't just updating a package—v4 completely changed how Tailwind works, moving from JavaScript config to CSS-first architecture. I ripped out the old PostCSS pipeline, converted everything to the new system, and got Hugo compiling cleanly.

Once that foundation was solid, I built out the design system: custom fonts, the full color palette as CSS variables, typography utilities for eleven heading sizes and six body text sizes, and six button variants that could be reused everywhere. This upfront work meant I could move fast later without constantly building one-off components.

The homepage was where I needed to prove myself. I built a hero section with scroll-driven video that would autoplay when in view and pause when it left the viewport. I created a customer carousel with Alpine.js that smoothly transitioned between active and inactive states—and then refactored the whole thing from 303 lines of duplicated markup down to 155 by making it data-driven.

I implemented a "Why teams choose fynk" section with responsive grids and decorative elements scattered throughout, and a solutions section that toggled between Teams and Industries categories with smooth animations. The team loved it and immediately approved moving forward with the full site.

For the remaining 19 pages, I established a pattern that would carry through the entire project: break everything into reusable partials, make components data-driven wherever possible, and build flexibility through props. A page that started at 650+ lines would get refactored down to 20-50 lines of partial includes.

I built scroll-driven trace animations for the Why fynk page, Lottie-powered carousel cycles for the Get Clarity section, YouTube video integration that responded to scroll position, and filtering systems for the blog, case studies, and templates.

The pricing page got a synchronized monthly/yearly toggle that would update both the hero cards and the comparison table simultaneously. Everything was responsive, everything pulled from data structures, and everything could be easily maintained.

Converted duplicated markup to data-driven arrays and loops

Used Alpine.js for all interactive state (toggles, filters, accordions, carousels)

Built scroll animations with Intersection Observer for smooth performance

Cleaned up unused CSS utilities across multiple passes

Converted images to webp and implemented lazy loading

The project completely transformed fynk's web presence. I delivered 20+ fully responsive pages with sophisticated interactions and a clean, maintainable codebase underneath.

The component architecture I built means adding new pages is now straightforward—you compose from existing partials, pass in props to customize, and you're done. No need to understand hundreds of lines of HTML or duplicate markup.

The code got dramatically cleaner through this process. Main layout files shrank by 80-90%. The design system became fully documented through CSS custom properties that anyone could reference. The Tailwind v4 migration set them up for long-term success with modern tooling. When Petra's team did their final QA review and found refinements they wanted, each fix was quick because everything was modular—change one partial and it updates everywhere that partial is used.

Most importantly, the trial structure worked exactly as intended. The homepage demonstrated I could deliver quality work and communicate well (I sent daily Slack updates showing progress and blockers throughout the project). That built enough trust to convert the trial into the full engagement. The project wrapped in February 2026 with a smooth handoff and a client relationship built on transparency and attention to detail.

Foundation work pays off. Spending a full week on the Tailwind migration and design system felt slow at first, but it saved me countless hours later. Every component I built during that phase got reused 5-10 times across the site.

Data-driven components eliminate bugs. When I converted duplicated markup into data structures, it wasn't just about cleaner code—it made entire categories of bugs impossible. You can't create styling inconsistencies when everything renders from the same template with the same data structure.

Communication converts trials. The daily updates during the trial phase weren't just nice-to-have—they built the confidence that led to full project retention. Showing consistent progress and being transparent about blockers demonstrated professionalism that mattered more than I expected.

Polish comes from iteration. The scroll interactions that felt smoothest weren't the ones I got right on the first try. They came from testing across different scroll speeds, viewport sizes, and user behaviors, then adjusting thresholds and timing until everything felt natural. That extra iteration time made the difference between janky and polished.