Celebrating the birthday of one of my OCs with a hand-coded character profile!

Today's my OC's Kirishima Keima's birthday! December 21st. He's a Sagittarius!

To celebrate—which I haven't done in quite a while—I used an HTML template by Kalechips to make a character profile of him and uploaded it to my website.

I had a lot of fun making this! I realized that much of the information on my OCs used to be on Wattpad but not it's inaccessible to anyone anymore and none on FTL in particular, there was barely anything.

The draft of Kei's profile has been sitting in my Obsidian vault for a couple of years now. I attempted to write a novel (For the Freedom to Love) but have chosen to focus on smutty one shots for now haha.

His character came to be thanks to a role play with a friend. He was the College AU version of a fandom OC. Most of his adult version was born during that roleplay and the development I gave him on my own time.

That rp is now over and I didn't really consider posting stuff about them until this year when I created my websites. You could say this Keima is the continuation from that roleplay taking its own course in my hands.

So, how did I make this? Well, after downloading the template, I booted up my code editor of choice and took a look at the code.

After understanding I needed to make some design choices, I made a simple framework and chose which section to display in which of the available flexbox size classes (full, half, quarter, third, fourth). After testing them, I made some adjustments which ended up how it looks now. Most sections are in full size with Skills and Hobbies, Like and Dislikes each sharing half the size of a block.

I struggled with the Relationship section because it was outdated from my current OC profile template. Instead of having separate sections named "Platonic Relationships" and "Current Romantic Relationship" there is a single section named "Relationships" with a dropdown for Friends, Family, Enemies, and Partner(s) each. I took inspiration from Nomnomnami's character template, specifically her blog post about her Notion set up for her stories. So yeah, I had to update Keima's profile with these changes.

Similarly, his initial profile had a non-existence Basic Info section. I was struggling with how to show that for a good while till I looked up a simple template for a table and added that stuff in. That section still looks really wonky to me but meh, it gets the job done.

I added a content warning because I had to heavily edit the section about his Sex Life and felt it warranted it despite being found in an NSFW site. The editing process was extremely amusing. I didn't expect to have that much to write about. It's about 500 words! Should have expected it though as he features mostly in smutty scenarios sksksksk.

I moved the table of contents around a couple of times. It's a style that I've been using around the site for a while now. First, it was located in the Basic Info section before I added the warnings and title. For some reason this first block was the hardest to decide what to put. I think it's okay though. The spacing between the titles does bother me though. Maybe add some padding styling 🤔.

For the large sidebar links, I also brainstormed some options. They don't lead to anywhere at the moment. I think they will be external links.

Oh, for the title under Keima's avatar, I tested keeping both his name in kanji and hiragana but it didn't look well so I moved the latter as the title in the main body. I think it looks really cool.

The section I coded last was the footer because I was working on this page outside of my website project, so I added the footer when I copied it to my site.

One last but important detail was where to link it in the site so folks can find it! One way to get to this page is the fic archive, FTL section. There's a character list and Keima's name is linked to this page. Another way to get to it is through the Site Map and Changelog.

Oh, and the background color is his signature color, blue!

Aaaannnd that's about it! I have so much fun playing with his character. He's my punching bag filled toxic masculinity and all sorts of bigotry hihi. I just love putting him in awkward situations and seeing him make a fool of himself. All in all he has gone through large amounts of character development throughout his life and he's still changing!

Here's for another year for this kinky extroverted motherfucker who cannot plan long-term to save his sorry life!