feat: v1.0.0

assets/css/reset.css

@@ -0,0 +1,135 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: "";
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

assets/css/style.css

@@ -0,0 +1,348 @@
+@font-face {
+    font-display: swap;
+    font-family: 'Sedan';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/sedan-v1-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Sedan';
+    font-style: italic;
+    font-weight: 400;
+    src: url('../fonts/sedan-v1-latin-italic.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Clash Display';
+    font-style: normal;
+    font-weight: 200 700;
+    src: url('../fonts/ClashDisplay-Variable.woff2') format('woff2');
+}
+
+:root {
+    --body-bg-color: #000;
+
+    --base-font-size: 18px;
+
+    --font-family-serif: "Sedan", serif;
+    --font-family-sans-serif: "Clash Display", sans-serif;
+
+    --font-heading: var(--font-family-sans-serif);
+    --font-body: var(--font-family-serif);
+
+    --primary-color: #FCB001;
+    --secondary-color: #5D21D0;
+    --text-color: #fff;
+    --anchor-color: inherit;
+}
+
+::selection {
+    background-color: #f8c8dc;
+}
+
+body {
+    background-color: var(--body-bg-color);
+    font-size: 16px;
+    font-family: var(--font-body);
+
+    text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+
+    text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-heading);
+    font-weight: 600;
+}
+
+a {
+    color: var(--anchor-color);
+}
+
+hr {
+    margin-top: 6.66rem;
+    margin-bottom: 16.666rem;
+    width: 30.666%;
+    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" width="12" height="15"><path fill="none" stroke="orange" stroke-width="3" d="M0,13.5c3,0,3-12,6-12s3,12,6,12"/></svg>') 0 0 100% repeat;
+    border-width: 0 0 15px;
+    border-style: solid;
+    position: relative;
+}
+
+p {
+    line-height: 1.8rem;
+    margin-bottom: 0.5rem;
+}
+
+p+p {
+    margin-top: 1.3rem;
+}
+
+strong {
+    font-weight: bold;
+}
+
+em {
+    font-style: italic;
+}
+
+footer {
+    color: var(--text-color);
+    font-family: var(--font-family-serif);
+    text-align: center;
+    margin-bottom: 5rem;
+    padding: 0 1rem;
+}
+
+footer a {
+    color: var(--primary-color);
+}
+
+.l-container {
+    max-width: 1024px;
+    margin: 0;
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+}
+
+.l-container h2 {
+    text-align: center;
+    font-size: 2.3rem;
+    font-weight: 400;
+    color: var(--primary-color);
+    font-family: var(--font-family-serif);
+    font-style: italic;
+    line-height: 3.5rem;
+    padding: 0 2rem;
+}
+
+.l-home,
+.l-socials {
+    padding-top: 10rem;
+    margin-bottom: 8rem;
+}
+
+.l-socials h2 {
+    font-family: var(--font-family-sans-serif);
+    font-weight: 600;
+    font-style: normal;
+}
+
+.l-socials em {
+    font-family: var(--font-family-serif);
+}
+
+.l-socials span {
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    font-style: normal;
+}
+
+.l-socials a {
+    text-decoration: none;
+}
+
+.l-socials a:hover {
+    text-decoration: underline;
+}
+
+.l-home p,
+.l-socials p {
+    text-align: center;
+    font-size: 2rem;
+    word-break: break-word;
+    color: var(--text-color);
+    font-family: var(--font-family-sans-serif);
+    font-weight: 600;
+    font-style: normal;
+    margin-top: 8rem;
+    line-height: 3rem;
+}
+
+.c-hero {
+    min-height: 100vh;
+}
+
+.c-hero a {
+    text-decoration: none;
+    transition: 0.3s all;
+}
+
+.c-hero a:hover {
+    color: var(--text-color);
+}
+
+.c-hero em {
+    font-family: var(--font-family-serif);
+}
+
+.c-hero span {
+    display: block;
+    margin-top: 2.8rem;
+    color: var(--text-color);
+    text-align: center;
+    font-size: 1.8rem;
+    font-family: var(--font-family-serif);
+    font-style: italic;
+    line-height: 2.3rem;
+    margin-bottom: 4rem;
+}
+
+.c-hero__title {
+    font-size: 3.8rem;
+    font-weight: 900;
+    color: var(--primary-color);
+    padding: 1.8rem;
+}
+
+.c-hero__bg {
+    position: absolute;
+    bottom: 160px;
+    right: 0;
+    z-index: -10;
+    text-align: right;
+}
+
+.c-hero__bg img {
+    max-width: 50%;
+}
+
+.c-showcase-section {
+    margin-bottom: 10rem;
+}
+
+.c-showcase {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: auto;
+}
+
+.c-showcase--single {
+    grid-template-columns: auto;
+}
+
+.c-showcase-title {
+    padding-top: 2rem !important;
+}
+
+.c-showcase__item {
+    text-align: center;
+    max-width: 300px;
+    margin: auto;
+}
+
+.c-showcase__item-image {
+    margin-top: 3rem;
+    max-width: 200px;
+}
+
+.c-showcase__item-title {
+    color: var(--text-color);
+    font-family: var(--font-family-sans-serif);
+    font-weight: 900;
+    font-size: 2rem;
+}
+
+.c-showcase__item-description {
+    color: var(--text-color);
+}
+
+.c-showcase__item-info {
+    margin-top: 15px;
+    height: 140px;
+}
+
+.c-showcase__item-cta {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: block;
+    padding: 10px 10px;
+    background-color: var(--secondary-color);
+    border: 2px solid var(--text-color);
+    box-shadow: 4px 4px var(--text-color);
+    color: var(--text-color);
+    font-family: var(--font-family-sans-serif);
+    font-weight: bold;
+    font-size: 1.5rem;
+    text-decoration: none;
+    transition: 0.3s box-shadow;
+}
+
+.c-showcase__item-cta:hover {
+    border: 2px solid var(--secondary-color);
+    color: var(--secondary-color);
+    border: 2px solid var(--text-color);
+    box-shadow: none;
+    background-color: var(--text-color);
+}
+
+._mastodon {
+    color: #6364ff;
+}
+
+._bluesky {
+    color: #0886fe;
+}
+
+._peertube {
+    color: #F2690D;
+}
+
+@media screen and (min-width: 30em) {
+    body {
+        text-align: justify;
+        font-size: var(--base-font-size);
+    }
+
+    .l-container {
+        margin: 8rem auto;
+        margin-bottom: 0;
+    }
+
+    .c-showcase {
+        grid-template-columns: auto auto auto;
+    }
+
+    .c-showcase--single {
+        grid-template-columns: auto;
+    }
+
+    .c-hero__title {
+        padding: 0;
+        padding-top: 2rem;
+        font-size: 6.66rem;
+    }
+
+    .c-hero__bg {
+        position: absolute;
+        bottom: -130px;
+        right: 210px;
+        z-index: -10;
+    }
+
+    .c-hero__bg img {
+        max-width: 450px;
+    }
+
+    .l-container h2 {
+        font-size: 2.8rem;
+    }
+
+    .l-home p,
+    .l-socials p {
+        font-size: 3rem;
+    }
+}

