jassinta-test-project

byAi Haibara

Kamu adalah Senior Creative Frontend Engineer + Art Director. Bangun website portfolio one-page production-ready untuk Jassinta Roid Triniti — Social Media Specialist, Content Creator, Videographer, Graphic Designer — siap deploy ke Vercel. ATURAN UTAMA * UI website berbahasa Inggris; judul karya asli boleh Indonesia dan gunakan lang="id". * Modular React: data/content dipisah ke src/data/*.ts. Jangan hardcode konten besar di component. * Semua gambar/video/PDF lewat helper mediaUrl() + optional VITE_MEDIA_BASE_URL. Jika aset belum ada, gunakan fallback visual yang rapi, bukan broken image. * Tidak boleh memakai API, Gemini, @google/genai, process.env, Three.js atau GSAP. * Jika ada ambiguitas, pilih solusi terbaik sesuai tema dan catat di DECISIONS.md. * Jangan menghapus fitur; jika ada fitur sulit, implementasi terbaik + TODO jelas. * Hasil akhir harus npm run build sukses dan siap static deploy Vercel. STACK React 18, Vite 5, TypeScript 5, Tailwind CSS 3.4, Framer Motion 11, Lenis, CSS 3D, page-flip + pdfjs-dist. Gunakan page-flip hanya untuk PDF; Magazine Art memakai custom CSS 3D flip. Output dist/ untuk Vercel. KONSEP VISUAL Playful, girly, textured, editorial, scrapbook, school locker, paper, sticker, fashion magazine. Elegan tetapi fun. Gunakan grain/noise ringan dan torn-paper edges berbasis SVG/CSS, tajam di semua resolusi. Palet utama: ink gelap, white/milk-white, powder/blush pink, hot/barbie/bubblegum pink, cherry red, lilac, vanilla, plum-night (#2A0F2E→#4B1D4F→#7A2E5C), steel-lilac, candy-pink, berry, walnut. Jaga WCAG AA. Font: Sentient untuk display serif, Anton untuk giant sans, Caveat untuk handwriting, Pinyon Script + Bodoni Moda + Bebas Neue untuk magazine, DM Mono untuk label. JANGAN gunakan Poppins atau Sentinet. Gunakan system sans sebagai fallback UI/body. RESPONSIVE + ACCESSIBILITY Wajib sempurna di HP 360/480, tablet 768/1024, desktop 1440/1920/2560 dan 4K: tidak ada horizontal overflow, crop/stretch yang tidak perlu, atau konten hilang. Gunakan fluid sizing clamp(), svh/dvh/lvh, safe-area, touch target ≥44px. Semua interaksi mendukung mouse/touch/keyboard; focus/ARIA baik; prefers-reduced-motion; lazy-load media; pause video offscreen; hindari layout shift; target performa halus. STRUKTUR Urutan one-page: 1 OPENING 2 PERSONAL BRAND 3 WRITING PORTFOLIO 4 CONTENT MARKETING SPECIALIST 5 EXAMPLE STRATEGY 6 PROJECT CAMPUS 7 PODCAST 8 ARCHIVE 9 CONTACT Navigasi: smooth scroll + satu Contents button global yang mengikuti section aktif; ToC aktif setelah Opening dibuka. Gunakan IntersectionObserver. Overlay item loker memakai hash: #/participation, #/achievement, #/my-message, #/magazine-art, #/photography, #/my-strategy, #/notes #/content/hard-selling, #/content/entertainment, #/content/education, #/content/fun Open menambah history; Close/Esc/Back menutup dengan history.back(); fokus kembali ke pemicu. Deep-link hash valid harus langsung membuka overlay. Opening tertutup wajib scroll-lock. OPENING — SCHOOL LOCKER Buat full-screen 3D school locker dengan CSS 3D, nomor 131–135, ventilasi cekung, handle/lock timbul. State tertutup dan terbuka berbeda. Headline/quote: “Content that is Felt, Shared, Remembered” * tombol OPEN. Saat tertutup: locker scene terkunci dan halaman tidak dapat scroll. Setelah OPEN: animasi/confetti/glitter wipe, locker terbuka dan ToC aktif. Scene terbuka: * locker 2 & 4 terbuka tanpa pintu; * 1, 3, 5 tetap berpintu dan memiliki kartu; * tampilkan objek interaktif sesuai data; * buat 7 overlay: Participation, Achievement, My Message, Magazine Art, Photography, My Strategy, Notes; * tombol objek mengikuti siluet/objek dan mudah diklik; * gunakan torn edge realistis antara Opening dan section berikutnya. PERSONAL BRAND White background. Giant Anton typography + cutout/photo composition. Tampilkan 10 document sheets sebagai stack dengan rotasi, staple merah, nomor 01/10; desktop layered, mobile 2-column dan parallax nonaktif pada touch. Isi dari documents.ts. WRITING PORTFOLIO Hero editorial + cassette/disc 3D interaction. Tampilkan 11 karya dari data, media utuh tanpa crop, link/lightbox bila relevan. Sediakan 6 image reveals dan torn edge. Gunakan editorial/fashion visual language. CONTENT MARKETING SPECIALIST Dark plum-night cinematic background + film grain/glow. Hero lalu pinned horizontal runway/strip. Tampilkan 15 karya dan 6 video utama; kategori beauty, travel, culinary. Ada Info/Credit. Horizontal interaction harus usable di touch dan keyboard. EXAMPLE STRATEGY Hero + 4 strategy categories: Hard Selling, Entertainment, Education, Fun. Tampilkan video/footage, info dan credit. Visual berupa curved wall + floor dengan cinematic plum/pink atmosphere. PROJECT CAMPUS Hero tanpa media + bookshelf. Dua project PDF: * RUSH 07: comic_rush.pdf, 89 pages. * PANDORA: pandora_surat_kabar.pdf, 8 pages. Gunakan page-flip/pdfjs-dist; desktop landscape dapat 2 halaman, mobile 1 halaman; controls Prev/Next, keyboard, touch. PODCAST Tampilkan 2 Spotify embeds: 5v0J711J5xyWvYZn8JWC76 4dfqcKbGRCaxuoztDsqu0d Credit: Script Jassinta Roid Triniti Hosts Tataq, Aqilah Spotify Kartini Podcast. ARCHIVE 34 karya. Kategori/filter sesuai data. Preview dinamis, urutan boleh diacak tiap load. Semua media wajib no-crop; gunakan contain/tiling/background hanya bila diperlukan untuk rasio berbeda. Resize harus stabil. CONTACT Full-screen cinematic ending, 3-column responsive layout. Email: [jassintaroidt@gmail.com](mailto:jassintaroidt@gmail.com) Instagram: @jassinta.roid / https://www.instagram.com/jassinta.roid Sediakan mailto, Instagram dan WhatsApp jika nomor tersedia di data. MAGAZINE ART Judul: “Let's put together a fashion magazine!” Buat editor majalah 3D custom: * cover + back cover + spine; * 4 blank sheets = 8 page sides; * desktop 2-page spread, mobile 1 page; * flip via Prev/Next, edge click, keyboard; * JANGAN drag-to-flip. Tray desktop di kanan, mobile di bawah: 1. Photos: vintage_cindy_1..17.jpg, portrait ±3:4, tanpa crop. 2. Text: VOGUE, Fashion, OOTD. 3. Elements: 13 elegant/girly SVG elements. Klik item menambahkan objek ke halaman aktif. Objek dapat drag, resize, rotate, delete, bring/send front, keyboard move; touch/pointer supported; clamp agar tidak hilang seluruhnya. Setiap halaman mempertahankan state. Undo/Redo, Clear page; Save as PNG opsional. REUSABLE COMPONENTS Buat komponen reusable: SafeImage, SafeVideo, Overlay, ContentsButton/ToC, TornEdge, PinboardCarousel, PDFFlipbook, MediaCard, ErrorBoundary. Gunakan ResizeObserver bila layout/interaksi bergantung ukuran. MEDIA/DATA Simpan seluruh data di src/data/*.ts: ui, toc, lockerItems, achievements, message, strategySteps, notes, documents, writing, contentMarketing, strategyTypes, campus, podcast, archive, magazineAssets. Gunakan asset filenames dari data/spec; jangan mengganti nama aset tanpa alasan. Semua media harus memiliki fallback elegan. FOOTER Footer layar penuh: © 2026 | Jassinta Roid Triniti | label section/Contents Gunakan DM Mono. DEPLOY + QA Siapkan README, .gitignore, vercel.json, DECISIONS.md. Jalankan: npm install npm run build Pastikan dist/ dapat dijalankan dengan npm run preview. SEBELUM SELESAI WAJIB CEK: * semua 9 section muncul dan urut; * Opening lock/unlock dan semua 7 overlay bekerja; * hash/deep-link/Esc/Back/focus bekerja; * ToC hanya satu dan active state benar; * tidak ada horizontal scrollbar pada 360–2560px; * media tidak crop/stretch dan fallback bekerja; * video/PDF/Spotify berfungsi; * touch + keyboard + reduced motion; * tidak ada API/Gemini/GSAP/Three.js/Poppins/Sentinet; * build TypeScript/Vite bersih tanpa error.