eeep.ee
my website
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>website of chfour official website</title>
7 <link rel="stylesheet" href="style.css">
8 <style>
9 #fops {
10 height: auto;
11 max-width: 100%;
12 margin-block: 2rem;
13 }
14 :root {
15 display: flex;
16 align-items: flex-end;
17 min-height: 100vh;
18 }
19 body { line-height: initial; }
20
21 #timenow { font-feature-settings: "tnum"; }
22
23 footer a {
24 text-decoration: none;
25 color: inherit !important;
26 opacity: 0.7;
27 transition: opacity 200ms;
28 }
29 footer a:is(:hover, :focus-visible) {
30 opacity: 1;
31 }
32 footer a code {
33 white-space: normal;
34 word-break: break-all;
35 font: inherit;
36 }
37
38 #links {
39 display: flex;
40 flex-wrap: wrap;
41 gap: 1em;
42 max-width: 30rem;
43 }
44 #links > li > a, details > summary {
45 display: inline-flex;
46 flex-direction: column;
47 text-decoration: none;
48 color: inherit;
49 }
50 #links > li > a > * { width: max-content; }
51 :is(#links > li > a, details > summary) > :first-child {
52 font-weight: bold;
53 color: var(--color-link);
54 }
55 :is(#links > li > a, details > summary) > :nth-child(2) {
56 font-size: 0.8em;
57 }
58 details {
59 margin-block: 1rem;
60 }
61 details > summary {
62 cursor: pointer;
63 }
64 details > summary > :first-child {
65 display: list-item;
66 list-style-type: disclosure-closed;
67 }
68 details[open] > summary > :first-child {
69 list-style-type: disclosure-open;
70 }
71 details > :nth-child(2) {
72 margin-top: 1rem;
73 }
74 .button > img {
75 image-rendering: pixelated;
76 }
77 .button {
78 transition: 0.1s cubic-bezier(0,1,.35,.87) transform;
79 }
80 .button:not(.placeholder):hover {
81 transform: translateY(-0.2rem);
82 }
83 .button:not(.placeholder):active {
84 transform: translateY(0.1rem);
85 }
86 .buttons {
87 display: flex;
88 flex-wrap: wrap;
89 gap: 0.2rem;
90 max-width: 30rem;
91 margin-block: 1rem;
92 }
93 .button.placeholder {
94 width: 88px; height: 31px;
95 display: block;
96 border: 2px dashed #aaa;
97 box-sizing: border-box;
98 }
99 </style>
100
101 <link rel="me" href="https://wetdry.world/@chfour"> <!-- old fedi acc -->
102</head>
103<body>
104 <img id="fops" src="platinum_fop_45_o.svg" alt="" width="250" height="250">
105 <main>
106 <ul class="inline-list slashed" style="max-width: 30rem; line-height: 1.2; text-align: justify;">
107 <li>Linux, Nix & NixOS</li>
108 <li>C, Python, HTML+CSS and co</li>
109 <li>electronics, "embedded" & test gear</li>
110 <li>RF (incl. amateur radio)</li>
111 <li>time and frequency metrology</li>
112 <li>trains and almost everything surrounding trains</li>
113 <li>very amateur photography</li>
114 </ul>
115
116 <p>exceptionally uncreative</p>
117 <p>gender outage, (she|it)>they, some flavor(s) of queer. taken <3</p>
118 <p>ΘΔ [platinum] fox, furry</p>
119 <p>19 years old and counting</p>
120 <p>from Silesia, Poland<span id="timenow"></span></p>
121
122 <p>known as <b>chfour</b></p>
123
124 <ul class="inline-list" id="links">
125 <li><a rel="me" href="https://merping.synth.download/@chfour">
126 <span>fediverse</span>
127 <span>@chfour@merping.synth.download</span>
128 </a></li>
129 <li><a href="https://signal.me/#eu/uwW5t81nJulRdHjWEkNUE2omPv9HzXhzUzar2yvP14ULx50MgdZBwpxrhWX3RfA3">
130 <span>signal</span>
131 <span>chfour.32</span>
132 </a></li>
133 <li><a href="discord.html">
134 <span>discord</span>
135 <span>foxpu55y</span>
136 </a></li>
137 <li><a href="https://tangled.org/eeep.ee/">
138 <span>tangled</span>
139 <span>eeep.ee</span>
140 </a></li>
141 <li><a href="https://github.com/chfour">
142 <span>github</span>
143 <span>chfour</span>
144 </a></li>
145 <li><a href="https://files.eeep.ee/">
146 <span>file dumpster</span>
147 <span>files.eeep.ee</span>
148 </a></li>
149 <li><a href="blog/">
150 <span>"blog"</span>
151 <span>& rants & projects</span>
152 </a></li>
153 </ul>
154 <details>
155 <summary>
156 <span>buttons</span>
157 <span>little link rectangles</span>
158 </summary>
159
160 <span class="buttons" style="gap: 1rem; align-items: center;">
161 <a href="#" class="button" id="mybutton">
162 <img src="button" width="88" height="31" alt="my button, a cropped rotated fox face emoji in shades of gray, meant to look like a platinum fox">
163 </a>
164 <span>←</span>
165 <span>
166 me! click to copy<noscript><strong> (requires javascript lol)</strong></noscript>
167 <br><span style="font-size: 0.8em;">hotlinking ok, or do whatever really lol</span>
168 </span>
169 </span>
170 <p>in no particular order:</p>
171 <span class="buttons">
172 <a class="button" href="https://zenfyr.dev/"><img src="https://zenfyr.dev/88_31/88_31.webp" alt="zenfyr" title="zenfyr" width="88" height="31"></a>
173 <a class="button" href="https://uncia.online"><img src="https://uncia.online/btn.png" alt="uncia!" title="uncia!" width="88" height="31"></a>
174 <a class="button" href="https://sillydomain.name"><img src="https://sillydomain.name/assets/buttons/benjae.png" alt="benjae" title="benjae" width="88" height="31"/></a>
175 <a class="button" href="https://sneexy.synth.download"><img src="https://synth.download/assets/buttons/sneexy.svg" alt="Sneexy" title="Sneexy" width="88" height="31"></a>
176 <a class="button" href="https://beepi.ng"><img src="https://beepi.ng/88x31.png" alt="unnick" title="unnick" width="88" height="31"></a>
177 <a class="button" href="https://holly.mlem.systems"><img src="https://holly.mlem.systems/img/badges/holly.png" alt="holly" title="holly" width="88" height="31"></a>
178 <a class="button" href="https://maidado.xyz/"><img src="buttons-hosted/maidado.xyz.gif" alt="mai" title="mai" width="88" height="31"></a>
179 <a class="button" href="https://notfire.cc/"><img src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif" alt="notfire" title="notfire" width="88" height="31"></a>
180 <a class="button" href="https://remlit.site/"><img src="https://remlit.site/static/btn/kattgutte.png" alt="harper" title="harper" width="88" height="31"></a>
181 <a class="button" href="https://gayfamicom.lol/"><img src="https://gayfamicom.lol/assets/88x31/gayfamicom.png" alt="gayfamicom" title="gayfamicom" width="88" height="31"></a>
182 <a class="button" href="https://atapi.space/"><img src="https://atapi.space/assets/img/buttons/atapi.gif" alt="atapi" title="atapi" width="88" height="31"></a>
183 <a class="button" href="https://aquamarine.gay/"><img src="https://aquamarine.gay/assets/web-buttons/aa-button-v3.gif" alt="aquamarine" title="aquamarine" width="88" height="31"></a>
184 <a class="button" href="https://get-cheesed.neocities.org/"><img src="https://get-cheesed.neocities.org/assets/cheese-button.png" alt="cheese" title="cheese" width="88" height="31"></a>
185 <a class="button" href="https://leggi.es/"><img src="https://leggi.es/img/8831/deneb_amber.gif" alt="deneb" title="deneb" width="88" height="31"></a>
186 <span class="button placeholder"></span>
187 </span>
188 </details>
189 </main>
190 <footer>
191 <a id="src" href="https://tangled.org/eeep.ee/website3" aria-label="website source" title="website source">
192 <code>/nix/store/VERY5p3c14lsecretv4luereplaceme0-chfour-website</code>
193 </a>
194 </footer>
195 <script>
196 document.querySelector('#mybutton').addEventListener('click', (ev) => {
197 navigator.clipboard.writeText('<a href="https://eeep.ee/"><img src="https://eeep.ee/button" alt="chfour" width="88" height="31"></a>');
198 ev.preventDefault();
199 });
200 const timenow = document.getElementById("timenow");
201 const formatter = new Intl.DateTimeFormat("pl-PL", {timeZone: "Europe/Warsaw", timeStyle: "short"});
202 // won't be *totally perfectly exact*
203 // but with window.requestAnimationFrame() it made my cpu usage go up by some 10% no joke
204 const update = () => timenow.textContent = ` (${formatter.format(new Date())})`;
205 update(); setInterval(update, 5000);
206 </script>
207</body>
208</html>