198 lines
7.3 KiB
Text
198 lines
7.3 KiB
Text
|
---
|
||
|
|
layout: base.njk
|
||
|
|
title: ~/home
|
||
|
|
permalink: /
|
||
|
|
---
|
||
|
|
|
||
|
|
{# ── Desktop icons ───────────────────────────────── #}
|
||
|
|
<div class="desktop-icons" aria-label="Desktop icons">
|
||
|
|
<div class="desktop-icon" data-opens="win-about" role="button" tabindex="0" aria-label="Open about">
|
||
|
|
<div class="icon-art">[i]</div>
|
||
|
|
<div class="icon-label">about</div>
|
||
|
|
</div>
|
||
|
|
<div class="desktop-icon" data-opens="win-blog" role="button" tabindex="0" aria-label="Open blog">
|
||
|
|
<div class="icon-art">[/]</div>
|
||
|
|
<div class="icon-label">blog/</div>
|
||
|
|
</div>
|
||
|
|
<div class="desktop-icon" data-opens="win-projects" role="button" tabindex="0" aria-label="Open projects">
|
||
|
|
<div class="icon-art">[*]</div>
|
||
|
|
<div class="icon-label">projects</div>
|
||
|
|
</div>
|
||
|
|
<div class="desktop-icon" data-opens="win-contact" role="button" tabindex="0" aria-label="Open contact">
|
||
|
|
<div class="icon-art">[@]</div>
|
||
|
|
<div class="icon-label">contact</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# ════════════════════════════════════════════════ #}
|
||
|
|
{# ABOUT WINDOW #}
|
||
|
|
{# ════════════════════════════════════════════════ #}
|
||
|
|
<div class="window hidden"
|
||
|
|
id="win-about"
|
||
|
|
data-wid="win-about"
|
||
|
|
data-title="about.sh"
|
||
|
|
style="top:50px; left:120px; width:440px;">
|
||
|
|
|
||
|
|
<div class="window-content">
|
||
|
|
<h1>$ ./about.sh</h1>
|
||
|
|
<p>Hi, I'm <strong>{{ site.author }}</strong>.</p>
|
||
|
|
<p>{{ site.bio }}</p>
|
||
|
|
|
||
|
|
<h2>Skills</h2>
|
||
|
|
<ul>
|
||
|
|
<li>Systems & low-level programming</li>
|
||
|
|
<li>Web development (front + back)</li>
|
||
|
|
<li>Open source / UNIX tooling</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2>Contact</h2>
|
||
|
|
<p>
|
||
|
|
<a href="{{ site.github }}" target="_blank" rel="noopener">github</a> ·
|
||
|
|
<a href="mailto:{{ site.email }}">email</a>
|
||
|
|
</p>
|
||
|
|
<p><a href="/boring/about/">→ plaintext version</a></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# ════════════════════════════════════════════════ #}
|
||
|
|
{# BLOG WINDOW #}
|
||
|
|
{# ════════════════════════════════════════════════ #}
|
||
|
|
<div class="window hidden"
|
||
|
|
id="win-blog"
|
||
|
|
data-wid="win-blog"
|
||
|
|
data-title="blog/"
|
||
|
|
style="top:60px; left:400px; width:500px; height:460px;">
|
||
|
|
|
||
|
|
<div class="window-content" id="blog-window-content">
|
||
|
|
|
||
|
|
{# ── Listing view ─────────────────────────── #}
|
||
|
|
<div id="blog-listing">
|
||
|
|
|
||
|
|
{# Tag filters #}
|
||
|
|
{% set tagCounts = collections.posts | tagCounts %}
|
||
|
|
{% if tagCounts.length %}
|
||
|
|
<div class="blog-tags">
|
||
|
|
<button class="blog-tag active" data-tag="*">all <span class="tag-count">{{ collections.posts.length }}</span></button>
|
||
|
|
{% for tc in tagCounts %}
|
||
|
|
<button class="blog-tag" data-tag="{{ tc.tag }}">{{ tc.tag }} <span class="tag-count">{{ tc.count }}</span></button>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{# Post list #}
|
||
|
|
{% if collections.posts.length %}
|
||
|
|
<ul class="post-list" id="blog-post-list">
|
||
|
|
{% for post in collections.posts %}
|
||
|
|
<li class="post-list-item"
|
||
|
|
data-tags="{{ post.data.tags | join(' ') if post.data.tags else '' }}">
|
||
|
|
<a href="#"
|
||
|
|
class="blog-open-post"
|
||
|
|
data-post-idx="{{ loop.index0 }}">{{ post.data.title }}</a>
|
||
|
|
<span class="post-date">{{ post.date | readableDate }}</span>
|
||
|
|
</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
{% else %}
|
||
|
|
<p style="color:var(--p-dim);">No posts yet — check back soon.</p>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<p style="margin-top:14px; border-top:1px solid var(--p-dim); padding-top:10px;">
|
||
|
|
<a href="/boring/blog/">→ plaintext version</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# ── Per-post views (built at compile time, hidden by default) ── #}
|
||
|
|
{% for post in collections.posts %}
|
||
|
|
<div class="blog-post-panel hidden" id="blog-post-{{ loop.index0 }}">
|
||
|
|
<button class="blog-back">← back</button>
|
||
|
|
<h2 style="margin-top:10px;">{{ post.data.title }}</h2>
|
||
|
|
<p class="post-meta">
|
||
|
|
{{ post.date | readableDate }}
|
||
|
|
{% if post.data.tags %}· {{ post.data.tags | join(', ') }}{% endif %}
|
||
|
|
</p>
|
||
|
|
<hr class="post-rule">
|
||
|
|
{{ post.templateContent | safe }}
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# ════════════════════════════════════════════════ #}
|
||
|
|
{# PROJECTS WINDOW #}
|
||
|
|
{# ════════════════════════════════════════════════ #}
|
||
|
|
<div class="window hidden"
|
||
|
|
id="win-projects"
|
||
|
|
data-wid="win-projects"
|
||
|
|
data-title="projects.sh"
|
||
|
|
style="top:140px; left:120px; width:560px; height:380px;">
|
||
|
|
|
||
|
|
<div class="window-content">
|
||
|
|
<h2>Projects</h2>
|
||
|
|
<div class="project-grid">
|
||
|
|
<div class="project-card">
|
||
|
|
<h3>project-alpha</h3>
|
||
|
|
<p>Sample project. Replace with your actual work.</p>
|
||
|
|
<div class="tags">
|
||
|
|
<span class="tag">rust</span>
|
||
|
|
<span class="tag">cli</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="project-card">
|
||
|
|
<h3>project-beta</h3>
|
||
|
|
<p>Another interesting thing you built.</p>
|
||
|
|
<div class="tags">
|
||
|
|
<span class="tag">typescript</span>
|
||
|
|
<span class="tag">web</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="project-card">
|
||
|
|
<h3>project-gamma</h3>
|
||
|
|
<p>Open source tooling for fun and profit.</p>
|
||
|
|
<div class="tags">
|
||
|
|
<span class="tag">python</span>
|
||
|
|
<span class="tag">oss</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p style="margin-top:14px"><a href="/boring/projects/">→ plaintext version</a></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# ════════════════════════════════════════════════ #}
|
||
|
|
{# CONTACT WINDOW #}
|
||
|
|
{# ════════════════════════════════════════════════ #}
|
||
|
|
<div class="window hidden"
|
||
|
|
id="win-contact"
|
||
|
|
data-wid="win-contact"
|
||
|
|
data-title="contact"
|
||
|
|
style="top:120px; left:240px; width:480px;">
|
||
|
|
|
||
|
|
<div class="window-content">
|
||
|
|
<h2>Get in touch</h2>
|
||
|
|
|
||
|
|
<h3>Mail</h3>
|
||
|
|
<p><a href="mailto:{{ site.email }}">{{ site.email }}</a></p>
|
||
|
|
|
||
|
|
<h3>GitHub</h3>
|
||
|
|
<p><a href="{{ site.github }}" target="_blank" rel="noopener">{{ site.github }}</a></p>
|
||
|
|
|
||
|
|
<h3>PGP</h3>
|
||
|
|
<p style="color:var(--p-dim); font-size:13px; margin-bottom:6px;">
|
||
|
|
Fingerprint:
|
||
|
|
</p>
|
||
|
|
<pre>{{ site.pgp_fingerprint }}</pre>
|
||
|
|
<p style="color:var(--p-dim); font-size:13px;">
|
||
|
|
Key available on
|
||
|
|
<a href="https://keys.openpgp.org" target="_blank" rel="noopener">keys.openpgp.org</a>
|
||
|
|
or on request.
|
||
|
|
</p>
|
||
|
|
<p style="margin-top:14px"><a href="/boring/contact/">→ plaintext version</a></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script src="/assets/js/blog.js"></script>
|