# Muhamad Zafar Syah — Frontend Engineer Portfolio

> Muhamad Zafar Syah is a professional Frontend Engineer based in Jakarta, Indonesia, specializing in building high-performance, accessible, and scalable web applications using the React, Next.js, Vue, and Nuxt ecosystems. With over two years of production experience across enterprise e-government platforms, information systems, and open-source tools, he bridges UI/UX design and frontend architecture. His engineering approach emphasizes strict performance budgets, semantic accessibility (WCAG AA), component-driven design systems, and seamless RESTful API integration. He is currently pursuing a Bachelor of Science in Information Systems at Asia Cyber University while actively collaborating on production web solutions and frontend infrastructure.

## About & Engineering Philosophy
- **Name:** Muhamad Zafar Syah
- **Role:** Frontend Engineer & Full Stack Developer
- **Location:** East Jakarta, Indonesia (GMT +7)
- **Education:** B.S. Candidate in Information Systems at Asia Cyber University
- **Core Focus:** E-Government Systems, Scalable Web Applications, Component Libraries, Information Architecture
- **Primary Website:** https://zafarsyah.com
- **LinkedIn:** https://linkedin.com/in/muhamadzafarsyah
- **GitHub:** https://github.com/muhamadzafarsyah

## Technical Stack & Capabilities
- **Languages:** TypeScript, JavaScript (ES6+), HTML5, CSS3, PHP, Python
- **Frontend Frameworks:** React, Next.js (App Router), Vue.js, Nuxt.js, SvelteKit, Astro
- **Styling & UI:** Tailwind CSS, shadcn/ui, Bootstrap, CSS Modules, Design Tokens
- **State & Data Management:** Redux Toolkit, Zustand, Pinia, React Hook Form, Zod, TanStack Query
- **Backend & APIs:** Node.js, Express, PHP, Laravel, Lumen, RESTful APIs, Axios
- **Databases & Cloud:** PostgreSQL, MySQL, Supabase, Firebase, Cloudinary, Vercel
- **Tooling:** Git, GitHub Actions, Vite, Webpack, Postman, Figma, VS Code

## Key Projects
1. **Y2KUI (Open Source Component Library)**:
   - A Y2K-flavored UI kit built on shadcn/ui + Radix primitives, distributed via a custom shadcn CLI registry (`npx y2kui add button`).
   - Repository: https://github.com/muhamadzafarsyah/y2k-ui | Live Demo: https://y2k-ui.web.id

2. **Shelfgram (Social Reading Platform)**:
   - Real-time social reading web app built with Next.js, Node.js, Redux, and PostgreSQL. Features real-time Reading Circles over Pusher, context-aware per-book AI assistant, and Cloudinary media processing.
   - Repository: https://github.com/MuhamadZafarSyah/books | Live Demo: https://booksgram.vercel.app

3. **Lebenslang (German Course Platform)**:
   - High-performance marketing landing page for a certified German language academy built with Astro and Tailwind CSS.
   - Live Demo: https://lebenslang.id

4. **TNI-AD Correspondence System (Persuratan)**:
   - Enterprise e-government application comprising 21 pages and 60+ modular components featuring OCR capture, digital signature validation, and AES-256 encrypted payload transfers.

5. **BKPM Learning Platform (ILC)**:
   - Learning platform built for the Ministry of Investment (BKPM) using SvelteKit and TypeScript.

## Navigation & Sections
- [About Me](https://zafarsyah.com/#about): Engineering background, philosophy, and beliefs.
- [Work & Projects](https://zafarsyah.com/#work): Interactive scrapbook showcase of production web apps.
- [Experience & Journey](https://zafarsyah.com/#journey): Interactive career timeline and organizational roles.
- [Craft & Principles](https://zafarsyah.com/#craft): Core engineering principles on performance, accessibility, motion, and design systems.
- [Tech Stack](https://zafarsyah.com/#stack): Interactive technology sticker sheet.
- [Guestbook](https://zafarsyah.com/#guestbook): Live real-time sticky note board powered by Liveblocks.
- [Contact](https://zafarsyah.com/#connect): Direct channels to connect for frontend engineering opportunities.