MENGENAL PORTOFOLIO DIGITAL

 A. Pengertian Portofolio Digital

Portofolio digital adalah kumpulan karya, proyek, dan pengalaman yang disusun secara online sehingga mudah diakses oleh perekrut, guru, maupun calon klien. Dalam konteks siswa SMK, portofolio digital merupakan representasi profesional dari kompetensi, keahlian, dan pencapaian yang telah diraih selama masa sekolah.

Portofolio digital berbeda dengan CV. Jika CV hanya memberikan ringkasan riwayat hidup dan kualifikasi, portofolio memberikan bukti nyata dalam bentuk visual dan praktis dari apa yang telah dihasilkan.

B. Fungsi dan Manfaat Portofolio Digital bagi Siswa SMK

Fungsi	Penjelasan
Bukti kemampuan nyata	Perekrut atau HRD bisa melihat langsung bukti kemampuan, bukan sekadar membaca daftar riwayat hidup.
Personal branding	Siswa dapat mengontrol bagaimana ingin dikenal — sebagai desainer grafis, programmer, analis data, dll.
Memudahkan akses karya	Tidak perlu repot mengirim file satu per satu — cukup kirim link portofolio.
Nilai tambah saat melamar magang/kerja	Punya portofolio membedakan siswa dari pelamar lain yang hanya mengirim CV biasa.
Dokumentasi profesional	Semua proyek, pencapaian, dan sertifikat terdokumentasi rapi dalam satu tempat.

C. Perbedaan Portofolio Digital vs Portofolio Cetak

Aspek	Portofolio Digital	Portofolio Cetak
Kemudahan edit	Dapat diedit kapan saja dalam beberapa klik	Sulit diubah setelah dicetak
Cara sharing	Dibagikan instan via email/link	Harus dicetak dan dikirim fisik
Keberlanjutan	Tidak kedaluwarsa, bisa terus diperbarui	Cepat usang jika ada proyek baru
Lingkungan	Ramah lingkungan (tanpa kertas/tinta)	Menghabiskan banyak kertas dan tinta
Aksesibilitas	Bisa diakses dari mana saja, kapan saja	Butuh perangkat cetak dan file fisik

Sumber: Canva, website portfolio guide

D. Komponen Portofolio Digital yang Wajib Ada untuk Siswa SMK

Berdasarkan panduan CV dan portofolio untuk siswa SMA/SMK, berikut komponen yang wajib ada:

1. Curriculum Vitae (CV) Digital

Berisi:

• Data diri lengkap: nama lengkap, alamat, nomor telepon aktif, email profesional

• Ringkasan profil: satu paragraf pendek tentang motivasi, tujuan, dan masa depan

• Pendidikan: nama sekolah, jurusan, tahun masuk dan lulus (perkiraan)

• Keahlian: keterampilan teknis (software, programming, dll) dan nonteknis (komunikasi, kerja tim)

• Pengalaman organisasi/ekstrakurikuler/PKL (jika ada): posisi, periode, deskripsi tanggung jawab

• Pencapaian/prestasi: lomba, sertifikat pelatihan, penghargaan lainnya

2. Kumpulan Karya dan Proyek

Tampilkan 3–5 proyek terbaik yang relevan dengan kompetensi dan jurusan. Setiap proyek sebaiknya dilengkapi dengan:

• Judul proyek

• Deskripsi singkat tentang latar belakang dan tujuan

• Peran/kontribusi (jika proyek kelompok)

• Tools yang digunakan (misal: Figma, Canva, Adobe Photoshop, VS Code, dll)

• Hasil akhir/dampak dari proyek tersebut

3. Halaman Web Portofolio

Website yang menyatukan semua komponen di atas dalam satu tempat yang rapi dan mudah diakses. Website harus memiliki:

• Halaman utama yang menarik

• Halaman "Tentang Saya"

• Halaman CV (bisa PDF yang disematkan)

• Halaman proyek/karya

• Halaman prestasi/sertifikat

• Halaman kontak

E. Platform untuk Membuat Portofolio Digital

Platform	Kelebihan	Cocok untuk
Google Sites	Gratis, mudah, terintegrasi dengan Google Drive, langsung terbit	Pemula, siswa SMK, website dasar
Canva	Template menarik, drag-and-drop, bisa export PDF/website	CV digital, presentasi portofolio, desain visual
LinkedIn	Jaringan profesional, rekruter aktif	Mencari magang/kerja
Wix/Blogger	Lebih banyak fitur kustomisasi	Website portofolio yang lebih kompleks

