PageSourceSearch

https://salmoon.vercel.app/

html salmoon.vercel.app collected 2026-10-03 07:39:19 UTC 81,612 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="__variable_14db65 antialiased"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/636a5ac981f94f8b-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/ef0360dcf38d5c82-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/2cb64b4f5b5378f9.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/dc1fe22d030bd0fb.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/56b18afaf1f0dc85.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-330ec5ea1d3fe5b2.js"/>
1<script src="/_next/static/chunks/fd9d1056-7ef211a81d09af37.js" async=""></script>
1<script src="/_next/static/chunks/2117-eadf4fc9ce10909e.js" async=""></script>
1<script src="/_next/static/chunks/main-app-be3d940aef6bd3eb.js" async=""></script>
1<script src="/_next/static/chunks/f97e080b-b4852c0d968f8e87.js" async=""></script>
1<script src="/_next/static/chunks/2972-1ee5a7097b111775.js" async=""></script>
1<script src="/_next/static/chunks/6137-03d2cd0024eec2f8.js" async=""></script>
1<script src="/_next/static/chunks/5878-e463124defdf107a.js" async=""></script>
1<script src="/_next/static/chunks/9952-739632ab7a1aa2ba.js" async=""></script>
1<script src="/_next/static/chunks/4048-eb79348c7ef5bec3.js" async=""></script>
1<script src="/_next/static/chunks/449-57ccfa9b778dc9f9.js" async=""></script>
1<script src="/_next/static/chunks/app/(app)/page-1f651776616ccfb5.js" async=""></script>
1<script src="/_next/static/chunks/59650de3-d07b6600721f4209.js" async=""></script>
1<script src="/_next/static/chunks/30a37ab2-406dd9f2beb12bff.js" async=""></script>
1<script src="/_next/static/chunks/4438-c0c41242389a7c07.js" async=""></script>
1<script src="/_next/static/chunks/6391-a220ca453425bc33.js" async=""></script>
1<script src="/_next/static/chunks/1804-0288a192acd7e822.js" async=""></script>
1<script src="/_next/static/chunks/8270-1599127b955e677e.js" async=""></script>
1<script src="/_next/static/chunks/131-7e34777220128d93.js" async=""></script>
1<script src="/_next/static/chunks/5124-87965b2d33a0c97a.js" async=""></script>
1<script src="/_next/static/chunks/6344-587ac340bc6ac3c6.js" async=""></script>
1<script src="/_next/static/chunks/2388-ea88f20a815f23be.js" async=""></script>
1<script src="/_next/static/chunks/app/(app)/layout-e84ec0c171dfe6b7.js" async=""></script>
1<script src="/_next/static/chunks/app/(app)/template-371361f340d0d246.js" async=""></script>
1<script src="/_next/static/chunks/9763-fc0d6d4bb799abcc.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-27ec5e6f7ea5c40a.js" async=""></script>
1<title>Msafdev | Product Engineer</title><meta name="description" content="When creativity meets perfection, you get me. A freelance product engineer / fullstack developer with a passion for building pretty products."/><meta name="application-name" content="Msafdev"/><meta name="keywords" content="muhammad salman alfarisi,msafdev,msaf,salmoon,salman alfarisi,fullstack developer,product engineer,UI/UX,frontend,backend,react developer,nextjs developer,freelance developer,web developer indonesia,portfolio developer,hire fullstack developer,design engineer,indonesia,software engineer portfolio"/><meta name="google-site-verification" content="o2JC_24yWCXt25B4cLk_3kF-RTSQDBNab7JNqh33cHU"/><meta property="og:title" content="Msafdev | Product Engineer"/><meta property="og:description" content="When creativity meets perfection, you get me. A freelance product engineer / fullstack developer with a passion for building pretty products."/><meta property="og:url" content="https://salmoon.vercel.app"/><meta property="og:site_name" content="Msafdev"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://salmoon.vercel.app/api/og"/><meta property="og:image:alt" content="Msafdev"/><meta property="og:image:type" content="image/png"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Msafdev | Product Engineer"/><meta name="twitter:description" content="When creativity meets perfection, you get me. A freelance product engineer / fullstack developer with a passion for building pretty products."/><meta name="twitter:image" content="https://salmoon.vercel.app/api/og"/><link rel="icon" href="/favicon.ico"/><meta name="next-size-adjust"/>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body class="font-jakarta-plus">
1<script>((e,t,r,n,o,a,i,s)=>{let l=document.documentElement,u=["light","dark"];function c(t){(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&a?o.map(e=>a[e]||e):o;r?(l.classList.remove(...n),l.classList.add(a&&a[t]?a[t]:t)):l.setAttribute(e,t)}),s&&u.includes(t)&&(l.style.colorScheme=t)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=i&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","theme","light",null,["light","dark"],null,true,false)</script>
1<style>#nprogress{pointer-events:none}#nprogress .bar{background:#2299DD;position:fixed;z-index:100;top: 0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 20px #2299DD, 0 0 10px #2299DD;opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:100;top: 15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#2299DD;border-left-color:#2299DD;border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}</style><div class="relative flex min-h-svh flex-col items-center justify-center"><div class="from-background pointer-events-none fixed top-0 left-0 z-50 h-8 w-full bg-linear-to-b to-transparent md:h-10 lg:h-12"></div><main class="flex h-auto w-full grow flex-col py-16 md:py-20 lg:py-24"><section id="home" class="h-auto w-full grow flex flex-col items-center gap-y-16 px-4 md:gap-y-20 lg:gap-y-24"><div style="transition-delay:0.1s" class="flex w-full max-w-lg flex-col items-center md:transition-all md:duration-400 md:ease-in-out translate-y-0 opacity-100 blur-none md:translate-y-4 md:opacity-0 md:blur-[4px]"><div class="w-full space-y-8"><div class="space-y-1 md:space-y-0"><div class="flex items-center gap-x-2"><h1 class="text-base leading-none font-semibold md:text-lg">Salman Alfarisi</h1><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#1db7f9" stroke="hsl(var(--background))" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg></div><p class="text-muted-foreground text-xs leading-none font-medium md:text-sm">Product Engineer</p></div><div class="w-full max-w-lg space-y-1"><div class="flex w-full flex-col"></div><div class="text-muted-foreground flex flex-col gap-y-4 text-sm md:text-base"><p>I&#x27;m a product engineer from<!-- --> <span class="text-foreground font-medium">Semarang, Indonesia</span>. A sucker for minimalist design. In my free time, I love exploring new places and diving into alternative music.</p></div></div><div class="relative w-full max-w-full"><div class="mx-auto flex w-fit flex-row items-center gap-2 -space-x-4 px-4 sm:gap-4 sm:-space-x-8"><div class="box-shadow shrink-0 overflow-hidden rounded-[1px]" style="transform:rotate(-5deg)"><div class="bg-card text-card-foreground dark:bg-primary dark:text-primary-foreground flex h-fit flex-col items-center p-1 xs:w-[24vw] relative w-[28vw] sm:w-32"><img alt="Image of place 1" aria-hidden="true" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="aspect-square h-auto w-full object-cover" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 320&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/webp;base64,UklGRloAAABXRUJQVlA4IE4AAACwAQCdASoIAAgAAkA4JQBOgB5vwfwgAPlSk38rLPwqHIg5RzpzA0K9Z4ULavNE1222uAz5Id3jQaH41D08p1UnxSzKno7xsMBfMSKeAAA=&#x27;/%3E%3C/svg%3E&quot;)" sizes="(max-width: 640px) 30vw, (max-width: 1024px) 20vw, 10vw" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=64&amp;q=75 64w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=96&amp;q=75 96w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=128&amp;q=75 128w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=256&amp;q=75 256w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=384&amp;q=75 384w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=640&amp;q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=750&amp;q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=828&amp;q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-1.b144986c.webp&amp;w=3840&amp;q=75"/><span class="__className_b2dd6b text-sm text-nowrap md:text-base">bali!!</span></div></div><div class="box-shadow shrink-0 overflow-hidden rounded-[1px]" style="transform:rotate(8deg)"><div class="bg-card text-card-foreground dark:bg-primary dark:text-primary-foreground flex h-fit flex-col items-center p-1 xs:w-[24vw] relative w-[28vw] sm:w-32"><img alt="Image of place 2" aria-hidden="true" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="aspect-square h-auto w-full object-cover" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 320&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;
1sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/webp;base64,UklGRloAAABXRUJQVlA4IE4AAACwAQCdASoIAAgAAkA4JYwCdADzes2gAP6bnLPPYWO1Gafm+3tbGM/9I0Wf2pPbVg+vVw2H+O0Pcws4oe5zk5eum+82DqygQz2kAHqYAAA=&#x27;/%3E%3C/svg%3E&quot;)" sizes="(max-width: 640px) 30vw, (max-width: 1024px) 20vw, 10vw" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=64&amp;q=75 64w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=96&amp;q=75 96w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=128&amp;q=75 128w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=256&amp;q=75 256w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=384&amp;q=75 384w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=640&amp;q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=750&amp;q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=828&amp;q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-2.fc552312.webp&amp;w=3840&amp;q=75"/><span class="__className_b2dd6b text-sm text-nowrap md:text-base">bookies</span></div></div><div class="box-shadow shrink-0 overflow-hidden rounded-[1px]" style="transform:rotate(-3deg)"><div class="bg-card text-card-foreground dark:bg-primary dark:text-primary-foreground flex h-fit flex-col items-center p-1 xs:w-[24vw] relative w-[28vw] sm:w-32"><img alt="Image of place 3" aria-hidden="true" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="aspect-square h-auto w-full object-cover" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 320&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/webp;base64,UklGRlQAAABXRUJQVlA4IEgAAADQAQCdASoIAAgAAkA4JZACdAEUmfs1sAD+5Tvi9/dbgJyK/9Y/23i8Un0tRIJ2oW7IBa24qkGLiKn89gMJkbfRz1YlwJGXMAA=&#x27;/%3E%3C/svg%3E&quot;)" sizes="(max-width: 640px) 30vw, (max-width: 1024px) 20vw, 10vw" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=64&amp;q=75 64w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=96&amp;q=75 96w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=128&amp;q=75 128w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=256&amp;q=75 256w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=384&amp;q=75 384w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=640&amp;q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=750&amp;q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=828&amp;q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fplace-3.509b6c04.webp&amp;w=3840&amp;q=75"/><span class="__className_b2dd6b text-sm text-nowrap md:text-base">beach :3</span></div></div></div></div></div></div><div style="transition-delay:0.18s" class="flex w-full max-w-lg flex-col items-center md:transition-all md:duration-400 md:ease-in-out translate-y-0 opacity-100 blur-none md:translate-y-4 md:opacity-0 md:blur-[4px]"><div class="w-full space-y-4"><div class="w-full max-w-lg space-y-1"><div class="flex w-full flex-col"><div class="flex h-8 w-full items-center justify-between gap-x-4"><h2 id="trusted-by-all" class="text-foreground text-sm leading-none font-bold uppercase">Trusted by all</h2></div></div><div class="text-muted-foreground flex flex-col gap-y-4 text-sm md:text-base"><p>I have been in these fields for<!-- --> <span class="text-foreground font-medium">3 years</span>, working with a diverse range of clients across various industries.</p><p>My dedication to quality, attention to detail, and commitment to results have built long-lasting relationships and trust with every partner I&#x27;ve collaborated with.</p></div></div><div class="flex w-full flex-wrap items-center justify-center gap-x-12"><div class="dark: relative size-16 grayscale md:size-20 dark:invert"><img alt="Client&#x27;s logo 0" loading="lazy" decoding="async" data-nimg="fill" class="object-contain" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/_next/static/media/airestate.9c065099.svg"/></div><div class="dark: relative size-16 grayscale md:size-20 dark:invert"><img alt="Client&#x27;s logo 1" loading="lazy" decoding="async" data-nimg="fill" class="object-contain" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/_next/static/media/contra.db2e017b.svg"/></div><div class="dark: relative size-16 grayscale md:size-20 dark:invert"><img alt="Client&#x27;s logo 2" loading="lazy" decoding="async" data-nimg="fill" class="object-contain" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/_next/static/media/dev-different.0bf276a2.svg"/></div><div class="dark: relative size-16 grayscale md:size-20 dark:invert"><img alt="Client&#x27;s logo 3" loading="lazy" decoding="async" data-nimg="fill" class="object-contain" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/_next/static/media/siap-kerja.dd491ebd.svg"/></div><div class="dark: relative size-16 grayscale md:size-20 dark:invert"><img alt="Client&#x27;s logo 4" loading="lazy" decoding="async" data-nimg="fill" class="object-contain" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/_next/static/media/mandiri.38245768.svg"/></div><div class="dark: relative size-16 grayscale md:size-20 dark:invert"><img alt="Client&#x27;s logo 5" loading="lazy" decoding="async" data-nimg="fill" class="object-contain" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/_next/static/media/bangkit.5a376933.svg"/></div><div class="dark: relative size-16 grayscale md:size-20 dark:invert"><img alt="Client&#x27;s logo 6" loading="lazy" decoding="async" data-nimg="fill" class="object-contain" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/_next/static/media/mitratel.6f88c9f5.svg"/></div></div></div></div><div style="transition-delay:0.26s" class="flex w-full max-w-lg flex-col items-center md:transition-all md:duration-400 md:ease-in-out translate-y-0 opacity-100 blur-none md:translate-y-4 md:opacity-0 md:blur-[4px]"><div class="w-full space-y-4"><div class="w-full max-w-lg space-y-1"><div class="flex w-full flex-col"><div class="flex h-8 w-full items-center justify-between gap-x-4"><h2 id="my-process" class="text-foreground text-sm leading-none font-bold uppercase">My process</h2></div></div><div class="text-muted-foreground flex flex-col gap-y-4 text-sm md:text-base"><p>A step-by-step approach to building high-quality web applications. Using the <span class="text-foreground font-medium">4D</span> <!-- -->method, each phase is tailored to deliver efficient and scalable results.</p></div></div><div class="relative flex w-full max-w-lg flex-col"><div class="xs:gap-x-4 relative grid grid-cols-6 gap-x-6 sm:grid-cols-8 [&amp;:not(:last-child)]:mb-4"><div class="not-xs:flex items-center gap-x-4"><div class="bg-accent text-accent-foreground z-10 flex size-6 shrink-0 items-center justify-center rounded border"><span class="text-xs font-semibold">1</span></div><h3 class="text-foreground xs:hidden text-sm font-semibold">Discovery</h3></div><div class="xs:gap-y-2 not-xs:flex-row not-xs:items-center col-span-5 flex flex-col gap-y-1 sm:col-span-7"><h3 class="text-foreground xs:block hidden text-sm font-semibold">Discovery</h3><p class="text-muted-foreground not-xs:hidden text-sm md:text-base">I begin by understanding your goals and technical requirements to create a clear roadmap for your product.</p></div><p class="text-muted-foreground xs:hidden col-span-full mt-3 text-sm">I begin by understanding your goals and technical requirements to create a clear roadmap for your product.</p></div><div class="xs:gap-x-4 relative grid grid-cols-6 gap-x-6 sm:grid-cols-8 [&amp;:not(:last-child)]:mb-4"><div class="not-xs:flex items-center gap-x-4"><div class="bg-accent text-accent-foreground z-10 flex size-6 shrink-0 items-center justify-center rounded border"><span class="text-xs font-semibold">2</span></div><h3 class="text-foreground xs:hidden text-sm font-semibold">Design</h3></div><div class="xs:gap-y-2 not-xs:flex-row not-xs:items-center col-span-5 flex flex-col gap-y-1 sm:col-span-7"><h3 class="text-foreground xs:block hidden text-sm font-semibold">Design</h3><p class="text-muted-foreground not-xs:hidden text-sm md:text-base">I will craft intuitive, user-friendly interfaces that align with your brand and optimize the user experience.</p></div><p class="text-muted-foreground xs:hidden col-span-full mt-3 text-sm">I will craft intuitive, user-friendly interfaces that align with your brand and optimize the user experience.</p></div><div class="xs:gap-x-4 relative grid grid-cols-6 gap-x-6 sm:grid-cols-8 [&amp;:not(:last-child)]:mb-4"><div class="not-xs:flex items-center gap-x-4"><div class="bg-accent text-accent-foreground z-10 flex size-6 shrink-0 items-center justify-center rounded border"><span class="text-xs font-semibold">3</span></div><h3 class="text-foreground xs:hidden text-sm font-semibold">Development</h3></div><div class="xs:gap-y-2 not-xs:flex-row not-xs:items-center col-span-5 flex flex-col gap-y-1 sm:col-span-7"><h3 class="text-foreground xs:block hidden text-sm font-semibold">Development</h3><p class="text-muted-foreground not-xs:hidden text-sm md:text-base">Using modern technologies like Next.js, I will bring your design to life with responsive and performant code.</p></div><p class="text-muted-foreground xs:hidden col-span-full mt-3 text-sm">Using modern technologies like Next.js, I will bring your design to life with responsive and performant code.</p></div><div class="xs:gap-x-4 relative grid grid-cols-6 gap-x-6 sm:grid-cols-8 [&amp;:not(:last-child)]:mb-4"><div class="not-xs:flex items-center gap-x-4"><div class="bg-accent text-accent-foreground z-10 flex size-6 shrink-0 items-center justify-center rounded border"><span class="text-xs font-semibold">4</span></div><h3 class="text-foreground xs:hidden text-sm font-semibold">Deploy</h3></div><div class="xs:gap-y-2 not-xs:flex-row not-xs:items-center col-span-5 flex flex-col gap-y-1 sm:col-span-7"><h3 class="text-foreground xs:block hidden text-sm font-semibold">Deploy</h3><p class="text-muted-foreground not-xs:hidden text-sm md:text-base">I thoroughly test the site for functionality and performance, then deploy it to a hosting of your choice.</p></div><p class="text-muted-foreground xs:hidden col-span-full mt-3 text-sm">I thoroughly test the site for functionality and performance, then deploy it to a hosting of your choice.</p></div></div></div></div><div style="transition-delay:0.33999999999999997s" class="flex w-full max-w-lg flex-col items-center md:transition-all md:duration-400 md:ease-in-out translate-y-0 opacity-100 blur-none md:translate-y-4 md:opacity-0 md:blur-[4px]"><div class="w-full space-y-4"><div class="w-full max-w-lg space-y-1"><div class="flex w-full flex-col"><div class="flex h-8 w-full items-center justify-between gap-x-4"><h2 id="side-projects" class="text-foreground text-sm leading-none font-bold uppercase">Side Projects</h2><button class="cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focu
1s-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground size-7" data-state="closed"><a aria-label="Go to /archive" class="h-full w-full p-1.5" href="/archive"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="h-full w-full" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></a></button></div></div><div class="text-muted-foreground flex flex-col gap-y-4 text-sm md:text-base"><p>A collection of <span class="text-foreground">open-sourced</span> <!-- -->tools, experiments, and templates I&#x27;ve built over the years. Do check them out.</p></div></div><div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2"><a aria-label="Read more about Pleno" class="group/card w-full space-y-1.5" href="/project/pleno"><div class="bg-muted overflow-hidden rounded-[2px]"><img alt="Thumbnail for Pleno" loading="lazy" width="800" height="450" decoding="async" data-nimg="1" class="anim object-cover group-hover/card:scale-105" style="color:transparent;aspect-ratio:16/9;object-fit:cover;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 200&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoIAAUAAkA4JaQAA3AA/vp/gAA=&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpleno.d9f45709.webp&amp;w=828&amp;q=85 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpleno.d9f45709.webp&amp;w=1920&amp;q=85 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpleno.d9f45709.webp&amp;w=1920&amp;q=85"/></div><h3 class="text-foreground line-clamp-1 text-base font-semibold">Pleno</h3></a><a target="_blank" rel="noopener noreferrer" aria-label="Visit Linked demo" class="group/card w-full space-y-1.5" href="https://linked-seven.vercel.app"><div class="bg-muted overflow-hidden rounded-[2px]"><img alt="Thumbnail for Linked" loading="lazy" width="800" height="450" decoding="async" data-nimg="1" class="anim object-cover group-hover/card:scale-105" style="color:transparent;aspect-ratio:16/9;object-fit:cover;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 200&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoIAAUAAkA4JaQAA3AA/vp/gAA=&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flinked.0ba69c30.webp&amp;w=828&amp;q=85 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flinked.0ba69c30.webp&amp;w=1920&amp;q=85 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flinked.0ba69c30.webp&amp;w=1920&amp;q=85"/></div><h3 class="text-foreground line-clamp-1 text-base font-semibold">Linked</h3></a></div></div></div><div style="transition-delay:0.42000000000000004s" class="flex w-full max-w-lg flex-col items-center md:transition-all md:duration-400 md:ease-in-out translate-y-0 opacity-100 blur-none md:translate-y-4 md:opacity-0 md:blur-[4px]"><div class="w-full space-y-4"><div class="w-full max-w-lg space-y-1"><div class="flex w-full flex-col"><div class="flex h-8 w-full items-center justify-between gap-x-4"><h2 id="let-s-connect" class="text-foreground text-sm leading-none font-bold uppercase">Let&#x27;s connect</h2></div></div></div><div class="grid w-full grid-cols-3 gap-2 sm:grid-cols-5"><a class="anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#FFFFFF] hover:text-black not-sm:first:col-span-2" href="/contact"><span class="sr-only">Button to <!-- -->/contact</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224,128A96,96,0,0,1,79.93,211.11h0L42.54,223.58a8,8,0,0,1-10.12-10.12l12.47-37.39h0A96,96,0,1,1,224,128Z" opacity="0.2"></path><path d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-4-1.08,7.85,7.85,0,0,0-2.53.42L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Zm40-104a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,112Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,144Z"></path></svg></a><a class="anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#1DA1F2] hover:text-white not-sm:first:col-span-2" target="_blank" rel="noopener noreferrer" href="https://twitter.com/msafdev"><span class="sr-only">Button to <!-- -->https://twitter.com/msafdev</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M240,72l-32,32c-4.26,66.84-60.08,120-128,120-32,0-40-12-40-12s32-12,48-36c0,0-55.15-32-47.22-120,0,0,39.66,40,87.22,48V88c0-22,18-40.27,40-40a40.74,40.74,0,0,1,36.67,24Z" opacity="0.2"></path><path d="M247.39,68.94A8,8,0,0,0,240,64H209.57A48.65,48.65,0,0,0,168.1,40a46.87,46.87,0,0,0-33.74,13.7A47.87,47.87,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.3,47.79,9.57,79.77,22,98.18a110.92,110.92,0,0,0,21.89,24.2C61.43,195.2,37.45,204.41,37.2,204.51a8,8,0,0,0-3.85,11.93c.74,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.68,0,129.72-54.42,135.76-124.44l29.9-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.52-6.25,27.56-17,37.88-32.48a8,8,0,0,0-2.61-11.34c-.13-.08-12.86-7.74-24.48-25.29C54.54,124.11,48,100.38,48,73.09c16,13,45.25,33.18,78.69,38.8A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.89,30.89,0,0,1,167.9,56c12.66.
116,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z"></path></svg></a><a class="anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#000000] hover:text-white not-sm:first:col-span-2" target="_blank" rel="noopener noreferrer" href="https://github.com/msafdev"><span class="sr-only">Button to <!-- -->https://github.com/msafdev</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M208,104v8a48,48,0,0,1-48,48H136a32,32,0,0,1,32,32v40H104V192a32,32,0,0,1,32-32H112a48,48,0,0,1-48-48v-8a49.28,49.28,0,0,1,8.51-27.3A51.92,51.92,0,0,1,76,32a52,52,0,0,1,43.83,24h32.34A52,52,0,0,1,196,32a51.92,51.92,0,0,1,3.49,44.7A49.28,49.28,0,0,1,208,104Z" opacity="0.2"></path><path d="M208.3,75.68A59.74,59.74,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58,58,0,0,0,208.3,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.76,41.76,0,0,1,200,104Z"></path></svg></a><a class="anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#E1306C] hover:text-white not-sm:first:col-span-2" target="_blank" rel="noopener noreferrer" href="https://instagram.com/salmonelaf"><span class="sr-only">Button to <!-- -->https://instagram.com/salmonelaf</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M176,32H80A48,48,0,0,0,32,80v96a48,48,0,0,0,48,48h96a48,48,0,0,0,48-48V80A48,48,0,0,0,176,32ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z" opacity="0.2"></path><path d="M176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm64-84a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"></path></svg></a><a class="anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#0077B5] hover:text-white not-sm:first:col-span-2" target="_blank" rel="noopener noreferrer" href="https://linkedin.com/in/msafdev"><span class="sr-only">Button to <!-- -->https://linkedin.com/in/msafdev</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224,40V216a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8H216A8,8,0,0,1,224,40Z" opacity="0.2"></path><path d="M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24Zm0,192H40V40H216V216ZM96,112v64a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm88,28v36a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140ZM100,84A12,12,0,1,1,88,72,12,12,0,0,1,100,84Z"></path></svg></a></div></div></div></section></main><div class="dock-shadow bg-popover fixed inset-x-0 bottom-8 z-50 mx-auto rounded-xl p-1" style="width:0px;opacity:0"><div class="relative flex items-center"><span class="bg-primary/40 dark:bg-primary/20 absolute top-0 bottom-0 z-99 w-10 rounded-[8px] mix-blend-difference r
1ing-0 outline-hidden" style="opacity:0;transform:scale(0)"></span><a class="group/dock relative size-10 p-3 text-sm transition-all duration-300 ease-in-out focus-visible:outline-hidden text-foreground" style="-webkit-tap-highlight-color:transparent" aria-label="Home" href="/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="h-full w-full" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M216,120v96H152V152H104v64H40V120a8,8,0,0,1,2.34-5.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,216,120Z" opacity="0.2"></path><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"></path></svg><span class="bg-popover text-foreground pointer-events-none absolute -top-8 left-1/2 hidden -translate-x-1/2 -translate-y-2 scale-75 rounded-md border p-1 px-1.5 text-[10px] leading-none font-medium opacity-0 transition-all duration-200 ease-in-out group-hover/dock:translate-y-0 group-hover/dock:scale-100 group-hover/dock:opacity-100 md:block">Home</span></a><a class="group/dock relative size-10 p-3 text-sm transition-all duration-300 ease-in-out focus-visible:outline-hidden text-muted-foreground" style="-webkit-tap-highlight-color:transparent" aria-label="Archive" href="/archive"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="h-full w-full" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224,118.31V200a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V118.31h0A191.14,191.14,0,0,0,128,144,191.08,191.08,0,0,0,224,118.31Z" opacity="0.2"></path><path d="M104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112ZM232,72V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56H80V48a24,24,0,0,1,24-24h48a24,24,0,0,1,24,24v8h40A16,16,0,0,1,232,72ZM96,56h64V48a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8ZM40,72v41.62A184.07,184.07,0,0,0,128,136a184,184,0,0,0,88-22.39V72ZM216,200V131.63A200.25,200.25,0,0,1,128,152a200.19,200.19,0,0,1-88-20.36V200H216Z"></path></svg><span class="bg-popover text-foreground pointer-events-none absolute -top-8 left-1/2 hidden -translate-x-1/2 -translate-y-2 scale-75 rounded-md border p-1 px-1.5 text-[10px] leading-none font-medium opacity-0 transition-all duration-200 ease-in-out group-hover/dock:translate-y-0 group-hover/dock:scale-100 group-hover/dock:opacity-100 md:block">Archive</span></a><a class="group/dock relative size-10 p-3 text-sm transition-all duration-300 ease-in-out focus-visible:outline-hidden text-muted-foreground" style="-webkit-tap-highlight-color:transparent" aria-label="Lab" href="/lab"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="h-full w-full" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M96,240l16-80L48,136,160,16,144,96l64,24Z" opacity="0.2"></path><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"></path></svg><span class="bg-popover text-foreground pointer-events-none absolute -top-8 left-1/2 hidden -translate-x-1/2 -translate-y-2 scale-75 rounded-md border p-1 px-1.5 text-[10px] leading-none font-medium opacity-0 transition-all duration-200 ease-in-out group-hover/dock:translate-y-0 group-hover/dock:scale-100 group-hover/dock:opacity-100 md:block">Lab</span></a><a class="group/dock relative size-10 p-3 text-sm transition-all duration-300 ease-in-out focus-visible:outline-hidden text-muted-foreground" style="-webkit-tap-highlight-color:transparent" aria-label="Material" href="/material"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="h-full w-full" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M216,80c0,26.51-39.4,48-88,48S40,106.51,40,80s39.4-48,88-48S216,53.49,216,80Z" opacity="0.2"></path><path d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104
1c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"></path></svg><span class="bg-popover text-foreground pointer-events-none absolute -top-8 left-1/2 hidden -translate-x-1/2 -translate-y-2 scale-75 rounded-md border p-1 px-1.5 text-[10px] leading-none font-medium opacity-0 transition-all duration-200 ease-in-out group-hover/dock:translate-y-0 group-hover/dock:scale-100 group-hover/dock:opacity-100 md:block">Material</span></a><button class="group/dock relative size-10 p-3 text-sm transition-all duration-300 ease-in-out focus-visible:outline-hidden cursor-pointer text-yellow-500 dark:text-indigo-600 [&amp;&gt;svg]:fill-yellow-400 dark:[&amp;&gt;svg]:fill-indigo-500" aria-label="Change theme button"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="h-full w-full" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z"></path></svg><span class="bg-popover text-foreground pointer-events-none absolute -top-8 left-1/2 hidden -translate-x-1/2 -translate-y-2 scale-75 rounded-md border p-1 px-1.5 text-[10px] leading-none font-medium opacity-0 transition-all duration-200 ease-in-out group-hover/dock:translate-y-0 group-hover/dock:scale-100 group-hover/dock:opacity-100 md:block">Theme</span></button></div></div></div><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section>
1<script src="/_next/static/chunks/webpack-330ec5ea1d3fe5b2.js" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script>
1<script>self.__next_f.push([1,"1:HL[\"/_next/static/media/636a5ac981f94f8b-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/2cb64b4f5b5378f9.css\",\"style\"]\n3:HL[\"/_next/static/css/dc1fe22d030bd0fb.css\",\"style\"]\n4:HL[\"/_next/static/media/ef0360dcf38d5c82-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n5:HL[\"/_next/static/css/56b18afaf1f0dc85.css\",\"style\"]\n"])</script>
1<script>self.__next_f.push([1,"6:I[12846,[],\"\"]\n8:I[37929,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"449\",\"static/chunks/449-57ccfa9b778dc9f9.js\",\"7198\",\"static/chunks/app/(app)/page-1f651776616ccfb5.js\"],\"default\"]\n9:I[74072,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"449\",\"static/chunks/449-57ccfa9b778dc9f9.js\",\"7198\",\"static/chunks/app/(app)/page-1f651776616ccfb5.js\"],\"default\"]\na:I[65878,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"449\",\"static/chunks/449-57ccfa9b778dc9f9.js\",\"7198\",\"static/chunks/app/(app)/page-1f651776616ccfb5.js\"],\"Image\"]\nb:I[14594,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"449\",\"static/chunks/449-57ccfa9b778dc9f9.js\",\"7198\",\"static/chunks/app/(app)/page-1f651776616ccfb5.js\"],\"default\"]\nc:I[81103,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"449\",\"static/chunks/449-57ccfa9b778dc9f9.js\",\"7198\",\""])</script>
1<script>self.__next_f.push([1,"static/chunks/app/(app)/page-1f651776616ccfb5.js\"],\"TooltipProvider\"]\nd:I[81103,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"449\",\"static/chunks/449-57ccfa9b778dc9f9.js\",\"7198\",\"static/chunks/app/(app)/page-1f651776616ccfb5.js\"],\"Tooltip\"]\ne:I[81103,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"449\",\"static/chunks/449-57ccfa9b778dc9f9.js\",\"7198\",\"static/chunks/app/(app)/page-1f651776616ccfb5.js\"],\"TooltipTrigger\"]\nf:I[72972,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"449\",\"static/chunks/449-57ccfa9b778dc9f9.js\",\"7198\",\"static/chunks/app/(app)/page-1f651776616ccfb5.js\"],\"\"]\n10:I[81103,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"449\",\"static/chunks/449-57ccfa9b778dc9f9.js\",\"7198\",\"static/chunks/app/(app)/page-1f651776616ccfb5.js\"],\"TooltipContent\"]\n11:I[36539,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"9212\",\"static/chunks/59650de3-d07b6600721f4209.js\",\"5957\",\"static/chunks/30a37ab2-406dd9f2beb12bff.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e46"])</script>
1<script>self.__next_f.push([1,"3124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"4438\",\"static/chunks/4438-c0c41242389a7c07.js\",\"6391\",\"static/chunks/6391-a220ca453425bc33.js\",\"1804\",\"static/chunks/1804-0288a192acd7e822.js\",\"8270\",\"static/chunks/8270-1599127b955e677e.js\",\"131\",\"static/chunks/131-7e34777220128d93.js\",\"5124\",\"static/chunks/5124-87965b2d33a0c97a.js\",\"6344\",\"static/chunks/6344-587ac340bc6ac3c6.js\",\"2388\",\"static/chunks/2388-ea88f20a815f23be.js\",\"5814\",\"static/chunks/app/(app)/layout-e84ec0c171dfe6b7.js\"],\"\"]\n12:I[4707,[],\"\"]\n13:I[37870,[\"7026\",\"static/chunks/app/(app)/template-371361f340d0d246.js\"],\"default\"]\n14:I[36423,[],\"\"]\n15:I[82890,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"9212\",\"static/chunks/59650de3-d07b6600721f4209.js\",\"5957\",\"static/chunks/30a37ab2-406dd9f2beb12bff.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"4438\",\"static/chunks/4438-c0c41242389a7c07.js\",\"6391\",\"static/chunks/6391-a220ca453425bc33.js\",\"1804\",\"static/chunks/1804-0288a192acd7e822.js\",\"8270\",\"static/chunks/8270-1599127b955e677e.js\",\"131\",\"static/chunks/131-7e34777220128d93.js\",\"5124\",\"static/chunks/5124-87965b2d33a0c97a.js\",\"6344\",\"static/chunks/6344-587ac340bc6ac3c6.js\",\"2388\",\"static/chunks/2388-ea88f20a815f23be.js\",\"5814\",\"static/chunks/app/(app)/layout-e84ec0c171dfe6b7.js\"],\"default\"]\n16:\"$Sreact.suspense\"\n17:I[81523,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"9212\",\"static/chunks/59650de3-d07b6600721f4209.js\",\"5957\",\"static/chunks/30a37ab2-406dd9f2beb12bff.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"4438\",\"static/chunks/4438-c0c41242389a7c07.js\",\"6391\",\"static/chunks/6391"])</script>
1<script>self.__next_f.push([1,"-a220ca453425bc33.js\",\"1804\",\"static/chunks/1804-0288a192acd7e822.js\",\"8270\",\"static/chunks/8270-1599127b955e677e.js\",\"131\",\"static/chunks/131-7e34777220128d93.js\",\"5124\",\"static/chunks/5124-87965b2d33a0c97a.js\",\"6344\",\"static/chunks/6344-587ac340bc6ac3c6.js\",\"2388\",\"static/chunks/2388-ea88f20a815f23be.js\",\"5814\",\"static/chunks/app/(app)/layout-e84ec0c171dfe6b7.js\"],\"BailoutToCSR\"]\n18:I[87868,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"9212\",\"static/chunks/59650de3-d07b6600721f4209.js\",\"5957\",\"static/chunks/30a37ab2-406dd9f2beb12bff.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"4438\",\"static/chunks/4438-c0c41242389a7c07.js\",\"6391\",\"static/chunks/6391-a220ca453425bc33.js\",\"1804\",\"static/chunks/1804-0288a192acd7e822.js\",\"8270\",\"static/chunks/8270-1599127b955e677e.js\",\"131\",\"static/chunks/131-7e34777220128d93.js\",\"5124\",\"static/chunks/5124-87965b2d33a0c97a.js\",\"6344\",\"static/chunks/6344-587ac340bc6ac3c6.js\",\"2388\",\"static/chunks/2388-ea88f20a815f23be.js\",\"5814\",\"static/chunks/app/(app)/layout-e84ec0c171dfe6b7.js\"],\"default\"]\n19:I[7375,[\"3665\",\"static/chunks/f97e080b-b4852c0d968f8e87.js\",\"9212\",\"static/chunks/59650de3-d07b6600721f4209.js\",\"5957\",\"static/chunks/30a37ab2-406dd9f2beb12bff.js\",\"2972\",\"static/chunks/2972-1ee5a7097b111775.js\",\"6137\",\"static/chunks/6137-03d2cd0024eec2f8.js\",\"5878\",\"static/chunks/5878-e463124defdf107a.js\",\"9952\",\"static/chunks/9952-739632ab7a1aa2ba.js\",\"4048\",\"static/chunks/4048-eb79348c7ef5bec3.js\",\"4438\",\"static/chunks/4438-c0c41242389a7c07.js\",\"6391\",\"static/chunks/6391-a220ca453425bc33.js\",\"1804\",\"static/chunks/1804-0288a192acd7e822.js\",\"8270\",\"static/chunks/8270-1599127b955e677e.js\",\"131\",\"static/chunks/131-7e34777220128d93.js\",\"5124\",\"static/chunks/5124-87965b2d33a0c97a.js\",\"6344\",\"static/chunks/6344-587ac340bc6ac3c6.js\",\"2388\",\"static/chunks/2388-ea88f20a815f23be.js\",\"5814\",\"stat"])</script>
1<script>self.__next_f.push([1,"ic/chunks/app/(app)/layout-e84ec0c171dfe6b7.js\"],\"default\"]\n1a:I[82798,[\"4438\",\"static/chunks/4438-c0c41242389a7c07.js\",\"9763\",\"static/chunks/9763-fc0d6d4bb799abcc.js\",\"3185\",\"static/chunks/app/layout-27ec5e6f7ea5c40a.js\"],\"ThemeProvider\"]\n1b:I[66951,[\"4438\",\"static/chunks/4438-c0c41242389a7c07.js\",\"9763\",\"static/chunks/9763-fc0d6d4bb799abcc.js\",\"3185\",\"static/chunks/app/layout-27ec5e6f7ea5c40a.js\"],\"default\"]\n1c:I[33606,[\"4438\",\"static/chunks/4438-c0c41242389a7c07.js\",\"9763\",\"static/chunks/9763-fc0d6d4bb799abcc.js\",\"3185\",\"static/chunks/app/layout-27ec5e6f7ea5c40a.js\"],\"Toaster\"]\n1e:I[61060,[],\"\"]\n1f:[]\n"])</script>
1<script>self.__next_f.push([1,"0:[\"$\",\"$L6\",null,{\"buildId\":\"aP_BxABZt6JsrOVJWmnUe\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"\"],\"initialTree\":[\"\",{\"children\":[\"(app)\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"(app)\",{\"children\":[\"__PAGE__\",{},[[\"$L7\",[\"$\",\"$L8\",null,{\"id\":\"home\",\"className\":\"flex flex-col items-center gap-y-16 px-4 md:gap-y-20 lg:gap-y-24\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-y-1 md:space-y-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-x-2\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-base leading-none font-semibold md:text-lg\",\"children\":\"Salman Alfarisi\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"#1db7f9\",\"stroke\":\"hsl(var(--background))\",\"strokeWidth\":\"1.5\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\"}],[\"$\",\"path\",null,{\"d\":\"m9 12 2 2 4-4\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground text-xs leading-none font-medium md:text-sm\",\"children\":\"Product Engineer\"}]]}],[\"$\",\"div\",null,{\"className\":\"w-full max-w-lg space-y-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex w-full flex-col\",\"children\":[\"$undefined\",\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"text-muted-foreground flex flex-col gap-y-4 text-sm md:text-base\",\"children\":[\"$\",\"p\",null,{\"children\":[\"I'm a product engineer from\",\" \",[\"$\",\"span\",null,{\"className\":\"text-foreground font-medium\",\"children\":\"Semarang, Indonesia\"}],\". A sucker for minimalist design. In my free time, I love exploring new places and diving into alternative music.\"]}]}]]}],[\"$\",\"$L9\",null,{}]]}],[\"$\",\"div\",null,{\"className\":\"w-full space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full max-w-lg space-y-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex w-full flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-8 w-full items-center justify-between gap-x-4\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"trusted-by-all\",\"className\":\"text-foreground text-sm leading-none font-bold uppercase\",\"children\":\"Trusted by all\"}],false]}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"text-muted-foreground flex flex-col gap-y-4 text-sm md:text-base\",\"children\":[[\"$\",\"p\",null,{\"children\":[\"I have been in these fields for\",\" \",[\"$\",\"span\",null,{\"className\":\"text-foreground font-medium\",\"children\":\"3 years\"}],\", working with a diverse range of clients across various industries.\"]}],[\"$\",\"p\",null,{\"children\":\"My dedication to quality, attention to detail, and commitment to results have built long-lasting relationships and trust with every partner I've collaborated with.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex w-full flex-wrap items-center justify-center gap-x-12\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"dark: relative size-16 grayscale md:size-20 dark:invert\",\"children\":[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/airestate.9c065099.svg\",\"height\":36,\"width\":199,\"blurWidth\":0,\"blurHeight\":0},\"fill\":true,\"alt\":\"Client's logo 0\",\"quality\":70,\"loading\":\"lazy\",\"sizes\":\"(max-width: 640px) 25vw, (max-width: 1024px) 12vw, 6vw\",\"className\":\"object-contain\"}]}],[\"$\",\"div\",\"1\",{\"className\":\"dark: relative size-16 grayscale md:size-20 dark:invert\",\"children\":[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/contra.db2e017b.svg\",\"height\":40,\"width\":160,\"blurWidth\":0,\"blurHeight\":0},\"fill\":true,\"alt\":\"Client's logo 1\",\"quality\":70,\"loading\":\"lazy\",\"sizes\":\"(max-width: 640px) 25vw, (max-width: 1024px) 12vw, 6vw\",\"className\":\"object-contain\"}]}],[\"$\",\"div\",\"2\",{\"className\":\"dark: relative size-16 grayscale md:size-20 dark:invert\",\"children\":[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/dev-different.0bf276a2.svg\",\"height\"
1:35,\"width\":119,\"blurWidth\":0,\"blurHeight\":0},\"fill\":true,\"alt\":\"Client's logo 2\",\"quality\":70,\"loading\":\"lazy\",\"sizes\":\"(max-width: 640px) 25vw, (max-width: 1024px) 12vw, 6vw\",\"className\":\"object-contain\"}]}],[\"$\",\"div\",\"3\",{\"className\":\"dark: relative size-16 grayscale md:size-20 dark:invert\",\"children\":[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/siap-kerja.dd491ebd.svg\",\"height\":93,\"width\":377,\"blurWidth\":0,\"blurHeight\":0},\"fill\":true,\"alt\":\"Client's logo 3\",\"quality\":70,\"loading\":\"lazy\",\"sizes\":\"(max-width: 640px) 25vw, (max-width: 1024px) 12vw, 6vw\",\"className\":\"object-contain\"}]}],[\"$\",\"div\",\"4\",{\"className\":\"dark: relative size-16 grayscale md:size-20 dark:invert\",\"children\":[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/mandiri.38245768.svg\",\"height\":64,\"width\":64,\"blurWidth\":0,\"blurHeight\":0},\"fill\":true,\"alt\":\"Client's logo 4\",\"quality\":70,\"loading\":\"lazy\",\"sizes\":\"(max-width: 640px) 25vw, (max-width: 1024px) 12vw, 6vw\",\"className\":\"object-contain\"}]}],[\"$\",\"div\",\"5\",{\"className\":\"dark: relative size-16 grayscale md:size-20 dark:invert\",\"children\":[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/bangkit.5a376933.svg\",\"height\":153,\"width\":653,\"blurWidth\":0,\"blurHeight\":0},\"fill\":true,\"alt\":\"Client's logo 5\",\"quality\":70,\"loading\":\"lazy\",\"sizes\":\"(max-width: 640px) 25vw, (max-width: 1024px) 12vw, 6vw\",\"className\":\"object-contain\"}]}],[\"$\",\"div\",\"6\",{\"className\":\"dark: relative size-16 grayscale md:size-20 dark:invert\",\"children\":[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/mitratel.6f88c9f5.svg\",\"height\":64,\"width\":64,\"blurWidth\":0,\"blurHeight\":0},\"fill\":true,\"alt\":\"Client's logo 6\",\"quality\":70,\"loading\":\"lazy\",\"sizes\":\"(max-width: 640px) 25vw, (max-width: 1024px) 12vw, 6vw\",\"className\":\"object-contain\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full max-w-lg space-y-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex w-full flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-8 w-full items-center justify-between gap-x-4\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"my-process\",\"className\":\"text-foreground text-sm leading-none font-bold uppercase\",\"children\":\"My process\"}],false]}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"text-muted-foreground flex flex-col gap-y-4 text-sm md:text-base\",\"children\":[\"$\",\"p\",null,{\"children\":[\"A step-by-step approach to building high-quality web applications. Using the \",[\"$\",\"span\",null,{\"className\":\"text-foreground font-medium\",\"children\":\"4D\"}],\" \",\"method, each phase is tailored to deliver efficient and scalable results.\"]}]}]]}],[\"$\",\"$Lb\",null,{}]]}],[\"$\",\"div\",null,{\"className\":\"w-full space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full max-w-lg space-y-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex w-full flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-8 w-full items-center justify-between gap-x-4\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"side-projects\",\"className\":\"text-foreground text-sm leading-none font-bold uppercase\",\"children\":\"Side Projects\"}],[\"$\",\"$Lc\",null,{\"delayDuration\":0,\"children\":[\"$\",\"$Ld\",null,{\"children\":[[\"$\",\"$Le\",null,{\"asChild\":true,\"children\":[\"$\",\"button\",null,{\"className\":\"cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground size-7\",\"children\":[\"$\",\"$Lf\",null,{\"href\":\"/archive\",\"scroll\":false,\"aria-label\":\"Go to /archive\",\"className\":\"h-full w-full p-1.5\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"className\":\"h-full w-full\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"}
1,\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]}]}]}],[\"$\",\"$L10\",null,{\"className\":\"px-2 py-1\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-xs font-medium\",\"children\":\"More\"}]}]]}]}]]}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"text-muted-foreground flex flex-col gap-y-4 text-sm md:text-base\",\"children\":[\"$\",\"p\",null,{\"children\":[\"A collection of \",[\"$\",\"span\",null,{\"className\":\"text-foreground\",\"children\":\"open-sourced\"}],\" \",\"tools, experiments, and templates I've built over the years. Do check them out.\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"grid w-full grid-cols-1 gap-4 md:grid-cols-2\",\"children\":[[\"$\",\"$Lf\",null,{\"href\":\"/project/pleno\",\"scroll\":false,\"target\":\"$undefined\",\"rel\":\"$undefined\",\"aria-label\":\"Read more about Pleno\",\"className\":\"group/card w-full space-y-1.5\",\"prefetch\":true,\"children\":[[\"$\",\"div\",null,{\"className\":\"bg-muted overflow-hidden rounded-[2px]\",\"children\":[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/pleno.d9f45709.webp\",\"height\":2700,\"width\":4800,\"blurDataURL\":\"data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoIAAUAAkA4JaQAA3AA/vp/gAA=\",\"blurWidth\":8,\"blurHeight\":5},\"alt\":\"Thumbnail for Pleno\",\"width\":800,\"height\":450,\"placeholder\":\"blur\",\"quality\":85,\"className\":\"anim object-cover group-hover/card:scale-105\",\"style\":{\"aspectRatio\":\"16/9\",\"objectFit\":\"cover\"}}]}],[\"$\",\"h3\",null,{\"className\":\"text-foreground line-clamp-1 text-base font-semibold\",\"children\":\"Pleno\"}]]}],[\"$\",\"$Lf\",null,{\"href\":\"https://linked-seven.vercel.app\",\"scroll\":false,\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"aria-label\":\"Visit Linked demo\",\"className\":\"group/card w-full space-y-1.5\",\"prefetch\":false,\"children\":[[\"$\",\"div\",null,{\"className\":\"bg-muted overflow-hidden rounded-[2px]\",\"children\":[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/linked.0ba69c30.webp\",\"height\":1800,\"width\":3200,\"blurDataURL\":\"data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoIAAUAAkA4JaQAA3AA/vp/gAA=\",\"blurWidth\":8,\"blurHeight\":5},\"alt\":\"Thumbnail for Linked\",\"width\":800,\"height\":450,\"placeholder\":\"blur\",\"quality\":85,\"className\":\"anim object-cover group-hover/card:scale-105\",\"style\":{\"aspectRatio\":\"16/9\",\"objectFit\":\"cover\"}}]}],[\"$\",\"h3\",null,{\"className\":\"text-foreground line-clamp-1 text-base font-semibold\",\"children\":\"Linked\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full max-w-lg space-y-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex w-full flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-8 w-full items-center justify-between gap-x-4\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"let-s-connect\",\"className\":\"text-foreground text-sm leading-none font-bold uppercase\",\"children\":\"Let's connect\"}],false]}],\"$undefined\"]}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"grid w-full grid-cols-3 gap-2 sm:grid-cols-5\",\"children\":[[\"$\",\"$Lf\",null,{\"href\":\"/contact\",\"scroll\":false,\"className\":\"anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#FFFFFF] hover:text-black not-sm:first:col-span-2\",\"target\":\"$undefined\",\"rel\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":[\"Button to \",\"/contact\"]}],[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"className\":\"anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M224,128A96,96,0,0,1,79.93,211.11h0L42.54,223.58a8,8,0,0,1-10.12-10.12l12.47-37.39h0A96,96,0,1,1,224,128Z\",\"opacity\":\"0.2\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-4-1.08,7.85,7.85,0,0,0-2.53.42L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Zm40-104a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,112Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,144Z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"}
1,\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]]}],[\"$\",\"$Lf\",null,{\"href\":\"https://twitter.com/msafdev\",\"scroll\":false,\"className\":\"anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#1DA1F2] hover:text-white not-sm:first:col-span-2\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":[\"Button to \",\"https://twitter.com/msafdev\"]}],[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"className\":\"anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M240,72l-32,32c-4.26,66.84-60.08,120-128,120-32,0-40-12-40-12s32-12,48-36c0,0-55.15-32-47.22-120,0,0,39.66,40,87.22,48V88c0-22,18-40.27,40-40a40.74,40.74,0,0,1,36.67,24Z\",\"opacity\":\"0.2\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M247.39,68.94A8,8,0,0,0,240,64H209.57A48.65,48.65,0,0,0,168.1,40a46.87,46.87,0,0,0-33.74,13.7A47.87,47.87,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.3,47.79,9.57,79.77,22,98.18a110.92,110.92,0,0,0,21.89,24.2C61.43,195.2,37.45,204.41,37.2,204.51a8,8,0,0,0-3.85,11.93c.74,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.68,0,129.72-54.42,135.76-124.44l29.9-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.52-6.25,27.56-17,37.88-32.48a8,8,0,0,0-2.61-11.34c-.13-.08-12.86-7.74-24.48-25.29C54.54,124.11,48,100.38,48,73.09c16,13,45.25,33.18,78.69,38.8A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.89,30.89,0,0,1,167.9,56c12.66.16,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]]}],[\"$\",\"$Lf\",null,{\"href\":\"https://github.com/msafdev\",\"scroll\":false,\"className\":\"anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#000000] hover:text-white not-sm:first:col-span-2\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":[\"Button to \",\"https://github.com/msafdev\"]}],[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"className\":\"anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M208,104v8a48,48,0,0,1-48,48H136a32,32,0,0,1,32,32v40H104V192a32,32,0,0,1,32-32H112a48,48,0,0,1-48-48v-8a49.28,49.28,0,0,1,8.51-27.3A51.92,51.92,0,0,1,76,32a52,52,0,0,1,43.83,24h32.34A52,52,0,0,1,196,32a51.92,51.92,0,0,1,3.49,44.7A49.28,49.28,0,0,1,208,104Z\",\"opacity\":\"0.2\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M208.3,75.68A59.74,59.74,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58,58,0,0,0,208.3,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.76,41.76,0,0,1,200,104Z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]]}],[\"$\",\"$Lf\",null,{\"href\":\"https://instagram.com/salmonelaf\",\"scroll\":false,\"className\":\"anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#
1E1306C] hover:text-white not-sm:first:col-span-2\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":[\"Button to \",\"https://instagram.com/salmonelaf\"]}],[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"className\":\"anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M176,32H80A48,48,0,0,0,32,80v96a48,48,0,0,0,48,48h96a48,48,0,0,0,48-48V80A48,48,0,0,0,176,32ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z\",\"opacity\":\"0.2\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm64-84a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]]}],[\"$\",\"$Lf\",null,{\"href\":\"https://linkedin.com/in/msafdev\",\"scroll\":false,\"className\":\"anim group bg-muted text-muted-foreground xs:aspect-square xs:min-w-16 flex h-12 w-full flex-1 cursor-pointer items-center justify-center rounded-[2px] hover:bg-[#0077B5] hover:text-white not-sm:first:col-span-2\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":[\"Button to \",\"https://linkedin.com/in/msafdev\"]}],[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"className\":\"anim size-4 sm:size-5 will-change-transform group-hover:size-5 sm:group-hover:size-6\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M224,40V216a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8H216A8,8,0,0,1,224,40Z\",\"opacity\":\"0.2\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24Zm0,192H40V40H216V216ZM96,112v64a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm88,28v36a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140ZM100,84A12,12,0,1,1,88,72,12,12,0,0,1,100,84Z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]]}]]}]]}]]}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/56b18afaf1f0dc85.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]],null],null]},[[null,[[\"$\",\"$L11\",null,{\"color\":\"#2299DD\",\"initialPosition\":0.08,\"easing\":\"ease\",\"speed\":300,\"showSpinner\":false,\"height\":2,\"shadow\":\"0 0 20px #2299DD, 0 0 10px #2299DD\",\"zIndex\":100}],[\"$\",\"div\",null,{\"className\":\"relative flex min-h-svh flex-col items-center justify-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"from-background pointer-events-none fixed top-0 left-0 z-50 h-8 w-full bg-linear-to-b to-transparent md:h-10 lg:h-12\"}],[\"$\",\"main\",null,{\"className\":\"flex h-auto w-full grow flex-col py-16 md:py-20 lg:py-24\",\"children\":[\"$\",\"$L12\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(app)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L13\",null,{\"children\":[\"$\",\"$L14\",null,{}]}],\"templateStyles\":[],\"templateScripts\":[],\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]}],[\"$\",\"$L15\",null,{}]]}],[\"$\",\"$16\",null,{\"fallback\":null,\"children\":[\"$\",\"$L17\",null,{\"reason\":\"next/dynamic\",\"children\":[\"$\",\"$L18\",null,{}]}]}],[\"$\",\"$L19\",null,{}]]],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/2cb64b4f5b5378f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/dc1fe22d030bd0fb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__variable_14db65 antialiased\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-jakarta-plus\",\"children\":[\"$\",\"$L1a\",null,{\"attribute\":\"class\",\"enableColorScheme\":false,\"defaultTheme\":\"light\",\"enableSystem\":true,\"disableTransitionOnChange\":true,\"children\":[\"$\",\"$L1b\",null,{\"children\":[[\"$\",\"$L12\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L14\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"div\",null,{\"className\":\"m-auto grid min-h-svh w-fit place-items-center gap-2 px-4 font-mono text-xs font-medium sm:text-sm\",\"children\":[\"$\",\"span\",null,{\"className\":\"__className_b2dd6b text-muted-foreground text-center text-2xl\",\"children\":[\"Nothing here,\",\" \",[\"$\",\"$Lf\",null,{\"href\":\"/\",\"aria-label\":\"Go back home\",\"className\":\"text-foreground relative cursor-pointer\",\"children\":[\"go back\",[\"$\",\"$La\",null,{\"src\":{\"src\":\"/_next/static/media/line.ee483aa4.webp\",\"height\"
1:42,\"width\":363,\"blurDataURL\":\"data:image/webp;base64,UklGRkgAAABXRUJQVlA4WAoAAAAQAAAABwAAAAAAQUxQSAkAAAAAXWFYXlZWUFUAVlA4IBgAAAAwAQCdASoIAAEAAkA4JaQAA3AA/vucwAA=\",\"blurWidth\":8,\"blurHeight\":1},\"alt\":\"Underline SVG\",\"width\":64,\"height\":8,\"className\":\"absolute right-0 -bottom-1 w-16 opacity-40 dark:invert\"}]]}]]}]}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/56b18afaf1f0dc85.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],[\"$\",\"$L1c\",null,{}]]}]}]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L1d\"],\"globalErrorComponent\":\"$1e\",\"missingSlots\":\"$W1f\"}]\n"])</script>
1<script>self.__next_f.push([1,"1d:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Msafdev | Product Engineer\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"When creativity meets perfection, you get me. A freelance product engineer / fullstack developer with a passion for building pretty products.\"}],[\"$\",\"meta\",\"4\",{\"name\":\"application-name\",\"content\":\"Msafdev\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"muhammad salman alfarisi,msafdev,msaf,salmoon,salman alfarisi,fullstack developer,product engineer,UI/UX,frontend,backend,react developer,nextjs developer,freelance developer,web developer indonesia,portfolio developer,hire fullstack developer,design engineer,indonesia,software engineer portfolio\"}],[\"$\",\"meta\",\"6\",{\"name\":\"google-site-verification\",\"content\":\"o2JC_24yWCXt25B4cLk_3kF-RTSQDBNab7JNqh33cHU\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"Msafdev | Product Engineer\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"When creativity meets perfection, you get me. A freelance product engineer / fullstack developer with a passion for building pretty products.\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://salmoon.vercel.app\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:site_name\",\"content\":\"Msafdev\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://salmoon.vercel.app/api/og\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:alt\",\"content\":\"Msafdev\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:title\",\"content\":\"Msafdev | Product Engineer\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:description\",\"content\":\"When creativity meets perfection, you get me. A freelance product engineer / fullstack developer with a passion for building pretty products.\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image\",\"content\":\"https://salmoon.vercel.app/api/og\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"meta\",\"21\",{\"name\":\"next-size-adjust\"}]]\n"])</script>
1<script>self.__next_f.push([1,"7:null\n"])</script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.