duffin.neocities.org/rawindex.html at main · 4uffin/duffin.neocities.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!DOCTYPE html> <!-- Define document type as HTML5 -->
<html lang="en">
<!-- Set language to English -->

<head>

  <!-- SEO meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Duffin">
  <meta name="keywords" content="web development, HTML, CSS, JavaScript, projects">
  <meta name="description" content="Duffin's Hub is a collection of web-based projects created by Duffin. Explore various projects related to web development and more.">

  <!-- Open Graph meta tags -->
  <meta property="og:title" content="Duffin's Hub">
  <meta property="og:description" content="Duffin's Hub is a collection of web-based projects created by Duffin. Explore various projects related to web development and more.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://duffin.neocities.org">
  <meta property="og:image" content="https://duffin.neocities.org/images/duffinshubfavicon.png">

  <!-- Twitter meta tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@4uffin">
  <meta name="twitter:title" content="Duffin's Hub">
  <meta name="twitter:description" content="Duffin's Hub is a collection of web-based projects created by Duffin. Explore various projects related to web development and more.">
  <meta name="twitter:image" content="https://duffin.neocities.org/images/duffinshubfavicon.png">
  <meta name="twitter:url" content="https://duffin.neocities.org">

  <link rel="icon" type="image/x-icon" href="https://duffin.neocities.org/images/duffinshubfavicon.png">
  <title>Duffin's Hub</title>

</head>

