How I Built My Own Portfolio Website

Blogger

I've always wanted to create my personal website. Also a place to showcase the project i've worked on and for portfolio too, even currently just collage project are still being published 😄.

In the beginning, I created a website using Blogger with free or premium templates created by experts in the field 😂. My blog at the time contained tips and tricks for customizing Blogger, as well as sharing applications or cracked games (don't follow that example 🤣)

At that time, i didn't pay too much attention to the number of visitors. I was just happy to have my own blog 😂, and it turned out that there were people visiting it at the time hahaha

Design

I used Figma to design the website appearance before implementation, allow me to have a vision clear of the website design, which was more effective during development. For now, i used Figma up to the Lo-Fi stage, and we'll see what's next 👀. From variuos design style, i choose a minimalistic style for this website.

Tech Stack

When i choosing the technologies to use, i considered a few things:

Learning Opportunities - I wanted gain experience with new technologies i might use in the future and explore the technologies.
Popular Technologies - I selected technologies widely used by variuos company, which i might used in the future. This way, i can build up my knowledge and not start from scratch.

In the end, i choose React.js for the frontend, as it's a one of the technologies i've wanted to learn for while and other technologies i used is Tailwind CSS, MDX, Prisma, Neon Database, dan Vercel.

i drew inspiration from Lee Robinson and Delba so i learn a lot from their website. all of these technologies were new to me, so i started learning them from scratch.

There's a lot to learn and it might seems challenging at the beginning. i might get confused like "What's this, what's this error ??" but that's the beauty of learning somehing new,right ? 😆 So, enjoy the process, because there's no harm in investing in ourself 🤟. If you ever get stuck, you can always play Valorant 🎮 👀.

Next.js

Before i learned Next.js. Of course i wanted to deepen my undestanding of Javascript. I took a course on Pemrograman Javascript: Pemula sampai mahir on Udemy. In my opinion, this course suitable for people who want to learn Javascript from scratch or want to reinforce their undestanding of how the Javascript works. After completing the course, i continued learning React.js on Lee Robinson and Net Ninja Youtube, there i worked on React 2025 and the Full React Tutorial. After React, i moved on to Next.js, where the learning process was similar, after creating this website i decided to learn Typescript by reading the documentation and using the Typescript playground. Sometimes, i watch tips about Typescript on Matt Pocock Youtube channel.

Tailwind CSS

I've wanted to learn Tailwind CSS for a while. one of its strengths is the "utility-first" approach, where classes can be applied directly to HTML elements. This approach make the development and styling process faster and easier. Beside unsing Tailwind CSS, i also used Vanilla CSS for styling that couldn't be achieved with Tailwind CSS.

MDX

With MDX (Markdown with JSX) i can use markdown within JSX, so i can creating and custom iteractive and dynamic content. I used next-mdx-remote to leverage the features provided by Next.js, such as server-side rendering.

Prisma

Prisma is an Object-Relational Mapping (ORM) tool used to simplify interactions between our application and the database. it enables us to define our database schema easily and offers support for variuos database like PostgreSQL, MySQL, MongoDB, and more. i used Prisma Client for writing database queries in an expressive and type-safe manner. additionally, i used Prisma Studio for viewing or editing the database.

Neon Database

Previously, i use PlanetScale, but after the hobby plan was shut down i migrate to Neon. Neon is a serverless Postgres with amazing features like instantly branching our database, autoscaling and being easy to use.

Vercel

For hosting and deploying this website, i used Vercel. one of its features i like is the ability to connect our Git Repository. This way, when there are changes in our repository, vercel can automatically builds and deploys our webite.

Content

My initial plan for this website was to showcase the projects i've worked on. However, during the development process, i came up with new ideas, including creating a blog to share my experiences, programming insights, design tips, and random thoughts 😂, among other things.

What's Next ?

Optimize the code and perfomance this website.
Add animation using Framer and Lottie.
Mobile 👀