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>Automatic profile updates!</h3>
202 <p>
203 I made this inspired by
204 <a
205 href="https://bsky.app/profile/did:plc:gq4fo3u6tqzzdkjlwzpb23tj"
206 >@dame.is</a
207 >'s (dame.is's sounds hilarious lol) profile picture
208 which changes with a sky gradient every hour. I wanted
209 to do something similar but my profile picture has me in
210 the foreground so I had to do some masking shenanagins
211 to get it to work.
212 </p>
213 <p>
214 Anyway if you want to set this up for yourself then grab
215 a background removed version of your profile from
216 <a href="https://remove.bg">remove.bg</a> (low res
217 preview version is fine since this will just be a mask)
218 and then run
219 <code
220 >magick pfp-removebg-preview.png -alpha extract
221 pfp_matte.png</code
222 >. Now you can head over to the timeline site linked
223 below and customize your timeline! When you are done
224 simply download the zip and extract it wherever you want
225 it to live. Then <code>crontab -e</code> and add your
226 script (<code
227 >2 * * * * /home/usrname/pfp/bsky-profile-updates.sh
228 >/dev/null 2>&1</code
229 >) to run 2 minutes after the hour (or at really
230 whatever time you want)!
231 </p>
232 <a href="/pfp-updates" class="btn"
233 >Customize your gradients!</a
234 >
235 </div>
236
237 <div class="card">
238 <h3>More things soon?</h3>
239 <p>
240 Yeah probably lol; I just need to find the right next
241 project 🤔
242 </p>
243 </div>
244 </main>
245 </div>
246
247 <footer>
248 <p>
249 Made with 💙 by <a href="https://dunkirk.sh">Kieran Klukas</a> |
250 <a href="https://bsky.app/profile/dunkirk.sh">
251 @dunkirk.sh on Bluesky
252 </a>
253 </p>
254 </footer>
255 </body>
256</html>