Halo, Habr! Saya mempersembahkan kepada Anda terjemahan artikel "Cara Membangun Portofolio Teknis yang Hebat" oleh Emma Wedekind.

Portofolio adalah cerminan kepribadian Anda, biasanya kesan pertama Anda dan pekerjaan Anda terbentuk justru berkat portofolio. Karena itu, sangat penting bagi Anda untuk membuat portofolio yang mengungkapkan Anda dan pekerjaan Anda dari sisi terbaik.

Saya sarankan Anda melihat beberapa tips saya untuk membuat portofolio teknis yang sempurna.

Catatan: tips ini berdasarkan pada pengalaman pribadi saya. Ada banyak cara untuk membuat portofolio yang hebat, jadi gunakan itu sebagai pedoman dan bukan sebagai aturan keras.

Apa yang membuat portofolio bagus?

Portofolio menjelaskan orang seperti apa Anda dan keterampilan apa yang dapat Anda tawarkan. Juga, portofolio adalah cara yang ideal untuk menunjukkan keterampilan pengembangan Anda!

Berikut adalah faktor-faktor kunci yang harus Anda sertakan untuk memastikan bahwa portofolio Anda kelas satu.

Portofolio Anda harus memberi tahu orang lain tentang Anda.

Portofolio adalah cara Anda untuk bersinar. Apa yang ingin kamu lakukan untuk kesenangan? Singkatnya, apa kisah hidup Anda? Apa yang Anda ingin orang tahu tentang Anda?

Dengan menambahkan beberapa sentuhan pribadi, Anda memberi calon atasan gambaran tentang cara kerjanya dengan Anda!

Ini adalah kutipan kecil dari halaman portofolio saya. Jangan ragu untuk menontonnya sepenuhnya di sini .

Portofolio Anda harus menampilkan karya atau proyek terbaik Anda.

Jika Anda memiliki proyek atau pekerjaan yang Anda banggakan yang menggambarkan kemampuan pemrograman atau desain Anda, maka portofolio Anda adalah tempat yang tepat untuk memamerkannya.

Banyak perusahaan membuat karya mereka sendiri (rahasia), jadi Anda mungkin bertanya-tanya bagaimana Anda dapat memasukkannya ke dalam portofolio publik.

Sayangnya, Anda tidak dapat melakukan ini. Saran saya adalah menjalankan dua hingga tiga proyek pihak ketiga yang akan menunjukkan kemampuan Anda. Saya tahu ini tidak layak untuk semua orang, tetapi Anda tidak dapat melakukan hal lain saat pekerjaan Anda dirahasiakan.

Untuk menampilkan pekerjaan Anda, jelaskan teknologi yang digunakan, peran Anda dalam proyek (jika berlaku), sertakan tangkapan layar atau dua dan poskan tautan ke kode (jika mungkin).

Ini adalah bagaimana saya menetapkan bagian kerja dalam portofolio saya. Anda dapat menontonnya sepenuhnya di sini .

Portofolio Anda harus menggambarkan keterampilan pengembangan (dan desain) Anda yang mengesankan.

Salah satu cara yang bagus untuk menarik perhatian atasan adalah dengan menggunakan portofolio Anda sebagai proyek sampingan. Saya menggunakan Gatsby di React.js untuk membuat portofolio saya sederhana karena saya ingin bereksperimen dengan generator situs dan menunjukkan keterampilan saya dalam bekerja dengan React.

Sebelum membuat portofolio, saya kompilasi sepenuhnya di Sketch . Saya sarankan membangun rencana bagaimana Anda ingin mempresentasikan informasi tentang diri Anda.

Portofolio Anda harus relevan.

Perekrut dan calon pemberi kerja dapat melihat portofolio Anda, bahkan jika Anda belum memperbaruinya selama bertahun-tahun. Karena itu, sangat penting untuk menjaga informasi tentang diri Anda serelevan mungkin.

Jika Anda memiliki peran baru, tingkatkan portofolio Anda. Jika Anda membuat aplikasi baru yang keren, perbarui portofolio Anda!

Anda ingin ini menjadi representasi Anda dan keahlian Anda saat ini. Karena itu, penting untuk membuat sesuatu yang mudah diperbaiki nanti dan itu akan bertahan dalam ujian waktu.

Portofolio Anda harus mengandung kontak Anda.

