preflightRencana yang dibagikan

Daffa Ahmad Al Attas Portfolio

Situs profil profesional untuk Daffa Ahmad Al Attas guna menampilkan portofolio proyek dan mempermudah klien potensial mengirim tawaran kerjasama.

Masalah

Klien potensial dan perekrut kesulitan menemukan informasi proyek yang pernah dikerjakan Daffa serta tidak memiliki jalur langsung yang cepat untuk mengirim penawaran kerjasama.

Tujuan

  • Menampilkan daftar proyek nyata yang pernah dikerjakan oleh Daffa
  • Menyediakan formulir kontak fungsional yang mengirim pesan langsung ke email pribadi
  • Memuat halaman dengan cepat tanpa biaya hosting bulanan

Bukan tujuan

  • Menyediakan fitur multi-bahasa selain Bahasa Indonesia
  • Membuat sistem manajemen konten (CMS) khusus untuk update teks mandiri di dalam web
  • Menambahkan fitur blog atau artikel opini pribadi

Lingkup v1

  • Halaman utama tunggal (landing page) berisi biodata singkat Daffa
  • Bagian daftar proyek dengan tangkapan layar, deskripsi singkat, dan tautan kode atau demo
  • Bagian riwayat pengalaman kerja atau keahlian teknis
  • Formulir kontak dengan input nama, email, dan pesan yang terhubung ke layanan pihak ketiga pengirim email
  • Tautan langsung ke akun media sosial profesional seperti GitHub dan LinkedIn

Ditunda

  • Panel admin untuk menambah proyek baru secara otomatis
  • Dukungan mode gelap (dark mode) dan mode terang (light mode)
  • Halaman detail terpisah untuk setiap proyek

Tech stack

Frontend
Astro 4.x
Backend
Formspree
Database
Tidak ada
Deployment
Vercel

Menggunakan Astro untuk menghasilkan HTML statis yang sangat cepat tanpa JavaScript berlebih, serta Formspree untuk menangani pengiriman email dari formulir kontak tanpa server backend sendiri.

Risiko

  • Layanan pihak ketiga pengirim email masuk ke folder spam

    Melakukan uji coba pengiriman email secara berkala dan memastikan konfigurasi domain pengirim sudah benar.

  • Formulir kontak disalahgunakan oleh bot spam

    Mengaktifkan fitur proteksi spam bawaan dari layanan Formspree pada level formulir.

Rencana kerja

5 fitur · 35 task

Beranda Profil

P0

Pengguna langsung mengenali identitas dan bidang keahlian Daffa melalui halaman utama.

  • Biodata Singkat Daffa — Menampilkan nama, foto profil, dan ringkasan latar belakang profesional.
  • Daftar Keahlian Utama — Menampilkan daftar teknologi dan keahlian teknis yang dikuasai.
  • Tautan Media Sosial — Menyediakan akses langsung ke profil GitHub, LinkedIn, dan kanal profesional lainnya.
Lihat spec
User story
  • As a pengunjung, I want melihat foto profil dan ringkasan latar belakang Daffa sehingga saya langsung tahu siapa pemilik situs ini.
  • As a perekrut, I want membaca daftar keahlian teknis Daffa sehingga saya bisa mencocokkannya dengan kebutuhan tim.
  • As a klien, I want mengakses tautan media sosial profesional Daffa sehingga saya dapat melihat profil eksternalnya.
Kriteria penerimaan
  • Halaman utama menampilkan foto profil Daffa dengan teks alternatif yang sesuai.
  • Bagian keahlian menampilkan daftar teknologi utama dalam bentuk komponen lencana atau grid.
  • Tautan media sosial mengarah langsung ke profil eksternal GitHub dan LinkedIn dengan atribut rel="noopener".
Data & state
  • Entity Profile: fields name, bio, avatarUrl
  • Entity Skill: fields name, category
  • Entity SocialLink: fields platform, url, icon
