145 lines
6.9 KiB
HTML
Executable File
145 lines
6.9 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|
<title>Luna</title>
|
|
|
|
<!-- GLightbox -->
|
|
<link rel="stylesheet" href="css/glightbox.min.css">
|
|
|
|
<!-- Bulma -->
|
|
<link rel="stylesheet" href="css/bulma.min.css">
|
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
<!-- Twitter and OpenGraph -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:creator" content="@programmerpony">
|
|
<meta name="twitter:title" content="Luna's card">
|
|
<meta property="og:title" content="Luna's card">
|
|
<meta name="og:description" content="Because I don't want proprietary software to introduce me.">
|
|
<meta name="twitter:image" content="https://programmerpony.com/images/preview.png">
|
|
<meta name="og:image" content="https://programmerpony.com/images/preview.png">
|
|
|
|
</head>
|
|
<body>
|
|
<section class="section">
|
|
<div class="container">
|
|
<figure class="image is-128x128 centered">
|
|
<a href="./images/preview.png" class="glightbox" data-gallery="avatar">
|
|
<img class="is-rounded avatar" src="./images/favicon.png" alt="A drawing of a white-coated, lavender-maned unicorn with a curly braces (programming) cutie mark. She's got a really long mane and tail. She's holding a pink keyboard." title="A drawing of a white-coated, lavender-maned unicorn with a curly braces (programming) cutie mark. She's got a really long mane and tail. She's holding a pink keyboard.">
|
|
</a>
|
|
</figure>
|
|
<h1 class="title centered white">
|
|
Luna 🌙
|
|
</h1>
|
|
<p class="subtitle centered white">
|
|
programmer and gay pony
|
|
</p>
|
|
<div class="columns is-centered">
|
|
<div class="column is-half">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h1 class="title centered">About me</h1>
|
|
<div class="content centered">
|
|
<p>
|
|
<a class="glightbox" data-gallery="flags" data-glightbox="title: Sexual diversity flag; description: Also known as the LGBT+ flag, the rainbow flag or the queer flag." href="./images/flags/rainbow.svg">
|
|
<img class="image pride" src="./images/flags/rainbow.svg" alt="Sexual diversity (rainbow) flag" title="Sexual diversity (rainbow) flag">
|
|
</a>
|
|
<a class="glightbox" data-gallery="flags" data-glightbox="title: Enbian pride flag; description: I love my enbyfriend uwu" href="./images/flags/enbian.svg">
|
|
<img class="image pride" src="./images/flags/enbian.svg" alt="Enbian pride flag" title="Enbian pride flag">
|
|
</a>
|
|
<a class="glightbox" data-gallery="flags" data-glightbox="title: Aroace pride flag; description: Demiromantic and demisexual." href="./images/flags/aroace.svg">
|
|
<img class="image pride" src="./images/flags/aroace.svg" alt="Aroace pride flag" title="Aroace pride flag">
|
|
</a>
|
|
<a class="glightbox" data-gallery="flags" data-glightbox="title: Transgender pride flag; description: Trans rights are human rights!" href="./images/flags/trans.svg">
|
|
<img class="image pride" src="./images/flags/trans.svg" alt="Transgender pride flag" title="Transgender pride flag">
|
|
</a>
|
|
</p>
|
|
<p>Furry | Hacker | Autistic | ☭</p>
|
|
<p class="pronouns">
|
|
<b>Pronouns:</b> <a target="_blank" rel="me" href="https://pronouns.cc/@programmerpony">She/They/Vi</a>
|
|
</p>
|
|
<p style="font-size: .75rem;">
|
|
I use Arch btw
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="columns is-centered">
|
|
<div class="column">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h1 class="title centered">Boring stuff that I like</h1>
|
|
<div class="content centered">
|
|
<ul>
|
|
<li lang="es"><a href="https://en.wikipedia.org/wiki/Free_software">Software libre</a></li>
|
|
<li><a href="https://en.wikipedia.org/wiki/Free-culture_movement">Free culture</a></li>
|
|
<li><a href="https://en.wikipedia.org/wiki/History">History</a></li>
|
|
<li><a href="https://en.wikipedia.org/wiki/Sociology">Sociology</a></li>
|
|
<li><a href="https://en.wikipedia.org/wiki/Class_conflict">Class warfare</a></li>
|
|
<li><a href="https://en.wikipedia.org/wiki/Computer_programming">Programming</a></li>
|
|
</ul>
|
|
<div class="social">
|
|
<a href="https://codeberg.org/programmerpony" class="button is-dark">
|
|
<span class="icon" aria-hidden="true">
|
|
<img src="images/icons/forgejo.svg" alt="">
|
|
</span>
|
|
<span lang="eo">Forgejo</span>
|
|
</a>
|
|
<a rel="me" href="https://queer.party/@programmerpony" class="button is-dark">
|
|
<span class="icon" aria-hidden="true">
|
|
<img src="images/icons/mastodon.svg" alt="">
|
|
</span>
|
|
<span>Mastodon</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h1 class="title centered">Gay stuff that I like</h1>
|
|
<div class="content centered">
|
|
<ul>
|
|
<li>Star vs. the Forces of Evil</li>
|
|
<li>My Little Pony</li>
|
|
<li>She-Ra (2018)</li>
|
|
<li>Amphibia</li>
|
|
<li>The Owl House</li>
|
|
<li>Celeste</li>
|
|
<li>Minecraft</li>
|
|
<li>Portal</li>
|
|
<li>Star Wars</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="section f">
|
|
<div class="container">
|
|
<p class="centered white">
|
|
This page is licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">GNU Affero General Public License 3.0</a> and its source code can be found <a href="https://codeberg.org/programmerpony/card">here</a>. |
|
|
The pony artwork featured in this page is made by <a href="https://twitter.com/KyomiKogei">Kyomi Kogei</a> and commercial use of it is not allowed.
|
|
<noscript>JavaScript is required for lightboxes to open.</noscript>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
<script src="js/glightbox.min.js"></script>
|
|
<script>
|
|
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
|
const lightbox = GLightbox({ autoplayVideos: true });
|
|
// @license-end
|
|
</script>
|
|
</body>
|
|
</html>
|