UNIKOM

Hasil Eksperimen Pembuatan Website Portofolio sebagai Media Personal Branding Mahasiswa

6–9 minutes

Abstrak

Perkembangan teknologi digital membuat mahasiswa perlu memiliki media yang dapat digunakan untuk memperkenalkan kemampuan dan hasil proyek yang dimiliki. Salah satu media yang cukup efektif adalah website portofolio pribadi. Artikel ini membahas hasil eksperimen pembuatan website portofolio menggunakan HTML, CSS, dan JavaScript yang dirancang sebagai sarana personal branding mahasiswa. Proses eksperimen dilakukan melalui tahap identifikasi kebutuhan, perancangan antarmuka, implementasi, pengujian, dan deployment menggunakan Vercel.

Website yang dihasilkan menampilkan informasi profil, keterampilan, proyek, serta kontak dalam satu halaman yang responsif. Hasil pengujian menunjukkan bahwa website dapat diakses dengan baik melalui desktop maupun smartphone dan memiliki waktu muat yang relatif cepat karena tidak menggunakan framework tambahan. Selain berfungsi sebagai dokumentasi hasil belajar, website juga dapat digunakan sebagai pendukung Curriculum Vitae ketika melamar pekerjaan atau mengikuti program magang. Berdasarkan hasil eksperimen, website portofolio terbukti mampu menjadi media personal branding yang sederhana, mudah dikembangkan, dan memiliki manfaat praktis bagi mahasiswa di bidang teknologi informasi.

Kata kunci: Website Portofolio, Personal Branding, HTML, CSS, JavaScript.

Pendahuluan

Saat ini banyak perusahaan tidak hanya melihat Curriculum Vitae (CV) ketika menilai calon pelamar, tetapi juga ingin mengetahui hasil proyek yang pernah dibuat. Bagi mahasiswa di bidang teknologi informasi, kemampuan tersebut sering kali lebih mudah ditunjukkan melalui portofolio digital dibandingkan hanya melalui dokumen tertulis. Website portofolio menjadi salah satu cara yang cukup efektif untuk menampilkan identitas, keterampilan, serta hasil karya dalam satu tempat yang dapat diakses secara online.

Selama masa perkuliahan, mahasiswa biasanya mengerjakan berbagai tugas dan proyek, mulai dari pembuatan website, aplikasi sederhana, hingga desain antarmuka. Namun, hasil proyek tersebut sering kali tersimpan di komputer pribadi tanpa dokumentasi yang rapi. Akibatnya, ketika diperlukan untuk melamar magang atau pekerjaan, mahasiswa harus mencari kembali file proyek yang pernah dibuat. Dengan adanya website portofolio, seluruh proyek dapat dikumpulkan dan ditampilkan secara lebih terstruktur.

Eksperimen pada artikel ini dilakukan dengan membuat website portofolio sederhana menggunakan HTML, CSS, dan JavaScript. Ketiga teknologi tersebut dipilih karena merupakan dasar pengembangan web yang umum dipelajari oleh mahasiswa. Selain itu, penggunaan teknologi dasar memungkinkan proses pengembangan dilakukan tanpa ketergantungan pada framework tertentu sehingga lebih mudah dipahami.

Website yang dikembangkan memiliki beberapa bagian utama, yaitu profil singkat, daftar keterampilan, proyek yang pernah dikerjakan, dan informasi kontak. Seluruh bagian dirancang dalam satu halaman dengan tampilan responsif agar tetap nyaman digunakan melalui desktop maupun smartphone. Setelah proses pengembangan selesai, website dipublikasikan menggunakan layanan Vercel sehingga dapat diakses secara online.

Tujuan dari eksperimen ini adalah mengetahui bagaimana proses pembuatan website portofolio serta mengevaluasi apakah website tersebut dapat berfungsi sebagai media personal branding mahasiswa. Selain menghasilkan produk luaran berupa website yang dapat digunakan secara langsung, eksperimen ini juga memberikan pengalaman praktis mengenai tahapan pengembangan web mulai dari perancangan hingga deployment.

Metode Eksperimen

Eksperimen ini berfokus pada pembuatan website portofolio sebagai media personal branding mahasiswa. Metode yang digunakan adalah metode eksperimen, yaitu dengan merancang, mengembangkan, menguji, dan mengevaluasi sebuah produk berupa website yang dapat digunakan secara langsung. Seluruh proses dilakukan secara bertahap agar setiap bagian dapat dianalisis dan diperbaiki apabila ditemukan kendala selama pengembangan.

Analisis Kebutuhan

