Learning By Doing

Building
Digital Solutions.

Software Engineer & IT Specialist based in Jakarta. I build scalable websites (PHP/JS) and ensure your IT infrastructure runs without compromise.

gabriel.config.ts
const Gabriel = {
roles: ['Software Engineer', 'IT Support'],
location: 'Jakarta, ID',
stack: {
web: ['PHP', 'React', 'Next.js'],
ops: ['Linux', 'Networking']
},
// Ready to solve problems...
await deploy(Gabriel);
};
Gabriel Andreas

Gabriel Andreas.

Experience

2 Years

Location

Jakarta, ID

The Discovery

From Game Lover to IT Enthusiast.

My journey began with a love for gaming, realizing the extraordinary power of system tools and keyboard shortcuts. This initial curiosity led me to the world of IT.

The Pivot

Focused Education (UB D3 TI).

Originally planning for Business school, parental advice guided me to D3 Information Technology at Universitas Brawijaya. Here, I mastered digital business management, SEO, and e-commerce web development.

The Real Code

From HTML Basics to Laravel Project.

A semester 5 internship was the turning point. Forced to move beyond basic HTML/CSS, I gained 6 months of real-world Laravel experience. This knowledge directly fueled my Thesis, which earned an A.

The Next Level

Gearing up for the Professional Field.

While awaiting graduation, I'm currently interning at OTT platform WeWatch to sharpen my skills. I am ready to bring this dedication and adaptability to your team.

Connect & Explore
Swipe Up
Recharging

The Visual Diet

Current Obsessions

One Battle After Another
Film

One Battle After Another

5.0

"Scale & Ambition"

UFC
Combat Sports

UFC

5.0

"Strategic Brawling"

NBA
Basketball

NBA

5.0

"Tactical Depth"

The Social Network
Film

The Social Network

5.0

"The Startup Energy"

FC Barcelona
Football

FC Barcelona

5.0

"Mes Que Un Club"

The Hateful Eight
Film

The Hateful Eight

5.0

"Number 2 Best Of Tarantino"

The Bear
TV Series

The Bear

5.0

"Let It Rip"

Premier League
Football

Premier League

5.0

"Best Of The Best"

"Even though I walk through the darkest valley, I will fear no evil, for you are with me; your rod and your staff, they comfort me."

— Psalm 23:4

Visual reference 0
Visual reference 1
Visual reference 2
Visual reference 3
Visual reference 4
Visual reference 5
Visual reference 6
Visual reference 7
Visual reference 8
Visual reference 9
Visual reference 10
Visual reference 11
Visual reference 12
Visual reference 13

Creative & Technical Vibe

System Inventory

Technical Arsenal.

My comprehensive stack, core tools, and operational status visualized.

root@gabandreas:~
➜_

Deployment

CI/CD Pipeline Ready

JKT-REGION

Latency: 24ms

SYSTEM LOAD

Optimized
Next.js 14 React TypeScript Tailwind CSS Node.js PostgreSQL Framer Motion Vercel Git Next.js 14 React TypeScript Tailwind CSS Node.js PostgreSQL
VS Code
Figma
GitHub

ARSENAL

Core Toolset

System Threat Detected
Interactive // v1.0
Selected Works (07)

Featured
Case Studies.

Solving complex problems with clean code and pixel-perfect design.

Enterprise System01

HMSoft Hospital

System Admin

Comprehensive Hospital Information System (SIMRS) handling patient data, inventory CRUD, and administrative workflows. Built with robust Laravel backend. Features include real-time bed availability tracking, pharmacy stock management, automated doctor scheduling, and complex insurance claim processing integration compatible with BPJS standards.

#Laravel#MySQL#REST API#Postman
Live Demo
hmsoft-to.pratamalink.com/
HMSoft Hospital
Entertainment02

WeWatch Client

OTT Platform

High-performance frontend for an OTT Platform. Optimized for seamless video streaming, dark mode aesthetics, and fast content delivery using Next.js. Includes complex state management for user watchlists, adaptive bitrate streaming support, and a custom video player interface designed for cinematic immersion.

#Next.js#TypeScript#Tailwind#Streaming
Live Demo
landingpage-ww.vercel.app/
WeWatch Client
Landing Page03

Portfolio V1

Personal Brand

