I Built a Website for My Wife's Spoonie Community. Here's How That Went.
Sha needed a website.
Not because Facebook wasn't working — the two private groups she set up for Burntwood Spoonie Connect went from zero to 184 members in under a month, which tells you everything about how badly local people needed this kind of space. But Facebook isn't a front door. You can't hand a GP a URL and say, "Pass this on to patients who might benefit." You can't reach people who've quietly given up on social media. And you can't build a service directory on it without it becoming a mess.
So: website. And because I'm the one in this household who does websites, that became my job. Well, more of a week-long hyperfocus, tbh.
I'm not a professional web developer. I've been messing about with the web for years, long enough to care about keeping things simple, and fun. The brief: build a community hub, make it accessible, point clearly to the Facebook groups, and leave space for a service directory later.
Here's roughly how it went.
The stack (as I believe proper web techies call it)
Once it’s up and running, the bulk of the site won’t change. So, it doesn’t really need a CMS. No framework, as such. Just chunks of code nicked from t’internet. HTML, CSS, and vanilla JavaScript. Static files on a server.
I know that raises eyebrows in some circles. But the alternative is a WordPress install that needs updating every three weeks, a plugin that goes unmaintained, and a PHP version that eventually causes problems. I did some of those years ago, and I know what they turn into. Static files just sit there. Nothing to update. Nothing to break. Deploy by FTP. Job done.
Hosting is FastComet shared hosting. Domain via 123-reg. Cos I’ve already got both of those.
Design
Dark navy (#040e1c) with cyan and pink accents. Jellyfish-inspired — fluid, deep, a bit otherworldly. Colour scheme inspired by https://colorkit.co/color-palette-generator/ and https://colorpalette.pro. The jellyfish from the Facebook header runs through everything, including the favicon: a cyan jellyfish on a navy circle, primarily an SVG made by experimenting with Canva and a few online SVG creators, with multiple-sized PNG fall-backs.
There’s only one main page, so the CSS is embedded. No external CSS dependencies. It started as a mess with bits stolen from all the places I nicked HTML from. I optimised it by running it through some online beautifying services. It took an embarrassing amount of tweaking to get right, and by the end, I’m not sure I understood it any longer.
Things worth actually talking about
The spoon counter
Hover over the 🥄 icon in the hero section. It generates a random spoon count between 3 and 69 (cos it’s funnier than a 1 - 100 range), and chooses one of 13 messages. The range 66–69, for example, returns "LOADSASPOONS!!!" - a Harry Enfield reference. Sha didn't stop me from doing this and I consider that an endorsement.
Rotating footer messages
Each time you load a page, you get a random footer message. There are 50, from Sha, Aimee, or me (theaardvark). They're in a JSON file, so Sha can add or change them without touching code. That was on purpose. I look after the site, but most of the words are hers.
The hero greeting
When you load the page, you get a greeting above the hero. It checks for special dates first, then the day of the week, then the time of day, and finally a seasonal oerride. There are 46 messages: time slots, seasons, fixed holidays, and a bunch of moving holidays like Eid, Diwali, Hanukkah, Easter, and the rest.
January 8th triggers a Dudeist Day message because I'm an ordained Dudeist minister.
The easter eggs
I had some fun with the source code, because what’s the point if I wasn’t amusing myself?
The scroll-to-top button
It's a 🥄. Of course, it's a spoon. It shows up after you scroll 400 pixels. But I realised a spoon wasn’t obvious what it does. So hovering gives you a tooltip. No debate needed.
The 404 page
"This page doesn't exist — or it did once, and it's having a bad spoon day." With a wobbling spoon emoji. KOKO, bab. Seemed more appropriate than the usual messages
What went wrong
The nameserver saga
FastComet's documentation quotes generic nameservers. However, since they were taken over by a new owner, the actual nameservers as shown in cPanel's DNS zone editor were different ones — ns1 through ns4 on mysecurecloudhost.com. I pointed the domain at the generic ones. The site didn't resolve. After spending more time than I care to admit, and with some help from Mr Diston of Fidget Group, I diagnosed it using PowerShell's Resolve-DnsName, Nominet RDAP for registry-level verification, and whatsmydns.net to monitor propagation. Fixed it, waited, moved on.
Lesson: check what cPanel says, not the hosting company's docs. They might not be the same.
SSL before .htaccess
I found an example .htaccess file on the internet that forces a HTTPS redirect. Then realised that .htaccess probably better after you made sure the SSL is ready, not before. If you do it first, the site breaks. I know this. I've known it for years. I still did it. Noted for next time.
The Aimee section layout
The "Who's Behind This" section needed to credit Sha, Aimee, and me. Sha gets a full founder section. Aimee and I get a two-card grid below it.
First try: the cards were thin and tall, stuck on the left. The grid was inside the founder container, which keeps a column for the avatar. Second try: moved it out, but got the closing p tags wrong. The cards spilt out and went full-width. Third try: found an errant closing p (took chuffing ages), took it out, and it worked. There was swearing involved.
What the site is actually for
burntwoodspoonies.uk exists because Sha built the Facebook group out of desperation; she felt so isolated and lonely and was reaching out to find people who understood her various illnesses; built by spoonies to find spoonies. Real things deserve a front door that isn't owned by a social media company.
The community it serves — people with chronic illness and disability, and their carers, in Burntwood, Lichfield and the surrounding area — is not well-served by the assumption that everyone is on Facebook, or that everyone who needs support knows where to look for it. The website is how a healthcare professional can refer a patient. It's how someone who doesn't do social media can find the community. It's how the project can hand a URL to a local charity and be taken seriously.
It'll become a service directory. It'll get a local events calendar. For now, it does the job.
Comments