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, including:

• A CI/CD pipeline powered by GitHub Actions
• Semantic Release for automated versioning and releases
• Containerization using Docker for consistent environments
• Automated deployment to Vercel

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.