CatOS Devlog - User Profile & Loading System

What I Built Today

Today I built the user onboarding flow for my cat-themed web operating system. When someone opens CatOS for the first time, they create a fake profile by entering their name and their cat’s name. After submitting the form, they are greeted with a custom loading screen before the desktop appears.

Screens I Made

Welcome Screen

• Full-screen dark gradient background
• Circular cat profile image with an orange glow effect
• “Welcome to CatOS” title in orange
• Two input fields:
  • Your Name
  • Cat’s Name
• Orange “Enter CatOS” button with a hover animation
• Hidden error message displayed when either input is empty
• Frosted glass card created using backdrop-filter: blur()

Loading Screen

• Smaller version of the cat profile image
• Personalized welcome message using the entered names
• Animated progress bar that fills from 0% to 100%
• Eight loading messages that change as progress increases
• Three bouncing cat paw emojis with a wave animation
• Smooth transition to the desktop after loading finishes

How It Works

1. The user enters their name and their cat’s name.
2. They click the Enter CatOS button or press Enter.
3. The names are stored in global JavaScript variables so they can be accessed throughout the operating system.
4. The welcome screen is hidden and the loading screen is displayed.
5. A timer runs every 350ms, increasing the progress bar by a random value.
6. The loading status message changes depending on the current progress percentage.
7. Once the progress reaches 100%, the loading screen disappears and the CatOS desktop is displayed.

CatOS Devlog - User Profile & Loading System

What I Built Today

Today I built the user onboarding flow for my cat-themed web operating system. When someone opens CatOS for the first time, they create a fake profile by entering their name and their cat’s name. After submitting the form, they are greeted with a custom loading screen before the desktop appears.

Screens I Made

Welcome Screen

• Full-screen dark gradient background
• Circular cat profile image with an orange glow effect
• “Welcome to CatOS” title in orange
• Two input fields:
  • Your Name
  • Cat’s Name
• Orange “Enter CatOS” button with a hover animation
• Hidden error message displayed when either input is empty
• Frosted glass card created using backdrop-filter: blur()

Loading Screen

• Smaller version of the cat profile image
• Personalized welcome message using the entered names
• Animated progress bar that fills from 0% to 100%
• Eight loading messages that change as progress increases
• Three bouncing cat paw emojis with a wave animation
• Smooth transition to the desktop after loading finishes

How It Works

1. The user enters their name and their cat’s name.
2. They click the Enter CatOS button or press Enter.
3. The names are stored in global JavaScript variables so they can be accessed throughout the operating system.
4. The welcome screen is hidden and the loading screen is displayed.
5. A timer runs every 350ms, increasing the progress bar by a random value.
6. The loading status message changes depending on the current progress percentage.
7. Once the progress reaches 100%, the loading screen disappears and the CatOS desktop is displayed.

I am building a custom Slack utility bot using the Bolt for JavaScript framework. It runs on a Linux server (Nest) and provides a variety of interactive slash commands to automate tasks and add utility to my workspace.Here are the commands I have implemented:/for-ping - Checks the bot’s latency./for-catfact - Fetches a random, interesting fact about cats./for-flip - Flips a digital coin./for-choice - Randomly selects an item from a provided list./for-reverse - Reverses the input text./for-color - Generates a random HEX color code./for-mock - Converts text into “mocking” (sPoNgEbOb) style./for-rate - Rates an object on a scale from 0 to 10./for-nothing - A command that returns “nothing.”/for-help - Displays the list of all available commands.I am hosting this bot on my Nest server, using systemd to manage it as a background service to ensure it stays online continuously.