Jika ingin solusi cepat dan gratis untuk website portofolio, Google Sites adalah pilihan tepat. Untuk CV kaya visual, Canva adalah pilihan terbaik. Dalam materi ini, kita akan menggunakan Canva untuk CV Digital dan Google Sites untuk Halaman Web Portofolio.

F. Konsep Personal Branding dalam Portofolio Digital

Portofolio bukan sekadar galeri karya, melainkan representasi identitas profesional. Di dalamnya tercermin keahlian, proses berpikir kreatif, dan pencapaian yang telah diraih.

Personal branding yang baik tercermin dalam 3 hal:

1. Konsistensi desain: gunakan palet warna, tipografi, dan tata letak yang sama di seluruh halaman

2. Narasi yang jelas: setiap proyek dalam portofolio harus menjawab tiga hal — Masalah → Solusi → Hasil

3. Bahasa yang profesional: gunakan bahasa baku, bukan terlalu santai atau gaul

---

2️⃣ MENYUSUN CV DIGITAL DENGAN CANVA

A. Mengenal Canva

Canva adalah platform desain grafis berbasis web gratis yang memungkinkan siapa saja, bahkan tanpa latar belakang desain, untuk menciptakan karya yang profesional dan estetis.

Keunggulan Canva untuk CV digital:

• Aksesibilitas tinggi: bisa diakses via browser atau aplikasi smartphone

• Ribuan template gratis: tersedia banyak template CV menarik yang siap pakai

• Fleksibilitas format: bisa diekspor menjadi PDF, gambar, atau presentasi interaktif

• Drag-and-drop editing: tidak perlu keterampilan coding atau desain rumit

B. Langkah-Langkah Membuat CV Digital di Canva

Tahap 1: Persiapan Sebelum Mendesain

Sebelum membuka Canva, lakukan persiapan berikut:

1. Tentukan informasi yang akan ditampilkan (data diri, pendidikan, keahlian, dll)

2. Pilih 3-5 keahlian utama yang ingin ditonjolkan

3. Siapkan foto profil profesional (resolusi baik, latar bersih)

4. Tulis ringkasan profil singkat, padat, dan menarik

5. Siapkan data pendukung (sertifikat, nilai, dll — opsional)

Tahap 2: Membuka Canva dan Memilih Template

1. Buka www.canva.com

2. Login menggunakan akun Google atau email

3. Pada kolom pencarian, ketik: "CV" atau "Curriculum Vitae"

4. Pilih template yang menarik dan sesuai dengan kepribadian

5. Tips: pilih template dengan tata letak bersih dan font mudah dibaca

Tahap 3: Mengisi Konten CV

Berikut adalah contoh teks yang bisa digunakan sebagai panduan:

Bagian	Contoh Isi
Nama	BUDI SANTOSO
Tentang Saya	"Saya siswa SMK Jurusan Rekayasa Perangkat Lunak yang memiliki minat dalam pengembangan aplikasi web dan desain antarmuka pengguna. Saya ingin mengembangkan kemampuan programming dan desain di lingkungan kerja profesional."
Pendidikan	SMK Negeri 1 Jakarta | Jurusan RPL | 2024–2027
Keahlian	• HTML/CSS (Pemula) • Canva (Lanjutan) • Microsoft Office • Kerja tim • Pemecahan masalah
Pengalaman	Anggota Ekstrakurikuler IT Club (2025–sekarang): bertanggung jawab mendesain poster dan konten media sosial
Prestasi	Juara 2 Lomba Desain Poster Digital tingkat Kota (2026)

Tips isi CV untuk siswa SMK:

• Fokus pada keahlian dan pengalaman yang relevan dengan industri yang diminati

• Cantumkan kontak yang aktif: email profesional dan nomor telepon

• Gunakan bahasa yang positif dan meyakinkan: "Saya mampu..." → "Mampu..." lebih baik

• Tampilkan soft skills seperti komunikasi, kerja tim, dan kemandirian

Tahap 4: Mendesain dengan Prinsip Visual yang Baik

Dalam membuat desain CV, perhatikan 4 prinsip ini:

Prinsip	Penerapan di CV
Kesederhanaan	Jangan gunakan terlalu banyak warna (maksimal 3 warna utama)
Konsistensi	Gunakan jenis font yang sama di seluruh dokumen (1-2 font saja)
Keterbacaan	Ukuran font minimal 10pt untuk teks deskripsi, 14-16pt untuk judul
Tata letak rapi	Gunakan alignment (perataan) yang konsisten (kiri dan rata)

