index.html

---
layout: default
title: Nate Thompson
nav_title: Home
nav_order: 1
---
<article>
  <section class="bio card">
    <h1>Hi, I’m Nate!</h1>
    <ul>
      <li>I'm a freelance iOS & macOS developer from Georgia, USA.</li>
      <li>I'm currently looking for a full-time job! If you'd like to talk, feel free to <a href="mailto:{{ site.theme_settings.email_address }}">send me an email</a>.</li>
      <li>I recently graduated from Georgia State University with a B.S. in Computer Science.</li>
      <li>Previously I interned at Apple, where I worked on prototyping new functionality for their embedded diagnostics software.</li>
    </ul>
  </section>
  
  <hr>
  <section class="projects">
    <h1>My Projects</h1>
    <ul>
      {% assign projects = site.data.projects.large %}
      {% for project in projects %}
      <li class="project-large clickable card" style="
      color: {{ project.text_color }};
      background-color: {{ project.image.background_color }};
      {% if project.image.generate %}
      background-image: {{ project.image.generate }};
      {% else %}
      background-image: url({{ project.image.url }});
      {% endif %}
      ">
      <div>
        <div class="project-icon"><img src="{{ site.baseurl }}{{ project.icon.url }}" alt="{{ project.icon.alt }}"></div>
        <div class="project-text">
          <div>
            <a class="main-link" href="{{ project.link }}"><h2>{{ project.name }}</h2></a>
            <p>{{ project.tagline }}</p>
          </div>
        </div>
      </div>
    </li>
    {% endfor %}
  </ul>
</section>

<hr>
<section class="projects">
  <h1>Freelancing</h1>
  <ul class="project-grid">
    
    {% assign projects = site.data.projects.apps %}
    {% for project in projects %}
    <li class="project-small clickable card">
      <div role="img" alt="{{ project.image.alt }}" style="
      background-image: url('{{ site.baseurl }}{{ project.image.url }}');
      background-size: auto 175px;
      background-color: {{ project.image.background_color }}
      ">
    </div>
    <h2>
      <a class="main-link" href="{{ project.link }}">{{ project.name }}</a>
      {% if project.role %}
      <p class="role">{{ project.role }}</p>
      {% endif %}
    </h2>
    <p>{{ project.description.primary }}</p>
    <p>{{ project.description.secondary }}</p>
  </li>
  {% endfor %}
</ul>
</section>

<hr>
<section class="projects">
  <h1>Hackathons</h1>
  <ul class="project-grid">
    
    {% assign projects = site.data.projects.hackathons %}
    {% for project in projects %}
    <li class="project-small clickable card">
      <div role="img" alt="{{ project.image.alt }}" style="
      background-image: url('{{ site.baseurl }}{{ project.image.url }}');
      background-size: auto 175px;
      background-color: {{ project.image.background_color }}
      ">
    </div>
    <h2><a class="main-link" href="{{ project.link }}">{{ project.name }}</a></h2>
    <p>{{ project.description.primary }}</p>
    <p>{{ project.description.secondary }}</p>
  </li>
  {% endfor %}
</ul>
</section>
</article>

<script>
  // Enable clicking on the entire card to follow main link.
  // https://css-tricks.com/block-links-the-search-for-a-perfect-solution/#method-4-sprinkle-javascript-on-the-second-method
  $('.clickable').each(function(index, clickable) {
    let mainLink = clickable.querySelector('.main-link');
    let href = $(mainLink).attr('href').toString();
    clickable.addEventListener("click", function() {
      handleClick(href);
    });
  });

  function handleClick(href) {
    const isTextSelected = window.getSelection().toString();
    if (!isTextSelected) {
      location.href = href;
    }
  }
</script>