# Barayuda Gautama

> Software Engineer

Full-stack engineer building reliable web products with thoughtful UX and fast delivery.

## Canonical URLs
- [Website](https://www.barayuda.web.id/)
- [Resume](https://www.barayuda.web.id/resume)
- [Hire Me](https://www.barayuda.web.id/hire-me)
- [LLMs Index](https://www.barayuda.web.id/llms.txt)
- [LLMs Full Profile](https://www.barayuda.web.id/llms-full.txt)
- [GitHub](https://github.com/barayuda)

## Public Site Summary
- Name: Barayuda Gautama
- Title: Software Engineer
- Site summary: Remote-ready software engineer shipping high-impact Next.js/Nuxt.js + TypeScript products with strong UI/UX, accessibility, and performance.
- Email: gede@barayuda.web.id

## Primary Public Pages
- [Remote-ready Software Engineer](https://www.barayuda.web.id/): Remote-ready software engineer shipping high-impact Nuxt.js or Next.js + TypeScript products with strong UI/UX, accessibility, and performance. Open to remote roles.
- [Resume](https://www.barayuda.web.id/resume): Up-to-date resume for Barayuda Gautama with ATS-friendly format. Printable and exportable as PDF.
- [Portfolio](https://www.barayuda.web.id/portfolio): Selected work, case studies, and product highlights.
- [Hire Me](https://www.barayuda.web.id/hire-me): Looking for a remote-ready frontend engineer / product designer? Send a short message to Barayuda and share what you’re building.
- [Blog](https://www.barayuda.web.id/blog): Articles and notes on software engineering, UI/UX, and building on the web.
- [Developer Tools](https://www.barayuda.web.id/tools): A collection of free utilities for developers (JSON, Markdown, UUID, and more).

## Additional Public Pages
- [Books](https://www.barayuda.web.id/books): Books I’m reading, revisiting, and recommending.
- [Papers](https://www.barayuda.web.id/papers): Selected papers, notes, and write-ups.
- [Guestbook](https://www.barayuda.web.id/guestbook): Leave a note for Barayuda — entries are reviewed before they are published.
- [UI Showcase](https://www.barayuda.web.id/showcase): A living catalog of reusable UI components used across barayuda.web.id.

## Professional Experience
### Senior Software Engineer in Web — DANA Indonesia
- Period: May 2022 – Jul 2022
- Location: Jakarta, Indonesia (Remote)
- Company: https://dana.id/
- Served as squad lead for a 3-person team, delivering features, maintenance, and improvements to DANA Bisnis.
- Prepared project estimates and system analysis documents.
- Delivered features supporting 150k+ DANA Bisnis merchants.
- Improved Core Web Vitals for the DANA Bisnis front-end.
- Led Mixpanel funnel instrumentation for the H5 team.
- Conducted peer reviews via pull requests.
- Implemented E2E and unit tests for DANA Bisnis.
- Organized learning sessions (1:1s with 3 engineers) and completed online courses.

### Software Engineer in Web — DANA Indonesia
- Period: Sep 2019 – May 2022
- Location: Jakarta, Indonesia (Remote)
- Company: https://dana.id/
- Assumed SDET responsibilities: manual testing in TestRail, test mind-mapping, and Selenium E2E testing.
- Improved CI/CD in Bitbucket, reducing build time from 25 minutes to 15 minutes.
- Migrated the codebase from monorepo to micro-repo architecture, doubling team productivity.
- Led a code revamp that made merchant onboarding 50% faster and increased registered merchants from 80k to 150k by Feb 2022.
- Co-created a POC to revamp dana.id using Nuxt, GraphQL, and Laravel, improving Lighthouse performance by 85%.

### Front-end Engineer — Ogilvy Australia
- Period: Jun 2017 – Aug 2019
- Location: Bali, Indonesia (Remote Office)
- Company: https://www.ogilvy.com.au/
- Summary: Worked on digital campaign builds for a global advertising agency (clients including BMW, Coca-Cola, IBM, AMEX).
- Built HTML5 banners, landing pages, and interactive experiences (GSAP/GreenSock).
- Built a banner preview tool using PHP and Bootstrap.
- Created EDM/email templates and validated in Litmus.
- Worked on Drupal 8 theming (Bootstrap, Webpack, jQuery, Vue).
- Contributed to Xamarin.Forms apps (XAML).
- Built APIs with Node.js in a Firebase environment for outsourcing projects.

## Technical Skills
- JavaScript (Expert)
- TypeScript (Expert)
- React (Advanced)
- Vue (Advanced)
- Ruby on Rails (Intermediate)
- Laravel (Advanced)
- Tailwind CSS (Advanced)
- MySQL (Advanced)
- PostgreSQL (Intermediate)
- Docker (Intermediate)
- AWS (Intermediate)
- GCP (Intermediate)
- Redis (Intermediate)

## Education
### Master's Degree
- School: Udayana University
- Period: 2017 - 2019
- Location: Denpasar, Indonesia
- Website: https://www.unud.ac.id
- Focus: Management of Information Systems

### Bachelor of Computer Science
- School: STMIK STIKOM Indonesia
- Period: 2011 - 2015
- Location: Denpasar, Indonesia
- Website: #

## Languages
- Bahasa Indonesia (Native)
- English (Fluent)

## Interests
- Business & Product
- UI/UX
- Team & Process

## Selected Public Writing
### AI And Agent Workflows
- [MCP in the IDE: What It Is and How to Use It](https://www.barayuda.web.id/blog/mcp-in-the-ide-what-it-is-and-how-to-use-it): Model Context Protocol (MCP) is a standard way to connect AI assistants in your IDE to tools like files, Git, databases, and internal services—safely and consistently.
- [Agents Skills: Building Reusable Agent Behaviors](https://www.barayuda.web.id/blog/agents-skills-building-reusable-agent-behaviors): Agent skills are reusable, scoped behaviors that make assistants consistent and safe. This guide covers what they are, how to design them, and how to ship them in teams.
- [RAG (Retrieval-Augmented Generation) Explained](https://www.barayuda.web.id/blog/rag-retrieval-augmented-generation): RAG is a pattern that lets an LLM answer with your data by retrieving relevant context first, then generating a response grounded in that context.
- [How to Be a Good Software Engineer in the Age of AI](https://www.barayuda.web.id/blog/how-to-be-a-good-software-engineer-in-the-age-of-ai): AI raises the baseline for speed—but also for correctness, security, and ownership. Here’s a practical playbook for staying valuable and shipping high-impact work with AI in the loop.

### Frontend Performance And Quality
- [Next.js Rendering Strategies: CSR, SSR, SSG, ISR, and PPR](https://www.barayuda.web.id/blog/nextjs-csr-ssr-ssg-isr-ppr): A practical guide to Next.js rendering: what CSR/SSR/SSG/ISR/PPR mean, how they work in the App Router, and when to use each.
- [Core Web Vitals + PWA: Performance That Feels Instant (and Stays Reliable)](https://www.barayuda.web.id/blog/core-web-vitals-pwa-performance-that-feels-instant-and-stays-reliable): A practical, deep guide to Core Web Vitals (LCP/CLS/INP) and Progressive Web Apps—how they work, how to measure them, and how to ship a fast, installable site without breaking UX.
- [Demystifying WCAG: The Gold Standard for Web Accessibility in 2026](https://www.barayuda.web.id/blog/demystifying-wcag-web-accessibility-2026): WCAG isn’t just compliance. It’s a practical, testable checklist for building inclusive websites that work better for everyone—and often rank better too.
- [E2E Testing This Next.js App with Playwright (Team-Friendly Reports)](https://www.barayuda.web.id/blog/e2e-testing-playwright-team-friendly-reports): A practical E2E testing approach for this repo: cover real user flows, run in CI, and publish readable reports for review.

### Platforms And Architecture
- [MongoDB vs SQLite: Differences, Pros/Cons, and When to Use Each](https://www.barayuda.web.id/blog/mongodb-vs-sqlite): A practical comparison of MongoDB and SQLite: what they are, how they differ, pros/cons, and when each one makes sense in real projects.
- [PHP in Production: Nginx, LiteSpeed, FrankenPHP, Caddy, and the Modern Server Stack (2026)](https://www.barayuda.web.id/blog/php-in-production-nginx-litespeed-frankenphp-caddy-and-the-modern-server-stack-2026): PHP can run behind many servers: Nginx+PHP-FPM, LiteSpeed+LSAPI, Caddy, or newer stacks like FrankenPHP. This deep guide explains how each works, what to choose for WordPress/Laravel, and the tuning, security, and caching patterns that matter in production.
- [WordPress as a Headless CMS: Architecture, Workflow, and Best Practices (2026)](https://www.barayuda.web.id/blog/wordpress-as-a-headless-cms-architecture-workflow-and-best-practices-2026): Headless WordPress keeps the editor experience while letting you ship a modern frontend. This deep guide covers architecture, REST vs GraphQL, content modeling, previews, webhooks, caching, SEO, and common production pitfalls.
- [The Difference Between .mjs, .cjs, and .js Files in Node.js](https://www.barayuda.web.id/blog/the-difference-between-mjs-cjs-and-js-files-in-node-js): Node.js supports two module systems (ESM and CommonJS). The file extensions .mjs/.cjs and the package.json "type" field decide which one you’re using—and that affects imports, tooling, and publishing.

## Developer Tools
### Structured Data And Text
- [JSON Formatter](https://www.barayuda.web.id/tools/json-formatter): Format, minify, and validate JSON.
- [Markdown Preview](https://www.barayuda.web.id/tools/markdown-preview): Live preview Markdown while typing.
- [URL Encode/Decode](https://www.barayuda.web.id/tools/url-encode): Encode/decode URLs, query strings, and parameter values.
- [Base64 Encode/Decode](https://www.barayuda.web.id/tools/base64): Encode/decode Base64 (text or file).
- [URL Slug Generator](https://www.barayuda.web.id/tools/slug-generator): Generate clean URL slugs.

### Security And Tokens
- [Hash Generator](https://www.barayuda.web.id/tools/hash-generator): Generate SHA hashes for text or files locally in your browser.
- [JWT Builder](https://www.barayuda.web.id/tools/jwt-builder): Build and sign JWTs (HS*).
- [JWT Viewer](https://www.barayuda.web.id/tools/jwt-viewer): Decode JWTs and verify HS*.
- [PASETO Builder](https://www.barayuda.web.id/tools/paseto): Generate and verify PASETO tokens.
- [PASETO Viewer](https://www.barayuda.web.id/tools/paseto-viewer): Decode and verify PASETO tokens.

### Frontend And Delivery Utilities
- [Color Contrast Checker](https://www.barayuda.web.id/tools/color-contrast): Calculate contrast ratios for text/background colors to meet WCAG standards.
- [RegEx Playground](https://www.barayuda.web.id/tools/regex-playground): Test JavaScript regular expressions against input text (matches, groups, replace preview).
- [Gitignore Generator](https://www.barayuda.web.id/tools/gitignore): Generate .gitignore templates.
- [PDF Toolkit](https://www.barayuda.web.id/tools/pdf-toolkit): Merge, split, and compress PDFs locally.
- [Image Compressor](https://www.barayuda.web.id/tools/image-compressor): Compress JPG, JPEG, and PNG images locally in your browser.