Projects

Creative Photo Studio

Creative Photo Studio adalah website portofolio fotografi yang saya buat dengan desain modern dan responsif. Situs ini hanyalah gambaran halaman landing page website fotografi yang berkualitas tinggi. Berisikan informasi layanan dan mengapa memilih kami serta tombol hubungi kami. Situs ini dibuat dengan menggunakan framework bootsrap dan tambahan style css. Semua foto didapat di unsplash.com dan ikonnya menggunakan fontawesome.

Chelsea FC: Club Profile

Proyek ini memberikan gambaran mendalam tentang Chelsea FC, mengupas sejarah klub, perjalanan mereka di berbagai kompetisi, dan pencapaian-pencapaian besar yang membentuk identitas Chelsea. Saya juga menyoroti peran pemain-pemain ikonik. Dibuat hanya dengan html dasar dan css tanpa menggunakan framework. Kemudian untuk ikonnya menggunakan fontawesome.

Medium KW

Small Medium – Simulasi Landing Page ala Medium. Proyek ini adalah landing page yang saya buat dengan mengadaptasi konsep desain dari platform Medium. Fokus utama ada pada tampilan yang bersih dan struktur layout yang rapi. Meskipun hanya sebuah landing page, proyek ini mencerminkan pendekatan desain dan perhatian terhadap detail yang saya terapkan dalam pengembangan web. Proyek ini menggunakan Framework Bootstrap dalam pembuatannya.

Mealio – Landing Page Brand Meal Prep Sehat

Mealio adalah landing page untuk brand fiktif yang menyediakan layanan makanan sehat siap saji (meal prep). Halaman ini menampilkan berbagai informasi seperti produk unggulan, tentang brand, dan formulir kontak, dengan desain yang bersih dan terstruktur. Proyek ini dibangun menggunakan HTML dan SASS (SCSS), dengan pendekatan mobile-first agar tampil optimal di berbagai perangkat. Melalui proyek ini, saya menampilkan kemampuan dalam membangun tampilan web yang responsif, estetis, dan mudah digunakan.

KitaBantu – Proyek Slicing UI dengan Tailwind CSS

KitaBantu adalah antarmuka aplikasi mobile untuk platform donasi online yang saya kembangkan dengan pendekatan mobile-first. Proyek ini masih berada pada tahap slicing UI, di mana desain visual diubah menjadi tampilan statis menggunakan Tailwind CSS. Fokus utamanya adalah membangun tampilan yang responsif dan ringan untuk layar ponsel. Saat ini, aplikasi belum memiliki backend, sehingga belum dapat menyimpan data atau menjalankan fungsi donasi secara langsung.

Color Generator dengan React.js: Dinamisasi Warna dan Opacity

Color Generator ini merupakan bagian dari latihan kelas “React.js State – Mengelola Perubahan Tampilan dengan Data bersama Event Handler”. Dalam proyek ini, saya mempraktikkan penggunaan useState untuk menghasilkan warna secara dinamis dalam format Hex dan RGB, serta menyesuaikan tingkat opacity. Aplikasi ini memungkinkan pengguna menghasilkan warna baru melalui tombol, menyalin kode warna yang dihasilkan, dan mengatur nilai opacity secara real-time menggunakan slider. Dengan antarmuka yang sederhana, fokus utama aplikasi ini adalah pada logika pengelolaan state dan pemicuan perubahan tampilan melalui event handler. Proyek ini membantu saya memahami keterkaitan antara data dan tampilan dalam React, serta bagaimana interaksi pengguna dapat langsung memengaruhi state secara efisien.

Web Kuizia dengan Vue 3

Kuizia adalah aplikasi kuis interaktif yang dibuat menggunakan Vue 3, dirancang untuk menguji dan meningkatkan pengetahuan pengguna dalam berbagai topik umum yang relevan sepanjang zaman. Setiap kuis terdiri dari 10 pertanyaan pilihan ganda yang disusun secara acak. Setelah menyelesaikan kuis, pengguna akan langsung mendapatkan skor akhir sebagai hasil evaluasi. Dengan tampilan sederhana dan responsif, Kuizia cocok digunakan oleh siapa saja yang ingin belajar sambil bermain.

Live Score Counter

Web ini dibuat menggunakan HTML, CSS, dan JavaScript dengan tujuan untuk memperdalam pemahaman tentang manipulasi DOM (Document Object Model) di JavaScript. Aplikasi ini memungkinkan pengguna untuk menghitung skor secara online dan dinamis. Pengguna dapat memilih jumlah skor yang dibutuhkan untuk memenangkan pertandingan, memasukkan nama masing-masing tim sebelum pertandingan dimulai, serta melakukan reset untuk mengembalikan semua perhitungan ke awal (0).

Memo App dengan Vue 3

Aplikasi ini adalah proyek memo sederhana berbasis Vue 3 dan Vite. Pengguna bisa menambahkan, menyimpan, dan menghapus memo, yang ditampilkan dalam bentuk kartu berwarna acak. Data disimpan di localStorage agar tetap tersimpan meski halaman dimuat ulang. Proyek ini saya buat untuk melatih dasar-dasar Vue dan penerapan gaya responsif dengan CSS.

GoCheck

