<!DOCTYPE html><html lang="en" class="antialiased break-words"> <head><!-- High Priority Global Metadata --><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Simon W. Jackson</title><meta name="generator" content="Astro v5.1.5"><!-- Fonts --><link rel="preload" as="font" type="font/woff2" href="/_astro/inter-latin-wght-normal.C2S99t-D.woff2" crossorigin="anonymous"><link rel="preload" as="font" type="font/woff2" href="/_astro/newsreader-latin-wght-normal.B8UkT1nD.woff2" crossorigin="anonymous"><!-- Low Priority Global Metadata --><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="sitemap" href="/sitemap-index.xml"><link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS"><!-- Page Metadata --><link rel="canonical" href="https://example.com/"><meta name="description" content><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://example.com/"><meta property="og:title" content="Simon W. Jackson"><meta property="og:description" content><meta property="og:image" content="https://example.com/dante-preview.jpg"><meta property="og:image:alt" content="Dante - Astro.js and Tailwind CSS theme"><!-- X/Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://example.com/"><meta property="twitter:title" content="Simon W. Jackson"><meta property="twitter:description" content><meta property="twitter:image" content="https://example.com/dante-preview.jpg"><meta name="twitter:image:alt" content="Dante - Astro.js and Tailwind CSS theme"><script type="module">window.dataLayer=window.dataLayer||[];function a(){dataLayer.push(arguments)}a("js",new Date);a("config","G-6Y383F3S5H");</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-6Y383F3S5H"></script><script type="module">localStorage.theme==="dark"&&document.documentElement.classList.add("dark");</script><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.rasoniT7.js"></script><link rel="stylesheet" href="/_astro/_id_.DRAysisz.css"></head> <body class="bg-main text-main"> <div class="flex flex-col min-h-screen px-4 md:px-8"> <nav class="min-h-10 pt-4 pb-12 relative sm:min-h-14 sm:pb-24 md:pt-8" data-astro-cid-dmqpwcec> <div class="w-full max-w-3xl mx-auto relative" data-astro-cid-dmqpwcec> <button class="menu-toggle w-8 h-8 -ml-1 flex items-center justify-center relative z-30 md:hidden" aria-label="Open Menu" aria-expanded="false" aria-controls="menu-items" data-astro-cid-dmqpwcec> <span class="menu-toggle-icon w-6 h-px relative bg-current" data-astro-cid-dmqpwcec></span> </button> <ul id="menu-items" class="menu flex gap-6" data-astro-cid-dmqpwcec> <li class="py-1 relative group" data-astro-cid-dmqpwcec> <a class="text-xl font-serif text-main hover:underline hover:underline-offset-2 hover:decoration-1 md:text-base underline underline-offset-2 decoration-1" href="/" hasDropdown="false" data-astro-cid-dmqpwcec="true"> Home </a>  </li><li class="py-1 relative group" data-astro-cid-dmqpwcec> <a class="text-xl font-serif text-main hover:underline hover:underline-offset-2 hover:decoration-1 md:text-base" href="/blog" hasDropdown="false" data-astro-cid-dmqpwcec="true"> Blog </a>  </li><li class="py-1 relative group" data-astro-cid-dmqpwcec> <a class="text-xl font-serif text-main hover:underline hover:underline-offset-2 hover:decoration-1 md:text-base" href="/resume" hasDropdown="true" data-astro-cid-dmqpwcec="true"> Resume </a>  <div class="hidden group-hover:block h-4 w-full absolute bottom-0 translate-y-3" data-astro-cid-dmqpwcec></div> <ul class="dropdown-menu hidden group-hover:block absolute left-0 top-full pt-3 md:bg-white lg:pt-0 w-48 rounded-md shadow-lg" data-astro-cid-dmqpwcec> <li data-astro-cid-dmqpwcec> <a href="/resume" class="block px-4 py-2 text-sm hover:underline" data-astro-cid-dmqpwcec> Online </a> </li><li data-astro-cid-dmqpwcec> <a href="/simon-w-jackson-creative-technologist-resume.pdf" class="block px-4 py-2 text-sm hover:underline" data-astro-cid-dmqpwcec> PDF </a> </li><li data-astro-cid-dmqpwcec> <a href="/simon-w-jackson-creative-technologist-resume.docx" class="block px-4 py-2 text-sm hover:underline" data-astro-cid-dmqpwcec> DOCX </a> </li><li data-astro-cid-dmqpwcec> <a href="https://www.linkedin.com/in/simonwjackson" class="block px-4 py-2 text-sm hover:underline" data-astro-cid-dmqpwcec> LinkedIn </a> </li> </ul>  </li> </ul> </div> <div class="absolute right-0 top-4 z-10 md:top-8" data-astro-cid-dmqpwcec> <button id="theme-toggle" class="w-8 h-8 -mr-2 flex items-center justify-center" aria-label="Change color scheme"> <svg class="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <circle cx="8" cy="8" r="8"></circle> </svg> </button> <script type="module">document.addEventListener("astro:after-swap",()=>{localStorage.theme==="dark"&&document.documentElement.classList.add("dark")});</script> <script type="module">document.addEventListener("astro:page-load",()=>{const e=typeof localStorage<"u"&&localStorage.getItem("theme")?localStorage.getItem("theme")||"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";e==="light"?document.documentElement.classList.remove("dark"):document.documentElement.classList.add("dark"),window.localStorage.setItem("theme",e);const o=()=>{const t=document.documentElement;t.classList.toggle("dark");const a=t.classList.contains("dark");localStorage.setItem("theme",a?"dark":"light")};document.getElementById("theme-toggle")?.addEventListener("click",o)});</script> </div> </nav>  <script type="module">function n(){const s=document.querySelector(".menu"),e=document.querySelector(".menu-toggle");e?.addEventListener("click",()=>{const t=e.getAttribute("aria-expanded")==="true";e.classList.toggle("is-active"),e.setAttribute("aria-expanded",t?"false":"true"),e.setAttribute("aria-label",t?"Open Menu":"Close Menu"),s?.classList.toggle("is-visible")})}n();document.addEventListener("astro:after-swap",n);</script> <header class="w-full max-w-3xl mx-auto mb-12 sm:mb-16"> <div class="flex items-center gap-6">  <div class="relative w-16 h-16 sm:w-[90px] sm:h-[90px] shrink-0"> <img src="/headshot.jpg" alt="Simon W. Jackson" class="rounded-full w-full h-full object-cover"> </div> <div class="flex flex-col"> <a class="font-serif text-2xl leading-tight font-medium text-theme-foreground sm:text-4xl" href="/"> Simon W. Jackson </a> <p class="text-sm leading-tight mt-1 text-gray-600"> Creative Technologist, UI Developer &amp; Perpetual Tinkerer </p> </div> </div> </header> <main class="grow w-full max-w-3xl mx-auto">  <section class="w-full flex flex-col gap-8 mb-16 sm:mb-24"><h1 class="text-3xl leading-tight font-serif font-medium sm:text-5xl sm:leading-tight">Reimagining digital experiences. One idea at a time.</h1><figure><img class="w-full" src="/heading.jpg" loading="lazy" decoding="async" alt="Heading image"></figure><div class="max-w-none prose prose-dante sm:prose-lg"><p>I&#39;m <strong>Simon</strong>, a software developer at Hilton. I&#39;ve worked on a wide range of projects, from contributing to design systems @ Dell to developing bespoke websites for small businesses.  Feel free to explore some of my work below or follow me on <a href='https://github.com/simonwjackson'>GitHub</a>, <a href='https://bsky.app/profile/simonwjackson.bsky.social'>Bluesky</a> &amp; <a href='https://www.linkedin.com/in/simonwjackson'>LinkedIn</a>.</p>
</div><div class="flex flex-wrap gap-4"><a href="/contact" class="inline-flex items-center justify-center px-6 py-2 font-serif leading-tight italic text-main bg-main border border-main rounded-full transition hover:bg-muted">Get in Touch</a></div></section>  <div class="mb-16 sm:mb-24"> <h2 class="mb-12 text-xl font-serif italic sm:mb-16 sm:text-2xl">Writing</h2> <a class="flex justify-between items-start gap-8 group mb-10 sm:mb-12" href="/blog/whats-in-my-laptop-bag-2021/"> <div class="grow"> <h3 class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl">Whats in My Laptop Bag (2021 Edition)</h3> <div class="mt-1 text-sm leading-normal"> <time datetime="2021-04-12T00:00:00.000Z"> April 12, 2021 </time>  </div> <div class="mt-3 text-sm leading-normal">Downsizing my mobile setup. Here&#39;s what&#39;s left...</div> </div> <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
Read Post <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-current w-4 h-4"> <path d="M4.286 12c0-0.533 0.432-0.964 0.964-0.964v0h11.172l-4.14-4.138c-0.175-0.175-0.283-0.416-0.283-0.683 0-0.533 0.432-0.965 0.965-0.965 0.267 0 0.508 0.108 0.683 0.283v0l5.785 5.785c0.175 0.175 0.283 0.416 0.283 0.683s-0.108 0.508-0.283 0.683l-5.785 5.785c-0.175 0.175-0.416 0.283-0.683 0.283-0.533 0-0.965-0.432-0.965-0.965 0-0.267 0.108-0.508 0.283-0.683v0l4.14-4.138h-11.172c-0.533 0-0.964-0.432-0.964-0.964v0z"></path> </svg> </div> </a><a class="flex justify-between items-start gap-8 group mb-10 sm:mb-12" href="/blog/how-i-force-myself-to-take-breaks/"> <div class="grow"> <h3 class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl">How I force myself to take breaks</h3> <div class="mt-1 text-sm leading-normal"> <time datetime="2013-01-13T00:00:00.000Z"> January 13, 2013 </time>  </div> <div class="mt-3 text-sm leading-normal">An unconventional guide to break a dirty habit.</div> </div> <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
Read Post <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-current w-4 h-4"> <path d="M4.286 12c0-0.533 0.432-0.964 0.964-0.964v0h11.172l-4.14-4.138c-0.175-0.175-0.283-0.416-0.283-0.683 0-0.533 0.432-0.965 0.965-0.965 0.267 0 0.508 0.108 0.683 0.283v0l5.785 5.785c0.175 0.175 0.283 0.416 0.283 0.683s-0.108 0.508-0.283 0.683l-5.785 5.785c-0.175 0.175-0.416 0.283-0.683 0.283-0.533 0-0.965-0.432-0.965-0.965 0-0.267 0.108-0.508 0.283-0.683v0l4.14-4.138h-11.172c-0.533 0-0.964-0.432-0.964-0.964v0z"></path> </svg> </div> </a><a class="flex justify-between items-start gap-8 group mb-10 sm:mb-12" href="/blog/my-2013-frontend-developer-workflow/"> <div class="grow"> <h3 class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl">My 2013 Frontend Web Development Workflow</h3> <div class="mt-1 text-sm leading-normal"> <time datetime="2012-12-19T00:00:00.000Z"> December 19, 2012 </time>  </div> <div class="mt-3 text-sm leading-normal">A guide to the software and languages I use daily in my frontend development workflow, including Git, Stylus, Jade, CoffeeScript, and more.</div> </div> <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
Read Post <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-current w-4 h-4"> <path d="M4.286 12c0-0.533 0.432-0.964 0.964-0.964v0h11.172l-4.14-4.138c-0.175-0.175-0.283-0.416-0.283-0.683 0-0.533 0.432-0.965 0.965-0.965 0.267 0 0.508 0.108 0.683 0.283v0l5.785 5.785c0.175 0.175 0.283 0.416 0.283 0.683s-0.108 0.508-0.283 0.683l-5.785 5.785c-0.175 0.175-0.416 0.283-0.683 0.283-0.533 0-0.965-0.432-0.965-0.965 0-0.267 0.108-0.508 0.283-0.683v0l4.14-4.138h-11.172c-0.533 0-0.964-0.432-0.964-0.964v0z"></path> </svg> </div> </a> <div class="mt-12 sm:mt-16"> <a href="/blog" class="inline-flex items-center justify-center px-6 py-2 font-serif leading-tight italic text-main bg-main border border-main rounded-full transition hover:bg-muted">View All Posts</a> </div> </div> </main> <footer class="w-full max-w-3xl mx-auto pt-12 pb-10 sm:pt-24 sm:pb-14">  <div class="pt-6 flex flex-col gap-4 border-t border-dashed border-main sm:flex-row-reverse sm:justify-between sm:items-center"> <div class="flex flex-wrap gap-x-4 gap-y-1"> <a class="inline-flex items-center justify-center text-sm hover:underline hover:underline-offset-2" href="https://www.github.com/simonwjackson" target="_blank" rel="noopener noreferer"> GitHub </a><a class="inline-flex items-center justify-center text-sm hover:underline hover:underline-offset-2" href="https://www.linkedin.com/in/simonwjackson" target="_blank" rel="noopener noreferer"> LinkedIn </a><a class="inline-flex items-center justify-center text-sm hover:underline hover:underline-offset-2" href="https://x.com/simonwjackson" target="_blank" rel="noopener noreferer"> X </a><a class="inline-flex items-center justify-center text-sm hover:underline hover:underline-offset-2" href="https://bsky.app/profile/simonwjackson.bsky.social" target="_blank" rel="noopener noreferer"> Bluesky </a> </div> <p class="text-sm">
&copy; 2025&nbsp;<a class="hover:underline hover:underline-offset-2" href="/">Simon W. Jackson</a>. All rights reserved.
</p> </div> </footer> </div> </body></html>