A PERSONAL PROFILE DESIGN ARCHIVE
profile designs, code
& little experiments
this is just a little place where i dump all the finished profiles i make :3 feel free to use anything you like, whether you wanna grab the whole profile or just steal a few little pieces for your own.
if you use the full thing tho, pls leave credits <3
COLLECTION / 001
FULL PROFILE DESIGNS
READY TO EXPLORE
SELECTED PROFILE
Full-profile use requires credit to Skeya.
BITS & PIECES / 001
SMALL DETAILS TO MIX, MATCH & MAKE YOURS
Each button copies a complete piece: CSS + HTML. Open HOW TO USE to see exactly where each part goes and how to move it.
“a tiny piece
of your profile”— SKEYA
put something
sweet in here
These styles repaint Janitor’s existing bot cards without adding custom content.
Short bot introduction.
The default Janitor description remains here automatically.
Copy CSS only and paste it at the end of the profile.
It targets Janitor’s existing card classes.
Short bot introduction.
The real Janitor description is revealed here.
Copy CSS only and paste it at the end of the style section.
Mobile keeps the details visible without hover.
A font stack is a fallback order. The browser uses the first available font, not all fonts at once.
First available font wins.
Reliable for body text and UI.
Best for short display headings.
Useful for archive labels and code-like text.
Each fix explains the symptom, the cause, a broken example and a safer solution.
What we are fixing: keep Janitor’s live number and add only the word CHATS beside it.
Find <style> and </style>. The fix goes between them.
<style> /* your other CSS is here */ /* PASTE THE FIX HERE */ </style> <div>your profile content</div>
Press Ctrl + F and search for .profile-character-card-chats-hstack.
Delete only font-size: 0;.
Delete display: none; from the main wrapper.
Paste the green code near the end of the CSS.
.profile-character-card-chats-hstack {
font-size: 0;
display: none;
}.profile-character-card-chats-hstack::after {
content: " CHATS";
font-size: 10px;
}Change CHATS and 10px.
Keep the selector, ::after and content:.
Save and refresh the profile page.
Cause: a fixed width extends beyond the screen.
.profile-box {
width: 900px;
}.profile-box {
width: min(900px, 100%);
}
@media (max-width: 600px) {
.decoration { display: none; }
}Cause: the selector points at the wrong element.
.chat-count {
color: pink !important;
}.profile-page
.profile-character-card-chats-hstack {
color: pink !important;
}Cause: the font is missing or failed to load.
font-family: "Arial Narrow";
font-family: "Arial Narrow", Arial, sans-serif;
Keep connected structural blocks as one continuous HTML structure.
Check the line immediately before the first visible tag.
</div> <div class="next-block"> ... </div>
Delete the gap between the closing and opening tags.
</div> <div class="next-block">
</div><div class="next-block">
Join adjacent article and section tags too.
<section class="cards"><article class="card">FIRST</article><article class="card">SECOND</article></section>
Keep every closing tag; remove only the gaps.
Useful hooks and a reminder of which ones need checking after updates.
.profile-character-card-chats-hstackContains the chat icon and dynamic number.
.profile-followers-countTest it on desktop and mobile.
.profile-character-cardScope broad rules to the profile.
::before / ::afterUseful for labels and decoration.
A small final check before the profile is finished.
An evolving archive for JanitorAI profile layouts, snippets and visual experiments.
FIND ME ON JANITOR.AI ↗