← Back to Projects

AnglerZero Website

AnglerZero Website

One of the most impactful projects during my internship at jstack was the design and development of the website for AnglerZero, a branding and strategy concept by my mentor Jasper Baetens. This project was special not only because I got to build a professional website from the ground up, but also because Jasper was both my mentor and my client. This allowed for fast communication, frequent feedback, and a clear learning path. We used this project as a real-world implementation of the jstack Webkit system and template I helped build earlier in the internship. It served as both a showcase and a testbed for our tooling.

Demo video (no commentary):

Goals

  • Build a professional, responsive website tailored to the AnglerZero brand

  • Fully CMS-driven using Contentful

  • Serve as a live validation of the jstack Webkit tooling

  • Work in a real client-developer feedback loop

Design & Iteration Process

We started with wireframes in Figma, where I translated Jasper’s vision into modular layouts. Each section went through multiple iterations, with visual feedback loops along the way.

Some of the earliest design efforts show how we explored variations of the hero section, which became a central visual element of the site. Once approved, this served as a visual guide for all other sections.

Every section of the site was wireframed, approved, and built one by one. This approach ensured clarity, consistency, and a well-aligned final product.

Component Breakdown

The website consists of multiple custom-built components, many of which I adapted from our reusable template blocks. Each was connected to Contentful for dynamic content.

✅ Hero Section

A full-screen visual intro with a clear CTA. This was the first component we finalized and served as the styling baseline.

✅ Navigation Bar

A sticky header with smooth scroll behavior and responsive layout, developed using ShadCN’s accessible base components.

✅ Services Section

Modular layout showing what AnglerZero offers, with iconography, titles, and CMS-driven descriptions.

✅ Testimonials Section

Structured layout using cards and dynamic testimonials fetched from Contentful.

✅ Blog Showcase

Pulled latest articles from Contentful and styled using Tailwind grid utilities.

✅ Footer

Compact but complete, with quick links and social icons.

✅ Tech-Searcher Animation

This was a unique feature — a mini interactive section where you "search" for technologies using a torch-like effect. Fun to implement and good for UX engagement.

✅ Contact Form

Fully functional form built with React Hook Form.

✅ Case & Blog Pages

Full subpages for each blog post and case, dynamically rendered based on Contentful entries.

Technical Approach

I developed the site using Next.js for routing and rendering, Tailwind CSS for styling, and ShadCN for fast access to accessible UI primitives. The content was structured and managed in Contentful, which made it easy to update text and images without redeploying.

I used TypeScript across the codebase for type safety and reliability. Each component was connected to Contentful models via adapters, with mock entries generated during development using the Webkit’s auto-setup features.

All pages and layouts were made fully responsive, optimized for both mobile and desktop.

What I Learned

  • How to work with a real client in iterative cycles

  • Structuring and managing a design system

  • Connecting frontend components to a headless CMS

  • Improving my skills with responsive layout, form handling, and animation logic

  • Applying my own tools (Webkit + template) in a real production site

Result

The final AnglerZero site is clean, responsive, and content-driven. It reflects the brand’s identity while offering flexibility for future updates. Most importantly, it confirmed that the jstack Webkit and template could support full real-world projects.