Loading portfolio…
Available for work

Rafi Sirojudin

I build

Web developer yang fokus pada tampilan bersih, performa tinggi, dan pengalaman pengguna yang menyenangkan.

Lihat Proyek Hubungi Saya
Foto profil Rafi Sirojudin
Open to work Frontend Indonesia

Tentang Saya

Saya adalah seorang web developer yang sedang berkembang, dengan fokus pada pembuatan tampilan web yang bersih dan responsif. Saya percaya kode yang baik adalah kode yang mudah dibaca dan dipelihara.

Saat ini saya aktif belajar dan terus mengasah kemampuan di bidang front-end development — dari desain sistem hingga optimasi performa.

10+Proyek
3+Teknologi
1+Tahun

Keahlian Saya

Klik kartu untuk melihat detail

HTML
Mahir
CSS
Mahir
JavaScript
Menengah
React
Menengah
Git
Mahir
Figma
Menengah

Perjalanan Saya

2024 — SekarangFreelance

Frontend Developer

Independen

Membangun website untuk klien dan proyek pribadi. Fokus pada performa, aksesibilitas, dan pengalaman pengguna yang baik.

HTMLCSSJavaScript
2023 — 2024Belajar

Mulai Belajar Web Development

Self-taught

Memulai perjalanan belajar web development dari nol. Mempelajari HTML, CSS, dan JavaScript secara mandiri melalui berbagai sumber online.

HTMLCSSJavaScript Dasar
2023Milestone

Proyek Pertama

Personal Project

Menyelesaikan proyek web pertama secara mandiri dan mulai membangun portofolio.

HTMLCSS

Proyek Saya

Game-Based Learning

PyQuest

Platform belajar Python interaktif bergaya game RPG — 25 quest terstruktur dengan narasi cerita, sistem nyawa & XP, mini Python interpreter yang berjalan langsung di browser, dan desain Minecraft pixel-art murni CSS tanpa library.

⚔ 25 Quest Level
🐍 Python Interpreter
❤️ Lives & XP System
🏆 Boss Battles
HTMLCSSJavaScriptCanvas APIWeb Audio APILocalStorage
🚀 Demo GitHub ↗
Featured Project

CurtainBiz Manager

Sistem manajemen bisnis curtain berbasis web — mencakup dasbor kinerja real-time, manajemen pesanan multi-channel, inventori stok dengan alert otomatis, laporan keuangan & kalkulator HPP, serta statistik penjualan lengkap.

📊 Dashboard KPI
🛒 Order Management
💰 HPP Calculator
📦 Stok Alert
HTMLCSSJavaScriptChart.jsSupabase
🚀 DemoGitHub ↗
Gen-Art Engine🖥 Best on Desktop

Kinetic·Soul

Mesin generative art interaktif berbasis canvas — sistem partikel real-time dengan fisika inverse square law, Perlin noise flow field, tiga visual mode (Galaxy, Web, Explosion), efek bloom, dan enam palette warna. Fully adaptive FPS.

🖥 Gunakan Mode Situs Desktop di browser HP untuk pengalaman terbaik.

✦ 3 Visual Modes
🎨 6 Color Palettes
⚡ Perlin Noise Physics
🔊 Procedural Audio
HTMLCSSJavaScriptCanvas APIWeb Audio API
🚀 DemoGitHub ↗
Interactive Storytelling

Lentera Kecil

Mesin dongeng interaktif untuk anak usia 4–10 tahun — 38 cerita rakyat Nusantara dengan karakter SVG animasi, background dinamis berlayer, ambient sound procedural, sistem bintang & progress, filter & pencarian cerita, serta end-card berisi pesan moral.

📚 38 Dongeng Nusantara
🎭 Karakter SVG Animasi
🔊 Ambient Sound Engine
⭐ Progress & Reward
HTMLCSSJavaScriptWeb Audio APISVG
🚀 Demo GitHub ↗
Science Calculator

EasySolve

Platform kalkulator sains komprehensif dengan 100+ rumus dari 7 mata pelajaran — Matematika, Fisika, Kimia, Biologi, Konversi, Keuangan & Geografi. Setiap perhitungan dilengkapi langkah pengerjaan step-by-step yang jelas menggunakan render KaTeX.

🔢 100+ Rumus
📚 7 Mata Pelajaran
📝 Step-by-step
⚡ Render KaTeX
HTMLCSSJavaScriptKaTeX
🚀 DemoGitHub ↗
Number Base Converter

BaseCalc·Insight

