https://www.nirwan.work/

1<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/png" href="/favicon.png"><link rel="alternate" type="application/rss+xml" title="Nir Portfolio Blog" href="/rss.xml">

1<script defer src="https://cloud.umami.is/script.js" data-website-id="e513f60b-b91b-46d6-9edb-f9d7ae248784"></script>

1<meta name="generator" content="Astro v5.13.3"><title>Nir Portfolio Blog</title><meta name="description" content="Full-stack developer in Bandung. Enterprise web apps with React, Next.js, and NestJS; WooCommerce plugins and restaurant ordering systems on the side."><meta name="author" content="Nirwansyah Ramdhani"><link rel="canonical" href="https://nirwan.work/"><meta property="og:type" content="website"><meta property="og:site_name" content="Nir Portfolio Blog"><meta property="og:title" content="Nir Portfolio Blog"><meta property="og:description" content="Full-stack developer in Bandung. Enterprise web apps with React, Next.js, and NestJS; WooCommerce plugins and restaurant ordering systems on the side."><meta property="og:url" content="https://nirwan.work/"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Nir Portfolio Blog"><meta name="twitter:description" content="Full-stack developer in Bandung. Enterprise web apps with React, Next.js, and NestJS; WooCommerce plugins and restaurant ordering systems on the side."><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate">

1<script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.DZnDNxNb.js"></script>

