1<!DOCTYPE html><!--oqAokN6inFTXLCFBee58b--><html lang="en"><head><meta charSet="utf-8"/> 2<!-- This site is hosted on Netlify. Anyone can build and deploy a site 3 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=1b66ac4d-ce4a-460f-9316-8b7389620bde 4 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/profile_image.webp"/><link rel="preload" as="image" href="/blueberry-loom.webp"/><link rel="preload" as="image" href="/nof.webp"/><link rel="preload" as="image" href="/namer-ui.webp"/><link rel="preload" as="image" href="/merucav.webp"/><link rel="preload" as="image" href="/namer-ui-for-vue.webp"/><link rel="preload" as="image" href="/in-browser-file-encrypter.webp"/><link rel="preload" as="image" href="/kerach-tempo.webp"/><link rel="preload" as="image" href="/clandestine.webp"/><link rel="preload" as="image" href="/previews/circular-testimonials.webp"/><link rel="stylesheet" href="/_next/static/chunks/f4617ae43532b494.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/c6b8ee56d6ac0e93.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/49426ea2aee2ba08.js"/>
4<script src="/_next/static/chunks/248cba0fcb3874ed.js" async=""></script>
4<script src="/_next/static/chunks/5997132b61dec430.js" async=""></script>
4<script src="/_next/static/chunks/ef79279d840f3640.js" async=""></script>
4<script src="/_next/static/chunks/turbopack-b7492639c698e0bc.js" async=""></script>
4<script src="/_next/static/chunks/ff1a16fafef87110.js" async=""></script>
4<script src="/_next/static/chunks/247eb132b7f7b574.js" async=""></script>
4<script src="/_next/static/chunks/f4eba6aed985de63.js" async=""></script>
4<script src="/_next/static/chunks/d3d1cda1c13d58f9.js" async=""></script>
4<script src="/_next/static/chunks/14a50d6962d09e5e.js" async=""></script>
4<script src="/_next/static/chunks/2e45e8be44239b42.js" async=""></script>
4<link rel="preload" as="image" href="/previews/project-showcase.webp"/><link rel="preload" as="image" href="/previews/inflected-card.webp"/><link rel="preload" as="image" href="/previews/splashed-push-notifications.webp"/><link rel="preload" as="image" href="/previews/fishy-file-drop.webp"/><link rel="preload" as="image" href="/previews/shamayim-toggle-switch.webp"/><link rel="preload" as="image" href="/previews/bauble-toggle.webp"/><link rel="preload" as="image" href="/previews/login-form.webp"/><link rel="preload" as="image" href="/previews/holographic-card.webp"/><link rel="preload" as="image" href="/midbar.webp"/><link rel="preload" as="image" href="/lantern.webp"/><link rel="preload" as="image" href="/eslms.webp"/><link rel="preload" as="image" href="/react-cryptographic-toolkit.webp"/><link rel="preload" as="image" href="/playground-card-image.webp"/><link rel="preload" as="image" href="/second-playground-card-image.png"/><link rel="preload" as="image" href="/second-playground-card-reveal-image.png"/><link rel="preload" as="image" href="/third-playground-card-image.png"/><link rel="preload" as="image" href="/third-playground-card-reveal-image.png"/><link rel="preload" as="image" href="/Namer.png"/><link rel="preload" as="image" href="/merucav-logo.webp"/><link rel="preload" as="image" href="/contact-card-image.png"/><meta name="next-size-adjust" content=""/><title>Maxim Bortnikov</title><meta name="description" content="Cybersecurity-oriented web developer."/><link rel="icon" href="/profile_image.webp"/>
4<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
4</head><body class="geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased"><div hidden=""><!--$--><!--/$--></div><div dir="ltr"><div class="flex flex-col h-screen w-screen overflow-hidden bg-[var(--background)]"><div class="w-full h-full bg-[var(--background)]" style="opacity:0;filter:blur(6px)"><div class="flex flex-col h-full w-full overflow-hidden bg-[var(--background)] relative"><div id="page-scroll-container" class="flex-grow w-full h-full overflow-y-auto overflow-x-hidden"><div id="home-anchor" style="height:0;margin:0;padding:0"></div><div class="sticky top-0 z-[1000] w-full bg-transparent"><div class="mx-auto w-full" style="max-width:1448px;padding-left:24px;padding-right:24px;transition:max-width 0.5s ease-in-out, padding 0.3s ease-in-out"><div id="nav-wrapper"><nav class="sticky top-0 z-40 w-full bg-transparent" style="transform:translateY(-1px);transition:transform 0.2s ease-in-out, padding 0.2s ease-in-out, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease;padding-inline-start:0;padding-inline-end:0"><div class="w-full mx-auto"><div class="relative flex items-center justify-between rounded-(--border-radius) overflow-hidden py-[7px]" style="background:rgba(0, 0, 0, 0);border:1px solid rgba(255,255,255,0);box-shadow:none;transition:padding 0.2s ease-in-out, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease;padding-inline-start:23px;padding-inline-end:23px"><a href="/" class="group/logo flex items-center cursor-pointer font-bold gap-2" style="color:var(--foreground);transition:color 0.3s ease-in-out;user-select:none"><div style="position:relative;width:32px;height:32px;border-radius:var(--border-radius);overflow:hidden;background:rgba(0, 0, 0, 0.128);border:1px solid rgba(128,128,128,0.28);box-shadow:0 1px 10px 0 rgba(0,0,0,0.05);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease"><div style="position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:var(--border-radius)"><div class="relative w-full h-full overflow-hidden" style="border-radius:inherit"><div class="absolute inset-0 pointer-events-none z-1" style="border-radius:inherit;overflow:hidden"><canvas class="block w-full h-full" style="border-radius:inherit"></canvas><div class="absolute inset-0" style="background:radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 62%);border-radius:inherit;pointer-events:none"></div></div></div></div><img src="/profile_image.webp" alt="logo" width="32" height="32" style="position:absolute;inset:0;z-index:1;background:none"/></div><span class="font-bold text-xl transition-colors duration-300 ease-in-out">Maxim Bortnikov</span></a><div style="direction:ltr"><div class="absolute inset-0 flex justify-center items-center pointer-events-none" style="direction:ltr"><div class="relative flex items-center h-full pointer-events-auto overflow-hidden"><a class="relative z-20 flex h-full cursor-pointer items-center justify-center group p-5" aria-label="nav_home"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 transition-colors duration-300 ease-in-out opacity-100" style="color:color-mix(in srgb, var(--accent), white 60%)"><rect width="256" height="256" fill="none" stroke="none"></rect><circle cx="128" cy="96" r="64"></circle><path d="M32,216c19.37-33.47,54.55-56,96-56s76.63,22.53,96,56"></path></svg></a><a class="relative z-20 flex h-full cursor-pointer items-center justify-center group p-5" aria-label="nav_projects"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 transition-colors duration-300 ease-in-out opacity-100 text-[var(--subtle-foreground)] group-hover:text-[#aaa]"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M8 10v4"></path><path d="M12 10v2"></path><path d="M16 10v6"></path></svg></a><a class="relative z-20 flex h-full cursor-pointer items-center justify-center group p-5" aria-label="nav_components"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 transition-colors duration-300 ease-in-out opacity-100 text-[var(--subtle-foreground)] group-hover:text-[#aaa]"><rect width="256" height="256" fill="none" stroke="none"></rect><path d="M64,216a8,8,0,0,1-8-8V165.31a28,28,0,1,1,0-50.62V72a8,8,0,0,1,8-8h46.69a28,28,0,1,1,50.61,0H208a8,8,0,0,1,8,8v42.69a28,28,0,1,0,0,50.62V208a8,8,0,0,1-8,8Z" transform="translate(256, 0) scale(-1, 1)"></path></svg></a><a class="relative z-20 flex h-full cursor-pointer items-center justify-center group p-5" aria-label="nav_embedded"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 transition-colors duration-300 ease-in-out opacity-100 text-[var(--subtle-foreground)] group-hover:text-[#aaa]"><rect width="256" height="256" fill="none" stroke="none"></rect><circle cx="168" cy="104" r="16"></circle><circle cx="88" cy="168" r="16"></circle><polyline points="152 216 152 160 88 96 88 40"></polyline><line x1="88" y1="152" x2="88" y2="96"></line><rect x="40" y="40" width="176" height="176" rx="8"></rect><polyline points="136 40 136 72 156.69 92.69"></polyline></svg></a><a class="relative z-20 flex h-full cursor-pointer items-center justify-center group p-5" aria-label="nav_education"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 transition-colors duration-300 ease-in-out opacity-100 text-[var(--subtle-foreground)] group-hover:text-[#aaa]"><rect width="256" height="256" fill="none" stroke="none"></rect><polygon points="8 96 128 32 248 96 128 160 8 96"></polygon>
4<polyline points="128 96 184 125.87 184 240"></polyline><path d="M216,113.07v53.22a8,8,0,0,1-2,5.31c-11.3,12.59-38.9,36.4-86,36.4s-74.68-23.81-86-36.4a8,8,0,0,1-2-5.31V113.07"></path></svg></a><a class="relative z-20 flex h-full cursor-pointer items-center justify-center group p-5" aria-label="nav_playground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 transition-colors duration-300 ease-in-out opacity-100 text-[var(--subtle-foreground)] group-hover:text-[#aaa]"><rect width="256" height="256" fill="none" stroke="none"></rect><path d="M164,129.66l35.78,21.53a5.46,5.46,0,0,0,8.19-5.86l-9.73-40.19,31.84-26.88A5.38,5.38,0,0,0,227,68.78l-41.79-3.31-16.1-38.14a5.51,5.51,0,0,0-10.12,0l-16.1,38.14-41.79,3.31a5.38,5.38,0,0,0-3.13,9.48l31.84,26.88L120,145.33a5.46,5.46,0,0,0,8.19,5.86Z"></path><line x1="82.45" y1="117.55" x2="24" y2="176"></line><line x1="93.26" y1="178.74" x2="40" y2="232"></line><line x1="166.28" y1="177.72" x2="112" y2="232"></line></svg></a><a class="relative z-20 flex h-full cursor-pointer items-center justify-center group p-5" aria-label="nav_contact"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 transition-colors duration-300 ease-in-out opacity-100 text-[var(--subtle-foreground)] group-hover:text-[#aaa]"><rect width="256" height="256" fill="none" stroke="none"></rect><circle cx="128" cy="128" r="96"></circle><path d="M120 120a8 8 0 0 1 8 8v40a8 8 0 0 0 8 8"></path><circle cx="124" cy="84" r="12"></circle></svg></a><div style="position:absolute;top:0;z-index:10;width:44px;height:5px;border-radius:0.5rem;background-color:var(--accent);box-shadow:0 8px 25px -5px var(--accent);transition:none;left:-999px"><div style="position:absolute;left:-30%;top:3px;width:160%;height:56px;clip-path:polygon(5% 100%, 25% 0, 75% 0, 95% 100%);background:linear-gradient(to bottom, var(--accent), transparent);pointer-events:none"></div><div style="position:absolute;left:50%;transform:translateX(-50%);bottom:-43px;width:82%;height:2px;border-radius:12px;background:radial-gradient(ellipse 120% 200% at 50% 50%, var(--accent), transparent 80%);box-shadow:0 0 10px 5px var(--accent), inset 0 0 20px 8px var(--accent);filter:blur(5px);z-index:-1;pointer-events:none"></div></div></div></div></div><div class="flex items-center gap-2 ml-auto justify-end"><button aria-label="Language" class="relative flex items-center justify-center rounded-(--border-radius) transition-all duration-300 ease-in-out cursor-pointer py-1.5 px-3" style="background:rgba(0, 0, 0, 0.128);border:1px solid rgba(128,128,128,0.28);box-shadow:0 1px 10px 0 rgba(0,0,0,0.05);transition:border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out"><div style="position:absolute;inset:0;border-radius:var(--border-radius);pointer-events:none;transition:background 0.3s ease-in-out, opacity 0.3s ease-in-out;opacity:1"></div><div style="width:28px;height:28px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 182" style="width:100%;height:100%;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)"><image href="/LanguageIcon.png" width="356" height="182" preserveAspectRatio="xMidYMid meet"></image></svg></div></button></div></div></div></nav></div></div></div><main class="flex-1"><div id="home" style="background:transparent;min-height:auto;display:flex;align-items:center;justify-content:center"><div class="mx-auto w-full" style="max-width:1448px;padding-left:48px;padding-right:48px;transition:max-width 0.5s ease-in-out, padding 0.3s ease-in-out"><section class="relative w-full flex flex-col items-center justify-center text-center ltr" style="height:auto;padding-top:12px" dir="ltr"><div class="mt-16 w-full"><style> 5 @keyframes float-up-horizontal { 6 0%, 100% { transform: translateX(0); } 7 50% { transform: translateX(-15px); } 8 } 9 @keyframes float-up-vertical { 10 0%, 100% { transform: translateY(0); } 11 50% { transform: translateY(-15px); } 12 } 13 @keyframes float-translateY-profile { 14 0%, 100% { transform: translateY(-55%); } 15 50% { transform: translateY(-58%); } 16 } 17 .animate-float-up-horizontal { 18 animation: float-up-horizontal 6s ease-in-out infinite; 19 } 20 .animate-float-up-vertical { 21 animation: float-up-vertical 6s ease-in-out infinite; 22 } 23 .animate-float-translateY-profile { 24 animation: float-translateY-profile 6s ease-in-out infinite; 25 } 26</style><section class="relative w-full bg-background font-sans overflow-visible"><div class="relative z-0 h-[600px] m-0 p-0"><div class="relative h-full w-full m-0 p-0"><div class="absolute overflow-hidden rounded-xl shadow-lg animate-float-up-horizontal" style="width:326.52px;aspect-ratio:1280 / 935;z-index:105;animation-duration:6s;animation-delay:-0s;top:10px;left:10px"><div class="relative w-full h-full" style="border-radius:12.56px;padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out;aspect-ratio:1280 / 935;overflow:hidden"><div class="relative w-full h-full overflow-hidden" style="border-radius:12px"><img src="/blueberry-loom.webp" alt="image-0" draggable="false" style="width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none"/></div></div></div><div class="absolute overflow-hidden rounded-xl shadow-lg animate-float-up-horizontal" style="width:326.52px;aspect-ratio:1280 / 935;z-index:105;animation-duration:6s;animation-delay:-1.2s;top:10px;right:10px"><div class="relative w-full h-full" style="border-radius:12.56px;padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out;aspect-ratio:1280 / 935;overflow:hidden"><div class="relative w-full h-full overflow-hidden" style="border-radius:12px"><img src="/nof.webp" alt="image-1" draggable="false" style="width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none"/></div></div></div><div class="absolute overflow-hidden rounded-xl shadow-lg animate-float-up-vertical" style="width:272.1p
26x;aspect-ratio:1280 / 935;z-index:95;animation-duration:6s;animation-delay:-2.4s;bottom:10px;left:10px"><div class="relative w-full h-full" style="border-radius:12.56px;padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out;aspect-ratio:1280 / 935;overflow:hidden"><div class="relative w-full h-full overflow-hidden" style="border-radius:12px"><img src="/namer-ui.webp" alt="image-2" draggable="false" style="width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none"/></div></div></div><div class="absolute overflow-hidden rounded-xl shadow-lg animate-float-up-vertical" style="width:272.1px;aspect-ratio:1280 / 935;z-index:95;animation-duration:6s;animation-delay:-3.5999999999999996s;bottom:10px;right:10px"><div class="relative w-full h-full" style="border-radius:12.56px;padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out;aspect-ratio:1280 / 935;overflow:hidden"><div class="relative w-full h-full overflow-hidden" style="border-radius:12px"><img src="/merucav.webp" alt="image-3" draggable="false" style="width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none"/></div></div></div><div class="absolute z-50" style="top:50%;left:50%;width:540px;transform:translateX(-50%)"><div class="animate-float-translateY-profile" style="will-change:transform"><div class="transition-all duration-300" style="width:100%;display:flex;flex-direction:column;padding:24px;border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);box-sizing:border-box;position:relative;overflow:hidden;text-align:center;direction:ltr;transition:background-color 0.3s ease, border 0.3s ease"><div aria-hidden="true" style="position:absolute;inset:0;z-index:0;border-radius:var(--border-radius);overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1s"><div style="width:100%;height:100%;overflow:hidden"><div style="position:relative;width:100%;height:100%;overflow:hidden;pointer-events:auto"><div style="width:100%;height:100%"><canvas style="display:block"></canvas></div></div></div></div><div style="position:relative;width:100%;aspect-ratio:0.8686210640608035;border-radius:var(--border-radius);border:1px solid var(--border-color);background:var(--background);display:flex;justify-content:center;align-items:flex-end;overflow:hidden;margin-bottom:16px;flex-shrink:0;z-index:1;transition:border 0.3s ease, background-color 0.3s ease"><div style="position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:var(--border-radius)"><div class="relative w-full h-full overflow-hidden" style="border-radius:inherit"><div class="absolute inset-0 pointer-events-none z-1" style="border-radius:inherit;overflow:hidden"><canvas class="block w-full h-full" style="border-radius:inherit"></canvas><div class="absolute inset-0" style="background:radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 62%);border-radius:inherit;pointer-events:none"></div></div></div></div><img src="/profile_image.webp" alt="Maxim Bortnikov" style="max-width:100%;height:auto;object-fit:contain;border-radius:var(--border-radius);filter:none;transition:filter 0.3s ease;user-select:none;pointer-events:none;z-index:1;align-self:flex-end"/></div><div style="flex-grow:1;width:100%;z-index:1;overflow:hidden"><div class="font-sans font-bold text-[var(--foreground)] mb-2" style="font-size:30px;word-break:break-word;white-space:normal" title="Maxim Bortnikov">Maxim Bortnikov</div><div class="font-sans text-[var(--sub-foreground)]" style="font-size:16px;word-break:break-word;white-space:pre-line"><span class="inline-block whitespace-pre-wrap "><span class="sr-only">Cybersecurity-oriented web developer.</span><span aria-hidden="true"><span class="">C</span><span class="">y</span><span class="">b</span><span class="">e</span><span class="">r</span><span class="">s</span><span class="">e</span><span class="">c</span><span class="">u</span><span class="">r</span><span class="">i</span><span class="">t</span><span class="">y</span><span class="">-</span><span class="">o</span><span class="">r</span><span class="">i</span><span class="">e</span><span class="">n</span><span class="">t</span><span class="">e</span><span class="">d</span><span class=""> </span><span class="">w</span><span class="">e</span><span class="">b</span><span class=""> </span><span class="">d</span><span class="">e</span><span class="">v</span><span class="">e</span><span class="">l</span><span class="">o</span><span class="">p</span><span class="">e</span><span class="">r</span><span class="">.</span></span></span></div></div></div></div></div></div></div></section></div><h1 class="font-bold tracking-tight text-[var(--foreground)] leading-tight w-full flex flex-col items-center justify-center" style="font-size:40px"><span class="mb-2"><span class="inline-flex items-center justify-center px-2 py-1 rounded-lg break-words whitespace-normal bg-[var(--background)]">Transforming Ideas Into</span></span><span class="inline-flex items-center justify-center rounded-lg overflow-hidden px-3 py-1 bg-[var(--accent)]" style="display:inline-block;white-space:nowrap;opacity:0;filter:blur(4px)">Websites</span></h1><p style="line-height:1.75;font-size:14px;margin-bottom:40px" class="mt-5 text-[var(--sub-foreground)]">Hi, my name is Maxim. I build reliable, cryptographically-reinforced software without sacrificing the UI aesthetics.</p><div class="w-full flex justify-center"><div class="flex w-full justify-start items-center mt-8" style="gap:12px;flex-direction:column" dir="ltr"><button type="button" style="display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;cursor:pointer;opacity:1;border-radius:var(--border-radius);background-color:var(--foreground);color:var(--background);border:0px solid transparent;font-size:1rem;font-weight:500;height:2.875rem;padding:none;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out;direction:ltr;user-select:none;overflow:hidden;position:relative;width:100%" class="jsx-dda2b379d878b0c8 RefinedchronicleButton variant-default "><span class="jsx-dda2b379d878b0c8 flip-wrapper"><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8">Explore Projects</em></span><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8">Explore Projects</em></span></span></button><button type="button" style="display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;cursor:pointer;opacity:1;border-radius:var(--border-radius);background-color:var(--background);color:var(--foreground);border:1px solid var(--border-color);font-size:1rem;font-weight:500;height:2.875rem;padding:none;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out;direction:ltr;user-select:none;overflow:hidden;position:relative;width:100%" class="jsx-dda2b379d878b0c8 RefinedchronicleButton variant-default "><span class="jsx-dda2b379d878b0c8 flip-wrapper"><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8">Contact Info</em></span><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8">Contact Info</em></span></span></button></div></div></section></div></div><div class="h-[2px]"></div><div id="projects" style="min-height:auto;position:relative" class="flex flex-col"><section class="relative overflow-hidden flex flex-col transition duration-300 ease-in-out py-20"><div class="mx-auto w-full" style="max-width:1448px;padding-left:48px;padding-right:48px;transition:max-width 0.5s ease-in-out, padding 0.3s ease-in-out"><div class="flex flex-col w-full overflow-hidden relative mb-10 items-start text-left" style="direction:ltr"><h2 class="section-project-section-text-title font-headline tracking-tight leading-tight w-full transition-colors" style="font-size:16px;font-weight:600;line-height:1.2;color:var(--sub-foreground);transition:color 1s ease">Projects</h2><p class="section-project-section-text-desc w-full relative mt-1.5" style="font-size:32px;line-height:1.4;margin-top:0.25rem;font-weight:900;position:relative"><span class="section-project-section-text-desc-line-wrapper desc-line-wrapper block relative w-full" style="display:block;position:relative"><span class="base-layer" style="color:var(--reveal-mask);position:relative;z-index:1;display:block"><span>That's what I'm actually </span><span>capable</span><span> of making.</span></span><span class="reveal-layer" aria-hidden="true" style="mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);-webkit-mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);color:var(--accent);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;pointer-events:none;user-select:none;display:block"><span>That's what I'm actually </span><span style="color:var(--foreground)">capable</span><span> of making.</span></span></span></p></div></div><div style="max-width:1448px;margin:0 auto;padding-left:48px;padding-right:48px"><div class="mt-[-70px] mb-[-62px]"><div class="w-full mx-auto antialiased font-sans py-20 pb-20" style="line-height:1.5;background-color:transparent;direction:ltr"><div class="relative" style="display:grid;grid-template-columns:1fr 1fr;gap:60px"><div class="w-full"><div class="relative" style="padding-top:73.046875%"><div class="absolute inset-0 origin-bottom" style="opacity:0;transform:translateZ(-100px) scale(0.9) rotate(3deg)"><div class="relative h-full w-full" style="border-radius:var(--outer-smooth-border-radius);padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:var(--smooth-border-radius)"><img src="/blueberry-loom.webp" alt="Blueberry Loom" draggable="false" style="width:100%;height:100%;object-fit:cover"/>
26</div></div></div><div class="absolute inset-0 origin-bottom" style="opacity:0;transform:translateZ(-100px) scale(0.9) rotate(5deg)"><div class="relative h-full w-full" style="border-radius:var(--outer-smooth-border-radius);padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:var(--smooth-border-radius)"><img src="/nof.webp" alt="Nof" draggable="false" style="width:100%;height:100%;object-fit:cover"/></div></div></div><div class="absolute inset-0 origin-bottom" style="opacity:0;transform:translateZ(-100px) scale(0.9) rotate(-4deg)"><div class="relative h-full w-full" style="border-radius:var(--outer-smooth-border-radius);padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:var(--smooth-border-radius)"><img src="/merucav.webp" alt="Merucav" draggable="false" style="width:100%;height:100%;object-fit:cover"/></div></div></div><div class="absolute inset-0 origin-bottom" style="opacity:0;transform:translateZ(-100px) scale(0.9) rotate(-4deg)"><div class="relative h-full w-full" style="border-radius:var(--outer-smooth-border-radius);padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:var(--smooth-border-radius)"><img src="/namer-ui.webp" alt="Namer UI" draggable="false" style="width:100%;height:100%;object-fit:cover"/></div></div></div><div class="absolute inset-0 origin-bottom" style="opacity:0;transform:translateZ(-100px) scale(0.9) rotate(-1deg)"><div class="relative h-full w-full" style="border-radius:var(--outer-smooth-border-radius);padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:var(--smooth-border-radius)"><img src="/namer-ui-for-vue.webp" alt="Namer UI For Vue" draggable="false" style="width:100%;height:100%;object-fit:cover"/></div></div></div><div class="absolute inset-0 origin-bottom" style="opacity:0;transform:translateZ(-100px) scale(0.9) rotate(3deg)"><div class="relative h-full w-full" style="border-radius:var(--outer-smooth-border-radius);padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:var(--smooth-border-radius)"><img src="/in-browser-file-encrypter.webp" alt="In-Browser-File-Encrypter" draggable="false" style="width:100%;height:100%;object-fit:cover"/></div></div></div><div class="absolute inset-0 origin-bottom" style="opacity:0;transform:translateZ(-100px) scale(0.9) rotate(3deg)"><div class="relative h-full w-full" style="border-radius:var(--outer-smooth-border-radius);padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:var(--smooth-border-radius)"><img src="/kerach-tempo.webp" alt="Kerach Tempo" draggable="false" style="width:100%;height:100%;object-fit:cover"/></div></div></div><div class="absolute inset-0 origin-bottom" style="opacity:0;transform:translateZ(-100px) scale(0.9) rotate(6deg)"><div class="relative h-full w-full" style="border-radius:var(--outer-smooth-border-radius);padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:var(--smooth-border-radius)"><img src="/clandestine.webp" alt="Clandestine" draggable="false" style="width:100%;height:100%;object-fit:cover"/></div></div></div></div></div><div class="flex justify-between flex-col py-4 w-full"><div style="opacity:1;transform:none"><h3 class="font-bold" style="font-size:22px;color:var(--foreground);margin-top:0;margin-bottom:0.25em;text-align:left">Blueberry Loom</h3><p style="font-size:15px;color:var(--sub-foreground);margin-top:0;margin-bottom:0.25em;text-align:left">Next.js + Nuxt Project</p><p style="font-size:17px;
26color:var(--middle-foreground);margin-top:1.75em;margin-bottom:0em;text-align:left"><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">A<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">cryptographically<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">reinforced<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">form<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">builder<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">that<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">ensures<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">only<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">the<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">intended<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">recipient<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">has<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">the<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">technical<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">capability<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">to<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">decrypt<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">submitted<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">form<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">responses,<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">preventing<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">even<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">the<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">server<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">owner<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">from<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">accessing<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">them.<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">It<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">achieves<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">this<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">by<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">employing<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">the<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">ML-KEM-1024<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">key<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">encapsulation<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">mechanism<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">along<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">with<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">a<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">"ChaCha20<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">+<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">Serpent-256<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">CBC<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">+<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">HMAC-SHA3-512"<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">authenticated<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">encryption<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">scheme<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">to<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">enable<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">true<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">
26end-to-end<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">encryption.<!-- -->Â </span></p></div><div class="grid grid-cols-4 gap-4 w-full" style="justify-content:flex-start"><div class="col-span-1"><button type="button" style="display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;cursor:pointer;opacity:1;border-radius:var(--border-radius);background-color:var(--background);color:var(--foreground);border:1px solid var(--border-color);font-size:1rem;font-weight:500;height:2.875rem;padding:0.75rem 0rem;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out;direction:ltr;user-select:none;overflow:hidden;position:relative;width:100%" class="jsx-40991297a23697ee RefinedchronicleButton variant-default "><div aria-hidden="true" style="position:absolute;inset:0;z-index:0;border-radius:var(--border-radius);overflow:hidden;pointer-events:none;background:transparent"><div style="width:100%;height:100%;overflow:hidden"><div style="position:relative;width:100%;height:100%;overflow:hidden;pointer-events:auto"><div style="width:100%;height:100%"><canvas style="display:block"></canvas></div></div></div></div><span class="jsx-40991297a23697ee flip-wrapper"><span class="jsx-40991297a23697ee"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-40991297a23697ee">Previous</em></span><span class="jsx-40991297a23697ee"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-40991297a23697ee">Previous</em></span></span></button></div><div class="col-span-1"><button type="button" style="display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;cursor:pointer;opacity:1;border-radius:var(--border-radius);background-color:var(--background);color:var(--foreground);border:1px solid var(--border-color);font-size:1rem;font-weight:500;height:2.875rem;padding:0.75rem 0rem;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out;direction:ltr;user-select:none;overflow:hidden;position:relative;width:100%" class="jsx-40991297a23697ee RefinedchronicleButton variant-default "><div aria-hidden="true" style="position:absolute;inset:0;z-index:0;border-radius:var(--border-radius);overflow:hidden;pointer-events:none;background:transparent"><div style="width:100%;height:100%;overflow:hidden"><div style="position:relative;width:100%;height:100%;overflow:hidden;pointer-events:auto"><div style="width:100%;height:100%"><canvas style="display:block"></canvas></div></div></div></div><span class="jsx-40991297a23697ee flip-wrapper"><span class="jsx-40991297a23697ee"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-40991297a23697ee">Next</em></span><span class="jsx-40991297a23697ee"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-40991297a23697ee">Next</em></span></span></button></div><div class="col-span-2"><a href="https://blueberry-loom.netlify.app/" target="_blank" rel="noopener noreferrer" draggable="true" style="display:inline-block;width:100%;height:100%"><button as="span" style="display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;cursor:pointer;opacity:1;border-radius:var(--border-radius);background-color:var(--foreground);color:var(--background);border:0px solid transparent;font-size:1rem;font-weight:500;height:2.875rem;padding:none;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out;direction:ltr;user-select:none;overflow:hidden;position:relative;width:100%" type="button" class="jsx-dda2b379d878b0c8 RefinedchronicleButton variant-default "><span class="jsx-dda2b379d878b0c8 flip-wrapper"><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8"><span style="display:inline-flex;align-items:center;gap:0.6em"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="21" height="21" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" style="margin-top:1px"><rect width="256" height="256" fill="none" stroke="none"></rect><path d="M141.38,64.68l11-11a46.62,46.62,0,0,1,65.94,0h0a46.62,46.62,0,0,1,0,65.94L193.94,144,183.6,154.34a46.63,46.63,0,0,1-66-.05h0A46.48,46.48,0,0,1,104,120.06"></path><path d="M114.62,191.32l-11,11a46.63,46.63,0,0,1-66-.05h0a46.63,46.63,0,0,1,.06-65.89L72.4,101.66a46.62,46.62,0,0,1,65.94,0h0A46.45,46.45,0,0,1,152,135.94"></path></svg>Open Web App</span></em></span><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8"><span style="display:inline-flex;align-items:center;gap:0.6em"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="21" height="21" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" style="margin-top:1px"><rect width="256" height="256" fill="none" stroke="none"></rect><path d="M141.38,64.68l11-11a46.62,46.62,0,0,1,65.94,0h0a46.62,46.62,0,0,1,0,65.94L193.94,144,183.6,154.34a46.63,46.63,0,0,1-66-.05h0A46.48,46.48,0,0,1,104,120.06"></path><path d="M114.62,191.32l-11,11a46.63,46.63,0,0,1-66-.05h0a46.63,46.63,0,0,1,.06-65.89L72.4,101.66a46.62,46.62,0,0,1,65.94,0h0A46.45,46.45,0,0,1,152,135.94"></path></svg>Open Web App</span></em></span></span></button></a></div></div></div></div></div></div></div></section></div><div class="h-[2px]"></div><div id="components" style="min-height:auto;position:relative" class="flex flex-col"><section class="relative overflow-hidden flex flex-col transition duration-300 ease-in-out py-20"><div class="mx-auto w-full" style="max-width:1448px;padding-left:48px;padding-right:48px;transition:max-width 0.5s ease-in-out, padding 0.3s ease-in-out"><div class="flex flex-col w-full overflow-hidden relative mb-10 items-start text-left" style="direction:ltr"><h2 class="section-components-section-text-title font-headline tracking-tight leading-tight w-full transition-colors" style="font-size:16px;font-weight:600;line-height:1.2;color:var(--sub-foreground);transition:color 1s ease">Components</h2><p class="section-components-section-text-desc w-full relative mt-1.5" style="font-size:32px;line-height:1.4;margin-top:0.25rem;font-weight:900;position:relative"><span class="section-components-section-text-desc-line-wrapper desc-line-wrapper block relative w-full" style="display:block;position:relative"><span class="base-layer" style="color:var(--reveal-mask);position:relative;z-index:1;display:block"><span>Maybe you'll find </span><span>something useful</span><span> here.</span></span><span class="reveal-layer" aria-hidden="true" style="mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);-webkit-mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);color:var(--accent);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;pointer-events:none;user-select:none;display:block"><span>Maybe you'll find </span><span style="color:var(--foreground)">something useful</span><span> here.</span></span></span></p></div><div style="display:grid;grid-template-columns:repeat(1, 1fr);gap:24px;width:100%"><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/refined-chronicle-button" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center"><div class="flex items-center justify-center w-full h-screen bg-[#fff]"><button type="button" style="display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;cursor:pointer;opacity:1;border-radius:8px;background-color:var(--background);color:var(--foreground);border:1px solid var(--sub-foreground);font-size:1rem;font-weight:500;height:2.5rem;padding:0.75rem 1.5rem;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out;direction:ltr;user-select:none;overflow:hidden;position:relative;width:auto" class="jsx-dda2b379d878b0c8 RefinedchronicleButton variant-default "><span class="jsx-dda2b379d878b0c8 flip-wrapper"><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M8 10v4"></path><path d="M12 10v2"></path><path d="M16 10v6"></path></svg> <!-- -->Refined</em></span><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M8 10v4"></path><path d="M12 10v2"></path><path d="M16 10v6"></path></svg> <!-- -->Refined</em></span></span></button></div></div></div></a><a href="https://namer-ui.vercel.app/components/refined-chronicle-button" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Refined Chronicle Button</h3><p style="font-size:17px;
26color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">A version of the Chronicle Button tailored for real-world applications.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/circular-testimonials" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><img src="/previews/circular-testimonials.webp" alt="Circular Testimonials" draggable="false" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:16px"/></div></a><a href="https://namer-ui.vercel.app/components/circular-testimonials" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Circular Testimonials</h3><p style="font-size:17px;color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">A circular layout testimonial carousel built with GSAP and Framer Motion animations.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/project-showcase" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><img src="/previews/project-showcase.webp" alt="Project Showcase" draggable="false" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:16px"/></div></a><a href="https://namer-ui.vercel.app/components/project-showcase" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Project Showcase</h3><p style="font-size:17px;
26color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">A customized version of the Aceternity UI's Animated Testimonials component.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/inflected-card" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><img src="/previews/inflected-card.webp" alt="Inflected Card" draggable="false" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:16px"/></div></a><a href="https://namer-ui.vercel.app/components/inflected-card" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Inflected Card</h3><p style="font-size:17px;color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">A versatile card component with an unorthodox image card shape.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/splashed-push-notifications" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><img src="/previews/splashed-push-notifications.webp" alt="Splashed Push Notifications" draggable="false" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:16px"/></div></a><a href="https://namer-ui.vercel.app/components/splashed-push-notifications" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Splashed Push Notifications</h3><p style="font-size:17px;
26color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Simple, splashed push notifications</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/fishy-button" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center"><div class="flex items-center justify-center w-full h-screen bg-[#fff]" style="transform:scale(1.2)"><button type="button" class="button button--3 fish-speed-no8fnh" style="border-radius:50px;width:140px;height:53px"><div class="wave"></div><div class="wave"></div><div class="wave"></div><div class="wave"></div><div class="fish"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><span class="button__text">פ×ש×</span><style> 27.fish-speed-no8fnh:hover .fish { 28 animation: fish ease 2.6s forwards; 29 opacity: 1; 30} 31</style><style> 32.button--1 { 33 --color_1: #365fa8; 34 --color_2: #4a76c5; 35 --color_3: #5f8ce2; 36 --color_4: #73a3ff; 37 --color_5: #21488b; 38 --color_6: #132a52; 39} 40.button--2 { 41 --color_1: #0092a0; 42 --color_2: #00afb4; 43 --color_3: #00cbc9; 44 --color_4: #00e7de; 45 --color_5: #00768b; 46 --color_6: #004c59; 47} 48.button--3 { 49 --color_1: #1b70a1; 50 --color_2: #368cc1; 51 --color_3: #50a8e0; 52 --color_4: #6bc4ff; 53 --color_5: #005482; 54 --color_6: #003654; 55} 56.button { 57 display: flex; 58 z-index: 0; 59 justify-content: center; 60 align-items: center; 61 position: relative; 62 width: 140px; 63 height: 53px; 64 border-radius: 50px; 65 text-decoration: none; 66 overflow: hidden; 67 background: var(--color_5); 68 box-shadow: 0 0 12px rgba(0,0,0,.45), 0 0 8px rgba(0,0,0,.25) inset; 69 transition: all ease .7s; 70 border: none; 71 cursor: pointer; 72 margin: 0 5px; 73} 74.button::before { 75 content: ''; 76 position: absolute; 77 z-index: 6; 78 top: 0; 79 left: 0; 80 width: 100%; 81 height: 100%; 82 background: linear-gradient(rgba(0,25,85,0) 60%, rgba(0,25,85,.4)); 83} 84.wave { 85 position: absolute; 86 top: 0; 87 left: 0; 88 width: 100%; 89 height: 100%; 90 filter: drop-shadow(0 0 3px rgba(10, 60, 90, 0.8)); 91} 92.wave:nth-child(1) { z-index: 1; } 93.wave:nth-child(2) { z-index: 2; } 94.wave:nth-child(3) { z-index: 3; } 95.wave:nth-child(4) { z-index: 5; } 96.wave:nth-child(1)::before, .wave:nth-child(1)::after { 97 content: ''; 98 position: absolute; 99 width: 120px; 100 height: 65px; 101 background: var(--color_1); 102 clip-path: path('M140.44,0c-12.81,1.3-12.59,12.11-35.96,10.7-14.56-.88-16.21,19.13-40.12,10.57-17.84-6.39-37.9-1.86-49.13,10.03C2.01,45.31,3.29,51.05,0,65.19H140.44V0Z'); 103 animation: encrypted-space-wave_1 linear 3s infinite alternate; 104} 105.wave:nth-child(1)::before, .wave:nth-child(2)::before, .wave:nth-child(3)::before, .wave:nth-child(4)::before { 106 transform: rotate(180deg); 107 transition: all ease 4.4s; 108} 109.wave:nth-child(1)::after, .wave:nth-child(2)::after, .wave:nth-child(3)::after, .wave:nth-child(4)::after { 110 transition: all ease 4.4s; 111} 112.wave:nth-child(1)::before { top: -16px; left: -16px; } 113.wave:nth-child(2)::before { top: -20px; left: -20px; } 114.wave:nth-child(3)::before { top: -20px; left: -20px; } 115.wave:nth-child(4)::before { top: -20px; left: -20px; } 116.wave:nth-child(1)::after { bottom: -16px; right: -16px; } 117.wave:nth-child(2)::after { bottom: -20px; right: -20px; } 118.wave:nth-child(3)::after { bottom: -20px; right: -20px; } 119.wave:nth-child(4)::after { bottom: -20px; right: -20px; } 120.wave:nth-child(2)::before, .wave:nth-child(2)::after {
121 content: ''; 122 position: absolute; 123 width: 139px; 124 height: 61px; 125 background: var(--color_2); 126 clip-path: path('M137.15,.03c-16.75-.44-27.29,4.77-33.69,10.72-6.4,5.96-24.52,19.73-43.08,9.17-13.1-7.46-26.74-3.14-38.25,4.78C6.61,35.38,3.74,44.74,0,59.63H137.15V.03Z'); 127 animation: encrypted-space-wave_2 linear 3s infinite alternate; 128} 129.wave:nth-child(3)::before, .wave:nth-child(3)::after { 130 content: ''; 131 position: absolute; 132 width: 134px; 133 height: 56px; 134 background: var(--color_3); 135 clip-path: path('M132.61,0c-9.18,3.92-11.29,5.2-19.97,4.19-9.33-1.09-10.97,12.29-25.37,15.53-9.69,2.18-17.12-7.15-28.89-5.37-15.68,2.38-16.35,7.79-29.01,9.38C4.37,26.86-.79,50.3,.09,54.49H132.61V0Z'); 136 animation: encrypted-space-wave_3 linear 3s infinite alternate; 137} 138.wave:nth-child(4)::before, .wave:nth-child(4)::after { 139 content: ''; 140 position: absolute; 141 width: 129px; 142 height: 47px; 143 background: var(--color_4); 144 clip-path: path('M128.7,.2c-16.75-.44-23.99-.69-30.39,5.26-6.4,5.96-8.68,12.19-26.99,7.33-9.6-2.54-24.02-4.44-34.16,2.33-10.83,7.23-14.87,9.49-22.83,10.33C1.59,26.81-.72,39.73,.17,43.92H128.7V.2Z'); 145 animation: encrypted-space-wave_4 linear 3s infinite alternate; 146} 147.button__text { 148 position: relative; 149 z-index: 7; 150 display: inline-block; 151 font-size: 18px; 152 letter-spacing: 8px; 153 color: #fff; 154 transition: all ease 1s; 155 font-family: 'Griffy', cursive; 156} 157.button:hover { 158 background: var(--color_6); 159 box-shadow: 0 0 12px rgba(0,0,0,0), 0 0 12px rgba(0,0,0,.4) inset; 160} 161.button:hover .wave { 162 animation: shadow ease 1s; 163 animation-fill-mode: forwards; 164} 165.button:hover .button__text { 166 letter-spacing: 9px; 167 font-size: 19px; 168} 169.button:hover .wave:nth-child(1)::before { top: -2px; left: -2px; } 170.button:hover .wave:nth-child(1)::after { bottom: -2px; right: -2px; } 171.button:hover .wave:nth-child(2)::before { top: -2px; left: -2px; } 172.button:hover .wave:nth-child(2)::after { bottom: -2px; right: -2px; } 173.button:hover .wave:nth-child(3)::before { top: -3px; left: -3px; } 174.button:hover .wave:nth-child(3)::after { bottom: -3px; right: -3px; } 175.button:hover .wave:nth-child(4)::before { top: -4px; left: -4px; } 176.button:hover .wave:nth-child(4)::after { bottom: -4px; right: -4px; } 177.fish { 178 position: absolute; 179 z-index: 4; 180 top: -80px; 181 right: -20px; 182 width: 52px; 183 height: 78px; 184 clip-path: path('M34.53,16.03c5.88-1.55,11.58,.46,16.58-2.77-8.2-.76-6.29-2.68-9.51-3.84,.25-2.73-4.57-5.35-3.07-9.43-4.36,3.06-2.05,8.99-6.07,13.57,0,0-17.91,9.39-25.74,22.9-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-7.85,22.39,.12,30.85,3.05,3.24,15.5-12.58,18.03-25.6,5.49-4.79,6.56-9.79,10.27-13.88-1.67,.35-5.57,3.99-8.6,5.46,3.5-14.8,8.58-20.9,11.25-23.9Z'); 185 background: #fff; 186 opacity: 0; 187 transition: opacity 0.3s ease; 188} 189@keyframes fish { 190 0% { 191 top: -80px; 192 right: -20px; 193 transform: rotate(0); 194 clip-path : path('M34.53,16.03c5.88-1.55,11.58,.46,16.58-2.77-8.2-.76-6.29-2.68-9.51-3.84,.25-2.73-4.57-5.35-3.07-9.43-4.36,3.06-2.05,8.99-6.07,13.57,0,0-17.91,9.39-25.74,22.9-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-7.85,22.39,.12,30.85,3.05,3.24,15.5-12.58,18.03-25.6,5.49-4.79,6.56-9.79,10.27-13.88-1.67,.35-5.57,3.99-8.6,5.46,3.5-14.8,8.58-20.9,11.25-23.9Z') ; 195 } 196 10% { 197 clip-path : path('M17.92,14.38c1.77-4.98,5.6-8.82,5.7-14.38-4.05,6.12-5,3.31-8.12,6-2.63-1.74-6.8,1.19-9.75-2.12,.35,5.4,6.79,7.43,8.26,12.02,0,0,.86,10.01-6.97,23.52-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-8.58,20.98,.12,30.85,2.94,3.34,19.34-10.13,18.67-25.45,5.49-4.79,5.92-9.94,9.63-14.03-1.67,.35-6.84,4.82-9.88,6.29,.14-12.63-4.09-23.04-4.42-29.33Z') 198 } 199 20% { 200 clip-path : path('M34.53,16.03c5.88-1.55,11.58,.46,16.58-2.77-8.2-.76-6.29-2.68-9.51-3.84,.25-2.73-4.57-5.35-3.07-9.43-4.36,3.06-2.05,8.99-6.07,13.57,0,0-17.91,9.39-25.74,22.9-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-7.85,22.39,.12,30.85,3.05,3.24,15.5-12.58,18.03-25.6,5.49-4.79,6.56-9.79,10.27-13.88-1.67,.35-5.57,3.99-8.6,5.46,3.5-14.8,8.58-20.9,11.25-23.9Z') ; 201 } 202 30% { 203 clip-path : path('M17.92,14.38c1.77-4.98,5.6-8.82,5.7-14.38-4.05,6.12-5,3.31-8.12,6-2.63-1.74-6.8,1.19-9.75-2.12,.35,5.4,6.79,7.43,8.26,12.02,0,0,.86,10.01-6.97,23.52-2.04-2.67-3.76-8.1-5.1-9.25,
2031.19,5.05-.05,9.67,1.84,15.88-.03,.08-8.58,20.98,.12,30.85,2.94,3.34,19.34-10.13,18.67-25.45,5.49-4.79,5.92-9.94,9.63-14.03-1.67,.35-6.84,4.82-9.88,6.29,.14-12.63-4.09-23.04-4.42-29.33Z') 204 } 205 40% { 206 clip-path : path('M34.53,16.03c5.88-1.55,11.58,.46,16.58-2.77-8.2-.76-6.29-2.68-9.51-3.84,.25-2.73-4.57-5.35-3.07-9.43-4.36,3.06-2.05,8.99-6.07,13.57,0,0-17.91,9.39-25.74,22.9-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-7.85,22.39,.12,30.85,3.05,3.24,15.5-12.58,18.03-25.6,5.49-4.79,6.56-9.79,10.27-13.88-1.67,.35-5.57,3.99-8.6,5.46,3.5-14.8,8.58-20.9,11.25-23.9Z') ; 207 } 208 50% { 209 clip-path : path('M17.92,14.38c1.77-4.98,5.6-8.82,5.7-14.38-4.05,6.12-5,3.31-8.12,6-2.63-1.74-6.8,1.19-9.75-2.12,.35,5.4,6.79,7.43,8.26,12.02,0,0,.86,10.01-6.97,23.52-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-8.58,20.98,.12,30.85,2.94,3.34,19.34-10.13,18.67-25.45,5.49-4.79,5.92-9.94,9.63-14.03-1.67,.35-6.84,4.82-9.88,6.29,.14-12.63-4.09-23.04-4.42-29.33Z') 210 } 211 60% { 212 clip-path : path('M34.53,16.03c5.88-1.55,11.58,.46,16.58-2.77-8.2-.76-6.29-2.68-9.51-3.84,.25-2.73-4.57-5.35-3.07-9.43-4.36,3.06-2.05,8.99-6.07,13.57,0,0-17.91,9.39-25.74,22.9-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-7.85,22.39,.12,30.85,3.05,3.24,15.5-12.58,18.03-25.6,5.49-4.79,6.56-9.79,10.27-13.88-1.67,.35-5.57,3.99-8.6,5.46,3.5-14.8,8.58-20.9,11.25-23.9Z') ; 213 } 214 70% { 215 clip-path : path('M17.92,14.38c1.77-4.98,5.6-8.82,5.7-14.38-4.05,6.12-5,3.31-8.12,6-2.63-1.74-6.8,1.19-9.75-2.12,.35,5.4,6.79,7.43,8.26,12.02,0,0,.86,10.01-6.97,23.52-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-8.58,20.98,.12,30.85,2.94,3.34,19.34-10.13,18.67-25.45,5.49-4.79,5.92-9.94,9.63-14.03-1.67,.35-6.84,4.82-9.88,6.29,.14-12.63-4.09-23.04-4.42-29.33Z') 216 } 217 80% { 218 clip-path : path('M34.53,16.03c5.88-1.55,11.58,.46,16.58-2.77-8.2-.76-6.29-2.68-9.51-3.84,.25-2.73-4.57-5.35-3.07-9.43-4.36,3.06-2.05,8.99-6.07,13.57,0,0-17.91,9.39-25.74,22.9-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-7.85,22.39,.12,30.85,3.05,3.24,15.5-12.58,18.03-25.6,5.49-4.79,6.56-9.79,10.27-13.88-1.67,.35-5.57,3.99-8.6,5.46,3.5-14.8,8.58-20.9,11.25-23.9Z') ; 219 } 220 90% { 221 clip-path : path('M17.92,14.38c1.77-4.98,5.6-8.82,5.7-14.38-4.05,6.12-5,3.31-8.12,6-2.63-1.74-6.8,1.19-9.75-2.12,.35,5.4,6.79,7.43,8.26,12.02,0,0,.86,10.01-6.97,23.52-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-8.58,20.98,.12,30.85,2.94,3.34,19.34-10.13,18.67-25.45,5.49-4.79,5.92-9.94,9.63-14.03-1.67,.35-6.84,4.82-9.88,6.29,.14-12.63-4.09-23.04-4.42-29.33Z') 222 } 223 100%{ 224 top : 100px ; 225 right : 80px ; 226 transform : rotate(40deg) ; 227 clip-path : path('M17.92,14.38c1.77-4.98,5.6-8.82,5.7-14.38-4.05,6.12-5,3.31-8.12,6-2.63-1.74-6.8,1.19-9.75-2.12,.35,5.4,6.79,7.43,8.26,12.02,0,0,.86,10.01-6.97,23.52-2.04-2.67-3.76-8.1-5.1-9.25,1.19,5.05-.05,9.67,1.84,15.88-.03,.08-8.58,20.98,.12,30.85,2.94,3.34,19.34-10.13,18.67-25.45,5.49-4.79,5.92-9.94,9.63-14.03-1.67,.35-6.84,4.82-9.88,6.29,.14-12.63-4.09-23.04-4.42-29.33Z') ; 228 } 229} 230.button .bubble { 231 position: absolute; 232 z-index: 7; 233 top: 0; 234 width: 30px; 235 height: 80px; 236} 237.button .bubble::before, .button .bubble::after { 238 content: ''; 239 position: absolute; 240 bottom: 0; 241 border-radius: 50%; 242 background: rgba(255,255,255,0); 243} 244.button .bubble:nth-child(6) { left: 16px; } 245.button .bubble:nth-child(7) { left: 48px; } 246.button .bubble:nth-child(8) { right: 16px; } 247.button .bubble:nth-child(9) { right: 48px; } 248.button .bubble:nth-child(6)::before { width: 16px; height: 16px; left: 0; bottom: -60px; transition: all ease 3.7s; } 249.button .bubble:nth-child(6)::after { width: 8px; height: 8px; right: 4px; bottom: -10px; transition: all ease 3.4s; } 250.button .bubble:nth-child(7)::before { width: 10px; height: 10px; left: 0; bottom: -25px; transition: all ease 3.5s; } 251.button .bubble:nth-child(7)::after { width: 14px; height: 14px; right: 0; bottom: -50px; transition: all ease 3.3s; } 252.button .bubble:nth-child(8)::before { width: 16px; height: 16px; left: 0; bottom: -30px; transition: all ease 3.5s; } 253.button .bubble:nth-child(8)::after { width: 8px; height: 8px; right: 4px; bottom: -70px; transition: all ease 3.3s; } 254.button .bubble:nth-child(9)::before { width: 10px; height: 10px; left: 0; bottom: -40px; transition: all ease 3.6s; } 255.button .bubble:nth-child(9)::after { width: 14px; height: 14px; right: 0; bottom: -15px; transition: all ease 3.7s; } 256@keyframes shadow { 257 0% { filter: drop-shadow(0 0 1.5px rgba(10, 60, 90, 0.4)); } 258 100% { filter: drop-shadow(0 0 10px rgba(10, 60, 90, 0.35)); } 259} 260@keyframes encrypted-space-wave_1 { 261 0% { clip-path: path('M140.44,0c-12.81,1.3-12.59,12.11-35.96,10.7-14.56-.88-16.21,19.13-40.12,10.57-17.84-6.39-37.9-1.86-49.13,10.03C2.01,45.31,3.29,51.05,0,65.19H140.44V0Z'); } 262 100% { clip-path: path('M140.44,0c-17.21,3.05-17.35,17.42-35.08,14.77-16.69-2.49-23.72-6.62-50.13,7.7-13.98,6.99-26.83-2.07-39.76,8.45C4.54,39.98,3.29,48.5,0,62.64H140.44V0Z'); } 263} 264@keyframes encrypted-space-wave_2 { 265 0% { clip-path: path('M137.15,.03c-16.75-.44-27.29,4.77-33.69,10.72-6.4,5.96-24.52,19.73-43.08,9.17-13.1-7.46-26.74-3.14-38.25,4.78C6.61,35.38,3.74,44.74,0,59.63H137.15V.03Z'); } 266 100% { clip-path: path('M137.15,0c-17.21,10.16-17.24,10.78-37.72,9.6-14.61-.84-20.23,16.56-38.49,12.08-14.89-3.65-18.21,9.53-31.75,6.88C10.69,24.95,3.74,44.71,0,59.6H137.15V0Z'); } 267} 268@keyframes encrypted-space-wave_3 { 269 0% { clip-path: path('M132.61,0c-9.18,3.92-11.29,5.2-19.97,4.19-9.33-1.09-10.97,12.29-25.37,15.53-9.69,2.18-17.12-7.15-28.89-5.37-15.68,2.38-16.35,7.79-29.01,9.38C4.37,26.86-.79,50.3,.09,54.49H132.61V0Z'); } 270 100% { clip-path: path('M132.53,0c-3.02,8.29-13.7,3.05-21.15,10.78-6.52,6.76-10.8,3.72-29.64,3.97-9.93,.13-15.11,7.85-26.94,9.14-10.81,1.18-15.58-4.27-28.13-1.99C8.04,25.29-.82,50.3,.06,54.49H132.53V0Z'); } 271} 272@keyframes encrypted-space-wave_4 { 273 0% { clip-path: path('M128.7,.2c-16.75-.44-23.99-.69-30.39,5.26-6.4,5.96-8.68,12.19-26.99,7.33-9.6-2.54-24.02-4.44-34.16,2.33-10.83,7.23-14.87,9.49-22.83,10.33C1.59,26.81-.72,39.73,.17,43.92H128.7V.2Z'); } 274 100% { clip-path: path('M128.53,0c-13.22,12-19.04,5.96-27.62,4.3-12.9-2.5-14.51,2.69-29.7,10.84-8.75,4.7-15.33,2.81-28.21-.3-15.44-3.72-19.2,7.95-29.03,11.04C4.72,28.8,.76,37.83,0,43.72H128.53V0Z'); } 275} 276 </style></button></div></div></div></a><a href="https://namer-ui.vercel.app/components/fishy-button" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Fishy Button</h3><p style="font-size:17px;
276color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">A sleek button featuring floating fish that appear on hover.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/fishy-file-drop" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><img src="/previews/fishy-file-drop.webp" alt="Fishy File Drop" draggable="false" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:16px"/></div></a><a href="https://namer-ui.vercel.app/components/fishy-file-drop" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Fishy File Drop</h3><p style="font-size:17px;color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">An unorthodox drop zone.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/shamayim-toggle-switch" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><img src="/previews/shamayim-toggle-switch.webp" alt="Shamayim Toggle Switch" draggable="false" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:16px"/></div></a><a href="https://namer-ui.vercel.app/components/shamayim-toggle-switch" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Shamayim Toggle Switch</h3><p style="font-size:17px;
276color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">A toggle switch with support for default on/off state, RTL mirroring, and change callbacks.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/metamorphic-loader" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center"><div class="w-full h-screen bg-[#fff] flex items-center justify-center"><div class="flex items-center justify-center"><div size="136" class="sc-bdDsCe BWfJw"><div style="background-color:#00a7fa;width:136px;height:136px;animation-delay:0.1s" class="sc-gtcBCx fzzOUD"></div><div style="background-color:#13baff;width:117px;height:117px;animation-delay:0.2s" class="sc-gtcBCx fzzOUD"></div><div style="background-color:#26cdff;width:98px;height:98px;animation-delay:0.30000000000000004s" class="sc-gtcBCx fzzOUD"></div><div style="background-color:#39e0ff;width:79px;height:79px;animation-delay:0.4s" class="sc-gtcBCx fzzOUD"></div><div style="background-color:#4cf3ff;width:60px;height:60px;animation-delay:0.5s" class="sc-gtcBCx fzzOUD"></div><div style="background-color:#5fffff;width:41px;height:41px;animation-delay:0.6000000000000001s" class="sc-gtcBCx fzzOUD"></div><div style="background-color:#72ffff;width:22px;height:22px;animation-delay:0.7000000000000001s" class="sc-gtcBCx fzzOUD"></div><div style="background-color:#85ffff;width:3px;height:3px;animation-delay:0.8s" class="sc-gtcBCx fzzOUD"></div><div style="background-color:#98ffff;width:-16px;height:-16px;animation-delay:0.9s" class="sc-gtcBCx fzzOUD"></div></div></div></div></div></div></a><a href="https://namer-ui.vercel.app/components/metamorphic-loader" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Metamorphic Loader</h3><p style="font-size:17px;color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">A loader that dynamically changes shape from a circle to a rounded square, and vice versa.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/bauble-toggle" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><img src="/previews/bauble-toggle.webp" alt="Bauble Toggle" draggable="false" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:16px"/></div></a><a href="https://namer-ui.vercel.app/components/bauble-toggle" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Bauble Toggle</h3><p style="font-size:17px;
276color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">An ornamental toggle switch styled as a Christmas bauble.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/login-form" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><img src="/previews/login-form.webp" alt="Login Form" draggable="false" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:16px"/></div></a><a href="https://namer-ui.vercel.app/components/login-form" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Login Form</h3><p style="font-size:17px;color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">A flexible, customizable login/register card with floating labels, animated transitions, and theming options.</p></div></div></div><div style="max-width:100%;display:block;position:relative" class="jsx-2bd42743847a4f60 inflected-card-link"><div style="--tag-brightness:brightness(0.80)" class="jsx-2bd42743847a4f60 inflected-card"><div style="--parent-bg:var(--background)" class="jsx-2bd42743847a4f60 inflected-cardInner"><div class="jsx-2bd42743847a4f60 inflected-box"><a href="https://namer-ui.vercel.app/components/holographic-card" style="overflow:hidden;width:100%;position:relative;aspect-ratio:16 / 10;display:block;text-decoration:none" class="jsx-2bd42743847a4f60 inflected-imgBox rounded-[var(--smooth-border-radius)]"><div style="width:100%;height:100%;transform:scale(1);transition:transform 0.3s ease;will-change:transform" class="jsx-2bd42743847a4f60"><img src="/previews/holographic-card.webp" alt="Holographic Card" draggable="false" style="width:100%;height:100%;object-fit:cover;display:block;border-radius:16px"/></div></a><a href="https://namer-ui.vercel.app/components/holographic-card" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:-6px;right:-6px;width:96px;height:96px;background:var(--background);border-top-left-radius:50%;transition:all 0.3s ease;display:block" class="jsx-2bd42743847a4f60 inflected-icon"><div style="position:absolute;inset:10px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;cursor:pointer;background-color:var(--accent)" class="jsx-2bd42743847a4f60 inflected-iconBox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--foreground)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jsx-2bd42743847a4f60"><path d="m10 9 5-5 5 5"></path><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg></div></a></div></div><div class="jsx-2bd42743847a4f60 inflected-content"><h3 style="font-size:22px;color:var(--foreground);margin:0 0 0.24em 0;font-weight:bold;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">Holographic Card</h3><p style="font-size:17px;
276color:var(--middle-foreground);margin:0 0 0.3em 0;direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden" class="jsx-2bd42743847a4f60">An interactive card with a holographic gradient, animated electric border, and mouseâreactive tilt effect.</p></div></div></div></div></div></section></div><div class="h-[2px]"></div><div id="embedded" style="min-height:auto;position:relative" class="flex flex-col"><section class="relative overflow-hidden flex flex-col transition duration-300 ease-in-out py-20"><div class="mx-auto w-full" style="max-width:1448px;padding-left:48px;padding-right:48px;transition:max-width 0.5s ease-in-out, padding 0.3s ease-in-out"><div class="flex flex-col w-full overflow-hidden relative mb-10 items-start text-left" style="direction:ltr"><h2 class="section-embedded-projects-section-text-title font-headline tracking-tight leading-tight w-full transition-colors" style="font-size:16px;font-weight:600;line-height:1.2;color:var(--sub-foreground);transition:color 1s ease">Embedded Projects</h2><p class="section-embedded-projects-section-text-desc w-full relative mt-1.5" style="font-size:32px;line-height:1.4;margin-top:0.25rem;font-weight:900;position:relative"><span class="section-embedded-projects-section-text-desc-line-wrapper desc-line-wrapper block relative w-full" style="display:block;position:relative"><span class="base-layer" style="color:var(--reveal-mask);position:relative;z-index:1;display:block"><span>That's what I </span><span>used to make</span><span> before I got into web development.</span></span><span class="reveal-layer" aria-hidden="true" style="mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);-webkit-mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);color:var(--accent);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;pointer-events:none;user-select:none;display:block"><span>That's what I </span><span style="color:var(--foreground)">used to make</span><span> before I got into web development.</span></span></span></p></div><div class="mt-[50px]" style="margin-bottom:-382.88px"><div style="line-height:1.5;background-color:transparent;direction:ltr" class="jsx-cedd56b6202e8ee0 w-full mx-auto antialiased font-sans"><div class="jsx-cedd56b6202e8ee0 testimonial-container"><div style="display:grid;gap:1.10rem" class="jsx-cedd56b6202e8ee0 testimonial-grid"><div style="transform:translateX(-15.15px);perspective:1000px;position:relative" class="jsx-cedd56b6202e8ee0 image-container"><div data-index="0" style="position:absolute;width:82.62%;aspect-ratio:1 / 1;opacity:1;z-index:3;transition:opacity 0.3s ease" class="jsx-cedd56b6202e8ee0 testimonial-image"><div class="relative h-full w-full" style="border-radius:12.56px;padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:12px"><img src="/midbar.webp" alt="Midbar" draggable="false" style="width:100%;height:100%;object-fit:cover"/></div></div></div><div data-index="1" style="position:absolute;width:82.62%;aspect-ratio:1 / 1;opacity:0.7;z-index:2;transition:opacity 0.3s ease" class="jsx-cedd56b6202e8ee0 testimonial-image"><div class="relative h-full w-full" style="border-radius:12.56px;padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:12px"><img src="/lantern.webp" alt="Lantern" draggable="false" style="width:100%;height:100%;object-fit:cover"/></div></div></div><div data-index="2" style="position:absolute;width:82.62%;aspect-ratio:1 / 1;opacity:0.7;z-index:1;transition:opacity 0.3s ease" class="jsx-cedd56b6202e8ee0 testimonial-image"><div class="relative h-full w-full" style="border-radius:12.56px;padding:1px;background-color:var(--border-color);transition:background-color 0.3s ease-in-out"><div class="relative h-full w-full overflow-hidden" style="border-radius:12px"><img src="/eslms.webp" alt="Wi-Fi ESL" draggable="false" style="width:100%;height:100%;object-fit:cover"/>
276</div></div></div></div><div style="transform:translateY(-217.44px)" class="jsx-cedd56b6202e8ee0 flex flex-col justify-between py-4 w-full"><div style="flex:1;min-height:12rem;display:flex;align-items:flex-start" class="jsx-cedd56b6202e8ee0"><div style="opacity:1;transform:none"><h3 style="font-size:22px;color:var(--foreground);margin-top:0;margin-bottom:0.25em;text-align:left" class="jsx-cedd56b6202e8ee0 font-bold">Midbar</h3><p style="font-size:15px;color:var(--sub-foreground);margin-top:0;margin-bottom:0.25em;text-align:left" class="jsx-cedd56b6202e8ee0">Cybersecurity</p><p style="font-size:17px;color:var(--middle-foreground);margin-top:1.75em;margin-bottom:0em;text-align:left"><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">An<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">advanced<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">hardware<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">encryption<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">device<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">designed<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">to<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">increase<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">the<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">cost<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">of<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">unauthorized<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">access<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">to<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">the<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">user's<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">personal<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">data<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">as<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">much<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">as<!-- -->Â </span><span class="inline-block" style="filter:blur(0px);opacity:1;transform:none">possible.<!-- -->Â </span></p></div></div><div style="justify-content:flex-start;transform:translateY(209.53px)" class="jsx-cedd56b6202e8ee0 grid grid-cols-4 gap-4 w-full mt-4"><div class="jsx-cedd56b6202e8ee0 col-span-1"><button type="button" style="display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;cursor:pointer;opacity:1;border-radius:var(--border-radius);background-color:var(--background);color:var(--foreground);border:1px solid var(--border-color);font-size:1rem;font-weight:500;height:2.875rem;padding:0.75rem 0rem;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out;direction:ltr;user-select:none;overflow:hidden;position:relative;width:100%" class="jsx-40991297a23697ee RefinedchronicleButton variant-default "><div aria-hidden="true" style="position:absolute;inset:0;z-index:0;border-radius:var(--border-radius);overflow:hidden;pointer-events:none;background:transparent"><div style="width:100%;height:100%;overflow:hidden"><div style="position:relative;width:100%;height:100%;overflow:hidden;pointer-events:auto"><div style="width:100%;height:100%"><canvas style="display:block"></canvas></div></div></div></div><span class="jsx-40991297a23697ee flip-wrapper"><span class="jsx-40991297a23697ee"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-40991297a23697ee">Previous</em></span><span class="jsx-40991297a23697ee"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-40991297a23697ee">Previous</em></span></span></button></div><div class="jsx-cedd56b6202e8ee0 col-span-1"><button type="button" style="display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;cursor:pointer;opacity:1;border-radius:var(--border-radius);background-color:var(--background);color:var(--foreground);border:1px solid var(--border-color);font-size:1rem;font-weight:500;height:2.875rem;padding:0.75rem 0rem;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out;direction:ltr;user-select:none;overflow:hidden;position:relative;width:100%" class="jsx-40991297a23697ee RefinedchronicleButton variant-default "><div aria-hidden="true" style="position:absolute;inset:0;z-index:0;border-radius:var(--border-radius);overflow:hidden;pointer-events:none;background:transparent"><div style="width:100%;height:100%;overflow:hidden"><div style="position:relative;width:100%;height:100%;overflow:hidden;pointer-events:auto"><div style="width:100%;height:100%"><canvas style="display:block"></canvas></div></div></div></div><span class="jsx-40991297a23697ee flip-wrapper"><span class="jsx-40991297a23697ee"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-40991297a23697ee">Next</em></span><span class="jsx-40991297a23697ee"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-40991297a23697ee">Next</em></span></span></button></div><div class="jsx-cedd56b6202e8ee0 col-span-2"><a href="https://github.com/Northstrix/Midbar" target="_blank" rel="noopener noreferrer" style="display:inline-block;width:100%;height:100%" class="jsx-cedd56b6202e8ee0"><button as="span" type="button" style="display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;cursor:pointer;opacity:1;border-radius:var(--border-radius);background-color:var(--foreground);color:var(--background);border:0px solid transparent;font-size:1rem;font-weight:500;height:2.875rem;padding:none;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out;direction:ltr;user-select:none;overflow:hidden;position:relative;width:100%" class="jsx-dda2b379d878b0c8 RefinedchronicleButton variant-default "><span class="jsx-dda2b379d878b0c8 flip-wrapper"><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8"><span style="display:inline-flex;align-items:center;gap:0.6em" class="jsx-cedd56b6202e8ee0"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="21" height="21" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" style="margin-top:1px"><rect width="256" height="256" fill="none" stroke="none"></rect><path d="M141.38,64.68l11-11a46.62,46.62,0,0,1,65.94,0h0a46.62,46.62,0,0,1,0,65.94L193.94,144,183.6,154.34a46.63,46.63,0,0,1-66-.05h0A46.48,46.48,0,0,1,104,120.06"></path><path d="M114.62,191.32l-11,11a46.63,46.63,0,0,1-66-.05h0a46.63,46.63,0,0,1,.06-65.89L72.4,101.66a46.62,46.62,0,0,1,65.94,0h0A46.45,46.45,0,0,1,152,135.94"></path></svg>Learn More</span></em></span><span class="jsx-dda2b379d878b0c8"><em style="display:inline-flex;align-items:center;gap:0.5rem;font-size:inherit;font-weight:inherit;line-height:inherit;will-change:transform, opacity;transition:color 0.3s ease-in-out, transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s linear 0.2s" class="jsx-dda2b379d878b0c8"><span style="display:inline-flex;align-items:center;gap:0.6em" class="jsx-cedd56b6202e8ee0"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="21" height="21" fill="none" stroke="currentColor" stroke-width="21.4" stroke-linecap="round" stroke-linejoin="round" style="margin-top:1px"><rect width="256" height="256" fill="none" stroke="none"></rect><path d="M141.38,64.68l11-11a46.62,46.62,0,0,1,65.94,0h0a46.62,46.62,0,0,1,0,65.94L193.94,144,183.6,154.34a46.63,46.63,0,0,1-66-.05h0A46.48,46.48,0,0,1,104,120.06"></path><path d="M114.62,191.32l-11,11a46.63,46.63,0,0,1-66-.05h0a46.63,46.63,0,0,1,.06-65.89L72.4,101.66a46.62,46.62,0,0,1,65.94,0h0A46.45,46.45,0,0,1,152,135.94"></path></svg>Learn More</span></em></span></span></button></a></div></div></div></div></div></div></div></div></section></div><div class="h-[2px]"></div><div id="education" style="min-height:auto;position:relative" class="flex flex-col"><section class="relative overflow-hidden flex flex-col transition duration-300 ease-in-out py-20"><div class="mx-auto w-full" style="max-width:1448px;padding-left:48px;padding-right:48px;transition:max-width 0.5s ease-in-out, padding 0.3s ease-in-out"><div class="flex flex-col w-full overflow-hidden relative mb-10 items-start text-left" style="direction:ltr"><h2 class="section-education-section-text-title font-headline tracking-tight leading-tight w-full transition-colors" style="font-size:16px;font-weight:600;line-height:1.2;color:var(--sub-foreground);transition:color 1s ease">Education</h2><p class="section-education-section-text-desc w-full relative mt-1.5" style="font-size:32px;line-height:1.4;margin-top:0.25rem;font-weight:900;position:relative"><span class="section-education-section-text-desc-line-wrapper desc-line-wrapper block relative w-full" style="display:block;position:relative"><span class="base-layer" style="color:var(--reveal-mask);position:relative;z-index:1;display:block"><span>Quite frankly, </span><span>I got my education mostly from YouTube and Coursera, and also by using Perplexity and Google.</span><span> Nevertheless, here are the degrees that I have.</span></span><span class="reveal-layer" aria-hidden="true" style="mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);-webkit-mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);color:var(--accent);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;pointer-events:none;user-select:none;display:block"><span>Quite frankly, </span><span style="color:var(--foreground)">I got my education mostly from YouTube and Coursera, and also by using Perplexity and Google.</span><span> Nevertheless, here are the degrees that I have.</span></span></span></p></div><div class="grid" style="display:grid;grid-template-columns:repeat(1, 1fr);gap:16px;width:100%"><div dir="ltr" class="block relative rounded-[var(--border-radius)] border border-[var(--border-color)] overflow-hidden transition-all duration-300" style="background-color:var(--background-adjacent-color);transition:background-color 0.3s ease-in-out, border 0.3s ease-in-out"><div class="flex flex-col relative z-10 p-5 space-y-2"><div class="transition-transform duration-300" style="transform:translateX(0);transition:transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"><h3 class="font-headline text-2xl font-semibold text-[var(--foreground)] mb-2">Secondary Education</h3><h4 class="font-body text-lg font-medium text-[var(--sub-foreground)] mb-1">Rubtsovsk Agrarian-Industrial College</h4><p class="font-body text-base text-[var(--foreground)] italic mb-3">Computer Systems and Clusters</p><div class="flex flex-row justify-between items-start border-t border-[var(--border-color)] pt-3 mt-2" style="color:var(--foreground);font-size:0.9rem"><div class="flex flex-col"><span class="font-semibold text-[var(--sub-foreground)] mb-1">Enrolled</span><span class="text-[var(--foreground)]">9/2016</span></div><div class="flex flex-col text-right"><span class="font-semibold text-[var(--sub-foreground)] mb-1">Graduated</span><span class="text-[var(--foreground)]">7/2020</span></div></div></div></div></div><div dir="ltr" class="block relative rounded-[var(--border-radius)] border border-[var(--border-color)] overflow-hidden transition-all duration-300" style="background-color:var(--background-adjacent-color);transition:background-color 0.3s ease-in-out, border 0.3s ease-in-out"><div class="flex flex-col relative z-10 p-5 space-y-2"><div class="transition-transform duration-300" style="transform:translateX(0);transition:transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"><h3 class="font-headline text-2xl font-semibold text-[var(--foreground)] mb-2">Bachelor of Computer Science</h3><h4 class="font-body text-lg font-medium text-[var(--sub-foreground)] mb-1">Altai State Technical University</h4><p class="font-body text-base text-[var(--foreground)] italic mb-3">Major in Informatics and Computational Devices</p><div class="flex flex-row justify-between items-start border-t border-[var(--border-color)] pt-3 mt-2" style="color:var(--foreground);font-size:0.9rem"><div class="flex flex-col"><span class="font-semibold text-[var(--sub-foreground)] mb-1">Enrolled</span><span class="text-[var(--foreground)]">9/2020</span></div><div class="flex flex-col text-right"><span class="font-semibold text-[var(--sub-foreground)] mb-1">Graduated</span><span class="text-[var(--foreground)]">7/2024</span></div></div></div></div></div></div></div></section></div><div class="h-[2px]"></div><div id="playground" style="min-height:auto;position:relative" class="flex flex-col"><section class="relative overflow-hidden flex flex-col transition duration-300 ease-in-out py-20"><div class="mx-auto w-full" style="max-width:1448px;padding-left:48px;padding-right:48px;transition:max-width 0.5s ease-in-out, padding 0.3s ease-in-out"><div class="flex flex-col w-full overflow-hidden relative mb-10 items-start text-left" style="direction:ltr"><h2 class="section-playground-section-text-title font-headline tracking-tight leading-tight w-full transition-colors" style="font-size:16px;font-weight:600;line-height:1.2;color:var(--sub-foreground);transition:color 1s ease">Playground</h2><p class="section-playground-section-text-desc w-full relative mt-1.5" style="font-size:32px;line-height:1.4;margin-top:0.25rem;font-weight:900;position:relative"><span class="section-playground-section-text-desc-line-wrapper desc-line-wrapper block relative w-full" style="display:block;position:relative"><span class="base-layer" style="color:var(--reveal-mask);position:relative;z-index:1;display:block"><span>I'll leave it </span><span>for you</span><span> to explore.</span></span><span class="reveal-layer" aria-hidden="true" style="mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);-webkit-mask-image:linear-gradient(to right, black 0%, black var(--progress), transparent var(--progress), transparent 100%);color:var(--accent);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;pointer-events:none;user-select:none;display:block"><span>I'll leave it </span><span style="color:var(--foreground)">for you</span><span> to explore.</span></span></span></p></div><div class="flex flex-col w-full relative justify-start
276items-stretch"><div style="width:100%;height:calc(100vh - 215px);min-height:calc(100vh - 215px);position:relative;display:flex;justify-content:center;align-items:center"><div class="absolute inset-0 z-0 pointer-events-none" style="opacity:0"></div><div class="absolute top-[1px] left-[1px] z-[1] w-[calc(100%-2px)] h-[calc(100%-2px)] overflow-hidden rounded-[var(--moderate-rounding)] pointer-events-none"><div class="[perspective:3000px] p-8 relative flex min-h-screen w-full items-center justify-center pointer-events-auto" style="direction:rtl"><div style="background-color:rgba(8, 8, 8, 0.85);border:1px solid rgba(255,255,255,0.15);box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.25);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;width:520px;will-change:transform;border-radius:var(--border-radius);overflow:hidden;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none" class="h-auto shadow-2xl transform-3d flex flex-col items-center cursor-grab active:cursor-grabbing absolute top-124 left-[30%] rotate-[0deg]" draggable="false"><div class="relative z-10 w-full h-full flex flex-col gap-4 p-6"><div class="relative w-full overflow-hidden rounded-[var(--border-radius)] flex-shrink-0" style="border:1px solid rgba(255,255,255,0.15);aspect-ratio:1.3689839572192513"><img src="/react-cryptographic-toolkit.webp" alt="React Cryptographic Toolkit" class="w-full h-full object-center opacity-75 select-none pointer-events-none relative z-10 min-h-[300px] min-w-[410px] object-cover rounded-[var(--outer-moderate-rounding)]" draggable="false" style="object-fit:cover;object-position:center center;mix-blend-mode:normal"/></div><div class="text-[rgba(255,255,255,0.92)] font-medium tracking-wide drop-shadow-sm select-none pointer-events-none py-1"><h3 class="mt-4 text-center text-2xl font-bold text-[var(--background-adjacent-color)]">React Cryptographic Toolkit</h3></div></div><div class="absolute inset-0 opacity-[0.05] pointer-events-none mix-blend-overlay z-0" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")"></div><div style="opacity:0" class="pointer-events-none absolute inset-0 bg-gradient-to-tr from-white/10 via-trans
276parent to-transparent z-20"></div></div><div style="background-color:rgba(8, 8, 8, 0.85);border:1px solid rgba(255,255,255,0.15);box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.25);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;width:520px;will-change:transform;border-radius:var(--border-radius);overflow:hidden;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none" class="h-auto shadow-2xl transform-3d flex flex-col items-center cursor-grab active:cursor-grabbing absolute top-56 left-[-2.5%] rotate-[-2deg]" draggable="false"><div class="relative z-10 w-full h-full flex flex-col gap-4 p-6"><div class="relative w-full overflow-hidden rounded-[var(--border-radius)] flex-shrink-0" style="border:1px solid rgba(255,255,255,0.15);aspect-ratio:1.3689839572192513"><img src="/clandestine.webp" alt="Clandestine" class="w-full h-full object-center opacity-75 select-none pointer-events-none relative z-10 min-h-[300px] min-w-[410px] object-cover rounded-[var(--outer-moderate-rounding)]" draggable="false" style="object-fit:cover;object-position:center center;mix-blend-mode:normal"/></div><div class="text-[rgba(255,255,255,0.92)] font-medium tracking-wide drop-shadow-sm select-none pointer-events-none py-1"><h3 class="mt-4 text-center text-2xl font-bold text-[var(--background-adjacent-color)]">Clandestine</h3></div></div><div class="absolute inset-0 opacity-[0.05] pointer-events-none mix-blend-overlay z-0" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")"></div><div style="opacity:0" class="pointer-events-none absolute inset-0 bg-gradient-to-tr from-white/10 via-trans
276parent to-transparent z-20"></div></div><div style="background-color:rgba(8, 8, 8, 0.85);border:1px solid rgba(255,255,255,0.15);box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.25);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;width:520px;will-change:transform;border-radius:var(--border-radius);overflow:hidden;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none" class="h-auto shadow-2xl transform-3d flex flex-col items-center cursor-grab active:cursor-grabbing absolute top-60 right-[10%] rotate-[2deg]" draggable="false"><div class="relative z-10 w-full h-full flex flex-col gap-4 p-6"><div class="relative w-full overflow-hidden rounded-[var(--border-radius)] flex-shrink-0" style="border:1px solid rgba(255,255,255,0.15);aspect-ratio:1.3689839572192513"><img src="/namer-ui-for-vue.webp" alt="Namer UI For Vue" class="w-full h-full object-center opacity-75 select-none pointer-events-none relative z-10 min-h-[300px] min-w-[410px] object-cover rounded-[var(--outer-moderate-rounding)]" draggable="false" style="object-fit:cover;object-position:center center;mix-blend-mode:normal"/></div><div class="text-[rgba(255,255,255,0.92)] font-medium tracking-wide drop-shadow-sm select-none pointer-events-none py-1"><h3 class="mt-4 text-center text-2xl font-bold text-[var(--background-adjacent-color)]">Namer UI For Vue</h3></div></div><div class="absolute inset-0 opacity-[0.05] pointer-events-none mix-blend-overlay z-0" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")"></div><div style="opacity:0" class="pointer-events-none absolute inset-0 bg-gradient-to-tr from-white/10 via-trans
276parent to-transparent z-20"></div></div><div style="background-color:rgba(8, 8, 8, 0.85);border:1px solid rgba(255,255,255,0.15);box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.25);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;width:520px;will-change:transform;border-radius:var(--border-radius);overflow:hidden;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none" class="h-auto shadow-2xl transform-3d flex flex-col items-center cursor-grab active:cursor-grabbing absolute top-[-120px] left-[1%] rotate-[6deg]" draggable="false"><div class="relative z-10 w-full h-full flex flex-col gap-4 p-6"><div class="relative w-full overflow-hidden rounded-[var(--border-radius)] flex-shrink-0" style="border:1px solid rgba(255,255,255,0.15);aspect-ratio:1.3689839572192513"><img src="/nof.webp" alt="× ××£ | Nof" class="w-full h-full object-center opacity-75 select-none pointer-events-none relative z-10 min-h-[300px] min-w-[410px] object-cover rounded-[var(--outer-moderate-rounding)]" draggable="false" style="object-fit:cover;object-position:center center;mix-blend-mode:normal"/></div><div class="text-[rgba(255,255,255,0.92)] font-medium tracking-wide drop-shadow-sm select-none pointer-events-none py-1"><h3 class="mt-4 text-center text-2xl font-bold text-[var(--background-adjacent-color)]">× ××£ | Nof</h3></div></div><div class="absolute inset-0 opacity-[0.05] pointer-events-none mix-blend-overlay z-0" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")"></div><div style="opacity:0" class="pointer-events-none absolute inset-0 bg-gradient-to-tr from-white/10 via-trans
276parent to-transparent z-20"></div></div><div style="background-color:rgba(8, 8, 8, 0.85);border:1px solid rgba(255,255,255,0.15);box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.25);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;width:520px;will-change:transform;border-radius:var(--border-radius);overflow:hidden;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none" class="h-auto shadow-2xl transform-3d flex flex-col items-center cursor-grab active:cursor-grabbing absolute top-84 left-[64%] rotate-[-4deg]" draggable="false"><div class="relative z-10 w-full h-full flex flex-col gap-4 p-6"><div class="relative w-full overflow-hidden rounded-[var(--border-radius)] flex-shrink-0" style="border:1px solid rgba(255,255,255,0.15);aspect-ratio:1.3689839572192513"><img src="/merucav.webp" alt="×ר××× | Merucav" class="w-full h-full object-center opacity-75 select-none pointer-events-none relative z-10 min-h-[300px] min-w-[410px] object-cover rounded-[var(--outer-moderate-rounding)]" draggable="false" style="object-fit:cover;object-position:center center;mix-blend-mode:normal"/></div><div class="text-[rgba(255,255,255,0.92)] font-medium tracking-wide drop-shadow-sm select-none pointer-events-none py-1"><h3 class="mt-4 text-center text-2xl font-bold text-[var(--background-adjacent-color)]">×ר××× | Merucav</h3></div></div><div class="absolute inset-0 opacity-[0.05] pointer-events-none mix-blend-overlay z-0" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")"></div><div style="opacity:0" class="pointer-events-none absolute inset-0 bg-gradient-to-tr from-white/10 via-trans
276parent to-transparent z-20"></div></div><div style="background-color:rgba(8, 8, 8, 0.85);border:1px solid rgba(255,255,255,0.15);box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.25);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;width:520px;will-change:transform;border-radius:var(--border-radius);overflow:hidden;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none" class="h-auto shadow-2xl transform-3d flex flex-col items-center cursor-grab active:cursor-grabbing absolute top-0 left-[64%] rotate-[10deg]" draggable="false"><div class="relative z-10 w-full h-full flex flex-col gap-4 p-6"><div class="relative w-full overflow-hidden rounded-[var(--border-radius)] flex-shrink-0" style="border:1px solid rgba(255,255,255,0.15);aspect-ratio:1.3689839572192513"><img src="/namer-ui.webp" alt="Namer UI" class="w-full h-full object-center opacity-75 select-none pointer-events-none relative z-10 min-h-[300px] min-w-[410px] object-cover rounded-[var(--outer-moderate-rounding)]" draggable="false" style="object-fit:cover;object-position:center center;mix-blend-mode:normal"/></div><div class="text-[rgba(255,255,255,0.92)] font-medium tracking-wide drop-shadow-sm select-none pointer-events-none py-1"><h3 class="mt-4 text-center text-2xl font-bold text-[var(--background-adjacent-color)]">Namer UI</h3></div></div><div class="absolute inset-0 opacity-[0.05] pointer-events-none mix-blend-overlay z-0" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")"></div><div style="opacity:0" class="pointer-events-none absolute inset-0 bg-gradient-to-tr from-white/10 via-trans
276parent to-transparent z-20"></div></div><div style="background-color:rgba(8, 8, 8, 0.85);border:1px solid rgba(255,255,255,0.15);box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.25);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;width:520px;will-change:transform;border-radius:var(--border-radius);overflow:hidden;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none" class="h-auto shadow-2xl transform-3d flex flex-col items-center cursor-grab active:cursor-grabbing absolute top-20 left-[5%] rotate-[-4deg]" draggable="false"><div class="relative z-10 w-full h-full flex flex-col gap-4 p-6"><div class="relative w-full overflow-hidden rounded-[var(--border-radius)] flex-shrink-0" style="border:1px solid rgba(255,255,255,0.15);aspect-ratio:1.3689839572192513"><img src="/blueberry-loom.webp" alt="Blueberry Loom" class="w-full h-full object-center opacity-75 select-none pointer-events-none relative z-10 min-h-[300px] min-w-[410px] object-cover rounded-[var(--outer-moderate-rounding)]" draggable="false" style="object-fit:cover;object-position:center center;mix-blend-mode:normal"/></div><div class="text-[rgba(255,255,255,0.92)] font-medium tracking-wide drop-shadow-sm select-none pointer-events-none py-1"><h3 class="mt-4 text-center text-2xl font-bold text-[var(--background-adjacent-color)]">Blueberry Loom</h3></div></div><div class="absolute inset-0 opacity-[0.05] pointer-events-none mix-blend-overlay z-0" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")"></div><div style="opacity:0" class="pointer-events-none absolute inset-0 bg-gradient-to-tr from-white/10 via-trans
276parent to-transparent z-20"></div></div></div></div><div class="relative z-10 w-full h-full pointer-events-none flex items-center justify-center"><div class="group/bento flex flex-col h-full relative hover:shadow-xl transition duration-200 [--spread:40] [--start:0] [--active:0] [--glowingeffect-border-width:1px] [--repeating-conic-gradient-times:5]" style="--gradient:radial-gradient(circle, #dd7bbb 10%, #dd7bbb00 20%), radial-gradient(circle at 40% 40%, #d79f1e 5%, #d79f1e00 15%), radial-gradient(circle at 60% 60%, #5a922c 10%, #5a922c00 20%), radial-gradient(circle at 40% 60%, #4c7894 10%, #4c789400 20%), repeating-conic-gradient(from 236.84deg at 50% 50%, #dd7bbb 0%, #d79f1e calc(25% / var(--repeating-conic-gradient-times)), #5a922c calc(50% / var(--repeating-conic-gradient-times)), #4c7894 calc(75% / var(--repeating-conic-gradient-times)), #dd7bbb calc(100% / var(--repeating-conic-gradient-times)));padding:1px;border-radius:var(--border-radius);border:1px solid var(--border-color);transition:background-color 0.3s ease-in-out, border 0.3s ease-in-out;width:100%;height:100%;box-sizing:border-box;background-color:var(--background-adjacent-color)"><div class="glow rounded-[inherit] after:content-[""] after:rounded-[inherit] after:absolute after:-inset-[1px] after:[border:var(--glowingeffect-border-width)_solid_transparent] after:[background:var(--gradient)] after:[background-attachment:fixed] after:opacity-[var(--active)] after:transition-opacity after:duration-300 after:[mask-clip:padding-box,border-box] after:[mask-composite:intersect] after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]"></div><div class="flex flex-col h-full" style="background-color:var(--card-background);display:flex;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box;position:relative;z-index:1"><div class="relative w-full flex items-center justify-center py-20 min-h-[650px]" style="pointer-events:none"><div class="relative [perspective:1000px]" style="width:240px;height:336px;pointer-events:none"><div class="absolute top-0 origin-center shadow-2xl transform-gpu select-none pointer-events-auto cursor-default" style="width:240px;height:336px;border-radius:var(--outer-playing-card-rounding);left:calc(50% - 120px)"><div class="w-full h-full p-[1px] transition-colors duration-300" style="border-radius:var(--outer-playing-card-rounding);background-color:#aaa"><div class="relative w-full h-full overflow-hidden" style="background-color:#fff;border-radius:var(--playing-card-rounding)"><div class="absolute inset-0 z-0"><canvas class="w-full h-full block"></canvas></div><div class="absolute inset-0 z-10 bg-white" style="transform:none"></div><div class="absolute inset-0 z-20 pointer-events-none flex items-center justify-center"><div class="relative w-full" style="height:70%"><img alt="card-visual" draggable="false" decoding="async" data-nimg="fill" class="object-contain drop-shadow-lg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent;opacity:1" src="/playground-card-image.webp"/></div></div><div class="absolute inset-0 z-30 pointer-events-none select-none font-serif font-black" style="color:#3662F4;transition:color 0.3s ease-in-out;font-size:16px"><div style="position:absolute;top:13.333333333333332px;left:13.333333333333332px"><div class="flex flex-col items-center gap-[0.17em] leading-none"><div>æ´ª</div><div>ç§</div><div>å
¨</div></div></div><div style="position:absolute;bottom:13.333333333333332px;right:13.333333333333332px;transform:scale(-1, -1);transform-origin:center"><div class="flex flex-col items-center gap-[0.17em] leading-none"><div>æ´ª</div><div>ç§</div><div>å
¨</div></div></div></div></div></div></div><div class="absolute top-0 origin-center shadow-2xl transform-gpu select-none pointer-events-auto cursor-default" style="width:240px;height:336px;border-radius:var(--outer-playing-card-rounding);left:calc(50% - 120px)"><div class="w-full h-full p-[1px] transition-colors duration-300" style="border-radius:var(--outer-playing-card-rounding);background-color:#aaa"><div class="relative w-full h-full overflow-hidden" style="background-color:#fff;border-radius:var(--playing-card-rounding)"><div class="absolute inset-0 z-0"><canvas class="w-full h-full block"></canvas><div class="absolute inset-0 pointer-events-none" style="background:radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.5) 100%);mix-blend-mode:multiply"></div></div><div class="absolute inset-0 z-10 bg-white" style="transform:none"></div><div class="absolute inset-0 z-20 pointer-events-none flex items-center justify-center"><div class="relative w-full" style="height:80%"><img alt="card-visual" draggable="false" decoding="async" data-nimg="fill" class="object-contain drop-shadow-lg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent;opacity:1" src="/second-playground-card-image.png"/><div class="absolute inset-0 w-full h-full transition-opacity duration-300 ease-in-out" style="opacity:0"><img alt="card-reveal" draggable="false" decoding="async" data-nimg="fill" class="object-contain drop-shadow-lg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/second-playground-card-reveal-image.png"/></div></div></div><div class="absolute inset-0 z-30 pointer-events-none select-none font-serif font-black" style="color:#00A9FE;transition:color 0.3s ease-in-out;font-size:16px"><div style="position:absolute;top:13.333333333333332px;left:13.333333333333332px"><div class="flex flex-col items-center gap-[0.17em] leading-none"><div>æ¹</div><div>å</div></div></div><div style="position:absolute;bottom:13.333333333333332px;right:13.333333333333332px;transform:scale(-1, -1);transform-origin:center"><div class="flex flex-col items-center gap-[0.17em] leading-none"><div>æ¹</div><div>å</div></div></div></div></div></div></div><div class="absolute top-0 origin-center shadow-2xl transform-gpu select-none pointer-events-auto cursor-default" style="width:240px;height:336px;border-radius:var(--outer-playing-card-rounding);left:calc(50% - 120px)"><div class="w-full h-full p-[1px] transition-colors duration-300" style="border-radius:var(--outer-playing-card-rounding);background-color:#aaa"><div class="relative w-full h-full overflow-hidden" style="background-color:#fff;border-radius:var(--playing-card-rounding)"><div class="absolute inset-0 z-0"><canvas class="w-full h-full block"></canvas><div class="absolute inset-0 pointer-events-none" style="background:radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.5) 100%);mix-blend-mode:multiply"></div></div><div class="absolute inset-0 z-10 bg-white" style="transform:none"></div><div class="absolute inset-0 z-20 pointer-events-none flex items-center justify-center"><div class="relative w-full" style="height:92%"><img alt="card-visual" draggable="false" decoding="async" data-nimg="fill" class="object-contain drop-shadow-lg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent;opacity:1" src="/third-playground-card-image.png"/><div class="absolute inset-0 w-full h-full transition-opacity duration-300 ease-in-out" style="opacity:0"><img alt="card-reveal" draggable="false" decoding="async" data-nimg="fill" class="object-contain drop-shadow-lg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/third-playground-card-reveal-image.png"/></div></div></div><div class="absolute inset-0 z-30 pointer-events-none select-none font-serif font-black" style="color:#000;transition:color 0.3s ease-in-out;font-size:16px"><div style="position:absolute;top:13.333333333333332px;left:13.333333333333332px"><div class="flex flex-col items-center gap-[0.17em] leading-none"><div>æ¦</div><div>士</div><div>é</div></div></div><div style="position:absolute;bottom:13.333333333333332px;right:13.333333333333332px;transform:scale(-1, -1);transform-origin:center"><div class="flex flex-col items-center gap-[0.17em] leading-none"><div>ã</div><div>ã</div><div>ã</div><div>ã</div></div></div></div></div></div></div></div></div></div></div></div></div></div><div class="notificationContainer"></div><div class="notificationContainer rtlNotifications"></div></div></section></div><div class="h-[2px]"></div><div id="contact" style="background:var(--footer-background);min-height:auto;position:relative" class="flex flex-col"><div class="h-[1px] bg-[var(--border-color)]"></div><div class="h-[1px] bg-[var(--footer-background)]"></div><footer class="w-full text-[var(--foreground)] flex flex-col items-center" dir="ltr" style="min-height:100vh"><div class="h-[118px]"></div><div class="mx-auto w-full" style="max-width:1448px;padding-left:48px;padding-right:48px;transition:max-width 0.5s ease-in-out, padding 0.3s ease-in-out"><div class="flex flex-col gap-12 "><div class="grid gap-8 grid-cols-5" style="text-align:start;justify-items:start;align-items:start"><div class="flex flex-col items-start" style="text-align:start"><a href="." class="group/logo flex items-center font-bold gap-[6px] justify-center cursor-pointer" tabindex="0" style="color:var(--foreground);transition:color 0.3s ease-in-out;user-select:none;font-size:20px;max-width:max-content"><div style="position:relative;width:32px;height:32px;border-radius:var(--border-radius);overflow:hidden;background:rgba(0, 0, 0, 0.128);border:1px solid rgba(128,128,128,0.28);box-shadow:0 1px 10px 0 rgba(0,0,0,0.05);transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease"><div style="position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:var(--border-radius)"><div class="relative w-full h-full overflow-hidden" style="border-radius:inherit"><div class="absolute inset-0 pointer-events-none z-1" style="border-radius:inherit;overflow:hidden"><canvas class="block w-full h-full" style="border-radius:inherit"></canvas><div class="absolute inset-0" style="background:radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 62%);border-radius:inherit;pointer-events:none"></div></div></div></div><img src="/profile_image.webp" alt="logo" width="32" height="32" style="position:absolute;inset:0;z-index:1;background:none"/></div><span class="font-bold text-xl transition-colors duration-300 ease-in-out" style="color:var(--foreground)">Maxim Bortnikov</span></a><p class="mt-4 text-sm text-[var(--sub-foreground)]">Cybersecurity-oriented web developer.</p><div class="mt-4 md:mt-6" style="display:flex;width:100%"><div style="text-align:left" class="jsx-c34894fe78a6f7b flex flex-col items-center"><div class="jsx-c34894fe78a6f7b inline-flex flex-col items-stretch gap-4 md:gap-6 min-w-max w-full"><div class="jsx-c34894fe78a6f7b w-full"><a href="https://github.com/Northstrix/my-portfolio" style="margin:0;padding:1px;background:none;border:0;border-radius:var(--outer-border-radius);color:var(--foreground);font-weight:bold;display:flex;justify-content:center;align-items:center;text-decoration:none;user-select:none;-webkit-user-select:none;white-space:nowrap;transition:all .3s;width:100%;height:2.875rem;background-image:linear-gradient(135deg, #802EE9, #2E68E8);flex-direction:row;cursor:pointer" target="_blank" rel="noopener noreferrer"><span style="background:var(--footer-background);padding:0;border:0;border-radius:var(--border-radius);width:100%;height:100%;transition:300ms;
276display:flex;align-items:center;justify-content:center;font-weight:bold;color:var(--foreground);white-space:nowrap;font-family:inherit;font-size:16px;gap:0.5em;flex-direction:row"><div class="inline-flex items-center justify-center" style="display:inline-flex;align-items:center;height:1em;width:1em;font-size:1.1em;vertical-align:middle;flex-shrink:0"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform:none"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5 .08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2 c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9 c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65 -.17.6-.22 1.23-.15 1.85v4" opacity="1" pathLength="1" stroke-dashoffset="0" stroke-dasharray="1 1"></path><path d="M9 18c-4.51 2-5-2-7-2" style="transform:none;transform-origin:90% 50% 0;transform-box:fill-box"></path></svg></div>GitHub</span></a></div><a href="https://namer-ui.vercel.app/" target="_blank" rel="noopener noreferrer" dir="ltr" class="jsx-c34894fe78a6f7b badge-card flex flex-col justify-between rounded-[var(--border-radius)] select-none cursor-pointer border border-[var(--border-color)] bg-[var(--footer-background)] hover:bg-[var(--hovered-footer-badge-background)] hover:border-[var(--hovered-footer-badge-border-color)] transition-all duration-300 ease-in-out px-6 pt-4 pb-6 w-full min-h-[2.875rem]"><span class="jsx-c34894fe78a6f7b text-[var(--sub-foreground)] text-[12px] mb-2 select-none">Powered by</span><div style="justify-content:flex-start" class="jsx-c34894fe78a6f7b flex items-center gap-3"><span style="width:32px;height:32px;min-width:32px;min-height:32px;box-sizing:border-box;background:linear-gradient(135deg, #4776cb, #a19fe5, #6cc606);border-radius:var(--border-radius);padding:0px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden" class="jsx-c34894fe78a6f7b"><img src="/Namer.png" alt="Namer UI" width="32" height="32" style="width:100%;height:100%;object-fit:contain;display:block" draggable="false" class="jsx-c34894fe78a6f7b"/></span><span class="jsx-c34894fe78a6f7b flip-wrapper"><span class="jsx-c34894fe78a6f7b"><em class="jsx-c34894fe78a6f7b flip-text"><span class="jsx-c34894fe78a6f7b font-bold text-base text-[var(--foreground)] select-none whitespace-nowrap">Namer UI</span></em></span><span class="jsx-c34894fe78a6f7b"><em class="jsx-c34894fe78a6f7b flip-text"><span class="jsx-c34894fe78a6f7b font-bold text-base text-[var(--foreground)] select-none whitespace-nowrap">Namer UI</span></em></span></span></div></a><a href="https://merucav.netlify.app/" target="_blank" rel="noopener noreferrer" dir="ltr" class="jsx-c34894fe78a6f7b badge-card flex flex-col justify-between rounded-[var(--border-radius)] select-none cursor-pointer border border-[var(--border-color)] bg-[var(--footer-background)] hover:bg-[var(--hovered-footer-badge-background)] hover:border-[var(--hovered-footer-badge-border-color)] transition-all duration-300 ease-in-out px-6 pt-4 pb-6 w-full min-h-[2.875rem]"><span class="jsx-c34894fe78a6f7b text-[var(--sub-foreground)] text-[12px] mb-2 select-none">Tuned with</span><div style="justify-content:flex-start" class="jsx-c34894fe78a6f7b flex items-center gap-3"><span style="width:32px;height:32px;min-width:32px;min-height:32px;box-sizing:border-box;background:#fafafa;border-radius:var(--border-radius);padding:0px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden" class="jsx-c34894fe78a6f7b"><img src="/merucav-logo.webp" alt="Merucav" width="32" height="32" style="width:100%;height:100%;object-fit:contain;display:block" draggable="false" class="jsx-c34894fe78a6f7b"/></span><span class="jsx-c34894fe78a6f7b flip-wrapper"><span class="jsx-c34894fe78a6f7b"><em class="jsx-c34894fe78a6f7b flip-text"><span class="jsx-c34894fe78a6f7b font-bold text-base text-[var(--foreground)] select-none whitespace-nowrap">Merucav</span></em></span><span class="jsx-c34894fe78a6f7b"><em class="jsx-c34894fe78a6f7b flip-text"><span class="jsx-c34894fe78a6f7b font-bold text-base text-[var(--foreground)] select-none whitespace-nowrap">
276Merucav</span></em></span></span></div></a></div></div></div></div><nav aria-label="Footer Navigation" style="direction:ltr;text-align:start;justify-self:start"><h3 class="font-semibold text-[var(--foreground)] mb-4">Navigation</h3><ul class="space-y-[2px] "><li tabindex="0" style="max-width:max-content"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">Home</span></span></li><li tabindex="0" style="max-width:max-content"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">Projects</span></span></li><li tabindex="0" style="max-width:max-content"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">Components</span></span></li><li tabindex="0" style="max-width:max-content"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">Embedded Projects</span></span></li><li tabindex="0" style="max-width:max-content"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">Education</span></span></li><li tabindex="0" style="max-width:max-content"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">Playground</span></span></li><li tabindex="0" style="max-width:max-content"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">Credit</span></span></li></ul></nav><div style="direction:ltr;text-align:start;justify-self:start;transform:translateX(-24px);transition:transform 0.3s ease-in-out"><h3 class="font-semibold text-[var(--foreground)] mb-4 text-sm">Contact Info</h3><ul class="space-y-[2px] "><li style="max-width:max-content"><a href="mailto:[email protected]" class="hover:text-[var(--foreground)] transition-colors no-u
276nderline"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">[email protected]</span></span></a></li><li style="max-width:max-content"><span><span class="relative select-text cursor-text text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:transparent"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">X:</span></span> <a href="https://x.com/maxim_bortnikov" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--foreground)] transition-colors no-underline"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">maxim_bortnikov</span></span></a></span></li><li style="max-width:max-content"><span><span class="relative select-text cursor-text text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:transparent"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">Telegram:</span></span> <a href="https://t.me/maxim_brt" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--foreground)] transition-colors no-underline"><span class="relative select-text cursor-pointer text-sm" style="display:inline-block;max-width:100%;white-space:nowrap;overflow-x:visible;overflow-y:hidden;vertical-align:bottom"><div aria-hidden="true" class="absolute w-full left-0 rounded-[var(--border-radius)] pointer-events-none" style="height:var(--hh-bar);bottom:calc(-1 * var(--hh-gap));transform-origin:bottom center;z-index:0;background-color:var(--sub-foreground)"></div><span class="relative z-[1] inline-block" style="white-space:nowrap;user-select:text;color:var(--sub-foreground);padding-left:0px;padding-right:0px">maxim_brt</span></span></a></span></li></ul></div><div class="col-span-2 flex items-center justify-end" style="min-height:480px"><div class="relative flex items-center justify-center h-auto w-auto"><a href="/" class="origin-center shadow-2xl transform-gpu select-none pointer-events-auto block transition-transform duration-300 ease-in-out cursor-default" style="width:360px;height:503.99999999999994px;border-radius:var(--outer-playing-card-rounding);display:block;max-width:none"><div class="w-full h-full p-[1px] transition-colors duration-300" style="border-radius:var(--outer-playing-card-rounding);background-color:#aaa"><div class="relative w-full h-full overflow-hidden" style="border-radius:var(--playing-card-rounding)"><div class="absolute inset-0 overflow-hidden pointer-events-none transition-opacity duration-700 opacity-0" style="border-radius:var(--playing-card-rounding);z-index:1"><div style="width:100%;height:100%;position:absolute;inset:0"></div></div><div class="absolute inset-0 z-10 bg-white transition-opacity duration-300 ease-in-out" style="opacity:1;border-radius:var(--outer-playing-card-rounding)"></div><div class="absolute inset-0 z-20 pointer-events-none flex items-center justify-center"><div class="relative w-full" style="height:76%"><img alt="contact-card" draggable="false" decoding="async" data-nimg="fill" class="object-contain drop-shadow-lg" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="/contact-card-image.png"/></div></div><div class="absolute inset-0 z-30 pointer-events-none select-none font-serif font-black" style="color:#000;transition:color 0.3s ease-in-out;font-size:24px"><div style="position:absolute;top:20px;left:20px"><div class="flex flex-col items-center gap-[0.17em] leading-none"><div>å</div><div>è</div></div></div><div style="position:absolute;bottom:20px;right:20px;transform:scale(-1, -1)"><div class="flex flex-col items-center gap-[0.17em] leading-none"><div>ã</div><div>ã</div><div>ã</div></div></div></div></div></div></a></div></div></div><div class="w-full flex justify-center my-10" style="display:flex;justify-content:center;text-align:center"></div></div></div></footer></div></main></div></div></div></div></div><!--$--><!--/$-->
276<script src="/_next/static/chunks/49426ea2aee2ba08.js" id="_R_" async=""></script>
276<script>(self.__next_f=self.__next_f||[]).push([0])</script>
276<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"default\"]\n4:I[36768,[\"/_next/static/chunks/f4eba6aed985de63.js\",\"/_next/static/chunks/d3d1cda1c13d58f9.js\"],\"default\"]\n5:I[47257,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"ClientPageRoot\"]\n6:I[31713,[\"/_next/static/chunks/14a50d6962d09e5e.js\",\"/_next/static/chunks/2e45e8be44239b42.js\",\"/_next/static/chunks/d3d1cda1c13d58f9.js\"],\"default\"]\n9:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"OutletBoundary\"]\na:\"$Sreact.suspense\"\nc:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"ViewportBoundary\"]\ne:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"MetadataBoundary\"]\n10:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"default\"]\n:HL[\"/_next/static/chunks/f4617ae43532b494.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/chunks/c6b8ee56d6ac0e93.css\",\"style\"]\n"])</script>
276<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"oqAokN6inFTXLCFBee58b\",\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/f4617ae43532b494.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$L4\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L5\",null,{\"Component\":\"$6\",\"serverProvidedParams\":{\"searchParams\":{},\"params\":{},\"promises\":[\"$@7\",\"$@8\"]}}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/c6b8ee56d6ac0e93.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/14a50d6962d09e5e.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/2e45e8be44239b42.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/d3d1cda1c13d58f9.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@b\"}]}]]}],{},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lc\",null,{\"children\":\"$@d\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Le\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.Metadata\",\"children\":\"$@f\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",[]],\"S\":true}\n"])</script>
276<script>self.__next_f.push([1,"7:{}\n8:\"$0:f:0:1:1:children:0:props:children:0:props:serverProvidedParams:params\"\n"])</script>
276<script>self.__next_f.push([1,"d:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
276<script>self.__next_f.push([1,"11:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"IconMark\"]\nf:[[\"$\",\"title\",\"0\",{\"children\":\"Maxim Bortnikov\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Cybersecurity-oriented web developer.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/profile_image.webp\"}],[\"$\",\"$L11\",\"3\",{}]]\nb:null\n"])</script>
276</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.