tanner/personal-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: tanner:columns
Branches Tags
tanner:master tanner:columns
..
compare: tanner:bfc93af28f27d991181b26b7799acc1b857d74e0
Branches Tags
tanner:master tanner:columns

9 Commits
columns ... bfc93af28f

Author SHA1 Message Date
Tanner Collin
bfc93af28f Optimize me.jpg 2021-07-25 08:54:05 +00:00
Tanner Collin
7a73eafa85 Add robots.txt 2021-07-25 08:53:52 +00:00
Tanner Collin
9f90810e0f Remove custom font files 2021-07-23 13:14:56 +00:00
Tanner Collin
dca5d47578 Remove custom fonts from CSS 2021-07-23 13:11:13 +00:00
Tanner Collin
495f964297 Add webring 2021-07-23 12:57:02 +00:00
Tanner Collin
f234121e3f Add corrections to bypassing ports 2021-07-23 12:56:38 +00:00
Tanner Collin
f76b8e7bf4 Move source code links beside titles 2021-06-16 07:41:26 +00:00
Tanner Collin
2c5c0750bf Remove unused PHP 2021-06-16 07:40:00 +00:00
Tanner Collin
bda333c88a Add writing to home page 2021-06-16 07:36:09 +00:00
16 changed files with 107 additions and 213 deletions
Expand all files Collapse all files

6
content/bypassing-ports.md
View File

@@ -52,7 +52,7 @@ $ sudo make-cadir easy-rsa/
$ sudo chown -R tanner:tanner easy-rsa/ $ sudo chown -R tanner:tanner easy-rsa/
``` ```
Replace `tanner` with your own username, this is temporary. Replace `tanner` with your Linux username, this is temporary.
<span class="aside">The `.rnd` file prevents a warning</span> <span class="aside">The `.rnd` file prevents a warning</span>
@@ -88,7 +88,7 @@ We make a `mediaserver` client because we want to assign a static IP to it. You
need to make a different one for each client you want with a static IP. need to make a different one for each client you want with a static IP.
Also, if you want generic clients that all get dynamic IPs for use on your Also, if you want generic clients that all get dynamic IPs for use on your
laptop, phone, etc. to protect you from public WiFi, create only a single extra one: laptop, phone, etc. to protect you from public WiFi (like a normal VPN), create only a single extra one:
``` ```
$ ./easyrsa build-client-full client nopass # optional $ ./easyrsa build-client-full client nopass # optional
@@ -376,7 +376,7 @@ To add your VPN on Gnome, open VPN settings, import file, and select
You should now be fine to access your home server from over the internet. You should now be fine to access your home server from over the internet.
To forward additional ports, just edit the `/etc/ufw/before.rules` file like To forward additional ports, just edit the `/etc/ufw/before.rules` file like
above. above and apply the changes to `ufw`.
You can now point a domain to your virtual server's IP and use that to connect You can now point a domain to your virtual server's IP and use that to connect
to your home server. Use a CNAME to make it easy to change later: to your home server. Use a CNAME to make it easy to change later:

2
content/extra/robots.txt Normal file
View File

@@ -0,0 +1,2 @@
User-agent: *
Disallow:

BIN
themes/theme/static/fonts/AppSILB.ttf
View File

Binary file not shown.

BIN
themes/theme/static/fonts/AppSILBI.ttf
View File

Binary file not shown.

BIN
themes/theme/static/fonts/AppSILI.ttf
View File

Binary file not shown.

BIN
themes/theme/static/fonts/AppSILR.ttf
View File

Binary file not shown.

BIN
themes/theme/static/fonts/Lato-Bold.ttf
View File

Binary file not shown.

BIN
themes/theme/static/fonts/Lato-BoldItalic.ttf
View File

Binary file not shown.

BIN
themes/theme/static/fonts/Lato-Italic.ttf
View File

Binary file not shown.

BIN
themes/theme/static/fonts/Lato-Regular.ttf
View File

Binary file not shown.

BIN
themes/theme/static/me.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
themes/theme/static/me.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

25
themes/theme/templates/base.html
View File

