10 Tips Membuat Portofolio Web Developer

Sepanjang karier saya, saya telah melihat banyak situs portofolio pengembang. Saya sudah memiliki situs saya sendiri, dan saya sudah memeriksa setidaknya 50 situs atas nama orang lain. Saya telah melihat beberapa portofolio yang benar-benar hebat ... dan saya telah melihat beberapa yang mengerikan. Mendapatkan pekerjaan bisa jadi sulit di level awal dan memiliki portofolio yang bagus bisa membuat semua perbedaan. Dengan mengingat hal itu, berikut adalah 10 tips yang akan meningkatkan portofolio pengembang web Anda.

1. Clean & Modern Design/UI / Desain Bersih & Modern / UI

The design, user interface, and all around look of your site is the first thing that anyone sees. It’s the all-important first impression. This might seem obvious, but I’ve seen some portfolio sites recently that looked like they were built in the early 2000s. One could argue that as a web developer, your portfolio itself is the most important display of your skill since it’s the only work that a recruiter is guaranteed to see and navigate. It’s imperative to make sure your portfolio site is presentable and functional.

Desain, antarmuka pengguna, dan tampilan sekeliling situs Anda adalah hal pertama yang dilihat siapa pun. Ini kesan pertama yang sangat penting. Ini mungkin tampak jelas, tetapi saya telah melihat beberapa situs portofolio baru-baru ini yang terlihat seperti dibangun pada awal 2000-an. Orang bisa berargumen bahwa sebagai pengembang web, portofolio Anda sendiri adalah tampilan keterampilan Anda yang paling penting karena itu adalah satu-satunya pekerjaan yang dijamin oleh perekrut untuk dilihat dan dinavigasi. Sangat penting untuk memastikan situs portofolio Anda rapi dan fungsional.

2. Good Hosting & Custom Domain / Hosting Baik & Domain Kustom

Poin kedua ada dua: Anda harus memiliki paket hosting yang cukup serta nama domain kustom. Terlalu sering, saya diminta untuk meninjau portofolio yang di-host di 'something.heroku-app.com' atau subdomain gratis lainnya. Domain seperti ini, menurut saya, tidak benar-benar menunjukkan profesionalisme jika mereka meng-hosting portofolio utama Anda. Mereka dapat digunakan untuk proyek satu kali dan menampilkan keterampilan, tetapi tidak untuk portofolio Anda. Cukup mudah untuk membeli nama domain $ 12 dan menghostingnya dengan murah di salah satu dari banyak opsi hosting bersama. Jika tidak, sebagai kandidat untuk pekerjaan web, domain yang mudah digerakkan memberi kesan bahwa Anda tidak terlalu peduli.

Anda juga harus menggunakan sertifikat SSL dan memikirkan infrastruktur situs Anda. Temukan sesuatu yang efektif, memuat halaman Anda dengan cepat, dan terlihat profesional. Jika Anda bersikeras untuk menekan biaya, ada layanan seperti Halaman Github yang memungkinkan Anda untuk membawa domain Anda sendiri dan sertifikat SSL dan meng-host halaman web secara gratis. Jika situs Anda statis dengan beberapa tautan dan gambar, ini bisa menjadi pilihan yang baik.

3. Keep it Simple / Tetap Sederhana

Ketika menulis untuk web, praktik terbaik adalah mengambil hal terpenting yang ingin Anda sampaikan dan memasukkannya ke dalam jumlah teks sesingkat mungkin. Kebanyakan orang (bukan hanya perekrut dan majikan) tidak sabar. Kami semua ingin kepuasan instan dan pengusaha ingin tahu persis apa yang mereka lihat segera setelah mereka mengunjungi situs Anda. Pastikan hal yang paling penting adalah bagian depan dan tengah, tidak terlalu lama, dan sampai pada intinya. Jika Anda memiliki bagian "tentang" dengan 10 paragraf, pengusaha mungkin tidak akan mulai membaca.

It’s much better to have an elegant landing page with a few key sections (ex. Showcase section, a Project section, an About page, and a Contact page) than a 10–15 page site with various articles and other tangential content. Employers aren’t going to read your entire blog history. Studies show that most employers barely even skim resumes, and the same thought process can easily be applied to portfolio pages… Make sure you stand out and that your best work is easy to find..

