creative-portfolio

byDiana Harrison

Kamu Senior Creative Frontend Engineer + Art Director. Bangun website one-page portfolio Jassinta Roid Triniti (Social Media Specialist, Content Creator, Videographer, Graphic Designer), siap deploy Vercel. Tema: playful, girly, textured (loker sekolah, kertas, sticker, scrapbook). ## 2. DESIGN SYSTEM Token warna (hex tanpa #; CSS vars + Tailwind): - Pink: hot-pink FF2E93, barbie-pink E91E8C, raspberry D81B72, bubblegum FF8DC7, candy-pink FFB3D9, blush FFD6E8, rose-quartz F7CAD0, powder-pink FDE4EC, dusty-rose E8A5B8, cherry-red E5173F, lipstick-red C8102E, coral-pop FF6F6F, peach-fizz FFB38A, apricot FFD3B0 - Ungu: lavender BFA8E5, lilac D4C1F5, wisteria A98BDA, orchid DA9AF2, grape-soda 7B4FB8, berry 7A2E5C, aubergine 4B1D4F, plum-night 2A0F2E - Mint/biru: mint-cream D4F2E4, pastel-mint A8E6CF, matcha B7D9A8, sage A9C4A0, baby-blue BFE3F5, sky-pastel A7D8F5, periwinkle B8C4F2, notebook-blue 8FB8E8, steel-lilac B9B8CC - Kertas: butter FFF1A8, lemon-chiffon FFF6C9, vanilla FFF8EE, aged-paper F3E3B8, honey F6D76B, milk-white FFFDF9, pure-white FFFFFF - Netral: ink 1B1017, espresso 2B1B17, cocoa 5A3A2E, walnut 7A4A32, pearl F4EFF1, warm-grey D9D3D6, chrome C9CCD5, gold D4A64A, champagne EBD08C, staple-red D7263D - Gradient: plum-night 160° 2A0F2E→4B1D4F→7A2E5C; cotton-candy FFD6E8→E3D4FA→CDEBF8; bubblegum FF8DC7→FF2E93; lilac-mint D4C1F5→D4F2E4 Latar: Writing hero powder-pink; Cassette blush→lilac; Content Marketing/Archive/Contact plum-night + film grain; Strategy hero lilac; Campus vanilla + rak walnut; Podcast blush; Personal Brand pure-white (wajib). Tipografi: - Headline: Sentient `clamp(2.1rem,1.2rem+3.6vw,4.125rem)`, lh 1.02, balance. - Narasi: Poppins italic `clamp(1rem,.85rem+.7vw,1.556rem)`, maks 58ch, jarak 1.5rem. - Anton untuk teks raksasa, Caveat untuk surat, DM Mono untuk label. Tekstur (ringan): grain SVG feTurbulence (multiply .06–.10; gelap screen .05), paper grain, glitter pink, sticker die-cut, washi, kertas bergaris. Komponen: `HoverLabel` (price-tag kertas), `StickerButton`, `Pushpin`, `PaperNote`, `PhotoFrame` (selalu contain), `TornEdge`, `TocOverlay`/`TocInline`, `SectionHero`, `Overlay` (focus trap, Esc, hash `#/participation`, role=dialog, body lock), `Carousel` (panah, drag, keyboard, titik). `TornEdge`: SVG noise 3 oktaf ber-seed per section, menyatu dengan latar, serat putih offset 3–8px, drop-shadow, tinggi `clamp(36px,6vw,90px)`. Hanya di bawah Opening-terbuka, Cassette, Content Marketing, Video Reveal, Campus, Archive. ## 3. NAVIGASI Urutan: Opening, Personal Brand, Writing Portfolio, Content Marketing Specialist, Example Strategy, Project Campus, Podcast, Archive, Contact. ToC = daftar, klik smooth scroll, aktif ditandai pink (IntersectionObserver). Contents: kanan bawah di Cassette & Video Reveal; kanan atas di Content Marketing, Archive, Contact; sisanya tombol mengambang kanan atas; Opening-terbuka pakai `TocInline` 2 kolom. Scroll terkunci selama loker tertutup. Footer DM Mono: 2026 | Jassinta Roid Triniti | Creative Portfolio. ## 4. RESPONSIF & PERFORMA Breakpoint <480, 768, 1024, 1440, ≥1920 (max-width). Pakai svh/dvh, safe-area, clamp, container query. Efek mouse hanya `hover:hover`; sentuh punya padanan tap ≥44px. Hormati reduced-motion. Layout dihitung ulang (ResizeObserver + visualViewport, debounce 100ms). `overflow-x: clip`. Rasio media selalu asli. Lazy load; video play hanya saat terlihat (maks ~6). `React.lazy` untuk Flipbook, Magazine, Archive. Lighthouse mobile: Perf ≥70, A11y ≥90. Keyboard penuh, aria-label, focus pink 3px, alt Inggris. ## 5. ASET `public/assets/{items,locker,video,img,strategy,photos,achievements,brand,pdf}`; nama huruf kecil tanpa spasi (`vintage_cindy_1..17.jpg`, `logo_1..10.png`, `foto_jassinta_duduk.png`, `comic_rush.pdf`). ## 6. OPENING TERTUTUP 5 loker CSS 3D, pintu rasio 1090:2500, tinggi 80–88svh, terluar boleh terpotong. HP: 1 loker/layar, scroll-snap horizontal + titik 1–5. Volume nyata: langit-langit, 3 dinding, rak tebal, rangka, pintu slab, ventilasi cekung, gagang/kunci/nomor timbul. Warna steel-lilac, perspective 1800px, parallax ±3°, idle sway di HP. Loker tengah, Sentient 4 baris (ukuran cqw), tiap kata di blok warna rotasi ±1–2°: - "Content that" Regular: bubblegum, baby-blue - "is Felt," Bold Italic: butter, lilac - "Shared," Bold: pastel-mint - "Remembered" Italic: peach-fizz Tombol "OPEN ▶". Klik: confetti ≤24, paper-wipe pink glitter 500–700ms, ganti scene, barang pop-in bertahap, scroll-lock lepas, fokus pindah. Reduced-motion: crossfade 250ms. Tanpa TornEdge. ## 7. LOKER TERBUKA - L1: pintu + kartu "I Can Help You With:" Social Media Manager, Social Media Strategy, SEO Writing, Video Content, Graphic Designer, Editorial Planning, Copywriting, etc - L2 (tanpa pintu): Sertifikat (rak atas), Piala (kanan, depan sertifikat), Majalah (belakang kamera, tidak melayang), Kamera (rak 2), Sepatu (bawah). - L3: pintu + kartu video `intro_video.mp4` 1080×1920 tanpa crop. Muted autoplay, "Tap for sound", tombol mute/pause, berhenti saat keluar layar. - L4 (tanpa pintu): Polaroid (rak atas, menggantung), Surat (kanan bawah), Notes (bawah surat), Buku (kiri-tengah), Payung (bersandar), Tas (bawah). - L5: pintu + kartu "Platform I Am Proficient in:" Instagram, TikTok, Facebook, Google Business Profile, Canva, Capcut, Adobe Suites. Kartu memenuhi pintu, teks wrap, judul Sentient bold, daftar Poppins + ikon hati/bintang pastel. L2/L4: badan candy-pink, interior berry→aubergine, rak blush. Pintu bergantian lilac/candy-pink/pastel-mint. Dinding powder-pink, lantai rose-quartz, confetti statis. Footer + TocInline + TornEdge. Barang: ekstrusi 4–10 layer translateZ, bayangan kontak, tilt parallax, bertumpu di rak. Hit-test alpha >20 (siluet); hover/fokus ikut siluet (naik 6–10px, +3%, glow pink, HoverLabel). HP: tap 1 = label, tap 2 = buka. Fallback SVG/CSS. Polaroid, payung, tas, sepatu = dekorasi tanpa label. Pemetaan (semua pakai `Overlay`): Sertifikat→Participation, Piala→Achievement, Majalah→Magazine Art, Kamera→Photography, Surat→My Message, Buku→My Strategy, Notes→Notes. Halaman: - Participation/Achievement: carousel foto berbingkai putih di kertas aged-paper + Pushpin, bingkai ikut rasio asli, judul + tahun aktif di bawah. Data `achievements.ts` (category, title, year, file, width, height): 5 Participation + 3 Achievement. - My Message: amplop terbuka, kertas bergaris biru + margin pink + lubang binder, Caveat ≥22px (HP ≥19px), scroll dalam kertas. Naskah persis lampiran; kutipan stabilo blush; penutup "Let's create something worth remembering" Sentient bold italic hot-pink; tanda tangan. - Magazine Art: judul "Let's put together a fashion magazine!". Buku page-flip 4 lembar (8 sisi), sampul pink; HP 1 halaman. Layer kolase per halaman. Baki 3 tab: Photos (17 foto, tanpa bingkai); Text (VOGUE Bodoni Moda, Fashion Pinyon Script, OOTD Bebas Neue, warna bisa diganti); Elements (13 SVG: ribbon, kamera pastel, sparkle, butterfly, lips, perfume, heel, pearls, rose, washi, cherries, tiara). Interaksi: klik = tambah, drag, handle skala/rotasi/hapus/z-order, pinch, clamp, undo/redo, clear, save PNG. - Photography: carousel 17 foto di kertas + pin, tanpa crop (desktop 3–4, tablet 2–3, HP 1.2–1.5). Credit DM Mono: Model: Chindy; Photograph & Editing: Jassinta Roid Triniti. - My Strategy: flow scrapbook, jalur putus-putus pink, sticky note + ikon + nomor besar, animasi scroll, panah siklus ke langkah 1, detail hover/tap. Intro: "My strategy for managing social media content usually consists of several stages." 7 langkah: Define the Target Market, Define the Style Guide, Build the Content Plan, Shoot & Record, Edit to the Style Guide, Post on Schedule, Analyze & Optimize (chip Engagement, Awareness, Conversion). - Notes: buku spiral Caveat: "The 3 Keys to Marketing & Content Success: Awareness, Engagement, Conversion", stabilo beda warna. ## 8. PERSONAL BRAND (pure-white) - Struktur: `PersonalBrand > Hero, DocumentCanvas > Document×10 > Logo`, `data.ts`. - Anton rata kiri, lh .9, `clamp(3.5rem,2rem+9vw,11rem)`: WHICH / COMPANIES / HAVE I / WORKED / FOR?, parallax lambat. Foto kanan, parallax medium. - 10 kertas fisik: border 1px hitam, bayangan 3–4 lapis, grain, rotasi -3,4,-5,2,3,-2,5,-4,1,-3, "01 / 10", tag, REF-ARC-00X, staple staple-red, logo contain + fallback monogram. - Perusahaan: Elsthetic, Elspresso, Aishi Aesthetic Academy, Karamina Tour, ELS Corp, Aishi Beauty, Lassiewear, inNalar.com, Independen Media, Ikapunija Media. Tidak boleh ada logo tertutup. - Desktop: parallax rAF + lerp; hover naik 8px, rotasi ±1.5°, nomor/tag cherry-red. HP: 2 kolom, parallax off. ## 9. WRITING PORTFOLIO - Hero: "Storytelling" Bold Italic + "Through Screens" Bold; narasi dari lampiran. 6 gambar 1:1 (imn_1,2; innalar_1,2; ikapunija_1,2), lebar `clamp(110px,19vw,280px)`, bingkai putih, rotasi ±9°, safe zone teks, reveal clip-path stagger 120ms, float. Tablet 4, HP 2+2. - Cassette: disc bulat 3D (tepi tebal, spindle hole, gambar sebagai mask). Tengah besar dan berputar pelan; samping kecil (rotateY, translateZ, blur 1px). Panel info kiri-atas (judul, Author, Date DD/MM/YYYY, Media) update slide-up + fade; judul besar di bawah. Navigasi wheel/drag/panah/keyboard + snap. Klik = link tab baru (`noopener noreferrer`); tanpa link (9–11) = lightbox + chip "No online link". Contents kanan bawah, TornEdge. HP: info di atas. - 11 karya: Independen Media ×4, innalar.com ×4, Ikapunija Media ×3 (2024, tanpa link). Judul, tanggal, URL dari lampiran. ## 10. CONTENT MARKETING ## 11. EXAMPLE STRATEGY ## 12. PROJECT CAMPUS ## 13. PODCAST ## 14. ARCHIVE (plum-night) ## 15. CONTACT (plum-night + grain + glow bubblegum)