<!DOCTYPE html><html lang="en"><head><title data-rh="true">Nurhidayat | Nurhidayat</title><meta data-rh="true" name="description" content="Portfolio and technical blog by Taufik Nurhidayat covering software engineering, web development, and practical case studies."><meta data-rh="true" name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"><meta data-rh="true" property="og:type" content="website"><meta data-rh="true" property="og:site_name" content="Nurhidayat"><meta data-rh="true" property="og:title" content="Nurhidayat"><meta data-rh="true" property="og:description" content="Portfolio and technical blog by Taufik Nurhidayat covering software engineering, web development, and practical case studies."><meta data-rh="true" property="og:url" content="https://nurhidayat.dev/en"><meta data-rh="true" property="og:image" content="https://nurhidayat.dev/comp.jpeg"><meta data-rh="true" property="og:locale" content="en_US"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" name="twitter:title" content="Nurhidayat"><meta data-rh="true" name="twitter:description" content="Portfolio and technical blog by Taufik Nurhidayat covering software engineering, web development, and practical case studies."><meta data-rh="true" name="twitter:image" content="https://nurhidayat.dev/comp.jpeg"><link data-rh="true" rel="canonical" href="https://nurhidayat.dev/en"><link data-rh="true" rel="alternate" hreflang="en" href="https://nurhidayat.dev/en"><link data-rh="true" rel="alternate" hreflang="id" href="https://nurhidayat.dev/id"><link data-rh="true" rel="alternate" hreflang="x-default" href="https://nurhidayat.dev/en"><script data-rh="true" id="seo-json-ld" type="application/ld+json">[{"@context":"https://schema.org","@type":"WebSite","name":"Nurhidayat","url":"https://nurhidayat.dev","inLanguage":["en","id"]},{"@context":"https://schema.org","@type":"Person","name":"Taufik Nurhidayat","url":"https://nurhidayat.dev","image":"https://nurhidayat.dev/comp.jpeg"}]</script>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script defer="" src="https://umami.nurhidayat.dev/script.js" data-website-id="ace65381-bc7a-43b3-860f-fcea8356a0e2"></script>
      <script type="module" crossorigin="" src="/assets/app-drP5MbJ0.js"></script>
      <link rel="stylesheet" crossorigin="" href="/assets/app-BwFp5XF_.css">
    </head>

    <body>
      <div id="root" data-server-rendered="true"><div class="min-h-screen bg-[#F4F4F0] font-sans text-black selection:bg-black selection:text-white overflow-x-hidden flex flex-col"><nav class="sticky top-0 z-50 border-b-4 border-black bg-white px-6 py-4 flex justify-between items-center"><a class="text-2xl font-black tracking-tighter uppercase border-2 border-black p-1 bg-[#FF6B6B] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rotate-[-2deg] hover:rotate-0 transition-transform" href="/en/">NURHIDAYAT.DEV</a><div class="hidden md:flex gap-8 font-bold text-lg items-center"><a class="hover:underline decoration-4 underline-offset-4 decoration-[#4ECDC4]" href="/en#work">Work</a><a class="hover:underline decoration-4 underline-offset-4 decoration-[#4ECDC4]" href="/en/projects">Projects</a><a class="hover:underline decoration-4 underline-offset-4 decoration-[#4ECDC4]" href="/en#about">About</a><a class="hover:underline decoration-4 underline-offset-4 decoration-[#4ECDC4]" href="/en/blog">Blog</a><a class="hover:underline decoration-4 underline-offset-4 decoration-[#4ECDC4]" href="/en#contact">Contact</a></div><div class="hidden md:flex items-center gap-3"><button class="flex items-center gap-2 border-2 border-black px-3 py-2 bg-[#FFE66D] shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px] transition-all hover:bg-[#FF6B6B] font-bold text-sm cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe w-4 h-4"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>EN</button><a href="/en#contact" class="inline-flex items-center justify-center font-bold border-4 border-black transition-all duration-200 active:translate-x-[4px] active:translate-y-[4px] active:shadow-none hover:-translate-y-1 hover:translate-x-0 disabled:opacity-50 disabled:pointer-events-none cursor-pointer bg-white text-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:bg-gray-50 py-2 px-4 text-sm">Let's Talk</a></div><div class="md:hidden flex gap-3 items-center"><button class="border-2 border-black px-2 py-1 bg-[#FFE66D] font-bold text-sm cursor-pointer">EN</button><button class="p-2 border-2 border-black bg-[#FFE66D] cursor-pointer"><div class="space-y-1.5"><span class="block w-8 h-1 bg-black transition-transform "></span><span class="block w-8 h-1 bg-black transition-opacity "></span><span class="block w-8 h-1 bg-black transition-transform "></span></div></button></div></nav><main class="flex-1"><header class="relative border-b-4 border-black bg-[url('https://www.transparenttextures.com/patterns/graphy.png')]"><section class="py-20 px-6 md:px-12 max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center min-h-[80vh]"><div class="space-y-8 relative z-10"><div style="opacity:0;transform:translateX(-50px)"><span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-widest mb-4 rotate-[-1deg]">AVAILABLE FOR HIRE</span><h1 class="text-6xl md:text-8xl font-black leading-[0.9] uppercase tracking-tighter">Creative <br><span class="text-transparent bg-clip-text bg-gradient-to-r from-[#FF6B6B] to-[#FFE66D] stroke-black" style="-webkit-text-stroke:3px black">Developer</span></h1></div><p class="text-xl md:text-2xl font-medium border-l-8 border-[#4ECDC4] pl-6 py-2 bg-white/50 backdrop-blur-sm" style="opacity:0">Building digital experiences with brutal simplicity and retro charm.</p><div class="flex flex-wrap gap-4" style="opacity:0;transform:translateY(20px)"><a href="#work"><button class="inline-flex items-center justify-center px-6 py-3 font-bold text-lg border-4 border-black transition-all duration-200 active:translate-x-[4px] active:translate-y-[4px] active:shadow-none hover:-translate-y-1 hover:translate-x-0 disabled:opacity-50 disabled:pointer-events-none cursor-pointer bg-[#FF6B6B] text-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">View Projects<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 w-5 h-5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></a><a href="https://github.com/taufik-nurhidayat" class="inline-flex items-center justify-center px-6 py-3 font-bold text-lg border-4 border-black transition-all duration-200 active:translate-x-[4px] active:translate-y-[4px] active:shadow-none hover:-translate-y-1 hover:translate-x-0 disabled:opacity-50 disabled:pointer-events-none cursor-pointer bg-white text-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:bg-gray-50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github w-5 h-5"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></a><a href="https://twitter.com/fik346" class="inline-flex items-center justify-center px-6 py-3 font-bold text-lg border-4 border-black transition-all duration-200 active:translate-x-[4px] active:translate-y-[4px] active:shadow-none hover:-translate-y-1 hover:translate-x-0 disabled:opacity-50 disabled:pointer-events-none cursor-pointer bg-white text-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:bg-gray-50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter w-5 h-5"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a></div></div><div class="relative hidden md:block" style="opacity:0;transform:scale(0.8) rotate(10deg)"><div class="absolute inset-0 bg-black translate-x-4 translate-y-4 border-4 border-black"></div><img src="/comp.jpeg" alt="Portrait" class="relative z-10 w-full h-auto border-4 border-black object-cover aspect-square grayscale contrast-125 hover:grayscale-0 transition-all duration-500"><div class="absolute -top-8 -right-8 bg-[#FFE66D] p-4 border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] z-20"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml w-8 h-8"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg></div><div class="absolute -bottom-8 -left-8 bg-[#FF6B6B] p-4 border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] z-20"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette w-8 h-8"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg></div></div></section></header><div class="w-full overflow-hidden border-y-4 border-black bg-[#FFE66D] py-3"><div class="whitespace-nowrap flex gap-4"><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span><span class="text-2xl font-black uppercase tracking-widest text-black">BUILDING DIGITAL SYSTEMS • FULL-STACK ENGINEERING • AI AUTOMATION • SOLO DEVELOPER<!-- --> •</span></div></div><section id="about" class="md:px-12 max-w-7xl mx-auto bg-white border-x-4 border-b-4 border-black !max-w-none !mx-0 px-0 py-0"><div class="max-w-7xl mx-auto grid md:grid-cols-2"><div class="p-12 md:border-r-4 border-black bg-[#4ECDC4]"><h2 class="text-5xl font-black uppercase mb-8 flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal w-10 h-10"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg>About Me</h2><div class="space-y-6 text-lg font-bold"><p>Software Engineer with 2+ years of experience building scalable web applications and automation systems. Focused on delivering practical, efficient, and business-oriented solutions.</p><p>My stack involves React, TypeScript, and Tailwind, but I'm always exploring new ways to break the grid.</p><div class="pt-6"><h3 class="text-2xl font-black uppercase mb-4 border-b-4 border-black inline-block">Tech Stack</h3><div class="flex flex-wrap gap-3"><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">TypeScript</span><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">React</span><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">Next.js</span><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">Svelte</span><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">Tailwind</span><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">Node.js</span><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">Rust</span><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">PostgreSql</span><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">Docker</span><span class="bg-white px-3 py-1 border-2 border-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">Linux</span></div></div></div></div><div class="p-12 flex items-center justify-center bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-gray-100 to-gray-200"><div class="relative"><div class="absolute inset-0 bg-black translate-x-3 translate-y-3"></div><div class="relative bg-white border-4 border-black p-8 max-w-sm"><h3 class="text-2xl font-black mb-4">Current Status</h3><div class="flex items-center gap-3 mb-2"><span class="w-4 h-4 rounded-full bg-green-500 border-2 border-black animate-pulse"></span><span class="font-bold">Open to work</span></div><p class="font-medium text-gray-600">Looking for opportunities to build bold, memorable web experiences.</p></div></div></div></div></section><section id="work" class="py-20 px-6 md:px-12 max-w-7xl mx-auto bg-[#F4F4F0]"><div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6"><h2 class="text-6xl font-black uppercase tracking-tighter relative">Selected Works<span class="absolute -bottom-2 left-0 w-full h-4 bg-[#FFE66D] -z-10 skew-x-12"></span></h2><a href="/en/projects"><button class="inline-flex items-center justify-center px-6 py-3 font-bold text-lg border-4 border-black transition-all duration-200 active:translate-x-[4px] active:translate-y-[4px] active:shadow-none hover:-translate-y-1 hover:translate-x-0 disabled:opacity-50 disabled:pointer-events-none cursor-pointer bg-white text-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:bg-gray-50">View All Projects<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></a></div><div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"><a class="block h-full group" href="/en/projects/bahtera"><div class="border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-transform hover:-translate-y-1 cursor-pointer bg-white h-full flex flex-col p-0 overflow-hidden"><div class="relative border-b-4 border-black aspect-video overflow-hidden"><div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors z-10"></div><img src="https://raw.githubusercontent.com/taufik-nurhidayat/portofolio/develop/public/bahtera/cover.png" alt="Bahtera Adi Jaya Company Website" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"><div class="absolute top-4 right-4 z-20 bg-white border-2 border-black p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-5 h-5"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></div><div class="p-6 flex-1 flex flex-col bg-[#FFE66D]"><h3 class="text-2xl font-black uppercase mb-2">Bahtera Adi Jaya Company Website</h3><p class="font-bold text-sm mb-6 flex-1 opacity-90">Bahtera is a specialty chemical distributor serving industries from personal care to agriculture.</p><div class="flex flex-wrap gap-2 mt-auto"><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">Astro</span><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">TailwindCSS</span><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">Strapi</span><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">Ghost CMS</span><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">Redis</span></div></div></div></a><a class="block h-full group" href="/en/projects/retrosuite"><div class="border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-transform hover:-translate-y-1 cursor-pointer bg-white h-full flex flex-col p-0 overflow-hidden"><div class="relative border-b-4 border-black aspect-video overflow-hidden"><div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors z-10"></div><img src="https://raw.githubusercontent.com/taufik-nurhidayat/portofolio/develop/public/retrosuite/cover.png" alt="RetroSuite Project Management" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"><div class="absolute top-4 right-4 z-20 bg-white border-2 border-black p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-5 h-5"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></div><div class="p-6 flex-1 flex flex-col bg-[#4ECDC4]"><h3 class="text-2xl font-black uppercase mb-2">RetroSuite Project Management</h3><p class="font-bold text-sm mb-6 flex-1 opacity-90">RetroSuite is a thread-based project management app designed to preserve context in team workflows.</p><div class="flex flex-wrap gap-2 mt-auto"><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">Rust</span><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">Actix</span><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">PostgreSQL</span><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">HTMX</span><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">Alpine.js</span><span class="text-xs font-black bg-black text-white px-2 py-1 uppercase tracking-wider">WebSocket</span></div></div></div></a></div></section><section id="blog" class="py-20 px-6 md:px-12 max-w-7xl mx-auto bg-white border-y-4 border-black !max-w-none !mx-0"><div class="max-w-7xl mx-auto"><div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6"><h2 class="text-6xl font-black uppercase tracking-tighter relative"><span class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open w-12 h-12 md:w-16 md:h-16"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg>Latest Thoughts</span><span class="absolute -bottom-2 left-0 w-full h-4 bg-[#4ECDC4] -z-10 skew-x-12"></span></h2></div><div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"><a class="block h-full group" href="/en/blog/mengenal-hermes-agent-langkah-baru-setelah-openclaw"><div class="border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1 h-full flex flex-col bg-white hover:bg-yellow-50 transition-colors p-0 overflow-hidden"><div class="h-48 border-b-4 border-black overflow-hidden relative"><img src="/assets/mengenal-hermes-agent-langkah-baru-setelah-openclaw.en-BTXSgZ94.png" alt="Discovering Hermes Agent: A New Step After OpenClaw Toward a More Flexible AI Workflow" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 grayscale group-hover:grayscale-0"><div class="absolute top-0 right-0 bg-black text-white px-3 py-1 font-bold text-xs uppercase">New Post</div></div><div class="p-8 flex flex-col flex-1"><div class="flex items-center gap-2 mb-4 text-sm font-black uppercase tracking-wider text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar w-4 h-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Apr 05, 2026</div><h3 class="text-3xl font-black uppercase mb-4 leading-none group-hover:text-[#FF6B6B] transition-colors">Discovering Hermes Agent: A New Step After OpenClaw Toward a More Flexible AI Workflow</h3><p class="font-bold text-gray-600 mb-6 flex-1 border-l-4 border-gray-200 pl-4 group-hover:border-black transition-colors">I moved from OpenClaw to Hermes to try something new and explore an AI agent workflow that feels more flexible, active, and practical for everyday digital work.</p><div class="flex items-center gap-2 font-black uppercase text-sm group-hover:translate-x-2 transition-transform">Read Article<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div></a><a class="block h-full group" href="/en/blog/emdash-cms-a-modern-wordpress-alternative-for-the-typescript-and-ai-era"><div class="border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1 h-full flex flex-col bg-white hover:bg-yellow-50 transition-colors p-0 overflow-hidden"><div class="h-48 border-b-4 border-black overflow-hidden relative"><img src="/assets/emdash-cms-alternatif-wordpress-modern-untuk-era-typescript-dan-ai.en-Bmpu6ezD.jpg" alt="EmDash CMS: A Modern WordPress Alternative for the TypeScript and AI Era" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 grayscale group-hover:grayscale-0"><div class="absolute top-0 right-0 bg-black text-white px-3 py-1 font-bold text-xs uppercase">New Post</div></div><div class="p-8 flex flex-col flex-1"><div class="flex items-center gap-2 mb-4 text-sm font-black uppercase tracking-wider text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar w-4 h-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Apr 03, 2026</div><h3 class="text-3xl font-black uppercase mb-4 leading-none group-hover:text-[#FF6B6B] transition-colors">EmDash CMS: A Modern WordPress Alternative for the TypeScript and AI Era</h3><p class="font-bold text-gray-600 mb-6 flex-1 border-l-4 border-gray-200 pl-4 group-hover:border-black transition-colors">EmDash is a full-stack TypeScript CMS built on Astro with Cloudflare-native foundations and sandboxed plugin security. It is designed for teams that want a modern, safer, and AI-ready CMS stack.</p><div class="flex items-center gap-2 font-black uppercase text-sm group-hover:translate-x-2 transition-transform">Read Article<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div></a><a class="block h-full group" href="/en/blog/pockate-a-modern-personal-finance-app-with-ai-agent-integration"><div class="border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1 h-full flex flex-col bg-white hover:bg-yellow-50 transition-colors p-0 overflow-hidden"><div class="h-48 border-b-4 border-black overflow-hidden relative"><img src="/assets/pockate-aplikasi-keuangan-pribadi-modern-dengan-integrasi-ai.en-DkkJnhpw.jpg" alt="Pockate: A Modern Way to Manage Personal Finance Across Multiple Sources" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 grayscale group-hover:grayscale-0"><div class="absolute top-0 right-0 bg-black text-white px-3 py-1 font-bold text-xs uppercase">New Post</div></div><div class="p-8 flex flex-col flex-1"><div class="flex items-center gap-2 mb-4 text-sm font-black uppercase tracking-wider text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar w-4 h-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Mar 26, 2026</div><h3 class="text-3xl font-black uppercase mb-4 leading-none group-hover:text-[#FF6B6B] transition-colors">Pockate: A Modern Way to Manage Personal Finance Across Multiple Sources</h3><p class="font-bold text-gray-600 mb-6 flex-1 border-l-4 border-gray-200 pl-4 group-hover:border-black transition-colors">Pockate helps you track money across multiple accounts, analyze income vs expense ratio, manage monthly budgets, track non-cash assets, and integrate with AI agents like OpenClaw.</p><div class="flex items-center gap-2 font-black uppercase text-sm group-hover:translate-x-2 transition-transform">Read Article<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div></a></div><div class="mt-12 text-center"><a href="/en/blog"><button class="inline-flex items-center justify-center px-6 py-3 font-bold text-lg border-4 border-black transition-all duration-200 active:translate-x-[4px] active:translate-y-[4px] active:shadow-none hover:-translate-y-1 hover:translate-x-0 disabled:opacity-50 disabled:pointer-events-none cursor-pointer bg-[#4ECDC4] text-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">Read All Articles</button></a></div></div></section><section id="contact" class="px-6 md:px-12 max-w-7xl mx-auto py-20"><div class="bg-[#FF6B6B] border-4 border-black p-8 md:p-12 shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] relative overflow-hidden"><div class="absolute -right-20 -top-20 w-64 h-64 bg-[#FFE66D] rounded-full border-4 border-black z-0"></div><div class="relative z-10 grid md:grid-cols-2 gap-12"><div><h2 class="text-5xl md:text-7xl font-black uppercase mb-6 leading-none">Let's Work Together</h2><p class="text-xl font-bold mb-8 max-w-md">Have a project in mind? Want to discuss the latest in brutalist web design? Drop me a line.</p><div class="space-y-4"><a href="/cdn-cgi/l/email-protection#4d392c382b24260d23383f2524292c342c396329283b" class="flex items-center gap-4 text-xl font-black hover:translate-x-2 transition-transform"><div class="bg-white p-3 border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail w-6 h-6"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></div><span class="__cf_email__" data-cfemail="a2d6c3d7c4cbc9e2ccd7d0cacbc6c3dbc3d68cc6c7d4">[email&#160;protected]</span></a><a href="https://linkedin.com/in/taufik-nurhidayat" class="flex items-center gap-4 text-xl font-black hover:translate-x-2 transition-transform"><div class="bg-white p-3 border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin w-6 h-6"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg></div>taufik-nurhidayat</a></div></div><form class="bg-white border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] space-y-6"><div><label class="block font-black uppercase mb-2 text-sm">Name</label><input type="text" class="w-full bg-gray-100 border-2 border-black p-3 focus:outline-none focus:bg-[#FFE66D] focus:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all font-bold placeholder:text-gray-500" placeholder="YOUR NAME"></div><div><label class="block font-black uppercase mb-2 text-sm">Email</label><input type="email" class="w-full bg-gray-100 border-2 border-black p-3 focus:outline-none focus:bg-[#FFE66D] focus:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all font-bold placeholder:text-gray-500" placeholder="YOUR EMAIL"></div><div><label class="block font-black uppercase mb-2 text-sm">Message</label><textarea rows="4" class="w-full bg-gray-100 border-2 border-black p-3 focus:outline-none focus:bg-[#FFE66D] focus:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all font-bold placeholder:text-gray-500" placeholder="TELL ME ABOUT YOUR PROJECT"></textarea></div><button class="inline-flex items-center justify-center px-6 py-3 font-bold text-lg border-4 border-black transition-all duration-200 active:translate-x-[4px] active:translate-y-[4px] active:shadow-none hover:-translate-y-1 hover:translate-x-0 disabled:opacity-50 disabled:pointer-events-none cursor-pointer bg-[#FF6B6B] text-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] w-full">Send Message</button></form></div></div></section></main><footer class="bg-black text-white py-12 border-t-4 border-black mt-auto"><div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6"><div class="text-2xl font-black uppercase tracking-tighter">NURHIDAYAT.DEV</div><div class="text-sm font-bold opacity-60">© <!-- -->2026<!-- --> Taufik Nurhidayat. All rights reserved.</div><div class="flex gap-4"><a href="https://github.com/taufik-nurhidayat" class="hover:text-[#FF6B6B] transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></a><a href="https://twitter.com/fik346" class="hover:text-[#4ECDC4] transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a><a href="https://linkedin.com/in/taufik-nurhidayat" class="hover:text-[#FFE66D] transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg></a></div></div></footer></div><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>window.__staticRouterHydrationData = JSON.parse("{\"loaderData\":{\"0\":null,\"0-0\":null},\"actionData\":null,\"errors\":null}");</script></div>
<script>window.__VITE_REACT_SSG_HASH__ = '4dnqhzpzjr'</script>
    
  
  
</body></html>