CINXE.COM
Home | Trys Mudford
<!DOCTYPE html> <html lang="en"> <head> <meta name="generator" content="Hugo 0.85.0" /> <meta charset="UTF-8" /> <script> try { var currentColorScheme = localStorage.getItem('darkMode'); if (currentColorScheme === null) { currentColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? '1' : '0'; localStorage.setItem('darkMode', currentColorScheme); } document.documentElement.classList.toggle('dark', currentColorScheme === '1'); } catch(e){} </script> <link rel="stylesheet" href="/css/main.min.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Home | Trys Mudford</title> <meta name="description" content="My core skills are in semantic HTML & CSS, progressively enhanced JS, PWA's, web performance, Vue.js & React, static site generation and generally putting the user first." /> <meta property="og:url" content="https://www.trysmudford.com/" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Home | Trys Mudford" /> <meta property="og:description" content="My core skills are in semantic HTML & CSS, progressively enhanced JS, PWA's, web performance, Vue.js & React, static site generation and generally putting the user first." /> <meta property="og:image" content="https://www.trysmudford.com/images/og-2019.jpg" /> <meta property="og:image:alt" content="Trys Mudford" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="Home | Trys Mudford" /> <meta name="twitter:description" content="My core skills are in semantic HTML & CSS, progressively enhanced JS, PWA's, web performance, Vue.js & React, static site generation and generally putting the user first." /> <meta name="twitter:image" content="https://www.trysmudford.com/images/og-2019.jpg" /><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#4cacc1"> <meta name="apple-mobile-web-app-title" content="Trys Mudford"> <meta name="application-name" content="Trys Mudford"> <meta name="msapplication-TileColor" content="#00aba9"> <meta name="theme-color" content="#4cacc1"> <link rel="preload" href="/fonts/1475544/ccd17c6b-e7ed-4b73-b0d2-76712a4ef46b-subset.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/fonts/1475520/9bdf0737-f98c-477a-9365-ffc41b9d1285-subset.woff2" as="font" type="font/woff2" crossorigin> <link rel="alternate" type="application/rss+xml" href="https://www.trysmudford.com/blog/index.xml" title="Trys Mudford RSS Feed" /> <meta property="fediverse:creator" content="@trys@mastodon.social" /> <meta name="google-site-verification" content="EfIAP45Gb1zC-MLOmyAuEn5IYVnuZXsi8Bs2CbeEdmo" /></head> <body> <header role="banner" class="top"> <nav class="wrap"> <a href="/">Trys Mudford</a> <a href="/about/">About</a> <a href="/blog/">Blog</a> <button type="button" aria-label="Toggle Dark Mode" class="dark-mode-toggle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 18a5 5 0 0 0-10 0"></path> <line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line> <line x1="1" y1="18" x2="3" y2="18"></line> <line x1="21" y1="18" x2="23" y2="18"></line> <line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line> <line x1="23" y1="22" x2="1" y2="22"></line> <line class="light-only" x1="12" y1="9" x2="12" y2="2"></line> <polyline class="light-only" points="16 5 12 9 8 5"></polyline> <line class="dark-only" x1="12" y1="2" x2="12" y2="9"></line> <polyline class="dark-only" points="8 6 12 2 16 6"></polyline> </svg> </button> </nav> </header> <main role="main" class="main "> <div class="opening"> <div class="wrap"> <div class="opening__content"> <h1 id="hey-im-trys">Hey, I’m Trys.</h1> <p>I build for the web at <a href="https://motorway.co.uk">Motorway</a>, sitting at the intersection between <a href="/blog/i-think-im-a-design-engineer/">design and engineering</a>.</p> <p>My 9-5 involves writing React/Typescript/Next.js, contributing to design systems & advocating for the user. My 5-9 includes growing an open-source <a href="https://utopia.fyi">fluid responsive design</a> project, <a href="/#side-projects">tinkering</a> with web API’s and <a href="/blog/">writing</a> on this website. My weekends are spent with my <a href="https://instagram.com/trysmudford">amazing family</a>.</p> <p><a href="/about/">More →</a></p> </div> <figure class="home-image"> <div class="home-image__cover"> <picture> <source srcset="images/trysmudford-2019.avif" type="image/avif" /> <source srcset="images/trysmudford-2019.webp" type="image/webp" /> <img src="images/trysmudford-2019.jpg" alt="Trys Mudford" width="512" height="512" /> </picture> </div> </figure> </div> </div> <section class="side-projects"> <div class="insulate wrap"> <header class="center"> <h1 class="p-name" id="side-projects">Side projects</h1> </header> <div class="projects"> <article> <picture> <source srcset="/images/projects/utopia.avif" type="image/avif" /> <source srcset="/images/projects/utopia.webp" type="image/webp" /> <img src="/images/projects/utopia.png" alt="Utopia screenshot" loading="lazy" width="1200" height="600" /> </picture> <div class="project-content"> <h2> <a href="https://utopia.fyi">Utopia</a> </h2> <p> Elegantly scale type and space without breakpoints. </p> </div> </article> <article> <picture> <source srcset="/images/projects/journalbook.avif" type="image/avif" /> <source srcset="/images/projects/journalbook.webp" type="image/webp" /> <img src="/images/projects/journalbook.jpg" alt="Journalbook logo" loading="lazy" width="1200" height="600" /> </picture> <div class="project-content"> <h2> <a href="https://journalbook.co.uk">Journalbook</a> </h2> <p> A private, offline-first, personal journal. </p> </div> </article> <article> <picture> <source srcset="/images/projects/sergey.avif" type="image/avif" /> <source srcset="/images/projects/sergey.webp" type="image/webp" /> <img src="/images/projects/sergey.jpg" alt="Sergey logo" loading="lazy" width="1200" height="600" /> </picture> <div class="project-content"> <h2> <a href="https://sergey.trysmudford.com">Sergey</a> </h2> <p> A very little static site generator with HTML + include files + slots + markdown. </p> </div> </article> <article> <picture> <source srcset="/images/projects/pedalboard.avif" type="image/avif" /> <source srcset="/images/projects/pedalboard.webp" type="image/webp" /> <img src="/images/projects/pedalboard.jpg" alt="Pedalboard screenshot" loading="lazy" width="1200" height="600" /> </picture> <div class="project-content"> <h2> <a href="https://pedalboard.netlify.app/">JS Pedalboard</a> </h2> <p> A Web Audio/MIDI experiment of 9 guitar effects, including delay, reverb, overdrive and a looper. </p> </div> </article> </div> </div> </section> <section class="feed"> <div class="insulate wrap"> <header class="center"> <h1 class="p-name"><a href="/blog/">Latest articles</a></h1> </header> <div class="posts"> <article class="post post--article"> <h2> <a href="/blog/light-dark/"> Implementing light-dark() </a> </h2> <a class="categories" href="/categories/web/">Web</a> </article> <article class="post post--article"> <h2> <a href="/blog/testing-knarly-hooks/"> Testing knarly React hooks </a> </h2> <a class="categories" href="/categories/web/">Web</a> </article> <article class="post post--article"> <h2> <a href="/blog/january-digital-gardening/"> January Digital Gardening </a> </h2> <a class="categories" href="/categories/web/">Web</a> </article> <article class="post post--article"> <h2> <a href="/blog/2024-wrapped/"> 2024 Wrapped </a> </h2> <a class="categories" href="/categories/life/">Life</a> </article> </div> </div> </section> </main> <footer role="contentinfo" class="low"> <nav class="wrap"> <a href="https://photography.trysmudford.com" rel="me">Photography</a> <a href="https://github.com/trys" rel="me">GitHub</a> <a href="https://instagram.com/trysmudford" rel="me">IG</a> <a href="https://mastodon.social/@trys" rel="me">Mastodon</a> <a href="https://bsky.app/profile/trysmudford.com" rel="me">Bluesky</a> </nav> </footer> <script> if (navigator.serviceWorker) { navigator.serviceWorker.register('/sw.js', { scope: '/' }); window.addEventListener('load', function() { if (navigator.serviceWorker.controller) { navigator.serviceWorker.controller.postMessage({'command': 'trimCaches'}); } }); } </script> <script> var darkModeToggle = document.querySelector('.dark-mode-toggle'); if (darkModeToggle) { darkModeToggle.addEventListener('click', function() { var hasDarkMode = localStorage.getItem('darkMode') === '1'; localStorage.setItem('darkMode', hasDarkMode ? 0 : 1); document.documentElement.classList.toggle('dark', !hasDarkMode); }); } </script> <!-- Google tag (gtag.js) --> <script async defer src="https://www.googletagmanager.com/gtag/js?id=G-G7495M9DS4"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-G7495M9DS4'); </script></body> </html>