-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
53 lines (48 loc) · 56.5 KB
/
index.html
File metadata and controls
53 lines (48 loc) · 56.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<link rel="stylesheet" type="text/css" href="/assets/static/src_index-b3c78705.C9tosF9u.css">
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed" href="/rss.xml" />
<meta name="description" content="codex by fezcode..." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://fezcode.com/" />
<meta property="og:title" content="Fezcodex - Personal Blog and Projects" />
<meta property="og:description" content="Discover logs, posts, projects, and stories from Fezcode." />
<meta property="og:image" content="/images/asset/ogtitle.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://fezcode.com/" />
<meta name="twitter:title" content="Fezcodex - Personal Blog and Projects" />
<meta name="twitter:description" content="Discover logs, posts, projects, and stories from Fezcode." />
<meta name="twitter:image" content="/images/asset/ogtitle.png" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,200..900,0..100,0..1;1,9..144,200..900,0..100,0..1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=IM+Fell+English:ital@0;1&family=IM+Fell+DW+Pica:ital@0;1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet" />
<title>fezcodex</title>
</head>
<body class="bg-slate-950">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="react-root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height: auto; opacity: 0;"><div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"><div class="flex items-center gap-3 flex-1"><span class="shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"></path></svg></span><p class="font-mono text-xs md:text-sm font-black uppercase tracking-widest leading-tight">FEZTERRACOTTA IS ONLINE: A WEIGHTED CODEX OF BONE PAPER AND TERRA INK. ENABLE VIA SETTINGS OR COMMAND PALETTE.</p><a href="https://fezcode.com/settings?fezTheme=terracotta&fezBlogMode=terracotta#fezcodex-theme" class="shrink-0 inline-flex items-center gap-1 bg-black/20 hover:bg-black/40 px-3 py-1 rounded-sm border border-white/20 transition-all font-bold text-[10px] uppercase">Enable Terracotta<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></a></div><button class="p-1 hover:bg-black/20 rounded-sm transition-colors shrink-0" aria-label="Dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg></button></div><div class="h-0.5 w-full bg-black/10"></div></div><div class="bg-[#050505] min-h-screen font-sans flex"><div class="flex-1 flex flex-col min-w-0 transition-all duration-300 md:ml-0"><main class="flex-grow"><div style="opacity: 0;"><div class="min-h-screen relative bg-[#F3ECE0]"><div class="fixed top-6 left-6 z-50 flex flex-col items-start gap-3" style="opacity: 0; transform: translateX(-20px);"><a class="group flex items-center gap-2 px-4 py-2 transition-all duration-300 bg-[#F3ECE0] text-[#1A1613] border border-[#1A161320] font-ibm-plex-mono uppercase tracking-widest text-[10px] hover:bg-[#1A1613] hover:text-[#F3ECE0] hover:border-[#1A1613] rounded-none shadow-none" href="/" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="group-hover:-translate-x-1 transition-transform"><path d="M228,128a12,12,0,0,1-12,12H69l51.52,51.51a12,12,0,0,1-17,17l-72-72a12,12,0,0,1,0-17l72-72a12,12,0,0,1,17,17L69,116H216A12,12,0,0,1,228,128Z"></path></svg><span class="hidden sm:inline">Back to Reality</span></a><a class="group flex items-center gap-2 px-4 py-2 transition-all duration-300 bg-[#F3ECE0] text-[#1A1613] border border-[#1A161320] font-ibm-plex-mono uppercase tracking-widest text-[10px] hover:bg-[#1A1613] hover:text-[#F3ECE0] hover:border-[#1A1613] rounded-none shadow-none" href="/about/friends" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="group-hover:scale-110 transition-transform"><path d="M232.76,137.88a28.66,28.66,0,0,0-12-5.39C236.19,114.94,244,97.37,244,80c0-28.67-23.09-52-51.46-52A51.77,51.77,0,0,0,156,42.85,51.77,51.77,0,0,0,119.46,28C91.09,28,68,51.33,68,80c0,10.15,2.72,20.3,8.22,30.7a35.9,35.9,0,0,0-11.73,7.84L43,140H20A20,20,0,0,0,0,160v40a20,20,0,0,0,20,20H120a11.89,11.89,0,0,0,2.91-.36l64-16a11.4,11.4,0,0,0,1.79-.6l38.82-16.54c.23-.09.45-.19.67-.3a28.61,28.61,0,0,0,4.57-48.32ZM119.46,52A27.18,27.18,0,0,1,144.9,68.56a12,12,0,0,0,22.2,0A27.18,27.18,0,0,1,192.54,52C207.42,52,220,64.82,220,80c0,18.06-15,38.84-43.38,60.19L172,141.26c0-.42,0-.84,0-1.26a32,32,0,0,0-32-32H102.71C95.42,97.76,92,88.77,92,80,92,64.82,104.58,52,119.46,52ZM24,164H36v32H24Zm193.68.61-37.51,16L118.52,196H60V157l21.46-21.46A11.93,11.93,0,0,1,89.94,132H140a8,8,0,0,1,0,16H112a12,12,0,0,0,0,24h32a12.19,12.19,0,0,0,2.69-.3l67-15.41.47-.12a4.61,4.61,0,0,1,5.82,4.44A4.58,4.58,0,0,1,217.68,164.61Z"></path></svg><span class="hidden sm:inline">Friends of the Show</span></a><a class="group flex items-center gap-2 px-4 py-2 transition-all duration-300 bg-[#F3ECE0] text-[#1A1613] border border-[#1A161320] font-ibm-plex-mono uppercase tracking-widest text-[10px] hover:bg-[#1A1613] hover:text-[#F3ECE0] hover:border-[#1A1613] rounded-none shadow-none" href="/reading" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="group-hover:scale-110 transition-transform"><path d="M208,20H72A36,36,0,0,0,36,56V224a12,12,0,0,0,12,12H192a12,12,0,0,0,0-24H60v-4a12,12,0,0,1,12-12H208a12,12,0,0,0,12-12V32A12,12,0,0,0,208,20ZM120,44h36v59l-10.51-8.41a12,12,0,0,0-15,0L120,103Zm76,128H72a35.59,35.59,0,0,0-12,2.06V56A12,12,0,0,1,72,44H96v84a12,12,0,0,0,19.5,9.37l22.49-18,22.51,18A12,12,0,0,0,180,128V44h16Z"></path></svg><span class="hidden sm:inline">Reading</span></a></div><div class="w-full h-full" style="opacity: 0;"><div class="min-h-screen relative text-[#1A1613] font-fraunces selection:bg-[#C96442]/25" style="background: radial-gradient(1100px 600px at 85% -10%, rgb(232, 222, 206) 0%, transparent 55%), radial-gradient(900px 700px at 0% 110%, rgb(237, 227, 211) 0%, transparent 50%) rgb(243, 236, 224); font-feature-settings: "ss01", "ss02", "kern";"><div aria-hidden="true" class="pointer-events-none fixed inset-0 z-40 opacity-[0.32] mix-blend-multiply" style="background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");"></div><div class="relative z-10 mx-auto max-w-[1280px] px-6 md:px-14 pt-20 pb-[120px]"><div class="grid grid-cols-[1fr_auto_1fr] items-center font-ibm-plex-mono text-[10.5px] tracking-[0.14em] uppercase text-[#2E2620] py-[14px] pb-[18px] border-b border-[#1A161320] "><span class="inline-flex items-center min-w-0 truncate"><span aria-hidden="true" class="inline-block w-[6px] h-[6px] bg-[#C96442] rounded-full mr-2 shrink-0" style="transform: translateY(-1px);"></span><span class="truncate">Folio I · the author</span></span><span class="text-center truncate px-4">Cartographer of the codex · 2026</span><span class="text-right truncate">Ankara, Türkiye</span></div><section class="pt-20 md:pt-32 pb-16 border-b border-[#1A161320]"><div class="grid grid-cols-1 lg:grid-cols-[1.35fr_1fr] gap-10 md:gap-20 items-center"><div><div class="font-ibm-plex-mono text-[11px] tracking-[0.2em] uppercase text-[#9E4A2F] mb-7 flex items-center gap-3"><span>Headword · §</span><span aria-hidden="true" class="h-px flex-1 max-w-[80px] bg-[#9E4A2F]/50"></span><span>I</span></div><h1 aria-label="Ahmed Samil Bulbul" class="relative font-fraunces text-[#1A1613] leading-[0.82] tracking-[-0.04em] flex flex-wrap items-end" style="font-size: clamp(88px, 14vw, 200px); font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1, "wght" 460;"><span class="relative inline-block">A<span aria-hidden="true" class="absolute left-1/2 pointer-events-none" style="top: -72px; width: 1.5px; height: 72px; background-color: rgb(26, 22, 19); transform-origin: center bottom; transform: translateX(-50%) rotate(1.5deg);"><span class="block absolute -top-1 left-1/2 -translate-x-1/2" style="width: 5px; height: 5px; background-color: rgb(26, 22, 19); border-radius: 50%;"></span></span></span><span>hmed</span></h1><div class="mt-3 font-fraunces italic text-[#2E2620]" style="font-size: clamp(28px, 3.5vw, 44px); font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0, "wght" 380;"> Samil Bulbul</div><div class="mt-6 flex items-baseline gap-3 flex-wrap font-ibm-plex-mono text-[11px] tracking-[0.2em] uppercase text-[#2E2620]"><span class="text-[#9E4A2F]">n./v.</span><span aria-hidden="true" class="h-px w-6 bg-[#1A161320]"></span><span>Senior Software Engineer</span><span aria-hidden="true" class="text-[#2E2620]/30">·</span><span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 256 256"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg> Ankara, Türkiye</span></div><p class="mt-8 font-fraunces italic text-[22px] md:text-[26px] leading-[1.3] tracking-[-0.01em] text-[#1A1613] max-w-[36ch]" style="font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 0, "wght" 400;">turning complex <span class="text-[#9E4A2F] not-italic" style="font-style: normal; font-variation-settings: "wght" 560;"> distributed </span> problems into elegant, reliable code.</p><div class="mt-10 flex items-baseline gap-6 flex-wrap"><a href="mailto:[email protected]" class="group inline-flex items-center gap-3 bg-[#1A1613] text-[#F3ECE0] px-6 py-3 hover:bg-[#C96442] transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase">Write a letter</span></a><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">or</span><a href="https://github.com/fezcode" target="_blank" rel="noopener noreferrer" class="group font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#1A1613] hover:text-[#9E4A2F] transition-colors inline-flex items-center gap-2">View the atlas on github<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" class="group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"><path d="M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z"></path></svg></a></div></div><aside class="flex flex-col gap-8 lg:border-l border-[#1A161320] lg:pl-10"><div><h3 class="font-ibm-plex-mono text-[9.5px] tracking-[0.24em] uppercase text-[#9E4A2F] mb-4">The brief</h3><div class="grid grid-cols-2 gap-4"><div class=""><div class="font-ibm-plex-mono text-[10.5px] tracking-[0.14em] uppercase text-[#2E2620]/80">Experience</div><div class="font-fraunces text-[14px] text-[#1A1613] tracking-[0.02em] mt-0.5" style="font-variation-settings: "wght" 520, "opsz" 14;">8+<span class="ml-1.5 font-ibm-plex-mono text-[10px] tracking-[0.14em] uppercase text-[#2E2620]/60 normal-case">Years</span></div></div><div class=""><div class="font-ibm-plex-mono text-[10.5px] tracking-[0.14em] uppercase text-[#2E2620]/80">Systems Architected</div><div class="font-fraunces text-[14px] text-[#1A1613] tracking-[0.02em] mt-0.5" style="font-variation-settings: "wght" 520, "opsz" 14;">Critical<span class="ml-1.5 font-ibm-plex-mono text-[10px] tracking-[0.14em] uppercase text-[#2E2620]/60 normal-case">Scale</span></div></div><div class=""><div class="font-ibm-plex-mono text-[10.5px] tracking-[0.14em] uppercase text-[#2E2620]/80">Valedictorian</div><div class="font-fraunces text-[14px] text-[#1A1613] tracking-[0.02em] mt-0.5" style="font-variation-settings: "wght" 520, "opsz" 14;">of '18</div></div><div class=""><div class="font-ibm-plex-mono text-[10.5px] tracking-[0.14em] uppercase text-[#2E2620]/80">Surname</div><div class="font-fraunces text-[14px] text-[#1A1613] tracking-[0.02em] mt-0.5" style="font-variation-settings: "wght" 520, "opsz" 14;">Bulbul</div></div><div class=""><div class="font-ibm-plex-mono text-[10.5px] tracking-[0.14em] uppercase text-[#2E2620]/80">Kit</div><div class="font-fraunces text-[14px] text-[#1A1613] tracking-[0.02em] mt-0.5" style="font-variation-settings: "wght" 520, "opsz" 14;">Mechanical keys</div></div></div></div><div><h3 class="font-ibm-plex-mono text-[9.5px] tracking-[0.24em] uppercase text-[#9E4A2F] mb-4">Elsewhere</h3><div class="flex flex-col"><a href="https://github.com/fezcode" target="_blank" rel="noopener noreferrer" class="group flex items-baseline justify-between gap-4 py-2.5 border-b border-dashed border-[#1A161320]"><span class="font-fraunces text-[17px] text-[#1A1613] group-hover:text-[#9E4A2F] group-hover:italic transition-colors" style="font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0, "wght" 420;">GitHub</span><span class="font-ibm-plex-mono text-[10px] tracking-[0.2em] uppercase text-[#2E2620]/60 group-hover:text-[#9E4A2F] transition-colors">↗</span></a><a href="https://www.linkedin.com/in/ahmed-samil-bulbul/?locale=en_US" target="_blank" rel="noopener noreferrer" class="group flex items-baseline justify-between gap-4 py-2.5 border-b border-dashed border-[#1A161320]"><span class="font-fraunces text-[17px] text-[#1A1613] group-hover:text-[#9E4A2F] group-hover:italic transition-colors" style="font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0, "wght" 420;">LinkedIn</span><span class="font-ibm-plex-mono text-[10px] tracking-[0.2em] uppercase text-[#2E2620]/60 group-hover:text-[#9E4A2F] transition-colors">↗</span></a><a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer" class="group flex items-baseline justify-between gap-4 py-2.5 border-b border-dashed border-[#1A161320]"><span class="font-fraunces text-[17px] text-[#1A1613] group-hover:text-[#9E4A2F] group-hover:italic transition-colors" style="font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0, "wght" 420;">Email</span><span class="font-ibm-plex-mono text-[10px] tracking-[0.2em] uppercase text-[#2E2620]/60 group-hover:text-[#9E4A2F] transition-colors">↗</span></a><a href="https://x.com/fezcoddy" target="_blank" rel="noopener noreferrer" class="group flex items-baseline justify-between gap-4 py-2.5 border-b border-dashed border-[#1A161320]"><span class="font-fraunces text-[17px] text-[#1A1613] group-hover:text-[#9E4A2F] group-hover:italic transition-colors" style="font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0, "wght" 420;">X (Twitter)</span><span class="font-ibm-plex-mono text-[10px] tracking-[0.2em] uppercase text-[#2E2620]/60 group-hover:text-[#9E4A2F] transition-colors">↗</span></a><a href="https://fezcode.com" target="_blank" rel="noopener noreferrer" class="group flex items-baseline justify-between gap-4 py-2.5 border-b border-dashed border-[#1A161320]"><span class="font-fraunces text-[17px] text-[#1A1613] group-hover:text-[#9E4A2F] group-hover:italic transition-colors" style="font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0, "wght" 420;">Fezcode</span><span class="font-ibm-plex-mono text-[10px] tracking-[0.2em] uppercase text-[#2E2620]/60 group-hover:text-[#9E4A2F] transition-colors">↗</span></a></div></div></aside></div></section><section class="pt-20"><header class="grid grid-cols-1 md:grid-cols-[180px_1fr_auto] gap-6 md:gap-10 items-baseline pb-[60px]"><div class="font-ibm-plex-mono text-[11px] tracking-[0.2em] uppercase text-[#9E4A2F]">§ II — Experience</div><h2 class="font-fraunces text-[44px] md:text-[64px] leading-[0.95] tracking-[-0.025em] text-[#1A1613]" style="font-variation-settings: "opsz" 80, "SOFT" 60, "WONK" 1, "wght" 420;">Roles <em class="text-[#9E4A2F]" style="font-style: italic; font-variation-settings: "opsz" 80, "SOFT" 100, "WONK" 1, "wght" 360;">held.</em></h2><p class="font-ibm-plex-mono text-[11.5px] leading-[1.7] text-[#2E2620] max-w-[28ch] md:text-right">In reverse order. Each entry is a small true thing, shipped.</p></header><div class="border-t border-[#1A161320]"><article class="relative py-10 pl-[52px] border-b border-[#1A161320]" style="opacity: 0; transform: translateY(8px);"><span aria-hidden="true" class="absolute left-0 top-10 font-ibm-plex-mono text-[11px] tracking-[0.08em] text-[#9E4A2F]">01</span><div class="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-5 items-baseline"><div><h3 class="font-fraunces text-[28px] md:text-[36px] leading-[1.05] tracking-[-0.02em] text-[#1A1613]" style="font-variation-settings: "opsz" 48, "SOFT" 40, "WONK" 1, "wght" 450;">Senior Software Engineer<span class="ml-3 font-fraunces italic text-[22px] text-[#9E4A2F]" style="font-style: italic; font-variation-settings: "opsz" 28, "SOFT" 100, "wght" 380;">@ Picus Security</span></h3><p class="mt-2 font-fraunces italic text-[16px] leading-[1.55] text-[#2E2620] max-w-[70ch]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">Led flagship Exposure Validation (EXV) product development. Architected Cloud Security Validation (CSV) from scratch. Migrated PostgreSQL to MongoDB, reducing query times from 2 hours to under 5 minutes.</p></div><div class="flex flex-col md:items-end gap-1 shrink-0"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#2E2620]/75">Oct 2022 - Sep 2025</span><span class="font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase px-1.5 py-0.5 border border-[#1A161320] text-[#9E4A2F]">Cybersecurity</span></div></div></article><article class="relative py-10 pl-[52px] border-b border-[#1A161320]" style="opacity: 0; transform: translateY(8px);"><span aria-hidden="true" class="absolute left-0 top-10 font-ibm-plex-mono text-[11px] tracking-[0.08em] text-[#9E4A2F]">02</span><div class="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-5 items-baseline"><div><h3 class="font-fraunces text-[28px] md:text-[36px] leading-[1.05] tracking-[-0.02em] text-[#1A1613]" style="font-variation-settings: "opsz" 48, "SOFT" 40, "WONK" 1, "wght" 450;">Senior Software Engineer<span class="ml-3 font-fraunces italic text-[22px] text-[#9E4A2F]" style="font-style: italic; font-variation-settings: "opsz" 28, "SOFT" 100, "wght" 380;">@ Aselsan - Smart Cities</span></h3><p class="mt-2 font-fraunces italic text-[16px] leading-[1.55] text-[#2E2620] max-w-[70ch]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">Engineered Node-RED workflow platform scalability on K8s. Developed core NPM packages for low-code solutions. Built web-based deployment platform abstracting K8s complexity.</p></div><div class="flex flex-col md:items-end gap-1 shrink-0"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#2E2620]/75">Jan 2021 - Oct 2022</span><span class="font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase px-1.5 py-0.5 border border-[#1A161320] text-[#9E4A2F]">IoT / Big Data</span></div></div></article><article class="relative py-10 pl-[52px] border-b border-[#1A161320]" style="opacity: 0; transform: translateY(8px);"><span aria-hidden="true" class="absolute left-0 top-10 font-ibm-plex-mono text-[11px] tracking-[0.08em] text-[#9E4A2F]">03</span><div class="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-5 items-baseline"><div><h3 class="font-fraunces text-[28px] md:text-[36px] leading-[1.05] tracking-[-0.02em] text-[#1A1613]" style="font-variation-settings: "opsz" 48, "SOFT" 40, "WONK" 1, "wght" 450;">Software Engineer & DevOps<span class="ml-3 font-fraunces italic text-[22px] text-[#9E4A2F]" style="font-style: italic; font-variation-settings: "opsz" 28, "SOFT" 100, "wght" 380;">@ Aselsan - Toll Collection</span></h3><p class="mt-2 font-fraunces italic text-[16px] leading-[1.55] text-[#2E2620] max-w-[70ch]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">Refactored monolithic C++98 to C++17 microservices with gRPC. Reduced container sizes from 168MB to 8MB. Implemented air-gapped Nexus Repository Manager.</p></div><div class="flex flex-col md:items-end gap-1 shrink-0"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#2E2620]/75">Jan 2018 - Jan 2021</span><span class="font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase px-1.5 py-0.5 border border-[#1A161320] text-[#9E4A2F]">Critical Infra</span></div></div></article></div></section><section class="pt-20"><header class="grid grid-cols-1 md:grid-cols-[180px_1fr_auto] gap-6 md:gap-10 items-baseline pb-[60px]"><div class="font-ibm-plex-mono text-[11px] tracking-[0.2em] uppercase text-[#9E4A2F]">§ III — Instruments</div><h2 class="font-fraunces text-[44px] md:text-[64px] leading-[0.95] tracking-[-0.025em] text-[#1A1613]" style="font-variation-settings: "opsz" 80, "SOFT" 60, "WONK" 1, "wght" 420;">What the <em class="text-[#9E4A2F]" style="font-style: italic; font-variation-settings: "opsz" 80, "SOFT" 100, "WONK" 1, "wght" 360;">hands</em> know.</h2><p class="font-ibm-plex-mono text-[11.5px] leading-[1.7] text-[#2E2620] max-w-[28ch] md:text-right">A calibration of tools — measured by use, not by novelty.</p></header><ol class="border-t border-[#1A161320]"><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">01</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">Go (Golang)<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">language</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">98</span></li><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">02</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">System Design<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">core</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">91</span></li><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">03</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">Kubernetes & Cloud<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">devops</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">92</span></li><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">04</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">Distributed Systems<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">core</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">90</span></li><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">05</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">Node.js & Express.js<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">backend</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">88</span></li><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">06</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">C++ & C<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">language</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">85</span></li><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">07</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">PostgreSQL & Mongo<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">backend</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">88</span></li><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">08</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">React & JS<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">frontend</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">82</span></li><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">09</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">Rust<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">language</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">75</span></li><li class="grid grid-cols-[auto_1fr_auto] items-baseline gap-4 md:gap-6 py-4 border-b border-dashed border-[#1A161320]" style="opacity: 0; transform: translateY(6px);"><span class="font-ibm-plex-mono text-[10.5px] tracking-[0.22em] uppercase text-[#9E4A2F] w-[32px]">10</span><div><div class="font-fraunces text-[18px] tracking-[-0.01em] text-[#1A1613]" style="font-variation-settings: "opsz" 22, "SOFT" 50, "WONK" 1, "wght" 440;">CI/CD & DevOps<span class="ml-2 font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#2E2620]/60">devops</span></div><div class="mt-2 relative h-[2px] w-full bg-[#1A161320]"><div class="absolute inset-y-0 left-0 bg-[#C96442]" style="width: 0px;"></div></div></div><span class="font-ibm-plex-mono text-[11px] tracking-[0.14em] uppercase text-[#2E2620]/75 w-[44px] text-right">88</span></li></ol></section><section class="pt-20"><header class="grid grid-cols-1 md:grid-cols-[180px_1fr_auto] gap-6 md:gap-10 items-baseline pb-[60px]"><div class="font-ibm-plex-mono text-[11px] tracking-[0.2em] uppercase text-[#9E4A2F]">§ IV — Margins</div><h2 class="font-fraunces text-[44px] md:text-[64px] leading-[0.95] tracking-[-0.025em] text-[#1A1613]" style="font-variation-settings: "opsz" 80, "SOFT" 60, "WONK" 1, "wght" 420;">The <em class="text-[#9E4A2F]" style="font-style: italic; font-variation-settings: "opsz" 80, "SOFT" 100, "WONK" 1, "wght" 360;">person</em> behind the work.</h2><p class="font-ibm-plex-mono text-[11.5px] leading-[1.7] text-[#2E2620] max-w-[28ch] md:text-right">Edges, hobbies, small prides, small flaws.</p></header><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><div class="relative border border-[#1A161320] bg-[#F3ECE0] hover:border-[#1A1613]/40 hover:bg-[#E8DECE]/30 transition-colors p-6" style="opacity: 0; transform: translateY(8px);"><div class="flex items-start justify-between pb-4 border-b border-dashed border-[#1A161320] font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#9E4A2F]"><span>§ 01</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="text-[#C96442]"><path d="M251.76,88.94l-120-64a8,8,0,0,0-7.52,0l-120,64a8,8,0,0,0,0,14.12L32,117.87v48.42a15.91,15.91,0,0,0,4.06,10.65C49.16,191.53,78.51,216,128,216a130,130,0,0,0,48-8.76V240a8,8,0,0,0,16,0V199.51a115.63,115.63,0,0,0,27.94-22.57A15.91,15.91,0,0,0,224,166.29V117.87l27.76-14.81a8,8,0,0,0,0-14.12ZM128,200c-43.27,0-68.72-21.14-80-33.71V126.4l76.24,40.66a8,8,0,0,0,7.52,0L176,143.47v46.34C163.4,195.69,147.52,200,128,200Zm80-33.75a97.83,97.83,0,0,1-16,14.25V134.93l16-8.53ZM188,118.94l-.22-.13-56-29.87a8,8,0,0,0-7.52,14.12L171,128l-43,22.93L25,96,128,41.07,231,96Z"></path></svg></div><h4 class="mt-5 font-fraunces text-[22px] leading-[1.1] tracking-[-0.015em] text-[#1A1613]" style="font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 1, "wght" 460;">Valedictorian</h4><p class="mt-2 font-fraunces italic text-[14.5px] leading-[1.5] text-[#2E2620]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">Hacettepe University, BSc in Computer Science. GPA: 3.89/4.0. Coursework: Algorithms, Parallel Processing, Computer Networks.</p></div><div class="relative border border-[#1A161320] bg-[#F3ECE0] hover:border-[#1A1613]/40 hover:bg-[#E8DECE]/30 transition-colors p-6" style="opacity: 0; transform: translateY(8px);"><div class="flex items-start justify-between pb-4 border-b border-dashed border-[#1A161320] font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#9E4A2F]"><span>§ 02</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="text-[#C96442]"><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"></path></svg></div><h4 class="mt-5 font-fraunces text-[22px] leading-[1.1] tracking-[-0.015em] text-[#1A1613]" style="font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 1, "wght" 460;">The Optimizer</h4><p class="mt-2 font-fraunces italic text-[14.5px] leading-[1.5] text-[#2E2620]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">Reduced query times from 2 hours to 5 minutes. Shrunk container images by 95%. Optimization is not a task, it's a lifestyle.</p></div><div class="relative border border-[#1A161320] bg-[#F3ECE0] hover:border-[#1A1613]/40 hover:bg-[#E8DECE]/30 transition-colors p-6" style="opacity: 0; transform: translateY(8px);"><div class="flex items-start justify-between pb-4 border-b border-dashed border-[#1A161320] font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#9E4A2F]"><span>§ 03</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="text-[#C96442]"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.27,47,25.53a8,8,0,0,0,4.2,0c1-.26,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0Z"></path></svg></div><h4 class="mt-5 font-fraunces text-[22px] leading-[1.1] tracking-[-0.015em] text-[#1A1613]" style="font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 1, "wght" 460;">The Monolith Breaker</h4><p class="mt-2 font-fraunces italic text-[14.5px] leading-[1.5] text-[#2E2620]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">Refactored a massive legacy C++98 monolith into a modern, containerized C++17 microservices architecture using gRPC and Docker.</p></div><div class="relative border border-[#1A161320] bg-[#F3ECE0] hover:border-[#1A1613]/40 hover:bg-[#E8DECE]/30 transition-colors p-6" style="opacity: 0; transform: translateY(8px);"><div class="flex items-start justify-between pb-4 border-b border-dashed border-[#1A161320] font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#9E4A2F]"><span>§ 04</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="text-[#C96442]"><path d="M144,92a12,12,0,1,1,12,12A12,12,0,0,1,144,92ZM100,80a12,12,0,1,0,12,12A12,12,0,0,0,100,80Zm116,64A87.76,87.76,0,0,1,213,167l22.24,9.72A8,8,0,0,1,232,192a7.89,7.89,0,0,1-3.2-.67L207.38,182a88,88,0,0,1-158.76,0L27.2,191.33A7.89,7.89,0,0,1,24,192a8,8,0,0,1-3.2-15.33L43,167A87.76,87.76,0,0,1,40,144v-8H16a8,8,0,0,1,0-16H40v-8a87.76,87.76,0,0,1,3-23L20.8,79.33a8,8,0,1,1,6.4-14.66L48.62,74a88,88,0,0,1,158.76,0l21.42-9.36a8,8,0,0,1,6.4,14.66L213,89.05a87.76,87.76,0,0,1,3,23v8h24a8,8,0,0,1,0,16H216ZM56,120H200v-8a72,72,0,0,0-144,0Zm64,95.54V136H56v8A72.08,72.08,0,0,0,120,215.54ZM200,144v-8H136v79.54A72.08,72.08,0,0,0,200,144Z"></path></svg></div><h4 class="mt-5 font-fraunces text-[22px] leading-[1.1] tracking-[-0.015em] text-[#1A1613]" style="font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 1, "wght" 460;">Manual Deployments</h4><p class="mt-2 font-fraunces italic text-[14.5px] leading-[1.5] text-[#2E2620]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">If it's not automated, it's wrong. I will build a CI/CD pipeline for a Hello World app if I have to.</p></div><div class="relative border border-[#1A161320] bg-[#F3ECE0] hover:border-[#1A1613]/40 hover:bg-[#E8DECE]/30 transition-colors p-6" style="opacity: 0; transform: translateY(8px);"><div class="flex items-start justify-between pb-4 border-b border-dashed border-[#1A161320] font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#9E4A2F]"><span>§ 05</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="text-[#C96442]"><path d="M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z"></path></svg></div><h4 class="mt-5 font-fraunces text-[22px] leading-[1.1] tracking-[-0.015em] text-[#1A1613]" style="font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 1, "wght" 460;">Sonic Alchemist</h4><p class="mt-2 font-fraunces italic text-[14.5px] leading-[1.5] text-[#2E2620]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">Creating beats and melodies. Exploring the intersection of code and sound in music production.</p></div><div class="relative border border-[#1A161320] bg-[#F3ECE0] hover:border-[#1A1613]/40 hover:bg-[#E8DECE]/30 transition-colors p-6" style="opacity: 0; transform: translateY(8px);"><div class="flex items-start justify-between pb-4 border-b border-dashed border-[#1A161320] font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#9E4A2F]"><span>§ 06</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="text-[#C96442]"><path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z"></path></svg></div><h4 class="mt-5 font-fraunces text-[22px] leading-[1.1] tracking-[-0.015em] text-[#1A1613]" style="font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 1, "wght" 460;">Mechanical Keys</h4><p class="mt-2 font-fraunces italic text-[14.5px] leading-[1.5] text-[#2E2620]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">Loved mechanical keyboards. Thock, clack, and tactile perfection.</p></div><div class="relative border border-[#1A161320] bg-[#F3ECE0] hover:border-[#1A1613]/40 hover:bg-[#E8DECE]/30 transition-colors p-6" style="opacity: 0; transform: translateY(8px);"><div class="flex items-start justify-between pb-4 border-b border-dashed border-[#1A161320] font-ibm-plex-mono text-[9.5px] tracking-[0.22em] uppercase text-[#9E4A2F]"><span>§ 07</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="text-[#C96442]"><path d="M176,112H152a8,8,0,0,1,0-16h24a8,8,0,0,1,0,16ZM104,96H96V88a8,8,0,0,0-16,0v8H72a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0v-8h8a8,8,0,0,0,0-16ZM241.48,200.65a36,36,0,0,1-54.94,4.81c-.12-.12-.24-.24-.35-.37L146.48,160h-37L69.81,205.09l-.35.37A36.08,36.08,0,0,1,44,216,36,36,0,0,1,8.56,173.75a.68.68,0,0,1,0-.14L24.93,89.52A59.88,59.88,0,0,1,83.89,40H172a60.08,60.08,0,0,1,59,49.25c0,.06,0,.12,0,.18l16.37,84.17a.68.68,0,0,1,0,.14A35.74,35.74,0,0,1,241.48,200.65ZM172,144a44,44,0,0,0,0-88H83.89A43.9,43.9,0,0,0,40.68,92.37l0,.13L24.3,176.59A20,20,0,0,0,58,194.3l41.92-47.59a8,8,0,0,1,6-2.71Zm59.7,32.59-8.74-45A60,60,0,0,1,172,160h-4.2L198,194.31a20.09,20.09,0,0,0,17.46,5.39,20,20,0,0,0,16.23-23.11Z"></path></svg></div><h4 class="mt-5 font-fraunces text-[22px] leading-[1.1] tracking-[-0.015em] text-[#1A1613]" style="font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 1, "wght" 460;">Narrative Grooving</h4><p class="mt-2 font-fraunces italic text-[14.5px] leading-[1.5] text-[#2E2620]" style="font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 360;">Vibing with story-driven games. Letting the plot beats drop and the character arcs flow.</p></div></div></section><section class="pt-24 pb-4"><blockquote class="pl-10 pr-8 py-8 bg-[#E8DECE] border-l-[3px] border-[#C96442] max-w-[52ch]"><p class="font-fraunces italic text-[22px] md:text-[26px] leading-[1.4] text-[#2E2620]" style="font-variation-settings: "opsz" 32, "SOFT" 100, "WONK" 0, "wght" 340;">"Attention is the rarest and purest form of generosity."</p><cite class="block mt-4 font-ibm-plex-mono text-[10px] tracking-[0.2em] uppercase not-italic text-[#9E4A2F]">— Simone Weil, pinned above the desk</cite></blockquote></section><footer class="mt-[120px] pt-10 border-t border-[#1A161320] "><div class="grid grid-cols-2 md:grid-cols-4 gap-10 font-ibm-plex-mono text-[10.5px] leading-[1.8] tracking-[0.08em] text-[#2E2620]"><div><h5 class="font-ibm-plex-mono text-[9.5px] tracking-[0.24em] uppercase text-[#9E4A2F] mb-3">Type</h5><div>Display / Fraunces variable<br>Mono / IBM Plex Mono<br><span class="opacity-60">opsz 9–144 · SOFT 0–100 · WONK 0/1</span></div></div><div><h5 class="font-ibm-plex-mono text-[9.5px] tracking-[0.24em] uppercase text-[#9E4A2F] mb-3">Palette</h5><div>Bone · Ink · Terra · Brass · Sage<div class="flex gap-1.5 flex-wrap mt-1.5"><i aria-label="#F3ECE0" class="block rounded-[3px] border border-[#1A161320]" style="width: 24px; height: 24px; background: rgb(243, 236, 224); display: block;"></i><i aria-label="#1A1613" class="block rounded-[3px] border border-[#1A161320]" style="width: 24px; height: 24px; background: rgb(26, 22, 19); display: block;"></i><i aria-label="#C96442" class="block rounded-[3px] border border-[#1A161320]" style="width: 24px; height: 24px; background: rgb(201, 100, 66); display: block;"></i><i aria-label="#B88532" class="block rounded-[3px] border border-[#1A161320]" style="width: 24px; height: 24px; background: rgb(184, 133, 50); display: block;"></i><i aria-label="#6B8E23" class="block rounded-[3px] border border-[#1A161320]" style="width: 24px; height: 24px; background: rgb(107, 142, 35); display: block;"></i></div></div></div><div><h5 class="font-ibm-plex-mono text-[9.5px] tracking-[0.24em] uppercase text-[#9E4A2F] mb-3">Grid</h5><div>4px base · 12-col editorial<br>Rule weight 1px · opacity 12%<br>Hairline only — never bold.</div></div><div><h5 class="font-ibm-plex-mono text-[9.5px] tracking-[0.24em] uppercase text-[#9E4A2F] mb-3">Motion</h5><div>Cord sway · 6s ease-in-out<br>Page load · 400ms stagger<br>Hover · 180ms spring</div></div></div><div class="mt-10 pt-6 border-t border-[#1A161320] flex flex-col md:flex-row items-start md:items-center justify-between gap-4 font-ibm-plex-mono text-[10px] tracking-[0.2em] uppercase text-[#2E2620]/70"><span>© 2026 · Ahmed Samil Bulbul</span><span>About · terracotta · senior software engineer</span></div></footer><div class="fixed bottom-6 right-6 opacity-40 pointer-events-none z-20 hidden md:block"><svg viewBox="0 0 120 160" width="18" height="24" aria-hidden="true" class="" style="overflow: visible;"><line x1="60" y1="2" x2="60" y2="36" stroke="#C96442" stroke-width="1.6" stroke-linecap="round" opacity="0.65"></line><path d="M 52 34 L 68 34 L 66 40 L 54 40 Z" fill="#C96442" opacity="0.9"></path><path d="M 42 44 L 78 44 L 76 50 L 44 50 Z" fill="#C96442"></path><path d="M 44 50 L 76 50 L 86 72 L 80 96 L 60 156 L 40 96 L 34 72 Z" fill="#C96442"></path><path d="M 60 50 L 60 156 L 40 96 L 34 72 L 44 50 Z" fill="#C96442" opacity="0.82"></path><path d="M 78 56 L 82 72 L 78 72 Z" fill="#FFFFFF" opacity="0.18"></path></svg></div></div></div></div><div class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 p-2 shadow-2xl flex gap-2 bg-[#F3ECE0] border border-[#1A161320] backdrop-blur-md"><a class="relative px-4 py-2 flex items-center gap-2 transition-all bg-[#1A1613] text-[#F3ECE0]" href="/about/terracotta" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M208,24H72A32,32,0,0,0,40,56V224a8,8,0,0,0,8,8H192a8,8,0,0,0,0-16H56a16,16,0,0,1,16-16H208a8,8,0,0,0,8-8V32A8,8,0,0,0,208,24ZM120,40h48v72L148.79,97.6a8,8,0,0,0-9.6,0L120,112Zm80,144H72a31.82,31.82,0,0,0-16,4.29V56A16,16,0,0,1,72,40h32v88a8,8,0,0,0,12.8,6.4L144,114l27.21,20.4A8,8,0,0,0,176,136a8,8,0,0,0,8-8V40h16Z"></path></svg><span class="text-sm hidden md:inline">Terracotta</span></a><a class="relative px-4 py-2 flex items-center gap-2 transition-all text-[#2E2620]/70 hover:text-[#1A1613] hover:bg-[#E8DECE]/80" href="/about/luxe" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M200,112a8,8,0,0,1-8,8H152a8,8,0,0,1,0-16h40A8,8,0,0,1,200,112Zm-8,24H152a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm40-80V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Zm-80.26-34a8,8,0,1,1-15.5,4c-2.63-10.26-13.06-18-24.25-18s-21.61,7.74-24.25,18a8,8,0,1,1-15.5-4,39.84,39.84,0,0,1,17.19-23.34,32,32,0,1,1,45.12,0A39.76,39.76,0,0,1,135.75,166ZM96,136a16,16,0,1,0-16-16A16,16,0,0,0,96,136Z"></path></svg><span class="text-sm hidden md:inline">Luxe</span></a><a class="relative px-4 py-2 flex items-center gap-2 transition-all text-[#2E2620]/70 hover:text-[#1A1613] hover:bg-[#E8DECE]/80" href="/about/brutalist" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M144,92a12,12,0,1,1,12,12A12,12,0,0,1,144,92ZM100,80a12,12,0,1,0,12,12A12,12,0,0,0,100,80Zm116,64A87.76,87.76,0,0,1,213,167l22.24,9.72A8,8,0,0,1,232,192a7.89,7.89,0,0,1-3.2-.67L207.38,182a88,88,0,0,1-158.76,0L27.2,191.33A7.89,7.89,0,0,1,24,192a8,8,0,0,1-3.2-15.33L43,167A87.76,87.76,0,0,1,40,144v-8H16a8,8,0,0,1,0-16H40v-8a87.76,87.76,0,0,1,3-23L20.8,79.33a8,8,0,1,1,6.4-14.66L48.62,74a88,88,0,0,1,158.76,0l21.42-9.36a8,8,0,0,1,6.4,14.66L213,89.05a87.76,87.76,0,0,1,3,23v8h24a8,8,0,0,1,0,16H216ZM56,120H200v-8a72,72,0,0,0-144,0Zm64,95.54V136H56v8A72.08,72.08,0,0,0,120,215.54ZM200,144v-8H136v79.54A72.08,72.08,0,0,0,200,144Z"></path></svg><span class="text-sm hidden md:inline">Brutalist</span></a><a class="relative px-4 py-2 flex items-center gap-2 transition-all text-[#2E2620]/70 hover:text-[#1A1613] hover:bg-[#E8DECE]/80" href="/about/skills" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M200,112a8,8,0,0,1-8,8H152a8,8,0,0,1,0-16h40A8,8,0,0,1,200,112Zm-8,24H152a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm40-80V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Zm-80.26-34a8,8,0,1,1-15.5,4c-2.63-10.26-13.06-18-24.25-18s-21.61,7.74-24.25,18a8,8,0,1,1-15.5-4,39.84,39.84,0,0,1,17.19-23.34,32,32,0,1,1,45.12,0A39.76,39.76,0,0,1,135.75,166ZM96,136a16,16,0,1,0-16-16A16,16,0,0,0,96,136Z"></path></svg><span class="text-sm hidden md:inline">Skill Deck</span></a><a class="relative px-4 py-2 flex items-center gap-2 transition-all text-[#2E2620]/70 hover:text-[#1A1613] hover:bg-[#E8DECE]/80" href="/about/dossier" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM184,96a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,96Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,128Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,160Z"></path></svg><span class="text-sm hidden md:inline">Dossier</span></a><a class="relative px-4 py-2 flex items-center gap-2 transition-all text-[#2E2620]/70 hover:text-[#1A1613] hover:bg-[#E8DECE]/80" href="/about/hud" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z"></path></svg><span class="text-sm hidden md:inline">The Terminal</span></a><a class="relative px-4 py-2 flex items-center gap-2 transition-all text-[#2E2620]/70 hover:text-[#1A1613] hover:bg-[#E8DECE]/80" href="/about/blueprint" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M160,112h48a16,16,0,0,0,16-16V48a16,16,0,0,0-16-16H160a16,16,0,0,0-16,16V64H128a24,24,0,0,0-24,24v32H72v-8A16,16,0,0,0,56,96H24A16,16,0,0,0,8,112v32a16,16,0,0,0,16,16H56a16,16,0,0,0,16-16v-8h32v32a24,24,0,0,0,24,24h16v16a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V160a16,16,0,0,0-16-16H160a16,16,0,0,0-16,16v16H128a8,8,0,0,1-8-8V88a8,8,0,0,1,8-8h16V96A16,16,0,0,0,160,112ZM56,144H24V112H56v32Zm104,16h48v48H160Zm0-112h48V96H160Z"></path></svg><span class="text-sm hidden md:inline">Blueprint</span></a><a class="relative px-4 py-2 flex items-center gap-2 transition-all text-[#2E2620]/70 hover:text-[#1A1613] hover:bg-[#E8DECE]/80" href="/about/map" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M200,152a31.84,31.84,0,0,0-19.53,6.68l-23.11-18A31.65,31.65,0,0,0,160,128c0-.74,0-1.48-.08-2.21l13.23-4.41A32,32,0,1,0,168,104c0,.74,0,1.48.08,2.21l-13.23,4.41A32,32,0,0,0,128,96a32.59,32.59,0,0,0-5.27.44L115.89,81A32,32,0,1,0,96,88a32.59,32.59,0,0,0,5.27-.44l6.84,15.4a31.92,31.92,0,0,0-8.57,39.64L73.83,165.44a32.06,32.06,0,1,0,10.63,12l25.71-22.84a31.91,31.91,0,0,0,37.36-1.24l23.11,18A31.65,31.65,0,0,0,168,184a32,32,0,1,0,32-32Zm0-64a16,16,0,1,1-16,16A16,16,0,0,1,200,88ZM80,56A16,16,0,1,1,96,72,16,16,0,0,1,80,56ZM56,208a16,16,0,1,1,16-16A16,16,0,0,1,56,208Zm56-80a16,16,0,1,1,16,16A16,16,0,0,1,112,128Zm88,72a16,16,0,1,1,16-16A16,16,0,0,1,200,200Z"></path></svg><span class="text-sm hidden md:inline">Mind Map</span></a></div></div></div></main></div></div><div class="fixed bottom-0 left-0 w-full h-32 pointer-events-none z-[9999]"><div class="absolute bottom-2 flex flex-col items-center pointer-events-auto cursor-help" style="width: 60px; transform: none;"><div class="relative" style="transform: none;"><div class="w-10 h-10 flex items-center justify-center rounded-lg border-2 bg-[#050505] border-[#10B981]/40 text-[#10B981] shadow-lg" style="transform: none;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M192,96a64,64,0,1,1-64-64A64,64,0,0,1,192,96Z" opacity="0.2"></path><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"></path></svg><div class="absolute top-2 left-2 flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div></div></div><div class="flex justify-around mt-[-4px]"><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color: rgb(16, 185, 129); transform: none;"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color: rgb(16, 185, 129); transform: none;"></div></div></div></div></div><div class="fixed top-24 right-6 md:right-12 z-[100] pointer-events-none flex flex-col items-end gap-2"><div class="pointer-events-auto flex flex-col-reverse gap-3"></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":{"is404":false},"urlPathname":"\\/about","pageId":"\\/pages","routeParams":{"*":"about"}}</script>
<script id="vike_globalContext" type="application/json">{}</script>
<script src="/assets/entries/entry-server-routing.BcC5DqNB.js" type="module" async></script>
<link rel="modulepreload" href="/assets/entries/pages.noN_BYeI.js" as="script" type="text/javascript">
<link rel="modulepreload" href="/assets/chunks/chunk-BXl3LOEh.js" as="script" type="text/javascript">
</body>
</html>