1<link rel="stylesheet" href="/_astro/_slug_.4kKj7PAD.css"></head> <body> <header> <span id="logo"> <pre class="text-text-light dark:text-text-dark font-mono text-xs leading-tight font-bold">  /\_/\
2 ( <span class="animate-blink"></span> )
3  &gt; ^ &lt;</pre> <span class="profile"> <h1 class="title">Nirwansyah R</h1> <h4 class="font-medium text-gray-300">Full Stack Developer</h4> </span> </span> <nav> <a aria-current="page" class="font-bold text-gray-100" href="/" title="🙋‍♂️ Home"> 🙋‍♂️ Home </a><a href="/project" title="⚒️ Project"> ⚒️ Project </a><a href="/blog" title="📝 Blog"> 📝 Blog </a><a href="/uses" title="🧑‍💻 Uses"> 🧑‍💻 Uses </a><a href="/contact" title="📶 Contact"> 📶 Contact </a> </nav> <hr> </header> <article>  <section class="mb-20" id="about"> <h2 class="mb-4 text-2xl font-bold text-gray-200">About Me</h2> <p class="leading-relaxed text-gray-300">
4Hi, I'm Nirwan, a full-stack developer based in Bandung. I started
5    building WordPress sites in 2016 and moved into React, Next.js, and NestJS
6    work full-time around 2021. These days I split my time between enterprise
7    web apps at work and a WooCommerce plugin called <a class="hover:underline" href="https://wordpress.org/plugins/restopick-restaurant-pickup-for-woocommerce/" rel="noopener" target="_blank">RestoPick</a> I maintain on the side.
8</p> </section> <section class="mb-20" id="projects"> <h2 class="mb-6 text-2xl font-bold text-gray-200">Featured Projects</h2> <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2"> <div class="rounded-lg border border-[#2A2A2A] bg-[#1D1D1D] p-6 transition-all hover:-translate-y-1 hover:shadow-lg"> <h3 class="text-lg font-bold">BPK Penabur</h3> <h5 class="mb-2 font-mono text-lg">School Management System</h5> <p class="mb-4 text-sm text-gray-300"> The backend behind student activity and admissions. NestJS, PostgreSQL, and a caching layer that keeps registration usable when every parent logs in the same morning. </p> <a class="text-sm font-medium text-gray-200 hover:underline" href="/project/bpk-penabur">View Project →</a> </div><div class="rounded-lg border border-[#2A2A2A] bg-[#1D1D1D] p-6 transition-all hover:-translate-y-1 hover:shadow-lg"> <h3 class="text-lg font-bold">IPEKA</h3> <h5 class="mb-2 font-mono text-lg">School Management System</h5> <p class="mb-4 text-sm text-gray-300"> Two of us replaced a legacy school platform with Next.js, Zustand, and React-Query. The component library we built for it got picked up by teams we weren&#39;t working with. </p> <a class="text-sm font-medium text-gray-200 hover:underline" href="/project/ipeka">View Project →</a> </div><div class="rounded-lg border border-[#2A2A2A] bg-[#1D1D1D] p-6 transition-all hover:-translate-y-1 hover:shadow-lg"> <h3 class="text-lg font-bold">Fishtail</h3> <h5 class="mb-2 font-mono text-lg">Trade Finance Platform</h5> <p class="mb-4 text-sm text-gray-300"> Real-time trade calculations in React and Apollo GraphQL. The Yarn-workspace monorepo underneath meant the second product shipped with most of its UI already written. </p> <a class="text-sm font-medium text-gray-200 hover:underline" href="/project/fishtail">View Project →</a> </div><div class="rounded-lg border border-[#2A2A2A] bg-[#1D1D1D] p-6 transition-all hover:-translate-y-1 hover:shadow-lg"> <h3 class="text-lg font-bold">Goplay</h3> <h5 class="mb-2 font-mono text-lg">Online Streaming Platform</h5> <p class="mb-4 text-sm text-gray-300"> A leaderboard and campaign mini-site for the marketing team, plus SEO work that moved organic traffic. </p> <a class="text-sm font-medium text-gray-200 hover:underline" href="/project/goplay">View Project →</a> </div> </div> </section> <section class="mb-20" id="work-experience"> <h2 class="mb-6 text-2xl font-bold text-gray-200">Work Experience</h2> <div class="space-y-8"> <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between"> <div> <h3 class="text-lg font-bold text-gray-200">Full Stack Developer</h3> <p class="text-gray-300">PT. Kirana Tama Teknologi (EMVEEP)</p> </div> <p class="mt-1 text-sm text-gray-300 sm:mt-0">2021 - Present</p> </div> <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between"> <div> <h3 class="text-lg font-bold text-gray-200">
9Freelance Web Developer
10</h3> <p class="text-gray-300">
11WooCommerce and restaurant ordering systems
12</p> </div> <p class="mt-1 text-sm text-gray-300 sm:mt-0">2020 - Present</p> </div> <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between"> <div> <h3 class="text-lg font-bold text-gray-200">WordPress Developer</h3> <p class="text-gray-300">Jasa Website.Biz (JBiz)</p> </div> <p class="mt-1 text-sm text-gray-300 sm:mt-0">2016 - 2021</p> </div> </div> </section> <section class="mb-20" id="education"> <h2 class="mb-6 text-2xl font-bold text-gray-200">Education</h2> <div class="space-y-8"> <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between"> <div> <h3 class="text-lg font-bold text-gray-200">Teknik Informatika</h3> <p class="text-gray-300">Universitas Langlangbuana Bandung</p> </div> <p class="mt-1 text-sm text-gray-300 sm:mt-0 sm:text-right">
13GPA: 3.29/4.00<br>Sept 2016 - June 2021
14</p> </div> </div> </section> <section id="tech-stack"> <h2 class="mb-6 text-2xl font-bold text-gray-200">Tech Stack</h2> <div class="flex flex-wrap items-center gap-x-4 gap-y-4"> <section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> TypeScript </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> PHP </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> Node.js </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> React </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> Next.js </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> Astro </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> Tailwind CSS </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> NestJS </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> GraphQL </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> PostgreSQL </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> WordPress </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> WooCommerce </section><section class="rounded-lg border-[#2A2A2A] bg-[#1D1D1D] px-2 py-0 font-medium text-gray-300"> Square </section> </div> </section>  </article> <footer class="mt-16 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-6 pb-4 text-sm text-gray-400 sm:flex-row"> <p>© 2026 Nirwansyah Ramdhani</p> <nav class="flex items-center gap-4" aria-label="Social links"> <a aria-label="GitHub" class="text-gray-300 transition-colors" href="https://github.com/nirwannirwan" rel="noopener" target="_blank"> <svg aria-hidden="true" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <path clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.168 6.839 9.49.5.092.682-.217.682-.482 0-.237-.009-.868-.014-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158

14-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.031-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.03 1.595 1.03 2.688 0 3.848-2.338 4.695-4.566 4.942.359.308.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12c0-5.523-4.477-10-10-10z" fill-rule="evenodd"></path> </svg> </a> <a aria-label="LinkedIn" class="text-gray-300 transition-colors" href="https://www.linkedin.com/in/nirwannirwan/" rel="noopener" target="_blank"> <svg aria-hidden="true" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path> </svg> </a> <a aria-label="Dribbble" class="text-gray-300 transition-colors" href="https://dribbble.com/nirwannirwan" rel="noopener" target="_blank"> <svg aria-hidden="true" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0zm7.873 5.532A10.42 10.42 0 0 1 22.255 12c-.357-.07-3.91-.795-7.49-.345-.082-.197-.157-.4-.244-.6-.221-.527-.467-1.04-.732-1.541 3.974-1.62 5.78-3.95 6.084-3.982zm-1.378-1.232c-.275.394-1.918 2.59-5.748 4.024C10.95 4.69 9.064 2.395 8.776 2.046a10.45 10.45 0 0 1 9.72 2.254zM6.825 2.788c.275.367 2.124 2.673 4.025 5.452-5.376 1.43-10.123 1.404-10.633 1.398C.929 6.79 3.555 4.106 6.825 2.788zm-6.694 9.225c0-.105 0-.21.005-.314.494.01 6.072.082 11.812-1.638.33.64.642 1.288.93 1.943-.15.044-.302.087-.444.13-5.927 1.913-9.075 7.137-9.338 7.578a10.43 10.43 0 0 1-2.965-7.7zm4.5 9.108c.166-.34 2.054-3.987 8.555-6.244.022-.008.045-.01.067-.018a39.21 39.21 0 0 1 2.025 7.193 10.412 10.412 0 0 1-10.647-.93zm12.27-.18c-.114-.683-.682-3.78-1.879-6.95 3.379-.54 6.336.337 6.713.46-.473 3.034-2.213 5.652-4.834 7.49z"></path> </svg> </a> <a aria-label="RSS feed" class="text-gray-300 transition-colors" href="/rss.xml"> <svg aria-hidden="true" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20A2.18 2.18 0 0 1 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"></path> </svg> </a> </nav> </footer> </body></html>