Membangun ulang portofolio dengan Astro, Tailwind v4, tanpa library animasi

Sebagian besar situs portofolio lebih berat daripada karya yang ditampilkan. Saya ingin kebalikannya: situs yang selesai dimuat sebelum pengunjung memutuskan untuk lanjut membaca.

Sajikan HTML lebih dulu

Astro merender setiap halaman menjadi HTML statis saat build. Satu-satunya bagian interaktif di situs ini adalah filter proyek, yaitu satu island Preact yang di-hydrate dengan client:visible. Sisanya (navigasi, tombol tema, ganti bahasa) berjalan dengan tautan biasa dan beberapa baris CSS.

Tailwind v4 menghapus file config

Versi 4 memindahkan konfigurasi ke dalam CSS. Token desain berada di blok @theme, dan dark mode menjadi aturan @custom-variant, bukan objek konfigurasi JavaScript. Sekarang hanya ada satu tempat yang perlu dilihat saat sebuah warna salah, dan itu file yang sama yang mendefinisikan stylenya.

Yang saya hapus

Daftar hal yang tidak sepadan dengan bobotnya: library animasi, paket SEO, paket ikon, component library, dan warna aksen kedua. Setiap penghapusan membuat situs lebih kecil dan keputusannya lebih sederhana.

Hasilnya adalah situs tanpa framework runtime, tanpa hidrasi untuk membaca, dan tanpa proses build yang memakan waktu lebih dari satu detik.