Tugas 1 PWEB - Membuat Website Portofolio

Dalam postingan kali ini, saya akan menjelaskan proses pembuatan website portofolio yang telah saya buat. 

Berikut adalah link website portofolio milik pribadi saya Link

Website portofolio tersebut saya buat dengan menggunakan framework React dan Tailwind CSS dan dideploy menggunakan Vercel agar selanjutnya juga bisa saya jadikan portofolio dalam mencari proyek karena bersifat gratis. Mengapa bisa gratis? karena dengan cara tersebut, website hanya dibangun dari sisi front-end nya saja, tanpa perlu untuk melakukan hosting di back-end sehingga cenderung lebih ergonomis :)

Kemudian, berikut adalah langkah-langkah yang saya lakukan dalam membuat website tersebut  

1. Membuat React App
   Langkah pertama cukup mudah, yakni membuat kerangka website menggunakan create-react-app. Yang harus diperhatikan adalah framework yang kita perlukan harus sudah terinstall, seperti Node.js, NPM, dan juga React. Untuk menjalankannya tentu saja buat folder baru sebagai folder utama dari website, kemudian ketikkan pada terminal
   npx create-react-app arffzin
cd arffzin
   Kemudian tunggu hingga beberapa saat hingga proses instalasi selesai
   
   
   
   
   
   
   
   
2. Integrasi dengan framework Tailwind
   Kemudian, langkah selanjutnya adalah memasangkan Tailwind CSS sebagai framework styling utama di website ini. kemudian ketikkan pada terminal
   

   npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

   Karena Tailwind CSS membutuhkan PostCSS dalam mendeploy, maka kita harus menginstall Craco juga pada website, ketikkan pada terminal
   

   npm install @craco/craco

   Lalu ubah command start dan build pada package.json menjadi
   

    {
       // ...
       "scripts": {
   

        "start": "craco start",
   

        "build": "craco build",
   

        "test": "craco test",
         "eject": "react-scripts eject"
       },
     }

   Kemudian buat file craco.config.js untuk mengkonfigurasi Craco pada website ini, yang isinya sebagai berikut
   

   module.exports = {
     style: {
       postcss: {
         plugins: [
           require('tailwindcss'),
           require('autoprefixer'),
         ],
       },
     },
   }

   Lalu langkah selanjutnya adalah membuat file tailwind.config.js sebagai konfigurasi dari Tailwind agar memudahkan di proses development selanjutnya, caranya ketikkan pada terminal
   

   npx tailwindcss-cli@latest init

   Lalu ubah isinya menjadi seperti ini
   

   module.exports = {
   

      purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
       darkMode: false, // or 'media' or 'class'
       theme: {
         extend: {},
       },
       variants: {
         extend: {},
       },
       plugins: [],
     }

   Selanjutnya, tambahkan baris berikut pada file src/index.css
   

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   Terakhir, pastikan file index.css terinclude pada file index.js
   

    import React from 'react';
    import ReactDOM from 'react-dom';
   

    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
   
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
   

3. Membuat dan melengkapi fungsi website
   Good job, setelah langkah yang sangat panjang dalam instalasi, langkah selanjutnya adalah membuat isi dari website. Sayangnya langkah tersebut terlalu panjang untuk saya jelaskan disini :)
   Jadi, silahkan berkreasi dan berimajinasi dalam membangun website. Sebagai referensi terdapat situs dokumentasi Tailwind dan juga React yang dapat membantu dalam proses pengerjaan website
   React
   Tailwind CSS
   Dari website saya sendiri, tampilannya kurang lebih seperti ini
   
   
   
   
   
4. Deploy ke Vercel
   Oke, langkah selanjutnya! Langkah ini merupakan langkah penting karena website akan dihosting agar dapat diakses oleh siapapun
   Bedanya, disini saya menggunakan Vercel untuk deployment, sehingga tidak perlu mengeluarkan biaya untuk membeli hosting ya :)
   Caranya adalah sebagai berikut :
   Yang pertama, tentu saja harus mendaftar di Vercel.com
   
   
   
   Kemudian koneksi kan akun git projek Anda ke Vercel, disini saya menggunakan Github sebagai git hosting saya, sehingga harus mengkoneksikan Vercel dengan projek saya
   Setelah terkoneksi, otomatis hasil commit terakhir dari projek akan di deploy sesuai dengan nama git project tersebut
   Dan, jadi deh! website saya sudah bisa diakses di arffzin.vercel.app
   
5. Perbaiki UI dan Tambahkan Fitur
   Yup, langkah terakhir dari pembuatan website saya.
   Namun sayangnya, langkah ini akan menjadi langkah yang tidak akan selesai jika saya jelaskan di sini, jadi silahkan akses langsung saja website portofolio saya di arffzin.vercel.app untuk tahu lebih lanjut tentang perkembangan UI dan fitur nya.
   Silahkan komen di postingan ini jika ada saran, kritik maupun apapun itu!

Sekian, sedikit tutorial dari saya tentang pembuatan website portofolio, terima kasih!