This is the story of how i build fenpa.ws, the personal homepage of a friend of mine.
The stack
The website is build using the following tech stack:
- Hugo - Static site generator
- Tailwind - The utility CSS framework
- Git - Version controll and automation
- Comically oversized ears - Emotional support
Requirements
The project eveolved from the simple need for a customizable linktree because none of the other services had all required features. These requirements are:
- Showing a listing of projects
- A home for all the Fursonas and characters with associated art galery
Most of the page is not really noteworthy for this project, but the character pages are a bit more interesting
The character page
The requirements for a character page are not imediately obvious to those unfortunate enough to not have a fursona so i will quickly go over them here. In order to usably convey meaning of a character one needs the following hard requirements:
- Reference sheets (that is a specific kind of artwork)
- Defined colors of the character
- Relevant markings and other design elements
And some optional but nice to have things like
- character (likes/dislikes)
- Additional art
- About/Backstory
- Additional notes
As you can see in the screenshot above the first look already resolves the color definitions requirement and some flavour text from the optional section.
The page is divided into multiple independent sections to provide structure and is inspired by many other lnktrees that also feature a fixed background image for theming. These things are still possible with some comercial options if one gives up some style points. The relevant part of this page is further down: The art galery.
Because attribution and giving proper credit should be a concern when using art that is not CC0 (and even then) - in this usecase giving credit to the artists is essential. For this reason we decided to seperate the characters art by character so it is immediately bvious who created what piece.
Keeping with the theme of cards each artist also gets a sub-card within the Galery card. This keeps the visual design coherent and easy to parse at a glance.
Project pages
The project pages are really nothing complicated because they offer simple markdown rendering without any bells and/or whistles (depending on author big ears tho).
CI/CD
I would be lying if I said i did this myself … so I wont. Being a highly competent backend dev the automated build and deployment pipeline was 95% his doing, all i did was make my broken systems compatible with the sleek efficency of git-hosted runners. Using the power of automation it is now possible to go from authoring to production in less time then it takes you to read this sentence.
Conclusion
There is not really much more to be said, this entire thing was done in a weekend and is running basically unatended since then. Using the power of friendship i even learned a thing or two along the way so all ‘round a huge success in my books.