Jauh lebih baik memiliki halaman arahan yang elegan dengan beberapa bagian utama (mis. Bagian Etalase, bagian Proyek, halaman Tentang, dan halaman Kontak) daripada situs 10–15 halaman dengan berbagai artikel dan konten tangensial lainnya. Pengusaha tidak akan membaca seluruh riwayat blog Anda. Studi menunjukkan bahwa sebagian besar perusahaan hampir tidak melanjutkan lagi skim, dan proses pemikiran yang sama dapat dengan mudah diterapkan ke halaman portofolio ... Pastikan Anda menonjol dan pekerjaan terbaik Anda mudah ditemukan ..

4. Don’t Exaggerate Skills / Jangan Membesar-besarkan Keterampilan

Be honest about what you know. If you took a Ruby on Rails tutorial, you’re probably not qualified to call yourself a Rails Developer. I’ve seen Portfolios that list literally every language and framework. Before you do this (or if you already have), remember that employers aren’t stupid. They catch on and they can recognize when a candidate is simply listing out any technology stack they’ve ever heard about.

Jujurlah tentang apa yang Anda ketahui. Jika Anda mengambil tutorial Ruby on Rails, Anda mungkin tidak memenuhi syarat untuk menyebut diri Anda seorang Pengembang Rails. Saya telah melihat Portofolio yang mencantumkan secara harfiah setiap bahasa dan kerangka kerja. Sebelum Anda melakukan ini (atau jika sudah), ingatlah bahwa majikan tidak bodoh. Mereka menangkap dan mereka dapat mengenali ketika seorang kandidat hanya mendaftarkan tumpukan teknologi yang pernah mereka dengar.

Consider how this practice might play out in the worst case scenario. Imagine that you take a beginner-level Java course and on your portfolio you list Java as a skill set. You get hired at some company and they put you in charge of adding a couple new features to their extensive Java code base. Unless you actually know how to handle Java code, you probably wouldn’t know where to start. That’s an embarrassing situation that you want to try to avoid, so just be upfront.. It’s better to specialize in a few things than to know a little about everything.

Pertimbangkan bagaimana praktik ini mungkin terjadi dalam skenario kasus terburuk. Bayangkan bahwa Anda mengambil kursus Java tingkat pemula dan pada portofolio Anda, Anda mendaftar Java sebagai keahlian. Anda dipekerjakan di beberapa perusahaan dan mereka memberi Anda tanggung jawab untuk menambahkan beberapa fitur baru ke basis kode Java mereka yang luas. Kecuali Anda benar-benar tahu cara menangani kode Java, Anda mungkin tidak akan tahu harus mulai dari mana. Itu adalah situasi yang memalukan yang ingin Anda coba hindari, jadi bersikaplah jujur ​​.. Lebih baik mengkhususkan diri dalam beberapa hal daripada mengetahui sedikit tentang segalanya.

5. Live Examples/Demos / Contoh / Demo Langsung

If you’ve worked on cool projects, show them (or link to them) on your portfolio (duh). In your projects section, you generally want to have one button that goes to the live project and one button that goes to the code (i.e. Github). There are some exceptions, however, like if you’re developing command line automation tools (or similar apps that have no verifiable front-end). In such cases, you can simply link the Github repository.

Jika Anda pernah mengerjakan proyek keren, tunjukkan (atau tautkan ke mereka) pada portofolio Anda (ya). Di bagian proyek Anda, Anda biasanya ingin memiliki satu tombol yang menuju ke proyek langsung dan satu tombol yang menuju ke kode (mis. Github). Namun, ada beberapa pengecualian, seperti jika Anda mengembangkan alat otomatisasi baris perintah (atau aplikasi serupa yang tidak memiliki front-end yang dapat diverifikasi). Dalam kasus seperti itu, Anda bisa menautkan repositori Github.

To add to this, images are also good… but definitely not on their own. If you have images of your project, make sure to also include a live demo and code link. I’ve seen portfolios with a single image of the project and no way to test or see it in the real world. Anyone can put an image on a page, but a web developer should be able to provide a real-time example of their work on the web. In terms of types of projects, production-level applications that serve a purpose and exist on their own (i.e. a site with its own domain that people use without necessarily knowing who they are) are definitely the best to show off. However, not everyone has a big web app under their belt. If you’re in that majority, feel free to provide links to projects that present your skills in the best light. In such instances, it’s fine to host the project using free services like Heroku or Netlify. 

