<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>Marcus Noble</title>
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">

  <meta property="og:title" content="Marcus Noble">
  <meta property="og:site_name" content="Marcus Noble">
  <meta property="og:url" content="https://marcusnoble.com">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://opengraph.cluster.fun/opengraph/?siteTitle=&title=Marcus%20Noble&tags=&image=https%3A%2F%2Fmarcusnoble.co.uk%2Fimages%2Fmarcus.jpg&twitter=Marcus_Noble_&github=AverageMarcus&website=www.MarcusNoble.co.uk&bgColor=%2310181f&fgColor=%23f5f5f5">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@Marcus_Noble_">


  <style>
    @font-face {
        font-family: 'Orkney';
        src: url('/fonts/OrkneyRegular.ttf') format('truetype');
    }

    @font-face {
        font-family: 'Orkney';
        src: url('/fonts/OrkneyBold.ttf') format('truetype');
        font-weight: bold;
    }

    @font-face {
        font-family: 'Orkney';
        src: url('/fonts/OrkneyLight.ttf') format('truetype');
        font-weight: lighter;
    }
  </style>

  <style>
    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
    }

    body {
      background: #11191f;
      color: #ededed;
      display: grid;
      grid-template: 100vh / 40% 60%;

      font-family: 'Orkney', system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
          "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1.5em;
    }

    a {
      color: #fd7e0b;
    }

    h2 {
      margin-bottom: 10px;
    }

    h2 + p {
      margin-top: 0;
    }

    .tag {
      font-size: 0.7em;
      background: #ededed;
      color: #11191f;
      padding: 4px 7px;
      border-radius: 10em;
      display: inline-block;
      font-weight: lighter;
      line-height: 1.2em;
    }

    header {
      height: 100vh;
      background-image: url('headshot-transparent.png');
      background-repeat: no-repeat;
      background-position: bottom right;
      background-size: cover;
    }

    @media only screen and (min-width: 3700px) {
      header {
        background-position: top right;
        background-size: contain;
      }
    }

    main {
      padding: 8em;

      overflow-y: auto;
    }

    main h1 {
      font-size: 2.5em;
      margin-bottom: 0;
    }

    main h1 small {
      font-weight: lighter;
      font-size: 0.3em;
      color: #bcb8b8;
      display: inline-block;
    }

    main p {
      line-height: 1.4em;
    }

    main p span {
      display: inline-block;
    }

    .email-link {
      color: #fd7e0b;
    }

    /* Social links */
    .social-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .social-links li {
      margin-right: .8em;
      margin-bottom: .6em;
    }

    .social-links li a {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      text-decoration: none;
    }

    .social-links svg {
      fill: #fff;
      margin: 0 6px;
    }

    /* Projects */

    .projects {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      font-size: .8em;
    }

    .projects li {
      width: 300px;
      max-width: 100%;
      border: 2px solid;
      border-radius: 6px;
      padding: 10px;
      margin: 6px;
      cursor: pointer;
    }

    .projects li a {
      text-decoration: none;
      color: unset;
    }

    .projects blockquote {
      background: none;
      margin: 4px 0;
      padding-left: 4px;
      border-left: 4px solid;
      font-size: .8em;
    }

    .repo-language-color {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    /* Talks */

    .talks {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: .8em;
    }

    .talks li {
      width: 300px;
      max-width: 100%;
      margin: 4px 4px;
    }

    .talks li a {
      text-decoration: none;
      color: unset;
    }

    .talks .recording {
      display: block;
      color: #fd7e0b;
    }

    .talks img {
      width: 300px;
      max-width: 100%;
    }

    /* Events */
    .events {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      font-size: .8em;
    }

    .events li {
      margin-bottom: 1em;
    }

    .events time {
      font-size: .85em;
    }

    .events li .details {
      display: flex;
      flex-direction: column;
      line-height: 1.4em;
      padding-left: 10px;
      margin-left: 2px;
      border-left: 4px solid;
      margin-top: .2px;
    }

    .events li .details > div {
      margin-top: 2px;
      margin-bottom: 6px;
    }

    .badges a {
      display: inline-block;
    }
    .badges a img {
      width: 140px;
    }

    @media only screen and (max-width: 1700px) {
      body {
        grid-template: 20vh 80vh / 100%;
      }

      header {
        height: 100%;
        background-position-y: bottom;
        background-position-x: 0;
        background-size: contain
      }
      main {
        padding: .5em 1.5em;

        overflow-y: unset;
      }

      #intro h1 {
        margin: 0;
      }

      #intro p {
        font-size: 0.9em;
      }
    }

    @media only screen and (max-width: 1050px) {
      .projects li {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <header></header>
  <main>
    <section id="intro">
      <h1>Hi 👋, I'm Marcus <small>(/ˈmɑːkəs/)</small></h1>

      <div class="tag">Pronouns: He/Him/His</div>

      <p>
        {{ .intro | html }}
      </p>
    </section>

    <section id="links">
      <h2>🌐 Find me around the web</h2>

      <ul class="social-links">
        {{ range .social }}
        <li>
          <a href="{{ .url }}" rel="me" title="{{ .title }}">
            {{ .icon | html }}
            {{ .name }}
          </a>
        </li>
        {{ end }}
      </ul>
    </section>

    {{ if gt (len .events) 0 }}
    <section id="events">
      <h2>🗓 Upcoming Events</h2>

      <ul class="events">
        {{ range .events }}
        <li>
          <time datetime="{{ .date }}">{{ .humanDate }}</time>
          <div class="details">
            <strong><a href="{{ .url }}">{{ .eventName }}</a></strong>
            {{ range .details }}
            <div>
              <span>{{ .name | html }}</span>
              {{ if .type }}<span class="tag">{{ .type }}</span>{{ end }}
            </div>
            {{ end }}
          </div>
        </li>
        {{ end }}
      </ul>
    </section>
    {{ end }}

    {{ if gt (len .talks) 0 }}
    <section id="talks">
      <h2>🗣️ My Talks</h2>

      <ul class="talks">
        {{ range .talks }}
        <li>
          <a href="{{ .url }}">
            <strong>{{ .title }}</strong>
            <img src="{{.image}}">
          </a>
          {{ if .recording }}<a href="{{.recording}}" class="recording">📺 Recording</a>{{ end }}
        </li>
        {{ end }}
      </ul>
    </section>
    {{ end }}

    {{ if gt (len .projects) 0 }}
    <section id="projects">
      <h2>💻 My Open Source Projects</h2>

      <p>
        All my Open Source projects can be found on my <a href="https://github.com/AverageMarcus">GitHub</a> profile <small>(as well as my personal <a href="https://git.cluster.fun">Gitea</a> instance, <a href="https://gitlab.com/AverageMarcus">GitLab</a>, <a href="https://codeberg.org/AverageMarcus">Codeberg</a> and <a href="https://bitbucket.org/AverageMarcus/workspace/projects/PROJ">BitBucket</a>)</small>. Below are a selection of highlights.
      </p>

      <ul class="projects">
        {{ range .projects }}
        <li>
          <a href="{{ .url }}">
            <strong>{{ .name }}</strong>
            <blockquote>{{ .description }}</blockquote>
            <div>
              {{ range .languages }}
              <span class="repo-language-color" style="background-color: {{ .color }}"></span> {{ .name }}
              {{ end }}
            </div>
          </a>
        </li>
        {{ end }}
      </ul>
    </section>
    {{ end }}

    {{ if gt (len .badges) 0 }}
    <section id="badges">
      <h2>🎖️ Badges</h2>

      <ul class="badges">
        {{ range .badges }}
        <a href="{{ .url }}" target="_blank">
          <img src="{{ .img }}" />
        </a>
        {{ end }}
      </ul>
    </section>
    {{ end }}
  </main>
</body>
</html>