The website you are looking at right now. A showcase of modern web design techniques, Framer Motion animations, and clean code architecture. Designed to be performant, accessible, and visually striking while maintaining a minimal footprint.

#React#Framer Motion#UI/UX#Vercel
Live Demo
www.gabandreas.my.id/
Portfolio V1
Landing Page04

Boredrooms

Showcase Tools

A creative playground showcasing interactive mini-tools and coding experiments. Integrated with Gemini API for AI-powered features. Serves as a testing ground for new UI patterns and library implementations.

#Next.js#Vercel#TailwindCSS#TypeScript#Gemini API
Live Demo
boredrooms-gab.vercel.app/
Boredrooms
Fullstack Web App05

MONDAYMONDAY

Cinema Vault

A high-performance movie database engineered with a raw, industrial aesthetic. Features a secure 'Operator Console' for users to track watchlists, log ratings, and write field reports. Built with complex server-side data relationships and real-time API streaming.

#Next.js 14#Prisma ORM#TiDB (SQL)#Clerk Auth#Framer Motion
Live Demo
mondaymonday.vercel.app/
MONDAYMONDAY
Fullstack App06

SICKCLUB

Tactical E-commerce

Fullstack e-commerce project themed with a raw, high-contrast industrial aesthetic (Fight Club). Key feature is the secure, multi-step checkout: Cart → 'Identity Verification Protocol' Modal → Prisma (MySQL) → Midtrans API. This demonstrates extreme UI theming and robust payment pipeline integration.

#Next.js 14#Prisma ORM#Midtrans#Zustand#Tailwind#Typescript
Live Demo
sickclub-website-ecommerce.vercel.app/
SICKCLUB
Headless CMS Blog07

CHEESEBURGER

Experimental Zine

A personal movie journal treated as a digital art experiment. I wanted to break standard grid rules, so I built a 'Warhol-inspired' interface where elements overlap and colors clash (CMYK style). It uses Sanity (Headless CMS) to manage structured content, which the frontend then dynamically renders into 'Zine' layouts, digital receipts, and ticket stubs. It looks chaotic on purpose, but the code structure is strict and type-safe.

#Next.js#Sanity.io#GROQ#Tailwind CSS#TypeScript
Live Demo
cheeseburger-seven.vercel.app/
CHEESEBURGER
Changelog History

The Journey So Far.

A timeline of commits, deploys, and system upgrades. From foundational logic to production-grade engineering.

v1.0.0

The Foundational Spark

@ SMA (MIPA)

The journey started not with code, but with logic. My MIPA background honed analytical thinking, which, combined with a fascination for advanced computer tools, unlocked the potential of IT infrastructure.

#Logical Thinking#MIPA#Basic Tools
v2.0.0-alpha

Academic Expansion

@ UB D3 TI (Digital Business)

System upgrade. Specialization in Digital Business required mastering full-spectrum digital tools: from website builders (WordPress) and SEO (Semrush) to multimedia creation.

#Digital Business#SEO Analysis#WordPress
v3.0.0-beta

The Real Deployment

@ PT. Pratama Link

First production commit. Transitioned from theory to implementing real-world projects. I became the frontliner, translating Figma designs and integrating complex APIs using Postman and Laravel.

#Laravel#API Integration#Frontend
v4.0.0-stable

System Specialist

@ WeWatch Pte.Ltd

System optimized. My role at this OTT startup is diverse: managing CMS, developing websites, conducting on-site STB installation (Ops), and running digital marketing campaigns.

#IT Operations#CMS#Analytics

Status: Active. Still counting the days, striving for excellence_

System Specifications

The Purpleprint.

// ARCHITECTURAL STANDARDS
Defining structural integrity and execution quality.

SYSTEM_STATUS: NORMAL // ALL MODULES OPERATIONAL // RENDERING ENGINE: NEXT.JS // STYLE: TAILWIND // ANIMATION: FRAMER // READY_TO_DEPLOY // SYSTEM_STATUS: NORMAL // ALL MODULES OPERATIONAL // RENDERING ENGINE: NEXT.JS // STYLE: TAILWIND // ANIMATION: FRAMER // READY_TO_DEPLOY //
AXIS_ALIGNED
[01]

MOD_A // CLEAN CODE

Precision Architecture

Scalable systems built on strict TypeScript configurations. Every pixel and logic path is calculated.

[02]

Speed

[03]

Flow

[04]

Guard