the home of serif.blue
dunkirk.sh
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
7 <link
8 rel="icon"
9 type="image/png"
10 href="/favicon/favicon-96x96.png"
11 sizes="96x96"
12 />
13 <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
14 <link rel="shortcut icon" href="/favicon/favicon.ico" />
15 <link
16 rel="apple-touch-icon"
17 sizes="180x180"
18 href="/favicon/apple-touch-icon.png"
19 />
20 <meta name="apple-mobile-web-app-title" content="Serif.blue" />
21 <link rel="manifest" href="/favicon/site.webmanifest" />
22
23 <meta
24 name="description"
25 content="Serif.blue - Fancy projects by Kieran"
26 />
27 <meta name="color-scheme" content="light" />
28
29 <meta property="og:title" content="Serif.blue" />
30 <meta property="og:type" content="website" />
31 <meta property="og:url" content="https://serif.blue/" />
32 <meta property="og:image" content="/og.png" />
33
34 <link rel="me" href="https://dunkirk.sh" />
35 <link rel="me" href="https://bsky.app/profile/dunkirk.sh" />
36 <link rel="me" href="https://github.com/taciturnaxolotl" />
37
38 <title>Serif.blue</title>
39 <style>
40 :root {
41 --alice-blue: #d9f0ffff;
42 --light-sky-blue: #a3d5ffff;
43 --light-sky-blue-2: #83c9f4ff;
44 --medium-slate-blue: #6f73d2ff;
45 --glaucous: #7681b3ff;
46 }
47
48 html,
49 body {
50 height: 100%;
51 margin: 0;
52 padding: 0;
53 }
54
55 body {
56 font-family: "Georgia", serif;
57 background-color: var(--alice-blue);
58 color: #333;
59 line-height: 1.6;
60 max-width: 1200px;
61 margin: 0 auto;
62 display: flex;
63 flex-direction: column;
64 }
65
66 .container {
67 max-width: 800px;
68 margin: 0 auto;
69 padding: 20px;
70 flex: 1 0 auto;
71 }
72
73 header {
74 background-color: var(--medium-slate-blue);
75 color: white;
76 padding: 2rem 1rem;
77 text-align: center;
78 margin-bottom: 20px;
79 border-bottom: 1px solid var(--light-sky-blue);
80 }
81
82 header h1 {
83 margin: 0;
84 font-size: 2.5rem;
85 letter-spacing: 0.5px;
86 }
87
88 header p {
89 margin: 0.5rem 0 0;
90 font-style: italic;
91 opacity: 0.9;
92 }
93
94 main {
95 padding: 30px;
96 background-color: white;
97 border-radius: 5px;
98 margin-top: 20px;
99 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
100 }
101
102 main h2 {
103 color: var(--medium-slate-blue);
104 border-bottom: 2px solid var(--light-sky-blue);
105 padding-bottom: 10px;
106 margin-top: 0;
107 }
108
109 .card {
110 background-color: var(--alice-blue);
111 border-radius: 5px;
112 padding: 25px;
113 margin-bottom: 25px;
114 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
115 border-left: 4px solid var(--light-sky-blue);
116 }
117
118 .card h3 {
119 color: var(--glaucous);
120 margin-top: 0;
121 }
122
123 .btn {
124 display: inline-block;
125 background-color: var(--medium-slate-blue);
126 color: white;
127 padding: 8px 16px;
128 border-radius: 4px;
129 text-decoration: none;
130 transition: background-color 0.3s;
131 font-family: Arial, sans-serif;
132 font-size: 0.9rem;
133 letter-spacing: 0.5px;
134 margin-right: 10px;
135 margin-bottom: 10px;
136 }
137
138 .btn:hover {
139 background-color: var(--glaucous);
140 }
141
142 .btn-bsky {
143 background-color: var(--bsky-blue);
144 }
145
146 .btn-bsky:hover {
147 background-color: #0066cc;
148 }
149
150 code {
151 background-color: var(--light-sky-blue);
152 padding: 2px 4px;
153 border-radius: 4px;
154 font-family: monospace;
155 font-size: 0.9rem;
156 letter-spacing: 0.5px;
157 }
158
159 footer {
160 text-align: center;
161 padding: 20px;
162 color: var(--glaucous);
163 font-size: 0.9rem;
164 border-top: 1px solid var(--light-sky-blue);
165 flex-shrink: 0;
166 }
167 </style>
168 </head>
169 <body>
170 <header>
171 <h1>Serif.blue</h1>
172 <p>Fancy projects by Kieran</p>
173 </header>
174
175 <div class="container">
176 <main>
177 <h2>Some fancy tools</h2>
178 <p>Hiiiii :)</p>
179 <p>
180 This is a random collection of tools and such that I have
181 made / collected. It's fairly empty rn but should fill up
182 quickly enough!
183 </p>
184
185 <div class="card">
186 <h3>Community Verifications</h3>
187 <p>
188 This tool allows you to designate trusted verifiers in
189 the Bluesky ecosystem. When these trusted accounts
190 verify other users, you'll see verification badges next
191 to those profiles while browsing Bluesky.
192 </p>
193 <a
194 href="https://tangled.sh/@dunkirk.sh/serif/raw/main/bluesky-community-verifications.user.js"
195 class="btn"
196 >Install with Tampermonkey</a
197 >
198 </div>
199
200 <div class="card">
201 <h3>
202 Dynamic bluesky (and various assorted services) pfps!
203 </h3>
204 <p>
205 I made this inspired by
206 <a
207 href="https://bsky.app/profile/did:plc:gq4fo3u6tqzzdkjlwzpb23tj"
208 >@dame.is</a
209 >'s (dame.is's sounds hilarious lol) profile picture
210 which changes with a sky gradient every hour. I wanted
211 to do something similar but my profile picture has me in
212 the foreground so I had to do some masking shenanagins
213 to get it to work.
214 </p>
215 <p>
216 Anyway if you want to set this up for yourself then grab
217 a background removed version of your profile from
218 <a href="https://remove.bg">remove.bg</a> (low res
219 preview version is fine since this will just be a mask)
220 and then run
221 <code
222 >magick pfp-removebg-preview.png -alpha extract
223 pfp_matte.png</code
224 >. Now you can head over to the timeline site linked
225 below and customize your timeline! When you are done
226 simply download the zip and extract it wherever you want
227 it to live. Then <code>crontab -e</code> and add your
228 script (<code
229 >2 * * * * /home/usrname/pfp/bsky-pfp-updates.sh
230 >/dev/null 2>&1</code
231 >) to run 2 minutes after the hour (or at really
232 whatever time you want)!
233 </p>
234 <p>
235 btw you need to make the script executable and then run
236 it once manually to generate the config
237 </p>
238 <a href="/pfp-updates" class="btn"
239 >Customize your gradients!</a
240 >
241 </div>
242
243 <div class="card">
244 <h3>More things soon?</h3>
245 <p>
246 Yeah probably lol; I just need to find the right next
247 project 🤔
248 </p>
249 </div>
250 </main>
251 </div>
252
253 <footer>
254 <p>
255 Made with 💙 by <a href="https://dunkirk.sh">Kieran Klukas</a> |
256 <a href="https://bsky.app/profile/dunkirk.sh">
257 @dunkirk.sh on Bluesky
258 </a>
259 </p>
260 </footer>
261 </body>
262</html>