Tahap pertama adalah menentukan informasi yang akan ditampilkan pada website. Informasi dipilih berdasarkan kebutuhan dasar sebuah portofolio digital agar pengunjung dapat mengenal pemilik website sekaligus melihat hasil proyek yang pernah dikerjakan.

Beberapa informasi yang dimasukkan ke dalam website meliputi:

  • Profil singkat pemilik website.
  • Kemampuan teknis (technical skills).
  • Daftar proyek yang pernah dibuat.
  • Informasi kontak.
  • Tautan menuju GitHub dan media sosial profesional.

Selain menentukan isi website, pada tahap ini juga ditetapkan beberapa kebutuhan nonfungsional, seperti tampilan yang sederhana, mudah dipahami, dapat diakses melalui berbagai perangkat, dan memiliki waktu muat yang cepat.

Perancangan Website

Setelah kebutuhan ditentukan, proses dilanjutkan dengan merancang struktur halaman website. Konsep yang digunakan adalah single page website, sehingga seluruh informasi ditempatkan dalam satu halaman yang dapat diakses melalui menu navigasi.

Website dibagi menjadi beberapa bagian utama, yaitu:

  • Home sebagai halaman pembuka yang menampilkan nama dan deskripsi singkat.
  • About yang berisi latar belakang serta ketertarikan pada bidang pengembangan web.
  • Skills yang menampilkan kemampuan yang telah dipelajari selama perkuliahan.
  • Projects yang berisi hasil proyek beserta penjelasan singkat.
  • Contact sebagai media komunikasi dengan pengunjung.

Desain dibuat sederhana dengan mengutamakan kenyamanan pengguna. Pemilihan warna, ukuran teks, dan tata letak disusun agar informasi mudah dibaca tanpa terlihat terlalu ramai.

Implementasi

Tahap implementasi dilakukan menggunakan Visual Studio Code sebagai editor utama. Website dibangun menggunakan tiga teknologi dasar, yaitu HTML sebagai struktur halaman, CSS untuk mengatur tampilan, dan JavaScript untuk menambahkan interaksi sederhana pada website.

Selama proses pengembangan, setiap bagian dibuat secara terpisah agar lebih mudah dikelola. Setelah seluruh komponen selesai dibuat, dilakukan pengecekan terhadap tampilan dan fungsi untuk memastikan tidak terdapat kesalahan penulisan kode maupun elemen yang tidak berjalan dengan baik.

Pengujian

Website yang telah selesai dikembangkan kemudian diuji untuk memastikan seluruh fitur dapat digunakan dengan baik. Pengujian dilakukan pada beberapa aspek berikut.

a. Pengujian Navigasi

Seluruh menu diuji untuk memastikan setiap tombol dapat mengarahkan pengguna ke bagian yang sesuai tanpa mengalami kesalahan.

b. Pengujian Responsif

Website dibuka menggunakan desktop, laptop, dan smartphone untuk memastikan tampilan tetap rapi pada berbagai ukuran layar.

c. Pengujian Browser

Pengujian dilakukan menggunakan Google Chrome dan Microsoft Edge. Hasilnya menunjukkan bahwa seluruh komponen dapat ditampilkan dengan baik tanpa perbedaan tampilan yang berarti.

d. Pengujian Performa

Karena website hanya menggunakan HTML, CSS, dan JavaScript tanpa framework tambahan, proses pemuatan halaman berlangsung cukup cepat dan ringan ketika diakses melalui jaringan internet.

Deployment

Tahap terakhir adalah melakukan deployment menggunakan layanan Vercel. Setelah proses deployment selesai, website memperoleh alamat URL yang dapat diakses secara online. Dengan adanya proses ini, website tidak hanya berfungsi sebagai proyek pembelajaran, tetapi juga dapat digunakan sebagai media pendukung ketika melamar magang, mengikuti seleksi pekerjaan, maupun memperkenalkan hasil karya kepada orang lain.

Melalui tahapan tersebut, eksperimen menghasilkan sebuah website portofolio yang dapat digunakan sebagai media dokumentasi hasil belajar sekaligus personal branding mahasiswa.

Hasil dan Pembahasan

Setelah seluruh tahapan pengembangan selesai dilakukan, website portofolio berhasil dibangun dan dipublikasikan melalui Vercel sehingga dapat diakses secara online. Website memiliki lima bagian utama, yaitu Home, About, Skills, Projects, dan Contact. Seluruh bagian dirancang dalam satu halaman agar pengguna dapat memperoleh informasi dengan lebih cepat tanpa harus berpindah-pindah halaman.

