PANDUAN PROMPT WEBSITE CHARISNICHOLAS.COM

Cara bikin website seperti punya saya di Claude, prompt per section.

Dokumen ini berisi prompt siap pakai untuk membangun personal website / portofolio entrepreneur seperti yang sudah jadi — dipecah per bagian, lengkap dengan tema, layout, dan efek animasinya. Kasih prompt-nya satu per satu, urut dari atas ke bawah.

Cara pakai dokumen ini

  1. Mulai dari Prompt 0 (Pondasi) — ini menetapkan tema, warna, dan font. Wajib dikasih paling awal.
  2. Lanjut section per section secara berurutan. Klik Copy, tempel ke Claude, tunggu jadi, baru lanjut yang berikutnya.
  3. Kalau hasilnya belum pas, minta revisi pakai bahasa biasa (“warnanya kurang gelap”, “fontnya lebih tebal”) — nggak perlu mulai dari nol.
  4. Siapkan foto & teks asli kamu (portrait, angka pencapaian, link sosmed) untuk ditempel saat diminta.
00

Pondasi: Tema, Warna & Font

Prompt pembuka yang menentukan “rasa” seluruh website: latar gelap plum, aksen gradien pink→coral, dan tipografi tebal. Selalu kasih ini paling pertama supaya semua section setelahnya konsisten.

