Automated CI/CD Portfolio

Front-End Engineering Showcase

Kompilasi arsitektur antarmuka web modern dari dasar hingga enterprise-ready: Vanilla DOM, Custom Elements, Progressive Web Apps, Lit Components, dan In-Browser AI.

Track 01 • Pemula

Bookshelf App

Aplikasi rak buku interaktif dengan manipulasi DOM murni, form handling, validasi input, custom event system, dan penyimpanan lokal (LocalStorage).

Semantic HTML5 Custom CSS3 Vanilla JS Web Storage API
Buka Live Demo →
Track 02 • Fundamental

Notes App (Web Components)

Aplikasi catatan modular memanfaatkan native Web Components (Custom Elements & Shadow DOM), modular ES6+, REST API integration, dan Webpack 5 production bundler.

Custom Elements Shadow DOM Webpack 5 REST API
Buka Live Demo →
Track 03 • Intermediate

Restaurant & Story SPA / PWA

Aplikasi Single Page Architecture dengan client-side routing, View Transitions API, integrasi peta Leaflet, persistensi offline IndexedDB, dan Service Worker cache.

Vite PWA / Service Worker IndexedDB Leaflet Map
Buka Live Demo →
Track 04 • Toolset

Story App (Lit v3 & Bootstrap)

Implementasi arsitektur enterprise-level menggunakan Lit Web Components v3, Sass modern (@use modular architecture), Bootstrap 5 customization, dan Webpack 5.

Lit v3 Bootstrap 5 Sass (@use) Axios
Buka Live Demo →
Track 05 • AI Web

RootFacts (Client-Side AI)

In-browser AI execution dengan React 18, Vite PWA, TensorFlow.js berarsitektur adaptif (WebGPU/WebGL), dan HuggingFace Transformers.js SLM generation langsung di browser.

React 18 TensorFlow.js (WebGPU) Transformers.js Vite PWA
Buka Live Demo →