Pada bagian Home, website menampilkan nama, deskripsi singkat, serta tombol navigasi menuju bagian proyek. Tampilan awal dibuat sederhana agar memberikan kesan profesional dan mudah dipahami oleh pengunjung. Bagian About digunakan untuk menjelaskan latar belakang serta ketertarikan terhadap bidang pengembangan web.

Bagian Skills menampilkan beberapa kemampuan yang telah dipelajari selama perkuliahan, seperti HTML, CSS, JavaScript, dan GitHub. Sementara itu, bagian Projects berisi daftar proyek yang pernah dikerjakan beserta penjelasan singkatnya. Kehadiran bagian ini menjadi salah satu poin penting karena pengunjung dapat melihat contoh hasil pekerjaan secara langsung, bukan hanya membaca daftar kemampuan.

Selama proses pengembangan, kendala utama yang ditemukan adalah penyesuaian tampilan pada perangkat mobile. Pada tahap awal, beberapa elemen terlihat kurang rapi ketika dibuka melalui smartphone. Masalah tersebut kemudian diatasi dengan menerapkan responsive design menggunakan CSS, seperti Flexbox dan media query, sehingga tata letak dapat menyesuaikan ukuran layar secara otomatis.

Selain tampilan, performa website juga menjadi perhatian selama pengujian. Karena website dibangun tanpa framework tambahan, ukuran file relatif kecil sehingga waktu muat halaman cukup cepat. Pengujian pada Google Chrome dan Microsoft Edge menunjukkan bahwa seluruh menu navigasi, tautan proyek, serta informasi kontak dapat berfungsi dengan baik tanpa ditemukan kesalahan yang berarti.

Dari hasil eksperimen dapat dilihat bahwa website portofolio memberikan beberapa kelebihan dibandingkan CV biasa. Informasi dapat ditampilkan lebih lengkap, proyek dapat didokumentasikan dengan rapi, dan pembaruan konten dapat dilakukan kapan saja. Website juga lebih mudah dibagikan kepada dosen, recruiter, maupun pihak lain melalui sebuah tautan.

Namun, website yang dibuat masih memiliki keterbatasan karena bersifat statis. Perubahan konten masih harus dilakukan secara manual melalui kode program dan belum menggunakan database atau sistem administrasi. Meskipun demikian, untuk kebutuhan personal branding mahasiswa, website ini sudah mampu memenuhi fungsi utamanya dengan baik.

Kesimpulan

Eksperimen pembuatan website portofolio berhasil menghasilkan sebuah media personal branding yang sederhana, responsif, dan dapat diakses secara online. Website dibangun menggunakan HTML, CSS, dan JavaScript, kemudian dipublikasikan melalui Vercel sehingga dapat digunakan sebagai pendukung CV ketika melamar magang atau pekerjaan.

Hasil pengujian menunjukkan bahwa seluruh fitur utama berjalan dengan baik pada desktop maupun smartphone. Selain memberikan pengalaman praktis dalam pengembangan web, proyek ini juga membantu mendokumentasikan hasil belajar dan proyek yang pernah dikerjakan selama perkuliahan.

Ke depannya, website masih dapat dikembangkan dengan menambahkan database, sistem administrasi, blog pribadi, atau integrasi dengan GitHub agar pengelolaan konten menjadi lebih mudah dan fitur yang tersedia semakin lengkap.

Signature

Penulis

Rafii Rabani

Mahasiswa Program Studi Sistem informasi

Artikel ini disusun sebagai dokumentasi hasil eksperimen pembuatan website portofolio sekaligus sebagai bentuk implementasi pembelajaran dalam bidang pengembangan web.

Website hasil eksperimen dapat diakses pada: https://rafii-portfolio.vercel.app

Daftar Pusaka

  • MDN Web Docs. (2024). HTML: HyperText Markup Language. https://developer.mozilla.org/en-US/docs/Web/HTML
  • MDN Web Docs. (2024). CSS: Cascading Style Sheets. https://developer.mozilla.org/en-US/docs/Web/CSS
  • MDN Web Docs. (2024). JavaScript Guide. https://developer.mozilla.org/en-US/docs/Web/JavaScript
  • Pressman, R. S., & Maxim, B. R. (2020). Software Engineering: A Practitioner’s Approach (9th ed.). McGraw-Hill Education.
  • Sommerville, I. (2016). Software Engineering (10th ed.). Pearson Education.
  • Vercel. (2024). Vercel Documentation. https://vercel.com/docs
  • W3C. (2024). HTML Standard. https://html.spec.whatwg.org/