@@ -1,12 +1,3 @@
{% if PROD %}
<?php
$themeClass = '';
if (!empty($_COOKIE['theme'])) {
$themeClass = $_COOKIE['theme'];
}
?>
{% endif %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@@ -18,21 +9,10 @@
<meta name="author" content="{{ AUTHOR }}" /> <meta name="author" content="{{ AUTHOR }}" />
{% endblock head %} {% endblock head %}
<link rel="preload" href="/theme/fonts/AppSILB.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="/theme/fonts/AppSILBI.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="/theme/fonts/AppSILI.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="/theme/fonts/AppSILR.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="/theme/fonts/Lato-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="/theme/fonts/Lato-BoldItalic.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="/theme/fonts/Lato-Italic.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="/theme/fonts/Lato-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="icon" href="favicon.svg"> <link rel="icon" href="favicon.svg">
<style> <style>
{% include 'style.css' %} {% include 'style.css' %}
{% include 'fonts.css' %}
</style> </style>
<script defer src="/theme/instant-page.js"></script> <script defer src="/theme/instant-page.js"></script>
@@ -49,7 +29,10 @@
{% endblock %} {% endblock %}
</div> </div>
<p class="copyright"> <p class="footer">
<span class="wname">Webring:</span> <a href="https://jason.schwarzenberger.co.nz/" class="wprev">&lt; Previous</a> | <a href="https://webring.t0.vc" class="windex">Index</a> | <a href="https://udia.ca" class="wnext">Next &gt;</a>
</p>
<p class="footer">
© 2012–2021 Tanner Collin © 2012–2021 Tanner Collin
</p> </p>
</body> </body>

59
themes/theme/templates/fonts.css
View File

@@ -1,59 +0,0 @@
@font-face {
font-family: 'Apparatus SIL';
src: url('/theme/fonts/AppSILR.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Apparatus SIL';
font-style: italic;
src: url('/theme/fonts/AppSILI.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Apparatus SIL';
font-weight: bold;
src: url('/theme/fonts/AppSILB.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Apparatus SIL';
font-weight: bold;
font-style: italic;
src: url('/theme/fonts/AppSILBI.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url('/theme/fonts/Lato-Italic.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('/theme/fonts/Lato-BoldItalic.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url('/theme/fonts/Lato-Regular.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url('/theme/fonts/Lato-Bold.ttf') format('truetype');
font-display: swap;
}

166
themes/theme/templates/index.html
View File

@@ -8,7 +8,12 @@
{% endblock %} {% endblock %}
{% block info %} {% block info %}
<img src="/theme/me.jpg" width="128" class="me" alt="me smiling wide and looking into the camera lit up brightly" /> <picture>
<source type="image/webp" srcset="/theme/me.webp">
<source type="image/jpeg" srcset="/theme/me.jpg">
<img src="/theme/me.jpg" width="128" height="164" class="me" alt="me smiling wide and looking into the camera lit up brightly">
</picture>
<div class="info"> <div class="info">
<h1>Tanner Collin</h1> <h1>Tanner Collin</h1>
<p class="contact-icons"> <p class="contact-icons">
@@ -20,103 +25,94 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="content content-index"> <div class="content index">
<p> <p>
Hi, I'm Tanner! I do firmware and web development in Calgary. Hi, I'm Tanner! I do firmware and web development in Calgary.
</p> </p>
<div class="leftcol"> <h2>Contact Info</h2>
<div class="inside">
<h2>Contact Info</h2> <p>
Email: <a href="mailto:site2@tannercollin.com">site2@tannercollin.com</a> <br />
Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a>
</p>
<p> <h2>Resume</h2>
Email: <a href="mailto:site2@tannercollin.com">site2@tannercollin.com</a> <br />
Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a>
</p>
<h2>Resume</h2> <ul>
<li>Firmware Engineer at <a href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018–</li>
<li>Lead Hardware Engineer at <a href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 2016–2018</li>
<li>Electrical Engineer at <a href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 2016–2016</li>
<li>Electrical Engineer Intern at <a href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 2014–2015</li>
<li>BSc. Electrical Engineering from University of Calgary</li>
</ul>
<ul> <h2>Projects</h2>
<li>Firmware Engineer at <a href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018–</li>
<li>Lead Hardware Engineer at <a href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 2016–2018</li>
<li>Electrical Engineer at <a href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 2016–2016</li>
<li>Electrical Engineer Intern at <a href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 2014–2015</li>
<li>BSc. Electrical Engineering from University of Calgary</li>
</ul>
<h2>Projects</h2> <p>
My main hobby is working on software projects. I typically design websites or
build tools that make my life easier.
</p>
<p> <h3>
My main hobby is working on software projects. I typically design websites or <a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a>
build tools that make my life easier. — <a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a>
</p> </h3>
<div class="summary">
<h3> <p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p>
<a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a>
— <a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p>
</div>
<h3>
<a href="https://notica.us" target="_blank" rel="noreferrer noopener">Notica</a>
— <a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Send browser notifications from your terminal. No installation. No registration.</p>
</div>
<h3>
<a href="https://my.protospace.ca" target="_blank" rel="noreferrer noopener">Spaceport</a>
— <a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p>
</div>
<h3>
<a href="https://txt.t0.vc" target="_blank" rel="noreferrer noopener">t0txt</a>
— <a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p>
</div>
<h3>
<a href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
</h3>
<div class="summary">
<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
</div>
</div>
</div> </div>
<div class="rightcol"> <h3>
<div class="inside"> <a href="https://notica.us" target="_blank" rel="noreferrer noopener">Notica</a>
<h2>Creations</h2> — <a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<p>Sometimes I create art or interactive tech.</p> <div class="summary">
<p>Send browser notifications from your terminal. No installation. No registration.</p>
{% for article in articles_page.object_list if article.category.name == 'Projects' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary">
{{ article.summary }}
</div>
{% endfor %}
<h2>Writing</h2>
<p>Various articles, mostly about computers.</p>
{% for article in articles_page.object_list if article.category.name == 'Writing' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary">
{{ article.summary }}
</div>
{% endfor %}
</div> </div>
<h3>
<a href="https://my.protospace.ca" target="_blank" rel="noreferrer noopener">Spaceport</a>
— <a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p>
</div> </div>
<h3>
<a href="https://txt.t0.vc" target="_blank" rel="noreferrer noopener">t0txt</a>
— <a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p>
</div>
<h3>
<a href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
</h3>
<div class="summary">
<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
</div>
<h2>Creations</h2>
<p>Sometimes I create art or interactive tech.</p>
{% for article in articles_page.object_list if article.category.name == 'Projects' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary">
{{ article.summary }}
</div>
{% endfor %}
<h2>Writing</h2>
<p>Various articles, mostly about computers.</p>
{% for article in articles_page.object_list if article.category.name == 'Writing' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary">
{{ article.summary }}
</div>
{% endfor %}
</div> </div>
{% endblock %} {% endblock %}

62
themes/theme/templates/style.css
View File

@@ -4,7 +4,7 @@ html {
body { body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font: 1.2rem/1.0 Lato,sans-serif; font: 1.1rem/1.0 sans-serif;
} }
a { a {
@@ -13,22 +13,27 @@ a {
} }
.info h1 { .info h1 {
font: 1.2rem/1.0 Lato,sans-serif; font: 1.1rem/1.0 sans-serif;
}
.index h3 {
font: 1.1rem/1.5 serif;
} }
.source { .source {
font: 1rem/1.5 Apparatus SIL,serif; font: 0.9rem/1.5 serif;
} }
pre { pre {
font-size: 1rem; font-size: 0.9rem;
line-height: 1.2;
padding: 1rem; padding: 1rem;
overflow-x: auto; overflow-x: auto;
} }
:not(pre)>code { :not(pre)>code {
padding: 0 2px; padding: 0 2px;
font-size: 0.9rem; font-size: 0.8rem;
} }
.container { .container {
@@ -36,8 +41,8 @@ pre {
margin: 2rem auto 12rem auto; margin: 2rem auto 12rem auto;
} }
.copyright { .footer {
font: 1rem/1.5 Apparatus SIL,serif; font: 0.9rem/1.5 serif;
text-align: center; text-align: center;
} }
@@ -58,14 +63,13 @@ pre {
} }
.content p.metadata { .content p.metadata {
font: 1rem/1.0 Apparatus SIL,serif; font: 0.9rem/1.0 serif;
font-style: italic; font-style: italic;
} }
.content div.summary p { .content div.summary p {
margin-top: -0.5rem; margin-top: -0.5rem;
margin-left: 1rem; margin-left: 1.5rem;
font-style: italic;
} }
.content { .content {
@@ -73,19 +77,11 @@ pre {
} }
.content-wide { .content-wide {
max-width: 46rem;;
}
.content-index {
max-width: none; max-width: none;
} }
.content-index h3 {
font: 1.2rem/1.5 Apparatus SIL,serif;
}
.content p { .content p {
font: 1.2rem/1.5 Apparatus SIL,serif; font: 1.1rem/1.5 serif;
} }
.content ul { .content ul {
@@ -93,7 +89,7 @@ pre {
} }
.content li { .content li {
font: 1.2rem/1.5 Apparatus SIL,serif; font: 1.1rem/1.5 serif;
} }
.content img { .content img {
@@ -107,7 +103,7 @@ pre {
position: relative; position: relative;
width: 8rem; width: 8rem;
margin-left: -9rem; margin-left: -9rem;
font-size: 1rem; font-size: 0.9rem;
} }
.toclink:not(:hover) { .toclink:not(:hover) {
@@ -183,30 +179,6 @@ pre {
} }
} }
@media screen and (min-width:58rem) {
.container {
max-width: 75rem;
}
.leftcol {
float: left;
width: 50%;
margin-top: -1rem;
}
.leftcol > .inside {
padding-right: 1rem;
}
.rightcol {
overflow: hidden;
margin-top: -1rem;
}
.rightcol > .inside {
padding-left: 1rem;
}
}
body { body {
background-color: #eee; background-color: #eee;