1 2 3 4 5 6 7 8<!doctype html> 9<html 10 lang="en" 11 dir="ltr" 12 class="scroll-smooth" 13 data-default-appearance="light" 14 data-auto-appearance="false" 15><head> 16 <meta charset="utf-8" /> 17 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 18 <meta name="theme-color" content="rgb(255,255,255)" /> 19 20 <title>Software Architect · Kristof Kovacs âï¸</title> 21 <meta name="title" content="Software Architect · Kristof Kovacs âï¸" /> 22 23 24 25 26 27
27<script 28 type="text/javascript" 29 src="/js/appearance.min.74ad8406faea02f3e186ba5126249aaeed9073629e04b05037b903396b188724.js" 30 integrity="sha256-dK2EBvrqAvPhhrpRJiSaru2Qc2KeBLBQN7kDOWsYhyQ=" 31 ></script>
31 32 33 34 35 36 37 38 39 40 41 42 <link 43 type="text/css" 44 rel="stylesheet" 45 href="/css/main.bundle.min.266f0ca824b6f54df2a77c96bed80b3bcfe5f8ecc034a2546c4626bd718872e4.css" 46 integrity="sha256-Jm8MqCS29U3yp3yWvtgLO8/l+OzANKJUbEYmvXGIcuQ=" 47 /> 48 49 50 51 52 53 54 55 <meta 56 name="description" 57 content=" 58 59 Let's say you need custom software developed. A sophisticated web application, an interface between two systems, a high performance backend, or something similar. 60Which computer language is the best fit? Go, PHP, Java or something else? What architecture? 61What database to use, MySQL, Oracle or PostgreSQL? 62Or should it use one of the shiny new NoSQL databases? But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why? 63On the front-end, which JavaScript framework? 64 65 " 66 /> 67 68 69 70 <link rel="canonical" href="https://kkovacs.eu/software-architect/" /> 71 72 73 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> 74 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> 75 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> 76 <link rel="manifest" href="/site.webmanifest" /> 77 78 79 80 <meta name="google-site-verification" content="googlec8e8bfb88125f3de" /> 81 82 83 84 85 86 87 <meta property="og:title" content="Software Architect" /> 88<meta property="og:description" content="Let's say you need custom software developed. A sophisticated web application, an interface between two systems, a high performance backend, or something similar. 89Which computer language is the best fit? Go, PHP, Java or something else? What architecture? 90What database to use, MySQL, Oracle or PostgreSQL? 91Or should it use one of the shiny new NoSQL databases? But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why? 92On the front-end, which JavaScript framework?" /> 93<meta property="og:type" content="article" /> 94<meta property="og:url" content="https://kkovacs.eu/software-architect/" /><meta property="article:section" content="pages" /> 95 96 97 98 99 <meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Software Architect"/> 100<meta name="twitter:description" content="Let's say you need custom software developed. A sophisticated web application, an interface between two systems, a high performance backend, or something similar. 101Which computer language is the best fit? Go, PHP, Java or something else? What architecture? 102What database to use, MySQL, Oracle or PostgreSQL? 103Or should it use one of the shiny new NoSQL databases? But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why? 104On the front-end, which JavaScript framework?"/> 105 106 107
107<script type="application/ld+json"> 108 { 109 "@context": "https://schema.org", 110 "@type": "Article", 111 "articleSection": "", 112 "name": "Software Architect", 113 "headline": "Software Architect", 114 115 "abstract": "Let\u0027s say you need custom software developed. A sophisticated web application, an interface between two systems, a high performance backend, or something similar.\nWhich computer language is the best fit? Go, PHP, Java or something else? What architecture?\nWhat database to use, MySQL, Oracle or PostgreSQL?\nOr should it use one of the shiny new NoSQL databases? But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why?\nOn the front-end, which JavaScript framework?", 116 "inLanguage": "en", 117 "url" : "https:\/\/kkovacs.eu\/software-architect\/", 118 "author" : { 119 "@type": "Person", 120 "name": "Kristof Kovacs" 121 }, 122 123 124 125 126 127 128 129 130 "mainEntityOfPage": "true", 131 "wordCount": "363" 132 } 133 </script>
133 134 135 136 137 <meta name="author" content="Kristof Kovacs" /> 138 139 140 <link href="https://twitter.com/kkovacs" rel="me" /> 141 142 <link href="https://www.linkedin.com/in/kkovacs" rel="me" />
vendor: 99 bytes, lines 142-158
142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158<script async src="https://www.googletagmanager.com/gtag/js?id=
158G-3RM7N9V3RT
vendor: 12 bytes, line 158
158"></script>
159<script> 160var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack); 161var doNotTrack = (dnt == "1" || dnt == "yes"); 162if (!doNotTrack) { 163
vendor: 130 bytes, lines 163-166
163window.dataLayer = window.dataLayer || []; 164 function gtag(){dataLayer.push(arguments);} 165 gtag('js', new Date()); 166 gtag('config', '
166G-3RM7N9V3RT
vendor: 30 bytes, line 166
166', { 'anonymize_ip': true });
167} 168</script>
168 169 170 171 172 173 174</head> 175<body 176 class="m-auto flex h-screen max-w-7xl flex-col bg-neutral px-6 text-lg leading-7 text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral" 177 > 178 <div id="the-top" class="absolute flex self-center"> 179 <a 180 class="-translate-y-8 rounded-b-lg bg-primary-200 px-3 py-1 text-sm focus:translate-y-0 dark:bg-neutral-600" 181 href="#main-content" 182 ><span class="pe-2 font-bold text-primary-600 dark:text-primary-400">↓</span 183 >Skip to main content</a 184 > 185 </div> 186 187 188 <header class="py-6 font-semibold text-neutral-900 print:hidden sm:py-10 dark:text-neutral"> 189 <nav class="flex items-start justify-between sm:items-center"> 190 191 <div class="flex flex-row items-center"> 192 193 <a 194 class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" 195 rel="me" 196 href="/" 197 >Kristof Kovacs âï¸</a 198 > 199 200 </div> 201 202 203 <ul class="flex list-none flex-col text-end sm:flex-row"> 204 205 206 207 <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"> 208 209 <a 210 href="/software-architect/" 211 title="" 212 213 ><span 214 class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2" 215 >Software Architect</span 216 > 217 </a 218 > 219 220 </li> 221 222 223 <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"> 224 225 <a 226 href="/resume/" 227 title="" 228 229 ><span 230 class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2" 231 >CV</span 232 > 233 </a 234 > 235 236 </li> 237 238 239 <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"> 240 241 <a 242 href="/tags/devops/" 243 title="" 244 245 ><span 246 class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2" 247 >DevOps</span 248 > 249 </a 250 > 251 252 </li> 253 254 255 <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"> 256 257 <a 258 href="/tags/management/" 259 title="" 260 261 ><span 262 class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2" 263 >Management</span 264 > 265 </a 266 > 267 268 </li> 269 270 271 272 </ul> 273 274 </nav> 275</header> 276 277 278 <div class="relative flex grow flex-col"> 279 <main id="main-content" class="grow"> 280 281 <article> 282 <header class="max-w-prose"> 283 284 <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral"> 285 Software Architect 286 </h1> 287 <div class="mb-8 lg:mb-0 text-base text-neutral-500 dark:text-neutral-400 print:hidden"> 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 <div class="flex flex-row flex-wrap items-center"> 314 315 316 317 318 319 </div> 320 321 322 323 <div class="my-1 flex flex-wrap text-xs leading-relaxed text-neutral-500 dark:text-neutral-400"> 324 325 326 327 328 329 </div> 330 331 332 333 </div> 334 335 </header> 336 <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"> 337 338 <div class="contents lg:block lg:order-2" id="kkauthor"> 339 <div class="contents lg:flex lg:flex-col lg:sticky lg:top-10"> 340 <div class="order-last px-0 lg:max-w-sm lg:ps-4"> 341 <div class=""> 342 <div class="not-prose"> 343 344 <div class="flex"> 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 <picture 362 class="!mb-0 !mt-0 me-4 w-24 h-auto rounded-full" 363 364 > 365 366 367 368 369 <img 370 width="2161" 371 height="2161" 372 class="!mb-0 !mt-0 me-4 w-24 h-auto rounded-full" 373 alt="Kristof Kovacs" 374 loading="lazy" decoding="async" 375 376 src="/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_660x0_resize_box_3.png" 377 srcset="/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_330x0_resize_box_3.png 330w,/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_660x0_resize_box_3.png 660w 378 379 ,/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_1024x0_resize_box_3.png 1024w 380 381 382 ,/avatar_huc7b21cf2dae24e75fb55a3f51f3ef2c5_489509_1320x0_resize_box_3.png 1320w 383 " 384 sizes="100vw" 385 386 /> 387 </picture> 388 389 390 391 392
393 <div class="place-self-center"> 394 395 <div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400"> 396 Author 397 </div> 398 <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300"> 399 Kristof Kovacs 400 </div> 401 402 403 <div class="text-sm text-neutral-700 dark:text-neutral-400">Software Architect & DevOps Consultant</div> 404 405 <div class="text-2xl sm:text-lg"> 406 <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500"> 407 408 409 <a 410 class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400" 411 style="will-change:transform;" 412 href="https://twitter.com/kkovacs" 413 target="_blank" 414 aria-label="Twitter" 415 rel="me noopener noreferrer" 416 ><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> 417</span></a 418 > 419 420 421 422 <a 423 class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400" 424 style="will-change:transform;" 425 href="https://www.linkedin.com/in/kkovacs" 426 target="_blank" 427 aria-label="Linkedin" 428 rel="me noopener noreferrer" 429 ><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg> 430</span></a 431 > 432 433 434 </div> 435 436</div> 437 </div> 438 </div> 439 440 441 </div> 442 <div class="text-sm text-neutral-700 dark:text-neutral-400"> 443 <p>Hello, Iâm Kristof, a human being like you, and an easy to work with, friendly guy. 444 <p>I've been a programmer, a consultant, CIO in startups, head of software development in government, and built two software companies. 445 <p>Some days Iâm coding Golang in the guts of a system and other days I'm wearing a suit to help clients with their DevOps practices. 446 </div> 447 </div> 448 </div> 449 450 451 452 </div> 453 </div> 454 455 <div class="min-w-0 min-h-0 max-w-prose grow lg:order-1 main" id="kkcontent"> 456 <p>Let's say you need custom software developed. A <strong>sophisticated web 457application</strong>, an <strong>interface</strong> between two systems, a <strong>high 458performance</strong> backend, or something similar.</p> 459<p><strong>Which computer language</strong> is the best fit? Go, PHP, Java or something else? 460What <strong>architecture</strong>?</p> 461<p>What <strong>database</strong> to use, MySQL, Oracle or PostgreSQL?</p> 462<p>Or should it use one of the shiny new <strong>NoSQL</strong> databases? But which one, Cassandra, Hadoop, Redis, Riak or MongoDB, and why?</p> 463<p>On the front-end, which <strong>JavaScript framework</strong>? Vue, Angular, maybe Livewire?</p> 464<p><strong>Web-hosting</strong> per month can cost anywhere between $5 and $20000, surely there must be more to it than simple overpricing?</p> 465<p>What is even the difference between <strong>Docker</strong>, <strong>Docker Swarm</strong>, <strong>Kubernetes</strong> and serverless? Would <strong>Azure</strong> or <strong>GCP</strong> be cheaper than <strong>AWS</strong>?</p> 466<p>Can we just buy two physical servers instead? 467Or can it be made to run on a $40/month VM?</p> 468<p><strong>How much data</strong> will we store and how much will that cost? Are there any <strong>cheaper options</strong>, and what are the drawbacks?</p> 469<p>Does it need a <strong>queue</strong>? RabbitMQ, Redis-queue, beanstalkd, or something else?</p> 470<p>As for a <strong>load-balancer</strong>, should it be Nginx, HAproxy, Caddy2, Traefik? Why?</p> 471<p>What about <strong>test and development</strong> environments, how many do we need? (Is it even a fixed number?)</p> 472<p>How should we <strong>deploy</strong>? Once in a blue moon in a big "dog & pony show" <em>(hello, army!)</em> manually <em>(do we have a deploy manual?)</em>, 473or on each feature merge with <strong>continous integration</strong> and <strong>automated testing</strong>, or something in between?</p> 474<p>If auto-deploy, is it via <strong>Docker</strong> build, <strong>Ansible</strong>, or custom scripts?</p> 475<p><strong>On the business side</strong>, what are the <strong>most important features</strong>, and how those overlap with <strong>what can be implemented quickly</strong>?</p> 476<p>Should we <strong>hire our own developers</strong>, or contract it out?</p> 477<p>Should you start with a <a href="/rapid-prototyping/">minimum viable product</a>?</p> 478<p>And you probably want to avoid a developer <strong>accidentally crippling</strong> your 479enterprise by building in a component with a <a href="/businessmens-guide-to-open-source-licenses/">business-unfriendly 480license</a>.</p> 481<p>If <strong>some of the above</strong> sounds like something you want to talk about, <strong>feel 482free to drop me a line</strong> below. I love getting messages!</p> 483<p>To <strong>learn more</strong> about me, check out my <a href="/resume/">résumé</a>, a list of 484 485 <a href="/posts/">articles</a> I've written, some of my <a href="/open-source-contributions/">open source</a> contributions, and a high-level overview of <a href="/software-development-team/">our team's services</a>.</p> 486 487 </div> 488 </section> 489 <footer class="max-w-prose pt-8 print:hidden"> 490 491 492 493 494 495 496 <div class="pt-3"> 497 <hr class="border-dotted border-neutral-300 dark:border-neutral-600" /> 498 <div class="pt-3"> 499 500<style> 501:root { 502 --tw-screen-sm: 640px; 503 --tw-screen-md: 768px; 504 --tw-screen-lg: 1024px; 505 --tw-screen-xl: 1280px; 506 --tw-screen-2xl: 1536px; 507 --tw-color-inherit: inherit; 508 --tw-color-current: currentColor; 509 --tw-color-transparent: transparent; 510 --tw-color-black: 0 0 0; 511 --tw-color-white: 255 255 255; 512 --tw-color-slate-50: 248 250 252; 513 --tw-color-slate-100: 241 245 249; 514 --tw-color-slate-200: 226 232 240; 515 --tw-color-slate-300: 203 213 225; 516 --tw-color-slate-400: 148 163 184; 517 --tw-color-slate-500: 100 116 139; 518 --tw-color-slate-600: 71 85 105; 519 --tw-color-slate-700: 51 65 85; 520 --tw-color-slate-800: 30 41 59; 521 --tw-color-slate-900: 15 23 42; 522 --tw-color-slate-950: 2 6 23; 523 --tw-color-gray-50: 249 250 251; 524 --tw-color-gray-100: 243 244 246; 525 --tw-color-gray-200: 229 231 235; 526 --tw-color-gray-300: 209 213 219; 527 --tw-color-gray-400: 156 163 175; 528 --tw-color-gray-500: 107 114 128; 529 --tw-color-gray-600: 75 85 99; 530 --tw-color-gray-700: 55 65 81; 531 --tw-color-gray-800: 31 41 55; 532 --tw-color-gray-900: 17 24 39; 533 --tw-color-gray-950: 3 7 18; 534 --tw-color-zinc-50: 250 250 250; 535 --tw-color-zinc-100: 244 244 245;
536 --tw-color-zinc-200: 228 228 231; 537 --tw-color-zinc-300: 212 212 216; 538 --tw-color-zinc-400: 161 161 170; 539 --tw-color-zinc-500: 113 113 122; 540 --tw-color-zinc-600: 82 82 91; 541 --tw-color-zinc-700: 63 63 70; 542 --tw-color-zinc-800: 39 39 42; 543 --tw-color-zinc-900: 24 24 27; 544 --tw-color-zinc-950: 9 9 11; 545 --tw-color-neutral-50: 250 250 250; 546 --tw-color-neutral-100: 245 245 245; 547 --tw-color-neutral-200: 229 229 229; 548 --tw-color-neutral-300: 212 212 212; 549 --tw-color-neutral-400: 163 163 163; 550 --tw-color-neutral-500: 115 115 115; 551 --tw-color-neutral-600: 82 82 82; 552 --tw-color-neutral-700: 64 64 64; 553 --tw-color-neutral-800: 38 38 38; 554 --tw-color-neutral-900: 23 23 23; 555 --tw-color-neutral-950: 10 10 10; 556 --tw-color-stone-50: 250 250 249; 557 --tw-color-stone-100: 245 245 244; 558 --tw-color-stone-200: 231 229 228; 559 --tw-color-stone-300: 214 211 209; 560 --tw-color-stone-400: 168 162 158; 561 --tw-color-stone-500: 120 113 108; 562 --tw-color-stone-600: 87 83 78; 563 --tw-color-stone-700: 68 64 60; 564 --tw-color-stone-800: 41 37 36; 565 --tw-color-stone-900: 28 25 23; 566 --tw-color-stone-950: 12 10 9; 567 --tw-color-red-50: 254 242 242; 568 --tw-color-red-100: 254 226 226; 569 --tw-color-red-200: 254 202 202; 570 --tw-color-red-300: 252 165 165; 571 --tw-color-red-400: 248 113 113; 572 --tw-color-red-500: 239 68 68; 573 --tw-color-red-600: 220 38 38; 574 --tw-color-red-700: 185 28 28; 575 --tw-color-red-800: 153 27 27; 576 --tw-color-red-900: 127 29 29; 577 --tw-color-red-950: 69 10 10; 578 --tw-color-orange-50: 255 247 237; 579 --tw-color-orange-100: 255 237 213; 580 --tw-color-orange-200: 254 215 170; 581 --tw-color-orange-300: 253 186 116; 582 --tw-color-orange-400: 251 146 60; 583 --tw-color-orange-500: 249 115 22; 584 --tw-color-orange-600: 234 88 12; 585 --tw-color-orange-700: 194 65 12; 586 --tw-color-orange-800: 154 52 18; 587 --tw-color-orange-900: 124 45 18; 588 --tw-color-orange-950: 67 20 7; 589 --tw-color-amber-50: 255 251 235; 590 --tw-color-amber-100: 254 243 199; 591 --tw-color-amber-200: 253 230 138; 592 --tw-color-amber-300: 252 211 77; 593 --tw-color-amber-400: 251 191 36; 594 --tw-color-amber-500: 245 158 11; 595 --tw-color-amber-600: 217 119 6; 596 --tw-color-amber-700: 180 83 9; 597 --tw-color-amber-800: 146 64 14; 598 --tw-color-amber-900: 120 53 15; 599 --tw-color-amber-950: 69 26 3; 600 --tw-color-yellow-50: 254 252 232; 601 --tw-color-yellow-100: 254 249 195; 602 --tw-color-yellow-200: 254 240 138; 603 --tw-color-yellow-300: 253 224 71; 604 --tw-color-yellow-400: 250 204 21; 605 --tw-color-yellow-500: 234 179 8; 606 --tw-color-yellow-600: 202 138 4; 607 --tw-color-yellow-700: 161 98 7; 608 --tw-color-yellow-800: 133 77 14; 609 --tw-color-yellow-900: 113 63 18; 610 --tw-color-yellow-950: 66 32 6; 611 --tw-color-lime-50: 247 254 231; 612 --tw-color-lime-100: 236 252 203; 613 --tw-color-lime-200: 217 249 157; 614 --tw-color-lime-300: 190 242 100; 615 --tw-color-lime-400: 163 230 53; 616 --tw-color-lime-500: 132 204 22; 617 --tw-color-lime-600: 101 163 13; 618 --tw-color-lime-700: 77 124 15; 619 --tw-color-lime-800: 63 98 18; 620 --tw-color-lime-900: 54 83 20; 621 --tw-color-lime-950: 26 46 5; 622 --tw-color-green-50: 240 253 244; 623 --tw-color-green-100: 220 252 231; 624 --tw-color-green-200: 187 247 208; 625 --tw-color-green-300: 134 239 172; 626 --tw-color-green-400: 74 222 128; 627 --tw-color-green-500: 34 197 94; 628 --tw-color-green-600: 22 163 74; 629 --tw-color-green-700: 21 128 61; 630 --tw-color-green-800: 22 101 52; 631 --tw-color-green-900: 20 83 45; 632 --tw-color-green-950: 5 46 22; 633 --tw-color-emerald-50: 236 253 245; 634 --tw-color-emerald-100: 209 250 229; 635 --tw-color-emerald-200: 167 243 208; 636 --tw-color-emerald-300: 110 231 183; 637 --tw-color-emerald-400: 52 211 153; 638 --tw-color-emerald-500: 16 185 129; 639 --tw-color-emerald-600: 5 150 105; 640 --tw-color-emerald-700: 4 120 87; 641 --tw-color-emerald-800: 6 95 70; 642 --tw-color-emerald-900: 6 78 59; 643 --tw-color-emerald-950: 2 44 34; 644 --tw-color-teal-50: 240 253 250; 645 --tw-color-teal-100: 204 251 241; 646 --tw-color-teal-200: 153 246 228; 647 --tw-color-teal-300: 94 234 212; 648 --tw-color-teal-400: 45 212 191; 649 --tw-color-teal-500: 20 184 166; 650 --tw-color-teal-600: 13 148 136; 651 --tw-color-teal-700: 15 118 110; 652 --tw-color-teal-800: 17 94 89; 653 --tw-color-teal-900: 19 78 74; 654 --tw-color-teal-950: 4 47 46; 655 --tw-color-cyan-50: 236 254 255; 656 --tw-color-cyan-100: 207 250 254; 657 --tw-color-cyan-200: 165 243 252; 658 --tw-color-cyan-300: 103 232 249; 659 --tw-color-cyan-400: 34 211 238; 660 --tw-color-cyan-500: 6 182 212; 661 --tw-color-cyan-600: 8 145 178; 662 --tw-color-cyan-700: 14 116 144; 663 --tw-color-cyan-800: 21 94 117; 664 --tw-color-cyan-900: 22 78 99; 665 --tw-color-cyan-950: 8 51 68; 666 --tw-color-sky-50: 240 249 255; 667 --tw-color-sky-100: 224 242 254; 668 --tw-color-sky-200: 186 230 253; 669 --tw-color-sky-300: 125 211 252; 670 --tw-color-sky-400: 56 189 248; 671 --tw-color-sky-500: 14 165 233; 672 --tw-color-sky-600: 2 132 199; 673 --tw-color-sky-700: 3 105 161; 674 --tw-color-sky-800: 7 89 133; 675 --tw-color-sky-900: 12 74 110; 676 --tw-color-sky-950: 8 47 73; 677 --tw-color-blue-50: 239 246 255; 678 --tw-color-blue-100: 219 234 254; 679 --tw-color-blue-200: 191 219 254; 680 --tw-color-blue-300: 147 197 253; 681 --tw-color-blue-400: 96 165 250; 682 --tw-color-blue-500: 59 130 246; 683 --tw-color-blue-600: 37 99 235; 684 --tw-color-blue-700: 29 78 216; 685 --tw-color-blue-800: 30 64 175; 686 --tw-color-blue-900: 30 58 138; 687 --tw-color-blue-950: 23 37 84; 688 --tw-color-indigo-50: 238 242 255; 689 --tw-color-indigo-100: 224 231 255; 690 --tw-color-indigo-200: 199 210 254; 691 --tw-color-indigo-300: 165 180 252; 692 --tw-color-indigo-400: 129 140 248; 693 --tw-color-indigo-500: 99 102 241; 694 --tw-color-indigo-600: 79 70 229; 695 --tw-color-indigo-700: 67 56 202; 696 --tw-color-indigo-800: 55 48 163; 697 --tw-color-indigo-900: 49 46 129; 698 --tw-color-indigo-950: 30 27 75; 699 --tw-color-violet-50: 245 243 255; 700 --tw-color-violet-100: 237 233 254; 701 --tw-color-violet-200: 221 214 254; 702 --tw-color-violet-300: 196 181 253; 703 --tw-color-violet-400: 167 139 250; 704 --tw-color-violet-500: 139 92 246; 705 --tw-color-violet-600: 124 58 237; 706 --tw-color-violet-700: 109 40 217; 707 --tw-color-violet-800: 91 33 182; 708 --tw-color-violet-900: 76 29 149; 709 --tw-color-violet-950: 46 16 101; 710 --tw-color-purple-50: 250 245 255; 711 --tw-color-purple-100: 243 232 255; 712 --tw-color-purple-200: 233 213 255; 713 --tw-color-purple-300: 216 180 254; 714 --tw-color-purple-400: 192 132 252; 715 --tw-color-purple-500: 168 85 247; 716 --tw-color-purple-600: 147 51 234; 717 --tw-color-purple-700: 126 34 206; 718 --tw-color-purple-800: 107 33 168; 719 --tw-color-purple-900: 88 28 135; 720 --tw-color-purple-950: 59 7 100; 721 --tw-color-fuchsia-50: 253 244 255; 722 --tw-color-fuchsia-100: 250 232 255; 723 --tw-color-fuchsia-200: 245 208 254; 724 --tw-color-fuchsia-300: 240 171 252; 725 --tw-color-fuchsia-400: 232 121 249; 726 --tw-color-fuchsia-500: 217 70 239; 727 --tw-color-fuchsia-600: 192 38 211; 728 --tw-color-fuchsia-700: 162 28 175; 729 --tw-color-fuchsia-800: 134 25 143; 730 --tw-color-fuchsia-900: 112 26 117; 731 --tw-color-fuchsia-950: 74 4 78; 732 --tw-color-pink-50: 253 242 248; 733 --tw-color-pink-100: 252 231 243; 734 --tw-color-pink-200: 251 207 232; 735 --tw-color-pink-300: 249 168 212; 736 --tw-color-pink-400: 244 114 182; 737 --tw-color-pink-500: 236 72 153; 738 --tw-color-pink-600: 219 39 119; 739 --tw-color-pink-700: 190 24 93; 740 --tw-color-pink-800: 157 23 77; 741 --tw-color-pink-900: 131 24 67; 742 --tw-color-pink-950: 80 7 36; 743 --tw-color-rose-50: 255 241 242; 744 --tw-color-rose-100: 255 228 230; 745 --tw-color-rose-200: 254 205 211; 746 --tw-color-rose-300: 253 164 175; 747 --tw-color-rose-400: 251 113 133; 748 --tw-color-rose-500: 244 63 94; 749 --tw-color-rose-600: 225 29 72; 750 --tw-color-rose-700: 190 18 60; 751 --tw-color-rose-800: 159 18 57; 752 --tw-color-rose-900: 136 19 55; 753 --tw-color-rose-950: 76 5 25; 754 --tw-color-primary-50: 239 246 255; 755 --tw-color-primary-100: 219 234 254; 756 --tw-color-primary-200: 191 219 254; 757 --tw-color-primary-300: 147 197 253; 758 --tw-color-primary-400: 96 165 250; 759 --tw-color-primary-500: 59 130 246; 760 --tw-color-primary-600: 37 99 235; 761 --tw-color-primary-700: 29 78 216; 762 --tw-color-primary-800: 30 64 175; 763 --tw-color-primary-900: 30 58 138; 764 --tw-color-primary: 48 86 211; 765 --tw-size-0: 0px; 766 --tw-size-1: 0.25rem; 767 --tw-size-2: 0.5rem; 768 --tw-size-3: 0.75rem; 769 --tw-size-4: 1rem; 770 --tw-size-5: 1.25rem; 771 --tw-size-6: 1.5rem; 772 --tw-size-7: 1.75rem; 773 --tw-size-8: 2rem; 774 --tw-size-9: 2.25rem; 775 --tw-size-10: 2.5rem; 776 --tw-size-11: 2.75rem; 777 --tw-size-12: 3rem; 778 --tw-size-14: 3.5rem; 779 --tw-size-16: 4rem; 780 --tw-size-20: 5rem; 781 --tw-size-24: 6rem; 782 --tw-size-28: 7rem; 783 --tw-size-32: 8rem; 784 --tw-size-36: 9rem; 785 --tw-size-40: 10rem; 786 --tw-size-44: 11rem; 787 --tw-size-48: 12rem; 788 --tw-size-52: 13rem; 789 --tw-size-56: 14rem; 790 --tw-size-60: 15rem; 791 --tw-size-64: 16rem; 792 --tw-size-72: 18rem; 793 --tw-size-80: 20rem; 794 --tw-size-96: 24rem; 795 --tw-size-px: 1px; 796 --tw-size-0_5: 0.125rem; 797 --tw-size-1_5: 0.375rem; 798 --tw-size-2_5: 0.625rem; 799 --tw-size-3_5: 0.875rem; 800 --tw-width-1: 1; 801 --tw-width-2: 2; 802 --tw-width-3: 3; 803 --tw-width-4: 4; 804 --tw-width-5: 5; 805 --tw-width-6: 6; 806 --tw-width-7: 7; 807 --tw-width-8: 8; 808 --tw-width-9: 9; 809 --tw-width-10: 10; 810 --tw-width-11: 11; 811 --tw-width-12: 12; 812 --tw-width-auto: auto; 813 --tw-width-3xs: 16rem; 814 --tw-width-2xs: 18rem; 815 --tw-width-xs: 20rem; 816 --tw-width-sm: 24rem; 817 --tw-width-md: 28rem; 818 --tw-width-lg: 32rem; 819 --tw-width-xl: 36rem; 820 --tw-width-2xl: 42rem; 821 --tw-width-3xl: 48rem; 822 --tw-width-4xl: 56rem; 823 --tw-width-5xl: 64rem; 824 --tw-width-6xl: 72rem; 825 --tw-width-7xl: 80rem; 826 --tw-width-prose: 65ch; 827 --tw-font-family-sans: ui-sans-serif, system-ui, -apple-system, 828 BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", 829 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 830 "Noto Color Emoji"; 831 --tw-font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, 832 serif; 833 --tw-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 834 "Liberation Mono", "Courier New", monospace; 835 --tw-font-size-xs: 0.75rem; 836 --tw-font-size-sm: 0.875rem; 837 --tw-font-size-base: 1rem; 838 --tw-font-size-lg: 1.125rem; 839 --tw-font-size-xl: 1.25rem; 840 --tw-font-size-2xl: 1.5rem; 841 --tw-font-size-3xl: 1.875rem; 842 --tw-font-size-4xl: 2.25rem; 843 --tw-font-size-5xl: 3rem; 844 --tw-font-size-6xl: 3.75rem; 845 --tw-font-size-7xl: 4.5rem; 846 --tw-font-size-8xl: 6rem; 847 --tw-font-size-9xl: 8rem; 848 --tw-font-weight-thin: 100; 849 --tw-font-weight-extralight: 200; 850 --tw-font-weight-light: 300; 851 --tw-font-weight-normal: 400; 852 --tw-font-weight-medium: 500; 853 --tw-font-weight-semibold: 600; 854 --tw-font-weight-bold: 700; 855 --tw-font-weight-extrabold: 800; 856 --tw-font-weight-black: 900; 857 --tw-line-height-3: 0.75rem; 858 --tw-line-height-4: 1rem; 859 --tw-line-height-5: 1.25rem; 860 --tw-line-height-6: 1.5rem; 861 --tw-line-height-7: 1.75rem; 862 --tw-line-height-8: 2rem; 863 --tw-line-height-9: 2.25rem; 864 --tw-line-height-10: 2.5rem; 865 --tw-line-height-none: 1; 866 --tw-line-height-tight: 1.25; 867 --tw-line-height-snug: 1.375; 868 --tw-line-height-normal: 1.5; 869 --tw-line-height-relaxed: 1.625; 870 --tw-line-height-loose: 2; 871 --tw-border-radius-none: 0px; 872 --tw-border-radius-sm: 0.125rem; 873 --tw-border-radius-default: 0.25rem; 874 --tw-border-radius-md: 0.375rem; 875 --tw-border-radius-lg: 0.5rem; 876 --tw-border-radius-xl: 0.75rem; 877 --tw-border-radius-2xl: 1rem; 878 --tw-border-radius-3xl: 1.5rem; 879 --tw-border-radius-full: 9999px; 880} 881 882@layer tailwind-reset { 883 884 885 *,
886 ::before, 887 ::after { 888 box-sizing: border-box; 889 border-width: 0; 890 border-style: solid; 891 border-color: rgb(var(--tw-color-gray-200) / 1); 892 } 893 894 ::before, 895 ::after { 896 --tw-content: ""; 897 } 898 899 900 901 html { 902 line-height: 1.5; 903 -webkit-text-size-adjust: 100%; 904 -moz-tab-size: 4; 905 -o-tab-size: 4; 906 tab-size: 4; 907 font-family: var(--tw-font-family-sans); 908 font-feature-settings: normal; 909 font-variation-settings: normal; 910 } 911 912 913 914 body { 915 margin: 0; 916 line-height: inherit; 917 } 918 919 920 921 hr { 922 height: 0; 923 color: inherit; 924 border-top-width: 1px; 925 } 926 927 928 929 abbr:where([title]) { 930 -webkit-text-decoration: underline dotted; 931 text-decoration: underline dotted; 932 } 933 934 935 936 h1, 937 h2, 938 h3, 939 h4, 940 h5, 941 h6 { 942 font-size: inherit; 943 font-weight: inherit; 944 } 945 946 947 948 a { 949 color: inherit; 950 text-decoration: inherit; 951 } 952 953 954 955 b, 956 strong { 957 font-weight: bolder; 958 } 959 960 961 962 code, 963 kbd, 964 samp, 965 pre { 966 font-family: var(--tw-font-family-mono); 967 font-size: 1em; 968 } 969 970 971 972 small { 973 font-size: 80%; 974 } 975 976 977 978 sub, 979 sup { 980 font-size: 75%; 981 line-height: 0; 982 position: relative; 983 vertical-align: baseline; 984 } 985 986 sub { 987 bottom: -0.25em; 988 } 989 990 sup { 991 top: -0.5em; 992 } 993 994 995 996 table { 997 text-indent: 0; 998 border-color: inherit; 999 border-collapse: collapse; 1000 } 1001 1002 1003 1004 button, 1005 input, 1006 optgroup, 1007 select, 1008 textarea { 1009 font-family: inherit; 1010 font-feature-settings: inherit; 1011 font-variation-settings: inherit; 1012 font-size: 100%; 1013 font-weight: inherit; 1014 line-height: inherit; 1015 color: inherit; 1016 margin: 0; 1017 padding: 0; 1018 } 1019 1020 1021 1022 button, 1023 select { 1024 text-transform: none; 1025 } 1026 1027 1028 1029 button, 1030 [type="button"], 1031 [type="reset"], 1032 [type="submit"] { 1033 -webkit-appearance: button; 1034 background-color: transparent; 1035 background-image: none; 1036 } 1037 1038 1039 1040 :-moz-focusring { 1041 outline: auto; 1042 } 1043 1044 1045 1046 :-moz-ui-invalid { 1047 box-shadow: none; 1048 } 1049 1050 1051 1052 progress { 1053 vertical-align: baseline; 1054 } 1055 1056 1057 1058 ::-webkit-inner-spin-button, 1059 ::-webkit-outer-spin-button { 1060 height: auto; 1061 } 1062 1063 1064 1065 [type="search"] { 1066 -webkit-appearance: textfield; 1067 outline-offset: -2px; 1068 } 1069 1070 1071 1072 ::-webkit-search-decoration { 1073 -webkit-appearance: none; 1074 } 1075 1076 1077 1078 ::-webkit-file-upload-button { 1079 -webkit-appearance: button; 1080 font: inherit; 1081 } 1082 1083 1084 1085 summary { 1086 display: list-item; 1087 } 1088 1089 1090 1091 blockquote, 1092 dl, 1093 dd, 1094 h1, 1095 h2, 1096 h3, 1097 h4, 1098 h5, 1099 h6, 1100 hr, 1101 figure, 1102 p, 1103 pre { 1104 margin: 0; 1105 } 1106 1107 fieldset { 1108 margin: 0; 1109 padding: 0; 1110 } 1111 1112 legend { 1113 padding: 0; 1114 } 1115 1116 ol, 1117 ul, 1118 menu { 1119 list-style: none; 1120 margin: 0; 1121 padding: 0; 1122 } 1123 1124 1125 dialog { 1126 padding: 0; 1127 } 1128 1129 1130 1131 textarea { 1132 resize: vertical; 1133 } 1134 1135 1136 1137 input::-moz-placeholder, 1138 textarea::-moz-placeholder { 1139 opacity: 1; 1140 color: rgb(var(--tw-color-gray-400) / 1); 1141 } 1142 1143 input::placeholder, 1144 textarea::placeholder { 1145 opacity: 1; 1146 color: rgb(var(--tw-color-gray-400) / 1); 1147 } 1148 1149 1150 1151 button, 1152 [role="button"] { 1153 cursor: pointer; 1154 } 1155 1156 1157 :disabled { 1158 cursor: default; 1159 } 1160 1161 1162 1163 img, 1164 svg, 1165 video, 1166 canvas, 1167 audio, 1168 iframe, 1169 embed, 1170 object { 1171 display: block; 1172 vertical-align: middle; 1173 } 1174 1175 1176 1177 img, 1178 video { 1179 max-width: 100%; 1180 height: auto; 1181 } 1182 1183 1184 [hidden] { 1185 display: none; 1186 } 1187 *, 1188 ::before, 1189 ::after { 1190 --tw-border-spacing-x: 0; 1191 --tw-border-spacing-y: 0; 1192 --tw-translate-x: 0; 1193 --tw-translate-y: 0; 1194 --tw-rotate: 0; 1195 --tw-skew-x: 0; 1196 --tw-skew-y: 0; 1197 --tw-scale-x: 1; 1198 --tw-scale-y: 1; 1199 --tw-pan-x: ; 1200 --tw-pan-y: ; 1201 --tw-pinch-zoom: ; 1202 --tw-scroll-snap-strictness: proximity; 1203 --tw-gradient-from-position: ; 1204 --tw-gradient-via-position: ; 1205 --tw-gradient-to-position: ; 1206 --tw-ordinal: ; 1207 --tw-slashed-zero: ; 1208 --tw-numeric-figure: ; 1209 --tw-numeric-spacing: ; 1210 --tw-numeric-fraction: ; 1211 --tw-ring-inset: ; 1212 --tw-ring-offset-width: 0px; 1213 --tw-ring-offset-color: #fff; 1214 --tw-ring-color: rgb(147 197 253 / 0.5); 1215 --tw-ring-offset-shadow: 0 0 #0000; 1216 --tw-ring-shadow: 0 0 #0000; 1217 --tw-shadow: 0 0 #0000; 1218 --tw-shadow-colored: 0 0 #0000; 1219 --tw-blur: ; 1220 --tw-brightness: ; 1221 --tw-contrast: ; 1222 --tw-grayscale: ; 1223 --tw-hue-rotate: ; 1224 --tw-invert: ;
1225 --tw-saturate: ; 1226 --tw-sepia: ; 1227 --tw-drop-shadow: ; 1228 --tw-backdrop-blur: ; 1229 --tw-backdrop-brightness: ; 1230 --tw-backdrop-contrast: ; 1231 --tw-backdrop-grayscale: ; 1232 --tw-backdrop-hue-rotate: ; 1233 --tw-backdrop-invert: ; 1234 --tw-backdrop-opacity: ; 1235 --tw-backdrop-saturate: ; 1236 --tw-backdrop-sepia: ; 1237 } 1238 ::-webkit-backdrop { 1239 --tw-border-spacing-x: 0; 1240 --tw-border-spacing-y: 0; 1241 --tw-translate-x: 0; 1242 --tw-translate-y: 0; 1243 --tw-rotate: 0; 1244 --tw-skew-x: 0; 1245 --tw-skew-y: 0; 1246 --tw-scale-x: 1; 1247 --tw-scale-y: 1; 1248 --tw-pan-x: ; 1249 --tw-pan-y: ; 1250 --tw-pinch-zoom: ; 1251 --tw-scroll-snap-strictness: proximity; 1252 --tw-gradient-from-position: ; 1253 --tw-gradient-via-position: ; 1254 --tw-gradient-to-position: ; 1255 --tw-ordinal: ; 1256 --tw-slashed-zero: ; 1257 --tw-numeric-figure: ; 1258 --tw-numeric-spacing: ; 1259 --tw-numeric-fraction: ; 1260 --tw-ring-inset: ; 1261 --tw-ring-offset-width: 0px; 1262 --tw-ring-offset-color: #fff; 1263 --tw-ring-color: rgb(147 197 253 / 0.5); 1264 --tw-ring-offset-shadow: 0 0 #0000; 1265 --tw-ring-shadow: 0 0 #0000; 1266 --tw-shadow: 0 0 #0000; 1267 --tw-shadow-colored: 0 0 #0000; 1268 --tw-blur: ; 1269 --tw-brightness: ; 1270 --tw-contrast: ; 1271 --tw-grayscale: ; 1272 --tw-hue-rotate: ; 1273 --tw-invert: ; 1274 --tw-saturate: ; 1275 --tw-sepia: ; 1276 --tw-drop-shadow: ; 1277 --tw-backdrop-blur: ; 1278 --tw-backdrop-brightness: ; 1279 --tw-backdrop-contrast: ; 1280 --tw-backdrop-grayscale: ; 1281 --tw-backdrop-hue-rotate: ; 1282 --tw-backdrop-invert: ; 1283 --tw-backdrop-opacity: ; 1284 --tw-backdrop-saturate: ; 1285 --tw-backdrop-sepia: ; 1286 } 1287 ::backdrop { 1288 --tw-border-spacing-x: 0; 1289 --tw-border-spacing-y: 0; 1290 --tw-translate-x: 0; 1291 --tw-translate-y: 0; 1292 --tw-rotate: 0; 1293 --tw-skew-x: 0; 1294 --tw-skew-y: 0; 1295 --tw-scale-x: 1; 1296 --tw-scale-y: 1; 1297 --tw-pan-x: ; 1298 --tw-pan-y: ; 1299 --tw-pinch-zoom: ; 1300 --tw-scroll-snap-strictness: proximity; 1301 --tw-gradient-from-position: ; 1302 --tw-gradient-via-position: ; 1303 --tw-gradient-to-position: ; 1304 --tw-ordinal: ; 1305 --tw-slashed-zero: ; 1306 --tw-numeric-figure: ; 1307 --tw-numeric-spacing: ; 1308 --tw-numeric-fraction: ; 1309 --tw-ring-inset: ; 1310 --tw-ring-offset-width: 0px; 1311 --tw-ring-offset-color: #fff; 1312 --tw-ring-color: rgb(147 197 253 / 0.5); 1313 --tw-ring-offset-shadow: 0 0 #0000; 1314 --tw-ring-shadow: 0 0 #0000; 1315 --tw-shadow: 0 0 #0000; 1316 --tw-shadow-colored: 0 0 #0000; 1317 --tw-blur: ; 1318 --tw-brightness: ; 1319 --tw-contrast: ; 1320 --tw-grayscale: ; 1321 --tw-hue-rotate: ; 1322 --tw-invert: ; 1323 --tw-saturate: ; 1324 --tw-sepia: ; 1325 --tw-drop-shadow: ; 1326 --tw-backdrop-blur: ; 1327 --tw-backdrop-brightness: ; 1328 --tw-backdrop-contrast: ; 1329 --tw-backdrop-grayscale: ; 1330 --tw-backdrop-hue-rotate: ; 1331 --tw-backdrop-invert: ; 1332 --tw-backdrop-opacity: ; 1333 --tw-backdrop-saturate: ; 1334 --tw-backdrop-sepia: ; 1335 } 1336} 1337 1338section.my-contact { 1339 --tw-bg-opacity: 1; 1340 background-color: rgb(var(--tw-color-white) / var(--tw-bg-opacity)); 1341} 1342 1343:is(.dark section.my-contact) { 1344 --tw-bg-opacity: 1; 1345 background-color: rgb(var(--tw-color-gray-900) / var(--tw-bg-opacity)); 1346} 1347 1348section.my-contact > div { 1349 padding-top: var(--tw-size-8); 1350 padding-bottom: var(--tw-size-8); 1351} 1352 1353@media (min-width: 1024px) { 1354 section.my-contact > div { 1355 padding-top: var(--tw-size-16); 1356 padding-bottom: var(--tw-size-16); 1357 } 1358} 1359 1360section.my-contact > div { 1361 padding-left: var(--tw-size-4); 1362 padding-right: var(--tw-size-4); 1363 margin-left: auto; 1364 margin-right: auto; 1365 max-width: var(--tw-screen-md); 1366} 1367 1368section.my-contact > div > h2 { 1369 margin-bottom: var(--tw-size-4); 1370 font-size: var(--tw-font-size-4xl); 1371 line-height: var(--tw-line-height-10); 1372 letter-spacing: -0.025em; 1373 font-weight: var(--tw-font-weight-extrabold); 1374 text-align: center; 1375 --tw-text-opacity: 1; 1376 color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity)); 1377} 1378 1379:is(.dark section.my-contact > div > h2) { 1380 --tw-text-opacity: 1; 1381 color: rgb(var(--tw-color-white) / var(--tw-text-opacity)); 1382} 1383 1384section.my-contact > div > p { 1385 margin-bottom: var(--tw-size-8); 1386} 1387 1388@media (min-width: 1024px) { 1389 section.my-contact > div > p { 1390 margin-bottom: var(--tw-size-16); 1391 } 1392} 1393 1394section.my-contact > div > p { 1395 font-weight: var(--tw-font-weight-light); 1396 text-align: center; 1397 --tw-text-opacity: 1; 1398 color: rgb(var(--tw-color-gray-500) / var(--tw-text-opacity)); 1399} 1400 1401:is(.dark section.my-contact > div > p) { 1402 --tw-text-opacity: 1; 1403 color: rgb(var(--tw-color-gray-400) / var(--tw-text-opacity)); 1404} 1405 1406@media (min-width: 640px) { 1407 section.my-contact > div > p { 1408 font-size: var(--tw-font-size-xl); 1409 line-height: var(--tw-line-height-7); 1410 } 1411} 1412 1413section.my-contact > div > form > :not([hidden]) ~ :not([hidden]) { 1414 --tw-space-y-reverse: 0; 1415 margin-top: calc(var(--tw-size-8) * calc(1 - var(--tw-space-y-reverse))); 1416 margin-bottom: calc(var(--tw-size-8) * var(--tw-space-y-reverse)); 1417} 1418 1419section.my-contact > div > form > div > label.my-contact__unique5 { 1420 display: block; 1421 margin-bottom: var(--tw-size-2); 1422 font-size: var(--tw-font-size-sm); 1423 line-height: var(--tw-line-height-5); 1424 font-weight: var(--tw-font-weight-medium); 1425 --tw-text-opacity: 1; 1426 color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity)); 1427} 1428 1429:is(.dark section.my-contact > div > form > div > label.my-contact__unique5) { 1430 --tw-text-opacity: 1; 1431 color: rgb(var(--tw-color-gray-300) / var(--tw-text-opacity)); 1432} 1433 1434section.my-contact > div > form > div > input.my-contact__unique1 { 1435 --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1436 --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); 1437 box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), 1438 var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 1439 --tw-bg-opacity: 1; 1440 background-color: rgb(var(--tw-color-gray-50) / var(--tw-bg-opacity)); 1441 border-width: 1px; 1442 --tw-border-opacity: 1; 1443 border-color: rgb(var(--tw-color-gray-300) / var(--tw-border-opacity)); 1444 --tw-text-opacity: 1; 1445 color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity)); 1446 font-size: var(--tw-font-size-sm); 1447 line-height: var(--tw-line-height-5); 1448 border-radius: var(--tw-border-radius-lg); 1449} 1450 1451section.my-contact > div > form > div > input.my-contact__unique1:focus { 1452 --tw-ring-opacity: 1; 1453 --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity)); 1454 --tw-border-opacity: 1; 1455 border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity)); 1456} 1457 1458section.my-contact > div > form > div > input.my-contact__unique1 { 1459 display: block; 1460 width: 100%; 1461 padding: var(--tw-size-2_5); 1462} 1463 1464:is(.dark section.my-contact > div > form > div > input.my-contact__unique1) { 1465 --tw-bg-opacity: 1; 1466 background-color: rgb(var(--tw-color-gray-700) / var(--tw-bg-opacity)); 1467 --tw-border-opacity: 1; 1468 border-color: rgb(var(--tw-color-gray-600) / var(--tw-border-opacity)); 1469} 1470 1471:is(.dark 1472 section.my-contact 1473 > div 1474 > form 1475 > div 1476 > input.my-contact__unique1)::-moz-placeholder { 1477 --tw-placeholder-opacity: 1; 1478 color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity)); 1479} 1480 1481:is(.dark 1482 section.my-contact 1483 > div 1484 > form 1485 > div 1486 > input.my-contact__unique1)::placeholder { 1487 --tw-placeholder-opacity: 1; 1488 color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity)); 1489} 1490 1491:is(.dark section.my-contact > div > form > div > input.my-contact__unique1) { 1492 --tw-text-opacity: 1; 1493 color: rgb(var(--tw-color-white) / var(--tw-text-opacity)); 1494} 1495 1496:is(.dark 1497 section.my-contact 1498 > div 1499 > form 1500 > div 1501 > input.my-contact__unique1:focus) { 1502 --tw-ring-opacity: 1; 1503 --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity)); 1504 --tw-border-opacity: 1; 1505 border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity)); 1506} 1507 1508:is(.dark section.my-contact > div > form > div > input.my-contact__unique1) { 1509 1510} 1511 1512section.my-contact > div > form > div > input.my-contact__unique2 { 1513 display: block; 1514 padding: var(--tw-size-3); 1515 width: 100%; 1516 font-size: var(--tw-font-size-sm); 1517 line-height: var(--tw-line-height-5); 1518 --tw-text-opacity: 1; 1519 color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity)); 1520 --tw-bg-opacity: 1; 1521 background-color: rgb(var(--tw-color-gray-50) / var(--tw-bg-opacity)); 1522 border-radius: var(--tw-border-radius-lg); 1523 border-width: 1px; 1524 --tw-border-opacity: 1; 1525 border-color: rgb(var(--tw-color-gray-300) / var(--tw-border-opacity)); 1526 --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1527 --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); 1528 box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), 1529 var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 1530} 1531 1532section.my-contact > div > form > div > input.my-contact__unique2:focus { 1533 --tw-ring-opacity: 1; 1534 --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity)); 1535 --tw-border-opacity: 1; 1536 border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity)); 1537} 1538 1539:is(.dark section.my-contact > div > form > div > input.my-contact__unique2) { 1540 --tw-bg-opacity: 1; 1541 background-color: rgb(var(--tw-color-gray-700) / var(--tw-bg-opacity)); 1542 --tw-border-opacity: 1; 1543 border-color: rgb(var(--tw-color-gray-600) / var(--tw-border-opacity)); 1544} 1545 1546:is(.dark 1547 section.my-contact 1548 > div 1549 > form 1550 > div 1551 > input.my-contact__unique2)::-moz-placeholder { 1552 --tw-placeholder-opacity: 1; 1553 color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity)); 1554} 1555 1556:is(.dark 1557 section.my-contact 1558 > div 1559 > form 1560 > div 1561 > input.my-contact__unique2)::placeholder { 1562 --tw-placeholder-opacity: 1; 1563 color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity)); 1564} 1565 1566:is(.dark section.my-contact > div > form > div > input.my-contact__unique2) { 1567 --tw-text-opacity: 1; 1568 color: rgb(var(--tw-color-white) / var(--tw-text-opacity)); 1569} 1570 1571:is(.dark 1572 section.my-contact 1573 > div 1574 > form 1575 > div 1576 > input.my-contact__unique2:focus) { 1577 --tw-ring-opacity: 1; 1578 --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity)); 1579 --tw-border-opacity: 1; 1580 border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity)); 1581} 1582 1583:is(.dark section.my-contact > div > form > div > input.my-contact__unique2) { 1584 1585} 1586 1587@media (min-width: 640px) { 1588 section.my-contact > div > form > div.my-contact__unique4 { 1589 grid-column: span 2 / span 2; 1590 } 1591} 1592 1593section.my-contact > div > form > div > label.my-contact__unique6 { 1594 display: block; 1595 margin-bottom: var(--tw-size-2); 1596 font-size: var(--tw-font-size-sm); 1597 line-height: var(--tw-line-height-5); 1598 font-weight: var(--tw-font-weight-medium); 1599 --tw-text-opacity: 1; 1600 color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity)); 1601} 1602 1603:is(.dark section.my-contact > div > form > div > label.my-contact__unique6) { 1604 --tw-text-opacity: 1; 1605 color: rgb(var(--tw-color-gray-400) / var(--tw-text-opacity)); 1606} 1607 1608section.my-contact > div > form > div > textarea { 1609 display: block; 1610 padding: var(--tw-size-2_5); 1611 width: 100%; 1612 font-size: var(--tw-font-size-sm); 1613 line-height: var(--tw-line-height-5); 1614 --tw-text-opacity: 1; 1615 color: rgb(var(--tw-color-gray-900) / var(--tw-text-opacity)); 1616 --tw-bg-opacity: 1; 1617 background-color: rgb(var(--tw-color-gray-50) / var(--tw-bg-opacity)); 1618 border-radius: var(--tw-border-radius-lg); 1619 --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1620 --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); 1621 box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), 1622 var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 1623 border-width: 1px; 1624 --tw-border-opacity: 1; 1625 border-color: rgb(var(--tw-color-gray-300) / var(--tw-border-opacity)); 1626} 1627 1628section.my-contact > div > form > div > textarea:focus { 1629 --tw-ring-opacity: 1; 1630 --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity)); 1631 --tw-border-opacity: 1; 1632 border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity)); 1633} 1634 1635:is(.dark section.my-contact > div > form > div > textarea) { 1636 --tw-bg-opacity: 1; 1637 background-color: rgb(var(--tw-color-gray-700) / var(--tw-bg-opacity)); 1638 --tw-border-opacity: 1; 1639 border-color: rgb(var(--tw-color-gray-600) / var(--tw-border-opacity)); 1640} 1641 1642:is(.dark section.my-contact > div > form > div > textarea)::-moz-placeholder { 1643 --tw-placeholder-opacity: 1; 1644 color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity)); 1645} 1646 1647:is(.dark section.my-contact > div > form > div > textarea)::placeholder { 1648 --tw-placeholder-opacity: 1; 1649 color: rgb(var(--tw-color-gray-400) / var(--tw-placeholder-opacity)); 1650} 1651 1652:is(.dark section.my-contact > div > form > div > textarea) { 1653 --tw-text-opacity: 1; 1654 color: rgb(var(--tw-color-white) / var(--tw-text-opacity)); 1655} 1656 1657:is(.dark section.my-contact > div > form > div > textarea:focus) { 1658 --tw-ring-opacity: 1; 1659 --tw-ring-color: rgb(var(--tw-color-primary-500) / var(--tw-ring-opacity)); 1660 --tw-border-opacity: 1; 1661 border-color: rgb(var(--tw-color-primary-500) / var(--tw-border-opacity)); 1662} 1663 1664section.my-contact > div > form > button { 1665 padding-top: var(--tw-size-3); 1666 padding-bottom: var(--tw-size-3); 1667 padding-left: var(--tw-size-5); 1668 padding-right: var(--tw-size-5); 1669 font-size: var(--tw-font-size-sm); 1670 line-height: var(--tw-line-height-5); 1671 font-weight: var(--tw-font-weight-medium); 1672 text-align: center; 1673 --tw-text-opacity: 1; 1674 color: rgb(var(--tw-color-white) / var(--tw-text-opacity)); 1675 border-radius: var(--tw-border-radius-lg); 1676 --tw-bg-opacity: 1; 1677 background-color: rgb(var(--tw-color-primary-700) / var(--tw-bg-opacity)); 1678} 1679 1680@media (min-width: 640px) { 1681 section.my-contact > div > form > button { 1682 width: -webkit-fit-content; 1683 width: -moz-fit-content; 1684 width: fit-content; 1685 } 1686} 1687 1688section.my-contact > div > form > button:hover { 1689 --tw-bg-opacity: 1; 1690 background-color: rgb(var(--tw-color-primary-800) / var(--tw-bg-opacity)); 1691} 1692 1693section.my-contact > div > form > button:focus { 1694 --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 1695 var(--tw-ring-offset-width) var(--tw-ring-offset-color); 1696 --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 1697 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); 1698 box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
1699 var(--tw-shadow, 0 0 #0000); 1700 outline: 2px solid transparent; 1701 outline-offset: 2px; 1702 --tw-ring-opacity: 1; 1703 --tw-ring-color: rgb(var(--tw-color-primary-300) / var(--tw-ring-opacity)); 1704} 1705 1706:is(.dark section.my-contact > div > form > button) { 1707 --tw-bg-opacity: 1; 1708 background-color: rgb(var(--tw-color-primary-600) / var(--tw-bg-opacity)); 1709} 1710 1711:is(.dark section.my-contact > div > form > button:hover) { 1712 --tw-bg-opacity: 1; 1713 background-color: rgb(var(--tw-color-primary-700) / var(--tw-bg-opacity)); 1714} 1715 1716:is(.dark section.my-contact > div > form > button:focus) { 1717 --tw-ring-opacity: 1; 1718 --tw-ring-color: rgb(var(--tw-color-primary-800) / var(--tw-ring-opacity)); 1719} 1720</style> 1721 1722<section class="my-contact"> 1723 <div> 1724 <p>Questions? Comments? Insults?<br/> 1725 Feel free to drop me a line below, I love getting messages!</p> 1726 <form action="https://formsubmit.co/ada1dfc46bcebd712b78e02efbcc3dd3" method="POST" target="_blank"> 1727 <div class="my-contact__unique3"> 1728 <label for="text" class="my-contact__unique5">Your name:</label> 1729 <input name="name" type="text" id="name" placeholder="Your name here" required="" class="my-contact__unique1"> 1730 </div> 1731 <div class="my-contact__unique3"> 1732 <label for="email" class="my-contact__unique5">Your email (so I can reply. Always kept confidential, of course.)</label> 1733 <input name="email" type="email" id="email" class="my-contact__unique2" placeholder="[email protected]" required=""> 1734 </div> 1735 <div class="my-contact__unique4"> 1736 <label for="message" class="my-contact__unique6">Message:</label> 1737 <textarea name="message" id="message" rows="6" placeholder="">Dear Kristof, can you tell me more about...</textarea> 1738 </div> 1739 <button type="submit">Send message</button> 1740 </form> 1741 </div> 1742</section> 1743 1744 </div> 1745 </div> 1746 1747 1748 </footer> 1749 </article> 1750 1751 1752 </main><footer class="py-10 print:hidden"> 1753 1754 1755 <div class="flex items-center justify-between"> 1756 <div> 1757 1758 1759 <p class="text-sm text-neutral-500 dark:text-neutral-400"> 1760 © 1761 2026 1762 Kristof Kovacs 1763 </p> 1764 1765 1766 1767 <p class="text-xs text-neutral-500 dark:text-neutral-400"> 1768 1769 1770 Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" 1771 href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://github.com/jpanther/congo" target="_blank" rel="noopener noreferrer">Congo</a> 1772 </p> 1773 1774 </div> 1775 <div class="flex flex-row items-center"> 1776 1777 1778 1779 1780 </div> 1781 </div> 1782 1783 1784</footer> 1785 1786 </div> 1787
1787<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"48712f749e9f4ad3ba9b0e4683ad0b97","r":1,"spa":2}' crossorigin="anonymous"></script>
1787 1788</body> 1789</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.