Halo kembali lagi dengan julan Bar tekno jadi pada video kali ini saya mau sharing nih Bagaimana caranya kita membuat suatu website yang tujuan untuk portofolio dan bisa kita buat secara sangat mudah Ya bisa dibilang ini dari pengalaman saya ini kalau di luar persiapannya ya enggak nyampai 15 menit juga sudah bisa beres pertama saya menjelaskan sedikit dulu nih ngapain sih kita bikin website pribadi ya kan udah ada yang namanya misal LinkedIn Instagram kemudian juga ada mungkin e Facebook ya kalau ada yang masih pakai yang jelas-jelas udah ee lebih gampang ya jadi kita tinggal masuk-masukin data aja menurut saya sih ada beberapa keunggulan kita bikin we sendiri ketimbang kita pakai SOS seperti itu yang pertama adalah customisasi jadi kita tuh bikin suatu website itu yang isinya tuh ya gimana kita jadi e layout-nya gimana kita kemudian juga apa yang ditampilkan itu bisa apa saja dan kebebasan itu menurut saya sangat-sangat berguna apalagi kalau anda itu beekerjaannya itu di bidang yang e kuat secara visual ya Kemudian yang kedua ya Menurut saya pribadi kita bisa bikin website pribadi aja Itu sudah merupakan Light Plus ketimbang e orang-orang lain yang mungkin sama-sama lagi nyari kerja juga jadi kalau kita nih misalnya punya kartu nama kemudian ada e website kita pribadi Wah Itu kan menurut saya jauh lebih keren ya ketimbang kita tuh cuma mencatuhkan Instagram Linkin email aja gitu loh Menurut saya itu menjadi Nilai plus yang bisa membedakan teman-teman itu dengan orang-orang lain di sini saya menggunakan framer untuk membuat Website pribadi ya sebenarnya di sini ada banyak tools rupa sih misalnya seperti eh WordPress kemudian ada wix kemudian ada squareespace ya masih banyak lagi dan terlepas dari tool yang kita pakai ujung-ujung kita bisa bikin website yang serupa ya tapi di sini saya pilih framer yang beberapa alasan ya Jadi pertama adalah framer itu menurut saya template-nya bagus-bagus arrangement template-nya menurut saya juga banyak yang rapi dan alasan kedua dengan framer adalah kita bisa secara live preview melihat hasil website kita itu di eh desktop di komputer laptop seperti ini kemudian di tablet dan di e smartphone tuh Seperti apa secara bersamaan untuk service lain Saya kira sih ada setting seperti itu juga ya hanya saja framer itu mungkin salah satu yang tampilannya ituh cukup rapih untuk untuk bagian ini sebenarnya ada banyak banget keunggulan framber lainnya tapi di sini saya enggak bahas secara detail karena di sini tujuannya kita pengin bikin website dengan sesimpel mungkin di sini saya mau pakai data dari teman saya sudah izin lulusan S1 Ya jadi dia memberikan izin datanya saya pakai untuk membuat Website dan dengan gantinya dia punya website pribadi yang bisa di-share ke teman-temannya atau ke para calon penerima kerja oke mari kita mulai persiapan membuat website-nya Jadi pertama kita harus persiapkan dulu apa saja sih yang perlu ditempatkan pada website kita sehingga kita tuh punya portofolio online yang menarik tapi kalau saya saran jangan kita copy paste dari CV kita langsung ke portofolio online karena ada banyak banget hal-hal sensitif pada CV yang sebaiknya menurut saya enggak ditampilkan di website Ya seperti misalnya nomor telepon alamat rumah mungkin tempat tanggal lahir hal-hal tersebut menurut saya lebih cocok kalau kita tampatkan di CV yang memang secara personal diserahkan ke orang yang benar-benar membutuhkan beberapa hal yang menurut saya perlu ditampilkan pada website portofolio adalah pertama nama sendiri kemudian foto kalau memang dirasa perlu deskripsi Anda pribadi secara singkat deskripsi dari portofolio Anda secara singkat portofolio itu sendiri Bisa langsung di website atau bisa di website lainnya kontak kemudian kalau memang diperlukan juga sosial media Anda satu hal soal foto yang menurut saya tuh sering kali menjadi kesalahan pemula Kalau Anda baru memulai bikin website online adalah secara ukuran ya jadi ukuran foto untuk Website itu biasanya sangat-sangat kecil ya mungkin di bawah 200 KB di bawah 300 KB ini untuk memastikan kalau website anda itu gampang untuk di-download dan gampang untuk diilad di HP anda atau di laptop Anda sementara kalau anda tuh pakai foto mentah dari misalnya dari HP atau mungkin dari kamera DSLR itu biasanya terlalu berat karena biasanya ukuran sampai bermega megega biasanya untuk kamera HP aja fotonya ukuran di atas 2 MB jadi pastikan anda untuk kompresi foto-foto Anda tersebut jadi ya bisa pakai toolsools seperti yang ada pada Microsoft ya mof yang aplikasi photos atau mungkin yang paling mudah menurut saya adalah Anda upload aja foto-foto anda itu ke WhatsApp pribadi anda jadi anda m-message anda sendiri kemudian di-download melalui e desktop ya biasanya Dengan cara demikian fotonya itu bisa berukuran 200 300 kban aja atau memang kalau memang diperlukan kompres lagi Anda masih bisa Oke sekarang kita sudah di tampilan framer jadi ini adalah website framer saya sudah login ya dengan akun saya di sini eh dan kita langsung aja masuk ke tampilan e untuk projectnya jadi kita langsung ada tampilan seperti ini klik aja E new Project di ujung kanan atas nah kita akan dihadapkan dengan tampilan eh page seperti ini ya jadi eh ada desktop di sini tampilan desktop kalau kita mau mulai membuat website framer kita kita eh ada banyak caranya tapi pada video kali ini saya akan kasih yang paling simpel Saya di sini enggak bakal ngasih istilah-istilah yang lebih detail jadi ini hanya untuk membuat Website secara cepat aja Nah di sini kita banyak pilihan nih ada eh yang seperti ini Landing page kemudian portofolio teaser blog blog artikel dan sebagainya Nah sekarang saya akan coba untuk bikin E website dengan template yang satu ini ini seperti cocok untuk e sebuah portofolio dan begitu kita Klik langsung nih ada tampilan ee template yang kita sudah pilih tadi jadi di ee sebelah sini ada namanya Lalu ada deskripsi eh singkat soal si pemilik website ini kemudian juga ada ini portofolionya kemudian ini ada kontaknya di bawah sebelah sini dan kita lihat di sini ada tiga ya jadi di sini ada yang paling kiri Ini adalah tampilan desktop kemudian di sini ada tampilan tablet kemudian ada tampilan smartphonephone kita akan mulai dari mengganti eh sisi sebelah sini ee si is yang paling atas ini header ini saya akan ganti ee menjadi eh namanya aja ya saya akan kasih di sini data sesuai data teman saya yang saya pakai yaitu coba Sal e media communication specialist Nah untuk Berikutnya ini juga sudah deskripsi Ya sebentar saya isi sebentar dulu oke Ini sekarang saya sudah selesai mengisi bagian self description-nya jadi di bagian pertamanya ini ee orangnya mencoba untuk menjelaskan kalau dia itu memiliki kemampuan dalam ee komunikasi ya communication jadi ini adalah ee seseorang dengan jurusan komunikasi dan untuk sisi keduanya ini dia lebih menekankan ee keunikan dia tuh apa sih Jadi kalau pertamanya tadi dia adalah orang dari jurusan komunikasi oke itu cukup unik tapi mungkin belum ee terlalu unik ya masih ada banyak orang lulusan komunikasi Oh ternyata dia menempatkan dia itu ternyata lulus dari universitas di Korea Selatan dia punya punya kelebihan dari orang lain adalah dia lulusan luar negeri dengan kemampuan topik 5 jadi topik itu adalah semacam jadi topik itu semacam mungkin bisa dibilang sertifikasi eh kemampuan bahasa lebih khususnya adalah Korea ya di mana Kalau topiknya itu makin tinggi misalnya topik Li itu Setahu saya paling tinggi itu berartinya dia sudah cukup fasih untuk berbahasa Korea terutama untuk keperluan profesional dan dia juga menempatkan kalau dia itu bisa bekerja di environment lingkungan yang multikultural Nah sekarang kan kita LAN lanjut ke bagian bawahnya sini ini ada Instagram Twitter dan Mail eah ini kalau kita mau menempatkan sosial media kita ya atau kontak kita kalau saya mungkin di sini kita ganti aja Twitter mungkin tidak perlu Instagram Mungkin kita bisa ganti dengan yang lain ya Misalnya di sini kita ganti sebagai Linkedin untuk sisi bagian atas ini Tentunya mungkin kita mau menempatkan foto ya di sebelah sini Jadi bagaimana cara kita menempatkan foto kita tinggal klik tombol tambah ini kemudian ke media kemudian ke ke image ya setelah kita klik image ini akan muncul e image di sebelah sini yang masih kosong belum ada gambarnya Nah kita bisa menempatkan ini di mana saja ya Jadi bisa di sebelah sini ni misalnya di sebelah kiri e untuk section yang sebelah sini ada juga bisa juga di sebelah sini di atas bisa juga di bawah sebelah sini atau bisa juga di sisi sebelah kanan karena kalau saya lihat di sini di sisi sebelah kanan masih kosong Mari kita tempatkan di sisi sebelah kanan seperti ini nah ini ini Eh jadi kita sudah menempatkan e ruang untuk fotonya itu di mana Tapi masalah yang sekarang ini agak jadi agak kegeser-geser nih Nah untuk merapikan e supaya tampilan itu bisa terlihat e rapi ya di website versi desktop kita geser eh klik box yang sebelah sini kita geser seperti ini Nah kan kalau begini jadinya teksnya tidak ada yang hilang jadi masih lengkap kemudian kita juga bisa menempatkan di sini kemudian kita bis kemudian kita bisa mulai memberikan foto yang sesuai kita choose image di sini kita pilih fotonya yang ini tunggu sebentar diupload oke sekarang sudah terupload kita juga bisa resize foto ini Misalnya ini karena harusnya kotak jadi kita bikin horiz vertikalnya itu lebih tinggi seperti ini Kita bikin vertikalnya lebih tinggi seperti ini Oke mungkin kurang lebih seperti ini00 100 * 400 susah sekali ya Ya 401 ya ini kita juga bisa bikin ujungnya agak melengkung seperti ini kalau mau nah sehingga bisa rapi seperti ini tapi inilah kegunaan dari e multiview ya kita bisa preview website kita untuk berbagai macam gadget Nah kalau di desktop mungkin kayaknya Oke tapi kalau di tablet ternyata agak berantakan dan di phone juga sama aja agak berantakan Jadi sebelum kita lanjut kita harus rapikan dulu nih jadi kita klik ini kemudian kita resize Ya seperti ini Ah bisa seperti ini mungkin juga kalau perlu fotonya dikecilkan juga enggak apa-apa ya seperti ini kemudian yang ini jadi bisa lebih diperbesar Oke mungkin seperti ini bisa dan kalau untuk phone ya kalau untuk telepon sepertinya mau kita kecilkan seperti ini malah jadi tidak ideal sama sekali ya Nah tapi masalahnya kalau kita sudah tempatkan fotonya itu di antara kiri atau kanaran kita enggak bisa pindahkan ke atas Jadi apa yang bisa kita lakukan kita ya harus Hapus yang foto yang satu ini kemudian kita Tambahkan lagi nih media image kemudian kita tempatkan frame image tersebut jangan di sebelah kanan atau kiri Tapi kali ini kita tempatkan di sisi atas sebelah sini Iya Nah kita kecilkan seperti ini kemudian masukkan lagi fotonya Oke sekarang kita sudah punya foto di atas supaya matching kita lengkungkan sedikit juga sebelum kita lanjut Saya mau ngasih tahu dulu kalau yang tadi bagian Eh kontak tadi Linkin atau mail ini kita juga bisa e kasih link ya di sini kita ada eh e menu untuk menampilkan link jadi kita bisa masukkan email kita di bagian link seperti ini begitu juga untuk yang e Link in ini dia belum punya apa E link sama sekali jadi kita bisa tambahkan sendiri di sini eh link ke misalnya ke Linkin Kita sekarang kita akan masuk ke section berikutnya jadi kita akan memberikan eh section untuk eh seperti preview untuk eh semacam CV kita ya atau biodata kita yang lebih lengkap mungkin bisa ke website e lain atau ke halaman lain di website yang sama Untuk itu saya akan pilih section yang tipe seperti ini Jadi ini adalah header with background saya Tampilkan di sebelah sini di bawah yang header ini dan sekarang saya masukkan dulu deskripsinya di sini oke sekarang saya sudah masukkan deskripsinya jadi ini menjelaskan e orangnya ini dari universitas mana Eh kemudian dia juga majornya apa sebenarnya ini bisa dibilang agak redundan sih bisa aja ini bisa diisi dengan sesuatu yang lebih baru ya karena kalau kita lihat di sini kan kita sudah menyebutkan ee kelulusan Korea kemudian sudah menyebutkan multiultural environment ini kita bisa ganti dengan yang lainnya tapi kalau untuk sekarang ya sementara seperti ini dulu atau mungkin ini juga bisa disengaja supaya kita bisa memberikan Efek eh emfasis ya jadi apa penekanan nah tapi e kita enggak akan banyak membahas konten untuk Sekarang kita akan bahas soal Bagaimana caranya kita e mengimprove bagian ini jadi Mungkin kita bisa tambahkan link e kalau kita klik get started atau learn more ke website lain atau ke halaman lain di website Ini sementara saya e hapus salah satunya dulu aja jadi kita mungkin ini saya ganti jadi learn more learn more seperti ini dan saya mau memberikan sebuah background di sini ya Jadi kita sama klik double klik di sini kemudian choose image nah choose image saya akan pilih gambar eh yang ini untuk bagian header yang about me Nah kita bisa resize Sedikit nih dari atas ke bawah seperti ini jadi ggak terlalu banyak makan tempat UN scrolling e sepertinya Oke dan Kalau mau kita tambah hyperlink di sini bisa ya tinggal klik hyperlink link sebelah sini kita tambahkan sendiri mau ke mana Nah sebelum kita eh geser kita cek dulu untuk di ee gadget lain bakal Seperti apa sepertinya Oke sih mungkin ini bisa lebih kecil sedikit kita kecilkan Ya kurang lebih seperti ini nih masih sepertinya masih readable lah untuk e HP dengan font seperti ini sekarang kita akan lanjut bikin section Berikutnya ini kita akan eh menampilkan section yang membahas soal Ee Kita tuh sudah mengerjakan apa saja untuk ee korporasi atau atau orang lain ya Nah kita bisa Tampilkan yang sebelah sini ini tadi menu yang add section or complete pages jadi ini e bagian text and image jadi yang sebelah kirinya teks yang sebelah kanan adalah image tempatkan di sebelah sini kemudian eh saya di sini bisa ee kasih deskripsi lagi sebentar sekarang saya sudah isi inih bagian deskripsinya eh jadi ini saya Intinya adalah ini ee memberikan eh link memberikan preview di sebelah kanan kemudian link di sebelah kiri nya ini di bagian learn more saya akan Hapus yang get started eh apa saja yang sudah dikerjakan oleh e teman saya yang satu ini untuk perusahaan-perusahaan secara profesional kita akan masukkan lagi imagenya di sebelah sini e kita pilih yang ini Oke jadi e hasil adalah seperti ini untuk tablet Kita lihat di sini ya masih oke untuk e mobile ternyata e otomatis framer itu bisa menggeser ke sebelah atas jadi karena memang agak sulit kita menggunakan eh eh apa namanya lebar HP yang terbatas itu untuk section kiri kanan ya akan kecil sekali Inter fontnya kembali ini kalau memasukkan eh link di sebelah sini bisa di bagian learn more sekarang saya akan membuat satu kemudian saya akan membuat sebuah e section lainnya sama seperti tadi tapi saya mau e image and Text jadi image-nya sebelah e kiri lah untuk memberikan ya variasiah begitu kita scrolling-srolling sekarang saya isi dulu oke Ini saya sudah isi kontennya jadi kembali saya hapus jadi tombolnya satu aja learn more-nya kembali ini bisa diisi dengan link kalau memang mau ya jadi tinggal klik sini ada link sebelah sini dan untuk ee gambarnya kita pakai yang satu lagi yang sudah disiapkan Oke jadi ini menurut saya sudah cukup menggambarkan kira-kira e orangnya ini ee memberikan jasa apa saja saya di sini menunjukkan beberapa komik ya komik bahasa Korea yang dia bisa Translate ke bahasa Inggris atau bahasa Indonesia kemudian juga pernah mengerjakan UX UI design ya ini memang karena fresh grade jadi ya kita tidak bisa mengekpect eh portofolio itu seperti Eh misalnya eh orang yang sudah bekerja 10 tahun lebih untuk bidang uxui yang pasti Sudah banyak contohnya Tapi menurut saya ini untuk fres grad pun sebenarnya sudah cukup oke apalagi untuk corporation projectnya juga sudah banyak desain-desain yang bisa dibilang ya cukup menariklah untuk brand-brand Kemudian untuk section Berikutnya saya akan tambahkan di sini eh testimoni ya semacam eh apa kalau orang itu sudah bekerja eh untuk orang lain kita bisa menampilkan apa saja sih komentar orang yang klien kita tadi itu tentang kita bisa di sini jadi kita bisa di sini tambah me misalnya nah ini kita bisa isi aja dengan testimoni sekarang masih belum ada jadi jadi ini masih harus kosong dulu ya untuk sekarang ini bisa nih kita testimoninya itu Ini ada testimoninya kemudian ada nama yang ngasih testimoni serta handle sosial medianya dan terakhir saya akan menahkan bagian contact ya di sini kita bisa tambahkan section contact tadi memang di sini sudah ada ya email Linkin tapi kalau kita mau tambahkan satu lagi juga bisa ini bagian Contact contact name email message submit untuk video kali ini saya akan menampilkan di sini contact name email dan message-nya seperti ini saja cuma saya enggak akan bahas soal Bagaimana cara menghubungkan e bagian ini ke orang lain tapi saya mau ngasih tahu aja di sini kalau kita bisa menampilkan bagian konak dari ee di website kita untuk bisa mengirim email secara langsung ya tapi untuk sekarang Saran saya sih ee kalau emang Anda mau bikin website pakai ini saja ya Jadi pakai bagian mail saya jadi entar akan mengantarkan e si yang lagi nge-browsing ini untuk ke aplikasi email dan langsung bisa kirim email Oke untuk sisanya Saya mungkin hapus saja saya enggak e butuh yang ini Ini juga tidak saya butuhkan dan terakhir saya tidak eh perlu bagian header yang ini framer ini nah jadinya website-nya seperti ini ini juga saya enggak bisa ini juga bisa saya hapus Oke jadi bisa dibilang ini sudah selesai J sekarang kita tinggal e klik publish Tapi sebelumnya Kalau emang Anda mau ngasih domain sendiri ya untuk Website Anda Anda bisa klik settings nih kita bisa kasih nama dulu nih kalau misalnya kita buka website itu di Apa bagian tab-nya itu mau eh dikasih tulisan apa misalnya di sini test website Nah jadi seperti ini nanti kita bisa ganti domainnya tapi untuk Sekarang kita akan publish terlebih dahulu ya publish nah oke kita sudah publish sekarang dan kita mau kalau kita mau ganti e domain kita nih kita bisa kasih di sini misalnya test website tapi ada kemungkinan ini enggak bakal bisa jalan karena mungkin udah ada website yang domainnya sama namanya jadi kita harus bisa unik ya nah misalnya di sini ini sudah ada e orang yang pakai domain yang sama jadi Mungkin kita bisa kasih nama orangnya aja nah Oke jadi ini sudah selesai mari kita coba e buka website-nya ya E ini langsung aja klik sini nah ini bisa kelihatan tampil seperti ini ya Jadi ini e descriptionnya di sebelah sini kemudian udah ada about me freelance object freelance Project ada testimony ada kctnya ya sebenarnya ini sudah selesai seperti ini kita mau ngcek juga nih Bagaimana tampilannya di e mobile phone ya seperti ini Jadi ini bisa kelihatan di sini ada website-nya ada fotonya mungkin ini bisa dioptimalkan lagi jadi ini fotonya dia agak terlalu di sebelah kanan Harusnya bisa dikirian dikit kemudian di sini bisa kelihatan about me-nya kemudian Oh lihat di sini nih dia ada yang Blank seperti ini nih jadi masalahnya apa Nah itu kita akan troubleshooot sebentar lagi Kemudian ada freelance Project nah kemudian di sini juga ada nih What they say about you-nya ternyata kepotong seperti ini berarti ada yang perlu kita optimasi lebih lanjut di sini ada bagian contact ya oke itu satu bagian yang perlu diperbaiki kita akan perbaiki sebentar lagi Nah sekarang bagaimana dengan tampilan tablet Kita akan lihat di sini ini adalah bagian tablet eh ee oh ternyata di sini masih rapi dan kelihatan di sini karena mungkin gak muat di sisi horizontalnya ya jadi dia akhirnya fotonya ke atas juga ini b bukan tablet beneran ini cuma Galaxy fold saya yang dibuka Jadi sebenarnya bukan 100% tablet kemudian di sini juga masih Kelihatan nih Corp projectnya nnyata gak ada gambarnya nih freelance projectnya engak ada tapi What about Menya enggak kenapa-kenapa kemudian juga bagian kotknya enggak kenapa-kenapa pertama kita akan lihat dulu e yang paling gampang ya what they say about me oh ini mah gampang karena saya tadi ngskip untuk eh memastikan kalau teksnya Itu kelihatan di e mobile jadi ini e solusinya Mudah Saja tinggal diperkecil seperti ini Oke ini juga mungkin dia agak bisa diperkecil lagi nah kemudian kenapa nih kok di sini muncul nih tadi tapi begitu saya buka enggak ada saya coba kompresi lebih jauh lagi misalnya yang satu ini dia oke sekarang seperti ini kemudian choose image yang bagian ini saya pilih yang misalnya yang dari WhatsApp yang tadi saya optimalkan e di sesi awal videonya oke Sekarang mari kita publish lagi update Nah updated sekarang bagaimana hasilnya Nah setelah saya update ternyata oh muncul semua sekarang lihat tuh sudah muncul semua ya jadinya Sudah aman nih website-nya tapi e salah satu fakta yang mau saya kasih tahu di sini adalah kita ini pakai framer-nya versi gratis ya Jadi ada kemungkinan juga meskipun kita gambar itu sudah kecil tapi kita menggunakan yang gratis dan mungkin bandwid website kita itu jadi terbatas sehingga ya memang kalau kita mau bikin website secara profesional dan sudah pasti dia lancar ya kita cari website yang pertama mungkin eh storage-nya itu besar ya jadi kapasitas eh storage-nya itu untuk menyimpan file-file itu besar kemudian juga yang bandwid-nya kencang ya bnya itu tidak e pakai yang free tapi itu adalah bagian Advance tapi kalau untuk eh sekarang untuk keperluan eh website portofolio menurut saya ini sudah eh cukuplah jadi mudah-mudahan bisa membantu teman-teman semua dalam membuat website pertama teman-teman Oke demikian aja video singkat dari saya mudah-mudahan bermanfaat Saya ingin tahu juga nih Apakah Anda berminat untuk menonton video-video seperti ini lagi jadi yang lebih kepada teknologi tapi untuk self development ya Nah silakan tinggalkan di kolom komentar silakan live video ini jika rasa bermanfaat subscribe jika tidakin ketinggalan konten dan lainnya saya Jul Terima kasih telah menonton