Skip to content
refara_code
06Web Development · Full-stack Development · 2023

Faris Azhar Portfolio Website

Summary

A portfolio site and CMS for Faris Azhar, a product designer, built to his designs: he writes and publishes his own case studies from a dashboard. I was the sole developer, and the main engineering piece is restricted case studies for work under NDA: visitors see a preview of the first few sections, and a passcode unlocks the rest.

Stack
  • Next.js
  • React
  • Prisma
  • TypeScript
  • Zod
  • MongoDB
  • Auth.js
  • TailwindCSS
  • Zustand
  • Cloudinary
LinksLive site
www.farisazhar.com
The home page: Faris's introduction and the companies he has worked with.
(01)

Overview

Faris Azhar is a product designer. He designed his portfolio site, and I built it and the CMS behind it as his freelance developer, so he can write and publish his own case studies from a dashboard without touching code.

Each case study is a list of ordered sections, each with an icon and its own ordered content blocks: rich text plus an optional image, with the image's width and corner radius chosen per block. Case studies are grouped by category, credited to the workplace where the work was done, and put in order for the home page from the dashboard.

Much of a designer's best work is under NDA, so a case study can be restricted. Faris sets a passcode and how many sections the preview shows. The page is a server component that cuts the case study down to that preview before it renders. A correct passcode, checked in a server action, sets an httpOnly cookie that unlocks that one case study for 24 hours.

The live site is my second build of it. The first, from 2023, was a page builder on PostgreSQL with a REST API and a layout engine that stored separate desktop and tablet layouts for every section. The rebuild moved to MongoDB and server actions and stores content instead of layout. I worked on it until June 2026, and Faris maintains it himself now.

(02)

Screens

"Downloads for his introduction deck and CV, followed by his case studies, in the order he sets from the dashboard.
A case study: a header image, the workplace and category it belongs to, and sections that each start with an icon.
The dashboard's post list, with each case study's workplace, categories and publish status, and Reorder List for the home-page order.

Next project01 / 06

Labotopia E-commerce App

Got something in mind?

Let's build the next one.