Website Portofolio V3

#Project Overview

Website Portofolio V3 adalah versi terbaru dari situs web portofolio pribadi saya yang dibangun menggunakan Next.js, TypeScript, TailwindCSS, dan Shadcn UI. Website ini berfungsi sebagai pusat informasi untuk menampilkan profil, pengalaman, proyek, serta tulisan blog saya.

Versi ini merupakan peningkatan besar (major improvement) dibandingkan versi sebelumnya, dengan fokus pada desain yang lebih clean dan modern, arsitektur komponen yang lebih reusable, serta peningkatan signifikan pada developer experience dan user experience.

#Latar Belakang & Motivasi

Website portofolio ini telah melalui beberapa iterasi, dan pada versi 3, saya ingin melakukan perombakan menyeluruh dari versi sebelumnya.

Motivasi utama pengembangan versi ini adalah:

• Menciptakan desain yang lebih bersih, modern, dan konsisten
• Membangun arsitektur komponen yang mudah dirawat dan dikembangkan
• Menjadikan website ini tidak hanya sebagai portofolio, tetapi juga sebagai platform blog yang kaya fitur
• Mengimplementasikan berbagai best practice yang saya pelajari dari project dan pengalaman sebelumnya

#Improvement dari Versi Sebelumnya

Dibandingkan dengan versi sebelumnya, Website Portofolio V3 membawa banyak peningkatan, antara lain:

• Perombakan desain UI/UX agar lebih modern dan minimalis
• Penggunaan reusable components secara konsisten
• Implementasi rich code block menggunakan Shiki dan Rehype untuk konten teknis
• Dukungan internationalization (i18n) untuk multi-bahasa
• Fitur search, pagination, dan filtering menggunakan tags
• Struktur konten yang lebih rapi untuk blog dan project

#Arsitektur & Teknologi

Website ini dibangun menggunakan teknologi modern dengan pendekatan yang terstruktur:

• Next.js sebagai framework utama
• TypeScript untuk type safety dan maintainability
• TailwindCSS dan Shadcn UI untuk sistem desain dan komponen UI
• MDX untuk menulis konten blog dan project secara fleksibel
• TanStack Query untuk pengelolaan data asynchronous
• Framer Motion untuk animasi ringan dan interaksi UI

Untuk observability dan analytics, website ini terintegrasi dengan:

• Umami
• Google Analytics
• PostHog

#Automation & Release Workflow

Website Portofolio V3 juga dilengkapi dengan workflow automation yang dibangun berdasarkan best practice CI/CD.

Konsep Pipeline CI/CD

#CI/CD Pipeline

Overview CI/CD

CI/CD Pipeline, singkatan dari Continuous Integration (CI) dan Continuous Delivery/Deployment (CD), adalah sebuah proses automation yang melancarkan pengembangan software dari perubahan kode ke deployment. Proses ini mengotomatiskan langkah-langkah build, test, dan deployment, memungkinkan developer untuk melakukan release perubahan kode secara lebih sering, andal, dan aman. Pipeline ini berjalan secara otomatis setiap kali kode diperbarui di central repository, dan terus berlanjut melalui berbagai tahap hingga kode tersebut aktif di lingkungan production.

Pipeline CI/CD pada project ini mencakup:

• Build & Test Pull Request Check
• Automatic tagging & release menggunakan semantic versioning berdasarkan rule conventional commit
• Build & Push Container Image ke GitHub Container Registry (GHCR)
• Deployment otomatis ke Vercel

#Semantic Versioning

Komponen Semantic Versioning

Semantic Versioning (SemVer) adalah standar penomoran versi software yang didefinisikan pada semver.org. Tujuannya adalah untuk menghindari dependency hell dan memastikan kompabilitas antar-versi dapat dipahami secara konsisten oleh developer maupun pengguna. Semantic Versioning ditulis menggunakan format:

MAJOR.MINOR.PATCH

Terdapat 3 komponen utama:

• MAJOR — Naik ketika terdapat perubahan yang tidak backward compatible (breaking change). Contoh: v1.5.7 → v2.0.0
• MINOR — Naik ketika terdapat penambahan fitur baru yang masih backward compatible. Contoh: v1.5.7 → v1.6.0
• PATCH — Naik ketika terdapat perbaikan bug atau perubahan kecil yang masih backward compatible. Contoh: v1.5.7 → v1.5.8

#Conventional Commit

Conventional Commit adalah konvensi commit message yang terstandarisasi dan erat kaitannya dengan semantic versioning. Commit message inilah yang akan mendeteksi level mana yang harus di bump (MAJOR, MINOR, atau PATCH). Beberapa aturan commit message yang umum digunakan:

• BREAKING CHANGE — Bump ke versi MAJOR. Contoh:

  plaintext

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

• feat() — Bump ke versi MINOR. Contoh:

  plaintext

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

• fix() atau hotfix() — Bump ke versi PATCH. Contoh:

  plaintext

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

#Git Flow (SDLC)

Konsep Git Flow

Semantic Versioning sering digunakan bersamaan dengan Git Flow, sebuah model branching pada Git yang membantu menjaga konsistensi versi software sesuai dengan tahapan dalam software development life cycle (SDLC). Dalam Git Flow, terdapat beberapa penamaan branch yang umum digunakan:

• dev atau development — Digunakan oleh developer atau QA sebelum tahap UAT. Release version umumnya diberi label beta, misalnya v1.5.7-beta.N
• staging — Digunakan ketika feature atau bug fix dianggap stabil dan siap untuk UAT. Release version biasanya diberi label rc (Release Candidate), misalnya v1.5.7-rc.N
• main — Digunakan ketika feature atau bug fix sudah lolos UAT dan siap untuk production. Release version tidak memiliki label tambahan, misalnya v1.5.7

Workflow ini membantu menjaga kualitas kode, konsistensi rilis, dan kemudahan maintenance.

#Open Source & Velora

Walaupun repository Website Portofolio V3 bersifat closed-source, saya tetap menyediakan versi open-source dalam bentuk template blog bernama Velora.

Velora dapat diakses melalui:

Live demo: velora-example.vercel.app

Repository: github.com/armandwipangestu/velora

#What I Learned

Melalui pengembangan Website Portofolio V3, saya mendapatkan banyak pembelajaran, antara lain:

• Merancang arsitektur frontend yang scalable dan reusable
• Mengelola konten teknis menggunakan MDX dengan rich code block
• Implementasi multi-language support (i18n) di Next.js
• Mengintegrasikan berbagai tool analytics dalam satu platform
• Membangun workflow CI/CD dan release automation untuk project frontend

#Mengapa Project Ini Penting

Website Portofolio V3 bukan hanya sekadar situs personal, tetapi juga menjadi:

• Representasi kemampuan teknis saya secara end-to-end
• Media eksperimen dan implementasi best practice frontend modern
• Fondasi untuk pengembangan project dan konten di masa depan

#Kesimpulan

Website Portofolio V3 merupakan hasil iterasi dan improvement berkelanjutan dari versi sebelumnya, dengan fokus pada kualitas desain, arsitektur kode, dan pengalaman pengguna.

Project ini mencerminkan pendekatan saya dalam membangun aplikasi web modern yang maintainable, scalable, dan siap dikembangkan lebih lanjut, serta memperkuat skill saya di bidang Software Engineering, khususnya pada pengembangan frontend dan full-stack web application.