Dalam artikel ini, saya ingin berbagi pengalaman saya membangun sebuah portofolio pribadi sederhana menggunakan React.js dan TypeScript. Portofolio ini memiliki tiga halaman utama, yaitu Home Page, Tech Used, dan Contact Us. Saya akan menjelaskan secara rinci bagaimana proses pengembangan berlangsung, teknologi yang digunakan, serta beberapa tantangan yang dihadapi.

1. Halaman Utama (Home Page)

Halaman pertama yang saya buat adalah Home Page. Halaman ini adalah tempat pertama yang dilihat oleh pengunjung, jadi penting untuk menampilkannya dengan desain yang sederhana namun menarik. Pada halaman ini, saya menampilkan nama saya, deskripsi singkat tentang diri saya, serta tombol navigasi untuk menuju ke halaman Tech Used dan Contact Us.

Saya menggunakan Tailwind CSS untuk styling agar tampilan halaman tetap responsif dan modern. Dengan Tailwind, saya bisa menyesuaikan desain dengan mudah tanpa memerlukan banyak aturan CSS tambahan.

Screenshot Home Page

2. Halaman Teknologi yang Digunakan (Tech Used)

Halaman kedua adalah Tech Used, yang bertujuan untuk memberikan informasi tentang teknologi yang pernah saya gunakan dalam berbagai proyek. Di sini, saya mencantumkan beberapa teknologi utama seperti:

  • React.js
  • TypeScript
  • Tailwind CSS
  • DaisyUI

Saya menjelaskan masing-masing teknologi, alasan mengapa saya memilihnya, dan bagaimana mereka membantu saya dalam membangun aplikasi web dengan lebih efisien dan lebih terstruktur. Halaman ini juga membantu pengunjung untuk melihat keahlian saya dalam berbagai tools dan framework modern.

Teknologi yang Digunakan

3. Halaman Kontak (Contact Us)

Halaman terakhir adalah Contact Us, yang memungkinkan pengunjung untuk menghubungi saya. Di halaman ini, saya membuat form sederhana dengan kolom untuk nama, email, subjek, dan pesan. Formulir ini menggunakan React state management untuk menangani input dan validasi.

Saya juga menambahkan notifikasi konfirmasi yang akan muncul setelah pesan berhasil dikirim. Hal ini memberikan umpan balik yang jelas kepada pengunjung bahwa pesan mereka telah terkirim dengan sukses. Saya menggunakan React Hooks untuk menangani form submission dan status pengiriman pesan.

Halaman Contact Us

Penggunaan TypeScript dalam Proyek Ini

Salah satu fitur terbaik dari proyek ini adalah penggunaan TypeScript. TypeScript memberikan banyak manfaat, terutama dalam meningkatkan keandalan dan pengelolaan kode. Dengan sistem tipe statis yang kuat, TypeScript membantu saya menangkap kesalahan lebih awal selama pengembangan, yang sangat mengurangi bug di saat runtime.

TypeScript juga memungkinkan penggunaan fitur-fitur canggih seperti antarmuka (interface) dan tipe (types) yang memungkinkan saya untuk menulis kode yang lebih terstruktur dan mudah dipelihara, terutama dalam proyek yang berkembang dengan cepat.

Kesimpulan

Secara keseluruhan, membangun portofolio ini memberi saya kesempatan untuk menerapkan dan mengasah keterampilan pengembangan web saya. Dengan menggunakan React.js dan TypeScript, saya belajar banyak tentang pembuatan aplikasi web yang efisien dan mudah dipelihara. Saya juga belajar banyak tentang penggunaan berbagai pustaka dan alat seperti Tailwind CSS, DaisyUI, dan React Hooks.

Melalui portofolio ini, saya dapat lebih percaya diri dalam menunjukkan kemampuan saya kepada calon klien atau perusahaan yang tertarik untuk bekerja sama dengan saya. Saya berharap pengalaman ini bisa menginspirasi Anda untuk membangun portofolio web Anda sendiri dan terus berkembang di dunia pengembangan web.

Terima kasih telah membaca! Jika Anda ingin melihat demo portofolio saya, Anda bisa mengunjungi https://irezabd.vercel.app/