---
layout: layouts/base.njk
permalink: /
title: Projects
tags:
  - nav
navtitle: Projects
---

<h1>Projects</h1>
<p>things I have made</p>

<div class="projects">
<section class="project">
  <img class="project-image" src="/projects/juug.png">
  <div>
    <h3>juug</h3>
    <p>Drum machine / sampler made with Web Audio API. Create and share 4 bar loops</p>
    <div>
      <a href="https://juug.com">Play</a>
      |
      <a href="https://gitlab.com/duud/juug">Source</a>
    </div>
  </div>
</section>

<section class="project">
  <img class="project-image" src="/projects/chess.png">
  <div>
    <h3>Chess</h3>
    <p>Realtime web chess with Move Notifications, offline support.
    Made using Vue, Vuex, and Firebase for auth and sync.</p>
    <div>
      <a href="https://chess.psimyn.com">Play</a>
      |
      <a href="https://github.com/psimyn/vue-chess">Source</a>
    </div>
  </div>
</section>

<section class="project">
  <div class="project-image">
    <iframe src="/vape"></iframe>
  </div>
  <div>
    <h3>Vape Timer</h3>
    <p>CSS only<br>the ephemeral feeling<br>of a cigarette</p>
    <div>
      <a href="https://codepen.io/psimyn/pen/ExdQOMr">Codepen</a>
    </div>
  </div>
</section>

<section class="project">
  <div class="project-image">
    <pre><code>

       /****
        ******
       ****/
    </code>
  </pre>
  </div>
  <div>
    <h3>CSS Haikus</h3>
    <p>Short, crappy haikus. Written in and about CSS</p>
    <div>
      <a href="/css-haikus">Read</a>
    </div>
  </div>
</section>

<section class="project">
  <img class="project-image" src="/projects/framer.jpg">
  <div>
    <h3>Framer</h3>
    <p>A renderer for custom picture frames. 
    Used by <a href="https://justframekits.com.au">Just Framekits</a> and  <a href="https://artdistro.com">Artdistro</a>.</p>
    <div>
      <a href="https://psimyn.com/framer">Demo</a>
      |
      <a href="https://github.com/psimyn/framer">Source</a>
    </div>
  </div>
</section>  

<section class="project">
  <img class="project-image" src="/projects/koala.jpg">
  <div>
    <h3>koala.lol</h3>
    <p>A spinning koala. Touch controls to change speed, offline support. Experiment using Workbox for service-worker support, and static hosting on GitLab Pages.</p>
    <div>
      <a href="https://duud.gitlab.io/koala/">Demo</a>
      |
      <a href="https://gitlab.com/duud/koala">Source</a>
    </div>
  </div>
</section>
  
<section class="project">
  <img class="project-image" src="/projects/notepad.png">
  <div>
    <h3>Notepad</h3>
    <p>A simple notepad for notes or lists. Also has a Chrome Extension for New Tab Notes</p>
    <div>
      <a href="https://notepad.psimyn.com">Demo</a>
      |
      <a href="https://github.com/psimyn/notepad">Source</a>
    </div>
  </div>
</section>

<section class="project">
  <img class="project-image" src="/projects/whatsthepriceofgold.jpg">
  <div>
    <h3>What's The Price of Gold?</h3>
    <p>Serverless demo made to test out Cloudflare Workers. They were good, but the monthly cost didn't justify the joke.
    Rewritten to a static site.</p>
    <div>
      <a href="https://whatsthepriceof.gold">Site</a>
      |
      <a href="https://github.com/psimyn/gold">Source</a>
    </div>
  </div>
</section>
</div>