Edge case
  • Gambar profil gagal dimuat dan menampilkan ruang kosong tanpa merusak tata letak teks.
  • Daftar keahlian kosong dalam basis data sehingga bagian keahlian disembunyikan dari DOM.
  1. 1

    Buat data biodata dan TypeScript interface

    Buat TypeScript interface dan data mock untuk biodata singkat Daffa.

  2. 2

    Buat fungsi fetch data biodata

    Buat helper function atau server action untuk mengambil data biodata.

  3. 3

    Buat komponen UI biodata beranda

    Buat komponen React untuk menampilkan biodata singkat di halaman beranda.

  4. 4

    Buat data dan skema keahlian

    Buat TypeScript interface dan data mock untuk daftar keahlian utama.

  5. 5

    Buat fungsi pengambilan data keahlian

    Buat fungsi untuk mengambil dan memfilter daftar keahlian.

  6. 6

    Buat komponen grid keahlian

    Buat komponen grid responsif untuk menampilkan daftar keahlian utama.

  7. 7

    Buat data tautan media sosial

    Buat TypeScript interface dan data mock untuk tautan media sosial.

  8. 8

    Buat fungsi pemuat tautan sosial

    Buat fungsi service untuk mengakses daftar tautan sosial.

  9. 9

    Buat komponen tautan media sosial

    Buat komponen UI untuk menampilkan tombol atau ikon tautan media sosial.

Portofolio Proyek

P0

Klien dapat melihat bukti kerja nyata Daffa melalui tangkapan layar dan tautan demonstrasi.

  • Daftar Proyek Unggulan — Menampilkan grid kartu proyek yang berisi judul dan deskripsi singkat.
  • Detail dan Tangkapan Layar — Menampilkan informasi mendalam beserta gambar tampilan antarmuka proyek.
  • Tautan Kode dan Demo — Menyediakan tombol menuju repositori kode sumber atau situs demo langsung.
Lihat spec
User story
  • As a klien, I want melihat grid proyek unggulan Daffa sehingga saya bisa mengevaluasi kualitas pekerjaan sebelumnya.
  • As a perekrut, I want membaca detail dan tangkapan layar proyek sehingga saya tahu peran dan hasil kerja Daffa.
  • As a pengunjung, I want mengklik tautan demo atau repositori kode sehingga saya dapat menguji coba aplikasi secara langsung.
Kriteria penerimaan
  • Grid proyek menampilkan kartu yang berisi judul, deskripsi singkat, dan gambar mini untuk setiap proyek.
  • Halaman detail proyek memuat galeri tangkapan layar antarmuka aplikasi.
  • Tombol tautan demo membuka tab peramban baru menuju situs langsung atau repositori kode sumber.
Data & state
  • Entity Project: fields slug, title, description, content, screenshots[], demoUrl, repoUrl
  • State Transition: Project Card Clicked -> Navigates to /proyek/[slug]
Edge case
  • Tautan demo atau repositori kosong sehingga tombol terkait tidak dirender pada kartu proyek.
  • Gambar tangkapan layar proyek berukuran besar dan dikompres otomatis oleh Astroassets.
  1. 1

    Buat data koleksi proyek portofolio

    Buat TypeScript interface dan data mock untuk koleksi proyek unggulan.

  2. 2

    Buat fungsi query daftar proyek

    Buat fungsi service untuk mengambil daftar proyek dengan opsi penyaringan.

  3. 3

    Buat grid kartu proyek di beranda atau halaman proyek

    Buat komponen grid dan kartu untuk menampilkan daftar proyek portofolio.

  4. 4

    Buat fungsi pencarian detail proyek

    Buat helper function untuk mencari proyek spesifik berdasarkan slug atau id.

  5. 5

    Buat dynamic route halaman detail proyek

    Buat dynamic route halaman detail proyek beserta penanganan error 404.

  6. 6

    Buat helper validasi tautan proyek

    Buat fungsi utilitas untuk memeriksa ketersediaan tautan demo dan repositori.

  7. 7

    Implementasikan tombol demo dan repositori kondisional

    Buat komponen tombol aksi yang hanya merender tautan demo atau repositori jika URL tersedia.

Riwayat Pengalaman

P1

Perekrut dapat mengevaluasi rekam jejak pekerjaan profesional yang pernah diselesaikan.

  • Daftar Riwayat Kerja — Menampilkan kronologi posisi pekerjaan yang pernah diemban oleh Daffa.
  • Informasi Perusahaan — Menampilkan nama perusahaan, rentang waktu, dan lokasi tempat bekerja.
  • Deskripsi Tugas Utama — Menjelaskan tanggung jawab dan pencapaian pada setiap peran pekerjaan.