Proyek GoCheck ini saya buat sebagai bagian dari latihan di kelas "React.js State Management - Panduan Menggunakan State yang Baik" di CodePolitan. Seluruh konsep dan ide fitur aplikasi ini berasal dari materi pembelajaran yang diberikan, khususnya terkait penggunaan state di React untuk mengelola daftar tugas (to-do list). Dari materi tersebut, saya mempraktikkan teknik seperti lifting state up, pengelolaan data antar komponen, dan child-to-parent data flow untuk menambahkan serta menghapus item. Meskipun struktur dan fungsionalitas utama mengikuti panduan dari kelas, saya melakukan sedikit sentuhan pribadi, seperti menambahkan footer identitas pembuat dan mengganti skema warna pada header, footer, serta tombol agar sesuai selera.

Interactive FAQ Accordion

Proyek ini adalah implementasi Accordion FAQ interaktif menggunakan React.js yang memanfaatkan konsep state management untuk mengelola logika buka-tutup setiap item. Fitur ini memanfaatkan useState untuk menangani perubahan tampilan berdasarkan interaksi pengguna, serta prinsip lifting state up agar status antar komponen tetap sinkron. Selain itu, proyek ini dilengkapi dengan animasi smooth transition menggunakan Framer Motion, memberikan pengalaman pengguna yang lebih halus dan elegan. Dengan struktur komponen yang modular, Accordion ini mudah diintegrasikan ke berbagai aplikasi web dan mendemonstrasikan penerapan praktik terbaik dalam pengelolaan state di React.js.

Simulasi Katalog Belanja dengan Vue.js 2

Proyek ini adalah aplikasi katalog produk yang saya bangun menggunakan Vue.js 2. Pengguna dapat menelusuri daftar produk, menambahkan produk ke keranjang dan menghapus produk dari keranjang serta terdapat fitur filter harga. Perlu dicatat, situs ini hanya menampilkan simulasi katalog dan keranjang belanja. Pengguna tidak dapat melakukan transaksi atau proses pembelian secara nyata. Proyek ini menjadi tantangan yang memperkuat pemahaman saya dalam membangun antarmuka interaktif serta mengelola data secara dinamis menggunakan Vue.js.

Todo App Interaktif dengan React.js State dan Event

Todo App ini dikembangkan sebagai bagian dari pembelajaran React.js dengan fokus pada penggunaan state, event handler, dan penyimpanan data lokal. Dalam proyek ini, saya mempraktikkan penggunaan useState untuk mengelola data secara dinamis, serta useEffect untuk menyimpan dan memuat data dari Local Storage agar tetap tersimpan meski halaman direfresh. Aplikasi ini mendukung berbagai fitur seperti menambahkan, mengedit, menghapus, dan menandai tugas sebagai selesai. Selain itu, terdapat fitur pencarian catatan secara real-time, konfirmasi sebelum penghapusan, serta pengaturan tema gelap dan terang (dark mode switch). Dengan memanfaatkan React Developer Tools, saya juga belajar memantau perubahan state dan memahami alur data dalam komponen. Proyek ini membantu saya memperdalam pemahaman tentang pengembangan aplikasi interaktif dan user-friendly menggunakan React.js.

Proyek API JavaScript — Dari Belajar ke Praktik

Web yang saya buat setelah mempelajari AJAX dan Web API JavaScript. Saya telah mempelajari bagaimana pengertian API, apa itu library Axios dan bagaimana penggunaannya, kemudian bagaimana meminta request ke API dengan postman, hingga akhirnya terbuatlah proyek web API yang dapat di lihat dengan klik tombol di bawah ini.

Custom Virtual Card React.js — Kartu Nama Digital Versi Unik

Proyek ini adalah pengembangan dari latihan Virtual Card di kelas React.js 101. Untuk menghindari meniru mentah contoh gambar kucing, saya memodifikasi konten, gambar, dan elemen lainnya agar tampil berbeda. Dalam proyek ini, saya mempraktikkan konsep React.js seperti komponen, props, dan JSX untuk membuat kartu nama digital yang menampilkan gambar, teks, dan badge keterampilan secara modular. Struktur component-nya dirancang agar dinamis dan mudah diubah sesuai kebutuhan. Proyek ini menunjukkan pemahaman saya tentang pembuatan Reusable Component dan pengaturan data flow di React.js sambil tetap menjaga orisinalitas dari contoh latihan.

Belajar React.js Fundamental

Saya telah mempelajari dasar-dasar React.js, salah satu library populer JavaScript. Materinya mencakup cara membuat proyek React, memahami konsep component, siklus hidup komponen seperti componentDidMount, componentWillUnmount, dan componentWillMount, serta cara melakukan fetch API menggunakan React. Proses belajarnya dilakukan sambil praktik secara bertahap melalui video, sehingga saya dapat memahami alur kerja React dengan lebih mendalam. Hasilnya adalah sebuah proyek blog sederhana dengan tiga halaman utama (Home, About, Blog) serta fitur search dinamis yang menampilkan hasil pencarian secara real-time.

Sruput Segar – Drink Menu App

Sruput Segar adalah proyek latihan React.js yang saya kembangkan setelah mengikuti kelas React.js 101 – Membuat dan Menggunakan Komponen dalam Aplikasi Berbasis React.js. Melalui proyek ini, saya menerapkan konsep dasar React seperti komponen, JSX, props, dan one-way data flow untuk menampilkan daftar menu minuman secara dinamis. Selain itu, saya juga belajar cara mengatur styling di komponen, menjalankan logika JavaScript di dalam JSX, serta menampilkan komponen dengan conditional rendering. Proyek ini saya buat dengan tema menu minuman untuk mengganti contoh Warung Pad Edi di materi menjadi Sruput Segar, agar lebih segar dan sesuai ide saya sendiri.

All Projects