Portfolio Website V3

#Project Overview

Website Portfolio V3 is the latest version of my personal portfolio website, built using Next.js, TypeScript, TailwindCSS, and Shadcn UI. The website serves as a central hub to showcase my profile, experience, projects, and blog posts.

This version represents a major improvement over the previous one, with a strong focus on a cleaner and more modern design, a more reusable component architecture, and significant enhancements to both developer experience and user experience.

#Background & Motivation

This portfolio website has gone through multiple iterations, and in version 3, I aimed to perform a comprehensive redesign compared to the previous version.

The main motivations behind this version were:

• Creating a cleaner, more modern, and more consistent design
• Building a component architecture that is easy to maintain and extend
• Turning the website into not only a portfolio, but also a feature-rich blogging platform
• Applying various best practices learned from previous projects and professional experience

#Improvements from the Previous Version

Compared to the earlier version, Website Portfolio V3 introduces several notable improvements, including:

• A complete UI/UX redesign with a more modern and minimalistic approach
• Consistent use of reusable components
• Implementation of rich code blocks using Shiki and Rehype for technical content
• Support for internationalization (i18n) and multiple languages
• Built-in search, pagination, and tag-based filtering
• A more structured and organized content layout for both blog posts and projects

#Architecture & Technology

The website is built using modern web technologies with a structured and maintainable approach:

• Next.js as the primary framework
• TypeScript for type safety and maintainability
• TailwindCSS and Shadcn UI for the design system and UI components
• MDX for flexible authoring of blog posts and project content
• TanStack Query for asynchronous data management
• Framer Motion for subtle animations and UI interactions

For observability and analytics, the website integrates:

• Umami
• Google Analytics
• PostHog

#Automation & Release Workflow

Website Portfolio V3 is also equipped with an automated development and release workflow built on CI/CD best practices.

CI/CD Pipeline Concepts

#CI/CD Pipeline

CI/CD Overview

CI/CD Pipeline, short for Continuous Integration (CI) and Continuous Delivery/Deployment (CD), is an automation process that streamlines software development from code changes to deployment. This process automates the steps of building, testing, and deployment, allowing developers to release code changes more frequently, reliably, and securely. This pipeline runs automatically every time code is updated in the central repository, and continues through various stages until the code is active in the production environment.

The CI/CD pipeline in this project covers:

• Build & Test Pull Request Check
• Automatic tagging & release using semantic versioning based on conventional commit rules
• Build & Push Container Image to GitHub Container Registry (GHCR)
• Automated deployment to Vercel

#Semantic Versioning

Semantic Versioning Components

Semantic Versioning (SemVer) is a software version numbering standard defined at semver.org. Its purpose is to avoid dependency hell and ensure that compatibility between versions can be understood consistently by developers and users alike. Semantic Versioning is written using the format:

MAJOR.MINOR.PATCH

There are three main components:

• MAJOR — Increases when there are changes that are not backward compatible (breaking changes). Example: v1.5.7 → v2.0.0
• MINOR — Increases when there are new feature additions that are still backward compatible. Example: v1.5.7 → v1.6.0
• PATCH — Increases when there are bug fixes or minor changes that are still backward compatible. Example: v1.5.7 → v1.5.8

#Conventional Commit

Conventional Commit is a standardized commit message convention that is closely related to semantic versioning. The commit message determines which version level should be bumped (MAJOR, MINOR, or PATCH). Common commit message rules include:

• BREAKING CHANGE — Bumps to MAJOR version. Example:

  plaintext

  feat(api-version): change endpoint to api version v2
   
  BREAKING CHANGE: THIS FEATURE IS NOT BACKWARD COMPATIBLE

• feat() — Bumps to MINOR version. Example:

  plaintext

  feat(hooks): add map update (mutation) hook

• fix() or hotfix() — Bumps to PATCH version. Example:

  plaintext

  fix(login-validation): resolve incorrect email format validation on login form

#Git Flow (SDLC)

Git Flow Concepts

Semantic Versioning is often used in conjunction with Git Flow, a branching model in Git that helps maintain software version consistency in accordance with the stages in the software development life cycle (SDLC). In Git Flow, there are several commonly used branch names:

• dev or development — Used by developers or QA before the UAT stage. Release versions are generally labeled beta, e.g., v1.5.7-beta.N
• staging — Used when features or bug fixes are considered stable and ready for UAT. Release versions are usually labeled rc (Release Candidate), e.g., v1.5.7-rc.N
• main — Used when a feature or bug fix has passed UAT and is ready for production. The release version has no additional labels, e.g., v1.5.7

This workflow helps maintain code quality, ensures consistent releases, and simplifies long-term maintenance.

#Open Source & Velora

Although the Website Portfolio V3 repository itself is closed-source, I provide an open-source alternative in the form of a blog template called Velora.

Velora is available at:

Live demo: velora-example.vercel.app

Repository: github.com/armandwipangestu/velora

#What I Learned

Through the development of Website Portfolio V3, I gained valuable insights, including:

• Designing a scalable and reusable frontend architecture
• Managing technical content using MDX with rich code blocks
• Implementing multi-language support (i18n) in Next.js
• Integrating multiple analytics tools into a single platform
• Building CI/CD workflows and automated release pipelines for frontend projects

#Why This Project Matters

Website Portfolio V3 is more than just a personal website; it also serves as:

• An end-to-end representation of my technical capabilities
• A platform for experimentation and applying modern frontend best practices
• A foundation for future projects and content development

#Conclusion

Website Portfolio V3 is the result of continuous iteration and improvement over previous versions, with a strong emphasis on design quality, code architecture, and user experience.

This project reflects my approach to building modern web applications that are maintainable, scalable, and ready for further development, while strengthening my skills in Software Engineering, particularly in frontend and full-stack web development.