How I Built My Portfolio Website

Why go static when you can build a full blown interactive web app to showcase your skills hehe?

Yeah I know most people just use one of the most popular web framework to build the static site and put it somewhere on the internet but with all the cool stuff out there, I couldn't just leave it boring like the others.

Here's the list of stack and tools I use:

• Next.js - of course, one of the most popular web framework out there. A bit info for you, the very website I put the article you are reading right now used to run on vanilla html. It's just that I decided to put it together with its own backend, static site doesn't work anymore with all the security and sensitive stuff you need to keep them secret from the browser 🙃. I tried Sveltekit, Remix and Solid start but eventually decided to stick with just Next
  

• Gemini 2.0 - of course, I bet you've already seen the hover element on the homepage, where this awesome cute little chat box unfolds when clicked. The UI I built myself, but the LLM running behind this is Gemini Flash 2.0. Big thanks to Google for making this available to developers for free (unlike some company whose name sounds kinda like they want to let people use their models for free but actually charge for API calls, hehe).
• Langfuse - or as I like to call it, Lang-awesome! I use it for storing prompts and monitoring inputs and outputs. Find out more about it here.

• Payload CMS - one of the most popular headless CMS tools which I've been eagerly waiting for since v3 beta. Now that the stable version is here, I've finally put it together with my portfolio site. In fact, the content of this very blog post your are reading right now was served through Payload.
  
  Above is the custom login component I built to replace the one that came by default. Thanks to the awesome auth library from https://authsmith.com/, now I can feel safe not letting anyone brute force into my admin page.
  
• Then there’s Postgres and Vercel Blob Storage, which I use as storage for Payload CMS. They’re generous enough to offer free usage for hobby projects!

For more info:

• Postgres: There are multiple providers like Supabase, Neon, and CockroachDB where you can sign up and get an instance for free in under 3 minutes.
• Blob Storage: You can find more details here.