Muhammad Syafi'ul Umam · Frontend Developer · UI/UX

Frontend Developer & UI/UX

Building thoughtful, functional, responsive, and production-ready digital interfaces with modern frontend architecture and clean design systems.

View My Work Let's Connect
Frontend & UI/UX Core Focus
Universitas YARSI University
C-Tech Indonesia ERP Experience
Jakarta, ID Location 
export const frontendDeveloper = {
  name: "Muhammad Syafi'ul Umam",
  education: "Universitas YARSI",
  primaryFocus: [
    "React & Vite",
    "Tailwind CSS",
    "Figma UI/UX",
    "ERP Workflows",
  ],
  featuredProject: "PentaDosen",
  internship: "C-Tech ERP Indonesia",
};
TypeScript & React Ready
Open for Projects
BACKGROUND & CRAFT

About Me & Engineering Principles

Information Technology student at Universitas YARSI dedicated to building functional, accessible, and well-crafted digital interfaces.

I am Muhammad Syafi'ul Umam (commonly known as Umam), an Information Technology student at Universitas YARSI in Jakarta with a strong passion for frontend engineering, UI/UX design, and digital product workflows.

My journey bridges design and code. Rather than treating UI design and software implementation as separate silos, I focus on translating user requirements, Figma components, and data structures into production-ready, responsive web applications.

Through my experience as a Functional ERP Intern at C-Tech ERP Indonesia, I worked deeply with enterprise business processes, User Acceptance Testing (UAT), and manual book preparation across core Odoo modules. This taught me the value of structured thinking, system blueprints, and thorough documentation.

INSTITUTION Universitas YARSI
MAJOR Information Technology
BASE Jakarta, Indonesia
STATUS Available for Projects

Clarity

01

Intuitive layouts and crisp typography that help users accomplish tasks without friction.

Consistency

02

Modular components and token-driven design bridging Figma to production code.

Accessibility

03

Semantic HTML, responsive viewports, and readable contrast for all users.

Responsiveness

04

Fluid adaptations from mobile screens to high-density desktop monitors.

Performance

05

Fast loading, clean markup, and zero-bloat modern web architectures.

Simplicity

06

Functional aesthetics focused on what matters most to the user.

PORTFOLIO SELECTION

Featured Projects & Case Studies

Real projects spanning university academic web applications, enterprise ERP documentation, and modular UI design systems.

Preview of PentaDosen — Lecturer Research & Performance Management
Web Application
2025

PentaDosen — Lecturer Research & Performance Management

A dedicated research, publication, and academic performance tracking platform for university lecturers.

Role: Frontend Developer & UI Implementation
✦ Context: Consolidates research documentation into a unified, user-friendly interface that streamlines academic reporting and performance tracking.
Dashboard · HKI · Research Core Modules
React · Vite · Tailwind Frontend Stack
Component-Driven Architecture
React Vite Tailwind CSS TypeScript REST API Figma UI
Read Case Study GitHub
01
Preview of C-Tech ERP — Odoo System Workflows & Module Documentation
System Workflows
2025 - 2026

C-Tech ERP — Odoo System Workflows & Module Documentation

Functional ERP blueprints, UAT validation, and technical manual books across core Odoo enterprise modules.

Role: Functional ERP Intern
✦ Context: Enhanced operational clarity and standard operating procedures for end-users across critical procurement and inventory workflows.
Purchase · Inventory · Sales Modules Covered
Manual Books & UAT Documentation
Odoo Ecosystem ERP Platform
Odoo ERP Business Process UAT Manual Book Purchase & Construction Master Data
GitHub
02
Preview of Systema — Design Tokens & Accessible Web UI Kit
Design System
2024 - 2025

Systema — Design Tokens & Accessible Web UI Kit

A modular UI kit translating Figma design variables into clean, responsive Tailwind CSS components.

Role: Frontend & UI/UX
✦ Context: Enabled rapid and consistent prototyping of web interfaces with verified WCAG contrast and responsive behaviors.
Figma Variables Design System
WCAG AA Principles Accessibility
Tailwind CSS Codebase
Figma Tailwind CSS Design Tokens HTML/CSS Responsive UI
GitHub
03
TECHNICAL MATRIX

Technical Skills & Stack

Technologies and tools I use to design, develop, and document functional digital products.

CORE SPECIALIZATION FRONTEND ARCHITECTURE

Frontend Engineering & Web Development

Building responsive, accessible single-page applications and web interfaces using React, Vite, TypeScript, and modern semantic HTML5 and Tailwind CSS.

React JavaScript (ES6+) TypeScript Vite Tailwind CSS HTML5 & Modern CSS Astro Responsive Web Design
INTERFACE CRAFT FIGMA

UI/UX & Design Implementation

Translating wireframes, user journeys, and component tokens into clean, intuitive, and responsive layouts with high attention to spacing and hierarchy.

Figma & Auto Layout UI/UX Prototyping Design Systems & Tokens Wireframing & User Flows UI Implementation
SERVER & DATA REST APIS

Backend & Databases

Integrating RESTful endpoints, managing structured datasets in MySQL and TiDB, and connecting backend services with Laravel and Node.js.

Laravel Node.js Express.js REST API Integration MySQL TiDB
WORKFLOWS & TESTING ERP & GIT

Tools, System Workflows & Documentation

Version control via Git/GitHub, hands-on enterprise Odoo ERP workflow analysis, functional blueprint preparation, and comprehensive User Acceptance Testing (UAT).

Git & GitHub Odoo ERP Workflows VS Code User Acceptance Testing (UAT) Technical Documentation
CAREER & INDUSTRY EXPERIENCE

Professional Experience

Hands-on industry experience in enterprise ERP systems, functional blueprints, and business workflow documentation.

Functional ERP Intern

Internship

C-Tech ERP Indonesia · Indonesia

11 Aug 2025 — 11 Feb 2026

Conducted functional analysis, business workflow documentation, User Acceptance Testing (UAT), and manual book preparation across enterprise Odoo ERP modules.

  • ✦ Prepared functional blueprints and managed master data import validation for enterprise workflows.
  • ✦ Authored detailed manual books and operational documentation for the Purchase and Construction modules.
  • ✦ Executed User Acceptance Testing (UAT) to ensure system features adhered to business requirements.
  • ✦ Analyzed core Odoo modules: Inventory, Purchase, Sales, Accounting, Manufacturing, Lot/Serial Numbers, Replenishment, MPS, Inventory Valuation, Move History, and Move Analysis.
  • ✦ Created system mockups and documentation to bridge functional requirements with technical execution.
Odoo ERP ERP Workflows Business Process Analysis UAT Manual Book Creation Master Data Import Mockup Design
Have an idea in mind?

Let's build something useful.

Whether you are planning a research portal, frontend web application, UI/UX interface, or exploring collaboration opportunities, feel free to reach out directly.

Jakarta, Indonesia
--:--:-- WIB
Direct Inbox muhammadumamsyafiul@gmail.com
Profiles
GitHub @Umam07
LinkedIn Profile
Instagram Social

Initiate Inquiry

Project scopes, proposals & consultations

Fast-Track