Untuk menambah ini, gambar juga bagus ... tapi jelas tidak sendiri. Jika Anda memiliki gambar proyek Anda, pastikan juga menyertakan demo langsung dan tautan kode. Saya telah melihat portofolio dengan satu gambar proyek dan tidak ada cara untuk menguji atau melihatnya di dunia nyata. Siapa pun dapat meletakkan gambar di halaman, tetapi pengembang web harus dapat memberikan contoh waktu nyata dari pekerjaan mereka di web. Dalam hal jenis proyek, aplikasi tingkat produksi yang melayani tujuan dan ada pada mereka sendiri (yaitu situs dengan domain sendiri yang digunakan orang tanpa harus mengetahui siapa mereka) jelas merupakan yang terbaik untuk dipamerkan. Namun, tidak semua orang memiliki aplikasi web besar. Jika Anda berada di mayoritas itu, jangan ragu untuk memberikan tautan ke proyek yang menghadirkan keterampilan Anda dengan cara terbaik. Dalam keadaan seperti itu, tidak masalah untuk meng-host proyek menggunakan layanan gratis seperti Heroku atau Netlify.

6. Be Selective of Projects / Selektif dalam Proyek

If you’re a self-taught developer like me, you’ve probably done a ton of smaller projects to learn new skills and concepts. You can’t put every little To Do List app you’ve created on your Portfolio. Well, you can, but you shouldn’t. My recommendation is to pick between 3 and 6 of your best projects. It’s even better to have 2 large, high-quality projects over 10 tiny, one-off (i.e. To Do List) apps. Pick the best and use those. When it comes to a web developer’s portfolio, the game is quality, not quantity.

Jika Anda seorang pengembang otodidak seperti saya, Anda mungkin telah melakukan banyak proyek kecil untuk mempelajari keterampilan dan konsep baru. Anda tidak dapat menempatkan setiap aplikasi To Do List kecil yang Anda buat di Portofolio Anda. Ya, Anda bisa, tetapi tidak seharusnya. Rekomendasi saya adalah memilih antara 3 dan 6 proyek terbaik Anda. Lebih baik memiliki 2 proyek besar, berkualitas tinggi, lebih dari 10 aplikasi kecil, satu kali (yaitu To To List). Pilih yang terbaik dan gunakan itu. Ketika datang ke portofolio pengembang web, gim ini berkualitas, bukan kuantitas.

7. Customize Course Projects / Sesuaikan Proyek Kursus

These days, there are many course offerings that will teach you a web technology by walking you through a mid-sized project. I have a few of these myself. If you take a tutorial or a Udemy course and you plan on using the project on your portfolio, do yourself a favor and customize it. Don’t just finish the course, copy the code into a Github repo, and provide the exact course version as if it was your own work. I’ve seen that countless times, even with my own tutorials and courses showing up in others’ portfolios. Employers know these projects and become unimpressed because they see them on the portfolios of so many different applicants.

Hari-hari ini, ada banyak penawaran kursus yang akan mengajarkan Anda teknologi web dengan memandu Anda melalui proyek menengah. Saya punya beberapa di antaranya sendiri. Jika Anda mengambil tutorial atau kursus Udemy dan Anda berencana menggunakan proyek pada portofolio Anda, bantulah diri Anda sendiri dan sesuaikan saja. Jangan hanya menyelesaikan kursus, salin kode ke dalam repo Github, dan berikan versi kursus yang tepat seolah-olah itu adalah pekerjaan Anda sendiri. Saya sudah melihatnya berkali-kali, bahkan dengan tutorial dan kursus saya sendiri muncul di portofolio orang lain. Pengusaha mengetahui proyek-proyek ini dan menjadi tidak terkesan karena mereka melihatnya di portofolio begitu banyak pelamar yang berbeda.

Customizing a project doesn’t have to be incredibly tedious. Change the look, add some features and functionality. Change the resource — if it’s a To-Do List, change it into an Address Book or Contact List. Spend the time to make it your own instead of just copying it and passing it off.

Menyesuaikan proyek tidak harus sangat membosankan. Ubah tampilan, tambahkan beberapa fitur dan fungsionalitas. Ubah sumber daya - jika ini Daftar Agenda, ubah menjadi Buku Alamat atau Daftar Kontak. Habiskan waktu untuk menjadikannya milik Anda alih-alih hanya menyalinnya dan meneruskannya.

8. Easy Contact / Kontak yang Mudah

An employer should know exactly how to contact you when they look at your site. There are many ways to accomplish this. I would suggest putting your preferred method of contact above everything else, literally, in a top bar above the navigation menu. In addition, you can add a contact form at the bottom of the page or on it’s own page of your site. It all depends on how you want to structure your site, but make absolutely sure that your contact details are prominent and easy to find.

