Aaron Francis

<!DOCTYPE html> <html> <head> <title>Aaron Francis</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@aarondfrancis" /> <meta name="twitter:creator" content="@aarondfrancis" /> <meta name="google-site-verification" content="m44rOgIb5fRBLSRY_TLvpD6-qP_ctL3g6lPmGgCve80" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet" /> <link rel="preload" as="style" href="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/build/assets/app-ecc18f58.css" /><link rel="stylesheet" href="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/build/assets/app-ecc18f58.css" data-navigate-track="reload" /> <style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style> <script> let choseDark = localStorage.theme === 'dark'; let prefersDark = !('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches; if (choseDark || prefersDark) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } setTimeout(() => { document.body.classList.add('transition-colors'); }, 500); </script> </head> <body class="flex min-h-screen max-w-none flex-col bg-gray-100 font-sans antialiased dark:bg-gray-900 dark:text-white"> <nav x-init='handleScroll()' x-data="{ open: false, hasScrolled: false, darkMode: false, init() { this.darkMode = document.documentElement.classList.contains('dark') this.$watch('darkMode', (value) => { document.documentElement.classList.toggle('dark') if (document.documentElement.classList.contains('dark')) { localStorage.theme = 'dark' } else { localStorage.theme = 'light' } }) }, handleScroll() { this.hasScrolled = this.open || window.scrollY > 64 }, toggleMenu() { this.open = !this.open }, scrollTo(id, contentType = null) { window.location.hash = id window.scrollTo({ top: document.querySelector(id).offsetTop - 120, behavior: 'smooth', }) if (contentType) { this.$dispatch('set-content-type', { case: contentType, override: true, }) } this.open = false }, }" class="sticky left-0 top-0 z-[100] w-full transition-all md:mb-8 md:mt-16" :class="open ? 'mt-0' : 'mt-8'" @scroll.window="handleScroll" x-trap.noscroll="open"> <div x-show="hasScrolled || open" x-transition.opacity x-cloak class="absolute inset-0 -top-16 border-b bg-gray-100/80 backdrop-blur-2xl dark:border-gray-800 dark:bg-gray-900/80"></div> <div class="relative mx-auto px-8 py-4 md:py-0"> <div class="mx-auto flex max-w-lg items-center justify-center gap-6 text-base md:max-w-none md:py-6"> <div class="hidden gap-6 md:flex"> <a href="/" data-active class=" data-[active]:text-gray-900 data-[active]:dark:text-white text-gray-400 p-2 font-medium transition hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50 "> Home </a> <a href='/?content=all#content' @click.prevent="scrollTo('#content')" class=" data-[active]:text-gray-900 data-[active]:dark:text-white relative text-gray-400 p-2 font-medium transition hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50 "> Content </a> <a href="/backstage" class=" data-[active]:text-gray-900 data-[active]:dark:text-white text-gray-400 p-2 font-medium transition hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50 "> Sponsor </a> <a href="/lists" class=" data-[active]:text-gray-900 data-[active]:dark:text-white text-gray-400 p-2 font-medium transition hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50 "> Lists </a> <a href="/now" class=" data-[active]:text-gray-900 data-[active]:dark:text-white text-gray-400 p-2 font-medium transition hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50 "> Now </a> </div> <div class="-m-2 mr-auto flex cursor-pointer p-2 md:hidden" @click.prevent="toggleMenu"> <span class="flex items-center gap-3 text-gray-900 dark:text-gray-50"> Aaron Francis <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4 fill-transparent stroke-gray-400 stroke-2 dark:stroke-gray-500" stroke-linecap="round" stroke-linejoin="round"> <path d="M3.75 9h16.5m-16.5 6.75h16.5" /> </svg> </span> </div> <button class="flex cursor-pointer items-center justify-center p-2 text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 hover:dark:text-gray-300" @click.prevent="darkMode = !darkMode"> <span class="sr-only dark:hidden">Theme: light</span> <span class="sr-only hidden dark:block">Theme: dark</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hidden h-4 w-4 fill-current stroke-current stroke-2 dark:block"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4 fill-current stroke-current stroke-2 dark:hidden"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /> </svg> </button> </div> <div x-show="open" x-transition.opacity x-cloak class="absolute left-0 top-16 w-full border-b bg-gray-100 p-6 backdrop-blur-2xl transition-opacity duration-500 dark:border-gray-700 dark:bg-gray-900/80 md:hidden"> <div class="mx-auto flex max-w-lg flex-col gap-4 [&>*]:-mx-2 [&>*]:block [&>*]:p-2"> <a href="/" class="text-gray-400 font-medium"> Home </a> <a class="text-gray-400 font-medium" href="/?content=podcast_guest#content" @click.prevent="scrollTo('#content', 'all')" > Content </a> <a class="text-gray-400 font-medium" href="/sponsorships"> Sponsorship </a> <a class="text-gray-400 font-medium" href="/lists"> Lists </a> <a class="text-gray-400 font-medium" href="/now"> Now </a> </div> </div> </div> </nav> <main class="w-full flex-1 px-8 pt-8"> <div class="max-w-lg md:max-w-2xl xl:max-w-4xl mx-auto"> <div class="pointer-events-none absolute inset-0 overflow-hidden"> <div class="absolute left-1/2 aspect-square w-[1800px] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white opacity-50 dark:opacity-10" style=" -webkit-mask-image: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 70%); mask-image: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 70%); "> <div class="absolute inset-0 opacity-10 dark:opacity-50" style="background: url(https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/noise.png) repeat"></div> </div> </div> <header class="relative mx-auto max-w-2xl pr-2"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 612 334" class="absolute -top-8 right-0 -z-10 w-[320px] fill-black opacity-5 dark:fill-white dark:opacity-[0.03] sm:w-[480px] lg:-right-1/4 lg:w-[612px] xl:-right-1/3"> <path d="M339 0c-13 1-29 5-41 11-9 5-12 8-9 11 2 1 5 1 10-2 12-6 26-9 41-10 13 0 21 1 31 4 36 10 54 33 68 86a371 371 0 0 1 10 80c-1 16-6 32-15 49-2 5-3 6-5 7-4 0-18-4-49-15l-12-4h-24a454 454 0 0 1-112-4l-16-8c-3-3-7-4-9-5-3 0-6-2-10-6-3-3-5-4-10-3-7 0-12 2-19 5-9 4-18 11-28 20-22 19-39 27-60 28-17 0-30-5-43-18-10-9-19-25-24-40-2-9-4-17-4-27s1-18 4-28c6-26 17-47 34-67 17-21 35-35 54-43 10-5 19-7 30-8 13 0 25 3 36 11 11 6 16 16 17 33 2 14 0 31-3 44-1 5-1 5-6 5l-8 3c-2 1-3 2-3 4l3 4h8l12-6c6-4 7-7 9-26V60l-4-21c-3-9-6-14-12-19-7-8-15-12-25-15l-18-1c-26 0-44 7-69 28L49 50A195 195 0 0 0 1 154l-1 14 1 13c2 13 6 25 14 37 5 10 13 17 25 24 12 8 22 10 36 10a117 117 0 0 0 65-28c5-5 7-8 11-10 12-9 24-14 33-14l2 3c2 4 7 7 13 7l5 2 4 2c2 3 5 5 7 5 7 3 20 5 54 7 18 1 24 2 24 3l-9 5a111 111 0 0 0-50 44c-4 9-6 19-6 29 0 5 1 8 3 11 2 6 9 11 17 14 5 2 14 2 25 2 24-1 43-7 69-20a293 293 0 0 0 69-47l15-17c2-2 3-4 5-4l4-1a137 137 0 0 0 26-6c10-3 13-3 17-3s6 0 11 3c10 5 11 6 14 6 5 2 9 2 16 2 6 0 10 0 19-2a150 150 0 0 1 64 1l5-1 4-4c0-2-2-3-7-5-8-2-19-4-34-3l-22 1-24 3c-9 0-12-1-21-5-8-5-14-7-17-7l-26 6-20 5h-2v-4c4-5 10-18 13-28 4-9 5-20 6-41l-1-23c-2-12-7-35-12-51-7-23-14-39-22-50-4-7-11-14-17-19a96 96 0 0 0-67-20Zm8 226c10 0 19 3 40 10a192 192 0 0 0 36 11 259 259 0 0 1-75 59c-23 11-42 17-61 19h-21c-5 0-10-2-14-4-8-3-11-7-13-14v-18c0-5 3-10 6-15a122 122 0 0 1 41-33c24-12 43-16 61-15Z" /> </svg> <h2 class="text-sm font-medium uppercase tracking-widest text-green-600 dark:text-green-400">About me</h2> <h1 class="mt-2 text-2xl font-medium">Hello, my name is Aaron Francis.</h1> <p class="mt-8 text-gray-500 dark:text-gray-300"> I'm a software developer, content creator, and co-founder of <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://tryhardstudios.com"> <span class="invisible"> Try Hard Studios </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0">Try Hard Studios</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto">Try Hard Studios</span> </span> </a>. I'm on <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://twitter.com/aarondfrancis"> <span class="invisible"> <svg viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg" class="ml-1 mr-0.5 inline h-4 w-4 fill-current"> <path d="M16.2 3.5v.4C16.2 8.6 12.5 14 5.7 14c-2 0-4-.6-5.7-1.6A7.8 7.8 0 0 0 5.5 11c-1.6 0-3-1-3.5-2.4h1.7C2 8 .7 6.5.7 5l1.7.4A3.4 3.4 0 0 1 1.3.6C3 3 5.9 4.2 8.9 4.3c-.3-1.2 0-2.5 1-3.3a3.8 3.8 0 0 1 5.3.1C16 1 16.8.7 17.5.3c-.3.8-.8 1.5-1.6 2l2.1-.6c-.5.7-1.1 1.3-1.8 1.8Z" /> </svg> Twitter </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0"><svg viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg" class="ml-1 mr-0.5 inline h-4 w-4 fill-current"> <path d="M16.2 3.5v.4C16.2 8.6 12.5 14 5.7 14c-2 0-4-.6-5.7-1.6A7.8 7.8 0 0 0 5.5 11c-1.6 0-3-1-3.5-2.4h1.7C2 8 .7 6.5.7 5l1.7.4A3.4 3.4 0 0 1 1.3.6C3 3 5.9 4.2 8.9 4.3c-.3-1.2 0-2.5 1-3.3a3.8 3.8 0 0 1 5.3.1C16 1 16.8.7 17.5.3c-.3.8-.8 1.5-1.6 2l2.1-.6c-.5.7-1.1 1.3-1.8 1.8Z" /> </svg> Twitter</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto"><svg viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg" class="ml-1 mr-0.5 inline h-4 w-4 fill-current"> <path d="M16.2 3.5v.4C16.2 8.6 12.5 14 5.7 14c-2 0-4-.6-5.7-1.6A7.8 7.8 0 0 0 5.5 11c-1.6 0-3-1-3.5-2.4h1.7C2 8 .7 6.5.7 5l1.7.4A3.4 3.4 0 0 1 1.3.6C3 3 5.9 4.2 8.9 4.3c-.3-1.2 0-2.5 1-3.3a3.8 3.8 0 0 1 5.3.1C16 1 16.8.7 17.5.3c-.3.8-.8 1.5-1.6 2l2.1-.6c-.5.7-1.1 1.3-1.8 1.8Z" /> </svg> Twitter</span> </span> </a> all the time, and I make videos on <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://youtube.com/@aarondfrancis"> <span class="invisible"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 310" xml:space="preserve" class="ml-1 mr-0.5 inline h-4 w-4 fill-current"> <g id="XMLID_822_"> <path id="XMLID_823_" d="M297.917,64.645c-11.19-13.302-31.85-18.728-71.306-18.728H83.386c-40.359,0-61.369,5.776-72.517,19.938 C0,79.663,0,100.008,0,128.166v53.669c0,54.551,12.896,82.248,83.386,82.248h143.226c34.216,0,53.176-4.788,65.442-16.527 C304.633,235.518,310,215.863,310,181.835v-53.669C310,98.471,309.159,78.006,297.917,64.645z M199.021,162.41l-65.038,33.991 c-1.454,0.76-3.044,1.137-4.632,1.137c-1.798,0-3.592-0.484-5.181-1.446c-2.992-1.813-4.819-5.056-4.819-8.554v-67.764 c0-3.492,1.822-6.732,4.808-8.546c2.987-1.814,6.702-1.938,9.801-0.328l65.038,33.772c3.309,1.718,5.387,5.134,5.392,8.861 C204.394,157.263,202.325,160.684,199.021,162.41z" /> </g> </svg> YouTube </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 310" xml:space="preserve" class="ml-1 mr-0.5 inline h-4 w-4 fill-current"> <g id="XMLID_822_"> <path id="XMLID_823_" d="M297.917,64.645c-11.19-13.302-31.85-18.728-71.306-18.728H83.386c-40.359,0-61.369,5.776-72.517,19.938 C0,79.663,0,100.008,0,128.166v53.669c0,54.551,12.896,82.248,83.386,82.248h143.226c34.216,0,53.176-4.788,65.442-16.527 C304.633,235.518,310,215.863,310,181.835v-53.669C310,98.471,309.159,78.006,297.917,64.645z M199.021,162.41l-65.038,33.991 c-1.454,0.76-3.044,1.137-4.632,1.137c-1.798,0-3.592-0.484-5.181-1.446c-2.992-1.813-4.819-5.056-4.819-8.554v-67.764 c0-3.492,1.822-6.732,4.808-8.546c2.987-1.814,6.702-1.938,9.801-0.328l65.038,33.772c3.309,1.718,5.387,5.134,5.392,8.861 C204.394,157.263,202.325,160.684,199.021,162.41z" /> </g> </svg> YouTube</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 310" xml:space="preserve" class="ml-1 mr-0.5 inline h-4 w-4 fill-current"> <g id="XMLID_822_"> <path id="XMLID_823_" d="M297.917,64.645c-11.19-13.302-31.85-18.728-71.306-18.728H83.386c-40.359,0-61.369,5.776-72.517,19.938 C0,79.663,0,100.008,0,128.166v53.669c0,54.551,12.896,82.248,83.386,82.248h143.226c34.216,0,53.176-4.788,65.442-16.527 C304.633,235.518,310,215.863,310,181.835v-53.669C310,98.471,309.159,78.006,297.917,64.645z M199.021,162.41l-65.038,33.991 c-1.454,0.76-3.044,1.137-4.632,1.137c-1.798,0-3.592-0.484-5.181-1.446c-2.992-1.813-4.819-5.056-4.819-8.554v-67.764 c0-3.492,1.822-6.732,4.808-8.546c2.987-1.814,6.702-1.938,9.801-0.328l65.038,33.772c3.309,1.718,5.387,5.134,5.392,8.861 C204.394,157.263,202.325,160.684,199.021,162.41z" /> </g> </svg> YouTube</span> </span> </a>. </p> <p class="mt-5 text-gray-500 dark:text-gray-300"> I'm a CPA and used to be a tax accountant at a Big 4, but I've gladly left that life far behind me. </p> <p class="mt-5 text-gray-500 dark:text-gray-300"> I love making things and having lots of <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="#projects"> <span class="invisible"> projects </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0">projects</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto">projects</span> </span> </a> going. I live in Dallas with my beautiful and perfect wife Jennifer, our two-year-old twins, and our four-month-old twins. </p> <p class="mt-5 text-gray-500 dark:text-gray-300"> I'm very online, you can find me: </p> <ul class="mt-3 text-gray-500 dark:text-gray-300 list-disc list-inside space-y-2 pl-3"> <li> being sincere on <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://twitter.com/@aarondfrancis" target="_blank"> <span class="invisible"> Twitter </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0">Twitter</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto">Twitter</span> </span> </a> </li> <li> making videos on my <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://youtube.com/@aarondfrancis" target="_blank"> <span class="invisible"> YouTube </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0">YouTube</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto">YouTube</span> </span> </a> channel </li> <li> making videos on the <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://youtube.com/@wetryhard" target="_blank"> <span class="invisible"> Try Hard Studios YouTube </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0">Try Hard Studios YouTube</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto">Try Hard Studios YouTube</span> </span> </a> channel </li> <li> co-hosting and laughing a lot on the <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://youtube.com/@MostlyTechnical" target="_blank"> <span class="invisible"> Mostly Technical </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0">Mostly Technical</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto">Mostly Technical</span> </span> </a> podcast </li> <li> sharing open source on <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://github.com/aarondfrancis" target="_blank"> <span class="invisible"> GitHub </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0">GitHub</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto">GitHub</span> </span> </a> </li> <li> not doing too much on <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://www.linkedin.com/in/aarondfrancis/" target="_blank"> <span class="invisible"> LinkedIn </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0">LinkedIn</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto">LinkedIn</span> </span> </a> </li> </ul> </header> <section class="mt-24"> <div class="mx-auto flex max-w-xs flex-col px-12 font-polaroid text-gray-600 md:max-w-none md:flex-row md:px-0"> <div class="not-prose pointer-events-none select-none self-center font-polaroid transition md:pointer-events-auto [&>*:hover]:z-20 [&>*:hover]:scale-110 [&>*:hover]:duration-700 [&>*>*]:relative [&>*>*]:overflow-hidden [&>*>*]:rounded-lg [&>*>*]:bg-gradient-to-b [&>*>*]:from-white [&>*>*]:to-gray-100 [&>*>*]:p-4 [&>*>*]:shadow-2xl [&>*>*]:dark:from-gray-200 [&>*>*]:dark:to-gray-200 [&>*]:transition-transform [&>*]:duration-500 [&>*]:ease-[cubic-bezier(0.34,1.56,0.64,1)] [&>*]:will-change-transform peer order-2 -translate-y-2 rotate-1 hover:-rotate-1 md:translate-y-8" url="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/jennifer.jpg" label="Me and the Boss" > <div class="polaroid group transition"> <div class="wrapper"> <div class="relative h-fit w-fit overflow-hidden rounded"> <img src="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/jennifer.jpg" alt="Me and the Boss" /> <div class="absolute inset-0 shadow-[inset_0_0_4px_rgba(0,0,0,.3)]"></div> </div> <p class="mt-3 text-center text-gray-600 dark:text-gray-800 md:text-lg xl:text-xl"> Me and the Boss </p> <div class="glare pointer-events-none absolute inset-0 aspect-square scale-[2] bg-[radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0)_50%)] opacity-0 mix-blend-overlay transition-opacity will-change-transform group-hover:opacity-100" ></div> </div> </div> </div> <div class="not-prose pointer-events-none select-none self-center font-polaroid transition md:pointer-events-auto [&>*:hover]:z-20 [&>*:hover]:scale-110 [&>*:hover]:duration-700 [&>*>*]:relative [&>*>*]:overflow-hidden [&>*>*]:rounded-lg [&>*>*]:bg-gradient-to-b [&>*>*]:from-white [&>*>*]:to-gray-100 [&>*>*]:p-4 [&>*>*]:shadow-2xl [&>*>*]:dark:from-gray-200 [&>*>*]:dark:to-gray-200 [&>*]:transition-transform [&>*]:duration-500 [&>*]:ease-[cubic-bezier(0.34,1.56,0.64,1)] [&>*]:will-change-transform order-1 -rotate-6 hover:-rotate-1 peer-hover:-translate-x-4 peer-hover:ease-in-out" url="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/dad.jpg" label="First set of twins" > <div class="polaroid group transition"> <div class="wrapper"> <div class="relative h-fit w-fit overflow-hidden rounded"> <img src="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/dad.jpg" alt="First set of twins" /> <div class="absolute inset-0 shadow-[inset_0_0_4px_rgba(0,0,0,.3)]"></div> </div> <p class="mt-3 text-center text-gray-600 dark:text-gray-800 md:text-lg xl:text-xl"> First set of twins </p> <div class="glare pointer-events-none absolute inset-0 aspect-square scale-[2] bg-[radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0)_50%)] opacity-0 mix-blend-overlay transition-opacity will-change-transform group-hover:opacity-100" ></div> </div> </div> </div> <div class="not-prose pointer-events-none select-none self-center font-polaroid transition md:pointer-events-auto [&>*:hover]:z-20 [&>*:hover]:scale-110 [&>*:hover]:duration-700 [&>*>*]:relative [&>*>*]:overflow-hidden [&>*>*]:rounded-lg [&>*>*]:bg-gradient-to-b [&>*>*]:from-white [&>*>*]:to-gray-100 [&>*>*]:p-4 [&>*>*]:shadow-2xl [&>*>*]:dark:from-gray-200 [&>*>*]:dark:to-gray-200 [&>*]:transition-transform [&>*]:duration-500 [&>*]:ease-[cubic-bezier(0.34,1.56,0.64,1)] [&>*]:will-change-transform peer order-3 -translate-y-4 rotate-6 hover:rotate-1 peer-hover:translate-x-4" url="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/twins2.jpg" label="Second set (!!) of twins" > <div class="polaroid group transition"> <div class="wrapper"> <div class="relative h-fit w-fit overflow-hidden rounded"> <img src="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/twins2.jpg" alt="Second set (!!) of twins" /> <div class="absolute inset-0 shadow-[inset_0_0_4px_rgba(0,0,0,.3)]"></div> </div> <p class="mt-3 text-center text-gray-600 dark:text-gray-800 md:text-lg xl:text-xl"> Second set (!!) of twins </p> <div class="glare pointer-events-none absolute inset-0 aspect-square scale-[2] bg-[radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0)_50%)] opacity-0 mix-blend-overlay transition-opacity will-change-transform group-hover:opacity-100" ></div> </div> </div> </div> </div> </section> <section class="lg:mt-4"> <div class="mx-auto flex max-w-xs flex-col px-12 font-polaroid text-gray-600 md:max-w-none md:flex-row md:px-0"> <div class="not-prose pointer-events-none select-none self-center font-polaroid transition md:pointer-events-auto [&>*:hover]:z-20 [&>*:hover]:scale-110 [&>*:hover]:duration-700 [&>*>*]:relative [&>*>*]:overflow-hidden [&>*>*]:rounded-lg [&>*>*]:bg-gradient-to-b [&>*>*]:from-white [&>*>*]:to-gray-100 [&>*>*]:p-4 [&>*>*]:shadow-2xl [&>*>*]:dark:from-gray-200 [&>*>*]:dark:to-gray-200 [&>*]:transition-transform [&>*]:duration-500 [&>*]:ease-[cubic-bezier(0.34,1.56,0.64,1)] [&>*]:will-change-transform peer order-2 -translate-y-2 -rotate-6 hover:rotate-1 md:translate-y-8" url="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/shedquarters.jpg" label="Course research" > <div class="polaroid group transition"> <div class="wrapper"> <div class="relative h-fit w-fit overflow-hidden rounded"> <img src="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/shedquarters.jpg" alt="Course research" /> <div class="absolute inset-0 shadow-[inset_0_0_4px_rgba(0,0,0,.3)]"></div> </div> <p class="mt-3 text-center text-gray-600 dark:text-gray-800 md:text-lg xl:text-xl"> Course research </p> <div class="glare pointer-events-none absolute inset-0 aspect-square scale-[2] bg-[radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0)_50%)] opacity-0 mix-blend-overlay transition-opacity will-change-transform group-hover:opacity-100" ></div> </div> </div> </div> <div class="not-prose pointer-events-none select-none self-center font-polaroid transition md:pointer-events-auto [&>*:hover]:z-20 [&>*:hover]:scale-110 [&>*:hover]:duration-700 [&>*>*]:relative [&>*>*]:overflow-hidden [&>*>*]:rounded-lg [&>*>*]:bg-gradient-to-b [&>*>*]:from-white [&>*>*]:to-gray-100 [&>*>*]:p-4 [&>*>*]:shadow-2xl [&>*>*]:dark:from-gray-200 [&>*>*]:dark:to-gray-200 [&>*]:transition-transform [&>*]:duration-500 [&>*]:ease-[cubic-bezier(0.34,1.56,0.64,1)] [&>*]:will-change-transform order-1 rotate-12 hover:rotate-6 peer-hover:-translate-x-4 peer-hover:ease-in-out" url="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/monoliths.jpg" label="Laracon EU" > <div class="polaroid group transition"> <div class="wrapper"> <div class="relative h-fit w-fit overflow-hidden rounded"> <img src="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/monoliths.jpg" alt="Laracon EU" /> <div class="absolute inset-0 shadow-[inset_0_0_4px_rgba(0,0,0,.3)]"></div> </div> <p class="mt-3 text-center text-gray-600 dark:text-gray-800 md:text-lg xl:text-xl"> Laracon EU </p> <div class="glare pointer-events-none absolute inset-0 aspect-square scale-[2] bg-[radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0)_50%)] opacity-0 mix-blend-overlay transition-opacity will-change-transform group-hover:opacity-100" ></div> </div> </div> </div> <div class="not-prose pointer-events-none select-none self-center font-polaroid transition md:pointer-events-auto [&>*:hover]:z-20 [&>*:hover]:scale-110 [&>*:hover]:duration-700 [&>*>*]:relative [&>*>*]:overflow-hidden [&>*>*]:rounded-lg [&>*>*]:bg-gradient-to-b [&>*>*]:from-white [&>*>*]:to-gray-100 [&>*>*]:p-4 [&>*>*]:shadow-2xl [&>*>*]:dark:from-gray-200 [&>*>*]:dark:to-gray-200 [&>*]:transition-transform [&>*]:duration-500 [&>*]:ease-[cubic-bezier(0.34,1.56,0.64,1)] [&>*]:will-change-transform peer order-3 -translate-y-4 -rotate-2 hover:rotate-1 peer-hover:translate-x-4" url="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/github-universe.jpg" label="GitHub Universe" > <div class="polaroid group transition"> <div class="wrapper"> <div class="relative h-fit w-fit overflow-hidden rounded"> <img src="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/github-universe.jpg" alt="GitHub Universe" /> <div class="absolute inset-0 shadow-[inset_0_0_4px_rgba(0,0,0,.3)]"></div> </div> <p class="mt-3 text-center text-gray-600 dark:text-gray-800 md:text-lg xl:text-xl"> GitHub Universe </p> <div class="glare pointer-events-none absolute inset-0 aspect-square scale-[2] bg-[radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0)_50%)] opacity-0 mix-blend-overlay transition-opacity will-change-transform group-hover:opacity-100" ></div> </div> </div> </div> </div> </section> <div class="mt-32"> <section id="projects" class="scroll-m-40"> <div class='md:flex md:justify-between gap-x-4 space-y-12 md:space-y-0 [&>*]:w-full [&>*]:md:max-w-sm text-center'> <div> <h2 class="text-xs font-medium uppercase tracking-widest text-green-600 dark:text-green-400">Projects</h2> <h3 class="my-2 text-2xl font-medium"> Digital bits </h3> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 mx-auto"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59" /> </svg> <div class='space-y-6 max-w-sm mx-auto mt-6 text-left'> <div> <a href="https://masteringpostgres.com" target='_blank' class="font-medium text-gray-800 dark:text-white"> Mastering Postgres </a> <div class='text-sm text-gray-500'> An upcoming course on the database PostgreSQL. </div> </div> <div> <a href="https://highperformancesqlite.com" target='_blank' class="font-medium text-gray-800 dark:text-white"> High Performance SQLite </a> <div class='text-sm text-gray-500'> 87 videos teaching you everything you need to know about running SQLite in production. </div> </div> <div> <a href="https://screencasting.com" target='_blank' class="font-medium text-gray-800 dark:text-white"> screencasting.com </a> <div class='text-sm text-gray-500'> A 4.5-hour, on-demand video course that teaches you how to produce high-quality screencasts faster than ever. </div> </div> <div> <a href="https://youtube.com/@aarondfrancis" target='_blank' class="font-medium text-gray-800 dark:text-white"> Personal YouTube channel </a> <div class='text-sm text-gray-500'> My personal channel where I talk about Laravel, PHP, and general web development. </div> </div> <div> <a href="https://youtube.com/@wetryhard" target='_blank' class="font-medium text-gray-800 dark:text-white"> Try Hard Studios YouTube channel </a> <div class='text-sm text-gray-500'> Our studio channel where we share behind the scenes looks at building a business </div> </div> <div> <a href="https://mostlytechnical.com" target='_blank' class="font-medium text-gray-800 dark:text-white"> Mostly Technical podcast </a> <div class='text-sm text-gray-500'> Discussions on Laravel, life, business, and an eclectic mix of related topics. Recorded and released every week. </div> </div> <div> <a href="https://torchlight.dev" target='_blank' class="font-medium text-gray-800 dark:text-white"> Torchlight.dev </a> <div class='text-sm text-gray-500'> A service for perfect syntax highlighting. </div> </div> <div> <a href="https://github.com/aarondfrancis" target='_blank' class="font-medium text-gray-800 dark:text-white"> Open source </a> <div class='text-sm text-gray-500'> My open source code, mostly Laravel packages. </div> </div> <div> <a href="https://acct229.com" target='_blank' class="font-medium text-gray-800 dark:text-white"> acct229.com </a> <div class='text-sm text-gray-500'> Accounting tutoring for students at Texas A&M. </div> </div> <div> <div class='flex items-start justify-between'> <a href="/musicmakers" class="font-medium text-gray-800 dark:text-white"> The Music Makers podcast </a> <div class='text-xs font-bold px-2 py-1 border dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700 rounded -mt-1'> Inactive </div> </div> <div class='text-sm text-gray-500'> A solo podcast I used to do, where I read articles that changed my life. </div> </div> <div> <div class='flex items-start justify-between'> <a href="https://www.frameworkfriends.com/" target='_blank' class="font-medium text-gray-800 dark:text-white"> The Framework Friends podcast </a> <div class='text-xs font-bold px-2 py-1 border dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700 rounded -mt-1'> Inactive </div> </div> <div class='text-sm text-gray-500'> A podcast with my friend Andrew Culver, where we talked about web frameworks and development. </div> </div> <div> <div class='flex items-start justify-between'> <a href="https://youtube.com/@planetscale" target='_blank' class="font-medium text-gray-800 dark:text-white"> PlanetScale YouTube channel </a> <div class='text-xs font-bold px-2 py-1 border dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700 rounded -mt-1'> Inactive </div> </div> <div class='text-sm text-gray-500'> My old work channel where I talk about MySQL, PlanetScale, and databases. I no longer work at PlanetScale </div> </div> </div> </div> <div> <h2 class="text-xs font-medium uppercase tracking-widest text-green-600 dark:text-green-400">Projects</h2> <h3 class="my-2 text-2xl font-medium"> Physical things </h3> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mx-auto mt-3"> <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" /> </svg> <div class='space-y-6 max-w-sm mx-auto mt-6 text-left'> <div> <a href='https://twitter.com/aarondfrancis/status/1745185336769093799' target='_blank' class="font-medium text-gray-800 dark:text-white"> The Aaron Francis Studio of Light and Sound™ </a> <div class='text-sm text-gray-500'> Turning an apartment into a YouTube Studio (ongoing!) </div> </div> <div> <a href="/shedquarters" class="font-medium text-gray-800 dark:text-white"> Shedquarters </a> <div class='text-sm text-gray-500'> I turned a 10x20 shed into an office. </div> </div> <div> <a href='https://twitter.com/aarondfrancis/status/1438888219471491074' target='_blank' class="font-medium text-gray-800 dark:text-white"> Handwriting robots </a> <div class='text-sm text-gray-500'> Creating four, giant handwriting robots to write marketing mail. </div> </div> <div> <a href='https://twitter.com/aarondfrancis/status/1755264501270663193' target='_blank' class="font-medium text-gray-800 dark:text-white"> Walking treadmill conversion </a> <div class='text-sm text-gray-500'> Taking an old treadmill and turning it into a walking treadmill for under my desk. </div> </div> </div> </div> </div> </section> </div> <div id="content" class="mt-32"> <section wire:snapshot="{"data":{"type":"everything","filter":""},"memo":{"id":"YenW9dJNenYN07praP59","name":"content-list","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"lazyLoaded":false,"lazyIsolated":true,"errors":[],"locale":"en"},"checksum":"a251c3f80ce43826da8fc1e9ac3017d588a218c3edd91b5f8e2ee39078df65e8"}" wire:effects="{"url":{"type":{"as":"type","use":"replace","alwaysShow":false,"except":null},"filter":{"as":"filter","use":"replace","alwaysShow":false,"except":null}}}" wire:id="YenW9dJNenYN07praP59" x-init="$wire.__lazyLoad('eyJkYXRhIjp7ImZvck1vdW50IjpbW10seyJzIjoiYXJyIn1dfSwibWVtbyI6eyJpZCI6IkVUOU5qWDI4UHNONEFCUDRuNTJuIiwibmFtZSI6Il9fbW91bnRQYXJhbXNDb250YWluZXIifSwiY2hlY2tzdW0iOiI1MGJhYmQxNTE1YTU1YTY4NmIyMGY3ZDIwZmVhMzY2ZTYxZmUwOWUzYjZlM2YxYThhOTVkYjA0ZDEwZmUzM2YzIn0=')"></section> </div> </div> </main> <footer class="relative mt-48 w-full bg-gray-200/60 dark:bg-gray-800"> <div class="pointer-events-none absolute inset-0 overflow-hidden"> <div class="absolute left-1/2 top-full aspect-square w-[1200px] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white opacity-10" style=" -webkit-mask-image: radial-gradient( circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 70% ); mask-image: radial-gradient( circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 70% ); "> <div class="absolute inset-0 opacity-50" style="background: url(/images/noise.png) repeat"></div> </div> </div> <div class="relative"> <div class="border-b border-gray-300/50 px-8 dark:border-gray-700"> <div class="mx-auto max-w-lg pb-12 pt-16 md:max-w-2xl md:pb-20 xl:max-w-4xl"> <div class="flex flex-col justify-between gap-16 md:flex-row"> <div class="order-2 max-w-lg flex-1 md:order-1"> <a name='newsletter'> <h3 class="text-xs font-medium tracking-widest uppercase text-green-600 dark:text-green-400"> Not enough emails? </h3> </a> <h2 class="mt-2 text-2xl font-medium">Join my newsletter</h2> <p class="mt-3 text-gray-500 dark:text-gray-300"> I'll send you some more. Not too many. Anytime I post a new article, or make a new video, or do something else I think you might like. No spam, obviously. </p> </div> <div class="not-prose pointer-events-none select-none self-center font-polaroid transition md:pointer-events-auto [&>*:hover]:z-20 [&>*:hover]:scale-110 [&>*:hover]:duration-700 [&>*>*]:relative [&>*>*]:overflow-hidden [&>*>*]:rounded-lg [&>*>*]:bg-gradient-to-b [&>*>*]:from-white [&>*>*]:to-gray-100 [&>*>*]:p-4 [&>*>*]:shadow-2xl [&>*>*]:dark:from-gray-200 [&>*>*]:dark:to-gray-200 [&>*]:transition-transform [&>*]:duration-500 [&>*]:ease-[cubic-bezier(0.34,1.56,0.64,1)] [&>*]:will-change-transform order-1 -mr-4 -mt-32 w-2/3 self-center rotate-6 hover:-translate-y-8 hover:rotate-1 md:order-2 md:mr-0 md:w-1/3 md:self-auto xl:-mt-28 xl:mr-6" url="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/robot.jpg" > <div class="polaroid group transition"> <div class="wrapper"> <div class="relative h-fit w-fit overflow-hidden rounded"> <img src="https://d8nrpaglj2m0a.cloudfront.net/2ecc78c4-ac10-44f6-b1fa-ae12a6c1b0c1/images/robot.jpg" alt="" /> <div class="absolute inset-0 shadow-[inset_0_0_4px_rgba(0,0,0,.3)]"></div> </div> <p class="mt-3 text-center text-gray-600 dark:text-gray-800 md:text-lg xl:text-xl"> <a class='underline' href='https://twitter.com/aarondfrancis/status/1438888219471491074' target='_blank'>Handwriting robot</a> </p> <div class="glare pointer-events-none absolute inset-0 aspect-square scale-[2] bg-[radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0)_50%)] opacity-0 mix-blend-overlay transition-opacity will-change-transform group-hover:opacity-100" ></div> </div> </div> </div> </div> <form method="POST" class="mt-8 flex flex-col gap-4 md:flex-row xl:-mt-6 xl:w-1/2" action="https://track.bentonow.com/forms/5ad89c212a89e93a98d8fbe1626b0371/$subscribe?hardened=true" enctype="multipart/form-data"> <input type="hidden" name="redirect" value="https://aaronfrancis.com/thanks"> <input type="hidden" name="fields_source_list" value='personal' /> <input type="hidden" name="fields_source_url" value='https://aaronfrancis.com' /> <input type="email" name="email" placeholder="Your email" class="w-auto flex-1 rounded-lg bg-gray-300/50 px-6 py-4 text-base text-gray-900 outline-none transition-colors focus-within:bg-gray-300 dark:bg-gray-700 dark:text-gray-50 focus-within:dark:bg-gray-600/80" /> <button type="submit" class="rounded-lg bg-green-400 px-8 py-4 text-base font-semibold text-gray-800 outline-none ring-gray-400 transition-[filter] hover:brightness-110 focus-visible:ring-2 dark:ring-white"> Sign up </button> </form> </div> </div> <div class="py-8 text-center text-gray-500 dark:text-gray-400 md:py-12 text-sm"> <div class='flex justify-center gap-x-6'> <a href="https://twitter.com/aarondfrancis" class="text-gray-400 hover:text-green-500"> <svg role="img" class='h-6 w-6' fill='currentColor' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <title>Twitter</title> <path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z" /> </svg> </a> <a href="https://youtube.com/@aarondfrancis" class="text-gray-400 hover:text-green-500"> <svg role="img" class='h-6 w-6' fill='currentColor' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <title>YouTube</title> <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" /> </svg> </a> <a href="https://github.com/aarondfrancis" class="text-gray-400 hover:text-green-500"> <svg role="img" class='h-6 w-6' fill='currentColor' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <title>GitHub</title> <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /> </svg> </a> <a href="https://www.linkedin.com/in/aarondfrancis/" class="text-gray-400 hover:text-green-500"> <svg role="img" class='h-6 w-6' fill='currentColor' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <title>LinkedIn</title> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /> </svg> </a> <a href="/feed" class="text-gray-400 hover:text-green-500"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /> </svg> </a> </div> <div class='mt-8'>Copyright 2013 - 2025, Aaron Francis.</div> <div class='mt-1'> The good parts of this site were designed by <a class="group relative inline-flex font-semibold text-gray-600 dark:text-gray-50" href="https://ashugeo.com"> <span class="invisible"> Hugo </span> <span class="absolute left-0 top-0 h-full w-full overflow-hidden whitespace-nowrap transition-width group-hover:left-auto group-hover:right-0 group-hover:w-0 prose-strong:!text-gray-400 prose-strong:dark:!text-gray-400" aria-hidden="true" > <span class="absolute left-0 group-hover:left-auto group-hover:right-0">Hugo</span> </span> <span class="absolute right-0 top-0 h-full w-0 overflow-hidden whitespace-nowrap text-green-600 transition-width group-hover:left-0 group-hover:right-auto group-hover:w-full dark:text-green-400" > <span class="absolute right-0 group-hover:left-0 group-hover:right-auto">Hugo</span> </span> </a>. </div> <div class='mt-1'> The bad parts were made up by Aaron. </div> </div> </div> </footer> <script src="/livewire/livewire.min.js?id=44144c23" data-csrf="" data-update-uri="/livewire/update" data-navigate-once="true"></script> <script src="https://cdn.usefathom.com/script.js" data-site="ECBWHYWP" defer></script> <script> document.querySelectorAll('.polaroid').forEach((polaroid) => { polaroid.addEventListener('mouseenter', (e) => { const wrapper = e.currentTarget.querySelector('.wrapper'); setTimeout( () => wrapper.style.setProperty( 'transition-duration', '0s', ), 500, ); }); polaroid.addEventListener('mousemove', (e) => { const { left, top, width: w, height: h, } = e.currentTarget.getBoundingClientRect(); const x = e.clientX - left; const y = e.clientY - top; e.currentTarget .querySelector('.wrapper') .style.setProperty( 'transform', `perspective(800px) rotateX(${ (y / h - 0.5) * 25 }deg) rotateY(${(x / w - 0.5) * -25}deg)`, ); e.currentTarget .querySelector('.glare') .style.setProperty( 'transform', `translate(calc(${x / 1.5}px - 50%), calc(${ y / 1.5 }px - 50%)) scale(3)`, ); }); polaroid.addEventListener('mouseleave', (e) => { const wrapper = e.currentTarget.querySelector('.wrapper'); wrapper.style.setProperty( 'transition-duration', '0.5s', ); wrapper.style.setProperty( 'transform', 'perspective(800px) rotateX(0deg) rotateY(0deg)', ); }); }); </script> </body> </html>

CINXE.COM

Aaron Francis