Lihat spec
User story
  • As a perekrut, I want melihat kronologi riwayat kerja Daffa sehingga saya paham rekam jejak profesionalnya.
  • As a klien, I want mengetahui nama perusahaan dan rentang waktu kerja Daffa sehingga saya tahu tingkat pengalamannya.
Kriteria penerimaan
  • Halaman menampilkan daftar riwayat kerja secara kronologis terbalik dari yang terbaru.
  • Setiap item pengalaman mencantumkan nama perusahaan, lokasi, dan rentang waktu kerja dalam format bulan dan tahun.
  • Setiap item pengalaman memuat daftar poin tugas utama dan pencapaian.
Data & state
  • Entity Experience: fields company, role, location, startDate, endDate, achievements[]
  • State Transition: Experience Data Loaded -> Rendered as chronological timeline list
Edge case
  • Pekerjaan saat ini belum memiliki tanggal selesai dan dirender dengan label 'Sekarang' atau 'Present'.
  1. 1

    Buat data riwayat pekerjaan

    Buat TypeScript interface dan data mock untuk riwayat pekerjaan.

  2. 2

    Buat fungsi pemuat riwayat kerja

    Buat fungsi service untuk mengambil data riwayat pekerjaan secara kronologis.

  3. 3

    Buat komponen kontainer daftar pengalaman

    Buat komponen kontainer utama untuk menampilkan linimasa riwayat pekerjaan.

  4. 4

    Buat tipe data informasi perusahaan

    Perbarui atau pastikan interface pengalaman mencakup atribut nama perusahaan, logo opsional, dan format rentang waktu.

  5. 5

    Buat komponen informasi perusahaan dan rentang waktu

    Buat komponen UI untuk menampilkan nama perusahaan, posisi, dan rentang waktu kerja.

  6. 6

    Buat tipe daftar poin deskripsi tugas

    Pastikan tipe data mendukung array string untuk poin-poin tugas utama.

  7. 7

    Tambahkan daftar poin tugas utama pada pengalaman

    Tambahkan daftar poin tugas terstruktur (bullet points) pada komponen riwayat pekerjaan.

Formulir Kontak

P0

Klien potensial dapat mengirimkan tawaran kerjasama secara cepat dan langsung.

  • Input Data Pesan — Menyediakan kolom isian nama pengirim, alamat email, dan teks pesan.
  • Integrasi Pengiriman Pesan — Mengirimkan data dari formulir langsung ke layanan pihak ketiga Formspree.
  • Umpan Balik Status — Menampilkan pemberitahuan bahwa pesan berhasil atau gagal dikirim.
Lihat spec
User story
  • As a klien potensial, I want mengisi formulir pesan dengan nama, email, dan teks pesan sehingga saya bisa mengirim tawaran kerjasama.
  • As a pengirim pesan, I want data saya dikirimkan secara aman ke Formspree sehingga pesan saya pasti sampai.
  • As a pengirim pesan, I want melihat status berhasil atau gagal setelah mengirim formulir sehingga saya tahu apakah pesan terkirim.
Kriteria penerimaan
  • Formulir kontak memiliki kolom input untuk nama, email, dan pesan dengan atribut HTML required.
  • Aksi pengiriman formulir melakukan POST request ke endpoint Formspree.
  • Pesan sukses berwarna hijau muncul di bawah formulir ketika pengiriman berhasil, dan pesan galat muncul jika gagal.
Data & state
  • Form State: idle | submitting | success | error
  • Entity ContactPayload: fields name, email, message
