<!DOCTYPE html><html lang="en" class="h-full antialiased"> <head><!-- Global Metadata --><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://fav.farm/🖥"><meta name="generator" content="Astro v5.8.1"><!-- Canonical URL --><link rel="canonical" href="https://www.devanb.us/"><!-- Primary Meta Tags --><title>Home :: devanb.us</title><meta name="title" content="Home :: devanb.us"><meta name="description" content="Welcome to my website!"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://www.devanb.us/"><meta property="og:title" content="Home :: devanb.us"><meta property="og:description" content="Welcome to my website!"><meta property="og:image" content="https://www.devanb.us/blog-placeholder-1.jpg"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://www.devanb.us/"><meta property="twitter:title" content="Home :: devanb.us"><meta property="twitter:description" content="Welcome to my website!"><meta property="twitter:image" content="https://www.devanb.us/blog-placeholder-1.jpg"><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><script type="module">document.addEventListener("astro:before-swap",e=>[...e.newDocument.head.querySelectorAll('link[as="font"]')].forEach(o=>o.remove()));</script><script>
  function init() {
    preloadTheme()
    onScroll()
    animate()

    const backToTop = document.getElementById('back-to-top')
    backToTop?.addEventListener('click', (event) => scrollToTop(event))

    const backToPrev = document.getElementById('back-to-prev')
    backToPrev?.addEventListener('click', () => window.history.back())

    const themeButton = document.getElementById('theme-toggle')
    themeButton?.addEventListener('click', () => {
      const userTheme = localStorage.theme
      if (userTheme === 'dark') {
        localStorage.setItem('theme', 'light')
        toggleTheme(false)
      } else {
        localStorage.setItem('theme', 'dark')
        toggleTheme(true)
      }
    })
  }

  function animate() {
    const animateElements = document.querySelectorAll('.animate')

    animateElements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('show')
      }, index * 150)
    })
  }

  function onScroll() {
    if (window.scrollY > 0) {
      document.documentElement.classList.add('scrolled')
    } else {
      document.documentElement.classList.remove('scrolled')
    }
  }

  function scrollToTop(event) {
    event.preventDefault()
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    })
  }

  function toggleTheme(dark) {
    const css = document.createElement('style')

    css.appendChild(
      document.createTextNode(
        `* {
	     -webkit-transition: none !important;
	     -moz-transition: none !important;
	     -o-transition: none !important;
	     -ms-transition: none !important;
	     transition: none !important;
	  }
	`,
      ),
    )

    document.head.appendChild(css)

    if (dark) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }

    window.getComputedStyle(css).opacity
    document.head.removeChild(css)
  }

  function preloadTheme() {
    const userTheme = localStorage.theme

    if (userTheme === 'light' || userTheme === 'dark') {
      toggleTheme(userTheme === 'dark')
    } else {
      toggleTheme(window.matchMedia('(prefers-color-scheme: dark)').matches)
    }
  }

  document.addEventListener('DOMContentLoaded', () => init())
  document.addEventListener('astro:after-swap', () => init())
  preloadTheme()