Anda harus selalu menyediakan cara untuk berkomunikasi dalam portofolio Anda. Jujur, saat ini, saya tidak memiliki kontak saya dalam portofolio (malu pada saya!)

Jika Anda tidak memberikan kontak, perekrut tidak akan dapat menghubungi Anda tentang lowongan potensial.

Jadi tambahkan tautan ke jejaring sosial Anda (jika Anda menggunakannya sebagai alat komunikasi utama Anda), email atau nomor telepon Anda (jika Anda tidak keberatan menerima banyak panggilan).

Beri mereka beberapa cara untuk menghubungi Anda.

Bagaimana cara menghasilkan desain yang bagus?

Membuat desain portofolio dapat menjadi salah satu tugas paling sulit, terutama jika Anda adalah pengembang back-end atau jika Anda praktis tidak memiliki pengalaman dalam desain proyek.

Ketika saya membuat situs web atau aplikasi, saya menggunakan dribbble untuk menginspirasi dan memilih palet warna. Anda juga dapat menggunakan templat aplikasi Wix dan Squarespace . Saya tidak menyarankan Anda menjiplak desain orang lain, tetapi ini adalah titik awal yang baik untuk inspirasi.

Saya merekomendasikan membuat desain sesederhana mungkin. Anda ingin melakukan sesuatu yang akan terlihat baik setelah 5, atau bahkan 10 tahun. Pilih warna yang sederhana namun terjangkau. Gunakan font yang dapat dibaca dengan ukuran yang sesuai.

Aplikasi ini juga membantu mengeluarkan struktur informasi. Informasi apa yang Anda inginkan dalam portofolio Anda? Bagaimana Anda ingin itu diatur? Satu Halaman? Dalam beberapa halaman? Jawab pertanyaan ini sebelum menulis kode, dan Anda akan menghemat banyak waktu.

Jika Anda membutuhkan grafik, saya sarankan layanan Undraw , yang gratis dan mudah digunakan.

Teknologi apa yang harus saya gunakan untuk membuat portofolio?

Ada banyak teknologi berbeda yang dapat digunakan untuk membuat portofolio Anda. Mari berkenalan dengan beberapa opsi untuk pengembang back-end dan front-end.

Pengembang back-end

Jika Anda adalah pengembang back-end, atau Anda tidak terlalu suka mengembangkan UI , Anda dapat mencatat beberapa tips.

1. Terapkan CMS

Sistem manajemen konten mengelola pembuatan dan konten konten digital.

WordPress adalah salah satu sistem manajemen konten yang paling populer, dan merupakan pilihan yang bagus untuk pengembang yang tidak terlalu nyaman mengembangkan UI mereka sendiri.

2.Gunakan vanilla HTML dan CSS

Jika Anda tahu sedikit dasar-dasar pengembangan web, maka pilihan yang bagus adalah mulai membuat situs menggunakan vanilla HTML dan CSS. Jangan berpikir bahwa Anda harus menyiksa diri sendiri dengan desain / pemodelan antarmuka jika Anda tidak memiliki keterampilan yang brilian dalam hal ini. Tetapi membangun situs Anda dalam HTML dan CSS akan menunjukkan bahwa Anda dapat mempelajari keterampilan di luar zona nyaman Anda.

Anda bahkan tidak perlu JavaScript untuk membuat portofolio yang mengesankan!

3. Gunakan kerangka kerja CSS

Jika Anda nyaman dengan HTML dan CSS dasar, tetapi menginginkan UI yang lebih konsisten, Anda dapat mencoba kerangka CSS.

Kerangka kerja CSS membuat bekerja dengan elemen gaya lebih cepat dan lebih mudah. Penting untuk dicatat bahwa jika Anda melamar pekerjaan pengembang Front-end, menggunakan kerangka kerja CSS mungkin bukan pilihan terbaik, karena pengusaha akan mencari pengembang yang dapat mengembangkan CSS. Tetapi untuk pengembang back-end, ini bisa menjadi peluang besar.

Saya menyarankan Anda untuk memperhatikan Foundation , Bulma , SemanticUI , atau Bootstrap .



4. Gunakan pembangun situs

Jika Anda hanya ingin memposting konten secepat mungkin, maka Anda juga dapat menggunakan pembuat situs seperti Wix atau Squarespace .

Mereka dapat membuat situs web secepat dan semudah mungkin. Anda bahkan dapat mengintegrasikan domain Anda sendiri.