Prompt 0 — Pondasi
Buatkan satu halaman website personal (portofolio entrepreneur) dengan tema gelap mewah: background ungu-plum nyaris hitam (#0a0810), teks putih, dengan aksen gradien dari pink (#ff4d8a) ke coral (#ff8158) untuk highlight dan tombol. Pakai font Inter (judul tebal 800–900, huruf rapat/tight) dipadu JetBrains Mono untuk label kecil. Tambahkan grain halus, glow radial lembut di latar, dan sudut-sudut membulat besar (rounded) pada kartu. Buat semua ukuran teks besar dan berani, dan pastikan responsif untuk HP.
Catatan tema: Sebut warna spesifik dan nama font di awal seperti ini. Itu kunci kenapa hasilnya konsisten — kalau nggak disebut, Claude akan menebak dan tiap section bisa beda gaya.
01

Navigasi (Header)

Bar atas yang menempel saat di-scroll dengan efek kaca buram.

Prompt 1 — Nav
Buat navbar sticky di paling atas dengan efek kaca buram (blur). Kiri: logo berupa kotak gradien pink-coral dengan inisial, lalu nama. Tengah: menu (Journey, About, Contact) huruf kapital kecil. Kanan: tombol pill gradien “Hire me”. Di HP, sembunyikan menu dan ganti dengan ikon hamburger.
02

Hero — Kartu Flip Scroll

Bagian pembuka: judul raksasa di kiri, dan di kanan ada kartu rose-gold yang membalik (flip 3D) saat di-scroll untuk memperlihatkan foto kamu.

Prompt 2 — Hero
Buat hero dua kolom. Kiri: badge kecil di atas (“Street-tested · Battle-proven”), judul raksasa (clamp sampai ~108px) dengan satu kata di-highlight gradien, sub-judul, dan tombol gradien “Follow my journey”. Kanan: sebuah kartu portrait dengan rasio 4:5. Buat kartu ini terkunci di layar (sticky/pinned) saat di-scroll, dan ber-flip 3D di sumbu Y: sisi depan permukaan rose-gold metalik mengilap (ada shimmer bergerak), lalu membalik menampilkan foto saya di sisi belakang. Tambahkan 2 kartu statistik mengambang di pojok kartu.
Siapkan: foto portrait kamu (potret, rasio tegak) + 2 angka pencapaian singkat untuk floating card.
03

Angka Besar — Dive Warp 3D

Satu angka pencapaian raksasa yang “terbang” dari kedalaman ke arah kamera lewat lorong cahaya, lalu angkanya menghitung naik dan meledakkan confetti.

Prompt 3 — Numbers
Buat section angka pencapaian dalam efek “warp tunnel” 3D. Saat di-scroll masuk, layar terkunci sebentar dan angka besar (mis. “Rp 50 Miliyar”) terbang dari jauh di kedalaman (translateZ) menuju kamera, dikelilingi cincin tunnel yang mengembang dan beam cahaya yang melintas. Begitu angka mendarat di tengah dan tajam, jalankan animasi count-up (0 naik ke angka tujuannya) lalu ledakkan confetti pink-coral. Di bawahnya beri caption kecil sebagai keterangan angka itu.
Siapkan: 1 angka “wow” utama + keterangannya (mis. total spend ads, omzet, jumlah klien).
04

Galeri Foto — & Pergantian Tema

Grid foto momen penting. Trik spesial: saat bagian ini masuk layar, seluruh tema berganti dari gelap (malam) ke terang (krem hangat/siang) dengan transisi mulus, lalu balik gelap setelah lewat.

Prompt 4 — Meta Visit
Buat section galeri foto dengan judul di tengah, tag kecil di atas, dan sub-judul gaya serif italic. Di bawahnya grid 2 kolom berisi foto (rasio 1:1, sudut membulat) dengan caption pill di pojok bawah tiap foto, dan efek zoom halus saat hover. Yang penting: saat section ini masuk ke layar, ubah seluruh palet website dari mode gelap (plum) ke mode terang (background krem hangat #fdf1e3, teks coklat tua) dengan transisi warna yang mulus, lalu kembali ke mode gelap begitu user scroll melewatinya. Aksen gradien pink-coral tetap sama di kedua mode.
Siapkan: 2–4 foto momen penting (event, undangan, penghargaan, dll).
05

About — Manifesto Kinetik

Pernyataan keyakinan / filosofi kamu, di mana tiap kata muncul satu per satu (fade + blur) saat di-scroll, jadi terasa hidup.

Prompt 5 — Manifesto
Buat section “manifesto” dalam satu panel besar: 2–3 paragraf pernyataan keyakinan saya sebagai entrepreneur, teks besar dan berwibawa. Buat tiap kata muncul satu per satu dengan efek fade-in + un-blur secara berurutan saat paragraf masuk ke layar (kinetic text). Kalimat penutup dibuat lebih besar dan tegas, dengan beberapa kata di-highlight gradien dan diberi glow saat muncul.
Siapkan: 2–3 kalimat prinsip/filosofi kamu + satu kalimat penutup yang kuat.
06

Time Tunnel — Lorong Waktu

Transisi sinematik sebelum timeline: kamera “berjalan” menyusuri lorong waktu, melewati penanda tahun & foto kenangan yang melayang, lalu tulisan “The Journey” muncul dari kedalaman.

Prompt 6 — Time Tunnel
Sebelum bagian timeline, buat transisi 3D sinematik “lorong waktu”. Saat di-scroll, layar terkunci dan kamera bergerak maju menembus kedalaman (Z): penanda tahun (mis. 2011 → 2018 → NOW) dan foto polaroid melayang melewati kamera di sisi kiri-kanan bergantian, dengan rel horizontal yang menyempit ke titik hilang untuk kesan gerak. Di titik terdalam, judul “The Journey” muncul dari jauh dan mendarat di tengah. Pakai mode gelap.
Tips: Ini efek paling “berat”. Kalau Claude bikin terlalu rumit/error, minta: “sederhanakan, cukup beberapa tahun dan foto saja, yang penting smooth.”
07

Journey — Kartu Perjalanan

Inti cerita: grid kartu per tahun (bisnis yang dicoba, hasilnya, pelajarannya), dengan border bercahaya berputar, satu kartu “featured” menonjol, dan scrubber tahun yang menempel.

Prompt 7 — Journey Cards
Buat section timeline berupa grid kartu 3 kolom. Tiap kartu = satu babak bisnis: ada tag, tahun besar, ikon, judul usaha, deskripsi singkat, dan baris bawah berisi label + hasil (hijau kalau untung/positif, merah kalau gagal, italic untuk “pelajaran”). Beri border gradien yang bercahaya dan berputar saat kartu masuk layar, efek spotlight mengikuti kursor, dan tilt 3D halus saat hover. Satu kartu pencapaian terbesar dibuat “featured” (background gradien penuh pink-coral) dengan reveal sinematik. Tambahkan scrubber tahun yang sticky di atas untuk loncat antar tahun.
Siapkan: daftar usaha/proyek kamu per tahun + hasilnya (untung/rugi/pelajaran). Tandai mana yang paling besar (jadi kartu featured).
08

Contact — CTA Sosial Media

Ajakan terakhir: kartu besar dengan judul, lalu kartu-kartu link sosmed (Instagram, WhatsApp, Email) dengan ikon berwarna brand-nya masing-masing.

Prompt 8 — Contact
Buat section contact: satu kartu besar dengan glow gradien di latarnya, judul ajakan besar (“Let’s connect / Follow my journey”), dan sub-judul singkat. Di bawahnya, 3 kartu link bersebelahan untuk Instagram, WhatsApp, dan Email — tiap kartu punya ikon kotak dengan warna gradien khas brand-nya (IG warna-warni, WA hijau, email Gmail), label kecil, judul, dan panah yang bergerak saat hover. Buat satu kartu sebagai primary (gradien penuh).
Siapkan: username/link Instagram, nomor WhatsApp, dan alamat email kamu.
09

Footer

Penutup sederhana, rapi.

Prompt 9 — Footer
Buat footer minimalis: garis pemisah tipis di atas, kiri nama + tahun copyright, kanan teks kecil bergaya monospace (mis. “Built with care” atau lokasi). Warna teks redup, ukuran kecil.
+

Polish & Efek Global

Setelah semua section jadi, kasih prompt ini untuk menambah sentuhan akhir yang bikin website terasa premium dan hidup.

Prompt 10 — Polish
Tambahkan sentuhan akhir ke seluruh halaman: (1) progress bar gradien tipis di paling atas yang mengikuti posisi scroll; (2) animasi reveal — tiap elemen muncul naik + fade-in saat masuk layar, dengan stagger; (3) smooth scroll untuk semua anchor menu; (4) getaran haptic halus saat tombol/kartu ditekan di HP; (5) easter egg: kalau user tarik layar ke bawah dari paling atas (pull-to-refresh) di HP, munculkan confetti + toast “Thanks for visiting”. Hormati prefers-reduced-motion (matikan animasi berat kalau user mau).
↗

Online-kan Website (Deploy)

Langkah manual · bukan prompt ke Claude

Sampai sini, website kamu masih berupa file di komputer — cuma kamu yang bisa lihat. Supaya bisa diakses siapa aja lewat link/domain, file-nya harus di-upload ke server. Di bawah ada 2 cara. Beda dari section lain, ini kamu kerjain sendiri, bukan ditempel ke Claude.

Siapkan dulu (berlaku untuk dua cara)

  • Minta Claude gabungkan semua section jadi satu file. Prompt: “Gabungkan semua section tadi jadi satu file HTML lengkap bernama index.html, semua CSS & JS inline di dalamnya.”
  • Simpan file itu di satu folder, pastikan namanya persis index.html (huruf kecil semua).
  • Kalau pakai foto, taruh file fotonya di folder yang sama.
A

Cloudflare Pages

Recommended · Gratis

Paling gampang buat pemula. Gratis selamanya, cepat (server global), otomatis dapat HTTPS (gembok hijau) & link namamu.pages.dev.

  1. Buka dash.cloudflare.com lalu daftar / login — gratis, cukup pakai email.
  2. Di menu kiri pilih Workers & Pages → klik Create → buka tab Pages → Upload assets.
  3. Beri nama project (mis. charis). Nama ini jadi link kamu: charis.pages.dev.
  4. Drag & drop folder berisi index.html (+ foto) ke kotak upload → klik Deploy site.
  5. Tunggu ~30 detik → muncul link https://charis.pages.dev. Selesai — website udah online!
  6. Mau pakai domain sendiri (charisnicholas.com)? Masuk ke project → tab Custom domains → Set up a domain → ketik domainmu → ikuti instruksi arahkan DNS-nya.
Update nanti: mau ganti isi website? Ulang langkah upload aja — drag file index.html yang baru, otomatis ke-replace.
B

Hosting biasa / cPanel

Pakai cara ini kalau kamu sudah punya hosting + domain sendiri.

  1. Login ke cPanel hosting kamu (biasanya namadomain.com/cpanel atau lewat dashboard provider).
  2. Buka File Manager → masuk ke folder public_html.
  3. Kosongkan dulu kalau ada file bawaan → klik Upload → pilih index.html (+ foto).
  4. Buka domain kamu di browser (https://charisnicholas.com) → website udah tampil.
  5. Pastikan HTTPS aktif: di cPanel cari SSL/TLS Status → Run AutoSSL (biasanya udah otomatis).
Tanpa cPanel? Pakai FTP (aplikasi FileZilla): masukkan host, username & password dari provider, lalu upload index.html ke folder public_html.
Catatan penting: Nama file wajib index.html — itu yang otomatis dibuka saat orang ke domainmu. Kalau pakai foto, upload juga fotonya & pastikan nama/path-nya sama persis seperti di kode. Domain baru kadang butuh beberapa jam sampai aktif penuh (propagasi DNS) — sabar aja.