src/_data/things.js

@@ -0,0 +1,103 @@
+const things = {
+  makes: [{
+    title: "flo",
+    description: "an open source Navidrome client written in Swift",
+    logo: "/assets/img/ios-placeholder.png",
+    ctaTitle: "TBD",
+    ctaLink: "/wip"
+  }],
+  runs: [
+    {
+      title: "Mastodon",
+      description: "an open-source social network server based on ActivityPub where users can follow friends and discover new ones.",
+      logo: "/assets/img/mastodon.png",
+      ctaTitle: "edgy.social",
+      ctaLink: "https://edgy.social"
+    },
+    {
+      title: "PeerTube",
+      description: "an ActivityPub-federated video streaming platform using P2P directly in your web browser.",
+      logo: "/assets/img/peertube.png",
+      ctaTitle: "evilfactorylabs.social",
+      ctaLink: "https://evilfactorylabs.social"
+    },
+    {
+      title: "Forem",
+      description: "an open-source platform for building modern, independent, and safe communities.",
+      logo: "/assets/img/forem.png",
+      ctaTitle: "evilfactorylabs.org",
+      ctaLink: "https://www.evilfactorylabs.org"
+    },
+    {
+      title: "edgyDNS",
+      description: "a recursive, zero-log, DoH/DoT-only DNS that blocks ads and internet trackers.",
+      logo: "/assets/img/ios-placeholder.png",
+      ctaTitle: "edgy.network/dns",
+      ctaLink: "https://edgy.network/dns"
+    },
+    {
+      title: "edgyPROXY",
+      description: "an experimental MiTM proxy that blocks ads, trackers, and other unwanted content.",
+      logo: "/assets/img/ios-placeholder.png",
+      ctaTitle: "edgy.network/proxy",
+      ctaLink: "https://edgy.network/proxy"
+    },
+    {
+      title: "edgy.direct",
+      description: "a relay that bridge the clearnet and yggdrasil networks to maximize P2P connections.",
+      logo: "/assets/img/ios-placeholder.png",
+      ctaTitle: "edgy.direct",
+      ctaLink: "/wip"
+    },
+  ],
+  writes: [
+    {
+      title: "evilfactorylabs",
+      description: "the technical one. sometimes web development other times computer networking.",
+      logo: "/assets/img/evilfactorylabs.png",
+      ctaTitle: "evlfctry.pro/rizaldy",
+      ctaLink: "https://evlfctry.pro/rizaldy"
+    },
+    {
+      title: "03.03 AM",
+      description: "silly writings. sometimes cringe. used to be main blogs and is now archived. ",
+      logo: "/assets/img/0303.png",
+      ctaTitle: "03.03 AM",
+      ctaLink: "https://rizaldy.club/tags/blog"
+    },
+    {
+      title: "00101010",
+      description: "members-only content talking the answers to life, the universe and everything. ",
+      logo: "/assets/img/42.png",
+      ctaTitle: "42.faultables.net",
+      ctaLink: "https://42.faultables.net"
+    }
+  ],
+  collects: [
+    {
+      title: "ArchiveBox",
+      description: "interesting things I found on the world wide web. mostly articles. sometimes papers.",
+      logo: "/assets/img/archivebox.png",
+      ctaTitle: "ArchiveBox",
+      ctaLink: "https://archive.rizaldy.club"
+    },
+    {
+      title: "rizaldy.club",
+      description: "a \"digital garden\" that collects everything I like and am interested in.",
+      logo: "/assets/img/rizaldyclub.png",
+      ctaTitle: "rizaldy.club",
+      ctaLink: "https://rizaldy.club"
+    },
+    {
+      title: "\"not instagram\"",
+      description: "photo dump from my phone camera. nothing interesting, nothing serious.",
+      logo: "/assets/img/notig.png",
+      ctaTitle: "ig.rizaldy.club",
+      ctaLink: "https://ig.rizaldy.club"
+    }
+  ]
+}
+
+module.exports = () => {
+  return things
+}