<body>

  <!-- Header section -->
  <header>
    <!-- Title and tagline -->
    <h1>Duffin's Hub</h1>
    <p>for Web-Based-Things</p>

    <!-- Navigation section -->
    <nav>
      <!-- List of menu items -->
      <ul>
        <li><a href="https://codepen.io/4uffin" id="menuitem" title="Codepen">Codepen</a></li>
        <li><a href="https://github.com/4uffin/projectsspace" id="menuitem" title="GitHub">GitHub</a></li>
        <li><a href="https://bsky.app/profile/4uffin.bsky.social" id="menuitem" title="Bluesky">Bluesky</a></li>
      </ul>
    </nav>

  </header>

  <!-- Main content section -->
  <main>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>Zen Bluesky Cover Art</summary>
      <img src="https://duffin.neocities.org/images/zenbskyicon.png" alt="Zen Bluesky Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/zenmodebsky"><h2 title="Zen Bluesky">Zen Bluesky</h2></a>
      <!-- Description for Project -->
      <p class="project-description">View Bluesky in a Zen state. Basically a shuffled RSS feed.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: August 9, 2025">Created: August 9, 2025</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>GitHub Contributions Art Cover Art</summary>
      <img src="https://duffin.neocities.org/images/ghartcover.png" alt="GitHub Contributions Art Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/ghart"><h2 title="GitHub Contributions Art">GitHub Contributions Art</h2></a>
      <!-- Description for Project -->
      <p class="project-description">GitHub contributions. Viewed as an art, rather than a statistic.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: August 1, 2025">Created: August 1, 2025</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>LocalHub Cover Art</summary>
      <img src="https://duffin.neocities.org/images/LocalHub%20Icon.png" alt="LocalHub Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/localhub/"><h2 title="LocalHub">LocalHub</h2></a>
      <!-- Description for Project -->
      <p class="project-description">GitHub, but in localStorage.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: April 12, 2025">Created: April 12, 2025</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>Notes App Cover Art</summary>
      <img src="https://duffin.neocities.org/images/notesappicon.png" alt="Notes App Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/notesapp/notes"><h2 title="Notes App">Notes App</h2></a>
      <!-- Description for Project -->
      <p class="project-description">A simple, old school notes app.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: March 1, 2025">Created: March 1, 2025</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>Time Capsule Cover Art</summary>
      <img src="https://duffin.neocities.org/images/Time%20Capsule%20-%20Icon.png" alt="Time Capsule Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/timecapsule"><h2 title="Time Capsule">Time Capsule</h2></a>
      <!-- Description for Project -->
      <p class="project-description">See how long it's been, in real-time!</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: September 22, 2024">Created: September 22, 2024</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>RandomURL Cover Art</summary>
      <img src="https://duffin.neocities.org/images/RandomURL%20-%20Icon.png" alt="RandomURL Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/randomurl"><h2 title="RandomURL">RandomURL</h2></a>
      <!-- Description for Project -->
      <p class="project-description">An algorithm that randomly generates a URL!</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: September 19, 2024">Created: September 19, 2024</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>Shuffle Cover Art</summary>
      <img src="https://duffin.neocities.org/images/ShuffleIcon.png" alt="Shuffle Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/shuffle/play"><h2 title="Shuffle">Shuffle</h2></a>
      <!-- Description for Project -->
      <p class="project-description">Discover songs by Shuffling them, randomly.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: April 20, 2024">Created: April 20, 2024</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>Audio Player Cover Art</summary>
      <img src="https://duffin.neocities.org/images/audioplayericon.png" alt="Audio Player Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/audioplayer/listen"><h2 title="Audio Player">Audio Player</h2></a>
      <!-- Description for Project -->
      <p class="project-description">A multi-format audio player, with some cool features.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: April 18, 2024">Created: April 18, 2024</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>Simple Customizable Clock Cover Art</summary>
      <img src="https://duffin.neocities.org/images/Clock.png" alt="Simple Customizable Clock Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/clock/home"><h2 title="Simple Customizable Clock">Simple Customizable Clock</h2></a>
      <!-- Description for Project -->
      <p class="project-description">A simple clock, that just so happens to have some customization options.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: April 8, 2024">Created: April 8, 2024</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>Local Storage Cover Art</summary>
      <img src="https://duffin.neocities.org/images/foldericon.png" alt="Local Storage Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/localstorage/new"><h2 title="Local Storage">Local Storage</h2></a>
      <!-- Description for Project -->
      <p class="project-description">Use your browser's local storage with some simple HTML/CSS UI. Use this as temporary storage.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: August 29, 2023">Created: August 29, 2023</p>
    </section>

    <section class="project" style="display: none;">
      <!-- Cover art for Project section -->
      <img src="https://duffin.neocities.org/images/painticon1.png" alt="Paint Cover Art" title="Paint" class="project-cover">
      <!-- Title for Project -->
      <h2 title="Paint">Paint</h2>
      <!-- Description for Project -->
      <p class="project-description">I was bored and curious. So here's a canvas to paint on!</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: August 5, 2023">Created: August 5, 2023</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>UTube Search Cover Art</summary>
      <img src="https://duffin.neocities.org/images/utubesearchicon.png" alt="UTube Search Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/utubesearch/home"><h2 title="UTube Search">UTube Search</h2></a>
      <!-- Description for Project -->
      <p class="project-description">I, along with many, don't like YouTube's built-in search. So here's a dedicated search engine for YouTube. (powered by GCSE)</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: August 3, 2023">Created: August 3, 2023</p>
    </section>

    <section class="project" style="display: none;">
      <!-- Cover art for Project section -->
      <img src="https://duffin.neocities.org/images/randomutubeicon1.png" alt="Random UTube Cover Art" title="Random UTube" class="project-cover">
      <!-- Title for Project -->
      <h2 title="Random UTube">Random UTube</h2>
      <!-- Description for Project -->
      <p class="project-description">YouTube, but randomized. Basically less control than YouTube Shorts.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: May 9, 2023">Created: May 9, 2023</p>
    </section>

    <section class="project" style="display: none;">
      <!-- Cover art for Project section -->
      <img src="https://duffin.neocities.org/images/sandboxmodeicon.png" alt="Sandbox Mode Cover Art" title="Sandbox Mode" class="project-cover">
      <!-- Title for Project -->
      <h2 title="Sandbox Mode">Sandbox Mode</h2>
      <!-- Description for Project -->
      <p class="project-description">A webpage creation sandbox, master your web development skills! | Your imagination is your limitation. (i think)</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: May 4, 2023">Created: May 4, 2023</p>
    </section>

    <section class="project" style="display: none;">
      <!-- Cover art for Project section -->
      <img src="https://duffin.neocities.org/images/thebuttonicon2.png" alt="The Button Cover Art" title="The Button" class="project-cover">
      <!-- Title for Project -->
      <h2 title="The Button">The Button</h2>
      <!-- Description for Project -->
      <p class="project-description">Literally just a button, click it if you want to.</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: October 1, 2022">Created: October 1, 2022</p>
    </section>

    <section class="project" style="display: none;">
      <!-- Cover art for Project section -->
      <img src="https://duffin.neocities.org/images/searchurlicon.png" alt="Search URL Cover Art" title="Search URL" class="project-cover">
      <!-- Title for Project -->
      <h2 title="Search URL">Search URL</h2>
      <!-- Description for Project -->
      <p class="project-description">An old style search engine. (powered by GCSE)</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: September 8, 2022">Created: September 8, 2022</p>
    </section>

    <section class="project">
      <!-- Cover art for Project section -->
    <details>
      <summary>Tib (TinyWeb) Cover Art</summary>
      <img src="https://duffin.neocities.org/images/tiblogo[1].PNG" alt="Tib (TinyWeb) Cover Art">
    </details>
      <!-- Title for Project -->
      <a href="https://duffin.neocities.org/tinyweb/home"><h2 title="Tib (TinyWeb)">Tib (TinyWeb)</h2></a>
      <!-- Description for Project -->
      <p class="project-description">A search engine powered by its users. Submit URL's to make the search smarter. (powered by GCSE)</p>
      <!-- Created line for Project -->
      <p class="created-line" title="Created: March 3, 2022">Created: March 3, 2022</p>
    </section>

    <!-- Add more project sections as needed -->

  </main>

  <!-- Footer section -->
  <footer>
    <p><a href="https://duffin.neocities.org/">Go back</a></p>
    <!-- Copyright information -->
    <p>2024 - 2025 Duffin's Hub. Hosted via <a href="https://neocities.org/site/duffin">Neocities.org</a></p>
  </footer>

</body>

</html>