This is the personal website and blog of academic librarian Hannah Shelley. It isn't part of my paid work, but a personal project where I explore ideas about libraries, technology, and culture. It often overlaps with my professional interests, but the views here are entirely my own.
This site may not look like much, but it’s made with care.
This site reflects my values around accessible, user-centered design, owning your digital presence, and my fondness for the "old web." Simple and hand-coded, but with some of the luxuries of new web (but only the good bits). I do it this way beause it's fun and nostalgic for me, and I like the control and freedom that platforms and templates don't provide.
This website is a constant work in progress. Check back to see what I break next!
Features
- Boolean search operators - Because what librarian would tolerate a search bar without AND, OR, NOT support?
- Manually updated RSS feed - Old school and committed to it
- Dark/light mode toggle - without the toggle the theme follows your system preference
- Mobile responsive - just as fun to view on a phone as it is on the big screen
- Open graph metadata (title, image, description) so links look pretty when shared on social media
- No tracking, no cookies, no BS - Just HTML, CSS, and some JavaScript
Technical Details
Built with:
- Hand-coded HTML5 and CSS3, validated with W3C tools
- JavaScript (enhanced but not essential - the site works with JS disabled)
Coding and publishing:
- Neocities for hosting
- Notepad++ for code editing (outside of the Neocities editor which is also great and I use this for small touch-ups)
- Google docs for writing before converting to HTML in Notepad++
- Claude
- Feeding early drafts or fragments of blog posts (no other prompts, just the text). This results in an output that basically contains my ideas reflected back in different words. I don’t use it for writing or “polishing” drafts - just to help process meaning and inform further edits. Occasionally it even sparks new thoughts. This has been helpful in getting me more confident in putting my thoughts to paper, and I want to be transparent about it.
- Code debugging (The JavaScript is mostly vibe-coded at this point)
- The Read Time for approximate reading times
- Hannah's Blog Snippet Generator👑✨
A custom form I made for myself that automatically generates all the little fragments each new blog post needs: the post file name, archive entry, homepage tile, RSS entry, Open Graph tags for social sharing, JSON entry for site search, navigation links, and more. It has turned what used to be many fussy manual steps into one smooth workflow.
Typography, Images & Icons:
- Body: Georgia (for readability)
- Headings: Courier New
- Icons via Font Awesome
- Favicon.io for the emoji site/bookmarklet icon 💥
- The 88x31 GIF Collection for web buttons (warning: flashing images)
- The Creative Commons filter in Google Image Search, and stock photo sites like Unsplash and Pixabay for free-to-use images
- I do memes and basic image edits in Powerpoint, like a true artist
Copyright
All my posts and pages in this site are licensed under Creative Commons Attribution 4.0 International
unless otherwise noted.
This means you're welcome to copy, republish or remix my stuff, just credit me.
I choose open images or make my own when I can, but some memes and whatnot I have stolen in good faith. Contact me to let me know if you see something that should be credited or taken down.
Feedback corner
@hannahshelley.bsky.social Your website design just took 20 years off my life. Thank you.
— LibraryThingTim (@librarythingtim.bsky.social) February 6, 2025 at 3:02 PM
