1. About the Company

Funston Advisory Services (FAS) provides advisory and governance-related services, helping organizations strengthen their governance systems and make informed decisions.

FAS is also associated with the BoardSmart product ecosystem, which includes solutions such as InGov and Intelligence & Insights.

2. Project Overview

A responsive marketing website developed for Funston Advisory Services, based on an approved Figma design.

The project involved building the website from the ground up, translating the visual design into a functional web experience while establishing a content management system that allows the FAS team to manage website content independently.

The solution combines a custom Next.js frontend with Payload CMS and PostgreSQL, providing a foundation for a maintainable and content-managed marketing website.

3. My Role

Full-stack Developer

Responsible for the end-to-end development of the website, from translating Figma designs into responsive interfaces to configuring the CMS and backend infrastructure.

I handled the overall implementation, including frontend development, Payload CMS setup, database integration, project architecture, and deployment.

4. Key Features

• Figma-to-Code Implementation: Translate the approved Figma design into a responsive website while maintaining visual consistency across screen sizes.
• Responsive Navigation: Implement a sticky header, transparent hero styling, and responsive navigation menus.
• Marketing Homepage: Build key sections presenting FAS governance systems, target audiences, services, and offerings.
• BoardSmart Product Navigation: Integrate navigation and calls to action linking to InGov, Intelligence & Insights, and the BoardSmart website.
• Reusable Design System: Establish consistent design tokens for colors, typography, and layout.
• Content Management System: Configure Payload CMS to support structured content management and future website updates without requiring developer involvement for routine content changes.
• Database Integration: Set up PostgreSQL as the database layer for the CMS.
• Deployment: Configure and deploy the website infrastructure using Vercel and Railway.

5. Technology Stack

• Framework: Next.js 16
• Language: TypeScript
• Styling: Tailwind CSS v4
• CMS: Payload CMS 3
• Database: PostgreSQL
• Hosting: Vercel, Railway

Project Gallery