Figment Media

Figment Media is a brand and marketing solutions agency with a strategy-first approach aimed at creating long-term impact for businesses. The goal of the project was to build a modern, high-performing website that effectively showcases the agency’s expertise and portfolio while ensuring a smooth user experience.

URL

https://figment-media.com/

Roles In Project

  • Frontend Developer – Responsible for implementing the UI, animations, and interactions.
  • Backend Developer – Managed API routes, form handling, and integrations.
  • DevOps – Set up the VPS, installed Coolify, and deployed the project.
  • UI/UX Designer – Provided design guidelines and collaborated on refining the user experience.

Responsibilities

  • Developed the website using Next.js with App Router for API routes.
  • Implemented a GLSL gradient animation background in the hero section.
  • Created smooth animations and interactions using Motion.
  • Integrated Prismic CMS for handling blogs and work data.
  • Configured Resend for email form submissions.
  • Deployed the project using Coolify on a VPS.
  • Set up and configured the VPS, installed Coolify, and managed the deployment process.
  • Managed tight timelines and adapted to design changes during development.

The Figment Media website was designed to be visually engaging while maintaining a high level of performance and accessibility.

The landing page features a dynamic GLSL gradient animation, providing a visually striking first impression. Smooth animations and transitions enhance user experience throughout the site.

The project also includes an integrated blog and portfolio powered by Prismic CMS, ensuring seamless content management.

Email form submissions are handled efficiently with Resend, and the entire infrastructure is hosted on a VPS managed via Coolify.

Features

  • Hero section with GLSL gradient animation background
  • Smooth animations for interactive elements
  • Next.js App Router API routes for efficient backend handling
  • Prismic CMS integration for blogs and work data management
  • Resend for handling email form submissions
  • Coolify for streamlined VPS deployment

Challenges

  • Tight Deadline – The client required the website to be completed within a short timeframe.
  • Design Overhaul – Initially based on a template, but underwent major changes, especially in the landing page, requiring UI development alongside coding.
  • Real-time UI Adjustments – Had to develop the frontend while iterating the design dynamically.
  • Implementing Small Animations – Used Framer Motion and GSAP for interactive animations, ensuring smooth transitions.

Technology Stack

  • Next.js
  • Prismic
  • Resend
  • React Email
  • Coolify
  • Motion
  • Tailwind CSS
  • shadcn/ui Sheet