magma-portfolio

byRena Mizunashi

C0. PERAN & ATURAN KERJA UNTUK AI Kamu adalah Senior Creative Frontend Engineer + Art Director. Tugasmu: membangun website portfolio one-page untuk Jassinta Roid Triniti (Social Media Specialist, Content Creator, Videographer, Graphic Designer) sebagai web app siap deploy ke Vercel. Aturan kerja (wajib): Ikuti spesifikasi ini secara harfiah dan lengkap. Jangan merangkum, menyingkat, atau menghilangkan fitur. Jika sebuah fitur sulit, bangun versi terbaik yang mungkin lalu beri komentar // TODO: yang jelas — jangan menghapusnya diam-diam. Semua teks yang tampil di website: Bahasa Inggris penuh. Semua kode, nama variabel, nama komponen, dan komentar kode: Bahasa Inggris. (Judul karya/artikel tertentu memang berbahasa Indonesia karena itu judul aslinya — tampilkan apa adanya.) Bangun modular: satu komponen per section, data terpisah di src/data/*.ts. Jangan menaruh data konten di dalam komponen. Jika ada hal ambigu, pilih keputusan yang tertulis di spesifikasi; jika belum tertulis, pilih opsi yang paling dekat dengan tema (girly, playful, textured) dan catat keputusannya di DECISIONS.md. Kerjakan bertahap bila diminta ("Stage N"). Saat mengerjakan satu stage, jangan mengubah file section lain kecuali untuk integrasi minimal. Aset (gambar/video/PDF) dipanggil lewat path /assets/... (lihat C5). Jika file belum ada, tampilkan fallback yang rapi (bukan ikon rusak, bukan teks error) sesuai aturan tiap section. Tidak ada API key di sisi klien. Website ini tidak membutuhkan API apa pun. Setelah selesai tiap stage, tulis ringkasan singkat: apa yang dibuat, apa yang masih TODO, dan cara mengetesnya. C1. RINGKASAN PROYEK & TEKNOLOGI Jenis: One-page website (satu halaman panjang). Tidak ada page reload. Navigasi antar bagian memakai scroll halus + daftar isi. Halaman "pop-up" barang di loker (Participation, Achievement, dll.) berupa overlay layar penuh (bukan route baru), dengan tombol tutup, tombol Esc, dan dukungan tombol Back browser (gunakan hash seperti #/participation). Tema: playful, girly, textured. Elegan namun ceria; terasa seperti loker sekolah, kertas, sticker, majalah, dan scrapbook. Stack wajib: React 18 + Vite + TypeScript + Tailwind CSS Animasi: Framer Motion (atau GSAP + ScrollTrigger bila lebih cocok untuk scroll-driven). Pilih satu pendekatan konsisten per kebutuhan. Smooth/inertial scroll: Lenis (atau setara) — harus bisa dimatikan pada saat scroll-lock di Opening dan saat overlay terbuka. Flipbook: page-flip (StPageFlip) atau react-pageflip; render PDF dengan pdfjs-dist. 3D loker: CSS 3D transforms (perspective, transform-style: preserve-3d), BUKAN Three.js (agar ringan di HP). Font: Fontshare (Sentient), Google Fonts (lainnya). Build menghasilkan folder dist/ (static) agar bisa di-deploy ke Vercel tanpa server. Prinsip kualitas: 60fps pada laptop menengah; tidak ada horizontal scrollbar yang tidak disengaja; tidak ada elemen keluar dari container; tidak ada layout shift besar. C2. DESIGN SYSTEM C2.1 Palet warna lengkap (gunakan sebagai tone warna seluruh website) Definisikan sebagai CSS variables di :root dan sebagai warna kustom Tailwind. Nama token = nama di tabel. Pink (warna utama girly) Token Hex Pemakaian --hot-pink #FF2E93 Tombol utama, glow reveal, aksen kuat (terinspirasi referensi Elle) --barbie-pink #E91E8C Hover tombol, teks aksen, sticker --raspberry #D81B72 Garis aksen, ikon --bubblegum #FF8DC7 Blok highlight, badge --candy-pink #FFB3D9 Badan loker terbuka, sticker --blush #FFD6E8 Latar section lembut, blok highlight --rose-quartz #F7CAD0 Kartu, kertas --powder-pink #FDE4EC Latar section terang --dusty-rose #E8A5B8 Bayangan berwarna, detail --cherry-red #E5173F Warna merah headline italic (The Campus, The Story, The Microphone), staple, pin --lipstick-red #C8102E Elemen majalah (bibir, pita) --coral-pop #FF6F6F Aksen playful --peach-fizz #FFB38A Blok highlight, label --apricot #FFD3B0 Highlight lembut Ungu / Lavender Token Hex Pemakaian --lavender #BFA8E5 Amplop, kartu, loker --lilac #D4C1F5 Latar section, blok highlight --wisteria #A98BDA Aksen sekunder --orchid #DA9AF2 Glow, gradient --grape-soda #7B4FB8 Teks di atas pastel --berry #7A2E5C Interior loker terbuka, panel gelap hangat --aubergine #4B1D4F Gradient gelap --plum-night #2A0F2E Latar gelap utama ("plum night gradient") Mint / Hijau / Biru pastel Token Hex Pemakaian --mint-cream #D4F2E4 Latar lembut --pastel-mint #A8E6CF Blok highlight, kamera, kartu --matcha #B7D9A8 Detail tanaman/aksen --sage #A9C4A0 Aksen netral --baby-blue #BFE3F5 Blok highlight, ikon --sky-pastel #A7D8F5 Aksen --periwinkle #B8C4F2 Aksen --notebook-blue #8FB8E8 Garis kertas bergaris --steel-lilac #B9B8CC Loker tertutup (logam abu-lavender) Kuning / Krem / Kertas Token Hex Pemakaian --butter #FFF1A8 Blok highlight, sticky note --lemon-chiffon #FFF6C9 Highlight lembut --vanilla #FFF8EE Latar krem hangat --aged-paper #F3E3B8 Kertas kekuningan (papan pin foto) --honey #F6D76B Aksen --milk-white #FFFDF9 Kertas putih, teks di atas gelap --pure-white #FFFFFF Kanvas Personal Brand (wajib pure white) Netral & Logam Token Hex Pemakaian --ink #1B1017 Teks utama --espresso #2B1B17 Teks pada kertas --cocoa #5A3A2E Detail kayu/cokelat --walnut #7A4A32 Gagang payung, rak kayu --pearl #F4EFF1 Netral terang --warm-grey #D9D3D6 Garis, bayangan --chrome #C9CCD5 Logam (gagang, kunci, ventilasi) --gold #D4A64A Bingkai, piala --champagne #EBD08C Highlight emas --staple-red #D7263D Staple/pin di kertas Gradient bernama --grad-plum-night: linear-gradient(160deg, #2A0F2E 0%, #4B1D4F 55%, #7A2E5C 100%) --grad-cotton-candy: linear-gradient(135deg, #FFD6E8 0%, #E3D4FA 50%, #CDEBF8 100%) --grad-bubblegum: linear-gradient(135deg, #FF8DC7 0%, #FF2E93 100%) --grad-lilac-mint: linear-gradient(135deg, #D4C1F5 0%, #D4F2E4 100%) C2.2 Peta warna per section Section Latar Teks Aksen Opening (tertutup) Dinding ruang --pearl→--warm-grey; loker --steel-lilac --ink Blok kata warna-warni, tombol --hot-pink Opening (terbuka) Loker --candy-pink; interior --berry; rak --blush --ink / --milk-white --hot-pink Personal Brand --pure-white --ink --cherry-red, kertas dokumen putih Writing Portfolio hero --powder-pink + grain --ink --hot-pink Cassette disc --blush→--lilac + grain --ink --hot-pink Content Marketing --grad-plum-night + film grain --milk-white glow --hot-pink Example Strategy hero --lilac + grain --ink --hot-pink Example Strategy video reveal --grad-plum-night, lantai pink-checker --milk-white --hot-pink Project Campus --vanilla + rak kayu --walnut --ink --cherry-red Podcast --blush --ink --cherry-red Archive --grad-plum-night --milk-white --hot-pink Contact --grad-plum-night + glow --milk-white --bubblegum C2.3 Tipografi Peran Font Fallback Display / headline serif Sentient (Fontshare) — Regular, Italic, Bold, Bold Italic 'Fraunces', Georgia, serif Body/narasi Poppins italic untuk narasi (ukuran 24,9px maks), Poppins regular 400/500/600 untuk UI system-ui, sans-serif Giant sans (Personal Brand) Anton (ultra-bold condensed) 'Archivo Black', Impact, sans-serif Handwriting (surat) Caveat (terbaca jelas) 'Patrick Hand', cursive Script "Fashion" (majalah) Pinyon Script 'Great Vibes', cursive VOGUE elegan Bodoni Moda 700–900 (atau Playfair Display) serif OOTD tegas Bebas Neue Oswald, Impact, sans-serif Label/typewriter (kartu arsip, tag, kredit) DM Mono / Special Elite monospace Caption polaroid Permanent Marker atau Caveat cursive Muat Sentient via Fontshare, mis. https://api.fontshare.com/v2/css?f[]=sentient@300,301,400,401,500,501,700,701&display=swap (periksa nomor varian di halaman Sentient di fontshare.com; angka ganjil = italic). Tambahkan font-display: swap, preconnect, dan fallback agar tidak ada layout shift. Aturan ukuran fluid (maks desktop → min mobile): Headline 66px: font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.125rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance. Narasi 24,9px: font-size: clamp(1rem, 0.85rem + 0.7vw, 1.556rem); Poppins italic; line-height: 1.5; text-wrap: pretty; lebar maksimum ~58ch. Jarak narasi dari headline: --headline-narration-gap: 1.5rem.