Tighten | Software Development for Web and Mobile | Laravel, Livewire, Vue.js, and React

<!DOCTYPE html> <html lang="en"> <head> <title>Tighten | Software Development for Web and Mobile | Laravel, Livewire, Vue.js, and React</title> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Tighten", "url": "https://tighten.com/" } </script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Tighten is a software development firm specializing in Laravel, Livewire, Vue.js, and React."> <meta property="og:title" content="Tighten | Software Development for Web and Mobile | Laravel, Livewire, Vue.js, and React"> <meta property="og:description" content="Tighten is a software development firm specializing in Laravel, Livewire, Vue.js, and React."> <meta property="og:image" content="https://tighten.com/assets/images/tighten-com-og-cover.png"> <meta property="og:url" content="https://tighten.com/"> <meta property="og:site_name" content="Tighten"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@TightenCo"> <meta name="twitter:image:alt" content="Tighten logo"> <link rel="canonical" href="https://tighten.com/"> <link rel="alternate" type="application/atom+xml" title="RSS feed for the Tighten blog" href="/insights/feed.atom" /> <link rel="stylesheet" href="/assets/build/css/main.css?id=be5c59fd5b50e9520455"> <script defer src="/assets/build/js/main.js?id=b0b646e36cc5d7106b59"></script> <script src="https://outstanding-absorbing.tighten.com/script.js" data-site="QEKUSYAY" defer></script> <script src="https://cdn.amplitude.com/libs/analytics-browser-2.7.4-min.js.gz"></script><script src="https://cdn.amplitude.com/libs/plugin-autocapture-browser-0.9.0-min.js.gz"></script><script>window.amplitude.add(window.amplitudeAutocapturePlugin.plugin());window.amplitude.init('53312f8d59159cea4be6be8d86e93bde');</script> </script> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body class="bg-black font-sans antialiased"> <div id="app" class="flex flex-col min-h-screen"> <header x-data="navManager()" class="sticky z-50 -top-1 md:-top-6" @scroll.window="scrollListener" @resize.debounce.100ms.window="handleResize" > <nav class="absolute visible w-full h-20 opacity-0 md:hidden bg-charcoal transition-all duration-500 -z-10" :class="{ 'opacity-0 h-20': !mobileNavOpen, 'opacity-100 h-[460px]': mobileNavOpen }" > <div class="h-full text-white transition-all duration-500 pb-7 -mt-80" :class="{'pt-0 -mt-80': !mobileNavOpen, 'pt-20 mt-0': mobileNavOpen }" > <div class="flex flex-col items-end justify-between h-full pr-8 transition-all duration-400" :class="{'opacity-0': !mobileNavOpen, 'opacity-100': mobileNavOpen }" > <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" id="servicesNavLink" href="/services/" text="Services" selected="" href="/services/" tabindex="0" aria-label="Services" > Services </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/results/" text="Results" selected="" href="/results/" tabindex="0" aria-label="Results" > Results </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/insights/" text="Blog" selected="" href="/insights/" tabindex="0" aria-label="Blog" > Blog </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/team/" text="Team" selected="" href="/team/" tabindex="0" aria-label="Team" > Team </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/about/" text="About" selected="" href="/about/" tabindex="0" aria-label="About" > About </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/newsletter/" text="Newsletter" selected="" href="/newsletter/" tabindex="0" aria-label="Newsletter" > Newsletter </a> <div class="py-6 scale-110"> <div class="flex"> <a x-data="button()" @click.prevent="handleClick" href="/contact/" class="bg-charcoal shadow-button-inner-gray border-white bg-origin-border hover:border-transparent hover:animate-button hover:shadow-button-none hover:text-black focus:border-transparent focus:animate-button focus:shadow-button-none focus:text-black focus:outline-none text-xs lg:text-sm xl:text-base leading-none bg-button-gradient font-mono font-bold tracking-wider rounded-full py-2 xl:py-2.5 md:text-center px-3 lg:px-4 xl:px-5 uppercase text-white border bg-[length:1000%_1000%] transition-all duration-500 active:bg-gradient-to-l active:border-transparent active:from-yellow active:to-yellow active:shadow-button-none active:text-black word-spacing-tight whitespace-nowrap" > Contact Us </a> </div> <script> function button() { return { handleClick(e) { e.target.classList.add( 'bg-gradient-to-l', 'from-yellow', 'to-yellow', 'shadow-button-none' ); e.target.classList.remove('bg-button-gradient'); setTimeout(() => { window.location.href = e.target.getAttribute('href'); }, 500); }, }; } </script> </div> </div> </div> </nav> <div class="relative w-full"> <div class="absolute -z-10 w-full max-w-full h-20 md:h-[76px] lg:h-[90px] md:p-6 transition-all duration-500" :class="{ 'md:p-6': !stickyNav, 'md:py-6 ': stickyNav }" > <div class="w-full h-20 md:h-[76px] lg:h-[90px] bg-charcoal"></div> </div> <nav class="h-20 md:h-[100px] lg:h-[114px] pt-0 md:pt-6 pl-5 pr-6 md:pl-10 md:pr-12 lg:px-12 text-white transition-all duration-500"> <div class="flex items-center justify-between h-full max-w-screen-2xl mx-auto"> <a href="/" title="Go to homepage" class="transition-none duration-0" role="presentation" :class="{ 'transition-none duration-0': isMobile, 'transition-all duration-500': !isMobile }" > <lottie-player aria-label="Tighten logo" class="w-[90px] xs:w-[115px] sm:w-[130px] xl:w-[186px]" id="logoPlayer" mode="normal" src="/assets/images/tighten-logo-inverted-rgb-final-clockwise.json" > </lottie-player> </a> <div class="items-center justify-end hidden h-full align-middle md:flex md:space-x-5 xl:space-x-7 2xl:space-x-8 ml-10" > <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white " href="/services/" aria-label="Services" > Services </a> <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white " href="/results/" aria-label="Results" > Results </a> <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white " href="/insights/" aria-label="Blog" > Blog </a> <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white " href="/team/" aria-label="Team" > Team </a> <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white " href="/about/" aria-label="About" > About </a> <div class="flex"> <a x-data="button()" @click.prevent="handleClick" href="/contact/" class="border-none animate-button text-black hover:shadow-button-none hover:text-white focus:border-white focus:shadow-button-none focus:text-white text-xs lg:text-sm xl:text-base leading-none bg-button-gradient font-mono font-bold tracking-wider rounded-full py-2 xl:py-2.5 md:text-center px-3 lg:px-4 xl:px-5 uppercase text-white border bg-[length:1000%_1000%] transition-all duration-500 active:bg-gradient-to-l active:border-transparent active:from-yellow active:to-yellow active:shadow-button-none active:text-black word-spacing-tight whitespace-nowrap" > Contact Us </a> </div> </div> <div class="block md:hidden" @click="handleNavToggleClick" @keydown.enter="handleNavToggleClick" @keyup.enter="focusOnMobileLink" tabindex="0" role="button" > <lottie-player class="w-8 h-8 fill-current" id="menuTogglePlayer" mode="normal" src="/assets/images/animated-hamburger.json" aria-label="Mobile menu" > </lottie-player> </div> </div> <div class="max-w-screen-2xl mx-auto"> <a class="absolute sr-only sm:focus:not-sr-only sm:focus:inline-flex items-center !p-3 !mt-2 !ml-4 font-mono word-spacing-tighter font-bold tracking-widest uppercase leading-none bg-charcoal text-yellow rounded-full" href="#content" tabindex="1"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="h-3 w-3 mx-3" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> <span class="pr-2">Skip to Main Content</span> </a> </div> </nav> </div> </header> <script> let logoPlayer; let menuTogglePlayer; let scrollThreshold = 25; let mobileViewport = 767; let isMobile = () => window.innerWidth <= mobileViewport; let shouldAnimate = () => !isMobile() && window.scrollY > scrollThreshold; document.querySelector('#logoPlayer').addEventListener('load', (e) => { logoPlayer = e.target; // Check if page is scrolled down and if so, animate the logo if (shouldAnimate()) { logoPlayer.play(); } }); document.querySelector('#menuTogglePlayer').addEventListener('load', (e) => { menuTogglePlayer = e.target; }); function navManager() { return { stickyNav: shouldAnimate(), mobileNavOpen: false, scrollListener() { if (isMobile()) { this.stickyNav = false; return; } this.animateLogo(); }, animate(player, direction) { if (!player) { // Animation hasn't been loaded yet return; } player.setDirection(direction); player.play(); }, animateLogo(direction) { if (shouldAnimate()) { this.stickyNav = true; this.animate(logoPlayer, 1); } else { this.stickyNav = false; this.animate(logoPlayer, -1); } }, seekLogo(player, toEnd = false) { if (!player) { // Animation hasn't been loaded yet return; } if (isMobile()) { if ( player.getLottie().isPaused && player.getLottie().currentFrame > 0 ) { player.pause(); this.animate(logoPlayer, -1); } } }, handleResize() { if (isMobile() && shouldAnimate()) { this.seekLogo(logoPlayer); } }, keyupListener(e) { this.mobileNavOpen = false; }, handleNavToggleClick(e) { let direction = this.mobileNavOpen ? -1 : 1; this.animate(menuTogglePlayer, direction); this.animate(logoPlayer, direction); this.mobileNavOpen = !this.mobileNavOpen; }, focusOnMobileLink() { document.querySelector('#servicesNavLink').focus(); }, }; } </script> <div> <div x-data="followMouse()" @mousemove="handleMousemove" @mouseout="handleMouseout" class="relative md:-mt-[114px] w-full h-[540px] sm:h-[580px] md:h-[770px] lg:h-[880px] xl:h-[940px]" > <div> <div class="absolute inset-0 flex -z-10"> <div class="flex-1 hidden lg:block" :style="{ backgroundColor: '#' + bottomColors[0] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + bottomColors[1] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + bottomColors[2] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + bottomColors[3] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + bottomColors[4] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + bottomColors[5] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + bottomColors[6] }"></div> <div class="flex-1 hidden lg:block" :style="{ backgroundColor: '#' + bottomColors[7] }"></div> </div> <div class="absolute inset-0 flex -z-10" :style="{ opacity: topOpacity }"> <div class="flex-1 hidden lg:block" :style="{ backgroundColor: '#' + topColors[0] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + topColors[1] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + topColors[2] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + topColors[3] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + topColors[4] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + topColors[5] }"></div> <div class="flex-1" :style="{ backgroundColor: '#' + topColors[6] }"></div> <div class="flex-1 hidden lg:block" :style="{ backgroundColor: '#' + topColors[7] }"></div> </div> </div> <div class="px-6 md:px-16 lg:px-28 py-10 md:py-16 lg:py-24 h-full"> <div class="max-w-screen-2xl mx-auto h-full flex flex-col items-start justify-center md:pt-24" id="content"> <h1 class="font-serif text-4xl xs:text-5xl sm:text-6xl lg:text-7xl xl:text-8xl leading-tight-1 xs:leading-tight-1 sm:leading-tight-1 lg:leading-tight-1 xl:leading-tight-1 font-extralight"> We <span class="italic">build</span> and <span class="italic">rescue</span> <br class="hidden sm:block"/> web apps and dev teams </h1> <div class="w-full my-6 tracking-snug text-base sm:text-lg md:text-xl xl:text-2xl leading-relaxed sm:leading-relaxed md:leading-relaxed xl:leading-relaxed md:my-10"> In today’s climate, the success of your business hinges on the quality of your software. <br class="hidden lg:block"/> Tighten’s expert Laravel developers build and consult on the world’s best web and mobile apps, <br class="hidden lg:block"/> helping our clients solve hard problems and achieve incredible results. </div> <div class="pt-2 md:pt-4"> <div class="flex"> <a class="rounded-full" aria-label="See how we can help you" href="/services/"> <div class="text-sm sm:text-base md:text-lg box-border transition-colors duration-300 font-mono word-spacing-tight font-bold tracking-widest rounded-full py-4 px-8 sm:px-10 uppercase leading-none bg-black text-white border border-white hover:border-yellow hover:bg-yellow hover:text-black" > See how we can help you <span class="inline-block -mr-2.5">&#8594</span> </div> </a> </div> </div> </div> </div> </div> <div class="py-10 text-white bg-black md:py-16 lg:py-24"> <div class="swiper" x-data="{swiper: null}" x-init="swiper = new Swiper($refs.clientsContainer, { scrollbar: { el: $refs.clientsScroll, draggable: true, snapOnRelease: true, }, a11y: { enabled: true, prevSlideMessage: 'Previous slide', nextSlideMessage: 'Next slide', firstSlideMessage: 'First slide', lastSlideMessage: 'Last slide', containerRoleDescriptionMessage: 'Container for carousel of case study cards', }, loop: false, slidesPerView: 1.1, spaceBetween: 30, breakpoints: { 640: { slidesPerView: 1.3, spaceBetween: 40, }, 1024: { slidesPerView: 2.5, spaceBetween: 62, }, 2000: { slidesPerView: 3.5, spaceBetween: 62, }, } })" > <div class="px-6 md:px-16 lg:px-28 py-0 pb-2"> <div class="max-w-screen-2xl mx-auto"> <h2 class="font-serif text-4xl font-extralight leading-tight-1 md:text-5xl md:leading-tight-1 xl:text-7xl xl:leading-tight-1 pt-8 lg:pt-12 xl:pt-16 pb-12"> Our client partnerships <br class="hidden sm:block xl:hidden 2xl:block"> achieve lasting, meaningful results: </h2> </div> </div> <div class="px-6 md:px-16 lg:px-28 py-0"> <div class="max-w-screen-2xl mx-auto"> <div class="flex mt-4 mb-8 swiper-container" x-ref="clientsContainer"> <div class="swiper-wrapper"> <div class="group flex flex-col text-white swiper-slide flex-shrink-0" > <a href="/results/genentech/" class="transition ease-in-out group-hover:scale-105 duration-300 group-hover:shadow-2xl group-hover:shadow-green-500/20" > <div class="relative flex flex-col justify-end w-full h-auto bg-yellow-900"> <div class="aspect-w-16 aspect-h-10 "> <img alt="Digital illustration of a person examining medical diagrams." src="/assets/images/case-study/genentech/img_casestudy_genentech_thumbnail.jpg" class="object-fill" /> <div class="w-full h-full"> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-2/3 opacity-60"></div> </div> <div class="absolute inset-0 flex flex-col justify-end p-4 sm:p-6"> </div> </div> </div> </a> <a href="/results/genentech/" class="group-hover:text-yellow group-hover:transition-colors"> <div class=" flex font-sans font-semibold mt-6 sm:mt-10 text-2xl sm:text-3xl"> Genentech </div> <div class="leading-loose sm:leading-loose lg:leading-loose text-charcoal-20 mt-4 sm:mt-8 text-sm sm:text-base"> Over the past 15 years, we've partnered on a wide array of groundbreaking digital projects. </div> <div class="flex items-center mt-2 font-mono text-xs font-bold tracking-widest uppercase word-spacing-tight sm:text-base text-yellow"> Learn More <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="h-7 w-7 p-1.5 ml-0.5" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> </svg> </div> </a> </div> <div class="group flex flex-col text-white swiper-slide flex-shrink-0" > <a href="/results/sweetwater/" class="transition ease-in-out group-hover:scale-105 duration-300 group-hover:shadow-2xl group-hover:shadow-purple-500/20" > <div class="relative flex flex-col justify-end w-full h-auto bg-yellow-900"> <div class="aspect-w-16 aspect-h-10 "> <img alt="Digital illustration of a person playing an electric bass guitar." src="/assets/images/case-study/sweetwater/img_casestudy_sweetwater_thumbnail.jpg" class="object-fill" /> <div class="w-full h-full"> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-2/3 opacity-60"></div> </div> <div class="absolute inset-0 flex flex-col justify-end p-4 sm:p-6"> </div> </div> </div> </a> <a href="/results/sweetwater/" class="group-hover:text-yellow group-hover:transition-colors"> <div class=" flex font-sans font-semibold mt-6 sm:mt-10 text-2xl sm:text-3xl"> Sweetwater Sound </div> <div class="leading-loose sm:leading-loose lg:leading-loose text-charcoal-20 mt-4 sm:mt-8 text-sm sm:text-base"> Our enduring partnership has helped solidify Sweetwater as the industry leader in music and pro audio gear. </div> <div class="flex items-center mt-2 font-mono text-xs font-bold tracking-widest uppercase word-spacing-tight sm:text-base text-yellow"> Learn More <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="h-7 w-7 p-1.5 ml-0.5" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> </svg> </div> </a> </div> <div class="group flex flex-col text-white swiper-slide flex-shrink-0" > <a href="/results/chicago-botanic-garden/" class="transition ease-in-out group-hover:scale-105 duration-300 group-hover:shadow-2xl group-hover:shadow-purple-500/20" > <div class="relative flex flex-col justify-end w-full h-auto bg-yellow-900"> <div class="aspect-w-16 aspect-h-10 "> <img alt="Digital illustration of a person taking a picture of a flower with their phone." src="/assets/images/case-study/cbg/img_casestudy_cbg_thumbnail.jpg" class="object-fill" /> <div class="w-full h-full"> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-2/3 opacity-60"></div> </div> <div class="absolute inset-0 flex flex-col justify-end p-4 sm:p-6"> </div> </div> </div> </a> <a href="/results/chicago-botanic-garden/" class="group-hover:text-yellow group-hover:transition-colors"> <div class=" flex font-sans font-semibold mt-6 sm:mt-10 text-2xl sm:text-3xl"> Chicago Botanic Garden </div> <div class="leading-loose sm:leading-loose lg:leading-loose text-charcoal-20 mt-4 sm:mt-8 text-sm sm:text-base"> Tighten helped the Garden give citizen scientists tools to protect rare species and act as stewards for our collective future. </div> <div class="flex items-center mt-2 font-mono text-xs font-bold tracking-widest uppercase word-spacing-tight sm:text-base text-yellow"> Learn More <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="h-7 w-7 p-1.5 ml-0.5" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> </svg> </div> </a> </div> <div class="group flex flex-col text-white swiper-slide flex-shrink-0" > <a href="/results/adopt-a-storm-drain/" class="transition ease-in-out group-hover:scale-105 duration-300 group-hover:shadow-2xl group-hover:shadow-purple-500/20" > <div class="relative flex flex-col justify-end w-full h-auto bg-yellow-900"> <div class="aspect-w-16 aspect-h-10 "> <img alt="Digital illustration of a closeup of thumb on a phone taking a picture of a storm drain." src="/assets/images/case-study/aasd/img_casestudy_aasd_thumbnail.jpg" class="object-fill" /> <div class="w-full h-full"> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-2/3 opacity-60"></div> </div> <div class="absolute inset-0 flex flex-col justify-end p-4 sm:p-6"> </div> </div> </div> </a> <a href="/results/adopt-a-storm-drain/" class="group-hover:text-yellow group-hover:transition-colors"> <div class=" flex font-sans font-semibold mt-6 sm:mt-10 text-2xl sm:text-3xl"> Adopt a Drain </div> <div class="leading-loose sm:leading-loose lg:leading-loose text-charcoal-20 mt-4 sm:mt-8 text-sm sm:text-base"> We helped civic-minded citizens divert thousands of tons of waste from their water supply, one drain at a time. </div> <div class="flex items-center mt-2 font-mono text-xs font-bold tracking-widest uppercase word-spacing-tight sm:text-base text-yellow"> Learn More <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="h-7 w-7 p-1.5 ml-0.5" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> </svg> </div> </a> </div> </div> </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 py-3 sm:py-10"> <div class="max-w-screen-2xl mx-auto"> <div class="flex justify-between"> <div class="flex"> <a class="rounded-full" aria-label="See more projects" href="/work/"> <div class="text-sm md:text-base box-border transition-colors duration-300 font-mono word-spacing-tight font-bold tracking-widest rounded-full py-3 px-6 uppercase leading-none bg-yellow hover:bg-white text-black" > See more <span class="hidden md:inline">results</span> <span class="inline-block -mr-1.5">&#8594</span> </div> </a> </div> <div class="flex items-center swiper-navigation"> <div class="swiper-scrollbar hidden sm:block sm:mr-10" xref="clientsScroll" x-ref=clientsScroll></div> <div class="space-x-3 sm:space-x-5"> <button class="bg-black text-charcoal-20 border-charcoal-20 hover:bg-yellow hover:text-black border hover:border-yellow transition-colors rounded-full p-2.5" @click="swiper.slidePrev()" aria-label="Previous" > <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5" role="img" aria-label="Previous" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" /> </svg> </button> <button class="bg-black text-charcoal-20 border-charcoal-20 hover:bg-yellow hover:text-black border hover:border-yellow transition-colors rounded-full p-2.5" @click="swiper.slideNext()" aria-label="Next" > <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5" role="img" aria-label="Next" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /> </svg> </button> </div> </div> </div> </div> </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 py-0 mt-16 text-white bg-charcoal" id="laravel-up-and-running"> <div class="max-w-screen-2xl mx-auto flex flex-col block md:flex-row xl:pb-12"> <div class="pr-16 -mt-20 md:w-1/2 xl:w-5/12"> <img src="/assets/images/laravel-up-and-running-matt-stauffer-v3-rev.png" alt="Laravel Up and Running book - Third Edition" /> </div> <div class="pb-24 md:w-1/2 xl:w-7/12 md:py-24 lg:py-32 2xl:pl-12"> <div class="mt-0 2xl:mt-10 mb-6 text-yellow font-mono text-base font-bold tracking-widest uppercase word-spacing-tighter"> We wrote the book </div> <div class="mb-8 leading-relaxed font-serif font-extralight text-3xl lg:text-4xl 2xl:mb-16 2xl:pr-16"> Our co-founder Matt Stauffer wrote the canonical Laravel reference book, now in its third edition. </div> <div class="flex flex-col xl:flex-row items-start xl:items-center space-y-6 xl:space-y-0 space-x-0 xl:space-x-8"> <div class="flex"> <a class="rounded-full" aria-label="Buy Laravel: Up and Running" href="https://laravelupandrunning.com?utm_source=tighten&utm_medium=partner&utm_campaign=tighten_fall_23" target="_blank"> <div class="text-sm md:text-base box-border transition-colors duration-300 font-mono word-spacing-tight font-bold tracking-widest rounded-full py-3 px-6 uppercase leading-none bg-yellow hover:bg-white text-black" > Get the book <span class="inline-block -mr-1.5">&#8594</span> </div> </a> </div> </div> </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 w-full py-24 text-white bg-black md:py-36 lg:py-40 xl:py-44"> <div class="max-w-screen-2xl mx-auto flex flex-col md:flex-row md:items-center"> <h2 class="flex-1 pr-6 font-serif text-4xl font-extralight md:text-5xl xl:text-7xl"> Your friendly-neighborhood Laravel experts. </h2> <div class="pt-8 leading-loose md:w-2/5 2xl:w-1/2 lg:text-lg xl:text-xl lg:leading-loose xl:leading-loose md:pt-0 xl:pl-8 2xl:pl-16"> Our full-stack development team is focused on a select segment of the technology landscape. In other words, we only do a few things, but we do them at the highest level. </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 py-10 md:py-16 lg:py-24 mt-6 bg-charcoal lg:mt-10"> <div class="max-w-screen-2xl mx-auto pb-12 sm:pb-6 -mt-24 lg:-mt-40 md:z-10 md:relative"> <div class="grid gap-12 mb-6 sm:grid-cols-3 sm:gap-6 md:gap-8 lg:gap-12 xl:gap-16"> <div> <div class="mx-auto aspect-w-6 aspect-h-5"> <div class="absolute h-full overflow-hidden bg-cover" style="background-image: url(/assets/images/technical-expertise/laravel.jpg)"> <div class="absolute inset-0 z-10 flex flex-col justify-end p-5 mx-1 font-serif font-sans font-semibold text-white text-shadow text-3xl sm:text-2xl xl:text-3xl xl:p-8"> Laravel </div> <div class="absolute bottom-0 left-0 right-0 h-2/3 opacity-80 bg-gradient-to-b from-transparent to-black"></div> </div> </div> <div class="px-4 mt-4 leading-loose text-charcoal-20 md:mt-6 xl:mt-10 sm:text-sm sm:leading-loose lg:text-base lg:leading-loose 2xl:text-lg 2xl:leading-loose"> The present and future of backend web development. <a class='link-white' href='#laravel-up-and-running'>We wrote the book</a>. </div> </div> <div> <div class="mx-auto aspect-w-6 aspect-h-5"> <div class="absolute h-full overflow-hidden bg-cover" style="background-image: url(/assets/images/technical-expertise/vue-react.jpg)"> <div class="absolute inset-0 z-10 flex flex-col justify-end p-5 mx-1 font-serif font-sans font-semibold text-white text-shadow text-3xl sm:text-2xl xl:text-3xl xl:p-8"> Vue & React </div> <div class="absolute bottom-0 left-0 right-0 h-2/3 opacity-80 bg-gradient-to-b from-transparent to-black"></div> </div> </div> <div class="px-4 mt-4 leading-loose text-charcoal-20 md:mt-6 xl:mt-10 sm:text-sm sm:leading-loose lg:text-base lg:leading-loose 2xl:text-lg 2xl:leading-loose"> These ultra-modern frontend frameworks pair beautifully with Laravel. </div> </div> <div> <div class="mx-auto aspect-w-6 aspect-h-5"> <div class="absolute h-full overflow-hidden bg-cover" style="background-image: url(/assets/images/technical-expertise/hybrid.jpg)"> <div class="absolute inset-0 z-10 flex flex-col justify-end p-5 mx-1 font-serif font-sans font-semibold text-white text-shadow text-3xl sm:text-2xl xl:text-3xl xl:p-8"> Hybrid Mobile </div> <div class="absolute bottom-0 left-0 right-0 h-2/3 opacity-80 bg-gradient-to-b from-transparent to-black"></div> </div> </div> <div class="px-4 mt-4 leading-loose text-charcoal-20 md:mt-6 xl:mt-10 sm:text-sm sm:leading-loose lg:text-base lg:leading-loose 2xl:text-lg 2xl:leading-loose"> Game-changing, cross-platform mobile apps with a single codebase. </div> </div> </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 py-0 text-white bg-gray-500"> <div class="max-w-screen-2xl mx-auto flex flex-col-reverse lg:flex-row"> <div class="flex flex-col justify-end pt-12 pb-24 pr-8 text-black xl:w-2/5"> <div class="mb-4 font-mono text-base font-bold tracking-widest uppercase word-spacing-tighter"> Never Settle </div> <h2 class="font-serif text-6xl font-extralight lg:text-7xl leading-tight-1"> <span class="italic">The Best Team</span> <br class="hidden lg:block" /> in the Business </h2> <p class="pt-8 pb-12 text-base leading-loose md:text-lg md:leading-loose"> We’ve spent a decade assembling and nurturing the industry’s finest development team. We’re here to do the best work of our lives on behalf of your business. </p> <div class="flex flex-wrap items-center"> <div class="flex"> <a class="rounded-full" aria-label="Team" href="/team/"> <div class="text-sm md:text-base box-border transition-colors duration-300 font-mono word-spacing-tight font-bold tracking-widest rounded-full py-3 px-6 uppercase leading-none bg-yellow hover:bg-white text-black" > Meet the Team <span class="inline-block -mr-1.5">&#8594</span> </div> </a> </div> </div> </div> <div class="relative flex-grow"> <div class="hidden sm:block absolute top-24 left-1/5 md:-left-1/3 xl:-left-1/4 w-[500px] text-gray-700"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292 49.9"><path d="M24,40.9v2.8l-1,1H20.2V46H23l1,1v2.9h1.3V47l1-1h2.8V44.7H26.3l-1-1V40.9Zm20.2,0v2.8l-1,.9H40.4v1.5h2.8l1,.9v2.9h1.4V47l.9-.9h2.8V44.6H46.5l-.9-.9V40.9Zm20.1,0v2.8l-.9.9H60.7v1.5h2.7l.9.9v2.9h1.6V47l.9-.9h2.8V44.6H66.8l-.9-.9V40.9Zm20.2,0v2.8l-.9.8H80.9v1.7h2.7l.9.8v2.9h1.6V47l.9-.8h2.8V44.5H87l-.9-.8V40.9Zm20.2,0v2.8l-.8.8h-2.8v1.8h2.8l.8.7v2.9h1.7V47l.8-.7H110V44.5h-2.8l-.8-.8V40.9Zm20.2,0v2.8l-.8.8h-2.8v1.8h2.8l.8.7v2.9h1.7V47l.8-.7h2.8V44.5h-2.8l-.8-.8V40.9Zm20.2,0v2.8l-.8.8h-2.8v1.8h2.8l.8.7v2.9h1.7V47l.8-.7h2.8V44.5h-2.8l-.8-.8V40.9Zm20.2,0v2.8l-.8.8h-2.8v1.8h2.8l.8.7v2.9h1.8V47l.7-.7h2.8V44.5h-2.8l-.7-.8V40.9Zm20.2,0v2.8l-.8.8H182v1.8h2.7l.8.7v2.9h1.8V47l.8-.7h2.7V44.5h-2.7l-.8-.8V40.9Zm20.2,0v2.8l-.8.8h-2.7v1.8h2.7l.8.7v2.9h1.8V47l.8-.7H211V44.5h-2.7l-.8-.8V40.9Zm20.2,0v2.8l-.8.8h-2.7v1.8h2.7l.8.7v2.9h1.8V47l.8-.7h2.8V44.5h-2.8l-.8-.8V40.9Zm20.2,0v2.8l-.7.8h-2.8v1.8h2.8l.7.7v2.9h1.8V47l.8-.7h2.8V44.5h-2.8l-.8-.8V40.9Zm20.3,0v2.8l-.8.8h-2.8v1.8h2.8l.8.7v2.9h1.7V47l.8-.7h2.8V44.5h-2.8l-.8-.8V40.9Zm20.2,0v2.8l-.8.8H283v1.8h2.8l.8.7v2.9h1.7V47l.8-.7h2.8V44.5h-2.8l-.8-.8V40.9ZM3.8,40.8v2.9l-1,1H0V46H2.8l1,1v2.9H5.1V47l1-1H8.9V44.7H6.1l-1-1V40.8ZM24.1,20.5v2.8L23,24.4H20.2v1.1H23l1.1,1.1v2.9h1.1V26.6l1.1-1.1h2.8V24.4H26.3l-1.1-1.1V20.5Zm40.4,0v2.8l-1,1H60.7v1.3h2.8l1,1v2.9h1.3V26.6l1-1h2.8V24.3H66.8l-1-1V20.5Zm20.1,0v2.8l-.9.9H80.9v1.5h2.8l.9.9v2.9h1.5V26.6l.9-.9h2.8V24.2H87l-.9-.9V20.5Zm20.2,0v2.8l-.9.9h-2.8v1.5h2.8l.9.9v2.9h1.5V26.6l.9-.9H110V24.2h-2.8l-.9-.9V20.5Zm20.2,0v2.8l-.9.8h-2.7v1.7h2.7l.9.8v2.9h1.6V26.6l.8-.8h2.8V24.1h-2.8l-.8-.8V20.5Zm20.1,0v2.8l-.8.8h-2.7v1.8h2.7l.8.7v2.9h1.8V26.6l.8-.7h2.7V24.1h-2.7l-.8-.8V20.5Zm20.2,0v2.8l-.8.8h-2.7v1.8h2.7l.8.7v2.9h1.8V26.6l.8-.7h2.8V24.1h-2.8l-.8-.8V20.5Zm20.2,0v2.8l-.7.8H182v1.8h2.8l.7.7v2.9h1.8V26.6l.8-.7h2.8V24.1h-2.8l-.8-.8V20.5Zm20.3,0v2.8l-.8.8h-2.8v1.8H205l.8.7v2.9h1.7V26.6l.8-.7h2.8V24.1h-2.8l-.8-.8V20.5Zm20.2,0v2.8l-.8.8h-2.8v1.8h2.8l.8.7v2.9h1.7V26.6l.8-.7h2.8V24.1h-2.8l-.8-.8V20.5Zm20.2,0v2.8l-.8.8h-2.8v1.8h2.8l.8.7v2.9h1.7V26.6l.8-.7h2.8V24.1h-2.8l-.8-.8V20.5Zm20.2,0v2.8l-.8.8h-2.7v1.8h2.7l.8.7v2.9h1.8V26.6l.8-.7h2.7V24.1H269l-.8-.8V20.5Zm20.2,0v2.8l-.8.8h-2.7v1.8h2.7l.8.7v2.9h1.8V26.6l.8-.7h2.7V24.1h-2.7l-.8-.8V20.5ZM44.3,20.4v2.9l-1.1,1H40.5v1.3h2.7l1.1,1v2.9h1.2V26.6l1.1-1h2.8V24.3H46.6l-1.1-1V20.4Zm-40.4,0v2.9L2.8,24.4H0v1.1H2.8l1.1,1.1v2.9h1V26.6l1.2-1.1H8.9V24.4H6.1L4.9,23.3V20.4ZM24.2.1V2.9L23,4.1H20.2V5H23l1.2,1.2V9.1h.9V6.2L26.3,5h2.8V4.1H26.3L25.1,2.9V.1ZM64.6.1V2.9L63.5,4H60.7V5.1h2.8l1.1,1.1V9.1h1.1V6.2l1.1-1.1h2.8V4H66.8L65.7,2.9V.1Zm40.3,0V2.9l-1,1h-2.7V5.2h2.7l1,1V9.1h1.4V6.2l1-1H110V3.9h-2.7l-1-1V.1Zm20.2,0V2.9l-1,.9h-2.7V5.3h2.7l1,.9V9.1h1.4V6.2l1-.9h2.8V3.8h-2.8l-1-.9V.1Zm20.1,0V2.9l-.8.9h-2.8V5.3h2.8l.8.9V9.1h1.6V6.2l.9-.9h2.8V3.8h-2.8l-.9-.9V.1Zm20.2,0V2.9l-.8.8h-2.8V5.4h2.8l.8.8V9.1h1.7V6.2l.8-.8h2.8V3.7h-2.8l-.8-.8V.1Zm20.2,0V2.9l-.8.8H182V5.5h2.8l.8.7V9.1h1.7V6.2l.8-.7h2.8V3.7h-2.8l-.8-.8V.1Zm20.2,0V2.9l-.8.8h-2.8V5.5H205l.8.7V9.1h1.8V6.2l.7-.7h2.8V3.7h-2.8l-.7-.8V.1ZM226,.1V2.9l-.8.8h-2.7V5.5h2.7l.8.7V9.1h1.8V6.2l.8-.7h2.7V3.7h-2.7l-.8-.8V.1Zm20.2,0V2.9l-.8.8h-2.7V5.5h2.7l.8.7V9.1H248V6.2l.8-.7h2.7V3.7h-2.7l-.8-.8V.1Zm20.2,0V2.9l-.8.8h-2.7V5.5h2.7l.8.7V9.1h1.8V6.2l.8-.7h2.8V3.7H269l-.8-.8V.1Zm20.2,0V2.9l-.7.8h-2.8V5.5h2.8l.7.7V9.1h1.8V6.2l.8-.7H292V3.7h-2.8l-.8-.8V.1ZM84.8,0V2.9l-1.1,1H80.9V5.2h2.8l1.1,1V9.1H86V6.2l1-1h2.8V3.9H87l-1-1V0ZM44.4,0V2.9L43.2,4H40.5V5.1h2.8l1.1,1.1V9.1h1V6.2l1.2-1.1h2.8V4H46.6L45.4,2.9V0ZM4.1,0V2.9L2.8,4.2H0v.7H2.8L4.1,6.2V9.1h.7V6.2L6.1,4.9H8.9V4.2H6.1L4.8,2.9V0Z" fill="currentColor"/></svg> </div> <div class="z-10"> <div x-data="teamCards()"> <div class="flex justify-start py-10 lg:justify-end space-x-10"> <div class="flex flex-row max-w-full -mt-20 space-x-5 lg:flex-col lg:space-x-0 lg:space-y-10"> <div class="flex-none relative w-[340px] h-[388px]"> <div x-ref="card_1_current" class="absolute inset-0 z-20" @click="markCardFlipped(1)" > </div> <div x-ref="card_1_previous" class="absolute inset-0 z-10" > </div> </div> <div class="hidden md:block"> <div class="flex-none relative w-[340px] h-[388px]"> <div x-ref="card_2_current" class="absolute inset-0 z-20" @click="markCardFlipped(2)" > </div> <div x-ref="card_2_previous" class="absolute inset-0 z-10" > </div> </div> </div> </div> <div class="flex-col hidden -mb-20 xl:flex space-y-10"> <div class="flex-none relative w-[340px] h-[388px]"> <div x-ref="card_3_current" class="absolute inset-0 z-20" @click="markCardFlipped(3)" > </div> <div x-ref="card_3_previous" class="absolute inset-0 z-10" > </div> </div> <div class="flex-none relative w-[340px] h-[388px]"> <div x-ref="card_4_current" class="absolute inset-0 z-20" @click="markCardFlipped(4)" > </div> <div x-ref="card_4_previous" class="absolute inset-0 z-10" > </div> </div> </div> </div> <div class="hidden"> <div x-ref="card_original_0" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Matt" lastName="Stauffer" position="Co-Founder & Chief Executive Officer" profileImage="/assets/images/bios/matt.jpg" contributions="[{\"project_url\":\"https:\/\/laravelpodcast.com\",\"project_name\":\"The Laravel Podcast\",\"position\":\"Host\",\"icon\":\"podcast\"},{\"project_url\":\"https:\/\/onramp.dev\",\"project_name\":\"Onramp\",\"position\":\"Creator\",\"icon\":\"onramp\"},{\"project_url\":\"https:\/\/github.com\/tighten\/takeout\",\"project_name\":\"Takeout\",\"position\":\"Creator\",\"icon\":\"takeout\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Matt Stauffer | Co-Founder & Chief Executive Officer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/matt.jpg" alt="Matt Stauffer" title="Matt Stauffer | Co-Founder & Chief Executive Officer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Matt Stauffer | Co-Founder & Chief Executive Officer" > Matt<br>Stauffer </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Matt Stauffer | Co-Founder & Chief Executive Officer" > Co-Founder & Chief Executive Officer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://laravelpodcast.com" project="The Laravel Podcast" position="Host" icon="podcast" href="https://laravelpodcast.com" title="The Laravel Podcast" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 22 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M11 0.5C7.08351 0.5 3.86818 3.50198 3.52948 7.33045C3.5104 7.38339 3.5 7.44048 3.5 7.5C3.5 7.53491 3.50358 7.56898 3.51039 7.60187C3.50349 7.73371 3.5 7.86645 3.5 8V10.5V13.5V14C3.5 17.8031 6.33064 20.945 10 21.4339V23.448C5.22334 22.9483 1.5 18.909 1.5 14V13C1.5 12.7239 1.27614 12.5 1 12.5C0.723858 12.5 0.5 12.7239 0.5 13V14C0.5 19.4617 4.67007 23.9494 10 24.453V27H4.5C4.22386 27 4 27.2239 4 27.5C4 27.7761 4.22386 28 4.5 28H10H12H17.5C17.7761 28 18 27.7761 18 27.5C18 27.2239 17.7761 27 17.5 27H12V24.453C17.3299 23.9494 21.5 19.4617 21.5 14V13C21.5 12.7239 21.2761 12.5 21 12.5C20.7239 12.5 20.5 12.7239 20.5 13V14C20.5 18.909 16.7767 22.9483 12 23.448V21.4339C15.6694 20.945 18.5 17.8031 18.5 14V8C18.5 3.85786 15.1421 0.5 11 0.5ZM8 14H4.5C4.5 17.5899 7.41015 20.5 11 20.5C14.5899 20.5 17.5 17.5898 17.5 14H14C13.7239 14 13.5 13.7761 13.5 13.5C13.5 13.2239 13.7239 13 14 13H17.5V11H14C13.7239 11 13.5 10.7761 13.5 10.5C13.5 10.2239 13.7239 10 14 10H17.5V8H14C13.7239 8 13.5 7.77614 13.5 7.5C13.5 7.22386 13.7239 7 14 7H17.4236C16.9425 3.88491 14.2498 1.5 11 1.5C7.75021 1.5 5.05745 3.88491 4.57645 7H8V8L4.5 8V10H8V11H4.5V13H8V14Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> The Laravel Podcast </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Host </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://onramp.dev" project="Onramp" position="Creator" icon="onramp" href="https://onramp.dev" title="Onramp" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="currentColor" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <g> <circle cx="11.153" cy="14" r="4.558" style="fill: none" /> <path d="M16.759,14a5.683,5.683,0,1,1-.676-2.612,10.517,10.517,0,0,1,2.1-3.953A9.617,9.617,0,1,0,20.785,14h.01a5.753,5.753,0,0,1,5.683-5.586V4.383C21.242,4.658,16.759,9.034,16.759,14Z" style="fill: none" /> <path fill="currentColor" d="M27,3.322a11.574,11.574,0,0,0-8.108,3.343,10.671,10.671,0,1,0,2.923,7.641h.012c0-3.342,2.682-4.864,5.173-4.864h.524V3.322Zm-.523,5.092A5.753,5.753,0,0,0,20.8,14h-.01a9.664,9.664,0,1,1-2.6-6.565,10.517,10.517,0,0,0-2.1,3.953A5.56,5.56,0,1,0,16.759,14c0-4.966,4.483-9.342,9.719-9.617ZM15.711,14a4.558,4.558,0,1,1-4.558-4.558A4.563,4.563,0,0,1,15.711,14Z"/> </g> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Onramp </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group hidden lg:block" projectUrl="https://github.com/tighten/takeout" project="Takeout" position="Creator" icon="takeout" href="https://github.com/tighten/takeout" title="Takeout" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill="currentColor" d="M27.624,11.35,23.6,6.839c-.01-.012-.026-.017-.037-.028a.435.435,0,0,0-.1-.076.645.645,0,0,0-.075-.022.476.476,0,0,0-.082-.023c-.008,0-.014,0-.021,0s-.011,0-.017,0H12.6L7.535,1.627a.275.275,0,0,0-.389.388l4.673,4.673H5.141c-.006,0-.011,0-.017,0s-.013,0-.02,0a.467.467,0,0,0-.064.018.4.4,0,0,0-.089.026.466.466,0,0,0-.075.05.431.431,0,0,0-.056.039L.391,11.334a.45.45,0,0,0,.642.631l3.741-3.81.411,5.007a.44.44,0,0,0,.021.1l1.885,5.82,2.214,7.054a.45.45,0,0,0,.429.316h8.942a.45.45,0,0,0,.429-.316l2.212-7.05L23.2,13.264a.44.44,0,0,0,.021-.1l.406-4.941,3.321,3.727a.45.45,0,1,0,.672-.6Zm-17.777.024L5.992,7.588H22.418l-3.855,3.786Zm-1.9,7.437-1.87-5.774-.411-5,3.875,3.806a.271.271,0,0,0,.192.079h4.2V22.1l-3.912,3.3Zm6.257,3.779,3.511,2.963H10.694Zm6.255-3.775L18.392,25.4,14.48,22.1V11.924h4.2a.271.271,0,0,0,.192-.079l3.875-3.806-.411,5Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Takeout </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Matt Stauffer | Co-Founder & Chief Executive Officer" > Matt<br>Stauffer </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Matt Stauffer | Co-Founder & Chief Executive Officer" > Co-Founder & Chief Executive Officer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_1" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Andrew" lastName="Morgan" position="Lead Programmer" profileImage="/assets/images/bios/andrew.jpg" contributions="[{\"project_url\":\"https:\/\/tighten.com\/insights\/converting-a-legacy-app-to-laravel\/\",\"project_name\":\"Legacy to Laravel: How to Modernize an Aging PHP Application\",\"position\":\"Writer\",\"icon\":\"blog\"},{\"project_url\":\"https:\/\/tighten.com\/insights\/how-to-train-your-keyboard\/\",\"project_name\":\"How to Train Your Keyboard\",\"position\":\"Writer\",\"icon\":\"blog\"},{\"project_url\":\"https:\/\/twentypercent.fm\/episodes\/andrew-morgan-train-your-keyboard\",\"project_name\":\"Train Your Keyboard\",\"position\":\"Guest\",\"icon\":\"podcast\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Andrew Morgan | Lead Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/andrew.jpg" alt="Andrew Morgan" title="Andrew Morgan | Lead Programmer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Andrew Morgan | Lead Programmer" > Andrew<br>Morgan </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Andrew Morgan | Lead Programmer" > Lead Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/converting-a-legacy-app-to-laravel/" project="Legacy to Laravel: How to Modernize an Aging PHP Application" position="Writer" icon="blog" href="https://tighten.com/insights/converting-a-legacy-app-to-laravel/" title="Legacy to Laravel: How to Modernize an Aging PHP Application" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Legacy to Laravel: How to Modernize an Aging PHP Application </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/how-to-train-your-keyboard/" project="How to Train Your Keyboard" position="Writer" icon="blog" href="https://tighten.com/insights/how-to-train-your-keyboard/" title="How to Train Your Keyboard" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> How to Train Your Keyboard </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group hidden lg:block" projectUrl="https://twentypercent.fm/episodes/andrew-morgan-train-your-keyboard" project="Train Your Keyboard" position="Guest" icon="podcast" href="https://twentypercent.fm/episodes/andrew-morgan-train-your-keyboard" title="Train Your Keyboard" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 22 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M11 0.5C7.08351 0.5 3.86818 3.50198 3.52948 7.33045C3.5104 7.38339 3.5 7.44048 3.5 7.5C3.5 7.53491 3.50358 7.56898 3.51039 7.60187C3.50349 7.73371 3.5 7.86645 3.5 8V10.5V13.5V14C3.5 17.8031 6.33064 20.945 10 21.4339V23.448C5.22334 22.9483 1.5 18.909 1.5 14V13C1.5 12.7239 1.27614 12.5 1 12.5C0.723858 12.5 0.5 12.7239 0.5 13V14C0.5 19.4617 4.67007 23.9494 10 24.453V27H4.5C4.22386 27 4 27.2239 4 27.5C4 27.7761 4.22386 28 4.5 28H10H12H17.5C17.7761 28 18 27.7761 18 27.5C18 27.2239 17.7761 27 17.5 27H12V24.453C17.3299 23.9494 21.5 19.4617 21.5 14V13C21.5 12.7239 21.2761 12.5 21 12.5C20.7239 12.5 20.5 12.7239 20.5 13V14C20.5 18.909 16.7767 22.9483 12 23.448V21.4339C15.6694 20.945 18.5 17.8031 18.5 14V8C18.5 3.85786 15.1421 0.5 11 0.5ZM8 14H4.5C4.5 17.5899 7.41015 20.5 11 20.5C14.5899 20.5 17.5 17.5898 17.5 14H14C13.7239 14 13.5 13.7761 13.5 13.5C13.5 13.2239 13.7239 13 14 13H17.5V11H14C13.7239 11 13.5 10.7761 13.5 10.5C13.5 10.2239 13.7239 10 14 10H17.5V8H14C13.7239 8 13.5 7.77614 13.5 7.5C13.5 7.22386 13.7239 7 14 7H17.4236C16.9425 3.88491 14.2498 1.5 11 1.5C7.75021 1.5 5.05745 3.88491 4.57645 7H8V8L4.5 8V10H8V11H4.5V13H8V14Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Train Your Keyboard </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Guest </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Andrew Morgan | Lead Programmer" > Andrew<br>Morgan </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Andrew Morgan | Lead Programmer" > Lead Programmer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_2" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Andy" lastName="Newhouse" position="Programmer" profileImage="/assets/images/bios/andy.jpg" contributions="[{\"project_url\":\"https:\/\/github.com\/techenby\/octoprint-sdk\",\"project_name\":\"OctoPrint SDK\",\"position\":\"Creator\",\"icon\":\"repo\"},{\"project_url\":\"https:\/\/github.com\/techenby\/radnight\",\"project_name\":\"Radnight\",\"position\":\"Creator\",\"icon\":\"repo\"},{\"project_url\":\"https:\/\/sideprojectpodcast.com\/episodes\/sunny-with-andy-newhouse\",\"project_name\":\"Side Project Podcast: Sunny with Andy Newhouse\",\"position\":\"Guest\",\"icon\":\"podcast\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Andy Newhouse | Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/andy.jpg" alt="Andy Newhouse" title="Andy Newhouse | Programmer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Andy Newhouse | Programmer" > Andy<br>Newhouse </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Andy Newhouse | Programmer" > Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/techenby/octoprint-sdk" project="OctoPrint SDK" position="Creator" icon="repo" href="https://github.com/techenby/octoprint-sdk" title="OctoPrint SDK" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> OctoPrint SDK </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/techenby/radnight" project="Radnight" position="Creator" icon="repo" href="https://github.com/techenby/radnight" title="Radnight" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Radnight </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group hidden lg:block" projectUrl="https://sideprojectpodcast.com/episodes/sunny-with-andy-newhouse" project="Side Project Podcast: Sunny with Andy Newhouse" position="Guest" icon="podcast" href="https://sideprojectpodcast.com/episodes/sunny-with-andy-newhouse" title="Side Project Podcast: Sunny with Andy Newhouse" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 22 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M11 0.5C7.08351 0.5 3.86818 3.50198 3.52948 7.33045C3.5104 7.38339 3.5 7.44048 3.5 7.5C3.5 7.53491 3.50358 7.56898 3.51039 7.60187C3.50349 7.73371 3.5 7.86645 3.5 8V10.5V13.5V14C3.5 17.8031 6.33064 20.945 10 21.4339V23.448C5.22334 22.9483 1.5 18.909 1.5 14V13C1.5 12.7239 1.27614 12.5 1 12.5C0.723858 12.5 0.5 12.7239 0.5 13V14C0.5 19.4617 4.67007 23.9494 10 24.453V27H4.5C4.22386 27 4 27.2239 4 27.5C4 27.7761 4.22386 28 4.5 28H10H12H17.5C17.7761 28 18 27.7761 18 27.5C18 27.2239 17.7761 27 17.5 27H12V24.453C17.3299 23.9494 21.5 19.4617 21.5 14V13C21.5 12.7239 21.2761 12.5 21 12.5C20.7239 12.5 20.5 12.7239 20.5 13V14C20.5 18.909 16.7767 22.9483 12 23.448V21.4339C15.6694 20.945 18.5 17.8031 18.5 14V8C18.5 3.85786 15.1421 0.5 11 0.5ZM8 14H4.5C4.5 17.5899 7.41015 20.5 11 20.5C14.5899 20.5 17.5 17.5898 17.5 14H14C13.7239 14 13.5 13.7761 13.5 13.5C13.5 13.2239 13.7239 13 14 13H17.5V11H14C13.7239 11 13.5 10.7761 13.5 10.5C13.5 10.2239 13.7239 10 14 10H17.5V8H14C13.7239 8 13.5 7.77614 13.5 7.5C13.5 7.22386 13.7239 7 14 7H17.4236C16.9425 3.88491 14.2498 1.5 11 1.5C7.75021 1.5 5.05745 3.88491 4.57645 7H8V8L4.5 8V10H8V11H4.5V13H8V14Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Side Project Podcast: Sunny with Andy Newhouse </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Guest </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Andy Newhouse | Programmer" > Andy<br>Newhouse </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Andy Newhouse | Programmer" > Programmer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_3" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Anna" lastName="Shevlin" position="Operations Manager" profileImage="/assets/images/bios/anna.jpg" contributions="[{\"project_url\":\"https:\/\/twentypercent.fm\/episodes\/marje-holmstrom-sabo-anna-shevlin-all-about-on-sites-for-distributed-companies\",\"project_name\":\"All About On-sites for Distributed Companies\",\"position\":\"Guest\",\"icon\":\"podcast\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Anna Shevlin | Operations Manager" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/anna.jpg" alt="Anna Shevlin" title="Anna Shevlin | Operations Manager" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Anna Shevlin | Operations Manager" > Anna<br>Shevlin </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Anna Shevlin | Operations Manager" > Operations Manager </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://twentypercent.fm/episodes/marje-holmstrom-sabo-anna-shevlin-all-about-on-sites-for-distributed-companies" project="All About On-sites for Distributed Companies" position="Guest" icon="podcast" href="https://twentypercent.fm/episodes/marje-holmstrom-sabo-anna-shevlin-all-about-on-sites-for-distributed-companies" title="All About On-sites for Distributed Companies" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 22 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M11 0.5C7.08351 0.5 3.86818 3.50198 3.52948 7.33045C3.5104 7.38339 3.5 7.44048 3.5 7.5C3.5 7.53491 3.50358 7.56898 3.51039 7.60187C3.50349 7.73371 3.5 7.86645 3.5 8V10.5V13.5V14C3.5 17.8031 6.33064 20.945 10 21.4339V23.448C5.22334 22.9483 1.5 18.909 1.5 14V13C1.5 12.7239 1.27614 12.5 1 12.5C0.723858 12.5 0.5 12.7239 0.5 13V14C0.5 19.4617 4.67007 23.9494 10 24.453V27H4.5C4.22386 27 4 27.2239 4 27.5C4 27.7761 4.22386 28 4.5 28H10H12H17.5C17.7761 28 18 27.7761 18 27.5C18 27.2239 17.7761 27 17.5 27H12V24.453C17.3299 23.9494 21.5 19.4617 21.5 14V13C21.5 12.7239 21.2761 12.5 21 12.5C20.7239 12.5 20.5 12.7239 20.5 13V14C20.5 18.909 16.7767 22.9483 12 23.448V21.4339C15.6694 20.945 18.5 17.8031 18.5 14V8C18.5 3.85786 15.1421 0.5 11 0.5ZM8 14H4.5C4.5 17.5899 7.41015 20.5 11 20.5C14.5899 20.5 17.5 17.5898 17.5 14H14C13.7239 14 13.5 13.7761 13.5 13.5C13.5 13.2239 13.7239 13 14 13H17.5V11H14C13.7239 11 13.5 10.7761 13.5 10.5C13.5 10.2239 13.7239 10 14 10H17.5V8H14C13.7239 8 13.5 7.77614 13.5 7.5C13.5 7.22386 13.7239 7 14 7H17.4236C16.9425 3.88491 14.2498 1.5 11 1.5C7.75021 1.5 5.05745 3.88491 4.57645 7H8V8L4.5 8V10H8V11H4.5V13H8V14Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> All About On-sites for Distributed Companies </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Guest </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Anna Shevlin | Operations Manager" > Anna<br>Shevlin </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Anna Shevlin | Operations Manager" > Operations Manager </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_4" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Anthony" lastName="Clark" position="Lead Programmer" profileImage="/assets/images/bios/anthony-clark.jpg" contributions="[{\"project_url\":\"https:\/\/github.com\/tighten\/tlint\",\"project_name\":\"TLint\",\"position\":\"Contributor\",\"icon\":\"repo\"},{\"project_url\":\"https:\/\/github.com\/tighten\/tighten-coding-standard\",\"project_name\":\"Tighten Coding Standard\",\"position\":\"Contributor\",\"icon\":\"repo\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Anthony Clark | Lead Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/anthony-clark.jpg" alt="Anthony Clark" title="Anthony Clark | Lead Programmer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Anthony Clark | Lead Programmer" > Anthony<br>Clark </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Anthony Clark | Lead Programmer" > Lead Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/tighten/tlint" project="TLint" position="Contributor" icon="repo" href="https://github.com/tighten/tlint" title="TLint" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> TLint </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Contributor </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/tighten/tighten-coding-standard" project="Tighten Coding Standard" position="Contributor" icon="repo" href="https://github.com/tighten/tighten-coding-standard" title="Tighten Coding Standard" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Tighten Coding Standard </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Contributor </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Anthony Clark | Lead Programmer" > Anthony<br>Clark </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Anthony Clark | Lead Programmer" > Lead Programmer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_5" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Dan" lastName="Sheetz" position="Co-Founder" profileImage="/assets/images/bios/dan.jpg" contributions="[{\"project_url\":\"https:\/\/tighten.com\/insights\/the-great-tighten-experiment\/\",\"project_name\":\"The Great Tighten Experiment\",\"position\":\"Writer\",\"icon\":\"blog\"},{\"project_url\":\"https:\/\/tighten.com\/manifesto\/\",\"project_name\":\"Tighten Manifesto\",\"position\":\"Writer\",\"icon\":\"blog\"},{\"project_url\":\"https:\/\/fieldgoal.io\",\"project_name\":\"Field Goal\",\"position\":\"Contributor\",\"icon\":\"fieldgoal\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Dan Sheetz | Co-Founder" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/dan.jpg" alt="Dan Sheetz" title="Dan Sheetz | Co-Founder" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Dan Sheetz | Co-Founder" > Dan<br>Sheetz </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Dan Sheetz | Co-Founder" > Co-Founder </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/the-great-tighten-experiment/" project="The Great Tighten Experiment" position="Writer" icon="blog" href="https://tighten.com/insights/the-great-tighten-experiment/" title="The Great Tighten Experiment" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> The Great Tighten Experiment </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/manifesto/" project="Tighten Manifesto" position="Writer" icon="blog" href="https://tighten.com/manifesto/" title="Tighten Manifesto" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Tighten Manifesto </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group hidden lg:block" projectUrl="https://fieldgoal.io" project="Field Goal" position="Contributor" icon="fieldgoal" href="https://fieldgoal.io" title="Field Goal" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 27 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H24C25.3807 0.5 26.5 1.61929 26.5 3V5C26.5 6.38071 25.3807 7.5 24 7.5H3C1.61929 7.5 0.5 6.38071 0.5 5V3ZM3 1.5C2.17157 1.5 1.5 2.17157 1.5 3V5C1.5 5.82843 2.17157 6.5 3 6.5H24C24.8284 6.5 25.5 5.82843 25.5 5V3C25.5 2.17157 24.8284 1.5 24 1.5H3ZM0.5 13C0.5 11.6193 1.61929 10.5 3 10.5H17C18.3807 10.5 19.5 11.6193 19.5 13V15C19.5 16.3807 18.3807 17.5 17 17.5H3C1.61929 17.5 0.5 16.3807 0.5 15V13ZM3 11.5C2.17157 11.5 1.5 12.1716 1.5 13V15C1.5 15.8284 2.17157 16.5 3 16.5H17C17.8284 16.5 18.5 15.8284 18.5 15V13C18.5 12.1716 17.8284 11.5 17 11.5H3ZM3 20.5C1.61929 20.5 0.5 21.6193 0.5 23V25C0.5 26.3807 1.61929 27.5 3 27.5H8C9.38071 27.5 10.5 26.3807 10.5 25V23C10.5 21.6193 9.38071 20.5 8 20.5H3ZM1.5 23C1.5 22.1716 2.17157 21.5 3 21.5H8C8.82843 21.5 9.5 22.1716 9.5 23V25C9.5 25.8284 8.82843 26.5 8 26.5H3C2.17157 26.5 1.5 25.8284 1.5 25V23Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Field Goal </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Contributor </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Dan Sheetz | Co-Founder" > Dan<br>Sheetz </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Dan Sheetz | Co-Founder" > Co-Founder </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_6" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Guillermo" lastName="Cava Nuñez" position="Programmer" profileImage="/assets/images/bios/guillermo.jpg" contributions="null" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Guillermo Cava Nuñez | Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/guillermo.jpg" alt="Guillermo Cava Nuñez" title="Guillermo Cava Nuñez | Programmer" > <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Guillermo Cava Nuñez | Programmer" > Guillermo<br>Cava Nuñez </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Guillermo Cava Nuñez | Programmer" > Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> </div> </div> </div> </div> <div x-ref="card_original_7" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Jake" lastName="Bathman" position="Lead Programmer" profileImage="/assets/images/bios/jake.jpg" contributions="[{\"project_url\":\"https:\/\/tighten.com\/insights\/app-key-and-you\/\",\"project_name\":\"APP_KEY And You\",\"position\":\"Writer\",\"icon\":\"blog\"},{\"project_url\":\"https:\/\/twentypercent.fm\/episodes\/jake-bathman-slack-apps-bots\",\"project_name\":\"Slack Apps & Bots\",\"position\":\"Guest\",\"icon\":\"podcast\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Jake Bathman | Lead Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/jake.jpg" alt="Jake Bathman" title="Jake Bathman | Lead Programmer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Jake Bathman | Lead Programmer" > Jake<br>Bathman </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Jake Bathman | Lead Programmer" > Lead Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/app-key-and-you/" project="APP_KEY And You" position="Writer" icon="blog" href="https://tighten.com/insights/app-key-and-you/" title="APP_KEY And You" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> APP_KEY And You </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://twentypercent.fm/episodes/jake-bathman-slack-apps-bots" project="Slack Apps & Bots" position="Guest" icon="podcast" href="https://twentypercent.fm/episodes/jake-bathman-slack-apps-bots" title="Slack Apps & Bots" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 22 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M11 0.5C7.08351 0.5 3.86818 3.50198 3.52948 7.33045C3.5104 7.38339 3.5 7.44048 3.5 7.5C3.5 7.53491 3.50358 7.56898 3.51039 7.60187C3.50349 7.73371 3.5 7.86645 3.5 8V10.5V13.5V14C3.5 17.8031 6.33064 20.945 10 21.4339V23.448C5.22334 22.9483 1.5 18.909 1.5 14V13C1.5 12.7239 1.27614 12.5 1 12.5C0.723858 12.5 0.5 12.7239 0.5 13V14C0.5 19.4617 4.67007 23.9494 10 24.453V27H4.5C4.22386 27 4 27.2239 4 27.5C4 27.7761 4.22386 28 4.5 28H10H12H17.5C17.7761 28 18 27.7761 18 27.5C18 27.2239 17.7761 27 17.5 27H12V24.453C17.3299 23.9494 21.5 19.4617 21.5 14V13C21.5 12.7239 21.2761 12.5 21 12.5C20.7239 12.5 20.5 12.7239 20.5 13V14C20.5 18.909 16.7767 22.9483 12 23.448V21.4339C15.6694 20.945 18.5 17.8031 18.5 14V8C18.5 3.85786 15.1421 0.5 11 0.5ZM8 14H4.5C4.5 17.5899 7.41015 20.5 11 20.5C14.5899 20.5 17.5 17.5898 17.5 14H14C13.7239 14 13.5 13.7761 13.5 13.5C13.5 13.2239 13.7239 13 14 13H17.5V11H14C13.7239 11 13.5 10.7761 13.5 10.5C13.5 10.2239 13.7239 10 14 10H17.5V8H14C13.7239 8 13.5 7.77614 13.5 7.5C13.5 7.22386 13.7239 7 14 7H17.4236C16.9425 3.88491 14.2498 1.5 11 1.5C7.75021 1.5 5.05745 3.88491 4.57645 7H8V8L4.5 8V10H8V11H4.5V13H8V14Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Slack Apps & Bots </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Guest </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Jake Bathman | Lead Programmer" > Jake<br>Bathman </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Jake Bathman | Lead Programmer" > Lead Programmer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_8" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Jamison" lastName="Valenta" position="Programmer" profileImage="/assets/images/bios/jamison.jpg" contributions="[{\"project_url\":\"https:\/\/tighten.com\/insights\/catching-up-laravel\/\",\"project_name\":\"Catching Up Laravel\",\"position\":\"Writer\",\"icon\":\"blog\"},{\"project_url\":\"https:\/\/tighten.com\/insights\/a-cautionary-tale-of-nondeterministic-laravel-pagination\/\",\"project_name\":\"A Cautionary Tale of Nondeterministic Laravel Pagination\",\"position\":\"Writer\",\"icon\":\"blog\"},{\"project_url\":\"https:\/\/github.com\/tighten\/collect\",\"project_name\":\"Collect\",\"position\":\"Maintainer\",\"icon\":\"repo\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Jamison Valenta | Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/jamison.jpg" alt="Jamison Valenta" title="Jamison Valenta | Programmer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Jamison Valenta | Programmer" > Jamison<br>Valenta </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Jamison Valenta | Programmer" > Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/catching-up-laravel/" project="Catching Up Laravel" position="Writer" icon="blog" href="https://tighten.com/insights/catching-up-laravel/" title="Catching Up Laravel" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Catching Up Laravel </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/a-cautionary-tale-of-nondeterministic-laravel-pagination/" project="A Cautionary Tale of Nondeterministic Laravel Pagination" position="Writer" icon="blog" href="https://tighten.com/insights/a-cautionary-tale-of-nondeterministic-laravel-pagination/" title="A Cautionary Tale of Nondeterministic Laravel Pagination" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> A Cautionary Tale of Nondeterministic Laravel Pagination </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group hidden lg:block" projectUrl="https://github.com/tighten/collect" project="Collect" position="Maintainer" icon="repo" href="https://github.com/tighten/collect" title="Collect" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Collect </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Maintainer </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Jamison Valenta | Programmer" > Jamison<br>Valenta </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Jamison Valenta | Programmer" > Programmer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_9" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Jeanne" lastName="Henry" position="Director of Projects" profileImage="/assets/images/bios/jeanne.jpg" contributions="[{\"project_url\":\"https:\/\/tighten.com\/insights\/a-project-managers-top-tips-for-digital-project-management-success\/\",\"project_name\":\"A Project Manager\u2019s Top Tips\",\"position\":\"Writer\",\"icon\":\"blog\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Jeanne Henry | Director of Projects" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/jeanne.jpg" alt="Jeanne Henry" title="Jeanne Henry | Director of Projects" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Jeanne Henry | Director of Projects" > Jeanne<br>Henry </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Jeanne Henry | Director of Projects" > Director of Projects </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/a-project-managers-top-tips-for-digital-project-management-success/" project="A Project Manager’s Top Tips" position="Writer" icon="blog" href="https://tighten.com/insights/a-project-managers-top-tips-for-digital-project-management-success/" title="A Project Manager’s Top Tips" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> A Project Manager’s Top Tips </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Jeanne Henry | Director of Projects" > Jeanne<br>Henry </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Jeanne Henry | Director of Projects" > Director of Projects </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_10" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Keith" lastName="Damiani" position="Director of Engineering" profileImage="/assets/images/bios/keith.jpg" contributions="[{\"project_url\":\"https:\/\/jigsaw.tighten.com\/\",\"project_name\":\"Jigsaw\",\"position\":\"Contributor\",\"icon\":\"jigsaw\"},{\"project_url\":\"https:\/\/www.youtube.com\/watch?v=eVkTIg2D7NY\",\"project_name\":\"Graph DBs and Laravel\",\"position\":\"Speaker\",\"icon\":\"conference\"},{\"project_url\":\"https:\/\/typing.tighten.co\/\",\"project_name\":\"Tighten Typing Challenge\",\"position\":\"Creator\",\"icon\":\"repo\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Keith Damiani | Director of Engineering" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/keith.jpg" alt="Keith Damiani" title="Keith Damiani | Director of Engineering" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Keith Damiani | Director of Engineering" > Keith<br>Damiani </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Keith Damiani | Director of Engineering" > Director of Engineering </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://jigsaw.tighten.com/" project="Jigsaw" position="Contributor" icon="jigsaw" href="https://jigsaw.tighten.com/" title="Jigsaw" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill="currentColor" d="M22.6,1.218H5.4A4.182,4.182,0,0,0,1.218,5.4V22.6A4.182,4.182,0,0,0,5.4,26.782H22.6A4.182,4.182,0,0,0,26.782,22.6V5.4A4.182,4.182,0,0,0,22.6,1.218Zm0,1A3.181,3.181,0,0,1,25.782,5.4v8.229H22.056a.733.733,0,0,1-.659-.407.578.578,0,0,1,.108-.666l.385-.384a1.616,1.616,0,0,0,.468-1.133V10.93a2.217,2.217,0,1,0-4.434,0v.105a1.593,1.593,0,0,0,.469,1.133l.382.383a.577.577,0,0,1,.11.667.733.733,0,0,1-.658.407H14.375V9.774a1.476,1.476,0,0,0-.821-1.329,1.325,1.325,0,0,0-1.533.248l-.383.383a.857.857,0,0,1-.6.25H10.93a1.467,1.467,0,1,1,0-2.934h.105a.857.857,0,0,1,.6.25l.383.382a1.326,1.326,0,0,0,1.533.249,1.476,1.476,0,0,0,.821-1.329V2.218ZM13.625,5.944a.733.733,0,0,1-.407.659.574.574,0,0,1-.666-.109l-.383-.383a1.617,1.617,0,0,0-1.134-.469H10.93a2.217,2.217,0,1,0,0,4.434h.105a1.614,1.614,0,0,0,1.134-.47l.383-.382a.577.577,0,0,1,.667-.108.731.731,0,0,1,.406.658v3.851H9.773a1.478,1.478,0,0,0-1.328.821,1.326,1.326,0,0,0,.248,1.533l.383.383a.847.847,0,0,1,.25.6v.105a1.467,1.467,0,1,1-2.934,0v-.105a.858.858,0,0,1,.249-.6l.384-.383a1.327,1.327,0,0,0,.248-1.532,1.475,1.475,0,0,0-1.329-.822H2.218V5.4A3.181,3.181,0,0,1,5.4,2.218h8.229ZM5.4,25.782A3.181,3.181,0,0,1,2.218,22.6V14.375H5.944a.733.733,0,0,1,.659.407.578.578,0,0,1-.108.666l-.385.384a1.616,1.616,0,0,0-.468,1.133v.105a2.217,2.217,0,1,0,4.434,0v-.105a1.593,1.593,0,0,0-.469-1.133l-.382-.383a.577.577,0,0,1-.11-.667.733.733,0,0,1,.658-.407h3.852v3.851a1.476,1.476,0,0,0,.821,1.329,1.326,1.326,0,0,0,1.533-.248l.383-.383a.857.857,0,0,1,.6-.25h.105a1.467,1.467,0,1,1,0,2.934h-.105a.857.857,0,0,1-.6-.25l-.383-.382a1.324,1.324,0,0,0-1.533-.249,1.476,1.476,0,0,0-.821,1.329v3.726Zm8.979-3.726a.733.733,0,0,1,.407-.659.578.578,0,0,1,.666.109l.383.383a1.617,1.617,0,0,0,1.134.469h.105a2.217,2.217,0,1,0,0-4.434h-.105a1.614,1.614,0,0,0-1.134.47l-.383.382a.574.574,0,0,1-.667.108.731.731,0,0,1-.406-.658V14.375h3.852a1.478,1.478,0,0,0,1.328-.821,1.326,1.326,0,0,0-.248-1.533l-.383-.383a.847.847,0,0,1-.25-.6V10.93a1.467,1.467,0,1,1,2.934,0v.105a.858.858,0,0,1-.249.6l-.384.383a1.327,1.327,0,0,0-.248,1.532,1.475,1.475,0,0,0,1.329.822h3.726V22.6A3.181,3.181,0,0,1,22.6,25.782H14.375Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Jigsaw </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Contributor </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://www.youtube.com/watch?v=eVkTIg2D7NY" project="Graph DBs and Laravel" position="Speaker" icon="conference" href="https://www.youtube.com/watch?v=eVkTIg2D7NY" title="Graph DBs and Laravel" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 25 26" fill="currentColor" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M0.49988 25C0.49988 25.2211 0.645096 25.4159 0.856974 25.4791C1.06885 25.5423 1.29708 25.4589 1.41819 25.2739L5.02906 19.759H21.6744C22.4925 19.759 23.277 19.4341 23.8554 18.8556C24.4338 18.2772 24.7588 17.4927 24.7588 16.6747L24.7588 3.58431C24.7588 2.76629 24.4338 1.98178 23.8554 1.40336C23.277 0.824938 22.4925 0.499983 21.6745 0.499983L12.6293 0.499982L3.5842 0.499981C2.76619 0.499981 1.98168 0.824936 1.40326 1.40336C0.824835 1.98178 0.49988 2.76629 0.49988 3.5843L0.49988 25ZM4.34048 18.9851L1.49988 23.3236L1.49988 3.5843C1.49988 3.03151 1.71948 2.50135 2.11037 2.11047C2.50125 1.71958 3.03141 1.49998 3.5842 1.49998L12.6293 1.49998L21.6745 1.49998C22.2273 1.49998 22.7574 1.71958 23.1483 2.11047C23.5392 2.50135 23.7588 3.03151 23.7588 3.58431L23.7588 16.6747C23.7588 17.2275 23.5392 17.7576 23.1483 18.1485C22.7574 18.5394 22.2272 18.759 21.6744 18.759H4.75879C4.59014 18.759 4.43286 18.844 4.34048 18.9851ZM15.2588 10.5L11.5088 12.6651L11.5088 8.33493L15.2588 10.5ZM15.7588 9.63398C16.4255 10.0189 16.4255 10.9811 15.7588 11.366L12.0088 13.5311C11.3421 13.916 10.5088 13.4349 10.5088 12.6651V8.33493C10.5088 7.56513 11.3421 7.08401 12.0088 7.46891L15.7588 9.63398Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Graph DBs and Laravel </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Speaker </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group hidden lg:block" projectUrl="https://typing.tighten.co/" project="Tighten Typing Challenge" position="Creator" icon="repo" href="https://typing.tighten.co/" title="Tighten Typing Challenge" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Tighten Typing Challenge </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Keith Damiani | Director of Engineering" > Keith<br>Damiani </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Keith Damiani | Director of Engineering" > Director of Engineering </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_11" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Marcy" lastName="Acevedo" position="Programmer" profileImage="/assets/images/bios/marcy.jpg" contributions="[{\"project_url\":\"https:\/\/github.com\/tighten\/laravelversions\",\"project_name\":\"Laravel Versions\",\"position\":\"Contributor\",\"icon\":\"repo\"},{\"project_url\":\"https:\/\/github.com\/tighten\/onramp\",\"project_name\":\"Onramp\",\"position\":\"Contributor\",\"icon\":\"repo\"},{\"project_url\":\"https:\/\/tighten.com\/insights\/ctrl-alt-del-force-quit-to-coding\/\",\"project_name\":\"Ctrl+Alt+Del - How I Force Quit My Old Career and Started Coding\",\"position\":\"Writer\",\"icon\":\"blog\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Marcy Acevedo | Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/marcy.jpg" alt="Marcy Acevedo" title="Marcy Acevedo | Programmer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Marcy Acevedo | Programmer" > Marcy<br>Acevedo </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Marcy Acevedo | Programmer" > Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/tighten/laravelversions" project="Laravel Versions" position="Contributor" icon="repo" href="https://github.com/tighten/laravelversions" title="Laravel Versions" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Laravel Versions </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Contributor </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/tighten/onramp" project="Onramp" position="Contributor" icon="repo" href="https://github.com/tighten/onramp" title="Onramp" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Onramp </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Contributor </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group hidden lg:block" projectUrl="https://tighten.com/insights/ctrl-alt-del-force-quit-to-coding/" project="Ctrl+Alt+Del - How I Force Quit My Old Career and Started Coding" position="Writer" icon="blog" href="https://tighten.com/insights/ctrl-alt-del-force-quit-to-coding/" title="Ctrl+Alt+Del - How I Force Quit My Old Career and Started Coding" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Ctrl+Alt+Del - How I Force Quit My Old Career and Started Coding </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Marcy Acevedo | Programmer" > Marcy<br>Acevedo </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Marcy Acevedo | Programmer" > Programmer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_12" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Mateus" lastName="Junges" position="Programmer" profileImage="/assets/images/bios/mateus.jpg" contributions="[{\"project_url\":\"https:\/\/github.com\/mateusjunges\/laravel-kafka\",\"project_name\":\"Laravel Kafka\",\"position\":\"Creator\",\"icon\":\"repo\"},{\"project_url\":\"https:\/\/github.com\/mateusjunges\/trackable-jobs-for-laravel\",\"project_name\":\"Trackable Jobs for Laravel\",\"position\":\"Creator\",\"icon\":\"repo\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Mateus Junges | Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/mateus.jpg" alt="Mateus Junges" title="Mateus Junges | Programmer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Mateus Junges | Programmer" > Mateus<br>Junges </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Mateus Junges | Programmer" > Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/mateusjunges/laravel-kafka" project="Laravel Kafka" position="Creator" icon="repo" href="https://github.com/mateusjunges/laravel-kafka" title="Laravel Kafka" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Laravel Kafka </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/mateusjunges/trackable-jobs-for-laravel" project="Trackable Jobs for Laravel" position="Creator" icon="repo" href="https://github.com/mateusjunges/trackable-jobs-for-laravel" title="Trackable Jobs for Laravel" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Trackable Jobs for Laravel </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Mateus Junges | Programmer" > Mateus<br>Junges </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Mateus Junges | Programmer" > Programmer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_13" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Molly" lastName="Fisher" position="Project Manager & Business Development Manager" profileImage="/assets/images/bios/molly.jpg" contributions="[{\"project_url\":\"https:\/\/twentypercent.fm\/episodes\/jeanne-henry-molly-fisher-meetings-dont-have-to-suck\",\"project_name\":\"Meetings Don't Have to Suck\",\"position\":\"Guest\",\"icon\":\"podcast\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Molly Fisher | Project Manager & Business Development Manager" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/molly.jpg" alt="Molly Fisher" title="Molly Fisher | Project Manager & Business Development Manager" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Molly Fisher | Project Manager & Business Development Manager" > Molly<br>Fisher </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Molly Fisher | Project Manager & Business Development Manager" > Project Manager & Business Development Manager </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://twentypercent.fm/episodes/jeanne-henry-molly-fisher-meetings-dont-have-to-suck" project="Meetings Don't Have to Suck" position="Guest" icon="podcast" href="https://twentypercent.fm/episodes/jeanne-henry-molly-fisher-meetings-dont-have-to-suck" title="Meetings Don't Have to Suck" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 22 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M11 0.5C7.08351 0.5 3.86818 3.50198 3.52948 7.33045C3.5104 7.38339 3.5 7.44048 3.5 7.5C3.5 7.53491 3.50358 7.56898 3.51039 7.60187C3.50349 7.73371 3.5 7.86645 3.5 8V10.5V13.5V14C3.5 17.8031 6.33064 20.945 10 21.4339V23.448C5.22334 22.9483 1.5 18.909 1.5 14V13C1.5 12.7239 1.27614 12.5 1 12.5C0.723858 12.5 0.5 12.7239 0.5 13V14C0.5 19.4617 4.67007 23.9494 10 24.453V27H4.5C4.22386 27 4 27.2239 4 27.5C4 27.7761 4.22386 28 4.5 28H10H12H17.5C17.7761 28 18 27.7761 18 27.5C18 27.2239 17.7761 27 17.5 27H12V24.453C17.3299 23.9494 21.5 19.4617 21.5 14V13C21.5 12.7239 21.2761 12.5 21 12.5C20.7239 12.5 20.5 12.7239 20.5 13V14C20.5 18.909 16.7767 22.9483 12 23.448V21.4339C15.6694 20.945 18.5 17.8031 18.5 14V8C18.5 3.85786 15.1421 0.5 11 0.5ZM8 14H4.5C4.5 17.5899 7.41015 20.5 11 20.5C14.5899 20.5 17.5 17.5898 17.5 14H14C13.7239 14 13.5 13.7761 13.5 13.5C13.5 13.2239 13.7239 13 14 13H17.5V11H14C13.7239 11 13.5 10.7761 13.5 10.5C13.5 10.2239 13.7239 10 14 10H17.5V8H14C13.7239 8 13.5 7.77614 13.5 7.5C13.5 7.22386 13.7239 7 14 7H17.4236C16.9425 3.88491 14.2498 1.5 11 1.5C7.75021 1.5 5.05745 3.88491 4.57645 7H8V8L4.5 8V10H8V11H4.5V13H8V14Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Meetings Don't Have to Suck </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Guest </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Molly Fisher | Project Manager & Business Development Manager" > Molly<br>Fisher </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Molly Fisher | Project Manager & Business Development Manager" > Project Manager & Business Development Manager </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_14" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Nico" lastName="Devs" position="Programmer" profileImage="/assets/images/bios/nico.jpg" contributions="[{\"project_url\":\"https:\/\/tighten.com\/insights\/state-management-in-vue-3-why-you-should-try-out-pinia\/\",\"project_name\":\"State management in Vue 3: Why you should try out Pinia\",\"position\":\"Writer\",\"icon\":\"blog\"},{\"project_url\":\"https:\/\/tighten.com\/insights\/use-htmx-to-create-laravel-single-page-apps-without-writing-javascript\/\",\"project_name\":\"Use HTMX to Create Laravel Single-Page Apps Without Writing JavaScript\",\"position\":\"Writer\",\"icon\":\"blog\"},{\"project_url\":\"https:\/\/tighten.com\/insights\/blazing-fast-full-text-search-in-laravel-from-mysql-to-typesense\/\",\"project_name\":\"From MySQL to Typesense: Blazing-Fast Full-Text Search in Laravel\",\"position\":\"Writer\",\"icon\":\"blog\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Nico Devs | Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/nico.jpg" alt="Nico Devs" title="Nico Devs | Programmer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Nico Devs | Programmer" > Nico<br>Devs </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Nico Devs | Programmer" > Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/state-management-in-vue-3-why-you-should-try-out-pinia/" project="State management in Vue 3: Why you should try out Pinia" position="Writer" icon="blog" href="https://tighten.com/insights/state-management-in-vue-3-why-you-should-try-out-pinia/" title="State management in Vue 3: Why you should try out Pinia" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> State management in Vue 3: Why you should try out Pinia </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/use-htmx-to-create-laravel-single-page-apps-without-writing-javascript/" project="Use HTMX to Create Laravel Single-Page Apps Without Writing JavaScript" position="Writer" icon="blog" href="https://tighten.com/insights/use-htmx-to-create-laravel-single-page-apps-without-writing-javascript/" title="Use HTMX to Create Laravel Single-Page Apps Without Writing JavaScript" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Use HTMX to Create Laravel Single-Page Apps Without Writing JavaScript </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group hidden lg:block" projectUrl="https://tighten.com/insights/blazing-fast-full-text-search-in-laravel-from-mysql-to-typesense/" project="From MySQL to Typesense: Blazing-Fast Full-Text Search in Laravel" position="Writer" icon="blog" href="https://tighten.com/insights/blazing-fast-full-text-search-in-laravel-from-mysql-to-typesense/" title="From MySQL to Typesense: Blazing-Fast Full-Text Search in Laravel" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> From MySQL to Typesense: Blazing-Fast Full-Text Search in Laravel </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Nico Devs | Programmer" > Nico<br>Devs </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Nico Devs | Programmer" > Programmer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_15" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Nohemi" lastName="Olvera" position="Designer" profileImage="/assets/images/bios/nohemi.jpg" contributions="[{\"project_url\":\"https:\/\/tighten.com\/insights\/flying-solo-my-experience-as-the-only-designer-at-a-programming-agency\/\",\"project_name\":\"Flying Solo\",\"position\":\"Writer\",\"icon\":\"blog\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Nohemi Olvera | Designer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/nohemi.jpg" alt="Nohemi Olvera" title="Nohemi Olvera | Designer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Nohemi Olvera | Designer" > Nohemi<br>Olvera </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Nohemi Olvera | Designer" > Designer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://tighten.com/insights/flying-solo-my-experience-as-the-only-designer-at-a-programming-agency/" project="Flying Solo" position="Writer" icon="blog" href="https://tighten.com/insights/flying-solo-my-experience-as-the-only-designer-at-a-programming-agency/" title="Flying Solo" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M22.6742 2.1564C23.0945 1.73611 23.6645 1.5 24.2589 1.5C24.8532 1.5 25.4233 1.73611 25.8436 2.1564C26.2638 2.57669 26.5 3.14672 26.5 3.74109C26.5 4.33546 26.2638 4.90549 25.8436 5.32578L13.666 17.5034L9.44011 18.5598L10.4966 14.334L22.6742 2.1564ZM24.2589 0.5C23.3993 0.5 22.5749 0.841471 21.9671 1.44929L9.69154 13.7248C9.62746 13.7889 9.582 13.8692 9.56002 13.9571L8.26786 19.1258C8.22526 19.2962 8.27519 19.4764 8.39938 19.6006C8.52357 19.7248 8.70381 19.7747 8.8742 19.7321L14.0428 18.4399C14.1308 18.418 14.2111 18.3725 14.2751 18.3084L26.5507 6.03288C27.1585 5.42506 27.5 4.60068 27.5 3.74109C27.5 2.8815 27.1585 2.05711 26.5507 1.44929C25.9428 0.841471 25.1185 0.5 24.2589 0.5ZM3.58432 3.24097C2.76631 3.24097 1.9818 3.56592 1.40338 4.14434C0.824954 4.72277 0.5 5.50728 0.5 6.32529V24.4156C0.5 25.2336 0.824955 26.0181 1.40338 26.5965C1.9818 27.1749 2.76631 27.4999 3.58432 27.4999H21.6746C22.4926 27.4999 23.2771 27.1749 23.8555 26.5965C24.434 26.0181 24.7589 25.2336 24.7589 24.4156V15.3704C24.7589 15.0943 24.5351 14.8704 24.2589 14.8704C23.9828 14.8704 23.7589 15.0943 23.7589 15.3704V24.4156C23.7589 24.9684 23.5393 25.4985 23.1484 25.8894C22.7575 26.2803 22.2274 26.4999 21.6746 26.4999H3.58432C3.03153 26.4999 2.50137 26.2803 2.11048 25.8894C1.7196 25.4985 1.5 24.9684 1.5 24.4156V6.32529C1.5 5.77249 1.7196 5.24234 2.11048 4.85145C2.50137 4.46056 3.03153 4.24097 3.58432 4.24097H12.6295C12.9056 4.24097 13.1295 4.01711 13.1295 3.74097C13.1295 3.46482 12.9056 3.24097 12.6295 3.24097H3.58432Z" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Flying Solo </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Writer </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Nohemi Olvera | Designer" > Nohemi<br>Olvera </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Nohemi Olvera | Designer" > Designer </p> </div> </div> </div> </div> </div> </div> <div x-ref="card_original_16" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Omar" lastName="Rida" position="Programmer" profileImage="/assets/images/bios/omar.jpg" contributions="null" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Omar Rida | Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/omar.jpg" alt="Omar Rida" title="Omar Rida | Programmer" > <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Omar Rida | Programmer" > Omar<br>Rida </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Omar Rida | Programmer" > Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> </div> </div> </div> </div> <div x-ref="card_original_17" class="team-card-animate-in" > <div class="group select-none cursor-pointer transition ease-in-out delay-50 duration-300" firstName="Tony" lastName="Messias" position="Lead Programmer" profileImage="/assets/images/bios/tony.jpg" contributions="[{\"project_url\":\"https:\/\/github.com\/tonysm\/turbo-laravel\",\"project_name\":\"Turbo Laravel\",\"position\":\"Creator\",\"icon\":\"repo\"},{\"project_url\":\"https:\/\/github.com\/tonysm\/importmap-laravel\",\"project_name\":\"Importmap Laravel\",\"position\":\"Creator\",\"icon\":\"repo\"},{\"project_url\":\"https:\/\/github.com\/tonysm\/rich-text-laravel\",\"project_name\":\"Rich Text Laravel\",\"position\":\"Creator\",\"icon\":\"repo\"}]" :class="front ? 'scale-100' : 'scale-105 shadow-2xl-dark'" x-data="{ front: true }" title="Tony Messias | Lead Programmer" x-cloak > <div class="aspect-w-7 aspect-h-8"> <div @click="front = ! front" > <div class="relative w-full h-full"> <img class="object-cover w-full h-full transition delay-50 duration-300 grayscale group-hover:grayscale-0" src="/assets/images/bios/tony.jpg" alt="Tony Messias" title="Tony Messias | Lead Programmer" > <div class="absolute z-10 cursor-pointer top-4 right-4 text-yellow"> <svg class="flex-shrink-0 w-8 h-8" role="img" aria-label="Tighten logo" id="icon-tighten-mark-filled" viewBox="0 0 104.8774 106.3796" > <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: currentColor" /> </svg> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-2 font-serif text-3xl text-white font-extralight text-shadow leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Tony Messias | Lead Programmer" > Tony<br>Messias </h3> <p class="font-mono text-sm font-bold tracking-widest uppercase word-spacing-tight text-yellow" title="Tony Messias | Lead Programmer" > Lead Programmer </p> </div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-b from-transparent to-black h-1/3 opacity-80"></div> </div> <div x-show="! front" x-transition:enter="transition-all duration-300 ease-out" x-transition:enter-start="opacity-0 clip-path-circle-closed" x-transition:enter-end="opacity-100 clip-path-circle-open" x-transition:leave="transition-all duration-300 ease-in" x-transition:leave-start="opacity-100 clip-path-circle-open" x-transition:leave-end="opacity-0 clip-path-circle-closed" class="absolute inset-0 z-20 h-full py-5 bg-yellow px-7" > <div class="font-mono font-bold word-spacing-tight tracking-widest uppercase text-sm leading-none text-yellow-800 pt-0.5"> Featured Contributions </div> <div class="flex flex-col pt-4 space-y-3"> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/tonysm/turbo-laravel" project="Turbo Laravel" position="Creator" icon="repo" href="https://github.com/tonysm/turbo-laravel" title="Turbo Laravel" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Turbo Laravel </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group" projectUrl="https://github.com/tonysm/importmap-laravel" project="Importmap Laravel" position="Creator" icon="repo" href="https://github.com/tonysm/importmap-laravel" title="Importmap Laravel" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Importmap Laravel </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> <a onclick="event.stopPropagation()" class="group hidden lg:block" projectUrl="https://github.com/tonysm/rich-text-laravel" project="Rich Text Laravel" position="Creator" icon="repo" href="https://github.com/tonysm/rich-text-laravel" title="Rich Text Laravel" > <div class="flex border border-black border-yellow-800 transition-colors hover:bg-yellow-400"> <div class="flex items-center justify-center flex-none text-black border-r border-black w-14"> <svg viewBox="0 0 28 31" fill="none" stroke="currentColor" class="w-8 h-8 md:w-10 md:h-10" aria-hidden="true" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3333 25.8624C3.66667 27.9312 3.66667 22.4144 1 21.7248M19.6667 30V24.6625C19.7167 24.0049 19.6308 23.3437 19.4147 22.7231C19.1986 22.1024 18.8572 21.5365 18.4133 21.0628C22.6 20.5801 27 18.9389 27 11.4085C26.9997 9.48289 26.2836 7.63115 25 6.23651C25.6078 4.55183 25.5648 2.68971 24.88 1.03695C24.88 1.03695 23.3067 0.554235 19.6667 3.07816C16.6107 2.22143 13.3893 2.22143 10.3333 3.07816C6.69333 0.554235 5.12 1.03695 5.12 1.03695C4.43517 2.68971 4.39219 4.55183 5 6.23651C3.70684 7.64149 2.99003 9.50997 3 11.4499C3 18.9251 7.4 20.5663 11.5867 21.1042C11.148 21.5731 10.8097 22.1323 10.5937 22.7453C10.3778 23.3584 10.2891 24.0116 10.3333 24.6625V30" /> </svg> </div> <div class="flex flex-col justify-center py-2 pl-3 pr-2 overflow-hidden md:py-3"> <div class="pb-1 font-mono text-lg font-semibold leading-none tracking-tight text-black truncate word-spacing-tight"> Rich Text Laravel </div> <div class="font-mono text-xs font-bold leading-none tracking-widest text-yellow-800 uppercase word-spacing-tight"> Creator </div> </div> </div> </a> </div> <div class="absolute z-10 bottom-4 left-7 right-7"> <h3 class="pb-1 font-serif text-3xl text-black sm:pb-2 font-extralight leading-tight-2 2xl:text-4xl 2xl:leading-tight-2" title="Tony Messias | Lead Programmer" > Tony<br>Messias </h3> <p class="font-mono text-sm font-bold tracking-widest text-yellow-800 uppercase word-spacing-tight" title="Tony Messias | Lead Programmer" > Lead Programmer </p> </div> </div> </div> </div> </div> </div> </div> </div> <script> let cardLoops = [ { position: 1, duration: 15000, delay: 7500, interval: null, flipped: false, }, { position: 2, duration: 15000, delay: 0, interval: null, flipped: false, }, { position: 3, duration: 15000, delay: 0, interval: null, flipped: false, }, { position: 4, duration: 15000, delay: 7500, interval: null, flipped: false, }, ]; document.addEventListener('alpine:init', () => { Alpine.data('teamCards', () => ({ init() { const totalCards = 18; const groupSize = 4; let randomCards = this.getLoopArray(totalCards, groupSize); cardLoops.forEach(loop => { this.swapCard(randomCards.shift(), loop.position); if (loop.delay) { setTimeout(() => { this.swapCard(randomCards.shift(), loop.position); this.startLoop(loop, randomCards); }, loop.delay); } else { this.startLoop(loop, randomCards); } }) }, startLoop(loop, randomCards) { loop.interval = setInterval(() => { if (! randomCards.length) { clearInterval(loop.interval); } else if (! loop.flipped) { this.swapCard(randomCards.shift(), loop.position); } }, loop.duration); }, swapCard(index, position) { let newCard = this.$refs['card_original_' + index].cloneNode(true); newCard.removeAttribute('x-ref'); let currentCard = this.$refs['card_' + position + '_current'].firstElementChild; if (currentCard) { currentCard.classList.remove('team-card-animate-in'); currentCard.classList.add('team-card-animate-out'); this.$refs['card_' + position + '_previous'].replaceChildren(currentCard); } this.$refs['card_' + position + '_current'].replaceChildren(newCard); }, getLoopArray(itemCount, iterations) { return this.removeAdjacentDuplicates( [...Array(iterations)].map(iteration => { return this.shuffle(this.getArrayOfIndices(itemCount)); }).flat() , 4); }, getArrayOfIndices(length) { return [...Array(length).keys()]; }, chunkArray(arr, size) { return arr.reduce((result, item, index) => { const chunkIndex = Math.floor(index / size); if (! result[chunkIndex]) { result[chunkIndex] = []; } result[chunkIndex].push(item); return result; }, []); }, shuffle(arr) { return arr.map(value => ({ value, sort: Math.random() })) .sort((a, b) => a.sort - b.sort) .map(({ value }) => value); }, removeAdjacentDuplicates(arr, chunkSize = 1) { // Do a reasonably good job of removing duplicates from // adjacent chunks of slides by comparing against the // previous 2 chunks. let chunks = this.chunkArray(arr, chunkSize); return chunks.map((chunk, index) => { return chunk.filter(item => { return typeof(chunks[index - 1]) != 'undefined' ? ! chunks[index - 1].includes(item) : true && typeof(chunks[index - 2]) != 'undefined' ? ! chunks[index - 2].includes(item) : true; }); }).flat(); }, markCardFlipped(position) { let card = cardLoops.find(loop => loop.position == position); if (card) { card.flipped = ! card.flipped; } }, })); }); </script> </div> </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 py-10 md:py-16 lg:py-24 bg-charcoal"> <div class="max-w-screen-2xl mx-auto flex flex-col items-center my-auto"> <div class="w-full max-w-screen-xl flex flex-col lg:-ml-16 lg:pr-2 2xl:-ml-20"> <div class="flex font-serif font-extralight"> <span class="text-7xl lg:text-10xl 2xl:text-11xl text-charcoal-70 -mt-4 lg:-mt-8 mr-1 lg:mr-2">“</span> <span class="text-white text-2xl sm:text-3xl lg:text-4xl 2xl:text-5xl leading-relaxed sm:leading-relaxed lg:leading-snug 2xl:leading-snug"> Tighten are true professionals. They’re calm under pressure. They’re the kind of people you want to survive a natural disaster with.” </span> </div> <div class="ml-8 lg:ml-16 flex justify-start items-center font-mono font-bold mt-2 sm:mt-4 lg:mt-8 2xl:mt-10 lg:mb-0 lg:pl-1 2xl:pl-4"> <img class="mr-5 object-cover rounded-full w-16 h-16 md:w-20 md:h-20" src="/assets/images/testimonial/testimonial-ben-holmen.jpg" alt="Photo of Ben Holmen" /> <div class="md:space-y-1"> <div class="text-md lg:text-lg text-yellow word-spacing-tight uppercase tracking-widest font-bold">Ben Holmen</div> <div class="text-sm text-charcoal-40 word-spacing-tight uppercase tracking-widest leading-tight font-bold">CTO, The Boutique Hub</div> </div> </div> </div> </div> </div> <div class="bg-cream-400"> <div class="px-6 md:px-16 lg:px-28 py-10 md:py-16 lg:py-24"> <div class="max-w-screen-2xl mx-auto flex flex-col xl:flex-row"> <div class="flex-1"> <div class="font-serif font-extralight text-charcoal-80 text-6xl lg:text-7xl xl:text-8xl pb-10"> Hey, <br class="hidden lg:block">let’s talk. </div> </div> <div class="flex-1 light"> <div x-data="contactForm()" class="py-0 mb-24 text-charcoal-80"> <div class="max-w-5xl mx-auto"> <form action="https://fieldgoal.io/f/AGz9ZcOcd0nXSBLM38wsGiiTkLhuaUxZ" method="POST" x-show="! submitted" @recaptcha-submitted.window="submitForm" > <div class="mb-20 grid grid-cols-2 gap-y-10 sm:gap-y-6 gap-x-10 sm:mb-12"> <div class="relative col-span-2 lg:col-span-1 text-charcoal-80 focus-within:text-black"> <label for="first_name" class="flex items-center justify-between absolute left-0 -bottom-8 sm:bottom-0 pb-2.5 block text-sm sm:text-lg font-serif" :class="hasError('first_name') ? 'w-full' : ''" > First name <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('first_name')" x-text="errors.first_name ?? 'Required'" x-cloak > Required </span> </label> <input id="first_name" class="block w-full py-1 pl-0 pr-0 mt-1 font-mono text-lg tracking-tight text-black bg-transparent border-t-0 rounded-none word-spacing-tighter border-x-0 border-b-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-b-yellow md:text-2xl selection:bg-charcoal-80 sm:pl-32 lg:pl-36 sm:py-2" :class="hasError('first_name') ? 'border-b-red focus:border-b-yellow' : 'border-b-charcoal-60 focus:border-b-yellow'" type="text" name="first_name" autocomplete="given-name" autocorrect="off" autocapitalize="sentences" spellcheck="false" x-model="form.first_name" @input="checkError('first_name')" @keyup.enter="submitForm" /> </div> <div class="relative col-span-2 lg:col-span-1 text-charcoal-80 focus-within:text-black"> <input id="url" class="absolute -mx-[86127px] font-mono word-spacing-tighter tracking-tight border-t-0 border-x-0 border-b-charcoal-60 mt-1 focus:outline-none focus:ring-transparent text-black focus:text-black focus:border-b-yellow block w-full text-lg md:text-2xl rounded-none bg-transparent selection:bg-charcoal-80 pl-0 sm:pl-32 lg:pl-36 pr-0 py-1 sm:py-2" type="text" name="url" tabindex="-1" autocomplete="off" aria-hidden="true" x-model="form.url" /> <label for="last_name" class="flex items-center justify-between absolute left-0 -bottom-8 sm:bottom-0 pb-2.5 block text-sm sm:text-lg font-serif" :class="hasError('last_name') ? 'w-full' : ''" > Last name <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('last_name')" x-text="errors.last_name ?? 'Required'" x-cloak > Required </span> </label> <input id="last_name" class="block w-full py-1 pl-0 pr-0 mt-1 font-mono text-lg tracking-tight text-black bg-transparent border-t-0 rounded-none word-spacing-tighter border-x-0 border-b-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-b-yellow md:text-2xl selection:bg-charcoal-80 sm:pl-32 lg:pl-36 sm:py-2" type="text" name="last_name" autocomplete="family-name" autocorrect="off" autocapitalize="sentences" spellcheck="false" x-model="form.last_name" @input="checkError('last_name')" @keyup.enter="submitForm" /> </div> <div class="relative col-span-2 text-charcoal-80 focus-within:text-black"> <label for="email" class="flex items-center justify-between absolute left-0 -bottom-8 sm:bottom-0 pb-2.5 block text-sm sm:text-lg font-serif" :class="hasError('email') ? 'w-full' : ''" > Email <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('email')" x-text="errors.email ?? 'Required'" x-cloak > Required </span> </label> <input id="email" class="block w-full py-1 pl-0 pr-0 mt-1 font-mono text-lg tracking-tight text-black bg-transparent border-t-0 rounded-none word-spacing-tighter border-x-0 border-b-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-b-yellow md:text-2xl selection:bg-charcoal-80 sm:pl-32 lg:pl-20 sm:py-2" type="email" name="email" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false" x-model="form.email" @input="checkError('email')" @keyup.enter="submitForm" /> </div> </div> <div class="flex mb-12 space-x-10"> <div class="relative w-full text-charcoal-80 focus-within:text-black"> <label for="message" class="flex items-center justify-between w-full font-serif text-sm sm:text-lg" > Tell us about your idea: <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('message')" x-text="errors.message ?? 'Required'" x-cloak > Required </span> </label> <textarea id="message" class="block w-full px-4 py-3 mt-3 font-mono tracking-tight text-black bg-transparent rounded-none word-spacing-tighter border-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-yellow md:text-lg lg:text-xl selection:bg-charcoal-80" rows="5" name="message" autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="false" x-model="form.message" @input="checkError('message')" ></textarea> </div> </div> <div class="flex mb-12 space-x-10"> <div class="relative w-full text-charcoal-80 focus-within:text-black"> <label for="how_did_you_hear_about_us" class="flex items-center justify-between w-full font-serif text-sm sm:text-lg" > How did you hear about us? <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('how_did_you_hear_about_us')" x-text="errors.how_did_you_hear_about_us ?? 'Required'" x-cloak > Required </span> </label> <select id="how_did_you_hear_about_us" x-model="form.how_did_you_hear_about_us" @input="checkError('how_did_you_hear_about_us')" name="how_did_you_hear_about_us" class="md:text-lg lg:text-xl font-mono tracking-tight text-black word-spacing-tighter block px-4 py-3 mt-3 bg-transparent w-full md:w-1/2 border-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-yellow" > <option hidden selected></option> <option value="laravel_community">Laravel community</option> <option value="laravel_partners">Laravel Partners</option> <option value="vuejs_partners">Vue.js Partners</option> <option value="google">Google</option> <option value="twitter">Twitter</option> <option value="linkedin">LinkedIn</option> <option value="word_of_mouth">Word of mouth</option> <option value="conference_or_event">Conference or event</option> <option value="referral">Referral</option> <option value="other">Other / not sure</option> </select> </div> </div> <div class="flex mb-12 space-x-10"> <div class="relative w-full text-charcoal-80 flex items-start items-center"> <label class="flex items-center cursor-pointer"> <input id="subscribe_to_newsletter" x-model="form.subscribe_to_newsletter" @input="checkError('subscribe_to_newsletter')" name="subscribe_to_newsletter" type="checkbox" class="cursor-pointer object-left align-middle h-8 w-8 text-yellow bg-transparent border-charcoal-60 focus:outline-none focus:ring-transparent hover:border-yellow focus:border-yellow checked:bg-yellow checked:border-yellow" /> <span class="object-left align-middle mx-4 font-serif text-sm sm:text-lg leading-tight text-wrap whitespace-normal">Sign me up to receive occasional email insights from Tighten</span> </label> </div> </div> <div class="flex mb-12 space-x-10"> <div class="relative w-full text-charcoal-40 text-xs"> <p>By submitting this form, you acknowledge our <a href="/privacy-policy" class="underline hover:text-yellow">Privacy Notice</a>.</p> <p> This site is protected by reCAPTCHA and the Google <a class="underline hover:text-yellow" href="https://policies.google.com/privacy">Privacy Policy</a> and <a class="underline hover:text-yellow" href="https://policies.google.com/terms">Terms of Service</a> apply. </p> </div> </div> <div class="flex justify-end w-full mt-10 mb-6"> <div class="flex"> <a class="rounded-full appearance-none cursor-pointer" aria-label="Submit" type="submit" @click.prevent.debounce="$refs.recaptchaTrigger.click()" @keyup.enter="$refs.recaptchaTrigger.click()" tabindex="0" x-bind:disabled="submitting"> <div class="text-sm md:text-base box-border transition-colors duration-300 font-mono word-spacing-tight font-bold tracking-widest rounded-full py-3 px-6 uppercase leading-none bg-yellow hover:bg-white text-black" > <span class="px-4">Send Message</span> </div> </a> </div> <input class="hidden g-recaptcha" type="submit" x-ref="recaptchaTrigger" data-sitekey="6LfHrMwpAAAAAHeFTMbG1xf52XD8Gx6gQG2RX15o" data-callback="onSubmit" /> </div> </form> <div x-show="submitted" x-cloak> <div class="py-12 font-serif text-center font-extralight"> <h1 class="mb-10 text-5xl sm:text-6xl text-yellow">Thank you!</h1> <p class="font-mono text-xl sm:text-2xl"> We appreciate your interest. <br class="hidden sm:block xl:hidden">We will get right back to you. </p> </div> </div> </div> <div x-show="! submitted" class="flex justify-start w-full -mb-3 -ml-2 sm:-ml-3"> <a href="https://fieldgoal.io/" class="flex items-center justify-center text-sm text-gray hover:text-yellow transition-colors"> <svg viewBox="0 0 27 28" fill="none" stroke="none" class="w-4 h-4 mr-2 sm:h-5 sm:w-5" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H24C25.3807 0.5 26.5 1.61929 26.5 3V5C26.5 6.38071 25.3807 7.5 24 7.5H3C1.61929 7.5 0.5 6.38071 0.5 5V3ZM3 1.5C2.17157 1.5 1.5 2.17157 1.5 3V5C1.5 5.82843 2.17157 6.5 3 6.5H24C24.8284 6.5 25.5 5.82843 25.5 5V3C25.5 2.17157 24.8284 1.5 24 1.5H3ZM0.5 13C0.5 11.6193 1.61929 10.5 3 10.5H17C18.3807 10.5 19.5 11.6193 19.5 13V15C19.5 16.3807 18.3807 17.5 17 17.5H3C1.61929 17.5 0.5 16.3807 0.5 15V13ZM3 11.5C2.17157 11.5 1.5 12.1716 1.5 13V15C1.5 15.8284 2.17157 16.5 3 16.5H17C17.8284 16.5 18.5 15.8284 18.5 15V13C18.5 12.1716 17.8284 11.5 17 11.5H3ZM3 20.5C1.61929 20.5 0.5 21.6193 0.5 23V25C0.5 26.3807 1.61929 27.5 3 27.5H8C9.38071 27.5 10.5 26.3807 10.5 25V23C10.5 21.6193 9.38071 20.5 8 20.5H3ZM1.5 23C1.5 22.1716 2.17157 21.5 3 21.5H8C8.82843 21.5 9.5 22.1716 9.5 23V25C9.5 25.8284 8.82843 26.5 8 26.5H3C2.17157 26.5 1.5 25.8284 1.5 25V23Z" /> </svg> Form by FieldGoal </a> </div> </div> <script> window.onSubmit = function (token) { window.dispatchEvent(new CustomEvent('recaptcha-submitted', { detail: token })); }; let contact_form_url = "https://fieldgoal.io/f/AGz9ZcOcd0nXSBLM38wsGiiTkLhuaUxZ"; document.addEventListener('alpine:init', () => { Alpine.data('contactForm', () => ({ form: { first_name: null, last_name: null, email: null, message: null, how_did_you_hear_about_us: null, subscribe_to_newsletter: null, url: null, 'g-recaptcha-response': null, }, errors: {}, submitting: false, submitted: false, hasError(field) { return this.errors.hasOwnProperty(field) && this.errors[field]; }, isSubmitted() { return this.submitted; }, formIsValid() { this.errors = {}; Object.keys(this.form) .filter(field => ['first_name', 'last_name', 'email', 'message'].includes(field)) .forEach(input => { this.validateInput(input); }); return Object.keys(this.errors).length == 0; }, validateInput(key) { if (! this.form[key]) { this.errors[key] = 'Required'; } else if (key === 'email' && !this.hasValidEmail()) { this.errors[key] = 'Email address invalid'; } else { // All validations passed, so remove key from error bag delete this.errors[key]; } return this.errors.hasOwnProperty(key); }, hasValidEmail() { if (!this.form.email || this.form.email.length === 0) { return true; } var email_regex = new RegExp( /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ); return email_regex.test(this.form.email); }, checkError(key) { if (this.errors.hasOwnProperty(key)) { // Only re-validate if it had an error already this.validateInput(key); } }, submitForm(event) { this.submitting = true; if (this.formIsValid()) { if (window.fathom) { window.fathom.trackGoal("8XHPBZYD", 0); } this.form['g-recaptcha-response'] = event.detail; axios({ method: 'post', headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest', }, url: contact_form_url, data: this.form, }).then(response => { this.submitted = true; this.submitting = false; }).catch(error => { this.submitted = true; this.submitting = false; if (error.response && error.response.data && error.response.data.errors) { this.errors = error.response.data.errors; } }); } grecaptcha.reset(); this.submitting = false; }, init() { window.addEventListener('load', (event) => { window.fathom.trackGoal("FB8Q5F8B", 0); }); }, })) }) </script> </div> </div> </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 py-10 md:py-16 lg:py-24 p-6 pt-24 text-white bg-black sm:p-12 md:p-0"> <div class="max-w-screen-2xl mx-auto flex flex-wrap w-full space-y-10 lg:space-y-0"> <div class="flex flex-col items-start w-full h-full space-y-2 lg:w-2/5 "> <div class="flex items-end justify-between w-full pb-4 md:pb-8"> <div class="w-64 lg:-mt-4 mr-8 lg:ml-[-38px]"> <svg id="tighten-logo-inverted" viewBox="0 0 864 188.9234" aria-hidden="true" > <g> <g id="type"> <path d="M193.71,67.6651v83.4585H174.2486V67.6651l-5.6137-5.6145H134.2037V44.4615h99.5511V62.0506H199.3237Z" style="fill: #fff"/> <path d="M306.8128,135.4044h25.8237v15.7192H248.8038V135.4044h31.4374l4.8652-4.8643V92.3659L280.2412,87.5H248.8038V71.7825h53.1438V130.54Z" style="fill: #fff"/> <path d="M412.6319,143.8263c-4.6788,5.0515-14.2219,9.9174-25.6366,9.9174-23.9522,0-40.9806-18.7136-40.9806-42.2915s17.0284-42.29,40.9806-42.29c11.4147,0,20.9578,4.8644,25.6366,9.9175h4.4909V71.97H436.21v74.4752c0,26.0109-21.7072,42.4786-47.9044,42.4786-18.7128,0-33.4962-5.9888-42.8521-16.0934l11.4146-13.4733c7.4853,8.0475,20.0228,13.2861,31.4375,13.2861,18.1513,0,28.8174-9.73,28.8174-25.2623v-3.5542ZM417.4971,119.5V103.4063C410.76,93.8632,401.9651,86.19,389.6147,86.19c-14.7826,0-23.9523,11.04-23.9523,25.2623s9.17,25.2623,23.9523,25.2623C401.9651,136.7145,410.76,129.0429,417.4971,119.5Z" style="fill: #fff"/> <path d="M482.3348,151.1236H463.2477V36.4156h19.0871V80.7641h4.4908a34.1458,34.1458,0,0,1,25.6366-11.6018c18.7128,0,32.1853,11.4147,32.1853,32.56v49.4017H525.5612V105.8393c0-11.04-3.5559-19.2751-15.9063-19.2751-11.2275,0-20.022,10.1062-27.32,21.3337Z" style="fill: #fff"/> <path d="M577.4013,87.8743H558.6886V71.7825h23.3907V44.4615h19.2742v27.321H640.65V87.8743H605.8444l-4.678,4.6788V114.26c0,13.66,5.0523,22.2678,18.1505,22.2678,11.6026,0,18.3385-6.1744,26.3852-16.84l11.4146,13.099c-9.1688,12.91-23.0164,20.9578-37.9861,20.9578-21.7072,0-37.0513-11.2275-37.0513-36.8641V92.5531Z" style="fill: #fff"/> <path d="M717.193,153.7437c-28.2559,0-47.53-18.3393-47.53-42.2915s19.2742-42.29,45.2843-42.29c31.6246,0,46.0337,24.888,46.0337,48.84h-67.74l-3.7423,2.62c3.5551,8.6074,12.35,15.9047,27.6945,15.9047,11.4146,0,21.3321-3.7414,31.8118-11.6018l9.356,12.7248C744.5131,148.6906,730.8535,153.7437,717.193,153.7437Zm19.4614-50.5246,1.6835-3.93C734.4085,91.9916,725.8,86.19,714.9472,86.19c-10.6661,0-20.7707,5.0531-25.0752,14.5963l3.3688,2.4329Z" style="fill: #fff"/> <path d="M801.6873,151.1236H782.6V71.7825h19.0871v8.9816h4.4908a34.1458,34.1458,0,0,1,25.6366-11.6018c18.7128,0,32.1853,11.4147,32.1853,32.56v49.4017H844.9137V105.8393c0-11.04-3.5558-19.2751-15.9063-19.2751-11.2275,0-20.022,10.1062-27.32,21.3337Z" style="fill: #fff"/> <rect x="281.0028" y="36.4156" width="21.1679" height="21.1679" style="fill: #fff"/> </g> <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: #ffbc00"/> </g> </svg> </div> <div class="flex mb-3 lg:hidden space-x-5 text-gray"> <a class="text-charcoal-50 hover:text-white" href="https://twitter.com/TightenCo" role="link" aria-label="Twitter"> <svg viewBox="0 0 20 17" fill="none" stroke="none" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M17.6439514,2.67547417 C18.4915185,2.14746831 19.1418677,1.31023678 19.4470858,0.312892365 C18.6535188,0.803008922 17.7766039,1.15745731 16.8409931,1.34934833 C16.0943828,0.51822798 15.0272935,0 13.8463344,0 C11.5806773,0 9.74467336,1.91279903 9.74467336,4.27171413 C9.74467336,4.60660674 9.77871691,4.9329437 9.84915185,5.24461383 C6.44010096,5.0661674 3.4172683,3.36725964 1.3922639,0.781008678 C1.0389153,1.41412682 0.83700182,2.14746831 0.83700182,2.92969922 C0.83700182,4.41104901 1.56130774,5.71884132 2.66244057,6.4864054 C1.98978693,6.46440516 1.35704643,6.27006967 0.802958267,5.95228836 L0.802958267,6.0048445 C0.802958267,8.07531195 2.21635264,9.80233114 4.09579151,10.1934466 C3.75066033,10.2936699 3.38909432,10.3437816 3.01344133,10.3437816 C2.74931032,10.3437816 2.49104889,10.3181146 2.24217879,10.268003 C2.76339731,11.9644663 4.27892235,13.2013689 6.07501321,13.2343693 C4.66983624,14.3808265 2.90074544,15.062834 0.979045607,15.062834 C0.648001409,15.062834 0.320478958,15.0445005 0,15.0041667 C1.81604743,16.2154024 3.97253038,16.9230769 6.28983976,16.9230769 C13.838117,16.9230769 17.9632564,10.413449 17.9632564,4.76794187 C17.9632564,4.58216202 17.9609086,4.39760442 17.9526912,4.21549128 C18.7544756,3.61292903 19.4517814,2.86003178 20,2.00324448 C19.2639549,2.34302603 18.4727358,2.57280636 17.6439514,2.67547417 Z" /> </svg> </a> <a class="text-charcoal-50 hover:text-white" href="https://github.com/tighten" role="link" aria-label="Github"> <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M9.99907916,0 C4.47773105,0 0,4.47711716 0,10.0003069 C0,14.4184904 2.86503576,18.1663034 6.83876117,19.4886276 C7.33908346,19.5807115 7.5214095,19.2719236 7.5214095,19.0067221 C7.5214095,18.7697597 7.512815,18.14052 7.50790386,17.3062402 C4.72635747,17.9103103 4.13947635,15.9654992 4.13947635,15.9654992 C3.68458209,14.8101538 3.02894503,14.5025937 3.02894503,14.5025937 C2.12099819,13.8825624 3.09770097,13.8948402 3.09770097,13.8948402 C4.10141502,13.9654379 4.62936247,14.9255655 4.62936247,14.9255655 C5.52134811,16.4535437 6.97013414,16.0121551 7.53982627,15.7561619 C7.63068234,15.1103472 7.88913104,14.6695724 8.17459099,14.4197182 C5.95414224,14.1674085 3.6195095,13.3091869 3.6195095,9.47727063 C3.6195095,8.38576997 4.00933116,7.49255655 4.64900703,6.79394702 C4.54587311,6.54102336 4.20270727,5.52380368 4.74722981,4.14745695 C4.74722981,4.14745695 5.5864207,3.87857209 7.4968538,5.17265723 C8.29430001,4.95042819 9.15006599,4.83992756 10.0003069,4.83563031 C10.849934,4.83992756 11.7050861,4.95042819 12.5037601,5.17265723 C14.4129654,3.87857209 15.2509285,4.14745695 15.2509285,4.14745695 C15.7966788,5.52380368 15.453513,6.54102336 15.350993,6.79394702 C15.9918966,7.49255655 16.3786488,8.38576997 16.3786488,9.47727063 C16.3786488,13.3190092 14.0403327,14.164339 11.8131312,14.4117376 C12.1716443,14.7205255 12.4914822,15.3307345 12.4914822,16.2638509 C12.4914822,17.6002947 12.4792044,18.6789036 12.4792044,19.0067221 C12.4792044,19.2743792 12.6596888,19.5856226 13.1667639,19.4880138 C17.1374198,18.1626201 20,14.4172627 20,10.0003069 C20,4.47711716 15.5222689,0 9.99907916,0" /> </svg> </a> <a class="text-charcoal-50 hover:text-white" href="https://www.linkedin.com/company/tightenco" role="link" aria-label="Linked in"> <svg viewBox="0 0 20 20" fill="none" stroke="none" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M0.504468485,6.41311307 L4.40263405,6.41311307 L4.40263405,19.9987194 L0.504468485,19.9987194 L0.504468485,6.41311307 Z M2.35418627,4.71379178 L2.32596425,4.71379178 C0.914863594,4.71379178 0,3.67524651 0,2.36009732 C0,1.01805609 0.94190969,0 2.38123236,0 C3.81937912,0 4.70366886,1.01549494 4.73189087,2.3562556 C4.73189087,3.67140479 3.81937912,4.71379178 2.35418627,4.71379178 L2.35418627,4.71379178 Z M20,20 L15.5797272,20 L15.5797272,12.9683698 C15.5797272,11.1281854 14.8882879,9.8732232 13.3678269,9.8732232 C12.2048448,9.8732232 11.5580903,10.7196824 11.2570555,11.537969 C11.1441675,11.8299398 11.1618062,12.2384428 11.1618062,12.6482264 L11.1618062,20 L6.7826905,20 C6.7826905,20 6.83913452,7.54514022 6.7826905,6.41311307 L11.1618062,6.41311307 L11.1618062,8.54526828 C11.420508,7.61301063 12.8198495,6.28249456 15.0529163,6.28249456 C17.8233772,6.28249456 20,8.23793059 20,12.4446152 L20,20 L20,20 Z" /> </svg> </a> </div> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://duckduckgo.com/?q=Directions+to+1807+W.+Sunnyside%2C+Chicago%2C+IL&t=h_&ia=directions&iaxm=directions&end=what%3A1807%2520W%2520Sunnyside%2520Ave%2Cwhere%3AChicago%252C%2520IL%2520%252060640%252C%2520United%2520States&transport=drive"> 1807 W. Sunnyside, Suite 1G </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://duckduckgo.com/?q=Directions+to+1807+W.+Sunnyside%2C+Chicago%2C+IL&t=h_&ia=directions&iaxm=directions&end=what%3A1807%2520W%2520Sunnyside%2520Ave%2Cwhere%3AChicago%252C%2520IL%2520%252060640%252C%2520United%2520States&transport=drive"> Chicago, IL 60640 </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="tel:+13124487405"> (312) 448-7405 </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="mailto:hello@tighten.co"> hello@tighten.co </a> </div> <div class="hidden pt-3 lg:flex space-x-6 text-gray"> <a class="text-charcoal-50 hover:text-white" href="https://twitter.com/TightenCo" role="link" aria-label="Twitter"> <svg viewBox="0 0 20 17" fill="none" stroke="none" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M17.6439514,2.67547417 C18.4915185,2.14746831 19.1418677,1.31023678 19.4470858,0.312892365 C18.6535188,0.803008922 17.7766039,1.15745731 16.8409931,1.34934833 C16.0943828,0.51822798 15.0272935,0 13.8463344,0 C11.5806773,0 9.74467336,1.91279903 9.74467336,4.27171413 C9.74467336,4.60660674 9.77871691,4.9329437 9.84915185,5.24461383 C6.44010096,5.0661674 3.4172683,3.36725964 1.3922639,0.781008678 C1.0389153,1.41412682 0.83700182,2.14746831 0.83700182,2.92969922 C0.83700182,4.41104901 1.56130774,5.71884132 2.66244057,6.4864054 C1.98978693,6.46440516 1.35704643,6.27006967 0.802958267,5.95228836 L0.802958267,6.0048445 C0.802958267,8.07531195 2.21635264,9.80233114 4.09579151,10.1934466 C3.75066033,10.2936699 3.38909432,10.3437816 3.01344133,10.3437816 C2.74931032,10.3437816 2.49104889,10.3181146 2.24217879,10.268003 C2.76339731,11.9644663 4.27892235,13.2013689 6.07501321,13.2343693 C4.66983624,14.3808265 2.90074544,15.062834 0.979045607,15.062834 C0.648001409,15.062834 0.320478958,15.0445005 0,15.0041667 C1.81604743,16.2154024 3.97253038,16.9230769 6.28983976,16.9230769 C13.838117,16.9230769 17.9632564,10.413449 17.9632564,4.76794187 C17.9632564,4.58216202 17.9609086,4.39760442 17.9526912,4.21549128 C18.7544756,3.61292903 19.4517814,2.86003178 20,2.00324448 C19.2639549,2.34302603 18.4727358,2.57280636 17.6439514,2.67547417 Z" /> </svg> </a> <a class="text-charcoal-50 hover:text-white" href="https://github.com/tighten" role="link" aria-label="Github"> <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M9.99907916,0 C4.47773105,0 0,4.47711716 0,10.0003069 C0,14.4184904 2.86503576,18.1663034 6.83876117,19.4886276 C7.33908346,19.5807115 7.5214095,19.2719236 7.5214095,19.0067221 C7.5214095,18.7697597 7.512815,18.14052 7.50790386,17.3062402 C4.72635747,17.9103103 4.13947635,15.9654992 4.13947635,15.9654992 C3.68458209,14.8101538 3.02894503,14.5025937 3.02894503,14.5025937 C2.12099819,13.8825624 3.09770097,13.8948402 3.09770097,13.8948402 C4.10141502,13.9654379 4.62936247,14.9255655 4.62936247,14.9255655 C5.52134811,16.4535437 6.97013414,16.0121551 7.53982627,15.7561619 C7.63068234,15.1103472 7.88913104,14.6695724 8.17459099,14.4197182 C5.95414224,14.1674085 3.6195095,13.3091869 3.6195095,9.47727063 C3.6195095,8.38576997 4.00933116,7.49255655 4.64900703,6.79394702 C4.54587311,6.54102336 4.20270727,5.52380368 4.74722981,4.14745695 C4.74722981,4.14745695 5.5864207,3.87857209 7.4968538,5.17265723 C8.29430001,4.95042819 9.15006599,4.83992756 10.0003069,4.83563031 C10.849934,4.83992756 11.7050861,4.95042819 12.5037601,5.17265723 C14.4129654,3.87857209 15.2509285,4.14745695 15.2509285,4.14745695 C15.7966788,5.52380368 15.453513,6.54102336 15.350993,6.79394702 C15.9918966,7.49255655 16.3786488,8.38576997 16.3786488,9.47727063 C16.3786488,13.3190092 14.0403327,14.164339 11.8131312,14.4117376 C12.1716443,14.7205255 12.4914822,15.3307345 12.4914822,16.2638509 C12.4914822,17.6002947 12.4792044,18.6789036 12.4792044,19.0067221 C12.4792044,19.2743792 12.6596888,19.5856226 13.1667639,19.4880138 C17.1374198,18.1626201 20,14.4172627 20,10.0003069 C20,4.47711716 15.5222689,0 9.99907916,0" /> </svg> </a> <a class="text-charcoal-50 hover:text-white" href="https://www.linkedin.com/company/tightenco" role="link" aria-label="Linked in"> <svg viewBox="0 0 20 20" fill="none" stroke="none" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M0.504468485,6.41311307 L4.40263405,6.41311307 L4.40263405,19.9987194 L0.504468485,19.9987194 L0.504468485,6.41311307 Z M2.35418627,4.71379178 L2.32596425,4.71379178 C0.914863594,4.71379178 0,3.67524651 0,2.36009732 C0,1.01805609 0.94190969,0 2.38123236,0 C3.81937912,0 4.70366886,1.01549494 4.73189087,2.3562556 C4.73189087,3.67140479 3.81937912,4.71379178 2.35418627,4.71379178 L2.35418627,4.71379178 Z M20,20 L15.5797272,20 L15.5797272,12.9683698 C15.5797272,11.1281854 14.8882879,9.8732232 13.3678269,9.8732232 C12.2048448,9.8732232 11.5580903,10.7196824 11.2570555,11.537969 C11.1441675,11.8299398 11.1618062,12.2384428 11.1618062,12.6482264 L11.1618062,20 L6.7826905,20 C6.7826905,20 6.83913452,7.54514022 6.7826905,6.41311307 L11.1618062,6.41311307 L11.1618062,8.54526828 C11.420508,7.61301063 12.8198495,6.28249456 15.0529163,6.28249456 C17.8233772,6.28249456 20,8.23793059 20,12.4446152 L20,20 L20,20 Z" /> </svg> </a> </div> </div> <div class="flex flex-col w-full space-y-2 lg:w-1/5"> <div class="pb-5 -mt-2 font-serif text-3xl font-light text-charcoal-10">Work</div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/services/"> Services </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/manifesto/"> Manifesto </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/results/"> Results </a> </div> </div> <div class="flex flex-col w-full space-y-2 lg:w-1/5"> <div class="pb-5 -mt-2 font-serif text-3xl font-light text-charcoal-10">Company</div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/about/"> About </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/team/"> Team </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/insights/"> Blog </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/careers/"> Careers </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/contact/"> Contact </a> </div> </div> <div class="flex flex-col w-full space-y-2 lg:w-1/5"> <div class="pb-5 -mt-2 font-serif text-3xl font-light text-charcoal-10">Community</div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://laravelpodcast.com/"> The Laravel Podcast </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://businessoflaravel.com/"> The Business of Laravel Podcast </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://twentypercent.fm/"> Twenty Percent Time Podcast </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://onramp.dev/"> Laravel Onramp </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://novapackages.com/"> Nova Packages </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://laravel-tricks.com/"> Laravel Tricks </a> </div> </div> </div> </div> <div class="px-6 py-10 text-xs lg:py-8 md:px-16 lg:px-28 bg-charcoal text-gray sm:text-sm"> <div class="max-w-screen-2xl mx-auto"> <div class="flex flex-col items-center justify-between w-full lg:flex-row"> <div class="flex items-center"> <div>©2024 Tighten Co.</div> <span class="mx-3">·</span> <a class="underline hover:text-white" href="/privacy-policy/">Privacy Policy</a> </div> <div class="flex items-center order-first pb-3 lg:pb-0 lg:order-last"> <a href="https://jigsaw.tighten.com/" class="flex items-center justify-center text-sm text-gray hover:text-yellow transition-colors" > <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-5 h-5 mr-2 sm:h-6 sm:w-6" aria-hidden="true" > <path fill="currentColor" d="M22.6,1.218H5.4A4.182,4.182,0,0,0,1.218,5.4V22.6A4.182,4.182,0,0,0,5.4,26.782H22.6A4.182,4.182,0,0,0,26.782,22.6V5.4A4.182,4.182,0,0,0,22.6,1.218Zm0,1A3.181,3.181,0,0,1,25.782,5.4v8.229H22.056a.733.733,0,0,1-.659-.407.578.578,0,0,1,.108-.666l.385-.384a1.616,1.616,0,0,0,.468-1.133V10.93a2.217,2.217,0,1,0-4.434,0v.105a1.593,1.593,0,0,0,.469,1.133l.382.383a.577.577,0,0,1,.11.667.733.733,0,0,1-.658.407H14.375V9.774a1.476,1.476,0,0,0-.821-1.329,1.325,1.325,0,0,0-1.533.248l-.383.383a.857.857,0,0,1-.6.25H10.93a1.467,1.467,0,1,1,0-2.934h.105a.857.857,0,0,1,.6.25l.383.382a1.326,1.326,0,0,0,1.533.249,1.476,1.476,0,0,0,.821-1.329V2.218ZM13.625,5.944a.733.733,0,0,1-.407.659.574.574,0,0,1-.666-.109l-.383-.383a1.617,1.617,0,0,0-1.134-.469H10.93a2.217,2.217,0,1,0,0,4.434h.105a1.614,1.614,0,0,0,1.134-.47l.383-.382a.577.577,0,0,1,.667-.108.731.731,0,0,1,.406.658v3.851H9.773a1.478,1.478,0,0,0-1.328.821,1.326,1.326,0,0,0,.248,1.533l.383.383a.847.847,0,0,1,.25.6v.105a1.467,1.467,0,1,1-2.934,0v-.105a.858.858,0,0,1,.249-.6l.384-.383a1.327,1.327,0,0,0,.248-1.532,1.475,1.475,0,0,0-1.329-.822H2.218V5.4A3.181,3.181,0,0,1,5.4,2.218h8.229ZM5.4,25.782A3.181,3.181,0,0,1,2.218,22.6V14.375H5.944a.733.733,0,0,1,.659.407.578.578,0,0,1-.108.666l-.385.384a1.616,1.616,0,0,0-.468,1.133v.105a2.217,2.217,0,1,0,4.434,0v-.105a1.593,1.593,0,0,0-.469-1.133l-.382-.383a.577.577,0,0,1-.11-.667.733.733,0,0,1,.658-.407h3.852v3.851a1.476,1.476,0,0,0,.821,1.329,1.326,1.326,0,0,0,1.533-.248l.383-.383a.857.857,0,0,1,.6-.25h.105a1.467,1.467,0,1,1,0,2.934h-.105a.857.857,0,0,1-.6-.25l-.383-.382a1.324,1.324,0,0,0-1.533-.249,1.476,1.476,0,0,0-.821,1.329v3.726Zm8.979-3.726a.733.733,0,0,1,.407-.659.578.578,0,0,1,.666.109l.383.383a1.617,1.617,0,0,0,1.134.469h.105a2.217,2.217,0,1,0,0-4.434h-.105a1.614,1.614,0,0,0-1.134.47l-.383.382a.574.574,0,0,1-.667.108.731.731,0,0,1-.406-.658V14.375h3.852a1.478,1.478,0,0,0,1.328-.821,1.326,1.326,0,0,0-.248-1.533l-.383-.383a.847.847,0,0,1-.25-.6V10.93a1.467,1.467,0,1,1,2.934,0v.105a.858.858,0,0,1-.249.6l-.384.383a1.327,1.327,0,0,0-.248,1.532,1.475,1.475,0,0,0,1.329.822h3.726V22.6A3.181,3.181,0,0,1,22.6,25.782H14.375Z" /> </svg> Built with Jigsaw </a> <span class="mx-3">·</span> <a href="https://fieldgoal.io/" class="flex items-center justify-center text-sm text-gray hover:text-yellow transition-colors" > <svg viewBox="0 0 27 28" fill="none" stroke="none" class="w-4 h-4 mr-2 sm:h-5 sm:w-5" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H24C25.3807 0.5 26.5 1.61929 26.5 3V5C26.5 6.38071 25.3807 7.5 24 7.5H3C1.61929 7.5 0.5 6.38071 0.5 5V3ZM3 1.5C2.17157 1.5 1.5 2.17157 1.5 3V5C1.5 5.82843 2.17157 6.5 3 6.5H24C24.8284 6.5 25.5 5.82843 25.5 5V3C25.5 2.17157 24.8284 1.5 24 1.5H3ZM0.5 13C0.5 11.6193 1.61929 10.5 3 10.5H17C18.3807 10.5 19.5 11.6193 19.5 13V15C19.5 16.3807 18.3807 17.5 17 17.5H3C1.61929 17.5 0.5 16.3807 0.5 15V13ZM3 11.5C2.17157 11.5 1.5 12.1716 1.5 13V15C1.5 15.8284 2.17157 16.5 3 16.5H17C17.8284 16.5 18.5 15.8284 18.5 15V13C18.5 12.1716 17.8284 11.5 17 11.5H3ZM3 20.5C1.61929 20.5 0.5 21.6193 0.5 23V25C0.5 26.3807 1.61929 27.5 3 27.5H8C9.38071 27.5 10.5 26.3807 10.5 25V23C10.5 21.6193 9.38071 20.5 8 20.5H3ZM1.5 23C1.5 22.1716 2.17157 21.5 3 21.5H8C8.82843 21.5 9.5 22.1716 9.5 23V25C9.5 25.8284 8.82843 26.5 8 26.5H3C2.17157 26.5 1.5 25.8284 1.5 25V23Z" /> </svg> Forms by FieldGoal </a> </div> </div> </div> </div> </div> <script src="/assets/build/js/home.js?id=7321fd66b298b965fe31"></script> </body> </html>

CINXE.COM

Tighten | Software Development for Web and Mobile | Laravel, Livewire, Vue.js, and React