Loading...
03 / Technical Portfolio & Project Index
Portfolio
Documentation of responsive web interfaces, client and server state architectures (Zustand, TanStack Query, Signals), API integrations, RBAC authentication, and in-browser model inference (ONNX Runtime).
/
Displaying 14 records (9 projects, 5 credentials)
Projects (9)
smpn24padang.sch.id
Aug – Sep 2025 (Production Release)Full-Stack Web Developer Intern
SMP Negeri 24 Padang Institutional Web Portal & CMS
Official school web portal developed with Next.js (App Router) and Tailwind CSS, featuring a CMS for news, announcements, activity galleries, and staff directories, a school Waste Bank module with automated monthly PDF reporting, and role-based access control (RBAC).
Static & Dynamic Next.jsRendering & SEO
Autentikasi & RBACAccess Control
CMS & Rekap PDF Bank SampahFitur Unggulan
Next.jsReactTypeScriptTailwind CSS+6
cars.ikhwann.my.id
2025Frontend & Full-Stack Developer
Automotive Commerce Platform (IngStore)
Vehicle catalog and reservation web application connecting customer-facing storefront views with an administrative dashboard. Manages UI and filter state with Zustand, API fetching and caching with TanStack Query, order validation with Zod, and automated customer lead routing to active sales agents via WhatsApp.
Zustand + TanStack QueryClient & Server State
Zod Schema ValidationForm Validation
Auto-Queue & WhatsApp RoutingLead Automation
Next.jsReactTypeScriptZustand+5
skripsi.ikhwann.my.id
2026 (Undergraduate Thesis Project)Frontend & Research Developer
Tropical Cyclone Trajectory Forecasting System (LSTM & ONNX)
LSTM-based tropical cyclone trajectory prediction and visualization system evaluating 12 experimental scenarios (mean Haversine error of 14.2 km and R² of 0.999). The optimal model is converted to ONNX format for direct in-browser execution via ONNX Runtime on an interactive map built with Astro Island Architecture.
Haversine 14,2 km | R² 0,999Evaluasi Model (12 Skenario)
Astro Island ArchitectureFrontend Architecture
ONNX Runtime WebBrowser Inference
AstroTypeScriptONNX RuntimeLSTM+6
angular.ikhwann.my.id
2026 (Personal Frontend Project)Frontend Developer
Residential Property Platform (Angular Property)
Responsive property catalog interface and interactive 2D housing lot layout built with Angular components and Tailwind CSS. Implements multi-criteria property search filtering and a mortgage (KPR) installment simulation calculator powered by reactive state management (Signals & Data Binding).
Angular Signals & RxJSState Management
2D Housing Lot MapInteractive UI
Reactive KPR SimulatorFinancial Tool
AngularTypeScriptAngular SignalsRxJS+5
blogsing.vercel.app
2026Frontend Developer
Content Publishing Platform & Live Markdown Editor
Editorial and content publishing application built with Next.js (App Router), featuring a synchronized dual-pane Markdown editor, dynamic routing, and structured SEO metadata.
Dual-Pane Live MarkdownEditor UX
Dynamic Structured MetadataSEO Strategy
Next.js Hybrid SSG/SSRRendering
Next.jsReactTypeScriptTailwind CSS+4
kelola-barang.vercel.app
2025Frontend Developer
Inventory Logistics Dashboard UI
Warehouse inventory control dashboard interface built with Next.js, TypeScript, Zustand, and TanStack Query to monitor stock mutations and filter inventory statuses instantaneously.
Instant Client-Side FilteringDashboard UX
Responsive Tabular LayoutData Grid
Zod Stock Mutation FormsValidation
Next.jsReactTypeScriptZustand+5
tfidf.vercel.app
2025Frontend Developer
DockRank — Information Retrieval Search UI
Document search interface built with Next.js and React that visualizes TF-IDF term weighting, cosine similarity scoring, and document relevance rankings.
Interactive Ranking ViewSearch UI
TF-IDF Matrix BreakdownVisualization
Next.js & React StateFrontend
Next.jsReactTypeScriptTailwind CSS+4
2025Frontend Developer
Enterprise Monorepo UI — Shared Design System
Turborepo monorepo architecture managing multiple Next.js applications within a unified workspace, focusing on a shared UI component library and synchronized TypeScript contracts.
Next.js & ReactFrontend Core
Turborepo Shared UIWorkspace
Shared TypeScript ContractsType Safety
Next.jsReactTypeScriptTailwind CSS+5
2025Mobile Frontend Developer
React Native E-Commerce Mobile UI
Cross-platform mobile commerce interface built with React Native, Expo, and TypeScript, focusing on responsive screen navigation, interactive product catalogs, and cart state management.
Expo & React NativeMobile UI
Isolated Cart & Async StateState Handling
Responsive NavigationUX Flow
React NativeExpoTypeScriptMobile UI+4
Certificates (5)
Original credential
Official
HUAWEI-AI-FUNDAMENTALSEnlarge
Artificial Intelligence
2026
Artificial Intelligence Fundamentals
Issuer: Huawei ICT Academy
Certification covering foundational machine learning and neural network concepts that supported the design and empirical evaluation of the LSTM model in my undergraduate thesis prior to web interface integration.
Artificial IntelligenceMachine Learning Basics+4+3
Original credential
Official
HUAWEI-AI-PRINCIPLES-APPEnlarge
Artificial Intelligence & Deep Learning
2026
Artificial Intelligence: Principles and Applications
Issuer: Huawei ICT Academy
Covers principles of applied deep learning systems, directly supporting the workflow of converting trained research models into ONNX format for client-side execution via ONNX Runtime.
AI PrinciplesDeep Learning Architecture+4+3
Original credential
Official
HUAWEI-HCIP-DATACOM-V1.0Enlarge
Network & Infrastructure Engineering
2026
HCIP-Datacom Core Technology V1.0 Course
Issuer: Huawei ICT Academy
Strengthens technical comprehension of client-server data transport, DNS resolution, network latency characteristics, and connectivity diagnostics when integrating frontend applications with REST APIs and production servers.
Data CommunicationsIP Networking & Routing+4+3
.webp)
Original credential
Official
HACKERRANK-PS-BASICEnlarge
Problem Solving & DSA
May 2025
Problem Solving (Basic)
Issuer: HackerRank
Validates foundational algorithmic problem-solving and data structure proficiency applied in client-side data transformation, multi-criteria filtering, and API payload normalization.
Problem SolvingData Structures+4+3
.webp)
Original credential
Official
HACKERRANK-PS-INTERMEDIATEEnlarge
Problem Solving & DSA
Jun 2025
Problem Solving (Intermediate)
Issuer: HackerRank
Evaluates intermediate algorithmic complexity analysis and data structure selection, underpinning the implementation of automated lead-queue routing logic, reactive financial calculators, and efficient UI state updates.
Advanced Problem SolvingData Structure Optimization+3+2