Konverter sistem bilangan 4-basis (Biner, Oktal, Desimal, Heksadesimal) dengan transparansi langkah penuh — menggunakan BigInt JavaScript agar presisi terjaga untuk angka berapapun, dilengkapi visualisasi pengelompokan bit 3-bit dan 4-bit secara otomatis.

🔢 4 Sistem Bilangan
🔍 Step-by-step Breakdown
⚡ BigInt Presisi Penuh
🟦 Bit Grouping Visual
HTMLCSSJavaScriptBigInt API
🚀 DemoGitHub ↗
Knowledge Graph🖥 Best on Desktop

Neuro·Shelf

Sistem visualisasi pengetahuan berbasis Force-Directed Graph — mengubah catatan dan topik menjadi jaringan node interaktif yang terhubung otomatis lewat keyword matching. Eksplorasi koneksi antar ilmu secara visual dengan BFS path finder, undo/redo, minimap, dan export PNG.

🖥 Gunakan Mode Situs Desktop di browser HP untuk pengalaman terbaik.

🕸 Force-Directed Graph
🔗 BFS Path Finder
✦ Auto-Link by Tags
🗺 Minimap + Convex Hull
↩ Undo / Redo History
🖼 Export PNG & JSON
HTMLCSSJavaScriptD3.js v7localStorage
🚀 DemoGitHub ↗
Habit-Building Engine

Strive·Pro

Engine perubahan perilaku berbasis Predictive Analytics & Gamifikasi — Adaptive Momentum Engine (bukan logika biner), Cognitive Load Guard untuk mencegah overload mental, visualisasi Arboretum SVG dinamis yang tumbuh sesuai konsistensi, dan Ghost Streak Visualizer untuk kompetisi internal melawan diri sendiri.

⚡ Adaptive Momentum Engine
🧠 Cognitive Load Guard
🌳 Dynamic SVG Arboretum
👻 Ghost Streak Visualizer
🔗 Habit Stacking System
⏱ Focus Timer
HTMLCSSJavaScriptSVGCanvas APILocalStorage
🚀 DemoGitHub ↗
Arcade Game Collection🖥 Best on Desktop

Carnival·Arcade

Koleksi 12 mini-game arcade klasik dalam satu platform berbasis Canvas — Snake, Breakout, Pong, Space Invaders, Whack-a-mole, Memory Cards, dan lebih banyak lagi. Dilengkapi sistem tiket universal yang terakumulasi lintas game, papan skor persisten, Web Audio FX, serta dukungan penuh kontrol touchscreen dan keyboard.

🖥 Beberapa game memerlukan Mode Situs Desktop di browser HP untuk pengalaman terbaik.

🎮 12 Mini-Games Klasik
🎫 Sistem Tiket Universal
📱 Mobile & Desktop
🔊 Web Audio Sound FX
HTMLCSSJavaScriptCanvas APIWeb Audio API
🚀 DemoGitHub ↗
Infinite Canvas 🖥 Best on Desktop

InfinityFlow

Aplikasi menggambar berbasis Infinite Canvas — dilengkapi 12 brush & shape mode (Pena, Jaring, Cermin, Neon, Pixel, Spray, dan shape tools), sistem layer multi-track, timelapse recorder, pinch-to-zoom mobile, serta integrasi Claude AI untuk analisis dan rekonstruksi karya secara real-time.

🖥 Gunakan Mode Situs Desktop di browser HP untuk pengalaman terbaik.

🎨 12 Brush & Shape Modes
⊞ Multi-layer System
▶ Timelapse Recorder
✦ Claude AI Vision
📱 Touch + Pinch Zoom
↓ Export PNG
HTMLCSSJavaScript Canvas APIClaude API
🚀 Demo GitHub ↗
Indonesian Language QC

IndoText QC

Platform pemeriksa kata baku dan ejaan Bahasa Indonesia berbasis Claude AI — mendeteksi kata tidak baku (KBBI & EYD V), kata informal, bahasa asing, kesalahan kapitalisasi, dan masalah tanda baca. Dilengkapi highlight warna 4 kategori, daftar kesalahan bernomor, koreksi sekali klik, dan tombol abaikan untuk false positive.

✦ Claude AI Analysis
📚 KBBI & EYD V
🎨 4-Color Highlighting
⚡ Koreksi Semua Otomatis
📋 Error List Panel
✕ Kontrol False Positive
HTMLCSSJavaScriptClaude API
🚀 DemoGitHub ↗

Mari Bekerja
Bersama

Punya proyek menarik atau ingin berkolaborasi? Saya selalu terbuka untuk diskusi dan peluang baru.

raffisirojudin@gmail.com