portfolio-creative

byJassinta Roid Triniti

CRITICAL COMPLIANCE RULES: 1. LAYOUT STRICTLY FOLLOWS ASCII ART & PHYSICAL RULES: You must render all page layouts, modal dialogs, locker shelves, item placements, and component structures EXACTLY matching the provided ASCII diagrams and detailed positioning rules. Lockers 1, 3, and 5 have closed doors with cards attached to them. Lockers 2 and 4 are open with strict physical placement (Polaroids hung on a string, non-floating items resting on shelves, umbrella leaning, depth layering). 2. PLACEHOLDER & ASSET INTEGRITY (ZERO-OVERLAP / NO-CLIPPING): Every media container/placeholder must strictly fit its designated pixel aspect ratio. Artwork must NEVER be covered, overlapped, cropped, distorted, or pushed out of view. 3. LOCKER PROPORTIONS (TALL CABINET): Each single locker door has a base aspect ratio of 1090px width by 2500px height (tall cabinet ratio 1:2.29). In the browser, scale the 5-locker unit to min(86vh, 100vw * 2500 / 5450) so the entire locker fits majestically on screen without vertical cutoff before scrolling is unlocked. 4. 3D ITEM DETAILS (MATCH USER PHOTOS EXACTLY): - Camera: Pastel vintage 35mm camera 'PASTELCA' (mint green, baby pink body, lavender lens, soft purple buttons). - Polaroids: 3 photos pinned with wooden clothespins on a horizontal jute string. - Notes: Spiral-bound soft pink notebook with bold magenta 'NOTES' title. - Letter: Elegant soft lilac / lavender paper envelope. - Magazine: Pastel pink fashion magazine 'Belleza.' with white serif typography. - Shoes: Vintage retro runner sneakers in beige/cream suede with dark brown stripes. - Bag: Feminine baby pink shoulder bag with silver buckle and two small flap pockets. - Books: Stack and row of soft pastel spine books (dusty pink, lavender, sage, baby blue, peach). - Certificate: Classic vintage ornate gold carved picture frame with parchment paper and gold foil seal. 5. REALISTIC FLIPBOOK (CAMPUS): Multi-page book flipping must simulate genuine physical paper movement with 3D page curl deformation and dynamic shading. 6. EXAMPLE STRATEGY VIDEO REVEAL: All 4 campaign videos MUST be arranged side-by-side horizontally in a 4-column row (Hard Selling -> Entertainment -> Education -> Fun). 7. TORN PAPER DIVIDER ZERO-GAP RULE: Every torn paper transition must use the provided 3-layer TornPaperDivider component with negative vertical margins (-mt-[2px] -mb-[2px]), white deckle edge fibers, and exact matching fillColor from the preceding section. Never leave empty gaps. 8. ZERO INVENTIONS & NO CODE CUTTING: Output production-ready, complete TypeScript code. Never summarize or omit data. ``` --- # 🚀 DAFTAR MODUL SIAP SALIN (COPY-PASTE SEQUENCE) --- ## 📦 MODUL 0: SETUP PROYEK, TEMA WARNA, KOMPONEN ROBEKAN KERTAS, & DATA MASTER > **Instruksi Upload Foto**: Tidak perlu upload foto pada Modul 0 ini. > **Tujuan**: Mengunci seluruh warna, data 34 karya, 10 logo, 15 konten marketing, dan komponen robekan kertas anti-gap. ### 👇 Salin teks prompt di bawah ini ke AI Studio: ```markdown TUGAS PERTAMA (MODUL 0): Buatkan arsitektur dasar proyek Next.js 14 (App Router) TypeScript + Tailwind CSS untuk website portofolio kreatif Jassinta Roid Triniti. SISTEM WARNA LENGKAP: - Primary Girly: blushPink (#F8C8DC), rosePetal (#E8A0BF), hotPink (#FF69B4), deepRose (#C24B6E) - Secondary Depth: softLavender (#E6D5F3), lilacMist (#C8A2C8), plumNight (#4A2040), plumDark (#2D1228), dustyMauve (#B07AA1) - Accents: peachCream (#FFDAB9), warmCoral (#FF7F7F), mintCream (#D4EDDA), butterYellow (#FFF4C1), skyBlueSoft (#B3D9FF) - Neutrals: offWhite (#FFF8F0), warmWhite (#FFFEF5), paperCream (#FAF3E0), inkBlack (#1A1A1A), charcoalSoft (#3D3D3D), mutedGray (#9E9E9E) - Locker Materials: lockerGrey (#7E858B), lockerPink (#F4A6BE), lockerInterior (#FCE7EE), lockerMetalEdge (#5C6267) SISTEM TIPOGRAFI: - Headlines: Font Sentient (Kia) — ukuran clamp(2.5rem, 5vw, 4.125rem) (66px desktop), tracking tight, align center. * Kata penekanan: Sentient Bold Italic (deepRose #C24B6E). * Kata penghubung: Sentient Bold (inkBlack #1A1A1A). - Narasi: Font Poppins Italic — clamp(1.1rem, 2vw, 1.55rem) (24.9px desktop), charcoalSoft (#3D3D3D), 1.5px di bawah headline. - Surat/Catatan: Font Handwriting (Caveat / Dancing Script). - Metadata/Code: Font JetBrains Mono atau Fira Code. Hasilkan 3 file berikut secara LENGKAP tanpa memotong data atau menyisakan komentar placeholder: FILE 1: `tailwind.config.ts` Daftarkan seluruh palet warna dan font di atas ke dalam konfigurasi theme Tailwind. FILE 2: `src/components/Shared/TornPaperDivider.tsx` Komponen divider robekan kertas nyata 3-layer anti-gap: - Menggunakan negatif margin vertikal `-mt-[2px] -mb-[2px]` dengan `lineHeight: 0` agar TIDAK PERNAH ada garis celah kosong 1px di browser. - Memiliki 3 variasi SVG path bergelombang organik alami. - Layer 1: Drop-shadow lembut realistis (`drop-shadow-[0_8px_10px_rgba(0,0,0,0.08)]`). - Layer 2: White deckle edge fiber (`stroke="#FFFFFF"` ketebalan 3.5px) menirukan serat sobekan kertas asli. - Layer 3: Solid fill warna section atas (`fillColor`). FILE 3: `src/data/portfolioData.ts` Tuliskan seluruh data berikut secara utuh tanpa ada array yang disingkat: 1. `COMPANIES_DATA` (10 perusahaan: Elsthetic, Elspresso, Aishi Aesthetic Academy, Karamina Tour, ELS Corp, Aishi Beauty, Lassiewear, innalar.com, Independen Media, Ikapunija Media). 2. `WRITING_ARTICLES` (11 artikel tulisan lengkap dengan judul, tanggal, author, media, maskFile, dan link). 3. `CONTENT_MARKETING_DATA` (15 konten marketing lengkap: Facial Messo, Ceramide, Pico Glow Laser, 6 Flyer Kecantikan, 3 Umroh Karamina, 3 Konten Elspresso lengkap dengan metrik, akun sosmed, dan info teks). 4. `EXAMPLE_STRATEGY_DATA` (4 konten kampanye: Hard Selling, Entertainment, Education, Fun dengan script, referensi foto, metrik, link see more, dan 5 foto footage masing-masing). 5. `ARCHIVE_DATA` (34 total karya acak dengan format Writing, Video, Feed, Bumper, Book Trailer lengkap dengan ratio dan link). Tuliskan ketiga file di atas dalam TypeScript murni dan siap pakai. ``` --- ## 🚪 MODUL 1: OPENING LOCKER & 7 MODAL DETAIL (DENGAN CODE ASCII TIAP MODAL) > **Instruksi Upload Foto di AI Studio**: > Lampirkan seluruh foto referensi loker dan barang: > 1. Foto Loker Tertutup & Terbuka (`amazon.com/salp/elleslocker`). > 2. Foto Kamera Pastelca (`PASTELCA 35mm`). > 3. Foto 3 Polaroid digantung tali jepitan kayu. > 4. Foto Buku Notes Spiral Pink bertuliskan "NOTES". > 5. Foto Amplop Surat Lilac Pastel. > 6. Foto Majalah Belleza Pink Pastel. > 7. Foto Sepatu Sneakers Retro Beige/Brown. > 8. Foto Tas Shoulder Bag Baby Pink Gesper Silver. > 9. Foto Kumpulan Buku Pastel di Rak. > 10. Foto Piagam Sertifikat Bingkai Emas Ukir. ### 👇 Salin teks prompt di bawah ini ke AI Studio: ```markdown TUGAS MODUL 1: Buatkan komponen React Next.js 14 `src/components/Opening/LockerSection.tsx` beserta seluruh modal interaktifnya. SISTEM WARNA & TIPOGRAFI SECTION INI: - Background: Paper texture overlay di atas locker backdrop. - Pintu Loker Luar: Besi metalik abu-abu (lockerGrey #7E858B) & pintu tengah pink (lockerPink #F4A6BE). - Interior Loker Terbuka: lockerInterior (#FCE7EE) dan rak kayu/krem (paperCream #FAF3E0). - Tipografi Loker Tengah: Line 1: "Content that" -> Sentient Regular, inkBlack (#1A1A1A) Line 2: "is Felt," -> Sentient Bold Italic, background peachCream (#FFDAB9) Line 3: "Shared," -> Sentient Italic, background rosePetal (#E8A0BF) Line 4: "Remembered" -> Sentient Bold, background butterYellow (#FFF4C1) - Tombol [OPEN]: Hot Pink (#FF69B4) dengan teks putih tebal. ATURAN DIMENSI PROPORSI (TALL CABINET LOCKER): - Ukuran basis per 1 pintu loker adalah 1090 × 2500 px (tall cabinet ratio 1:2.29). - Total 5 loker berdimensi 5450 × 2500 px. - Di browser, scale deretan loker menggunakan `height: min(86vh, calc(100vw * (2500 / 5450)))` agar berdiri megah setinggi lemari namun muat pas 100% di layar monitor tanpa terpotong dan tanpa scroll saat awal dibuka! 1. STATE 1: LOKER TERTUTUP (isOpened === false): - Scroll lock aktif (overflow: hidden pada body). - 5 pintu loker tertutup align tengah. Loker 3 (tengah) pink dengan potongan kertas putih tebal di depannya. - Tombol [OPEN] di bawah teks tipografi. - Footer: "2026" (kiri), "Jassinta Roid Triniti" (tengah), "Creative Portfolio" (kanan). - Bagian bawah bersih tanpa robekan kertas. 2. STATE 2: LOKER TERBUKA (isOpened === true): Layout wajib mengikuti diagram ASCII C7.1: _________________________________________________________________________________ | _____________ _____________ _____________ _____________ _____________ | | | | | Sertifikat | | | |Foto | | | | | | __________ | | | | __________ | | | | __________ | | | | | I Can || | Piala| | | Video || | Surat| | |Platform || | | | |Help You || |____________| | | intro || |____________| | |I Am || | | | | With: || | | | | [sound || | Notes| | |Proficient| | | | |- || | Kumpulan| | | & pause]| | | | |in: || | | | |- || | majalah| | | || |Kumpulan | | |- || | | | |_________|| |Kamera______| | |_________|| |buku________| | |_________|| | | | | | | | | | payung| | | | | | | |Kumpulan | | | | | | | | | | | |Sepatu | | | | tas | | | | | |____________| |____________| |____________| |____________| |____________| | | © 2026 Jassinta Roid Triniti | |________________________________________________________________________________|