Skip to content
Sofyan UX
Project/Web Development
~/portfolio/web_development

A Creative Playground and Portfolio for Sofyan Sauri

A Creative Playground and Portfolio for Sofyan Sauri_

As a UI/UX designer and web developer, I’ve spent years building digital products for others. But eventually, I realized I needed a true online home for myself. I was tired of my old, static portfolio that was a hassle to update. I wanted a flexible platform where I could express my ideas effortlessly. So, I decided to build my own personal storefront from scratch combining a clean, welcoming visual design on the outside with a powerful, custom-made content management system (CMS) under the hood.

// As a UI/UX designer and web developer, I’ve spent years building digital products for others. But eventually, I realized I needed a true online home for myself. I was tired of my old, static portfolio that was a hassle to update. I wanted a flexible platform where I could express my ideas effortlessly. So, I decided to build my own personal storefront from scratch combining a clean, welcoming visual design on the outside with a powerful, custom-made content management system (CMS) under the hood.

A Creative Playground and Portfolio for Sofyan Sauri
Year_YEAR

2026

Client_CLIENT

Personal Project

Role_ROLE

Web Developer & UI Designer

Industry_INDUSTRY

Personal Branding / Portfolio

Tools_STACK

FigmaNext.jsTailwind CSSSupabaseSupabase StorageVS Code

Share:
The Problem

Defining Goals

// DIRECTORY: /docs/goals.md

System_Objectives

When I started this project, I had a few clear goals in mind:
To create a clean and professional space that truly represents who I am.
To build my own CMS, so I can write articles or add new case studies without ever touching the code again.
To make sure the website is blazing fast and feels incredibly smooth for anyone visiting.
To challenge myself by handling both the visual design and the backend database architecture.
>When I started this project, I had a few clear goals in mind:
>To create a clean and professional space that truly represents who I am.
>To build my own CMS, so I can write articles or add new case studies without ever touching the code again.
>To make sure the website is blazing fast and feels incredibly smooth for anyone visiting.
>To challenge myself by handling both the visual design and the backend database architecture.
Obstacles

The Challenges

// LOGS: runtime_errors.log

Runtime_Errors

Moving past static pages: I needed to transition away from my old, static portfolio format into a fully dynamic system that could easily grow alongside my career.
Structuring complex data: My main technical hurdle was designing a database structure in Supabase that could neatly organize different types of content—like blog posts, complex case studies, and personal info—without making the backend overly complicated.
Balancing design and performance: I had to find the sweet spot between creating an elegant, editorial-style visual layout and ensuring the underlying technology kept the website blazing fast.
[!]Moving past static pages: I needed to transition away from my old, static portfolio format into a fully dynamic system that could easily grow alongside my career.
[!]Structuring complex data: My main technical hurdle was designing a database structure in Supabase that could neatly organize different types of content—like blog posts, complex case studies, and personal info—without making the backend overly complicated.
[!]Balancing design and performance: I had to find the sweet spot between creating an elegant, editorial-style visual layout and ensuring the underlying technology kept the website blazing fast.
Execution

The Approach

// SCRIPT: deploy_patch.sh

System_Architecture

Solutions

// IMPLEMENTED_SOLUTIONS

The Look: I designed a minimalist interface with plenty of breathing room, letting my work be the main focus.
The Speed: I used Next.js to build the frontend, ensuring the site loads almost instantly on any device.
The Brains: I integrated Supabase to safely store all my text content and organized my project images using Supabase Storage.
The Control: I built a private dashboard just for myself, allowing me to manage, edit, and publish my content seamlessly from anywhere.
+The Look: I designed a minimalist interface with plenty of breathing room, letting my work be the main focus.
+The Speed: I used Next.js to build the frontend, ensuring the site loads almost instantly on any device.
+The Brains: I integrated Supabase to safely store all my text content and organized my project images using Supabase Storage.
+The Control: I built a private dashboard just for myself, allowing me to manage, edit, and publish my content seamlessly from anywhere.

Process

// EXECUTION_THREAD

I tackled this project by treating myself as my own client. First, I sat down and mapped out exactly what I needed: a portfolio section, a blog, and a stress-free way to manage them. I started sketching the layout, focusing on friendly typography and neat spacing. Once the design felt right, I set up the backend structure in Supabase. Finally, I brought the vision to life with Next.js, wiring the beautiful frontend to my custom CMS dashboard until everything worked in perfect harmony.

01I tackled this project by treating myself as my own client. First, I sat down and mapped out exactly what I needed: a portfolio section, a blog, and a stress-free way to manage them. I started sketching the layout, focusing on friendly typography and neat spacing. Once the design felt right, I set up the backend structure in Supabase. Finally, I brought the vision to life with Next.js, wiring the beautiful frontend to my custom CMS dashboard until everything worked in perfect harmony.

Outcome

Impact & Results

// LOGS: print_output.log

Final_Metrics

Looking at it now, I’m truly proud of how this digital space turned out. Not only does it act as a professional portfolio that helps me connect with new clients and friends, but the custom CMS has been a game-changer. It saves me so much time whenever I want to share something new. More than anything, this website is living proof of my passion for bringing good design and modern web technology together.

Looking at it now, I’m truly proud of how this digital space turned out. Not only does it act as a professional portfolio that helps me connect with new clients and friends, but the custom CMS has been a game-changer. It saves me so much time whenever I want to share something new. More than anything, this website is living proof of my passion for bringing good design and modern web technology together.

More Projects

// Similar_Modules