Edge case
  • Pengguna mengirim formulir dengan format alamat email yang tidak valid dan tertahan oleh validasi peramban.
  • Layanan Formspree mengalami gangguan server sehingga sistem menampilkan teks pemberitahuan kegagalan pengiriman.
  1. 1

    Definisikan ContactPayload dan tipe Form State

    Definisikan skrip tipe data TypeScript untuk payload kontak dan status form.

  2. 2

    Buat komponen formulir kontak Astro

    Buat komponen formulir kontak interaktif di Astro.

  3. 3

    Implementasikan logika pengiriman Formspree

    Implementasikan integrasi pengiriman data form ke endpoint Formspree.

  4. 4

    Tangani kasus galat server Formspree

    Tambahkan penanganan error jaringan dan respons gagal dari Formspree.

  5. 5

    Tampilkan umpan balik status sukses dan galat

    Buat elemen UI untuk menampilkan status sukses atau galat kepada pengguna.

  6. 6

    Tambahkan atribut aksesibilitas status formulir

    Tambahkan atribut ARIA dan live region untuk aksesibilitas pembaca layar.

Stack Teknologi

P2

Mengetahui dasar teknis pembuatan situs yang menggunakan Astro.

  • Kerangka Astro 4x — Memastikan situs dibangun menggunakan teknologi Astro yang cepat dan ringan.
  • Antarmuka Responsif — Menyesuaikan tampilan situs agar nyaman dibaca pada perangkat seluler maupun desktop.
  • Aset Statis Optimal — Menyajikan halaman web dalam bentuk aset statis untuk performa maksimal.
Lihat spec
User story
  • Sebagai pengunjung, saya ingin situs dimuat dengan sangat cepat menggunakan kerangka Astro 4.x agar informasi portofolio dapat diakses tanpa jeda.
  • Sebagai pengguna perangkat seluler, saya ingin antarmuka situs menyesuaikan ukuran layar saya secara responsif agar nyaman dibaca.
  • Sebagai pemilik situs, saya ingin seluruh halaman disajikan sebagai aset statis optimal agar hosting efisien dan performa maksimal tercapai.
Kriteria penerimaan
  • Situs merender file HTML murni menggunakan komponen Astro 4.x tanpa menyertakan runtime JavaScript klien yang tidak perlu.
  • Tampilan beranda dan halaman proyek menyesuaikan lebar layar dari 320px hingga 1920px tanpa elemen yang meluber keluar layar.
  • Build process menghasilkan file statis (.html, .css, .js) di direktori dist/ yang siap di-deploy ke static hosting.
  • Skor performa Lighthouse pada perangkat seluler mencapai minimal 90 untuk kategori Performance.
Data & state
  • Entity buildConfig: menyimpan konfigurasi output target static pada astro.config.mjs.
  • Entity pageAsset: merepresentasikan file HTML, CSS terkompresi, dan aset gambar teroptimasi di folder dist/.
  • State transisi build: dari kode sumber Astro diubah menjadi aset statis murni saat perintah npm run build dieksekusi.
Edge case
  • Peramban klien menonaktifkan JavaScript, tetapi situs tetap dapat dibaca dan dinavigasi secara penuh karena sifat render HTML statis Astro.
  • Aset gambar berukuran besar diunggah ke direktori public/, yang kemudian otomatis dikompresi oleh modul Astro Assets saat proses build.
  1. 1

    Konfigurasikan output target static Astro

    Atur konfigurasi output Astro menjadi static di astro.config.mjs.

  2. 2

    Buat kerangka layout HTML dasar Astro

    Buat komponen layout utama HTML di src/layouts/BaseLayout.astro.

  3. 3

    Implementasikan styling responsif global

    Tambahkan stylesheet global dengan variabel CSS dan aturan responsif.

  4. 4

    Sesuaikan tata letak komponen halaman portofolio

    Terapkan desain responsif pada komponen utama halaman portofolio.

  5. 5

    Verifikasi skrip build aset statis

    Pastikan skrip build di package.json menghasilkan output statis yang valid.

  6. 6

    Optimalkan aset gambar dengan modul Astro Assets

    Gunakan komponen Image bawaan Astro untuk mengoptimalkan aset gambar.

Punya ide yang mau dibangun?

Rencana ini dibuat dengan Preflight — tulis idemu, jawab lima pertanyaan, dan dapat PRD, fitur, serta task yang tiap satunya sudah berisi prompt siap tempel ke AI coding agent. Gratis, tanpa daftar akun.

Bikin rencana kamu sendiri
Daffa Ahmad Al Attas Portfolio — rencana lengkap