About OB
OB
Full Stack & AI Engineer - Philippines
Open to work
I design and build responsive web experiences with clean structure, thoughtful motion, and interfaces people move through with ease.
Experience
▣
I.T. Instructor
2025 - Present
Data Center College of the Philippines - Baguio
◎
Freelance Web & Graphic Design
2024 - Present
Web apps · UI/UX · Teaching
Education
✎
BSIT - Class of 2025
Data Center College of the Philippines - Baguio · Best Capstone Project
certificationsCSS NC II · Creative Web Design · Cyber Threat Monitoring
Focus
frontendResponsive web apps
ui/uxInterfaces & design systems
systemsArchitecture & tooling
Macintosh HD
5 itemsFolders only
Selected Work
Case study · LMS · 2026
Visit Live Site ↗
Learning Systems Intelligence
A learning platform concept shaped around clearer modules, progress visibility, and guided training flows.
Key outcomes
Terminal
OB-OS Darwin Kernel Version 2026. Type help for a list of available commands.
$ whoami → ob, designer + developer
$ cat stack.txt
- HTMLMarkup
- CSSStyling
- JavaScriptLanguage
- TypeScriptLanguage
- ReactFramework
- TailwindStyling
- GSAPMotion
- Node.jsRuntime
- FigmaDesign
ob@portfolio ~ %
Notes
September 19, 2026 at 9:41 AM
Clarity first.
Polish follows.
- Structure before decoration. Layout, spacing, and typographic hierarchy must stand strong before adding visual ornamentation.
- Every screen scannable. Human eyes should identify the core intent and primary action within 3 seconds of opening any view.
- Motion guides, never distracts. Animate state transitions and tactile feedback; never add motion purely for decorative noise.
- Responsive is part of the idea. Real screens, varied viewports, touch and fine mouse pointers treated with equal craft.
- Design and code stay close. Visual sensibility and technical execution inform and elevate each other.
September 18, 2026 at 4:15 PM
Engineering Tenets
✓
Hardware-Accelerated Animation
Stick strictly to GPU-backed properties (`transform` and `opacity`). Avoid mutating geometry like `top`, `left`, `width`, or `height` during interaction loops.
✓
Semantic Markup & Accessibility First
Proper landmarks, WCAG-compliant contrast ratios, and clear ARIA states so screen readers and keyboard navigators feel first-class.
✓
Zero Unnecessary Dependencies
Prefer vanilla platform primitives, modern CSS features (`backdrop-filter`, container queries), and lightweight utilities before reaching for heavy npm bundles.
September 12, 2026 at 11:30 AM
Influences & Study
Ideas and philosophies that shape my design decisions:
"Good design is as little design as possible. Less, but better - because it concentrates on the essential aspects."
- Dieter Rams, Ten Principles for Good Design
"An interface feels truly fluid when motion starts from the current on-screen value, carries user momentum forward, and can be redirected mid-flight."
- Apple WWDC, Designing Fluid Interfaces
Live Session · Auto-saved
Visitor Scratchpad
Feel free to type notes, feedback, or ideas here. Text automatically saves to your browser's local storage.
Process
How I Work
From concept to production - 4 stages, 2-4 weeks typical.
Phase 01 · Alignment - Week 1
◉
›
Listen & Define
Right questions first. Core problem, user journey, and real-world constraints before any editor or canvas.
Project ScopeIncluded
Information ArchitectureIncluded
Technical BlueprintIncluded
FigJam · Notion · Loom
Phase 02 · Design - Week 1-2
⬣
›
Wireframe & Prototype
Low fidelity first. Type scale, flow, and hierarchy before pixels and color.
Responsive LayoutsIncluded
Design TokensIncluded
Interactive FlowIncluded
Figma · Design Systems · SVG
Phase 03 · Engineering - Week 2-3
⬢
›
Build & Choreograph
Semantic, accessible components with measured, hardware-accelerated motion.
Production CodeIncluded
Fluid Motion60fps
State ManagementIncluded
React / JS · Tailwind · GSAP
Phase 04 · Delivery - Week 3-4
✔
›
QA, Polish & Launch
Real devices, Lighthouse 95+, contrast and responsive edge cases before release.
Lighthouse Audit95+
Cross-Device TestingIncluded
Deployment & HandoverIncluded
Vercel · DevTools · GitHub
New Message
Photos
♥
Resume.pdf
OB
Full Stack Developer & AI Engineer
Baguio City, Philippines (Remote Available)
poweredbyrazer022@gmail.com
BSIT Graduate · Class of 2025
Professional Profile
Full-stack and AI engineer blending reactive Laravel & Vue architectures with intelligent workflow automation. Contributor to the Koamishin open-source collective, building scalable multi-tenant platforms, academic systems, retail ERP, and AI-augmented tooling. Currently serving as an I.T. Instructor at Data Center College of the Philippines - Baguio Inc. while shipping open-source systems and freelance interface engineering.
Professional Experience
I.T. Instructor
2025 - Present
Data Center College of the Philippines - Baguio Inc.
- Instruct college students in computer systems servicing, applied web design, and programming logic.
- Mentor students through hands-on capstone engineering, UI/UX prototyping, and software architecture.
Koamishin Collective - Full Stack & AI Engineer
2025 - Present
Open Source · Remote
- Build and maintain Laravel/Vue systems, academic platforms, retail ERP, and open-source starter kits under the collective.
- Engineer AI-augmented workflow automation, policy-gated financial orchestration, and accessible, responsive interfaces.
Freelance Web Developer & UI Designer
2024 - Present
Independent Engineering - Baguio City & Remote
- Architect and ship custom client web platforms, responsive dashboards, and interactive case studies.
- Engineer hardware-accelerated animations using GSAP and build accessible, WCAG-compliant design systems.
Education & Honors
Bachelor of Science in Information Technology (BSIT)
Graduated 2025
Data Center College of the Philippines - Baguio
Award: Best Capstone Project Awardee
Technical Competencies
Languages & Frameworks: PHP, Laravel, Vue.js, React, Inertia.js, TypeScript, JavaScript (ES6+), Tailwind CSS, Livewire, Filament, HTML5, CSS3
Architecture & Tools: REST APIs, Multi-tenant Systems, MySQL, PostgreSQL, Git/GitHub, Vite, CI/CD, AI Workflow Orchestration, Vercel
Design & Prototyping: Figma, Design Systems, UI/UX Architecture, Responsive Layouts, Typography & Hierarchy
Certifications: CSS NC II (2022), Creative Web Design (2023), 21st Century Skills (2025), Cyber Threat Monitoring Level 1 (2025), Trainers Methodology NC I (2025)
Featured Projects
- EduFlow AI (2026): Bounded departmental finance orchestration on Circle Agent Wallets + Arc testnet (Laravel 13 · React 19 · Inertia.js) - github.com/koamishin/EduFlow.
- Learning Systems Intelligence (2026): Modular LMS design prototype around lesson progression and certification flow - lsi.koamishin.com.
- KoamiStarterKit v2 (2026): Production-ready Laravel 12 starter kit with Vue 3, Inertia.js, Tailwind CSS 4, Octane, Pest, CI/CD.
- konexus (2026): Enterprise-grade School Management Information System with multi-department governance and role permissions.
- Smart Attendance System (2026): Production QR check-in platform with real-time logging and reporting - attendance.koamishin.com.
OB Portfolio OS
Version 2026.1 · Koamishin build
Designer & Developer - BSIT 2025, Data Center College of the Philippines, Baguio. Best Capstone Project.
⚡ Recruiter Quick View
OB
Full Stack & AI Engineer · Baguio City, PH
Available for Full-Time, Contract & Remote Roles
BSIT '25
Best Capstone Awardee
Instructor
DCCP Baguio Inc.
1 Live + 4
Production & Case Studies
24-48h
Direct Reply Window
Core Competencies:
Control Center
Wallpaper