Untuk mempertahankan identitas profesional, gunakan palet warna, tipografi, dan tata letak yang selaras.

Tahap 5: Mengunduh dan Menyimpan CV

1. Klik tombol "Bagikan" di pojok kanan atas

2. Pilih "Unduh"

3. Pilih format PDF Standar (untuk tampilan terbaik)

4. Klik "Unduh"

5. Simpan file PDF di komputer dan di Google Drive masing-masing (penting untuk persiapan di Google Sites)

Praktik Baik Pembuatan CV dengan Canva:

• Pilih 3–5 proyek terbaik yang menunjukkan kompetensi utama

• Setiap bagian dalam CV menggunakan bahasa yang profesional, bukan terlalu santai

• Selalu sertakan kata kerja aktif (misal: "merancang", "mengembangkan", "mengkoordinasikan")

• Update CV secara berkala setiap kali mendapatkan pencapaian baru

---

3️⃣ MEMBANGUN WEBSITE PORTOFOLIO DENGAN GOOGLE SITES

A. Mengenal Google Sites

Google Sites adalah platform pembuatan website sederhana yang menjadi bagian dari Google Workspace (gratis dengan akun Google). Platform ini menyediakan website builder dengan tampilan yang sederhana dan intuitif, sehingga siapa pun dapat menggunakannya dengan mudah.

Keunggulan Google Sites untuk portofolio siswa:

• 100% gratis dengan akun Google

• Tidak perlu coding atau desain rumit — sepenuhnya drag-and-drop

• Terintegrasi dengan Google Drive: unggah CV, sertifikat, dan proyek langsung dari Drive

• Langsung terpublikasi sebagai website dengan link yang bisa dibagikan

• Mobile-friendly: tampilan otomatis menyesuaikan dengan HP dan tablet

• Bisa di-update kapan saja tanpa harus membuat ulang website

B. Tahap Perencanaan (Konsep Website)

Sebelum membuka Google Sites, lakukan konsep terlebih dahulu. Tuliskan di buku catatan:

1. Judul Website Portofolio — contoh:

• "Portofolio (Nama Kamu)"

• "My Digital CV — (Nama Kamu)"

• "(Nama Kamu) | Karya dan Proyek"

• "Arsip Projek (Nama Kamu)"

2. Rencana Menu (Halaman) — contoh struktur untuk siswa SMK:

• Halaman Muka (Home): sambutan, foto profil, kutipan/pesan singkat tentang diri

• Tentang Saya (About Me): profil lengkap, latar belakang, minat dan keahlian

• CV Saya: menyematkan file PDF CV yang dibuat di Canva

• Proyek Saya: galeri proyek yang pernah dikerjakan

• Prestasi & Sertifikat: kumpulan penghargaan dan sertifikat pelatihan

• Kontak (Contact Me): email aktif dan formulir kontak sederhana

3. Branding personal:

• Siapkan foto profil profesional (bisa foto pas atau foto kegiatan)

• Tentukan warna/warna tema sesuai kepribadian (konsisten dengan CV)

• Siapkan kalimat pembuka yang menarik (misal: "Welcome to my digital portfolio! I'm a vocational student passionate about technology and design.")

C. Langkah-Langkah Membangun Website Portofolio di Google Sites

📝 Langkah 1: Mengakses Google Sites

1. Buka sites.google.com di browser

2. Login menggunakan akun Google yang aktif (akun sekolah atau pribadi)

3. Maka akan tampil halaman utama Google Sites

📝 Langkah 2: Membuat Website Baru

1. Klik tombol "+" (tanda tambah) atau pilih template "Blank" untuk memulai dari halaman kosong

2. Halaman editor Google Sites akan terbuka

📝 Langkah 3: Menentukan Judul dan Menyiapkan Halaman

1. Judul website: di bagian atas, klik "Untitled site" → ganti dengan judul pilihan

2. Membuat halaman: di panel kanan, klik "Pages" → klik ikon "+" di pojok kanan bawah

3. Pilih "New page", beri nama halaman (contoh: Beranda, Tentang Saya, CV Saya, Proyek Saya, Prestasi, Kontak)

4. Ulangi langkah ini sampai semua halaman yang direncanakan selesai dibuat

Tips: halaman bisa disusun dengan drag-and-drop (ubah urutan menu), dan bisa dibuat sub-halaman di bawah halaman utama