</script><link rel="stylesheet" href="/_astro/_id_.CD-RRk93.css"></head> <body class="flex h-full bg-zinc-50 dark:bg-black"> <div class="flex w-full"> <div class="fixed inset-0 flex justify-center sm:px-8"> <div class="flex w-full max-w-7xl lg:px-8"> <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"></div> </div> </div> <div class="relative flex w-full flex-col"> <header class="pointer-events-none relative z-50 flex flex-none flex-col" style="height: var(--header-height); margin-bottom: var(--header-mb);" id="main-header"> <div id="header-ref" class="top-0 z-10 h-16 pt-6" style="position: var(--header-position)"> <div class="sm:px-8 top-(--header-top,--spacing(6)) w-full" style="position: var(--header-inner-position)"> <div class="mx-auto w-full max-w-7xl lg:px-8">  <div class="relative px-4 sm:px-8 lg:px-12" style=""> <div class="mx-auto max-w-2xl lg:max-w-5xl">   <div class="relative flex gap-4"> <div class="flex flex-1"> <div class="h-10 w-10 rounded-full bg-white/90 p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-sm dark:bg-zinc-800/90 dark:ring-white/10">  <a href="/" aria-label="Home" class="pointer-events-auto"> <img src="/_astro/avatar.BnT4o5kX_6E3aP.webp" alt="avatar of devan beitel with monkey on his shoulder" loading="eager" width="215" height="215" decoding="async" class="rounded-full bg-zinc-100 object-cover dark:bg-zinc-800 h-9 w-9"> </a>  </div> </div> <div class="flex flex-1 justify-end md:justify-center"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="15nnM" component-url="/_astro/MobileNavigation.DGGwd8up.js" component-export="default" renderer-url="/_astro/client.BjbN-mUP.js" props="{&quot;className&quot;:[0,&quot;pointer-events-auto md:hidden&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;MobileNavigation&quot;,&quot;value&quot;:true}"></astro-island> <nav class="pointer-events-auto hidden md:block"> <ul class="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-sm dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10"> <li> <a href="/" class="relative block px-3 py-2 transition text-teal-500 dark:text-teal-400"> Home <span class="absolute inset-x-1 -bottom-px h-px bg-linear-to-r from-teal-500/0 via-teal-500/40 to-teal-500/0 dark:from-teal-400/0 dark:via-teal-400/40 dark:to-teal-400/0"></span> </a> </li> <li> <a href="/about" class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400"> About  </a> </li> <li> <a href="/articles" class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400"> Articles  </a> </li> <li> <a href="/projects" class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400"> Projects  </a> </li> <li> <a href="/now" class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400"> Now  </a> </li> </ul> </nav> </div> <div class="flex justify-end md:flex-1"> <div class="pointer-events-auto"> <button type="button" id="theme-toggle" aria-label="Switch themes" class="rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-sm transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"> <svg viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="h-6 w-6 fill-zinc-100 stroke-zinc-500 transition group-hover:fill-zinc-200 group-hover:stroke-zinc-700 dark:hidden [@media(prefers-color-scheme:dark)]:fill-teal-50 [@media(prefers-color-scheme:dark)]:stroke-teal-500 [@media(prefers-color-scheme:dark)]:group-hover:fill-teal-50 [@media(prefers-color-scheme:dark)]:group-hover:stroke-teal-600"> <path d="M8 12.25A4.25 4.25 0 0 1 12.25 8v0a4.25 4.25 0 0 1 4.25 4.25v0a4.25 4.25 0 0 1-4.25 4.25v0A4.25 4.25 0 0 1 8 12.25v0Z"></path> <path d="M12.25 3v1.5M21.5 12.25H20M18.791 18.791l-1.06-1.06M18.791 5.709l-1.06 1.06M12.25 20v1.5M4.5 12.25H3M6.77 6.77 5.709 5.709M6.77 17.73l-1.061 1.061" fill="none"></path> </svg> <svg viewBox="0 0 24 24" aria-hidden="true" class="hidden h-6 w-6 fill-zinc-700 stroke-zinc-500 transition dark:block [@media(prefers-color-scheme:dark)]:group-hover:stroke-zinc-400 [@media_not_(prefers-color-scheme:dark)]:fill-teal-400/10 [@media_not_(prefers-color-scheme:dark)]:stroke-teal-500"> <path d="M17.25 16.22a6.937 6.937 0 0 1-9.47-9.47 7.451 7.451 0 1 0 9.47 9.47ZM12.75 7C17 7 17 2.75 17 2.75S17 7 21.25 7C17 7 17 11.25 17 11.25S17 7 12.75 7Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </button> </div> </div> </div>   </div> </div>  </div> </div> </div> </header> <div class="flex-none" style="height: var(--content-offset)"></div> <script type="module">function p(e,r,a){let o=Math.min(r,a),n=Math.max(r,a);return Math.min(Math.max(e,o),n)}let d=!0;const h=document.getElementById("header-ref"),c=document.getElementById("avatar-ref");function t(e,r){document.documentElement.style.setProperty(e,r)}function i(e){document.documentElement.style.removeProperty(e)}function m(){if(!h)return;const e=c?.offsetTop??0,r=64;let{top:a,height:o}=h.getBoundingClientRect(),n=p(window.scrollY,0,document.body.scrollHeight-window.innerHeight);if(d&&t("--header-position","sticky"),t("--content-offset",`${e}px`),d||n<e)t("--header-height",`${e+o}px`),t("--header-mb",`${-e}px`);else if(a+o<-64){let s=Math.max(o,n-r);t("--header-height",`${s}px`),t("--header-mb",`${o-s}px`)}else a===0&&(t("--header-height",`${n+o}px`),t("--header-mb",`${-n}px`));a===0&&n>0&&n>=e?(t("--header-inner-position","fixed"),i("--header-top"),i("--avatar-top")):(i("--header-inner-position"),t("--header-top","0px"),t("--avatar-top","0px"))}function l(){m(),d=!1}l();window.addEventListener("scroll",l,{passive:!0});window.addEventListener("resize",l);</script> <main class="flex-auto">  <div class="sm:px-8 mt-9 lg:mt-32" style=""> <div class="mx-auto w-full max-w-7xl lg:px-8">  <div class="relative px-4 sm:px-8 lg:px-12" style=""> <div class="mx-auto max-w-2xl lg:max-w-5xl">   <div class="max-w-2xl"> <h1 class="animate text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
Technology leader, software developer, graphic designer
</h1> <p class="animate mt-6 text-base text-zinc-600 dark:text-zinc-400">
I'm Devan, a software engineer with over 12 years experience, including
        more than 7 years in leadership roles. I also have a graphic design
        degree with a focus on UI/UX and web architecture. I am currently based
        in Florida, situated between the Space Coast and the Gulf. When away
        from my desk, I enjoy beekeeping, tea, and flying planes.
</p> <div class="animate mt-6 flex gap-6"> <a href="https://github.com/DevanB" aria-label="Follow on GitHub" class="group -m-1 p-1"> <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"></path> </svg> </a> <a href="https://x.com/devanbeitel" aria-label="Follow on X" class="group -m-1 p-1"> <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"> <path d="M13.3174 10.7749L19.1457 4H17.7646L12.7039 9.88256L8.66193 4H4L10.1122 12.8955L4 20H5.38119L10.7254 13.7878L14.994 20H19.656L13.3171 10.7749H13.3174ZM11.4257 12.9738L10.8064 12.0881L5.87886 5.03974H8.00029L11.9769 10.728L12.5962 11.6137L17.7652 19.0075H15.6438L11.4257 12.9742V12.9738Z"></path> </svg> </a> <a href="https://www.linkedin.com/in/devanb" aria-label="Follow on LinkedIn" class="group -m-1 p-1"> <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"> <path d="M18.335 18.339H15.67v-4.177c0-.996-.02-2.278-1.39-2.278-1.389 0-1.601 1.084-1.601 2.205v4.25h-2.666V9.75h2.56v1.17h.035c.358-.674 1.228-1.387 2.528-1.387 2.7 0 3.2 1.778 3.2 4.091v4.715zM7.003 8.575a1.546 1.546 0 01-1.548-1.549 1.548 1.548 0 111.547 1.549zm1.336 9.764H5.666V9.75H8.34v8.589zM19.67 3H4.329C3.593 3 3 3.58 3 4.297v15.406C3 20.42 3.594 21 4.328 21h15.338C20.4 21 21 20.42 21 19.703V4.297C21 3.58 20.4 3 19.666 3h.003z"></path> </svg> </a> <a href="mailto:devan@devanb.us" aria-label="Send me an email" class="group -m-1 p-1"> <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="h-6 w-6 stroke-zinc-400 transition group-hover:stroke-zinc-600 dark:fill-zinc-900/10 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-300"> <path d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"></path> <path d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"></path> </svg> </a> </div> </div>   </div> </div>  </div> </div> <div class="animate mt-16 sm:mt-20"> <div class="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8"> <div class="relative aspect-9/10 w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 sm:w-72 sm:rounded-2xl dark:bg-zinc-800 rotate-2"> <img src="/_astro/image-1.CGFvrOXV_Z2vSsEX.webp" loading="eager" alt width="756" height="1008" decoding="async" class="absolute inset-0 h-full w-full object-cover"> </div><div class="relative aspect-9/10 w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 sm:w-72 sm:rounded-2xl dark:bg-zinc-800 -rotate-2"> <img src="/_astro/image-2.C4LwLGmT_Z1Ie1PR.webp" loading="eager" alt width="756" height="1008" decoding="async" class="absolute inset-0 h-full w-full object-cover"> </div><div class="relative aspect-9/10 w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 sm:w-72 sm:rounded-2xl dark:bg-zinc-800 rotate-2"> <img src="/_astro/image-3.CE5ewF16_mB1Ez.webp" loading="eager" alt width="1008" height="756" decoding="async" class="absolute inset-0 h-full w-full object-cover"> </div><div class="relative aspect-9/10 w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 sm:w-72 sm:rounded-2xl dark:bg-zinc-800 rotate-2"> <img src="/_astro/image-4.WBPhjso6_Z16mCDD.webp" loading="eager" alt width="1008" height="756" decoding="async" class="absolute inset-0 h-full w-full object-cover"> </div><div class="relative aspect-9/10 w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 sm:w-72 sm:rounded-2xl dark:bg-zinc-800 -rotate-2"> <img src="/_astro/image-5.CIWdGmvg_ZxmJF.webp" loading="eager" alt width="756" height="1008" decoding="async" class="absolute inset-0 h-full w-full object-cover"> </div> </div> </div> <div class="sm:px-8 mt-24 md:mt-28" style=""> <div class="mx-auto w-full max-w-7xl lg:px-8">  <div class="relative px-4 sm:px-8 lg:px-12" style=""> <div class="mx-auto max-w-2xl lg:max-w-5xl">   <div class="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2"> <div class="animate flex flex-col gap-12"> <article class="group relative flex flex-col items-start"> <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">  <div class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl dark:bg-zinc-800/50"></div> <a href="/articles/perfection-slows-you-down"> <span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"></span> <span class="relative z-10"> Perfection Slows You Down </span> </a>  </h2> <time class="undefined relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5"> <span class="absolute inset-y-0 left-0 flex items-center" aria-hidden="true"> <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span> </span> April 28, 2025 </time> <p class="relative z-10 text-sm text-zinc-600 dark:text-zinc-400 mt-1"> Aim for progress, not perfection. Done is better than perfect... </p> <div aria-hidden="true" class="relative z-10 flex items-center text-sm font-medium text-teal-500 mt-2"> Read article <svg viewBox="0 0 24 24" fill="none" class="ml-1 size-4 stroke-2 fill-none stroke-current rotate-180"> <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></line> <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></polyline> </svg> </div> </article><article class="group relative flex flex-col items-start"> <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">  <div class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl dark:bg-zinc-800/50"></div> <a href="/articles/mbas-software-planning"> <span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"></span> <span class="relative z-10"> Should MBAs be involved in software planning? </span> </a>  </h2> <time class="undefined relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5"> <span class="absolute inset-y-0 left-0 flex items-center" aria-hidden="true"> <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span> </span> February 27, 2025 </time> <p class="relative z-10 text-sm text-zinc-600 dark:text-zinc-400 mt-1"> You don&#39;t have to agree with this post (or me), but that doesn&#39;t mean you are correct </p> <div aria-hidden="true" class="relative z-10 flex items-center text-sm font-medium text-teal-500 mt-2"> Read article <svg viewBox="0 0 24 24" fill="none" class="ml-1 size-4 stroke-2 fill-none stroke-current rotate-180"> <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></line> <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></polyline> </svg> </div> </article><article class="group relative flex flex-col items-start"> <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">  <div class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl dark:bg-zinc-800/50"></div> <a href="/articles/nuclear-power-deep-dive-series"> <span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"></span> <span class="relative z-10"> Nuclear Power Deep Dive Series </span> </a>  </h2> <time class="undefined relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5"> <span class="absolute inset-y-0 left-0 flex items-center" aria-hidden="true"> <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span> </span> February 15, 2025 </time> <p class="relative z-10 text-sm text-zinc-600 dark:text-zinc-400 mt-1"> The word &#39;nuclear&#39; has baggage in modern society due to the Cold War and video games of post-nuclear fallout. However, nuclear itself isn&#39;t as dangerous as most would believe. In fact, nuclear power is a clean, efficient, and safe source of energy. </p> <div aria-hidden="true" class="relative z-10 flex items-center text-sm font-medium text-teal-500 mt-2"> Read article <svg viewBox="0 0 24 24" fill="none" class="ml-1 size-4 stroke-2 fill-none stroke-current rotate-180"> <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></line> <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></polyline> </svg> </div> </article><article class="group relative flex flex-col items-start"> <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">  <div class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl dark:bg-zinc-800/50"></div> <a href="/articles/postal-zip-codes-explained"> <span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"></span> <span class="relative z-10"> Zip/postal codes explained </span> </a>  </h2> <time class="undefined relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5"> <span class="absolute inset-y-0 left-0 flex items-center" aria-hidden="true"> <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span> </span> February 9, 2025 </time> <p class="relative z-10 text-sm text-zinc-600 dark:text-zinc-400 mt-1"> I&#39;ve always wondered how zip codes (postal codes in other countries) work. This video by CGP Grey, in regular fashion, explains the logic and future of them. </p> <div aria-hidden="true" class="relative z-10 flex items-center text-sm font-medium text-teal-500 mt-2"> Read article <svg viewBox="0 0 24 24" fill="none" class="ml-1 size-4 stroke-2 fill-none stroke-current rotate-180"> <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></line> <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></polyline> </svg> </div> </article><article class="group relative flex flex-col items-start"> <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">  <div class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl dark:bg-zinc-800/50"></div> <a href="/articles/asssertive-communication"> <span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"></span> <span class="relative z-10"> Assertive communication: a tightrope walk </span> </a>  </h2> <time class="undefined relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5"> <span class="absolute inset-y-0 left-0 flex items-center" aria-hidden="true"> <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span> </span> January 23, 2025 </time> <p class="relative z-10 text-sm text-zinc-600 dark:text-zinc-400 mt-1"> While I may not be in complete agreement with every aspect of the article, I found it insightful and that it resonates with my own experiences. </p> <div aria-hidden="true" class="relative z-10 flex items-center text-sm font-medium text-teal-500 mt-2"> Read article <svg viewBox="0 0 24 24" fill="none" class="ml-1 size-4 stroke-2 fill-none stroke-current rotate-180"> <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></line> <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></polyline> </svg> </div> </article> </div> <div class="animate space-y-10 lg:pl-10 xl:pl-18"> <div class="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"> <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100"> <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="h-6 w-6 flex-none"> <path d="M2.75 9.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z" class="stroke-zinc-400 dark:stroke-zinc-500"></path> <path d="M3 14.25h6.249c.484 0 .952-.002 1.316.319l.777.682a.996.996 0 0 0 1.316 0l.777-.682c.364-.32.832-.319 1.316-.319H21M8.75 6.5V4.75a2 2 0 0 1 2-2h2.5a2 2 0 0 1 2 2V6.5" class="stroke-zinc-400 dark:stroke-zinc-500"></path> </svg> <span class="ml-3">Work</span> </h2> <ol class="mt-6 space-y-4"> <li class="flex gap-4"> <div class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"> <img src="/_astro/logoLigonier.BMYHe_Oy_ZYHyLR.webp" alt width="100" height="100" loading="lazy" decoding="async" class="rounded-full h-7 w-7"> </div> <dl class="flex flex-auto flex-wrap gap-x-2"> <dt class="sr-only">Company</dt> <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100"> Ligonier Ministries </dd> <dt class="sr-only">Role</dt> <dd class="text-xs text-zinc-500 dark:text-zinc-400"> Sr. Manager of Software Engineering </dd> <dt class="sr-only">Date</dt> <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2020 until 2025"> <time datetime="2020">2020</time>  <span aria-hidden="true">—</span>  <time datetime="2025"> 2025 </time> </dd> </dl> </li><li class="flex gap-4"> <div class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"> <img src="/_astro/logoG2i.BJ2D-L-G_ZDdviQ.webp" alt width="86" height="86" loading="lazy" decoding="async" class="rounded-full h-7 w-7"> </div> <dl class="flex flex-auto flex-wrap gap-x-2"> <dt class="sr-only">Company</dt> <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100"> G2i Inc. </dd> <dt class="sr-only">Role</dt> <dd class="text-xs text-zinc-500 dark:text-zinc-400"> Engineering Technical Lead </dd> <dt class="sr-only">Date</dt> <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2019 until 2020"> <time datetime="2019">2019</time>  <span aria-hidden="true">—</span>  <time datetime="2020"> 2020 </time> </dd> </dl> </li><li class="flex gap-4"> <div class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"> <img src="/_astro/logoSimpeo.CJWcs-Pb_2osQIg.webp" alt width="100" height="100" loading="lazy" decoding="async" class="rounded-full h-7 w-7"> </div> <dl class="flex flex-auto flex-wrap gap-x-2"> <dt class="sr-only">Company</dt> <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100"> Simpeo </dd> <dt class="sr-only">Role</dt> <dd class="text-xs text-zinc-500 dark:text-zinc-400"> Chief Technology Officer </dd> <dt class="sr-only">Date</dt> <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2018 until 2019"> <time datetime="2018">2018</time>  <span aria-hidden="true">—</span>  <time datetime="2019"> 2019 </time> </dd> </dl> </li><li class="flex gap-4"> <div class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"> <img src="/_astro/logoEnvy.Bwt1qI3e_Z2aUFl0.webp" alt width="100" height="100" loading="lazy" decoding="async" class="rounded-full h-7 w-7"> </div> <dl class="flex flex-auto flex-wrap gap-x-2"> <dt class="sr-only">Company</dt> <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100"> Envy Labs </dd> <dt class="sr-only">Role</dt> <dd class="text-xs text-zinc-500 dark:text-zinc-400"> Web Developer </dd> <dt class="sr-only">Date</dt> <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2017 until 2018"> <time datetime="2017">2017</time>  <span aria-hidden="true">—</span>  <time datetime="2018"> 2018 </time> </dd> </dl> </li><li class="flex gap-4"> <div class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"> <img src="/_astro/logoLuckie.Be7y-Y_x_Z1J66T8.webp" alt width="100" height="100" loading="lazy" decoding="async" class="rounded-full h-7 w-7"> </div> <dl class="flex flex-auto flex-wrap gap-x-2"> <dt class="sr-only">Company</dt> <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100"> Luckie &amp; Company </dd> <dt class="sr-only">Role</dt> <dd class="text-xs text-zinc-500 dark:text-zinc-400"> Web Developer </dd> <dt class="sr-only">Date</dt> <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2016 until 2017"> <time datetime="2016">2016</time>  <span aria-hidden="true">—</span>  <time datetime="2017"> 2017 </time> </dd> </dl> </li><li class="flex gap-4"> <div class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"> <img src="/_astro/logoViva.BtvHZ-sn_Z1lisXP.webp" alt width="100" height="100" loading="lazy" decoding="async" class="rounded-full h-7 w-7"> </div> <dl class="flex flex-auto flex-wrap gap-x-2"> <dt class="sr-only">Company</dt> <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100"> VIVA Health </dd> <dt class="sr-only">Role</dt> <dd class="text-xs text-zinc-500 dark:text-zinc-400"> Senior Web Application Developer </dd> <dt class="sr-only">Date</dt> <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2013 until 2016"> <time datetime="2013">2013</time>  <span aria-hidden="true">—</span>  <time datetime="2016"> 2016 </time> </dd> </dl> </li> </ol> <a href="/resume.pdf" class="relative group border border-black/15 dark:border-white/20 inline-flex flex-nowrap items-center gap-2 justify-center rounded-md px-3 text-sm outline-offset-2 transition active:transition-none duration-300 ease-in-out pl-8 pr-3 py-1.5 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70 mt-6 w-full" id="download"> <div class="text-sm">Download CV</div> <svg viewBox="0 0 24 24" fill="none" class="size-4 stroke-2 fill-none stroke-current -rotate-90"> <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></line> <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></polyline> </svg> </a> </div> </div> </div>   </div> </div>  </div> </div>  </main> <footer class="mt-32 flex-none"> <div class="sm:px-8" style=""> <div class="mx-auto w-full max-w-7xl lg:px-8">  <div class="border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40"> <div class="relative px-4 sm:px-8 lg:px-12" style=""> <div class="mx-auto max-w-2xl lg:max-w-5xl">  <div class="flex flex-col items-center justify-between gap-6 sm:flex-row"> <div class="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200"> <button class="w-fit relative group border border-black/15 dark:border-white/20 inline-flex flex-nowrap items-center gap-2 justify-center rounded-md px-3 text-sm outline-offset-2 transition active:transition-none duration-300 ease-in-out pl-8 pr-3 py-1.5 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70" id="back-to-top"> <svg viewBox="0 0 24 24" fill="none" class="absolute top-1/2 left-2 -translate-y-1/2 size-4 stroke-2 fill-none stroke-current rotate-90"> <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></line> <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></polyline> </svg> <div class="text-sm">Back to top</div> </button> </div> <p class="text-sm text-zinc-400 dark:text-zinc-500">
&copy; 2025 Devan Beitel. All rights reserved.
</p> </div>  </div> </div> </div>  </div> </div> </footer> </div> </div> </body></html>