Back to Writing
January 10, 2026

Building My Personal Portfolio as a Creator-Engineer

#portfolio#nextjs#mongodb#tiptap#shadcn-ui#tailwind#personal-brand#creator-journey#web-development
Building My Personal Portfolio as a Creator-Engineer

Building My Personal Portfolio as a Creator-Engineer

This website is not just a portfolio.
It’s a reflection of how I think, build, learn, and evolve.

In this post, I want to document how I built this site, the technologies I used, the decisions I made, the problems I faced, and why I intentionally kept things simple.

This is not a tutorial.
It’s a personal engineering journal.

Why I Built This Portfolio

I didn’t want a flashy marketing template.

I wanted a space where:

  • My projects could live quietly.

  • My writing could evolve.

  • My learning journey could stay visible.

  • My future self could look back and understand how I thought.

I also wanted control — over content, design, SEO, and structure.

So I decided to build it myself.

Tech Stack

Here is the stack I finally settled on:

Frontend

  • Next.js (App Router)

  • React

  • TypeScript

  • Tailwind CSS

  • shadcn/ui

Backend

  • MongoDB

  • Mongoose

  • API Routes

Editor & CMS

  • Tiptap Editor

  • Zod + React Hook Form

  • ImageKit for image uploads

Other Tools

  • Git & GitHub

  • OpenAI API (for future experiments)

  • Custom slug generation & SEO handling

Design Philosophy

I chose a white, minimal, quiet theme.

No heavy gradients.
No noisy animations.
No dark marketing blocks.

Typography does most of the work.

  • Inter for UI, cards, metadata.

  • Cormorant Garamond for storytelling and blog content.

This separation helps my site feel both technical and human.

Custom CMS Instead of Headless CMS

I initially considered a headless CMS.
But I wanted to build my own system to understand content architecture deeply.

So I built:

  • Blog model in MongoDB

  • Project model in MongoDB

  • Dashboard pages for management

  • Slug-based routing

  • SEO fields per post

  • Draft / publish workflow

Tiptap stores content as JSON, which allows me to render clean HTML later with full control.

Tiptap Editor Setup

Tiptap was the hardest part.

I struggled with:

  • Extensions

  • Forms

  • Validation

  • Saving JSON properly

  • Styling output

But once it worked, it became the heart of my system.

Now I can:

  • Write rich blog posts

  • Embed images

  • Format content cleanly

  • Control rendering on frontend

This alone taught me more than many tutorials.

Image Handling with ImageKit

Instead of storing images directly in my database or public folder, I use ImageKit.

This gives me:

  • Optimized delivery

  • CDN

  • Easy uploads

  • Clean URLs

  • Better SEO images

The editor allows selecting uploaded images directly.

SEO & Metadata

Each blog and project supports:

  • Title

  • Description

  • OG image

  • Slug-based URLs

This means every post is:

  • Shareable on LinkedIn

  • SEO-friendly

  • Search-engine readable

  • Structured

I didn’t want SEO to be an afterthought.

What This Site Represents

This site is not about showing that I know everything.

It’s about showing:

  • How I learn

  • How I think

  • How I build

  • How I fail

  • How I improve

I am not a professional editor.
I am not a content expert.
I am still learning.

But I am consistent.

What’s Next

In the future, I want to add:

  • Writing series

  • AI experiments

  • Content workflow breakdowns

  • System design notes

  • Creator journey logs

This blog will slowly become my digital notebook.

Final Thought

This portfolio is not finished.

And it never will be.

It will evolve with me.

And that’s exactly what I wanted...

Building My Personal Portfolio as a Creator-Engineer