Design Portfolio

2021-01-27
#TypeScript#HTML#SCSS

A collection of static template sites and widgets for creatives.

I first started creating Toyhou.se HTML and CSS templates in early 2021 (this was when everything was locked down during the pandemic). I found I had a knack for creating unique layouts and enjoyed stretching the limits of HTML and CSS to create more interactive experiences.

Toyhou.se is a character management site used by artists and writers to organize and showcase their original characters. Toyhou.se allows all users access to HTML customization of profiles and premium users access to CSS customization. One of my earliest supporters gifted me premium and I began to learn CSS (or more specifically, SCSS).

A comparison of the basic Toyhouse character page layout and my most popular CSS retheme

Working with Toyhouse themes really let me expand my knowledge of CSS and stretch the limits of what can be done with just pure CSS. Since JavaScript isn't allowed on the site, a lot of the more "interactive" components use CSS transitions, animations, and pseudo-elements creatively. Pseudo-elements in particular are something I love using to add a little more unique-ness to each page.

The full collection of templates I've created can be found at 8byte.vercel.app

Increasing Customer Base

The main form of advertising is through a dedicated forum for Toyhou.se templates. It was considered customary for people to leave a comment bumping a developer's thread if they were using any of their templates, although there was no way to enforce this. Threads that received a lot of comments would then translate to a larger customer base for the developer. During my early days, I had been hosting all of my codes on Pastebin. However, the amount of people using my code was very different from the amount of people leaving comments on my forum.

From this sprung the very first iteration of Stor8. I began hosting my templates off-site and requiring "verification" before users could access my templates. Verification came in the form of users submitting their username to check against a cached file of usernames that had commented on my forum post. If the username didn't exist, a web scraper was run on the forum to update the cache. If the username still didn't exist, the user was redirected to post a comment on my forum thread before they could use a template.

This process increased my comments tenfold. I quickly gained a following on the site and opened shops on Gumroad, Ko-Fi, and Itch.io. Since then, I've completed roughly 1000 sales (including custom orders).

Here are some previews of my best-selling templates:

Other Work as 8byte

8byte is the username I chose to post all my template work under. As 8byte, I also created an assortment of other widgets (mostly related to Toyhou.se). Additionally, most of my freelance web development work was done under the alias of 8byte.

I built two Python widgets using the Flask framework. These were originally hosted on Heroku, until the hobby plan was discontinued. The first of these widgets was a like counter to sum the amount of likes across a user's characters. The second widget randomly selected a character from a user's collection.

A web scraper was run in the backend to tally total likes

A web scraper was run in the backend to find all characters and then select one

Safehou-se is the chef d'oeuvre of Toyhouse development. It is a simple webapp that allows users to input a code template (provided that the syntax matches a predefined Safehouse syntax) and creates a WYSIWYG form and preview to allow users to quickly and easily edit the code. As many of Toyhouse users have no experience with HTML, this template simplified the process considerably for them. More information about my development process is on the project page.