This document highlights the journey of recreating my portfolio website. I found creating a portfolio website very frustrating and time-consuming. Even after building one, you constantly need to update the code and add new projects and certificationsโ€”which makes it even more time-consuming. So the initial thought was to make something that lasts forever and doesn't require manually changing the code every time I want to add a new project or achievement.

Tech Stack Selection

I've worked on several modern web development frameworks, but this time I wanted to explore something new.

Core Tech Stack At-a-Glance

Category Technology Purpose
Frontend Framework Next.js (React) Building the user interface with high performance and SEO.
UI & Styling Tailwind CSS Rapid, responsive, utility-first styling.
UI Components Shadcn/ui Accessible, beautifully designed, and composable components.
Animations Framer Motion Adding fluid and professional animations.
Backend Logic Next.js API Routes Server-side logic, data fetching, and API integrations.
Database ORM Prisma Interacting with the database in a type-safe way.
Database PostgreSQL (hosted on Supabase/Neon) Storing structured data (projects, posts, etc.).
Image & Asset Mgmt Cloudinary Storing, optimizing, and delivering certificate images.
Deployment Vercel Hosting, CI/CD, and serverless functions.
Language TypeScript Adding static typing for robustness and scalability.

How to keep the portfolio website updated at all times?

The traditional method is to update it manually, but that's not what I'm going to do.

I want to show my current progress at all times to anyone who visits. I see only one way to do thisโ€”using a GitHub Personal Access Token (PAT). All my work eventually ends up on GitHub, so I need to extract the information from there. But how?

GitHub PATs are designed to access GitHub resources on your behalf. A token has the same capabilities to access resources and perform actions that you do, limited only by the scopes or permissions granted to it. After discovering this, I realized I could keep my website updated automatically. I no longer need to manually specify which languages I'm working with or what frameworks I've usedโ€”it will all be clearly visible on my website.

To use this token more effectively, why not also display my GitHub commit graph and add links to popular pull requests and resolved issues.

Portfolio Structure

The portfolio website is organized into the following sections, each implemented as a separate component. This structure may evolve as the project develops.