Valuarchy website
Background
Over the christmas period I agreed to take on a job for a friend of mine and fellow Bitcoiner. I met Brendan at a local Bitcoin meetup in Kent. We became good friends. He's one of the smartest, most articulate guys I've ever called a friend. With a keen eye for political systems, economics and generally what's right and wrong in the world.
Brendan devised this novel system that introduces money exchange and a contractual relationship between the political candidate/leader and a country's citizens. Creating a set of incentives that keeps them honest and accountable throughout their term. And tackling what he describes as the Funding flaw.
He wrote the short book, describing the system in detail, which I edited. Publishing it as a PDF and ePub.
Rationale
Brendan needed a central location where people can be introduced to Valuarchy and where the book can be downloaded. I was happy to put this together for him. The website would accommodate the following at v1:
- A hero section as the main focal point
- some content introducing Valuarchy
- book download links
- Bitcoin donate widget using https://www.blink.sv/
- Social media links
To make things interesting, I challenged myself to build this in 8 hours, fully accessible, configured and optimised. With minimal AI usage. The reason for this, is because I came across a tweet from a director at a well known crypto wallet company, boast about how their junior dev vibe coded a similarly basic single-pager in a day. I thought I could hand-code a site like that in that time. Chest-beating aside, I managed to do it in around about 9 hours. Not a bad effort against AI automation.
Language and feel
Before I started on the build, we had some back-and-forth about the look and feel. Not wanting to spend all that much time on this on the first pass, the design was to be quite bare-bones and minimal, allowing space for iteration. The only input I got from Brendan was some AI images depicting knights on horseback, and some pretty questionable font suggestions — hard-to-read blackletter and gothic scripts.
I argued that we might want less medieval more contemporary. He relented, and we decided where we wanted to be was modern, authoritative, with a classical touch. Far from tech startup slop aesthetic known as Corporate Memphis (thanks ChatGPT)
Simple, impactful black and white with orange accents — a slight nod to Bitcoin which we may change in the next iteration. I knocked together a logo, with the anticipation that we'd come up with a symbol in the future, or have a designer do so.
The language is quite forceful and serious to reflect the seriousness of the problem Valuachy seeks to tackle. The text he sent me pulls no punches nor minces any words. Well represented by the font pairing I chose — Merriweather and Piazzolla. Both great fonts, also with variable axes for fine tuning. Thanks (again) to ChatGPT for producing the hero background image of chains breaking. Which I thought is quite a good visual metaphor for the release of the political stasis we're in — which Valuarchy seeks to bring.
Challenges
- Nostr profile link. Nostr is a decentralised protocol for communication, a nostr profile is just like a public/private key that can be used to login to different websites. So where should a nostr profile live? what can be linked to? After some research, I found njump.me which is as buggy and unintuitive as you'd expect for a website built on something as new and experimental as nostr. I dropped a message to the maintainer, offering to redo the UI for setting up a profile.
- Social media/contact icon Finding svg icons that are similar in stroke weights is never a breeze. Had to tweak to make them look right.
- Email address What is the best pattern for sharing an email address? Brendan's email address exposed on the front-end, will inevitably result in his inbox becoming inundated with spam. Without the time to create a contact form in this iteration, hiding it in a
mailtolink is a slight improvement.