Add templates
Lonami Exo totufals@hotmail.com
Sat, 06 Feb 2021 17:53:46 +0100
9 files changed,
216 insertions(+),
0 deletions(-)
A
templates/base.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="description" content="Official Lonami's website"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> + + <title>Lonami's Site</title> + {% block css %} + <link rel="stylesheet" type="text/css" href="/style.css"> + {% endblock %} +</head> +<body> + <nav class="sections"> + <ul> + <li><a href="/" class="selected">lonami's site</a></li> + <li><a href="/blog">blog</a></li> + <li><a href="/golb">golb</a></li> + </ul> + </nav> + <main> + {% block content %}{% endblock %} + </main> +</body> +</html>
A
templates/blog-page.html
@@ -0,0 +1,10 @@
+{% extends "base.html" %} + +{% block content %} +<h1 class="title">{{ page.title }}</h1> +<div class="time"> + <p>{{ page.date }}</p> + {% if page.updated and page.updated != page.date %}<p>last updated {{ page.updated }}</p>{% endif %} +</div> +{{ page.content | safe }} +{% endblock %}
A
templates/blog.html
@@ -0,0 +1,60 @@
+{% extends "base.html" %} + +{% block content %} +<h1 class="title">{{ section.title }}</h1> +<p id="welcome" onclick="pls_stop()">Welcome to my blog!</p> + +<p>Here I occasionally post new entries, mostly tech related. Perhaps it's tips for a new game I'm playing, perhaps it has something to do with FFI, or perhaps I'm fightning the borrow checker (just kidding, I'm over that. Mostly).</p> + +<hr> + +<ul> + {% for page in section.pages %} + <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a><span class="dim"> + {% if page.taxonomies.category %} + [mod {{ page.taxonomies.category[0] }}; + {% for t in page.taxonomies.tags %}'{{ t }}{% if not loop.last %}, {% endif %}{% endfor %}] + {% endif %} + </span></li> + {% endfor %} +</ul> + +<script> + const WELCOME_EN = 'Welcome to my blog!' + const WELCOME_ES = '¡Bienvenido a mi blog!' + const APOLOGIES = "ok sorry i'll stop" + const REWRITE_DELAY = 5000 + const CHAR_DELAY = 30 + const welcome = document.getElementById('welcome') + + let deleting = true + let english = false + let stopped = false + + const pls_stop = () => { + stopped = true + welcome.innerHTML = APOLOGIES + } + + const begin_rewrite = () => { + if (stopped) { + // now our visitor is angry :( + } else if (deleting) { + if (welcome.innerHTML == '…') { + deleting = false + } else { + welcome.innerHTML = welcome.innerHTML.slice(0, -1) || '…' + } + setTimeout(begin_rewrite, CHAR_DELAY) + } else { + let text = english ? WELCOME_EN : WELCOME_ES + welcome.innerHTML = text.slice(0, welcome.innerHTML.length + 1) + deleting = welcome.innerHTML.length == text.length + english = deleting - english + setTimeout(begin_rewrite, deleting ? REWRITE_DELAY : CHAR_DELAY) + } + } + + setTimeout(begin_rewrite, REWRITE_DELAY) +</script> +{% endblock %}
A
templates/golb.html
@@ -0,0 +1,16 @@
+{% extends "base.html" %} + +{% block content %} +<h1 class="title">{{ section.title }}</h1> +<p>Welcome to my golb!</p> + +<p>It's like my blog, but with things that are a bit more… personal? Random? Spanish? Yeah!</p> + +<hr> + +<ul> + {% for page in section.pages %} + <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li> + {% endfor %} +</ul> +{% endblock %}
A
templates/index.html
@@ -0,0 +1,105 @@
+{% extends "base.html" %} + +{% block css %} +{{ super() }} + +<style> +.golb { + transform: scaleY(-1); + transition: transform 300ms; +} + +.golb:hover { + transform: scaleY(1); +} +</style> +{% endblock %} + +{% block content %} +<h1>Lonami's Site</h1> +<p>Welcome to my personal website! This page has had several redesigns +over time, but now I've decided to let it be as minimalist as possible +(proud to be under 32KB!).</p> + +<h2 id="about">About me</h2> +<p>Spanish male +<span id="age"><noscript>born in 1998</noscript></span>. +I have been programming +<span id="programming"><noscript>since 2012</noscript></span> +and it is my passion.</p> + +<p>I enjoy nature, taking pictures, playing video-games, +drawing vector graphics, or just chatting online.</p> + +<p>I can talk perfect Spanish, read and write perfect English +and Python, and have programmed in C#, Java, JavaScript, Rust, +some C and C++, and designed pages like this with plain HTML +and CSS.</p> + +<p>On the Internet, I'm often known as <i>Lonami</i>, although +my real name is simply my nick name, put the other way round.</p> + +<h2 id="projects">Project highlights</h2> +<ul> +<li> +<a href="https://github.com/LonamiWebs/Telethon/">Telethon</a>: +Python implementation of the Telegram's API. +</li> +<li> +<a href="klooni">1010! Klooni</a>: libGDX simple puzzle +game based on the original <i>1010!</i>. +</li> +<li> +<a href="https://github.com/LonamiWebs/Stringlate/">Stringlate</a>: +Android application that makes it easy to translate other FOSS apps. +</li> +</ul> +<p>These are only my <i>Top 3</i> projects, the ones I consider to be +the most successful. If you're curious about what else I've done, feel +free to check out my +<a href="https://github.com/LonamiWebs/">GitHub</a>.</p> + +<h2 id="more-links">More links</h2> +<dl> + <dt><a href="https://t.me/LonamiWebs"><img src="img/telegram.svg" alt="" /> My Telegram</a></dt> + <dd>Come meet me at my group in Telegram and talk about anything!</dd> + + <dt><a href="/blog"><img src="img/blog.svg" alt="blog" /> My blog</a></dt> + <dd>Sometimes I blog about things, whether it's games, techy stuff, or random life stuff.</dd> + + <dt><a href="/golb"><img src="img/blog.svg" class="golb" alt="golb" /> My golb</a></dt> + <dd>What? You don't know what a golb is? It's like a blog, but less conventional.</dd> + + <dt><a href="https://github.com/LonamiWebs"><img src="img/github.svg" alt="github" /> My GitHub</a></dt> + <dd>By far what I'm most proud of. I love releasing my projects as open source. There is no reason not to!</dd> + + <dt><a href="/utils"><img src="img/utils.svg" alt="utilities" /> Several Utilities</a></dt> + <dd>Random things I've put online because I keep forgetting about them.</dd> + + <dt><a href="/stopwatch.html"><img src="stopwatch.svg" width="24" height="24" alt="stopwatch" /> stopwatch</a></dt> + <dd>An extremely simple JavaScript-based stopwatch.</dd> + + <dt><a href="donate"><img src="img/bitcoin.svg" alt="donate" /> Donate</a></dt> + <dd>Some people like what I do and want to compensate me for it, but I'm fine with compliments if you can't afford a donation!</dd> + + <dt><a href="humans.txt"><img src="img/humans.svg" alt="humans.txt" /> humans.txt</a></dt> + <dd><a href="http://humanstxt.org/">We are humans, not robots.</a></dd> +</dl> + +<h2 id="contact">Contact</h2> +<p>If you use Telegram you can join +<a href="https://t.me/LonamiWebs">@LonamiWebs</a> +and just chat about any topics you like politely.</p> + +<p>If you prefer, you can also send me a private email to +<a href="mailto:totufals@hotmail.com">totufals[at]hotmail[dot]com</a> +and I will try to reply as soon as I can. Please don't use the email +if you need help with a specific project, this is better discussed in +the group where everyone can benefit from it.</p> +{% endblock %} + +<script type="text/javascript"> + now = (new Date()).getFullYear(); + document.getElementById("age").innerHTML = "aged " + (now - 1999); + document.getElementById("programming").innerHTML = "for " + (now - 2012) + " years"; +</script>