CINXE.COM
Now - Aaron Francis
<!DOCTYPE html> <html> <head> <title>Now - 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/43e78aa7-fd2b-4256-bb62-aab0c0abc238/build/assets/app-ecc18f58.css" /><link rel="stylesheet" href="https://d8nrpaglj2m0a.cloudfront.net/43e78aa7-fd2b-4256-bb62-aab0c0abc238/build/assets/app-ecc18f58.css" data-navigate-track="reload" /> <!-- Livewire Styles --><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="/" 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' 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" 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 "> 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"> Now <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" > 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/43e78aa7-fd2b-4256-bb62-aab0c0abc238/images/noise.png) repeat"></div> </div> </div> <div class="prose mx-auto dark:prose-invert prose-a:text-green-600 prose-a:no-underline hover:prose-a:underline prose-a:dark:text-green-400" > <h1>Now</h1> <div> This is a <a href="https://nownownow.com/about">now</a> page. </div> <h3>Right now, I am currently:</h3> <ul class="list-inside list-disc"> <li> building a business at <a href='https://tryhardstudios.com' target='_blank'>tryhardstudios.com</a> </li> <li> running <a href="https://screencasting.com">screencasting.com</a>. </li> </ul> <div class="mt-8 text-sm text-gray-700 dark:text-gray-400"> Updated 03/08/2024 </div> </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/43e78aa7-fd2b-4256-bb62-aab0c0abc238/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/43e78aa7-fd2b-4256-bb62-aab0c0abc238/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/now' /> <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>