Seorang majikan harus tahu persis bagaimana menghubungi Anda ketika mereka melihat situs Anda. Ada banyak cara untuk mencapai ini. Saya sarankan menempatkan metode kontak pilihan Anda di atas segalanya, secara harfiah, di bilah atas di atas menu navigasi. Selain itu, Anda dapat menambahkan formulir kontak di bagian bawah halaman atau di halaman milik situs Anda. Itu semua tergantung pada bagaimana Anda ingin membuat struktur situs Anda, tetapi pastikan bahwa detail kontak Anda menonjol dan mudah ditemukan.

9. Web Presence & Brand / Keberadaan dan Merek Web

This is more important for people like me who don’t have a college degree, because it shows the employer that you’re passionate about what you’re doing, you’re driven, and you’re knowledgeable. Start with some basic branding. Keep the same colors and try to use the same image, whether it be a headshot, logo, or something similar, across different platforms to make yourself more recognizable.

Ini lebih penting bagi orang-orang seperti saya yang tidak memiliki gelar sarjana, karena ini menunjukkan kepada majikan bahwa Anda bersemangat tentang apa yang Anda lakukan, Anda didorong, dan Anda berpengetahuan luas. Mulailah dengan beberapa branding dasar. Pertahankan warna yang sama dan coba gunakan gambar yang sama, apakah itu headshot, logo, atau yang serupa, di berbagai platform untuk membuat diri Anda lebih mudah dikenali.

The next step is unique content. If you can create interesting pieces like helpful Medium articles on development topics, or a Youtube channel with tutorials, you’ll appear more confident in your work and accessible. Another good option is a professional Twitter account, where you can tweet stuff about development and the latest standards in the industry. Your Github repository is also very important, of course. These platforms can all help you build a strong personal brand across the internet. Not every employer is going to look that deep into your online history, but they might — and if they do, you’re going to stand out above the rest.

Langkah selanjutnya adalah konten unik. Jika Anda dapat membuat karya menarik seperti artikel Sedang yang bermanfaat tentang topik pengembangan, atau saluran Youtube dengan tutorial, Anda akan tampak lebih percaya diri dalam pekerjaan Anda dan dapat diakses. Opsi bagus lainnya adalah akun Twitter profesional, tempat Anda dapat men-tweet tentang perkembangan dan standar terbaru dalam industri ini. Repositori Github Anda juga sangat penting. Semua platform ini dapat membantu Anda membangun merek pribadi yang kuat di internet. Tidak setiap perusahaan akan melihat sedalam itu ke dalam sejarah online Anda, tetapi mereka mungkin - dan jika mereka melakukannya, Anda akan menonjol di atas yang lain.

10. Be Yourself / Jadilah dirimu sendiri

Don’t try to be someone you’re not. Don’t try to be the smartest person in the room. Just be honest (going back to point 4). Show potential employers that you’re passionate, you’re driven, you want to work hard, and you want to better their company. Feel free to include a few of your hobbies or a blurb about your family life; these additions can help to make you more personable. However, remember to keep it simple and not let your personal info take away from the presentation of your key projects and skills.

Jangan mencoba menjadi seseorang yang bukan Anda. Jangan mencoba menjadi orang terpintar di ruangan itu. Jujur saja (kembali ke poin 4). Tunjukkan pada pemberi kerja potensial bahwa Anda bersemangat, Anda tergerak, Anda ingin bekerja keras, dan Anda ingin memperbaiki perusahaan mereka. Jangan ragu untuk memasukkan beberapa hobi Anda atau uraian tentang kehidupan keluarga Anda; penambahan ini dapat membantu membuat Anda lebih menarik. Namun, ingatlah untuk tetap sederhana dan jangan biarkan info pribadi Anda mengambil dari presentasi proyek dan keterampilan utama Anda.

As a recap, the biggest things to keep in mind are: Keep it simple, keep everything direct, and don’t include content that doesn’t really matter. Remember: people are really impatient these days.

Sebagai rekapitulasi, hal terbesar yang perlu diingat adalah: Tetap sederhana, jaga semuanya tetap, dan jangan sertakan konten yang tidak terlalu penting. Ingat: orang benar-benar tidak sabar akhir-akhir ini.

Check out this article for some examples of great portfolios

Lihatlah artikel ini untuk beberapa contoh portofolio hebat

By keeping these tips in mind, you can craft a stronger portfolio that excites employers and lands you that next big job. Happy coding!

Dengan mengingat tips-tips ini, Anda dapat membuat portofolio yang kuat yang menggairahkan para pemberi kerja dan membuat Anda mendapatkan pekerjaan besar berikutnya. Selamat coding!