1<!DOCTYPE html> 2<html lang="en" class="scroll-smooth"> 3 <head> 4 <meta charset="UTF-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=9a4512d9-3746-4301-b255-d6858e66b864 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <title>John Doe - Lead Developer</title> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 11 <meta name="google-site-verification" content="google-site-verification-code"/> 12 <meta name="robots" content="index,follow"/> 13 <meta name="googlebot" content="index,follow"/> 14 <meta content="john doe, lead developer, tech innovators inc., web development, responsive design, accessible web experiences, open-source community, cv, portfolio" name="keywords"> 15 <meta content="John Doe, Lead Developer at Tech Innovators Inc." name="description"> 16 <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicons/apple-touch-icon.png"> 17 <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicons/favicon-32x32.png"> 18 <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicons/favicon-16x16.png"> 19 <link rel="manifest" href="/site.webmanifest"> 20 <link rel="canonical" href="https://11ty-innovative-intro.netlify.app"> 21 <meta property="og:locale" content="en_US"> 22 <meta property="og:type" content="website"> 23 <meta property="og:title" content="Resume of John Doe - Lead Developer"> 24 <meta property="og:description" content="John Doe, Lead Developer, Tech Innovators Inc."> 25 <meta property="og:url" content="https://11ty-innovative-intro.netlify.app"> 26 <meta property="og:site_name" content="11ty-innovative-intro"> 27 <meta property="og:image" content="https://lipsum.app/500x500"> 28 <meta property="og:image:width" content="500"> 29 <meta property="og:image:height" content="500"> 30 <meta property="og:image:type" content="image/jpeg"> 31 <meta content="All" name="audience"> 32 <link rel="stylesheet" href="/assets/css/styles.css"> 33 </head> 34 <body class="antialiased"> 35 <div class="container mx-auto py-4"> 36 <!-- Header --> 37<header class="sticky top-0 flex justify-between items-center py-6 bg-background-light/30 dark:bg-background-dark/30 px-4 38 backdrop-blur-sm"> 39 <a href="/" aria-label="Homepage" class="text-2xl font-bold tracking-tighter">GS</a> 40 <div 41 class="flex items-center gap-4"> 42 <!-- Desktop Navigation --> 43 <nav class="hidden md:flex gap-6 text-sm" aria-label="Main navigation"> 44 45 <a href="#about" class="hover:opacity-80 transition-opacity">About</a> 46 47 <a href="#projects" class="hover:opacity-80 transition-opacity">Projects</a> 48 49 <a href="#skills" class="hover:opacity-80 transition-opacity">Skills</a> 50 51 <a href="#contact" class="hover:opacity-80 transition-opacity">Contact</a> 52 53 </nav> 54 <!-- Mobile Menu Button --> 55 <button 56 id="menu-btn" 57 class="md:hidden p-2 z-50" 58 aria-label="Open menu" 59 aria-expanded="false" 60 aria-controls="mobile-menu"> 61 <svg 62 id="menu-open-icon" 63 xmlns="http://www.w3.org/2000/svg" 64 width="24" 65 height="24"
66 viewBox="0 0 24 24" 67 fill="none" 68 stroke="currentColor" 69 stroke-width="2" 70 stroke-linecap="round" 71 stroke-linejoin="round" 72 class="h-6 w-6"> 73 <line x1="4" x2="20" y1="12" y2="12"/> 74 <line x1="4" x2="20" y1="6" y2="6"/> 75 <line x1="4" x2="20" y1="18" y2="18"/> 76 </svg> 77 <svg 78 id="menu-close-icon" 79 xmlns="http://www.w3.org/2000/svg" 80 width="24" 81 height="24" 82 viewBox="0 0 24 24" 83 fill="none" 84 stroke="currentColor" 85 stroke-width="2" 86 stroke-linecap="round" 87 stroke-linejoin="round" 88 class="h-6 w-6 hidden"> 89 <line x1="18" x2="6" y1="6" y2="18"/> 90 <line x1="6" x2="18" y1="6" y2="18"/> 91 </svg> 92 </button> 93 </div> 94 <!-- Mobile Menu --> 95 <div 96 id="mobile-menu" 97 class="hidden md:hidden absolute top-0 left-0 w-full h-screen bg-background-light dark:bg-background-dark"> 98 <nav class="flex flex-col items-center justify-center h-full gap-8 text-2xl" aria-label="Mobile navigation"> 99 100 <a href="#about" class="mobile-link hover:opacity-80 transition-opacity">About</a> 101 102 <a href="#projects" class="mobile-link hover:opacity-80 transition-opacity">Projects</a> 103 104 <a href="#skills" class="mobile-link hover:opacity-80 transition-opacity">Skills</a> 105 106 <a href="#contact" class="mobile-link hover:opacity-80 transition-opacity">Contact</a> 107 108 </nav> 109 </div> 110</header> 111 <main class="text-foreground-light dark:text-foreground-dark px-4"> 112 113<!-- Hero Section --> 114<section class="text-center py-20"> 115 <h1 class="text-5xl md:text-7xl font-bold mb-4">John Doe</h1> 116 <p class="text-lg text-muted-foreground-light dark:text-muted-foreground-dark mx-auto max-w-xl mb-8">Crafting beautiful, responsive, and accessible web experiences. Inspired by the creativity and passion of the open-source community.</p> 117 <div class="flex flex-col sm:flex-row justify-center gap-4"> 118 <a href="#projects" class="inline-flex items-center justify-center rounded-md bg-primary-light text-primary-foreground-light 119 dark:bg-primary-dark dark:text-primary-foreground-dark px-6 py-3 text-sm font-medium shadow transition-colors 120 hover:opacity-90 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2"> 121 View Projects</a> 122 <a href="#contact" class="inline-flex items-center justify-center rounded-md border border-border-light dark:border-border-dark 123 bg-transparent px-6 py-3 text-sm font-medium shadow-xs transition-colors hover:bg-accent-light dark:hover:bg-accent-dark 124 hover:text-accent-foreground-light dark:hover:text-accent-foreground-dark focus:outline-hidden focus:ring-2 125 focus:ring-ring focus:ring-offset-2"> 126 Get in Touch</a> 127 </div> 128</section> 129<!-- About Section --> 130<section id="about" class="py-20 border-t border-border-light dark:border-border-dark"> 131 <div class="grid md:grid-cols-2 gap-10 items-center"> 132 <div> 133 <h2 class="text-3xl font-bold mb-4">About Me</h2> 134 <p class="text-muted-foreground-light dark:text-muted-foreground-dark mb-4">I'm a senior frontend developer with a passion for creating performant and user-friendly web applications. My work is driven by a philosophy of simplicity and efficiency, focusing on clean code and maintainable systems. I thrive on solving complex problems and building tools that make a difference. <br/><br/> When I'm not coding, I enjoy contributing to open-source projects, writing technical blog posts, and engaging with the developer community.</p> 135 </div> 136 <div class="bg-muted-light dark:bg-muted-dark rounded-lg p-6 overflow-auto" aria-hidden="true"> 137 <div class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark min-w-[500px]"> 138 <code> 139 <span class="text-green-700 dark:text-green-500">user@host</span>:<span class="text-blue-500">~</span>$ npx john<br/><br/>
140 <span class="font-bold">user@host</span><br/> -----------<br/> 141 142 <dl class="flex mt-1 flex-nowrap"> 143 <dt class="font-bold w-24">OS:</dt> 144 <dd>MacOS</dd> 145 </dl> 146 147 <dl class="flex mt-1 flex-nowrap"> 148 <dt class="font-bold w-24">Location:</dt> 149 <dd>San Francisco, CA</dd> 150 </dl> 151 152 <dl class="flex mt-1 flex-nowrap"> 153 <dt class="font-bold w-24">Role:</dt> 154 <dd>Lead Developer</dd> 155 </dl> 156 157 <dl class="flex mt-1 flex-nowrap"> 158 <dt class="font-bold w-24">Skills:</dt> 159 <dd>React, NextJS, Node.js, 11ty, Tailwind CSS</dd> 160 </dl> 161 162 <dl class="flex mt-1 flex-nowrap"> 163 <dt class="font-bold w-24">Focus:</dt> 164 <dd>Accessibility & Performance</dd> 165 </dl> 166 167 <dl class="flex mt-1 flex-nowrap"> 168 <dt class="font-bold w-24">Motto:</dt> 169 <dd>"Building a greener web ðð±"</dd> 170 </dl> 171 172 </code> 173 </div> 174 </div> 175 </div> 176</section> 177<!-- Projects Section --> 178 179 <section id="projects" class="py-20 border-t border-border-light dark:border-border-dark"> 180 <h2 class="text-3xl font-bold mb-8 text-center">Notable Projects</h2> 181 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> 182 183 <div class="rounded-lg border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark 184 text-card-foreground-light dark:text-card-foreground-dark shadow-xs"> 185 <div class="p-6"> 186 <h3 class="text-xl font-semibold mb-2">11ty-resume-template</h3> 187 188 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-2">An online resume template</p> 189 190 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-4">â 17</p> 191 <a href="https://github.com/learnwithgurpreet/11ty-resume-template" class="font-medium text-primary-light dark:text-primary-dark hover:underline">View on GitHub â</a> 192 </div> 193 </div> 194 195 <div class="rounded-lg border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark 196 text-card-foreground-light dark:text-card-foreground-dark shadow-xs"> 197 <div class="p-6"> 198 <h3 class="text-xl font-semibold mb-2">git-cheat-sheet</h3> 199 200 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-2">GIT commands cheat sheet</p> 201 202 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-4">â 7</p> 203 <a href="https://github.com/learnwithgurpreet/git-cheat-sheet" class="font-medium text-primary-light dark:text-primary-dark hover:underline">View on GitHub â</a> 204 </div> 205 </div> 206 207 <div class="rounded-lg border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark 208 text-card-foreground-light dark:text-card-foreground-dark shadow-xs"> 209 <div class="p-6"> 210 <h3 class="text-xl font-semibold mb-2">11ty-innovative-intro</h3> 211 212 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-2">An attractive 11ty landing page with introduction and GitHub projects integration</p> 213 214 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-4">â 3</p> 215 <a href="https://github.com/learnwithgurpreet/11ty-innovative-intro" class="font-medium text-primary-light dark:text-primary-dark hover:underline">View on GitHub â</a> 216 </div> 217 </div> 218 219 <div class="rounded-lg border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark 220 text-card-foreground-light dark:text-card-foreground-dark shadow-xs"> 221 <div class="p-6"> 222 <h3 class="text-xl font-semibold mb-2">reactjs-tailwindcss</h3> 223 224 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-2">ReactJS components using Tailwind CSS style classes</p> 225 226 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-4">â 1</p> 227 <a href="https://github.com/learnwithgurpreet/reactjs-tailwindcss" class="font-medium text-primary-light dark:text-primary-dark hover:underline">View on GitHub â</a> 228 </div> 229 </div> 230 231 <div class="rounded-lg border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark 232 text-card-foreground-light dark:text-card-foreground-dark shadow-xs"> 233 <div class="p-6"> 234 <h3 class="text-xl font-semibold mb-2">github-jobs</h3> 235 236 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-4">â 1</p> 237 <a href="https://github.com/learnwithgurpreet/github-jobs" class="font-medium text-primary-light dark:text-primary-dark hover:underline">View on GitHub â</a> 238 </div> 239 </div> 240 241 <div class="rounded-lg border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark 242 text-card-foreground-light dark:text-card-foreground-dark shadow-xs"> 243 <div class="p-6"> 244 <h3 class="text-xl font-semibold mb-2">gurpreetsingh.me</h3> 245 246 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-2">Dev portfolio</p> 247 248 <p class="text-sm text-muted-foreground-light dark:text-muted-foreground-dark mb-4">â 1</p> 249 <a href="https://github.com/learnwithgurpreet/gurpreetsingh.me" class="font-medium text-primary-light dark:text-primary-dark hover:underline">View on GitHub â</a> 250 </div> 251 </div> 252 253 <!-- Project Card --> 254 </div> 255 </section> 256 257<!-- Skills Section --> 258<section id="skills" class="py-20 border-t border-border-light dark:border-border-dark"> 259 <h2 class="text-3xl font-bold mb-8 text-center">Technical Expertise</h2> 260 <ul class="flex flex-wrap justify-center gap-4"> 261 262 263 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 264 font-medium">HTML 265 266 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path></svg> 267 268 </li> 269 270 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 271 font-medium">CSS 272 273 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M480 32l-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82H480z"></path></svg> 274 275 </li> 276 277 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 278 font-medium">JavaScript 279 280 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"></path></svg> 281 282 </li> 283 284 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 285 font-medium">11ty 286 287 </li> 288 289 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 290 font-medium">React/Redux 291 292 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2
29210.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"></path></svg> 293 294 </li> 295 296 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 297 font-medium">GraphQL 298 299 </li> 300 301 302 303 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 304 font-medium">NodeJS 305 306 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z"></path></svg> 307 308 </li> 309 310 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 311 font-medium">PHP 312 313 </li> 314 315 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 316 font-medium">MongoDB 317 318 </li> 319 320 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 321 font-medium">MySQL 322 323 </li> 324 325 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 326 font-medium">ExpressJS 327 328 </li> 329 330 331 332 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 333 font-medium">Docker 334 335 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"></path></svg> 336 337 </li> 338 339 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 340 font-medium">Kubernetes 341 342 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M495 225.06l-17.22 1.08c-5.27-39.49-20.79-75.64-43.86-105.84l12.95-11.43c6.92-6.11 7.25-16.79.73-23.31L426.44 64.4c-6.53-6.53-17.21-6.19-23.31.73L391.7 78.07c-30.2-23.06-66.35-38.58-105.83-43.86L286.94 17c.58-9.21-6.74-17-15.97-17h-29.94c-9.23 0-16.54 7.79-15.97 17l1.08 17.22c-39.49 5.27-75.64 20.79-105.83 43.86l-11.43-12.95c-6.11-6.92-16.79-7.25-23.31-.73L64.4 85.56c-6.53 6.53-6.19 17.21.73 23.31l12.95 11.43c-23.06 30.2-38.58 66.35-43.86 105.84L17 225.06c-9.21-.58-17 6.74-17 15.97v29.94c0 9.23 7.79 16.54 17 15.97l17.22-1.
34208c5.27 39.49 20.79 75.64 43.86 105.83l-12.95 11.43c-6.92 6.11-7.25 16.79-.73 23.31l21.17 21.17c6.53 6.53 17.21 6.19 23.31-.73l11.43-12.95c30.2 23.06 66.35 38.58 105.84 43.86L225.06 495c-.58 9.21 6.74 17 15.97 17h29.94c9.23 0 16.54-7.79 15.97-17l-1.08-17.22c39.49-5.27 75.64-20.79 105.84-43.86l11.43 12.95c6.11 6.92 16.79 7.25 23.31.73l21.17-21.17c6.53-6.53 6.19-17.21-.73-23.31l-12.95-11.43c23.06-30.2 38.58-66.35 43.86-105.83l17.22 1.08c9.21.58 17-6.74 17-15.97v-29.94c-.01-9.23-7.8-16.54-17.01-15.97zM281.84 98.61c24.81 4.07 47.63 13.66 67.23 27.78l-42.62 48.29c-8.73-5.44-18.32-9.54-28.62-11.95l4.01-64.12zm-51.68 0l4.01 64.12c-10.29 2.41-19.89 6.52-28.62 11.95l-42.62-48.29c19.6-14.12 42.42-23.71 67.23-27.78zm-103.77 64.33l48.3 42.61c-5.44 8.73-9.54 18.33-11.96 28.62l-64.12-4.01c4.07-24.81 13.66-47.62 27.78-67.22zm-27.78 118.9l64.12-4.01c2.41 10.29 6.52 19.89 11.95 28.62l-48.29 42.62c-14.12-19.6-23.71-42.42-27.78-67.23zm131.55 131.55c-24.81-4.07-47.63-13.66-67.23-27.78l42.61-48.3c8.73 5.44 18.33 9.54 28.62 11.96l-4 64.12zM256 288c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm25.84 125.39l-4.01-64.12c10.29-2.41 19.89-6.52 28.62-11.96l42.61 48.3c-19.6 14.12-42.41 23.71-67.22 27.78zm103.77-64.33l-48.29-42.62c5.44-8.73 9.54-18.32 11.95-28.62l64.12 4.01c-4.07 24.82-13.66 47.64-27.78 67.23zm-36.34-114.89c-2.41-10.29-6.52-19.89-11.96-28.62l48.3-42.61c14.12 19.6 23.71 42.42 27.78 67.23l-64.12 4z"></path></svg> 343 344 </li> 345 346 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 347 font-medium">CI/CD 348 349 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 480 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"></path></svg> 350 351 </li> 352 353 354 355 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 356 font-medium">Microservices 357 358 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M128 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32zm-24-80h192v48h48v-48h192v48h48v-57.59c0-21.17-17.23-38.41-38.41-38.41H344v-64h40c17.67 0 32-14.33 32-32V32c0-17.67-14.33-32-32-32H256c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h40v64H94.41C73.23 224 56 241.23 56 262.41V320h48v-48zm264 80h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32zm240 0h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32z"></path></svg> 359 360 </li> 361 362 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 363 font-medium">Security 364 365 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256.1 446.3l-.1-381 175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7z"></path></svg> 366 367 </li> 368 369 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 370 font-medium">Accessibility 371 372 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M216 260c0 15.464-12.536 28-28 28s-28-12.536-28-28c0-44.112 35.888-80 80-80s80 35.888 80 80c0 15.464-12.536 28-28 28s-28-12.536-28-28c0-13.234-10.767-24-24-24s-24 10.766-24 24zm24-176c-97.047 0-176 78.953-176 176 0 15.464 12.536 28 28 28s28-12.536 28-28c0-66.168 53.832-120 120-120s120 53.832 120 120c0 75.164-71.009 70.311-71.997 143.622L288 404c0 28.673-23.327 52-52 52-15.464 0-28 12.536-28 28s12.536 28 28 28c59.475 0 107.876-48.328 108-107.774.595-34.428 72-48.24 72-144.226 0-97.047-78.953-176-176-176zm-80 236c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zM32 448c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm480-187.993c0-1.518-.012-3.025-.045-4.531C510.076 140.525 436.157 38.47 327.994 1.511c-14.633-4.998-30.549 2.809-35.55 17.442-5 14.633 2.81 30.549 17.442 35.55 85.906 29.354 144.61 110.513 146.077 201.953l.003.188c.026 1.118.033 2.236.033 3.363 0 15.464 12.536 28 28 28s28.001-12.536 28.001-28zM152.971 439.029l-80-80L39.03 392.97l80 80 33.941-33.941z"></path></svg> 373 374 </li> 375 376 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 377 font-medium">User Experience 378 379 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 416 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M272 96c26.51 0 48-21.49 48-48S298.51 0 272 0s-48 21.49-48 48 21.49 48 48 48zM113.69 317.47l-14.8 34.52H32c-17.67 0-32 14.33-32 32s14.33 32 32 32h77.45c19.25 0 36.58-11.44 44.11-29.09l8.79-20.52-10.67-6.3c-17.32-10.23-30.06-25.37-37.99-42.61zM384 223.99h-44.03l-26.06-53.25c-12.5-25.55-35.45-44.23-61.78-50.94l-71.08-21.14c-28.3-6.8-57.77-.55-80.84 17.14l-39.67 30.41c-14.03 10.75-16.69 30.83-5.92 44.86s30.84 16.66 44.86 5.92l39.69-30.41c7.67-5.89 17.44-8 25.27-6.14l14.7 4.37-37.46 87.39c-12.62 29.48-1.31 64.01 26.3 80.31l84.98 50.17-27.47 87.73c-5.28 16.86 4.11 34.81 20.97 40.09 3.19 1 6.41 1.48 9.58 1.48 13.61 0 26.23-8.77 30.52-22.45l31.64-101.06c5.91-20.77-2.89-43.08-21.64-54.39l-61.24-36.14 31.31-78.28 20.27 41.43c8 16.34 24.92 26.89 43.11 26.89H384c17.67 0 32-14.33 32-32s-14.33-31.99-32-31.99z"></path></svg> 380 381 </li> 382 383 384 385 <li class="flex items-center subpixel-antialiased highlight rounded-full bg-muted-light dark:bg-muted-dark px-4 py-2 text-sm 386 font-medium">Leadership 387 388 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="pl-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M208 0c-29.9 0-54.7 20.5-61.8 48.2-.8 0-1.4-.2-2.2-.2-35.3 0-64 28.7-64 64 0 4.8.6 9.5 1.7 14C52.5 138 32 166.
3886 32 200c0 12.6 3.2 24.3 8.3 34.9C16.3 248.7 0 274.3 0 304c0 33.3 20.4 61.9 49.4 73.9-.9 4.6-1.4 9.3-1.4 14.1 0 39.8 32.2 72 72 72 4.1 0 8.1-.5 12-1.2 9.6 28.5 36.2 49.2 68 49.2 39.8 0 72-32.2 72-72V64c0-35.3-28.7-64-64-64zm368 304c0-29.7-16.3-55.3-40.3-69.1 5.2-10.6 8.3-22.3 8.3-34.9 0-33.4-20.5-62-49.7-74 1-4.5 1.7-9.2 1.7-14 0-35.3-28.7-64-64-64-.8 0-1.5.2-2.2.2C422.7 20.5 397.9 0 368 0c-35.3 0-64 28.6-64 64v376c0 39.8 32.2 72 72 72 31.8 0 58.4-20.7 68-49.2 3.9.7 7.9 1.2 12 1.2 39.8 0 72-32.2 72-72 0-4.8-.5-9.5-1.4-14.1 29-12 49.4-40.6 49.4-73.9z"></path></svg> 389 390 </li> 391 392 393 </ul> 394</section> 395<!-- Contact Section --> 396<section id="contact" class="py-20 border-t border-border-light dark:border-border-dark text-center"> 397 <h2 class="text-3xl font-bold mb-4">Get in Touch</h2> 398 <p class="text-muted-foreground-light dark:text-muted-foreground-dark mb-8 mx-auto max-w-lg"> 399 Interested in collaborating or have a question? I'd love to hear from you. 400 </p> 401 <div class="flex justify-center gap-6"> 402 403 <a aria-label="linkedin" href="https://linkedin.com/in/gsin11/" rel="me" target="_blank" class="inline-flex w-12 h-12 justify-center items-center ml-2 rounded-full highlight text-muted-foreground-light dark:text-muted-foreground-dark hover:opacity-80 transition-opacity"> 404 405 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-6 h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg> 406 407 </a> 408 409 <a aria-label="Mastodon" href="https://fosstodon.org/@GurpreetSingh" rel="me" target="_blank" class="inline-flex w-12 h-12 justify-center items-center ml-2 rounded-full highlight text-muted-foreground-light dark:text-muted-foreground-dark hover:opacity-80 transition-opacity"> 410 411 <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" height="1em" width="1em" fill="currentColor" viewBox="0 0 16 16"><path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/></svg> 412 413 </a> 414 415 <a aria-label="Github" href="https://github.com/learnwithgurpreet" rel="me" target="_blank" class="inline-flex w-12 h-12 justify-center items-center ml-2 rounded-full highlight text-muted-foreground-light dark:text-muted-foreground-dark hover:opacity-80 transition-opacity"> 416 417 <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" class="w-6 h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg> 418 419 </a> 420 421 <a aria-label="Blog" href="https://www.learnwithgurpreet.com" rel="me" target="_blank" class="inline-flex w-12 h-12 justify-center items-center ml-2 roun
421ded-full highlight text-muted-foreground-light dark:text-muted-foreground-dark hover:opacity-80 transition-opacity"> 422 423 <svg fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd"><path d="M12.02 0c6.614.011 11.98 5.383 11.98 12 0 6.623-5.376 12-12 12-6.623 0-12-5.377-12-12 0-6.617 5.367-11.989 11.981-12h.039zm3.694 16h-7.427c.639 4.266 2.242 7 3.713 7 1.472 0 3.075-2.734 3.714-7m6.535 0h-5.523c-.426 2.985-1.321 5.402-2.485 6.771 3.669-.76 6.671-3.35 8.008-6.771m-14.974 0h-5.524c1.338 3.421 4.34 6.011 8.009 6.771-1.164-1.369-2.059-3.786-2.485-6.771m-.123-7h-5.736c-.331 1.166-.741 3.389 0 6h5.736c-.188-1.814-.215-3.925 0-6m8.691 0h-7.685c-.195 1.8-.225 3.927 0 6h7.685c.196-1.811.224-3.93 0-6m6.742 0h-5.736c.062.592.308 3.019 0 6h5.736c.741-2.612.331-4.835 0-6m-12.825-7.771c-3.669.76-6.671 3.35-8.009 6.771h5.524c.426-2.985 1.321-5.403 2.485-6.771m5.954 6.771c-.639-4.266-2.242-7-3.714-7-1.471 0-3.074 2.734-3.713 7h7.427zm-1.473-6.771c1.164 1.368 2.059 3.786 2.485 6.771h5.523c-1.337-3.421-4.339-6.011-8.008-6.771" /></svg> 424 425 </a> 426 427 </div> 428</section> 429 </main> 430 <!-- Footer --> 431<footer class="text-center py-6 border-t border-border-light dark:border-border-dark text-sm text-muted-foreground-light 432 dark:text-muted-foreground-dark mx-4"> 433 <p>© 2025 434 John Doe. All rights reserved.</p> 435 <p>Built with <span class="text-red-500 text-xl" aria-label="love">â¥</span> and 11ty, Tailwind CSS.</p> 436</footer> 437 </div> 438 439
439<script> 440 // prettier-ignore 441 const menuBtn=document.getElementById("menu-btn"),mobileMenu=document.getElementById("mobile-menu"),openIcon=document.getElementById("menu-open-icon"),closeIcon=document.getElementById("menu-close-icon"),mobileLinks=document.querySelectorAll(".mobile-link"),toggleMenu=()=>{const e=menuBtn.getAttribute("aria-expanded")==="true";menuBtn.setAttribute("aria-expanded",!e),mobileMenu.classList.toggle("hidden"),openIcon.classList.toggle("hidden"),closeIcon.classList.toggle("hidden"),document.body.style.overflow=e?"":"hidden"};menuBtn.addEventListener("click",toggleMenu),mobileLinks.forEach(e=>{e.addEventListener("click",()=>{mobileMenu.classList.contains("hidden")||toggleMenu()})}); 442 443 </script>
443 444 </body> 445</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.