<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Darren Mothersele</title>
  <link rel="icon" type="image/png" href="/img/favicon-32x32.png">
  <link rel="stylesheet" href="/styles.css">
</head>
<body class="bg-gray-50 text-gray-800 antialiased">
<header id="header-wrapper" class="bg-gray-800 py-4">
  <div class="container mx-auto">
    <div class="sm:flex justify-between px-4 items-center">
      <div class="flex justify-between items-center">
        <a href="/">
        <img src="/img/daz-logo.png" class="w-24" alt="Cartoon image of Darren's head">
        </a>
        <button id="nav-toggle" class="sm:hidden flex items-center px-3 py-2 text-gray-300 border-gray-600 focus:outline-none">
          <svg fill="text-gray-300" viewBox="0 0 20 20" class="w-6 h-6 fill-current">
            <title>Menu</title>
            <path fill-rule="evenodd"
                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
                  clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
      <nav id="nav-wrapper" class="w-full sm:w-auto mt-8 sm:mt-0 text-gray-100 text-xl sm:block">
        <ul class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
          <li><a href="/" class="px-4 py-2 hover:bg-gray-700">Home</a></li>
          <li><a href="/about" class="px-4 py-2 hover:bg-gray-700">About</a></li>
          <li><a href="/work" class="px-4 py-2 hover:bg-gray-700">Work</a></li>
          <li><a href="/talks" class="px-4 py-2 hover:bg-gray-700">Talks</a></li>
          <li><a href="/projects" class="px-4 py-2 hover:bg-gray-700">Projects</a></li>
          <li><a href="/contact" class="px-4 py-2 hover:bg-gray-700">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

    <div class="bg-gray-800 py-16 text-center">
        
            <p class="max-w-xl mx-auto text-2xl font-bold text-gray-200">Hi 👋, I&#39;m Darren. A software developer, creative coder, and electronic musician from the UK.</p>
        
    </div>
    <div class="-mt-1">
<svg viewBox="0 0 1024 30" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="m-9.698 176.868 252.983-17.946 410.084 53.575 413.391-65.965v-24.409l-1076.458-.515v55.26Z" style="fill:#202937" transform="matrix(.95127 0 0 .32462 9.225 -39.477)"/></svg>
    </div>


<main class="pt-16 sm:max-w-xl px-4 mx-auto text-xl leading-relaxed">
  <div class="prose lg:prose-xl">
    <p>Welcome to my little home on the web.</p>
<p>I'm a software developer with over 25 years of experience and currently work as a tech lead at a SaaS company
(<a href="https://www.flowcase.com">flowcase</a>) focused on data and integrations. Most of my career has been in backend
development, with a few years specialising in scalable frontend architectures.
These days I work full stack, mostly on the backend.</p>
<p>My preferred language is Rust. I use that for most things, including web development.
Although, I switch to C++ for audio/music.</p>
<p>Here you can find out more <a href="/about">about me</a>.</p>
<p>You can work out some of my interests by looking at
some of the <a href="/projects">side-projects</a> I have worked on.</p>
<p>You can read more about my work and background in my <a href="/work">developer story</a>.</p>
<p>The best way to contact me is via email:
<a href="/cdn-cgi/l/email-protection#d0a7b5b2a3b9a4b590b4b1aafeb9a3efa3a5b2bab5b3a4ed87b5b2a3b9a4b5f096b5b5b4b2b1b3bb"><span class="__cf_email__" data-cfemail="b4c3d1d6c7ddc0d1f4d0d5ce9addc7">[email&#160;protected]</span></a></p>
<p>You can also find me on:</p>
<ul>
<li><a href="https://floss.social/@daz">Mastodon</a></li>
<li><a href="https://github.com/darrenmothersele/">GitHub</a></li>
<li><a href="https://www.linkedin.com/in/darren-mothersele/">LinkedIn</a></li>
<li><a href="https://soundcloud.com/musicinstinct/tracks">SoundCloud</a></li>
<li><a href="https://bandcamp.com/musicinstinct">Bandcamp</a></li>
</ul>

  </div>
</main>

<footer class="mt-32">
  <svg class="-mb-1" viewBox="0 0 1024 30" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="m-9.698 176.868 252.983-17.946 410.084 53.575 413.391-65.965v-24.409l-1076.458-.515v55.26Z" style="fill:#202937" transform="matrix(-.95127 0 0 -.32462 1014.77 68.981)"/></svg>
  <div class="bg-gray-800 text-gray-300 py-6">
    <div class="container mx-auto px-4">
    <p class="flex justify-between items-end">
      <span>&copy; 2007 - 2025 Darren&nbsp;Mothersele</span>
      <span class="flex flex-col items-end sm:flex-row w-1/3 sm:w-auto text-sm space-y-6 sm:space-y-0 sm:space-x-6 justify-end">
        <a href="/privacy">Privacy &amp; terms</a>
        <span class="px-2 hidden">&middot;</span>
        <a href="/uses">How is it made?</a>
      </span>
    </p>
    </div>
  </div>
</footer>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
  const el = document.getElementById("nav-toggle");
  const nav = document.getElementById("nav-wrapper");
  let isOpen = false;
  el.onclick = () => {
    isOpen = !isOpen;
    updateMenuState();
  }
  updateMenuState();
  function updateMenuState() {
    if (isOpen) {
      nav.classList.remove("hidden");
    } else {
      nav.classList.add("hidden");
    }
  }
</script>
</body>
</html>
