How I Built purpleaardvark.uk: A Random Meme Generator Website
Ever fancied having your own website that does nothing but display photos of yourself with random meme text? No? Well, I did it anyway, and here's how I built purpleaardvark.uk.
The Initial Concept
It started with a drunk (and hence unfunny) "joke"... the URL purpleaardvark.uk was available and I'm a purple aardvark, or to be precise, I'm "theaardvark" and I have a long purple beard.
I bought the domain for £0 for 1 year, which still feels overpriced for what I've done with it. Nothing says 'fiscally responsible' like getting something for free and then spending hours making it utterly useless. But then wasn't sure what to do with it. So I thought I'd create a website that would show photos of me. Just that. Nothing else. Peak narcissism, I know, but hear me out.
My HTML skills extend to changing the font on my MySpace page circa 2006, so naturally I turned to AI for help; the LLM AI claude.ai. The digital equivalent of asking someone else to change a lightbulb because you're afraid of electricity.
My initial prompt to Claude was straightforward:
"I want to create a website that shows nothing but photos of me. The webpage should be a responsive page of just a photo that changes every 30 seconds. Write the HTML and CSS files."
Claude promptly generated a simple responsive website with a full-screen slideshow function. The code included smooth transitions between images, worked on all screen sizes, and had a clean, distraction-free layout with a black background to make the photos stand out.
Making It More Interesting
A slideshow is fine, but predictable. So I asked Claude to spice things up:
"rewrite so the first image is random, or pseudo random"
Now the website would start with a different photo each time someone visited. Much more exciting, isn't it? (Narrator: It wasn't.)
Adding My Personal Touch
Next, I customized the code with my domain information and actual image paths:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://purpleaardvark.uk" target="_blank">
<meta charset="UTF-8">
<meta name="description" content="Purple Aardvark">
<meta name="keywords" content="Purple Aardvark">
<meta name="author" content="theaardvark">
<!-- more code here -->
I also tweaked the slideshow to rotate images every 20 seconds instead of 30. Because apparently, my attention span is precisely that short.
Meme-ifying My Face
A slideshow of my face wasn't quite narcissistic enough, so I decided to add meme text:
"Edit the code to place meme-style text on top of each image."
Claude updated the code to add classic meme-style text with Impact font, white color, and black outline for maximum readability (and maximum cringe). The text was positioned at the top and bottom of each image, just like a proper internet meme from 2012.
Making It Dynamic
Having static meme text would get boring rather quickly, so I wanted to make it more dynamic:
"rewrite so that the meme text is pulled from a separate csv file. In the csv file each meme text is on a separate line with top and bottom texts separated by a '/'"
Now I could update all my meme captions by just editing a CSV file without touching the HTML. But why stop there?
"Rewrite so that the meme text is chosen at random from the csv file each time a new image is shown. The csv file will have many lines of possible text."
With this update, even with just a few images, the slideshow would feel different each time someone visited. Each photo would display with a random caption from my collection, creating countless unique combinations.
The Meme Arsenal
Of course, I needed a substantial collection of meme texts for this to work properly, so I asked for:
"Write a meme-text.csv file with 100 random, humorous meme-style texts that would suit a photo of a man looking in to camera."
The result was an absolutely brilliant* collection of self-deprecating, relatable meme texts including gems like:
- "When someone asks if I'm listening/My brain trying to remember what they just said"
- "Nobody:/Me checking if my phone is still in my pocket for the 47th time"
- "When the waiter says 'enjoy your meal'/And you reply 'you too'"
- "When your boss asks about the project/That you haven't started yet"
The Final Result
So what did we end up with? purpleaardvark.uk - A website that:
- Loads with a random photo of me
- Displays it with randomly selected meme text on top and bottom
- Changes to a new photo every 20 seconds
- Applies a fresh random meme text to each new photo
- Has a collection of 100 different possible meme texts
All of this with fairly minimal HTML, CSS, and JavaScript. The entire thing could be hosted as static files with no backend required.
The entire website was conceived and developed while inebriated on Magner's Cider, proving that British engineering innovation peaks at approximately 4.5% ABV. Nothing quite sparks creativity like apple-based alcoholic inspiration. It is, I suppose, marginally more interesting than watching paint dry. Though at least paint eventually changes color permanently.
Meta-Blog
In perhaps the most meta move of all, I asked Claude to write this very blog post using my own prompts as quotes and summarizing its outputs. I specifically asked it to "Use my style of humour" and target a "British English" audience, which I assume means it sprinkled in some self-deprecation and avoided spelling "color" incorrectly.
So yes, this entire blog post was generated by AI based on our conversation about creating purpleaardvark.uk. If you find it amusing, thank Claude. If you find it terribly unfunny, well, blame my prompt for asking it to mimic my sense of humour.
Now excuse me while I go stare at random photos of myself with meme text for the next few hours. It's not weird if it's on a website, right?
*theaardvark's note - this was Claude calling its own output "absolutely brilliant". Well done, Claude you smug bastard.
Update 1 (16th March 2025): Since writing the blog post, we've thrown a few extra bells and whistles at purpleaardvark.uk - because apparently, random photos of me with meme text wasn't quite narcissistic enough.
We added lazy loading for images, which is developer-speak for "only loading what's needed" - a concept I wish my shopping habits would adopt. This makes the site snappier and means I can add even more photos of myself without breaking the internet.
We slapped on an info button that explains the site's existence to confused visitors, with a link to the blog post for those who, inexplicably, want to recreate this monument to self-indulgence. There's also a next button and swipe functionality for the impatient types who can't wait 20 seconds for more purple-bearded wisdom.
The finishing touches include proper favicons (so my little purple aardvark can haunt your browser tabs) and a site header in a font that looks like I wrote it myself after a few Magners. All essential improvements to a website that still fundamentally exists because I got a free URL and have too much time on my hands.