<!DOCTYPE html><html lang="en" class="__variable_fb8f2c __variable_f910ec"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/028c0d39d2e8f589-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/5b01f339abf2f1a5.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/772d87814c6d4363-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/77884a8189c63c95-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/a02a323226559df3-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/e4af272ccee01ff0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/1.webp"/><link rel="stylesheet" href="/_next/static/css/a389311a49d4f5ee.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-6b761421cff961fb.js"/><script src="/_next/static/chunks/4bd1b696-ad45a0d75f1c7ab5.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><script src="/_next/static/chunks/684-4d42f4a57efc64cd.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><script src="/_next/static/chunks/main-app-037964b5d318d5f2.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><script src="/_next/static/chunks/app/layout-9b1080425e8fe3f9.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><script src="/_next/static/chunks/c15bf2b0-d67976aba37a88f8.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><script src="/_next/static/chunks/874-8179e1aff5ec9a87.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><script src="/_next/static/chunks/6-37ca770f622b4e06.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><script src="/_next/static/chunks/app/page-krypto0000000001.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><script src="/_next/static/chunks/app/not-found-3162d3e97dac626c.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><meta name="next-size-adjust" content=""/><meta name="theme-color" content="#ffffff"/><title>KRYPTO PICO - Full Stack Developer</title><meta name="description" content="Portfolio website of KRYPTO PICO showcasing projects, skills, and contact information."/><meta name="keywords" content="KRYPTO PICO,Full Stack Developer,Portfolio,Web Developer,React,Next.js"/><meta name="creator" content="KRYPTO PICO"/><meta property="og:title" content="KRYPTO PICO - Full Stack Developer"/><meta property="og:description" content="Explore the portfolio of KRYPTO PICO. Full stack projects, web apps, and more."/><meta property="og:url" content="https://kryptopico.dev"/><meta property="og:site_name" content="KRYPTO PICO Portfolio"/><meta property="og:image" content="https://kryptopico.dev/og-image.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="KRYPTO PICO Portfolio"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@KRYPTOPICO"/><meta name="twitter:title" content="KRYPTO PICO - Full Stack Developer"/><meta name="twitter:description" content="Full stack projects, personal work, and contact info."/><meta name="twitter:image" content="https://kryptopico.dev/og-image.jpg"/><link rel="icon" href="/favicon.ico"/><script type="c04b242588d3f6c5ed0dd3ff-text/javascript">document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><style id="ky-switch">
html,body{background-color:var(--color-accent-200) !important;}
[class*="f1f0ed"]{color:var(--ky-btntext,#000) !important;}
input,textarea{color:var(--color-foreground) !important;background:transparent !important;}
input::placeholder,textarea::placeholder{color:var(--color-secondary-100) !important;}
::selection{background:var(--color-foreground);color:var(--color-accent-200);}
html.honeykit:not(.nokitfx) h1 svg{filter:url(#goo-tight) url(#roughen);}
html.honeykit:not(.nokitfx) h2{filter:url(#roughen);}
.ky-heroname{display:block;font-family:inherit;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.02em;color:var(--color-foreground);font-size:clamp(56px,13vw,168px);}
html.honeykit:not(.nokitfx) .ky-heroname{filter:url(#goo-tight) url(#roughen);}
#ky-sw{position:fixed;top:14px;right:14px;z-index:99999;font-family:'Space Mono',ui-monospace,monospace;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
#ky-sw-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid rgba(255,255,255,.35);cursor:pointer;overflow:hidden;display:flex;box-shadow:0 4px 14px rgba(0,0,0,.4);padding:0;background:none;}
#ky-sw-btn i{flex:1;display:block;}
#ky-sw-panel{background:rgba(15,15,15,.94);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px;display:none;flex-direction:column;gap:3px;min-width:210px;box-shadow:0 10px 30px rgba(0,0,0,.5);}
#ky-sw.open #ky-sw-panel{display:flex;}
.ky-hd{color:#999;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px 6px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:3px;}
.ky-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;color:#eee;font-size:11px;transition:background .18s;}
.ky-row:hover{background:rgba(255,255,255,.09);}
.ky-row.on{background:rgba(255,255,255,.14);}
.ky-chips{display:flex;border-radius:5px;overflow:hidden;width:34px;height:16px;border:1px solid rgba(255,255,255,.2);flex:0 0 auto;}
.ky-chips i{flex:1;display:block;}
.ky-name{font-weight:700;}
.ky-badge{margin-left:auto;font-size:8px;letter-spacing:.1em;color:#E3AC33;border:1px solid rgba(227,172,51,.5);border-radius:4px;padding:1px 4px;}
.ky-zine{display:flex;align-items:center;justify-content:space-between;padding:8px 9px;margin-top:3px;border-top:1px solid rgba(255,255,255,.1);color:#ccc;font-size:10px;cursor:pointer;}
.ky-zine b{color:#fff;}
.ky-zine .dotpill{width:26px;height:14px;border-radius:9px;background:#3a7d44;position:relative;transition:background .2s;}
.ky-zine .dotpill::after{content:"";position:absolute;top:2px;left:14px;width:10px;height:10px;border-radius:50%;background:#fff;transition:left .2s;}
#ky-sw.nofx .ky-zine .dotpill{background:#555;}
#ky-sw.nofx .ky-zine .dotpill::after{left:2px;}
</style></head><body class="
          font-montrealMono     
          __variable_a8863e
          __variable_c4ef81
          __variable_f367f3
          antialiased
        "><div class="fixed top-0 left-0 z-[15] flex h-screen w-screen bg-secondary-400 " style="transform:none"><svg class="absolute top-0 w-full h-full" viewBox="0 0 926 1000" preserveAspectRatio="none" style="height:calc(100% + 300px)"><path class="fill-secondary-400" d="M0 0 L926 0 L926 1000 Q463 730 0 1000 L0 0"></path></svg></div><header class="absolute top-0 z-40 w-full"><div class=" section-padding-x mt-[var(--space-md)] flex flex-row items-start justify-between gap-x-[var(--gap-fluid)] lg:grid lg:grid-cols-12 lg:items-center "><div class="col-span-8 flex flex-col items-start gap-x-[var(--space-2xl)] gap-y-[var(--space-3xs)] lg:flex-row lg:items-center"><span class=" block w-fit max-w-[14ch] text-balance font-medium leading-snug text-[var(--color-secondary-100)] text-[length:var(--text-base)] sm:max-w-max md:text-[length:var(--text-base-small)] 2xl:text-[length:var(--text-base)] "><div class="transition-all duration-500 ease-in transform opacity-0 ">Web Developer &amp; Designer</div></span></div><nav class="col-span-4 flex justify-end text-[length:var(--text-base)] md:text-[length:var(--text-base-small)] 2xl:text-[length:var(--text-base)] "><ul class=" m-0 flex flex-col items-start text-[var(--color-secondary-100)] gap-y-[var(--space-3xs)] md:flex-row md:items-center md:gap-x-[var(--space-2xs)] md:gap-y-0 font-medium  "><div class="transition-all duration-500 ease-in transform opacity-0 "><li class="flex leading-normal  md:leading-snug"><a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none" href="/#Services"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Services</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Services</span></a></li></div><div class="transition-all duration-500 ease-in transform opacity-0 "><li class="flex leading-normal  md:leading-snug"><a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none" href="/#Works"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Works</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Works</span></a></li></div><div class="transition-all duration-500 ease-in transform opacity-0 "><li class="flex leading-normal  md:leading-snug"><a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none" href="/#About"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">About</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">About</span></a></li></div><div class="transition-all duration-500 ease-in transform opacity-0 "><li class="flex leading-normal  md:leading-snug"><a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none" href="/#Contact"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Contact</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Contact</span></a></li></div></ul></nav></div></header><section class="mb-[-100svh] py-0 "><div class="section-padding-equal sticky top-0 flex h-svh items-end"><div class="relative flex w-full flex-col md:gap-y-[var(--space-lg)] "><h1 class="text-[length:var(--text-h1)] overflow-clip"><svg width="1430" height="163" viewBox="0 0 1430 163" class="hidden h-full w-full md:block" xmlns="http://www.w3.org/2000/svg" style="opacity:0"><path d="M0.169983 160V138.53L89.44 15.586V24.852H0.169983V0.669983H117.238V21.914L27.742 144.858V135.818H120.176V160H0.169983Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path><path d="M200.27 162.26C177.519 162.26 160.569 156.61 149.42 145.31C138.421 133.859 132.922 116.985 132.922 94.686V0.669983H162.076V94.46C162.076 108.623 165.089 119.32 171.116 126.552C177.293 133.784 187.011 137.4 200.27 137.4C212.926 137.4 222.418 133.784 228.746 126.552C235.225 119.32 238.464 108.623 238.464 94.46V0.669983H267.166V94.686C267.166 116.985 261.516 133.859 250.216 145.31C239.067 156.61 222.418 162.26 200.27 162.26Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path><path d="M289.819 160V0.669983H311.741L404.175 120.224H398.299V0.669983H425.419V160H403.497L311.289 40.446H316.939V160H289.819Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path><path d="M449.123 160V0.669983H556.473V23.496H477.147V67.566H551.275V90.618H477.147V136.948H556.473V160H449.123Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path><path d="M572.231 160V0.669983H630.087C648.317 0.669983 663.685 3.83398 676.191 10.162C688.847 16.3393 698.414 25.3793 704.893 37.282C711.371 49.034 714.611 63.3473 714.611 80.222C714.611 96.946 711.371 111.259 704.893 123.162C698.414 135.065 688.847 144.18 676.191 150.508C663.685 156.836 648.317 160 630.087 160H572.231ZM601.385 135.818H628.279C647.564 135.818 661.877 131.223 671.219 122.032C680.56 112.841 685.231 98.9047 685.231 80.222C685.231 61.3887 680.56 47.452 671.219 38.412C661.877 29.2213 647.564 24.626 628.279 24.626H601.385V135.818Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path><path d="M766.169 160L838.263 0.669983H862.671L935.669 160H906.063L886.627 115.252L898.379 123.162H802.781L814.985 115.252L795.549 160H766.169ZM850.241 31.858L818.375 107.342L812.499 100.336H888.435L883.689 107.342L851.145 31.858H850.241Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path><path d="M924.369 160L996.463 0.669983H1020.87L1093.87 160H1064.26L1044.83 115.252L1056.58 123.162H960.981L973.185 115.252L953.749 160H924.369ZM1008.44 31.858L976.575 107.342L970.699 100.336H1046.63L1041.89 107.342L1009.34 31.858H1008.44Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path><path d="M1100.2 160V0.669983H1129.35V135.366H1204.38V160H1100.2Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path><path d="M1215.36 160V0.669983H1244.51V160H1215.36Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path><path d="M1268.51 160V0.669983H1294.05L1352.58 132.428H1345.58L1404.11 0.669983H1429.42V160H1402.98V41.802H1411.12L1357.55 160H1340.15L1286.59 41.802H1294.95V160H1268.51Z" fill="currentColor" style="transform:translateY(163px);transform-origin:50% 50%;transform-box:fill-box"></path></svg><span class="flex flex-col text-[length:var(--text-heading-display)] font-semibold uppercase leading-[80%] tracking-[var(--tracking-heading)] text-[var(--color-secondary-400)] md:hidden"><div class="overflow-hidden"><span class="" style="opacity:0"><span class="inline-block" style="opacity:0;transform:translateY(100%)">Z</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">U</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">N</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">D</span></span></div><div class="overflow-hidden"><span class="" style="opacity:0"><span class="inline-block" style="opacity:0;transform:translateY(100%)">A</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">A</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">L</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">I</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">M</span></span></div></span></h1><div class="relative grid w-full grid-cols-12 justify-between gap-x-[var(--gap-fluid)] gap-y-[var(--space-md)]"><div class="col-span-12 flex flex-col justify-between gap-y-[var(--space-2xl)] pt-[var(--space-sm)] md:col-span-4 md:gap-y-[var(--space-md)]"><div class="grid-gap flex flex-col gap-[var(--space-md)] md:gap-y-[var(--space-xl)]"><div class="hidden overflow-clip md:block"><span class="block" style="opacity:0"><svg stroke="currentColor" fill="none" stroke-width="1.25" viewBox="6 6 12 12" stroke-linecap="round" stroke-linejoin="round" class="m-0 size-4 p-0 md:size-6" style="color:#8C8C73" xmlns="http://www.w3.org/2000/svg"><line x1="7" y1="7" x2="17" y2="17"></line><polyline points="17 7 17 17 7 17"></polyline></svg></span></div><div class="flex flex-col gap-y-[var(--space-sm)] md:gap-y-[var(--space-md)]"><div class="w-full max-w-[32ch] text-balance text-[length:var(--text-base)] font-medium leading-snug text-[var(--color-secondary-100)] xl:text-[length:var(--text-base-large)] 3xl:text-[length:var(--text-heading-body)]"><div class="overflow-hidden"><span class="break-words"><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">I</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">build</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">fast,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">modern</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">websites</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">that</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">help</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">businesses</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">grow,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">available</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">for</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">freelance</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">projects</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">worldwide.</span></span></div></div><div class="overflow-clip"><div class="" style="opacity:0;transform:translateY(100px)"><a href="#Contact"><button class="group pointer-events-auto relative flex h-fit w-fit items-center justify-center overflow-hidden rounded-full bg-[var(--color-secondary-300)] px-[var(--space-md)] sm:py-[var(--space-sm)] py-[var(--space-xs)] font-bold uppercase tracking-wide text-[#f1f0ed] sm:text-[length:var(--text-base)] text-[length:var(--text-base-small)]"><span class="absolute inset-0 z-10 block overflow-hidden"><span class="block h-full w-full translate-y-full rounded-t-[15rem] bg-[var(--color-accent-600)] transition-all duration-500 ease-[cubic-bezier(0.77,0,0.175,1)] sm:group-hover:translate-y-0 sm:group-hover:rounded-none"></span></span><span class="relative z-20 block overflow-hidden transition-all"><span class="block after:absolute after:left-0 after:block after:translate-y-0 after:transition-all after:duration-500 after:ease-[cubic-bezier(0.77,0,0.175,1)] after:content-[attr(data-after)] sm:group-hover:after:-translate-y-full" data-after="CONTACT ↗"><span class="flex transition-all duration-500 ease-[cubic-bezier(0.77,0,0.175,1)] sm:group-hover:-translate-y-full">CONTACT ↗</span></span></span></button></a></div></div></div></div></div><div class="col-span-4 flex flex-col items-start md:items-center"><div class="flex h-fit w-fit flex-col items-center justify-center gap-y-[var(--space-2xs)] overflow-hidden rounded-md"><div class="pointer-events-none h-[15vh] max-w-lg rounded-lg md:h-[50vh]" style="clip-path:inset(0 0 100% 0);opacity:0;scale:1.3"><img alt="Just an Image." width="1536" height="2040" decoding="async" data-nimg="1" class="h-full w-full object-cover object-center grayscale" style="color:transparent" src="/1.webp"/></div></div></div><div class="end-1 col-span-8 flex w-full flex-col items-end justify-end md:col-span-4"><div class="overflow-clip"><span class="block max-w-[15ch] text-right font-mono text-[length:var(--text-base-small)] font-medium uppercase leading-snug tracking-[var(--tracking-mono)] text-[--color-secondary-100] md:max-w-max 3xl:text-[length:var(--text-base)]"><div class="overflow-hidden"><span class=""><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">Available</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">for</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">work</span></span></div></span></div><div class="overflow-clip"><span class="block text-[length:var(--text-heading-2)] font-semibold uppercase leading-none tracking-[var(--tracking-heading)] text-[var(--color-secondary-300)] sm:text-[length:var(--text-heading-1--alt)] 3xl:text-[length:var(--text-heading-1)]"><div class="overflow-hidden"><span class=""><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">Feb&#x27;26</span></span></div></span></div></div></div></div></div><div class="h-svh"></div></section><div class="relative z-[10] min-h-screen w-full overflow-x-clip"><section id="Services"><div class="relative"><button class="fixed top-9 right-8 z-[99999999] p-3 bg-[var(--color-accent-400)] rounded-full shadow-lg" style="cursor:pointer;opacity:0;transform:scale(0)"><svg width="35" height="35" viewBox="0 0 35 35"><line x1="2" y1="13.5" x2="33" y2="13.5" stroke="black" stroke-width="2" stroke-linecap="round" style="transform-origin:17.5px 17.5px"></line><line x1="2" y1="21.5" x2="33" y2="21.5" stroke="black" stroke-width="2" stroke-linecap="round" style="transform-origin:17.5px 17.5px"></line></svg></button></div><div class="relative z-20 min-h-screen w-full overflow-x-clip"><section class="section-padding rounded-t-3xl bg-[var(--color-secondary-400)] text-[var(--color-text-bg)]"><div class="relative flex w-full flex-col gap-y-[var(--space-lg)] md:gap-y-[var(--space-2xl)]"><h1 class="cs2:text-[length:var(--text-h1)] section-heading col-span-6 max-w-[18ch] text-accent-400"><div class="overflow-hidden"><span class="" style="opacity:0"><span class="inline-block" style="opacity:0;transform:translateY(100%)">W</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">h</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">a</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">t</span><span class="inline-block" style="opacity:0;transform:translateY(100%)"> </span><span class="inline-block" style="opacity:0;transform:translateY(100%)">I</span><span class="inline-block" style="opacity:0;transform:translateY(100%)"> </span><span class="inline-block" style="opacity:0;transform:translateY(100%)">D</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">o</span><span class="inline-block" style="opacity:0;transform:translateY(100%)"> </span><span class="inline-block" style="opacity:0;transform:translateY(100%)">/</span></span></div></h1><div class="flex grid-cols-12 gap-x-[var(--gap-fluid)] md:grid"><div class="col-span-7 flex flex-col gap-x-[var(--space-xl)] gap-y-[var(--space-2xs)] sm:flex-row md:col-start-6"><span class="flex h-full font-medium uppercase text-nowrap text-[var(--color-secondary-75)] text-[16px]">(Services)</span><div class="w-full max-w-[35ch] text-balance text-[length:var(--text-base-large)] font-medium leading-base text-[var(--color-secondary-50)]"><div class="overflow-hidden"><span class=""><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">I</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">specialize</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">in</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">building</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">fast,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">reliable,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">and</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">user-friendly</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">full-stack</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">web</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">applications.</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">I</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">help</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">small</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">businesses</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">and</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">startups</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">turn</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">ideas</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">into</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">high-quality</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">websites</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">and</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">products</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">that</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">actually</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">work</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">and</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">scale.</span></span></div></div></div></div></div><div class="w-full pt-[var(--space-lg)]"><div class="mt-12 gap-y-16 flex flex-col justify-between bg-[var(--color-secondary-400)]"><div class="sticky border-t border-t-[var(--color-secondary-300)] bg-[var(--color-secondary-400)] mb-[21.5em] c324:mb-[23em] c343:mb-[23.5em] c358:mb-[25em] c360:mb-[23em] c370:mb-[21em] cs3:mb-[19em]  c387:mb-[19.2em] cs5:mb-[18.2em] cs4:mb-[18em] sm:mb-[19em] md:mb-[19em]  cs1:mb-[18.5em] lg:mb-[20.1em]" style="top:20vh"><div class="flex grid-cols-12 items-center justify-start gap-x-[var(--space-xs)] text-left text-[length:var(--text-heading-2)] font-semibold text-[var(--color-accent-400)] md:grid md:justify-between md:gap-x-[var(--gap-fluid)]"><span class="col-span-2">(01)</span><h3 class="col-span-8 col-start-6 py-[var(--space-md)] 2xl:py-[var(--space-sm)]">Full-Stack Development<!-- --> </h3></div><div class="grid-gap relative flex min-h-[30vh] flex-col place-items-start pt-[var(--space-3xs)] md:grid md:min-h-[40vh] md:grid-cols-12"><div class="col-span-7 col-start-6 flex w-full flex-col gap-y-[var(--space-sm)] pt-[var(--space-sm)] text-[length:var(--text-heading-4)]"><p class="max-w-[40ch] text-balance text-[length:var(--text-base)] font-medium text-[var(--color-secondary-50)]">From frontend interactions to backend APIs, I build complete web solutions. I work with modern stacks to deliver apps that are scalable, maintainable, and ready for real-world users.<!-- --> </p><div class="flex flex-col divide-y divide-[var(--color-secondary-200)]"><span class=" flex items-start gap-x-[var(--space-sm)] py-[var(--space-3xs)] font-bold text-[var(--color-accent-500)] xl:gap-x-[var(--space-md)] xl:py-[var(--space-2xs)] text-[length:var(--text-heading-4)]"><span class="font-mono text-[length:var(--text-base)] font-medium leading-[200%] text-[var(--color-secondary-75)]">0<!-- -->1</span>React, Node.js, Express.js<!-- --> </span><span class="flex items-start gap-x-[var(--space-sm)] py-[var(--space-3xs)] font-bold text-[var(--color-accent-500)] xl:gap-x-[var(--space-md)] xl:py-[var(--space-2xs)]"><span class="font-mono text-[length:var(--text-base)] font-medium leading-[200%] text-[var(--color-secondary-75)]">0<!-- -->2</span>REST APIs, Firebase, Docker</span><span class="flex items-start gap-x-[var(--space-sm)] py-[var(--space-3xs)] font-bold text-[var(--color-accent-500)] xl:gap-x-[var(--space-md)] xl:py-[var(--space-2xs)]"><span class="font-mono text-[length:var(--text-base)] font-medium leading-[200%] text-[var(--color-secondary-75)]">0<!-- -->3</span>Git, GitHub, Postman</span></div></div></div></div><div class="sticky border-t border-t-[var(--color-secondary-300)]  bg-[var(--color-secondary-400)] mb-[15.5em] c343:mb-[17.5em] c358:mb-[16.5em] c360:mb-[15em] c370:mb-[16em] cs3:mb-[13.1em] c387:mb-[13em] cs5:mb-[13em]  cs4:mb-[13em] cs2:mb-[13.2em] sm:mb-[13em] md:mb-[13.5em] cs1:mb-[13em]  lg:mb-[14em] top-[calc(20vh+7em)] cs2:top-[calc(20vh+7em)] sm:top-[calc(20vh+6em)] md:top-[calc(20vh+8em)] cs1:top-[calc(20vh+6em)] lg:top-[calc(20vh+6em)]"><div class="flex grid-cols-12 items-center justify-start gap-x-[var(--space-xs)] text-left text-[length:var(--text-heading-2)] font-semibold text-[var(--color-accent-400)] md:grid md:justify-between md:gap-x-[var(--gap-fluid)]"><span class="col-span-2">(02)</span><h3 class="col-span-8 col-start-6 py-[var(--space-md)] 2xl:py-[var(--space-sm)]">UI/UX &amp; Frontend</h3></div><div class="grid-gap relative flex min-h-[30vh] flex-col place-items-start pt-[var(--space-3xs)] md:grid md:min-h-[40vh] md:grid-cols-12"><div class="col-span-7 col-start-6 flex w-full flex-col gap-y-[var(--space-sm)] pt-[var(--space-sm)] text-[length:var(--text-heading-4)]"><p class="max-w-[40ch] text-balance text-[length:var(--text-base)] font-medium text-[var(--color-secondary-50)]">Good design feels effortless. I design and develop responsive, intuitive interfaces that work smoothly across devices, with a strong focus on clarity, accessibility, and performance.</p><div class="flex flex-col divide-y divide-[var(--color-secondary-200)]"><span class=" flex items-start gap-x-[var(--space-sm)] py-[var(--space-3xs)] font-bold text-[var(--color-accent-500)] xl:gap-x-[var(--space-md)] xl:py-[var(--space-2xs)] text-[length:var(--text-heading-4)]"><span class="font-mono text-[length:var(--text-base)] font-medium leading-[200%] text-[var(--color-secondary-75)]">0<!-- -->1</span>NextJs, TailwindCSS, GSAP</span><span class="flex items-start gap-x-[var(--space-sm)] py-[var(--space-3xs)] font-bold text-[var(--color-accent-500)] xl:gap-x-[var(--space-md)] xl:py-[var(--space-2xs)]"><span class="font-mono text-[length:var(--text-base)] font-medium leading-[200%] text-[var(--color-secondary-75)]">0<!-- -->2</span>Figma → Pixel-perfect code</span><span class="flex items-start gap-x-[var(--space-sm)] py-[var(--space-3xs)] font-bold text-[var(--color-accent-500)] xl:gap-x-[var(--space-md)] xl:py-[var(--space-2xs)]"><span class="font-mono text-[length:var(--text-base)] font-medium leading-[200%] text-[var(--color-secondary-75)]">0<!-- -->3</span>HTML, CSS, JavaScript</span></div></div></div></div><div class="sticky border-t border-t-[var(--color-secondary-300)] bg-[var(--color-secondary-400)] mb-[7.5em] cs1:mb-[7em] lg:mb-[8em] top:calc(20vh + 16em)"><div class="flex grid-cols-12 items-center justify-start gap-x-[var(--space-xs)] text-left text-[length:var(--text-heading-2)] font-semibold text-[var(--color-accent-400)] md:grid md:justify-between md:gap-x-[var(--gap-fluid)]"><span class="col-span-2">(03)</span><h3 class="col-span-8 col-start-6 py-[var(--space-md)] 2xl:py-[var(--space-sm)]">Optimization</h3></div><div class="grid-gap relative flex min-h-[30vh] flex-col place-items-start pt-[var(--space-3xs)] md:grid md:min-h-[40vh] md:grid-cols-12"><div class="col-span-7 col-start-6 flex w-full flex-col gap-y-[var(--space-sm)] pt-[var(--space-sm)] text-[length:var(--text-heading-4)]"><p class="max-w-[40ch] text-balance text-[length:var(--text-base)] font-medium text-[var(--color-secondary-50)]">I focus on building systems that stay reliable as things scale. From handling data efficiently to designing clean architecture, I apply core computer science principles to keep applications fast, stable, and future-ready.<!-- --> </p><div class="flex flex-col divide-y divide-[var(--color-secondary-200)]"><span class=" flex items-start gap-x-[var(--space-sm)] py-[var(--space-3xs)] font-bold text-[var(--color-accent-500)] xl:gap-x-[var(--space-md)] xl:py-[var(--space-2xs)] text-[length:var(--text-heading-4)]"><span class="font-mono text-[length:var(--text-base)] font-medium leading-[200%] text-[var(--color-secondary-75)]">0<!-- -->1</span>Data Structures &amp; Algorithms</span><span class="flex items-start gap-x-[var(--space-sm)] py-[var(--space-3xs)] font-bold text-[var(--color-accent-500)] xl:gap-x-[var(--space-md)] xl:py-[var(--space-2xs)]"><span class="font-mono text-[length:var(--text-base)] font-medium leading-[200%] text-[var(--color-secondary-75)]">0<!-- -->2</span>DBMS, OOP, OS Fundamentals</span><span class="flex items-start gap-x-[var(--space-sm)] py-[var(--space-3xs)] font-bold text-[var(--color-accent-500)] xl:gap-x-[var(--space-md)] xl:py-[var(--space-2xs)]"><span class="font-mono text-[length:var(--text-base)] font-medium leading-[200%] text-[var(--color-secondary-75)]">0<!-- -->3</span>Scalable systems &amp; data pipelines</span></div></div></div></div></div></div></section></div></section><section id="Works"><div class="section-padding bg-[var(--color-secondary-400)]"><div class="flex flex-col gap-y-[var(--space-lg)] md:gap-y-[var(--space-2xl)]"><h1 class="section-heading relative text-[var(--color-accent-400)]"><div class="overflow-hidden"><span class="" style="opacity:0"><span class="inline-block" style="opacity:0;transform:translateY(100%)">S</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">L</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">C</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">T</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">D</span><span class="inline-block" style="opacity:0;transform:translateY(100%)"> </span><span class="inline-block" style="opacity:0;transform:translateY(100%)">W</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">O</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">R</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">K</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">S</span><span class="inline-block" style="opacity:0;transform:translateY(100%)"> </span><span class="inline-block" style="opacity:0;transform:translateY(100%)">/</span></span></div></h1><div class="grid-gap flex grid-cols-12 sm:justify-end lg:grid"><div class="col-span-7 col-start-1 flex flex-col gap-x-[var(--space-xl)] gap-y-[var(--space-2xs)] sm:col-start-6 sm:flex-row"><span class="flex h-full font-medium uppercase text-nowrap text-[var(--color-secondary-75)]">(PROJECTS)</span><div class="w-full max-w-[25ch] text-balance font-medium leading-base text-[var(--color-secondary-50)] text-[length:var(--text-base-large)]"><div class="overflow-hidden"><span class=""><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">Thoughtfully</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">crafted</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">digital</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">experiences</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">that</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">blend</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">utility</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">and</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">aesthetics</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">into</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">something</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">functional,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">memorable,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">and</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">refined.</span></span></div></div></div></div></div><div class="grid-gap grid grid-cols-12 pt-[var(--space-lg)]"><div class="sticky top-12 col-span-5 hidden h-fit w-full overflow-hidden text-[22vw] font-normal leading-[0.8] text-[var(--color-secondary-50)] md:flex"><span class="relative">0</span><div class="relative "><div class="absolute flex h-full w-fit flex-col transition-all duration-1000 ease-in-out" style="transform:translateY(0%)"><span class="inline-block">1</span><span class="inline-block">2</span><span class="inline-block">3</span><span class="inline-block">4</span><span class="inline-block">5</span></div></div></div><aside class="relative col-span-12 flex flex-col gap-y-[var(--space-xl)] md:col-span-7 md:gap-y-[var(--space-2xl)]"><div class="@container " data-index="0"><a href="#" target="_blank" rel="noopener noreferrer"><div class="custom-cursor-area relative mt-5 flex aspect-square items-center justify-center overflow-clip rounded-md bg-[var(--color-secondary-300)] p-[var(--space-md)] sm:p-[var(--space-lg)] xl:p-[var(--space-2xl)]"><div><div style="width:100%;height:100%"></div></div><div class="z-10 aspect-[4/3] w-full overflow-clip rounded-lg"><div class="aspect-[4/3] w-full rounded-lg bg-gray-100 overflow-hidden"></div></div></div><div class="flex flex-col justify-between gap-y-[var(--space-sm)] pt-[var(--space-xs)] lg:flex-row"><div class="flex flex-col gap-y-[var(--space-3xs)]"><span class="font-mono text-var(--text-base-small) font-medium text-[var(--color-secondary-50)]"><h1 class="font-mono cursor-default ">Modern Marketing Website</h1></span><div class="w-fit text-[length:var(--text-heading-3)] font-semibold text-[var(--color-accent-400)]"><h1 class="font-mono cursor-default ">NURA</h1></div></div><div class="flex items-end gap-x-[var(--space-3xs)] tracking-base text-[var(--color-secondary-50)]"><span class="tag">Development</span><span class="tag border-[var(--color-secondary-50)] bg-[var(--color-secondary-50)] text-[var(--color-secondary-400)]">2025</span></div></div></a></div><div class="@container " data-index="1"><a href="#" target="_blank" rel="noopener noreferrer"><div class="custom-cursor-area relative mt-5 flex aspect-square items-center justify-center overflow-clip rounded-md bg-[var(--color-secondary-300)] p-[var(--space-md)] sm:p-[var(--space-lg)] xl:p-[var(--space-2xl)]"><div><div style="width:100%;height:100%"></div></div><div class="z-10 aspect-[4/3] w-full overflow-clip rounded-lg"><div class="aspect-[4/3] w-full rounded-lg bg-gray-100 overflow-hidden"></div></div></div><div class="flex flex-col justify-between gap-y-[var(--space-sm)] pt-[var(--space-xs)] lg:flex-row"><div class="flex flex-col gap-y-[var(--space-3xs)]"><span class="font-mono text-var(--text-base-small) font-medium text-[var(--color-secondary-50)]"><h1 class="font-mono cursor-default ">Full-Stack Recruitment Platform</h1></span><div class="w-fit text-[length:var(--text-heading-3)] font-semibold text-[var(--color-accent-400)]"><h1 class="font-mono cursor-default ">Job Portal</h1></div></div><div class="flex items-end gap-x-[var(--space-3xs)] tracking-base text-[var(--color-secondary-50)]"><span class="tag">Development</span><span class="tag border-[var(--color-secondary-50)] bg-[var(--color-secondary-50)] text-[var(--color-secondary-400)]">2025</span></div></div></a></div><div class="@container " data-index="2"><a href="#" target="_blank" rel="noopener noreferrer"><div class="custom-cursor-area relative mt-5 flex aspect-square items-center justify-center overflow-clip rounded-md bg-[var(--color-secondary-300)] p-[var(--space-md)] sm:p-[var(--space-lg)] xl:p-[var(--space-2xl)]"><div><div style="width:100%;height:100%"></div></div><div class="z-10 aspect-[4/3] w-full overflow-clip rounded-lg"><div class="aspect-[4/3] w-full rounded-lg bg-gray-100 overflow-hidden"></div></div></div><div class="flex flex-col justify-between gap-y-[var(--space-sm)] pt-[var(--space-xs)] lg:flex-row"><div class="flex flex-col gap-y-[var(--space-3xs)]"><span class="font-mono text-var(--text-base-small) font-medium text-[var(--color-secondary-50)]"><h1 class="font-mono cursor-default ">SAAS Platform</h1></span><div class="w-fit text-[length:var(--text-heading-3)] font-semibold text-[var(--color-accent-400)]"><h1 class="font-mono cursor-default ">Productivity SAAS</h1></div></div><div class="flex items-end gap-x-[var(--space-3xs)] tracking-base text-[var(--color-secondary-50)]"><span class="tag">Development</span><span class="tag border-[var(--color-secondary-50)] bg-[var(--color-secondary-50)] text-[var(--color-secondary-400)]">2025</span></div></div></a></div><div class="@container " data-index="3"><a href="#" target="_blank" rel="noopener noreferrer"><div class="custom-cursor-area relative mt-5 flex aspect-square items-center justify-center overflow-clip rounded-md bg-[var(--color-secondary-300)] p-[var(--space-md)] sm:p-[var(--space-lg)] xl:p-[var(--space-2xl)]"><div><div style="width:100%;height:100%"></div></div><div class="z-10 aspect-[4/3] w-full overflow-clip rounded-lg"><div class="aspect-[4/3] w-full rounded-lg bg-gray-100 overflow-hidden"></div></div></div><div class="flex flex-col justify-between gap-y-[var(--space-sm)] pt-[var(--space-xs)] lg:flex-row"><div class="flex flex-col gap-y-[var(--space-3xs)]"><span class="font-mono text-var(--text-base-small) font-medium text-[var(--color-secondary-50)]"><h1 class="font-mono cursor-default ">ML Recommendation Engine</h1></span><div class="w-fit text-[length:var(--text-heading-3)] font-semibold text-[var(--color-accent-400)]"><h1 class="font-mono cursor-default ">CineRec</h1></div></div><div class="flex items-end gap-x-[var(--space-3xs)] tracking-base text-[var(--color-secondary-50)]"><span class="tag">Development</span><span class="tag border-[var(--color-secondary-50)] bg-[var(--color-secondary-50)] text-[var(--color-secondary-400)]">2025</span></div></div></a></div><div class="@container " data-index="4"><a href="#" target="_blank" rel="noopener noreferrer"><div class="custom-cursor-area relative mt-5 flex aspect-square items-center justify-center overflow-clip rounded-md bg-[var(--color-secondary-300)] p-[var(--space-md)] sm:p-[var(--space-lg)] xl:p-[var(--space-2xl)]"><div><div style="width:100%;height:100%"></div></div><div class="z-10 aspect-[4/3] w-full overflow-clip rounded-lg"><div class="aspect-[4/3] w-full rounded-lg bg-gray-100 overflow-hidden"></div></div></div><div class="flex flex-col justify-between gap-y-[var(--space-sm)] pt-[var(--space-xs)] lg:flex-row"><div class="flex flex-col gap-y-[var(--space-3xs)]"><span class="font-mono text-var(--text-base-small) font-medium text-[var(--color-secondary-50)]"><h1 class="font-mono cursor-default ">Code-to-Image Tool</h1></span><div class="w-fit text-[length:var(--text-heading-3)] font-semibold text-[var(--color-accent-400)]"><h1 class="font-mono cursor-default ">Code2Img</h1></div></div><div class="flex items-end gap-x-[var(--space-3xs)] tracking-base text-[var(--color-secondary-50)]"><span class="tag">Development</span><span class="tag border-[var(--color-secondary-50)] bg-[var(--color-secondary-50)] text-[var(--color-secondary-400)]">2025</span></div></div></a></div></aside></div></div></section><section id="About" class="mt-[-2vh]"><div class="z-[999999] relative"><div class="section-padding sm:pb-[10em] pb-[5em] flex flex-col gap-y-[var(--space-lg)] rounded-b-3xl bg-[var(--color-secondary-400)] lg:gap-y-[var(--space-2xl)] md:pt-[15vh]"><div class="custom-grid"><h2 class="section-heading cs5:text-[length:var(--text-h1-display)] text-[length:var(--text-menu)] relative z-30 flex w-full flex-col col-span-full leading-none text-[var(--color-accent-400)] mix-blend-exclusion lg:col-span-8 lg:col-end-7 mt-[1em] mb-[1em] order-2 md:order-1"><span><div class="overflow-hidden"><span class="" style="opacity:0"><span class="inline-block" style="opacity:0;transform:translateY(100%)">D</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">V</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">L</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">O</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">P</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">R</span></span></div></span><span><div class="overflow-hidden"><span class="" style="opacity:0"><span class="inline-block" style="opacity:0;transform:translateY(100%)">D</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">S</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">I</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">G</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">N</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">R</span></span></div></span><span><div class="overflow-hidden"><span class="" style="opacity:0"><span class="inline-block" style="opacity:0;transform:translateY(100%)">C</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">R</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">E</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">A</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">T</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">O</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">R</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">/</span></span></div></span></h2><div class="relative z-0 lg:col-span-6 col-span-full flex  w-full items-center overflow-clip rounded-md  md:items-end order-1 md:order-2"><section class="self-start md:px-6 py-5 c370:px-3 px-0 bg-[var(--color-secondary-400)] text-[var(--color-accent-400)] w-full"><div class="max-w-6xl mx-auto"><h2 class="md:text-[length:var(--text-h1-alt)] text-[length:var(--text-menu)] font-bold mb-8 text-center">Skills</h2><div class="grid grid-cols-3 md:grid-cols-3 c343:gap-1 gap-0 md:gap-5 md:p-5 c370:p-1 p-0"><div class=" c370:p-2 p-0  rounded-2xl shadow-md  hover:shadow-lg transition self-start"><h3 class="hidden md:flex text-xl font-semibold mb-4">Languages &amp; Tools</h3><ul class="space-y-3  md:text-base"><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Python</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Python</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">SQL</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">SQL</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">C++</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">C++</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Java</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Java</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Typescript</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Typescript</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">JavaScript</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">JavaScript</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Git</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Git</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Postman</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Postman</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Docker</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Docker</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Firebase</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Firebase</h1></span></span></div></ul></div><div class=" c370:p-2 p-0  rounded-2xl shadow-md  hover:shadow-lg transition self-start"><h3 class="hidden md:flex text-xl font-semibold mb-4">Frameworks &amp; Libraries</h3><ul class="space-y-3  md:text-base"><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">React</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">React</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Node.js</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Node.js</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Express.js</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Express.js</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Flask</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Flask</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Bootstrap</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Bootstrap</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">jQuery</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">jQuery</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">TailwindCSS</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">TailwindCSS</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Framer Motion</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Framer Motion</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">GSAP</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">GSAP</h1></span></span></div></ul></div><div class=" c370:p-2 p-0  rounded-2xl shadow-md  hover:shadow-lg transition self-start"><h3 class="hidden md:flex text-xl font-semibold mb-4">Core CS Concepts</h3><ul class="space-y-3  md:text-base"><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">DSA</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">DSA</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">DBMS</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">DBMS</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">OOP</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">OOP</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">Operating Systems</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">Operating Systems</h1></span></span></div><div class="flex relative items-start gap-2  text-[var(--color-secondary-50)] c343:text-[length:var(--text-base)] text-[length:var(--text-skill)]"><span class="group relative block h-fit   overflow-hidden font-medium select-none"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full"> <h1 class="font-mono cursor-default ">System Design</h1></span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0"> <h1 class="font-mono cursor-default ">System Design</h1></span></span></div></ul></div></div></div></section></div></div><div class="custom-grid col-span-full gap-y-[var(--space-lg)] lg:gap-y-[var(--space-2xl)]"><div class="pointer-events-none max-h-[30rem] relative z-0 col-span-3 flex aspect-square w-full items-center overflow-clip rounded-md sm:aspect-auto md:items-end"><img alt="Just an Image." width="1536" height="2040" decoding="async" data-nimg="1" class="h-full w-full object-cover object-center" style="color:transparent" src="/1.webp"/></div><div class="col-span-7 col-start-6 flex flex-col gap-y-[var(--space-xl)] lg:gap-y-[var(--space-2xl)]"><div class="relative w-full max-w-[39ch] text-balance text-[length:var(--text-heading-4)] font-medium leading-snug text-[var(--color-accent-400)]"><div class="overflow-hidden"><span class=""><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">I&#x27;m</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">a</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">software</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">engineer</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">driven</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">by</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">a</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">passion</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">for</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">turning</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">ideas</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">into</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">clean,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">intuitive</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">digital</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">experiences.</span></span></div></div><div class="flex flex-col gap-x-[var(--space-xl)] gap-y-[var(--space-sm)] lg:flex-row"><span class="flex h-fit overflow-clip font-mono tracking-[var(--tracking-mono)]"><span class="flex h-full font-medium uppercase text-nowrap text-[var(--color-secondary-50)]"><div class="overflow-hidden"><span class="" style="opacity:0"><span class="inline-block" style="opacity:0;transform:translateY(100%)">(</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">A</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">b</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">o</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">u</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">t</span><span class="inline-block" style="opacity:0;transform:translateY(100%)"> </span><span class="inline-block" style="opacity:0;transform:translateY(100%)">M</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">e</span><span class="inline-block" style="opacity:0;transform:translateY(100%)">)</span></span></div></span></span><div class="flex w-full gap-y-4 max-w-[38ch] flex-col text-balance text-[length:var(--text-base)] font-medium leading-base text-[var(--color-secondary-50)]"><div class="overflow-hidden"><span class=""><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">I’m</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">a</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">full-stack</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">developer</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">who</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">builds</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">fast,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">modern</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">web</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">applications</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">mostly</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">with</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">Next.js</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">and</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">Tailwind</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">CSS</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">because</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">they</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">just</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">work.</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">I</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">work</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">with</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">businesses</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">and</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">startups</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">to</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">turn</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">ideas</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">into</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">reliable,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">user-friendly</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">products</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">built</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">to</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">scale.</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)"></span></span></div><div class="overflow-hidden"><span class=""><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">I&#x27;ve</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">been</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">building</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">websites</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">long</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">enough</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">to</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">have</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">strong</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">opinions</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">about</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">things</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">that</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">don&#x27;t</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">matter</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">to</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">most</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">people,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">like</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">whether</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">a</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">transition</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">should</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">be</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">150ms</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">or</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">200ms.</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">(It&#x27;s</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">150ms,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">btw).</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">Build</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">the</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">thing,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">make</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">it</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">work,</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">make</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">it</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">feel</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">good.</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">That&#x27;s</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">the</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">gig.</span></span></div></div></div></div></div></div></div></section><div class=" section-padding-x translate-y-[-20vh] sm:translate-y-[-80vh] py-[var(--space-lg)] "><div class="relative flex h-full w-full flex-col items-center justify-between rounded-md bg-[linear-gradient(0deg,_#393632,_#080807)] bg-cover  border border-white/10 shadow-lg backdrop-blur-xl p-[var(--space-md)]"><h2 class="max-w-[10ch] text-center text-[length:var(--text-heading-1)] font-semibold uppercase text-[var(--color-accent-400)]"><div class="overflow-hidden"><span class=""><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">Let&#x27;s</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)"></span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)"></span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">Make</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)"></span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">It</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)"></span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)">Happen</span><span class="inline-block pr-2" style="opacity:0;transform:translateY(100%)"></span></span></div></h2><section id="Contact" class="sm:w-[36rem] w-[100%]  mx-auto my-10 px-6 sm:px-10 xl:px-14 py-12 rounded-2xl backdrop-blur-xl bg-[rgba(209,209,199,0.05)] border border-[rgba(255,255,255,0.1)] shadow-[0_4px_30px_rgba(0,0,0,0.1)]"><h2 class="text-center text-[length:var(--text-h4)] font-medium mb-8 text-[var(--color-accent-200)] tracking-tight">Have a project in mind?<!-- --> </h2><form noValidate="" class="space-y-4 gform" method="POST"><input type="text" style="display:none" tabindex="-1" autoComplete="off" name="hp"/><div><input type="text" placeholder="Your name" class="w-full placeholder:font-[400] font-normal text-[length:var(--text-base)] rounded-xl px-4 py-3 bg-white/5 border border-white/10 text-[var(--color-text-bg)] placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-white/20 transition" name="name" value=""/><p class="text-red-400 text-sm mt-1 h-5 transition-all duration-300 opacity-0 invisible"></p></div><div class="relative"><input type="email" placeholder="Your email address" class="w-full placeholder:font-[400]  text-[length:var(--text-base)] font-normal rounded-xl px-4 py-3 bg-white/5 border border-white/10 text-[var(--color-text-bg)] placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-white/20 transition" name="email" value=""/><p class="text-red-400 text-sm mt-1 transition-all duration-300 opacity-0 invisible">Placeholder</p></div><div><textarea name="message" placeholder="Tell me about your business or project" rows="5" required="" class="w-full placeholder:font-[400] font-normal rounded-xl px-4 py-3 bg-white/5 border border-white/10 text-[var(--color-text-bg)] placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-white/20 transition resize-none"></textarea><p class="text-red-400 text-sm mt-1 h-5 transition-all duration-300 opacity-0 invisible"></p></div><button type="submit" class="
    w-full
    px-6 py-3 rounded-xl font-semibold tracking-wide text-[length:var(--text--small)]
    transition-all duration-100

    bg-[var(--color-accent-200)] text-black hover:bg-white active:scale-[0.98] active:shadow-inner
  ">Get a quote</button></form></section></div></div></div><div class="section-padding-equal relative flex flex-col items-center justify-center gap-y-[var(--space-xl)] py-[var(--space-lg)]"><div class="grid-gap grid w-full grid-cols-2 gap-y-[var(--space-md)] text-[length:var(--text-base)] md:grid-cols-12"><div class="flex flex-col md:col-span-6"><h3 class="mb-[var(--space-xs)] flex border-b-[1.5px] border-[var(--color-accent-500)] pb-[var(--space-2xs)] font-bold tracking-base text-[var(--color-secondary-300)]">Menu</h3><ul class="flex flex-col gap-y-[var(--space-3xs)]"><li> <a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none flex w-fit leading-base text-[var(--color-secondary-100)] sm:leading-snug" href="/"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Home</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Home</span></a></li><li> <a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none flex w-fit leading-base text-[var(--color-secondary-100)] sm:leading-snug" href="#Services"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Services</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Services</span></a></li><li> <a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none flex w-fit leading-base text-[var(--color-secondary-100)] sm:leading-snug" href="#Works"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Works</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Works</span></a></li><li> <a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none flex w-fit leading-base text-[var(--color-secondary-100)] sm:leading-snug" href="#About"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">About</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">About</span></a></li><li> <a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none flex w-fit leading-base text-[var(--color-secondary-100)] sm:leading-snug" href="#Contact"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Contact</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Contact</span></a></li></ul></div><div class="flex flex-col md:col-span-3"><h3 class="mb-[var(--space-xs)] flex border-b-[1.5px] border-[var(--color-accent-500)] pb-[var(--space-2xs)] font-bold tracking-base text-[var(--color-secondary-300)]">Socials</h3><ul class="flex flex-col gap-y-[var(--space-3xs)]"><li> <a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none flex w-fit leading-base text-[var(--color-secondary-100)] sm:leading-snug" target="_blank" rel="noopener noreferrer" href="#"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Linkedin</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Linkedin</span></a></li><li> <a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none flex w-fit leading-base text-[var(--color-secondary-100)] sm:leading-snug" target="_blank" rel="noopener noreferrer" href="#"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Instagram</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Instagram</span></a></li><li> <a class="group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none flex w-fit leading-base text-[var(--color-secondary-100)] sm:leading-snug" target="_blank" rel="noopener noreferrer" href="#"><span class="block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full">Github</span><span aria-hidden="true" class="absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0">Github</span></a></li></ul></div></div><div class="grid-gap flex w-full items-end justify-between md:grid md:grid-cols-12"><span class="flex  font-[500] flex-col text-[length:var(--text-heading-3)]  leading-tight tracking-[var(--tracking-heading)] text-[var(--color-secondary-300)] sm:order-first sm:text-[length:var(--text-heading-3)] md:col-span-6"></span><div class="flex flex-col text-[length:var(--text-base-small)] md:col-span-3"><span class="font-bold uppercase text-[var(--color-secondary-300)]">Local time</span><span class="font-mono font-medium uppercase tracking-[var(--tracking-mono)] text-[var(--color-secondary-100)]"><span class="font-mono font-medium uppercase tracking-[var(--tracking-mono)] text-[var(--color-secondary-100)]">Loading...</span></span></div><div class="hidden h-fit w-full justify-end md:col-span-3 md:flex"><div class="w-fit" style="transform:none"> <button aria-label="Scroll to top" class="group relative hidden w-fit flex-col items-center justify-center overflow-hidden rounded-full bg-[var(--color-accent-500)] p-[var(--space-lg)] duration-1000 ease-expo hover:scale-90 md:flex"><span class="absolute flex transition-all duration-500 ease-in-out-cubic group-hover:-translate-y-20"><img alt="Scroll to top arrow" loading="lazy" width="26" height="28" decoding="async" data-nimg="1" style="color:transparent" src="/_next/static/media/arrow.d4e31afc.svg"/></span><span class="absolute flex translate-y-20 transition-all duration-500 ease-in-out-cubic group-hover:translate-y-0"><img alt="Scroll to top arrow" loading="lazy" width="26" height="28" decoding="async" data-nimg="1" style="color:transparent" src="/_next/static/media/arrow.d4e31afc.svg"/></span></button></div></div></div></div><!--$--><!--/$--><!--$--><!--/$--><script src="/_next/static/chunks/webpack-6b761421cff961fb.js" async="" type="c04b242588d3f6c5ed0dd3ff-text/javascript"></script><script type="c04b242588d3f6c5ed0dd3ff-text/javascript">(self.__next_f=self.__next_f||[]).push([0])</script><script type="c04b242588d3f6c5ed0dd3ff-text/javascript">self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[8815,[\"177\",\"static/chunks/app/layout-9b1080425e8fe3f9.js\"],\"default\"]\n3:I[7555,[],\"\"]\n4:I[1295,[],\"\"]\n5:I[6874,[\"592\",\"static/chunks/c15bf2b0-d67976aba37a88f8.js\",\"874\",\"static/chunks/874-8179e1aff5ec9a87.js\",\"6\",\"static/chunks/6-37ca770f622b4e06.js\",\"974\",\"static/chunks/app/page-krypto0000000001.js\"],\"\"]\n6:I[9960,[\"874\",\"static/chunks/874-8179e1aff5ec9a87.js\",\"345\",\"static/chunks/app/not-found-3162d3e97dac626c.js\"],\"default\"]\n7:I[1966,[\"592\",\"static/chunks/c15bf2b0-d67976aba37a88f8.js\",\"874\",\"static/chunks/874-8179e1aff5ec9a87.js\",\"6\",\"static/chunks/6-37ca770f622b4e06.js\",\"974\",\"static/chunks/app/page-krypto0000000001.js\"],\"default\"]\n8:I[6929,[\"592\",\"static/chunks/c15bf2b0-d67976aba37a88f8.js\",\"874\",\"static/chunks/874-8179e1aff5ec9a87.js\",\"6\",\"static/chunks/6-37ca770f622b4e06.js\",\"974\",\"static/chunks/app/page-krypto0000000001.js\"],\"default\"]\n9:I[8922,[\"592\",\"static/chunks/c15bf2b0-d67976aba37a88f8.js\",\"874\",\"static/chunks/874-8179e1aff5ec9a87.js\",\"6\",\"static/chunks/6-37ca770f622b4e06.js\",\"974\",\"static/chunks/app/page-krypto0000000001.js\"],\"default\"]\na:I[9605,[\"592\",\"static/chunks/c15bf2b0-d67976aba37a88f8.js\",\"874\",\"static/chunks/874-8179e1aff5ec9a87.js\",\"6\",\"static/chunks/6-37ca770f622b4e06.js\",\"974\",\"static/chunks/app/page-krypto0000000001.js\"],\"default\"]\nb:I[9665,[],\"MetadataBoundary\"]\nd:I[9665,[],\"OutletBoundary\"]\n10:I[4911,[],\"AsyncMetadataOutlet\"]\n12:I[9665,[],\"ViewportBoundary\"]\n14:I[6614,[],\"\"]\n:HL[\"/_next/static/media/028c0d39d2e8f589-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/5b01f339abf2f1a5.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/772d87814c6d4363-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/77884a8189c63c95-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/a02a323226559df3-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\""])</script><script type="c04b242588d3f6c5ed0dd3ff-text/javascript">self.__next_f.push([1,"}]\n:HL[\"/_next/static/css/a389311a49d4f5ee.css\",\"style\"]\n"])</script><script type="c04b242588d3f6c5ed0dd3ff-text/javascript">self.__next_f.push([1,"0:{\"P\":null,\"b\":\"3NFJVB3YitrIiZqJ0Bx5h\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a389311a49d4f5ee.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__variable_fb8f2c __variable_f910ec\",\"children\":[\"$\",\"body\",null,{\"className\":\"\\n          font-montrealMono     \\n          __variable_a8863e\\n          __variable_c4ef81\\n          __variable_f367f3\\n          antialiased\\n        \",\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen flex flex-col items-center justify-center bg-white text-center px-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-5xl font-bold text-gray-900 mb-4\",\"children\":\"404\"}],[\"$\",\"p\",null,{\"className\":\"text-xl text-gray-700 mb-6\",\"children\":\"Oops! The page you're looking for doesn't exist.\"}],[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[\"$\",\"$L6\",null,{\"text\":\"Go Home\"}]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"$L7\",null,{}],[\"$\",\"header\",null,{\"className\":\"absolute top-0 z-40 w-full\",\"children\":[\"$\",\"div\",null,{\"className\":\" section-padding-x mt-[var(--space-md)] flex flex-row items-start justify-between gap-x-[var(--gap-fluid)] lg:grid lg:grid-cols-12 lg:items-center \",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-span-8 flex flex-col items-start gap-x-[var(--space-2xl)] gap-y-[var(--space-3xs)] lg:flex-row lg:items-center\",\"children\":[\"$\",\"span\",null,{\"className\":\" block w-fit max-w-[14ch] text-balance font-medium leading-snug text-[var(--color-secondary-100)] text-[length:var(--text-base)] sm:max-w-max md:text-[length:var(--text-base-small)] 2xl:text-[length:var(--text-base)] \",\"children\":[\"$\",\"$L8\",null,{\"delay\":1500,\"children\":\"Web Developer \u0026 Designer\"}]}]}],[\"$\",\"nav\",null,{\"className\":\"col-span-4 flex justify-end text-[length:var(--text-base)] md:text-[length:var(--text-base-small)] 2xl:text-[length:var(--text-base)] \",\"children\":[\"$\",\"ul\",null,{\"className\":\" m-0 flex flex-col items-start text-[var(--color-secondary-100)] gap-y-[var(--space-3xs)] md:flex-row md:items-center md:gap-x-[var(--space-2xs)] md:gap-y-0 font-medium  \",\"children\":[[\"$\",\"$L8\",\"Services\",{\"delay\":1500,\"children\":[\"$\",\"li\",\"Services\",{\"className\":\"flex leading-normal  md:leading-snug\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/#Services\",\"className\":\"group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full\",\"children\":\"Services\"}],[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0\",\"children\":\"Services\"}]]}]}]}],[\"$\",\"$L8\",\"Works\",{\"delay\":1500,\"children\":[\"$\",\"li\",\"Works\",{\"className\":\"flex leading-normal  md:leading-snug\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/#Works\",\"className\":\"group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full\",\"children\":\"Works\"}],[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0\",\"children\":\"Works\"}]]}]}]}],[\"$\",\"$L8\",\"About\",{\"delay\":1500,\"children\":[\"$\",\"li\",\"About\",{\"className\":\"flex leading-normal  md:leading-snug\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/#About\",\"className\":\"group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full\",\"children\":\"About\"}],[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0\",\"children\":\"About\"}]]}]}]}],[\"$\",\"$L8\",\"Contact\",{\"delay\":1500,\"children\":[\"$\",\"li\",\"Contact\",{\"className\":\"flex leading-normal  md:leading-snug\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/#Contact\",\"className\":\"group relative block h-fit  overflow-hidden font-medium cursor-pointer select-none\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block w-full transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-0 group-hover:-translate-y-full\",\"children\":\"Contact\"}],[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute top-0 left-0 w-full block transition-transform duration-[0.4s] ease-[cubic-bezier(.51,.92,.24,1.15)] translate-y-full group-hover:translate-y-0\",\"children\":\"Contact\"}]]}]}]}]]}]}]]}]}],[\"$\",\"$L9\",null,{}],[\"$\",\"$La\",null,{}]],[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],null,[\"$\",\"$Ld\",null,{\"children\":[\"$Le\",\"$Lf\",[\"$\",\"$L10\",null,{\"promise\":\"$@11\"}]]}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"3jVu_mJhq6HmGh8jpn1pN\",{\"children\":[[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$14\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script type="c04b242588d3f6c5ed0dd3ff-text/javascript">self.__next_f.push([1,"15:\"$Sreact.suspense\"\n16:I[4911,[],\"AsyncMetadata\"]\nc:[\"$\",\"$15\",null,{\"fallback\":null,\"children\":[\"$\",\"$L16\",null,{\"promise\":\"$@17\"}]}]\n"])</script><script type="c04b242588d3f6c5ed0dd3ff-text/javascript">self.__next_f.push([1,"f:null\n"])</script><script type="c04b242588d3f6c5ed0dd3ff-text/javascript">self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#ffffff\"}]]\ne:null\n"])</script><script type="c04b242588d3f6c5ed0dd3ff-text/javascript">self.__next_f.push([1,"17:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"KRYPTO PICO - Full Stack Developer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Portfolio website of KRYPTO PICO showcasing projects, skills, and contact information.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"keywords\",\"content\":\"KRYPTO PICO,Full Stack Developer,Portfolio,Web Developer,React,Next.js\"}],[\"$\",\"meta\",\"3\",{\"name\":\"creator\",\"content\":\"KRYPTO PICO\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"KRYPTO PICO - Full Stack Developer\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"Explore the portfolio of KRYPTO PICO. Full stack projects, web apps, and more.\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:url\",\"content\":\"https://kryptopico.dev\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:site_name\",\"content\":\"KRYPTO PICO Portfolio\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image\",\"content\":\"https://kryptopico.dev/og-image.jpg\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:alt\",\"content\":\"KRYPTO PICO Portfolio\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:creator\",\"content\":\"@KRYPTOPICO\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:title\",\"content\":\"KRYPTO PICO - Full Stack Developer\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:description\",\"content\":\"Full stack projects, personal work, and contact info.\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:image\",\"content\":\"https://kryptopico.dev/og-image.jpg\"}],[\"$\",\"link\",\"18\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}]],\"error\":null,\"digest\":\"$undefined\"}\n11:{\"metadata\":\"$17:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="c04b242588d3f6c5ed0dd3ff-|49" defer></script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/v4513226cdae34746b4dedf0b4dfa099e1781791509496" integrity="sha512-ZE9pZaUXND66v380QUtch/5sE9tPFh2zg45pR2PB0CVkCtOREv2AJKkSidISWkysEuQ0EH8faUU5du78bx87UQ==" data-cf-beacon='{"version":"2024.11.0","token":"85bd9a0f42c24e83945a96002f3ffca9","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
<script id="ky-switch-js" data-cfasync="false">
(function(){
  var THEMES=[
    {n:"Honey & Ink",bg:"#E3AC33",main:"#14110A",side:"#C4901D",body:"#2A2313",surface:"#F7EDD3",btn:"#14110A",btntext:"#E3AC33",kit:true},
    {n:"Noir",       bg:"#000000",main:"#FFDE00",side:"#FF5A1F"},
    {n:"Cobalt",     bg:"#071633",main:"#EAF1FF",side:"#FFC61A"},
    {n:"Lime",       bg:"#08160E",main:"#E8F7DE",side:"#B6F13A"},
    {n:"Ultraviolet",bg:"#140826",main:"#F0E9FF",side:"#E9FF3D"},
    {n:"Ember",      bg:"#180707",main:"#FFE9E2",side:"#FF4D3D"},
    {n:"Paper",      bg:"#F3ECE1",main:"#241C15",side:"#C25A3A"}
  ];
  var CUR=THEMES[0];
  var FILT='<svg width="0" height="0" aria-hidden="true" focusable="false">'
    +'<defs>'
    +'<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="4.5" result="b"><animate attributeName="stdDeviation" values="3.6;5.4;3.6" dur="3.2s" repeatCount="indefinite"/></feGaussianBlur><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10"/></filter>'
    +'<filter id="goo-tight"><feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b"><animate attributeName="stdDeviation" values="3.4;5;3.4" dur="2.8s" repeatCount="indefinite"/></feGaussianBlur><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10"/></filter>'
    +'<filter id="roughen" x="-40%" y="-40%" width="180%" height="180%"><feTurbulence type="turbulence" baseFrequency="0.018 0.026" numOctaves="2" seed="7" result="n"><animate attributeName="baseFrequency" values="0.016 0.024;0.022 0.030;0.016 0.024" dur="7s" repeatCount="indefinite"/></feTurbulence><feDisplacementMap in="SourceGraphic" in2="n" scale="7" xChannelSelector="R" yChannelSelector="G"><animate attributeName="scale" values="5;9;5" dur="5s" repeatCount="indefinite"/></feDisplacementMap></filter>'
    +'</defs></svg>';
  function ensureFilters(){
    if(document.getElementById("goo"))return;
    if(!document.body)return;
    var d=document.createElement("div");d.id="ky-filters";
    d.style.cssText="position:absolute;width:0;height:0;overflow:hidden;pointer-events:none";
    d.innerHTML=FILT;
    document.body.appendChild(d);
  }
  function rebrandHero(){
    // Only the hero if it still renders the old SVG letterforms; the animated
    // text hero is already renamed at the chunk source. Never touch other h1s.
    var h1=document.querySelector("h1");
    if(h1 && h1.querySelector("svg") && !h1.querySelector(".ky-heroname")){
      h1.innerHTML='<span class="ky-heroname">KRYPTO PICO</span>';
    }
    if(document.title.indexOf("KRYPTO PICO")<0)document.title="KRYPTO PICO";
  }
  function mix(a,pa,b){return "color-mix(in srgb, "+a+" "+pa+"%, "+b+")";}
  function apply(t){
    CUR=t;var r=document.documentElement.style;var body=t.body||t.main;
    r.setProperty("--color-accent-200",t.bg);
    r.setProperty("--color-background",t.surface||mix(t.main,6,t.bg));
    r.setProperty("--color-foreground",t.main);
    r.setProperty("--color-secondary-50",mix(body,45,t.bg));
    r.setProperty("--color-secondary-75",mix(body,60,t.bg));
    r.setProperty("--color-secondary-100",mix(body,78,t.bg));
    r.setProperty("--color-secondary-200",mix(body,90,t.bg));
    r.setProperty("--color-secondary-300",t.btn||t.side);
    r.setProperty("--color-secondary-400",mix(t.main,92,t.bg));
    r.setProperty("--color-accent-400",mix(t.main,22,t.bg));
    r.setProperty("--color-accent-500",mix(t.main,32,t.bg));
    r.setProperty("--color-accent-600",t.side);
    r.setProperty("--color-text-bg",mix(body,14,t.bg));
    r.setProperty("--ky-btntext",t.btntext||t.bg);
    if(document.body)document.body.style.backgroundColor=t.bg;
    document.documentElement.classList.toggle("honeykit",!!t.kit);
    var btn=document.getElementById("ky-sw-btn");
    if(btn)btn.innerHTML='<i style="background:'+t.bg+'"></i><i style="background:'+t.main+'"></i><i style="background:'+t.side+'"></i>';
    [].forEach.call(document.querySelectorAll(".ky-row"),function(el,i){el.classList.toggle("on",THEMES[i].n===t.n);});
  }
  function build(){
    ensureFilters();
    rebrandHero();
    if(document.getElementById("ky-sw")){apply(CUR);return;}
    if(!document.body)return;
    var wrap=document.createElement("div");wrap.id="ky-sw";
    var btn=document.createElement("button");btn.id="ky-sw-btn";btn.title="Switch theme";
    var panel=document.createElement("div");panel.id="ky-sw-panel";
    var hd=document.createElement("div");hd.className="ky-hd";hd.textContent="Theme \u00b7 bg / main / side";panel.appendChild(hd);
    THEMES.forEach(function(t){
      var row=document.createElement("div");row.className="ky-row";
      row.innerHTML='<span class="ky-chips"><i style="background:'+t.bg+'"></i><i style="background:'+t.main+'"></i><i style="background:'+t.side+'"></i></span><span class="ky-name">'+t.n+'</span>'+(t.kit?'<span class="ky-badge">KIT</span>':'');
      row.onclick=function(){apply(t);};
      panel.appendChild(row);
    });
    var zine=document.createElement("div");zine.className="ky-zine";
    zine.innerHTML='<span>Liquid <b>type</b> (goo + ink)</span><span class="dotpill"></span>';
    zine.onclick=function(){wrap.classList.toggle("nofx");document.documentElement.classList.toggle("nokitfx");};
    panel.appendChild(zine);
    btn.onclick=function(){wrap.classList.toggle("open");};
    wrap.appendChild(btn);wrap.appendChild(panel);
    document.body.appendChild(wrap);
    apply(CUR);
  }
  function boot(){try{build();}catch(e){}}
  window.addEventListener("load",function(){setTimeout(boot,150);});
  if(document.readyState==="complete")setTimeout(boot,150);
  setInterval(function(){if(!document.getElementById("ky-sw")||!document.getElementById("goo"))boot();rebrandHero();},1200);
})();
</script></body></html>