Namun, jika Anda mengklaim sebagai pengembang Front-end, saya memperingatkan agar tidak menggunakan platform pengembangan situs web. Bagaimanapun, ini adalah kesempatan untuk menunjukkan keahlian pengembang Anda! Semua atau tidak sama sekali!

Pengembang front-end

Jika Anda adalah pengembang Front-end, maka Anda memiliki banyak opsi yang tersedia untuk membuat situs.

1. Gunakan HTML vanilla, CSS, dan JavaScript

Anda tidak akan salah menggunakan situs vanilla sederhana. Tidak masuk akal untuk menyulitkan arsitektur portofolio terlalu banyak jika Anda tidak menginginkannya atau Anda tidak membutuhkannya. Fakta sederhana bahwa Anda membuat situs Anda dari awal menunjukkan calon pengusaha bahwa Anda bersedia meluangkan waktu ekstra untuk menunjukkan keahlian Anda.

2. Gunakan kerangka kerja JavaScript

Anda dapat menggunakan portofolio Anda untuk melatih (dan menunjukkan) kemampuan Anda dalam JavaScript menggunakan kerangka kerja atau pustaka. Saya sarankan memilih apa yang Anda rasa nyaman untuk dikerjakan (atau apa pun itu, memilih apa yang ingin Anda pelajari) atau apa yang sesuai untuk spesialisasi pilihan Anda.

Seringkali kerangka kerja atau pustaka ini memiliki CLI , antarmuka baris perintah yang dapat Anda gunakan untuk membuat proyek awal. Ini dapat menghemat banyak waktu untuk mengatur lingkungan Anda dan menghemat kesulitan kompilasi, meminimalkan, dan membasahi kode Anda sendiri.

3. Gunakan generator situs statis.

Generator situs statis telah mendapatkan ketenaran di industri komputer dengan pengenalan perpustakaan dan kerangka kerja populer (Bereaksi, Vue, Angular, dll.). Saya membangun portofolio saya dengan Gatsby : generator situs untuk React.



Ada banyak generator situs yang berbeda, seperti Next.js untuk Bereaksi aplikasi dan VuePress untuk Vue.js.

Mereka menyediakan fitur yang bermanfaat seperti plugin pengoptimalan gambar, kemampuan beradaptasi untuk perangkat seluler, dan aksesibilitas.

Rekomendasi kode dalam portofolio Anda.

• Pastikan kode Anda diatur dengan cermat dan efisien. Sangat mudah untuk meletakkan semua konten Anda pada satu halaman (dan Anda dapat melakukannya), tetapi memecah bagian / konten yang berbeda ke dalam komponen web Anda sendiri atau halaman HTML dapat membuat perbedaan besar.
• Pastikan CSS Anda bersih dan teratur. Cobalah untuk tetap menggunakan CSS yang lebih modern untuk elemen pemosisian (seperti Flexbox atau CSS-Grid over floats). Ini menunjukkan bahwa Anda tetap up to date dengan spesifikasinya.
• Gunakan HTML semantik. Atur kode Anda dalam hierarki dengan area inti yang ditentukan. Gunakan bidang-bidang utama ini (bagian, nav, tajuk, samping, badan, dll.) Untuk menyorot poin-poin penting dalam portofolio Anda. Cobalah untuk mengurangi penggunaan div dan span.

Konten apa yang perlu saya tambahkan?

Saya selalu merekomendasikan untuk memasukkan item-item berikut dalam portofolio Anda:

• Tentang saya : siapa kamu Apa yang ingin Anda lakukan di waktu senggang? Fakta menarik apa yang Anda miliki?
• Pekerjaan / proyek / keterampilan : Teknologi apa yang Anda gunakan? Proyek apa yang telah dikembangkan?
• Blog (opsional) : Jika Anda seorang blog, bagikan di sini.
• Kontak : bagaimana seorang perekrut dapat menghubungi Anda?

Sekali lagi, ini adalah preferensi pribadi saya. Anda mungkin perlu membuat halaman yang Anda bagikan di berbagai platform (jejaring sosial, GitHub, dll.)

---

Ingat, portofolio Anda adalah cerminan diri Anda. Ini bukan satu-satunya pilihan untuk menyusun portofolio yang cocok untuk semua orang. Buat milik Anda sendiri!