src/_includes/elements/head.liquid

@@ -0,0 +1,13 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <title>{{ title }} / faultables.net</title>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png">
+
+    <link href="/assets/css/reset.css" rel="stylesheet">
+    <link href="/assets/css/style.css" rel="stylesheet">
+</head>

src/_includes/elements/showcase.liquid

@@ -0,0 +1,9 @@
+<div class="c-showcase__item">
+<img class="c-showcase__item-image" src="{{ thing.logo }}" alt="{{ thing.title | escape }} - {{ thing.description | escape }}">
+
+<h3 class="c-showcase__item-title">{{ thing.title }}</h3>
+
+<div class="c-showcase__item-info"><p class="c-showcase__item-description">{{ thing.description }}</p></div>
+
+<a target="_blank" rel="noopener noreferer" href="{{ thing.ctaLink }}" class="c-showcase__item-cta">{{ thing.ctaTitle }}</a>
+</div>

src/_includes/fragments/footer.md

@@ -0,0 +1,15 @@
+---
+
+<footer>
+
+I collect a bit of data—for the sake of vanity metrics—that is reported to my self-hosted [Umami](https://umami.is) instance. No personal data is collected and you can opt out by using [uBlock Origin](https://ublockorigin.com/) just like the rest of us.
+
+However, this site is hosted on [Cloudflare Pages](https://pages.cloudflare.com) and is subject to [Cloudflare's privacy policy](https://www.cloudflare.com/privacypolicy/) (they respect your privacy too as far as I remember). If you don't trust them when it comes to privacy and/or anonimity, use [Tor Browser](https://www.torproject.org).
+
+[Mastodon](https://joinmastodon.org) and [PeerTube](https://joinpeertube.org) are registered trademark of [Mastodon gGmbH](https://joinmastodon.org) and [Framasoft](https://framasoft.org). Any use by the author is for referential purposes only and does not indicate any sponsorship, endorsement or affiliation between [Mastodon gGmbh](https://joinmastodon.org/about), [Framasoft](https://framasoft.org), and the author. Also, I'm not sure where I found that anime character.
+
+<br><br>
+
+&copy; MMXXIV — faultables is an "internet identity" that reflects one person.
+
+</footer>

src/_includes/fragments/things.md

@@ -0,0 +1,9 @@
+<div class="c-showcase-section">
+  <h2 class="c-showcase-title" id="{{ doing }}">faultables {{ doing }} things</h2>
+
+  <div class="c-showcase {% if single? %}c-showcase--single{% endif %}">
+    {%- for thing in things -%}
+      {%- render "elements/showcase.liquid", thing: thing -%}
+    {%- endfor -%}
+  </div>
+</div>

src/_includes/layouts/base.liquid

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  {% render 'elements/head', title: title %}
+
+  <body>
+    <main class="l-container">
+      {{ content }}
+    </main>
+
+    <script async src="https://u.faultables.net/umami.js" data-website-id="82853ef5-d8ca-4a3d-8170-784698eff79f"></script>
+
+  </body>
+</html>

src/index.md

@@ -0,0 +1,29 @@
+---
+title: Home
+layout: layouts/base
+---
+
+<div class="c-hero">
+  <h1 class="c-hero__title">faultables* <a href="#makes"><em>makes,</em></a> <a href="#runs"><em>runs,</em></a> <a href="#writes"><em>writes,</em></a> and <a href="#collects"><em>collects</em></a> things on internet.</h1>
+
+  <span class="c-hero__subtitle">
+  For fun & profit.
+  </span>
+
+  <div class="c-hero__bg">
+    <img src="/assets/img/anime.png">
+  </div>
+</div>
+
+{% render "fragments/things.md", doing: "makes", things: things.makes, single?: true %}
+{% render "fragments/things.md", doing: "runs", things: things.runs %}
+{% render "fragments/things.md", doing: "writes", things: things.writes %}
+{% render "fragments/things.md", doing: "collects", things: things.collects %}
+
+<!-- brrrrrrr -->
+<br><br><br><br><br><br><br><br><br><br><br><br>
+<!-- brrrrrrr -->
+
+## You've scrolled this far — how about [follow me online?](/social)
+
+{% render "fragments/footer.md" %}

src/social.md

@@ -0,0 +1,34 @@
+---
+title: Social
+layout: layouts/base
+---
+
+<div class="c-hero">
+  <h1 class="c-hero__title">Today's internet is <em>noisy,</em> full of <em>internet celebrities,</em> <em>infopreneurs,</em> and less-social.</h1>
+
+  <span class="c-hero__subtitle">
+  And, no, I don't try to fix that. Thanks for asking.
+  </span>
+</div>
+
+<div class="l-socials">
+
+## However I participate in an *alternative,* *more open* network that is *community-run* and **not driven** by *profits* or *engagement metrics.*
+
+<p>You can follow me on <span class="_mastodon">Mastodon</span> as <a target="_blank" rel="noopener norefer" class="_mastodon" href="https://edgy.social/@rizaldy">@rizaldy@edgy.social</a></p>
+
+<p>Sometimes I also publish silly videos on <a target="_blank" rel="noopener norefer" href="https://evilfactorylabs.social/a/rizaldy" class="_peertube">Peertube @rizaldy@evilfactorylabs.social</a></p>
+
+<p>I'm on <a target="_blank" rel="noopener norefer" class="_bluesky" href="https://bsky.app/profile/rizaldy.club">Bluesky @rizaldy.club</a> as well.</p>
+
+</div>
+
+## Wherever you follow me, thank you.
+
+<div class="l-home">
+
+[back to home](/)
+
+</div>
+
+{% render "fragments/footer.md" %}

src/wip.md

@@ -0,0 +1,14 @@
+---
+title: WIP
+layout: "layouts/base"
+---
+
+<div class="c-hero">
+  <h1 class="c-hero__title"><em>Work in progress but thanks for checking</em>.</h1>
+
+  <span class="c-hero__subtitle">
+    <a href="/">Back to home</a>
+  </span>
+</div>
+
+{% render "fragments/footer.md" %}