thomaswilson-sveltekit/src/routes/+page.svelte

<script lang="ts">
  import { slide } from "svelte/transition";
  import Navbar from "$lib/components/Navbar.svelte";

  let isWorkExpanded = false;
  let isPersonalExpanded = false;
</script>

<svelte:head>
  <title>Thomas Wilson</title>
</svelte:head>

<Navbar />

<main class="thomaswilson-container">
  <section class="section thomaswilson-strapline">
    <h1 class="title">Thomas Wilson</h1>
    <p>
      <span class="strapline-animated" id="statement-1">I am a software engineer who loves the craft of building quality software, </span>
      <span class="strapline-animated" id="statement-2">the messy-ness of working with people,</span>
      <span class="strapline-animated" id="statement-3">and the balance between <i>minimal</i> and <i>complete</i> products.</span>
      <span class="strapline-summary">I build good things with good people for good companies.</span>
    </p>
  </section>

  <section class="work section">
    <h2>My work</h2>
    {#if isWorkExpanded}
      <ul transition:slide="{{ duration: 220 }}">
        <li>Right now I am a Senior Software Engineer at <a href="https://www.laka.co.uk" target="_blank" rel="noopener noreferrer">Laka</a>.  We're building web tools to un<span class="censor">fuck</span> insurance</li>
        <li>
          I spent three years building and leading the Software Engienering team at<a
            class="oxwash"
            target="_blank"
            rel="noopener noreferrer"
            href="https://www.oxwash.com">Oxwash</a
          >, where we built tools for the sustainable and scalable future of laundry.
        </li>
        <li>
          I build full-stack software for the web, especially with TypeScript,
          Node, Svelte, and React.
        </li>

        <li>
          I like domain driven design, and agile (with a little 'a')
          opinions about delivery and collaboration.
        </li>

        <li>
          I've previously built software with data privacy, ed-tech, and
          sustainability companies.
        </li>

        <li>
          I have a <a
            class="thesis"
            target="_blank"
            rel="noopener noreferrer"
            href="https://eprints.soton.ac.uk/418168/"
            >Ph.D. in education technology</a
          >, where I looked at how we can use tech in the teaching lab to
          promote and evidence understanding.
        </li>

        <li>
          I have only ever worked with companies actively solving environment
          and societal problems.
        </li>

        <li>
          <button on:click="{() => (isWorkExpanded = false)}">
            Ew, show less
          </button>
        </li>
      </ul>
    {:else}
      <p>
        I build software that makes complicated things more human-friendly, and
        lead teams to do the same.
      </p>
      <button on:click="{() => (isWorkExpanded = true)}">
        Wow, Show more
      </button>
    {/if}
  </section>

  <section class="section personal">
    <h2>Me</h2>
    {#if isPersonalExpanded}
      <ul transition:slide="{{ duration: 210 }}">
        <li>
          I try to write at least once a month on my <a
            class="thesis"
            href="/blog">blog</a
          >.
        </li>
        <li>I'm learning to sew my own clothes</li>
        <li>I love fruity coffees and botanical gins</li>
        <li>I used to dance and produce with a contemporary dance company</li>
        <li>
          <button on:click="{() => (isPersonalExpanded = false)}"
            >Cool, show less</button
          >
        </li>
      </ul>
    {:else}
      <p>
        I like to write on my <a href="/blog">blog</a> and ride bikes. I'm learning
        to sew my own clothes, and my French is terrible.
      </p>
      <button on:click="{() => (isPersonalExpanded = true)}"
        >Oh, cool, tell me more</button
      >
    {/if}
  </section>

  <section class="section links">
    <h2>Links</h2>
    <ul>
      <li>I write here, <a href="/blog">on my blog</a></li>
      <li>
        And on <a href="https://www.github.com/thomaswilsonxyz">GitHub</a>
      </li>
      <li>I stopped checking Twitter when... you know.</li>
    </ul>
  </section>
</main>

<style>
  section {
    --link-transition: 0.2s;
    --link-padding: 4px;
    --link-border-radius: 8px;
  }

  section ul {
    margin-top: 0;
    margin-bottom: 0;
  }

  section p {
    padding-top: 0;
    padding-bottom: var(--spacing-md);
    font-size: 1.3rem;
    color: var(--gray-700);
  }

  .thomaswilson-strapline > p {
    padding-top: 4px;
    padding-bottom: 1rem;
    font-size: 1.65rem;

    color: var(--gray-700);
  }

  .oxwash {
    padding: var(--link-padding);
    transition: var(--link-transition);
    border-radius: var(--link-border-radius);
    border: 1px solid #0256f2;
    color: #0256f2;
    text-decoration: none;
  }

  .oxwash:hover {
    background: #6fbbec;
    border: 1px solid #6fbbec;
    text-decoration: underline;
    color: white;
  }

  .thesis {
    padding: var(--link-padding);
    transition: var(--link-transition);
    border-radius: var(--link-border-radius);
    border: 1px solid var(--brand-orange);
    color: var(--brand-orange);
    text-decoration: none;
  }

  .thesis:hover {
    background: var(--brand-orange);
    color: white;
    text-decoration: underline;
  }

  .links a {
    color: var(--brand-orange);
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-family: var(--font-family-title);
    color: var(--gray-800);
  }

  li {
    padding-bottom: 0.3rem;
  }

  /** Create a class called censor which places a black bar over the text*/
  .censor {
    position: relative;
    color: transparent;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
  }

  .censor::after {
  content: '';
  position: absolute;
  left: 0;
  top: 55%;
  width: 100%;
  height: 8px;
  background-color: black;
  transform: translateY(-50%);
  }
  

  @keyframes statementAppear {
    0% {
      opacity: 0.1;
      transform: translateY(-20px)
    }

    100% {
      opacity: 1;
      transform: translateY(0px)
    }
  }

  .strapline-summary {
    font-weight: 400;
  }
  .strapline-animated {
    animation-fill-mode: forwards;
    opacity: 0.15;
    transform: translateY(-10px)
  }

  #statement-1 {
    animation-name: statementAppear;
    animation-delay: 0.5s;
    animation-duration: 1.5s;
  }

  #statement-2 {
    animation-name: statementAppear;
    animation-delay: 1.4s;
    animation-duration: 1.5s;
  }

  #statement-3 {
    animation-name: statementAppear;
    animation-delay: 2.3s;
    animation-duration: 1.5s;
  }
</style>