Fenpa.ws

This one’s got ears

This is the story of how i build fenpa.ws, the personal homepage of a friend of mine.

Screenshot of the homepage of fenpa.ws

The stack

The website is build using the following tech stack:

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:

Most of the page is not really noteworthy for this project, but the character pages are a bit more interesting

The character page

Screenshot of the characterpage for SoXX

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:

And some optional but nice to have things like

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.

Screenshot of the characterpage for SoXX

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.

Screenshot of the characterpage for SoXX

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.