Main Portfolio

The reason I marked this as my "Main Portfolio" is because I have previously created several portfolios that were haphazard, unstructured, and went largely unused. I built this portfolio with serious intent, proper structure, and using the technologies I have mastered to showcase my ability to build modern web applications. In this portfolio, I feature my best projects, technical skills, and relevant work experience to provide a clear picture of who I am as a web developer.

Background

Initially, I wanted to apply a large and striking typography theme. I was inspired by the portfolio design of an Indian developer, though unfortunately I can't remember his name (I had forgotten it even before starting this project). What stuck with me was the massive typography displaying his full name, which really caught my attention. I tried to apply that concept by creating large typography for my own name, "Rafie Hasannudin". I wanted to make sure that my portfolio design wasn't just visually appealing, but that it also reflected my personality and style as a web developer. However, since I couldn't remember the exact design that inspired me, I decided to mix things up by using a monospace font style. This gives it a terminal or command-line interface vibe, which perfectly matches my background as a developer who started his coding journey building command-line applications in C++. By combining these design elements, I hope to create a unique and engaging portfolio that reflects my journey as a web developer.

Tech Stack

• Framework: Next.js (App Router)
• Library: React
• Styling: Tailwind CSS & clsx / tailwind-merge
• UI Components: Radix UI & shadcn/ui
• Content: MDX & Remark
• Animations: Motion (Framer Motion) & GSAP
• Icons: Lucide React & React Icons

Features

• MDX Support: Write content (like the about page and projects) quickly using MDX.
• Interactive Animations: Smooth page transitions and text splitting animations powered by Framer Motion and GSAP.
• Dark/Light Mode: Seamless theme switching with next-themes.
• Responsive Layout: Fully responsive UI relying on Tailwind CSS.