📝 Langkah 4: Mengisi Konten Setiap Halaman

A. Halaman Muka (Home/Beranda)

Elemen	Cara Menambah	Isi yang Direkomendasikan
Selamat datang	Insert → Text box	"Halo! Selamat datang di portofolio digital saya..."
Foto profil	Insert → Image → Upload	Foto profesional (pas foto atau foto kegiatan)
Kutipan/pesan	Insert → Text box	"I'm a student passionate about technology."

B. Halaman Tentang Saya (About Me)

• Tuliskan paragraf pendek tentang latar belakang, jurusan, minat, dan tujuan masa depan

• Jangan lupa menuliskan identitas seperti nama, jurusan, sekolah, dan keahlian utama

• Tambahkan foto kedua yang mendukung (misal: foto saat kegiatan sekolah atau magang)

C. Halaman CV Saya (My CV)

1. Buka halaman "CV Saya"

2. Klik "Insert" → gulir ke bawah → pilih "From Drive"

3. Pilih file PDF CV yang sudah disimpan di Google Drive

4. File akan disematkan dan bisa dilihat langsung di website

D. Halaman Proyek Saya (My Projects)

1. Buka halaman "Proyek Saya"

2. Untuk setiap proyek, buat blok terpisah. Bisa menggunakan "Text & Image" layout dari Content Blocks

3. Informasi yang wajib ditampilkan untuk setiap proyek:

   • Gambar proyek (tangkapan layar, foto hasil, atau mockup)

   • Judul proyek

   • Deskripsi singkat (apa yang dikerjakan dan tujuan proyek)

   • Tools yang digunakan (contoh: Canva, Figma, VS Code, dll)

   • Hasil/dampak proyek (contoh: "Website ini digunakan untuk lomba O2SN" / "Poster ini menjadi juara 2 lomba desain")

E. Halaman Prestasi & Sertifikat

1. Buka halaman "Prestasi & Sertifikat"

2. Gunakan Image Carousel atau Image Grid dari Insert menu untuk menampilkan banyak sertifikat/gambar

3. Di bawah setiap gambar, tambahkan teks singkat yang menjelaskan prestasi/sertifikat tersebut

4. Pastikan file gambar sertifikat sudah diubah formatnya menjadi PNG/JPG (PDF tidak akan muncul di carousel)

Tips: Semua file yang akan disematkan sebaiknya disimpan terlebih dahulu di Google Drive dalam satu folder yang diatur izin aksesnya menjadi "Anyone with the link can view".

F. Halaman Kontak (Contact Me)

1. Gunakan Text box untuk menuliskan alamat email aktif

2. Tambahkan link ke media sosial profesional (LinkedIn, GitHub, Instagram untuk portofolio — jika ada)

3. Opsional: Tambahkan formulir kontak sederhana dengan menggunakan Insert → Embed → masukkan tautan Google Form untuk menerima pesan dari pengunjung

📝 Langkah 5: Mengatur Tema dan Tampilan Website

Agar website terlihat profesional dan konsisten dengan CV, lakukan kustomisasi:

1. Di pojok kanan atas, klik ikon "Themes" (palet warna)

2. Pilih tema yang sesuai dengan kepribadian (disarankan tema Simple dengan latar putih untuk tampilan bersih)

3. Klik "Font Style" dan pilih gaya font yang konsisten di seluruh website

Kustomisasi lanjutan (opsional):

• Ganti background image header: klik pada area header → Image → Select Image (upload foto atau pilih dari gallery)

• Ubah tipe header: pilih antara Cover (foto penuh), Large Banner, Banner, atau Title only

• Tambahkan footer: di bagian bawah, klik untuk menambahkan teks (misal: "© 2026 Portofolio [Nama Kamu]")

📝 Langkah 6: Mempublikasikan Website

Setelah konten selesai, website perlu dipublikasikan agar bisa diakses orang lain:

1. Klik tombol "Publish" di pojok kanan atas

2. Masukkan alamat website yang mudah diingat (domain akan berakhiran sites.google.com/view/nama-website-anda/)

3. Klik "Publish" lagi

4. Website sudah aktif dan bisa diakses publik melalui link yang diberikan

Tips: Simpan link website di tempat yang mudah diakses (misal: di catatan ponsel, di bio media sosial, dan di footer CV digital).

📝 Langkah 7: Update dan Pemeliharaan Website

Portofolio digital harus terus diperbarui agar tetap relevan. Bacakan tips berikut:

• Tambahkan proyek baru setiap kali menyelesaikan tugas besar

• Update CV jika ada pencapaian atau pengalaman baru (perbarui file PDF di Drive lalu re-embed)

• Periksa link secara berkala untuk memastikan semua halaman berfungsi

• Pantau tampilan di berbagai perangkat (laptop, tablet, HP)

D. Contoh Struktur Menu Website Portofolio untuk Siswa SMK

text

BERANDA (Halaman Muka)
├── Sambutan pembuka
├── Foto profil
└── Pesan singkat

TENTANG SAYA
├── Profil lengkap
├── Pendidikan
├── Keahlian teknis & nonteknis
└── Minat & tujuan karir

CV DIGITAL
├── Embed file PDF CV dari Canva

PORTOFOLIO PROYEK
├── Proyek 1 (Judul, gambar, deskripsi, tools, hasil)
├── Proyek 2
└── Proyek 3

PRESTASI & SERTIFIKAT
├── Gallery pencapaian (gambar + teks)

KONTAK
├── Email
├── Media sosial (opsional)
└── Formulir kontak (opsional)

---

4️⃣ MENGGABUNGKAN CV DAN WEBSITE MENJADI PORTOFOLIO UTUH

Integrasi Antar-Komponen

Komponen	Dibuat di	Cara Menyatukan
CV Digital	Canva (export PDF)	Sematkan file PDF di halaman "CV Saya" Google Sites
Dokumentasi Proyek	Canva / Screenshot / Foto	Unggah ke Google Drive → masukkan di halaman proyek
Website Portofolio	Google Sites	Publikasikan → bagikan link di CV, bio medsos, email signature

Checklist Portofolio Digital yang Profesional

✓	Aspek yang Diperiksa
☐	CV digital sudah di-export PDF dengan desain rapi dan mudah dibaca
☐	Nama website jelas dan mudah diingat (Portofolio [Nama Anda])
☐	Semua halaman di Google Sites sudah terisi lengkap
☐	Minimal 1 proyek ditampilkan dengan deskripsi yang jelas (judul, peran, tools, hasil)
☐	Ada halaman kontak yang berisi email aktif
☐	Warna dan font konsisten di seluruh halaman
☐	Link website portofolio sudah diuji (bisa diakses dengan baik)
☐	CV sudah diunggah ke Google Drive dan disematkan dengan benar
☐	Foto profil sudah ditambahkan di halaman utama

---

5️⃣ PERAN PORTOFOLIO DIGITAL DALAM PENGEMBANGAN KOMUNIKASI DAN KEMANDIRIAN

A. Komunikasi melalui Portofolio Digital

Portofolio digital adalah sarana komunikasi profesional antara siswa dengan calon mitra magang, pemberi kerja, atau perguruan tinggi.

Kemampuan komunikasi yang terlihat dalam portofolio digital:

Aspek Komunikasi	Implementasi dalam Portofolio
Komunikasi visual	Desain CV dan website yang bersih dan rapi mencerminkan profesionalisme
Komunikasi tertulis	Deskripsi proyek, profil diri, dan CV ditulis dengan bahasa yang jelas, efektif, dan beretika
Komunikasi digital	Kemampuan mengorganisasi informasi secara online dan menyajikannya dengan struktur yang mudah dipahami pengunjung
Personal branding digital	Portofolio menjadi wajah profesional di dunia maya, menunjukkan keterampilan berkomunikasi secara tidak langsung

Refleksi bagi siswa: "Portofolio digital adalah etalase diri Anda. Di dalamnya tercermin keahlian, proses berpikir kreatif, dan pencapaian yang telah diraih".

B. Kemandirian dalam Membangun Portofolio

Proses penyusunan portofolio secara mandiri mengembangkan berbagai aspek kemandirian:

Aspek Kemandirian	Praktik dalam Kegiatan
Perencanaan mandiri	Menentukan konsep website dan isi CV tanpa sepenuhnya bergantung pada guru
Kurasi mandiri	Memilih 3-5 proyek/produk terbaik yang paling mencerminkan kompetensi
Pengambilan keputusan	Memilih template CV, tema website, dan tata letak sesuai nilai personal
Manajemen waktu	Menyelesaikan CV, 1 halaman website, dan dokumentasi proyek dalam waktu terbatas
Pemecahan masalah mandiri	Mengatasi kendala teknis (misal: file tidak bisa di-upload, link rusak) secara mandiri atau kolaboratif