117 lines
7.0 KiB
HTML
117 lines
7.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Ryan Moon - Software Developer</title>
|
||
|
|
<meta name="description" content="Hello, nice to meet you. I'm Ryan and this is my webpage.">
|
||
|
|
<link rel="stylesheet" href="/css/style.css">
|
||
|
|
<link rel="stylesheet" href="/css/fonts.css">
|
||
|
|
<script defer data-domain="ryanmoon.com" src="https://pa.inspin.io/js/script.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<div class="center space-between">
|
||
|
|
<a href="/" class="logo">Ryan Moon</a>
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="#about">About</a></li>
|
||
|
|
<li><a href="#contact">Get in touch</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<div class="center">
|
||
|
|
<div class="hero">
|
||
|
|
<h1>Hello, I'm Ryan</h1>
|
||
|
|
<p>Free Software Developer focused on design, <br>implementation, and maintenance of web platforms.</p>
|
||
|
|
<small>Have an exciting project? <a href="#contact">Let's connect</a></small>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="projects">
|
||
|
|
<h1>Projects</h1>
|
||
|
|
<div class="card">
|
||
|
|
<a href="#hns.directory"><h2>hns.directory</h2></a>
|
||
|
|
<p>Resources for the Handshake naming system.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<a href="#minecraft.forum"><h2>minecraft.forum</h2></a>
|
||
|
|
<p>A community hub to discover and discuss Minecraft.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contact" id="contact">
|
||
|
|
<h1>How can I help?</h1>
|
||
|
|
<p>Please email me at <a href="mailto:hello@ryanmoon.com">hello@ryanmoon.com</a> and I'll get <br>back to you as soon as possible.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<footer>
|
||
|
|
<div class="center">
|
||
|
|
<p>Created using <a href="https://www.tinysites.com" target="_BLANK">Tinysites</a></p>
|
||
|
|
<a href="mailto:hello@ryanmoon.com">hello@ryanmoon.com</a>
|
||
|
|
<a href="https://git.inspin.io/ryan" target="_BLANK">git</a>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<div class="modal about" id="about">
|
||
|
|
<div class="center">
|
||
|
|
<a href="#" class="close">Close</a>
|
||
|
|
<h2>About me.</h2>
|
||
|
|
<p>Hello, nice to meet you. I'm Ryan and this is my webpage.</p>
|
||
|
|
<p>A little bit about myself. I created my first website in 2017 for playing flash games at school. Since then, I've learned how to develop more intricate websites that include authentication and unique user functionality.</p>
|
||
|
|
<p>I believe in the <a href="https://www.gnu.org/philosophy/free-software-intro.en.html" target="_BLANK">free software movement</a> and the source code for my websites is available on this <a href="https://git.inspin.io/ryan" target="_BLANK">git repository</a>, using a GPL Licence.</p>
|
||
|
|
<p>My development stack consist of Nuxt.js, Directus.io, PostgreSQL, and many other packages. Some of my websites are also hosted on the <a href="https://handshake.org/" target="_BLANK">Handshake</a> naming system, such as <a href="https://ryanmoon/" target="_BLANK">ryanmoon/</a>, <a href="https://crbtc/" target="_BLANK">crbtc/</a>, and <a href="https://dir.ectory/" target="_BLANK">dir.ectory/</a>.</p>
|
||
|
|
<p>In my free time, I like to read books, fish at the lake, and run long distances.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="modal project" id="hns.directory">
|
||
|
|
<div class="center">
|
||
|
|
<a href="#" class="close">Close</a>
|
||
|
|
<img src="/img/project/directory/directory.png" alt="hns.directory">
|
||
|
|
<div class="content">
|
||
|
|
<span>hns.directory</span>
|
||
|
|
<h2>Accessible directory of resources for new Handshake users</h2>
|
||
|
|
<h3>Challenge</h3>
|
||
|
|
<p>hns.directory started as a proposal to the Open Systems <a href="https://github.com/opensystm/handshake-micro-grants" target="_BLANK">Handshake micro grant</a>. The purpose of this grant is to support open source developers in the Handshake ecosystem.</p>
|
||
|
|
<img src="/img/project/directory/announcement.png" alt="Open Systems Announcement">
|
||
|
|
<em>Announcement of grant selection on X/Twitter</em>
|
||
|
|
<p>What is Handshake? <a href="https://handshake.org/" target="_BLANK">Handshake</a> is a decentralized, permissionless naming protocol that is disrupting the domain name industry.</p>
|
||
|
|
<p>Handshake allows anyone to purchase a TLD (Top Level Domain) at a fraction of the cost of traditional TLD's and provides many improvements to internet security and ownership of your online identity.</p>
|
||
|
|
<p>One issue facing the adoption of Handshake is onboarding new users and showcasing it's many use cases. Dir.ectory should give new users of HNS an easy way to find resources and provide guides for acquiring names, hosting websites, and more.</p>
|
||
|
|
<h3>Solution</h3>
|
||
|
|
<p>The primary task involves organizing existing websites, which are built on Handshake or that support onboarding users, into predefined categories.</p>
|
||
|
|
<img src="/img/project/directory/cards.png" alt="Card elements">
|
||
|
|
<em>Cards on home page linking to category pages</em>
|
||
|
|
<p>Nuxt.js was used for developing hns.directory with a heavy reliance on the <a href="https://content.nuxt.com/" target="_BLANK">Nuxt Content</a> module for organizing and showcasing the websites.</p>
|
||
|
|
<p>Website owners can add their website through the '<a href="https://dir.ectory/submit" target="_BLANK">Submit Site</a>' page which includes a submission form.</p>
|
||
|
|
<img src="/img/project/directory/submit.png" alt="Submit website form">
|
||
|
|
<em>Details needed for submitting a website</em>
|
||
|
|
<p>The final result provides a simple experience for finding resources and learning about the different use cases Handshake offers.</p>
|
||
|
|
<img src="/img/project/directory/announcement-2.png" alt="Open Systems Announcement">
|
||
|
|
<em>Launch announcement on X/Twitter</em>
|
||
|
|
<p>This will hopefully give new users an easy way to learn about Handshake and lead to faster adoption of this awesome technology.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="modal project" id="minecraft.forum">
|
||
|
|
<div class="center">
|
||
|
|
<a href="#" class="close">Close</a>
|
||
|
|
<img src="/img/project/realms/realms.png" alt="hns.directory">
|
||
|
|
<div class="content">
|
||
|
|
<span>minecraft.forum</span>
|
||
|
|
<h2>Share your Minecraft Realm with others and build a community</h2>
|
||
|
|
<h3>Challenge</h3>
|
||
|
|
<p>Create a platform where users can share their own Minecraft realm so others can request to join. In addition, a system for promoting users realms on the front page to monetize the website.</p>
|
||
|
|
<h3>Solution</h3>
|
||
|
|
<p>The frontend was built using next.js. The final product has many user specific features such as notifications, dark mode, settings, and profiles.</p>
|
||
|
|
<img src="/img/project/realms/login.png" alt="Sign in modal">
|
||
|
|
<em>Discord, Microsoft, and username/password auth providers</em>
|
||
|
|
<p>Adding a blog section helps users with common questions about realms. The blog also functions to attract more people to the website and allow the site to rank higher in search engines.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|