My personal site
cherry.computer
cherry.computer
htmx
tailwind
axum
askama
1<!doctype html>
2<html>
3 <head>
4 <title>Ivo's Bio</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <link rel="stylesheet" href="build/app.css" />
7 <link rel="me" href="https://hachyderm.io/@cherry" />
8 <script src="build/app.js" type="module"></script>
9 </head>
10 <body class="bg-gray-900">
11 <div class="flex flex-col">
12 <div class="bg-gray-950 text-center">
13 <h1 class="font-serif text-4xl text-gray-200 sm:text-6xl md:text-8xl">
14 <span class="text-pink-700">cherry</span>.computer
15 </h1>
16 </div>
17 <div
18 class="flex w-full max-w-2xl flex-col items-center gap-4 self-center p-4"
19 >
20 <div class="max-w-xl text-2xl text-pink-100 uppercase">
21 <p class="my-2">
22 Welcome to the intersection of product and politics.
23 </p>
24 <p class="my-2">
25 Where we synthesise the contradictions of consumption and communism.
26 </p>
27 <p class="my-2">Where we reason about both art and anarchism.</p>
28 <p class="mt-2">
29 Where I jokingly gesture towards my neurotic connection between
30 engaging with media products and life fulfillment, but fail to
31 interrogate the apparent complex further.
32 </p>
33 </div>
34 <h2 class="self-start text-2xl text-pink-50">
35 Here is what I've {{ consumption_verb }} most recently:
36 </h2>
37 <div
38 class="grid gap-x-4 w-full grid-cols-2 hoverable:grid-cols-{{ media.len() }}"
39 >
40 {% for media in media -%} {% match media %} {% when (media_type,
41 Some(media)) %} {% include "media.html" %} {% when (media_type, None)
42 %}
43 <div
44 class="aspect-square w-full max-w-50 animate-pulse justify-self-center rounded-xs bg-gray-800 hoverable:max-w-none"
45 hx-get="/media/{{ media_type }}"
46 hx-swap="outerHTML"
47 hx-trigger="load"
48 ></div>
49 <div
50 id="media-description-{{ media_type }}"
51 class="hoverable:hidden"
52 ></div>
53 {% endmatch %} {%- endfor %}
54 </div>
55 <p class="font-serif text-3xl text-pink-50">Free Palestine 🇵🇸</p>
56 </div>
57 <div class="bg-gray-800">
58 <div
59 class="flex w-full justify-around px-5 py-2 leading-5 text-pink-50 italic"
60 >
61 <p>
62 running on
63 <a
64 href="https://tangled.org/cherry.computer/nixos"
65 target="_blank"
66 class="text-pink-300 hover:text-pink-500"
67 >NixOS</a
68 >
69 </p>
70 {% if let Some(website_rev) = shas.website %}
71 <p>
72 site revision
73 <a
74 href="https://tangled.org/cherry.computer/website/tree/{{website_rev}}"
75 target="_blank"
76 class="text-pink-300 hover:text-pink-500"
77 >{{ website_rev | fmt("{:.8}") }}</a
78 >
79 </p>
80 {% endif %}
81 </div>
82 </div>
83 </div>
84 </body>
85</html>