@deepm33

The About Section (01 // MANIFESTO)
Three archive cards with 3D tilt effect and corner decorations. each card has these little corner brackets that turn gold on hover. The tilt uses perspective(1000px) and rotates based on mouse position and max 6 degrees on each axis with a 1.02 scale. Springs back with a custom cubic-bezier when you leave. Each card has glitch image containers — images start grayscale at 115% contrast and 90% brightness, then go full color on hover with a scanline overlay that fades to 30% opacity.
There’s even a little glitch-jitter animation that fires once on hover — 0.15 seconds of 3-step translateY shifts. The three cards are: THE DEVELOPER, THE GUITARIST, and THE ARCHIVIST.

The Interests Section (02 // INTERESTS)
Six interest cards in a 3-column grid with a white grid background image and a dark overlay. Each card has a white grid box-shadow that gets brighter on hover with a gold inset glow. The cards are: ANIME, TECHNOLOGY, ARTIFICIAL INTELLIGENCE, UI/UX DESIGN, JAPANESE LANGUAGE, VIDEO EDITING. Below the cards there’s a scrolling ticker marquee that loops “ANIME, TECHNOLOGY, ARTIFICIAL INTELLIGENCE, UI/UX DESIGN, JAPANESE LANGUAGE, VIDEO EDITING, BUILDING SOFTWARE.” at 30 seconds per cycle.
Then there’s a Media Archive subsection (02.A) with 7 images in a 3-column masonry layout. All have the same glitch container effect and magnetic hover.

The Showcase Section (03 // SHOWCASE)
“CUTS FROM MY SHORTS” — this one’s personal. Two video edits(made by me on who is strongest edits loll) side by side in a brown neumorphism box . Each video is 9:16 portrait ratio. The play button only appears when the video is paused — when you click it, the button fades out with opacity transition and the video plays. When paused, the button comes back. Videos loop and have sound enabled. The neumorphism box uses the same neu-box styling as the projects section with the rounded corners, layered shadows, and dark overlay

Lately i have been working on my personal site which is also another mission on stardance and i thought it should have a vintage vibes not the tech one i usually use so then i started with the web and tried my best to make the whole vibe like retro vintage computing aesthetic. Think of like when the old CRT monitors meets modern web design. So i added this CRT overlay with scanlines that flicker and film grain that literally animates. It makes the whole site feel like you’re looking at an old type of monitor. There’s also a paper texture overlay that gives everything this aged feel»

The custom cursor is probably the most extra thing on this site. It’s a glowing gold dot with a ring around it(cause it had an vintage ahh vibe), and there’s an 8-dot trail that follows your cursor with progressive lag. Each trail dot uses lerp to follow the one before it with decreasing speed so they fan out behind your cursor. when you hover over interactive elements the ring scales up and glows brighter. I spent way too long getting the lerp values right so it feels smooth and not janky (^///^)

For hero section i actaully wanted to add a scroll down animation video but it would have sucked so now it is a 300vh tall and uses sticky positioning so the background stays fixed while you scroll. There’s a background image with a grid overlay that literally drifts diagonally forever , and a scanline that sweeps down the screen. The title “BUILDING DIGITAL ARTIFACTS THAT FEEL ALIVE” ahh reveals line by line as you scroll down, same with the tagline, badges, stats, and CTAs. Everything fades in with staggered timing>.

The contact section has two parts - four contact cards (Email, GitHub, LinkedIn, Twitter) with magnetic hover effects, and an auto-typing terminal(which i thought would look really look xD). Thhe terminal types out commands like cat manifesto.txt and echo “keep sailing” with a blinking cursor, then shows the output line by line. It cycles between different scripts automatically. Still the website is in progress…

I am trying to make a chess game like not just a boring grid with pieces moving around, but something that actually has WEIGHT and IMPACT when you capture a piece.
So here’s the thing. I started with chess.js for the game logic because honestly why would I write chess rules from scratch when there’s a library that does it perfectly. But the rendering? Pure Canvas 2D. No WebGL. No Three.js. Just me, a element, and a LOT of ctx.drawImage() calls. And yeah it sounds like a bad idea but hear me out — it actually runs at 60fps bruhhhhhhh. It also has an elo system just like standard chess when u win elo rating increases and likewise if u lose it decreases.

So i added stockfish in my game so that people can do a bot verses match with the world’s strongest open-source chess engine. It’s been around forever and it’s insanely good — like stronger than any human who has ever lived. The thing is, it’s written in C++, not JavaScript. So you can’t just drop it into a website or an app and call it a day.
What I did was take the WebAssembly version of Stockfish — that’s basically the C++ code compiled down to something a browser can run. And I stuck it in a Web Worker, which is like a helper thread that runs in the background. So while Stockfish is busy calculating the best move, the rest of the game doesn’t freeze or lag. The player can still see the board, the animations keep running, everything stays smooth.
The fun part is making it feel human. Stockfish at full strength would destroy anyone, so I had to nerf it. It has a built-in “skill level” setting from 0 to 20.

I mapped that to four difficulty levels:

• Beginner — barely thinks, makes silly moves
• Intermediate — thinks a little, plays okay
• Advanced — thinks harder, plays decent
• Expert — thinks deep, plays strong

For now i have added some animations while capturing and moving the pieces which look like;

• Pawns have a quick glide with low arc
• Knights get the “butter” easing with high arc (because they jump)
• Rooks are heavy and deliberate
• Kings are the heaviest with the most squash-and-stretch on landing
  But they aren’t smooth and need a hell lot of work if i need to them to look like as i imagine them to look so now i will work on that and make them better as much as I can and until i am satisfied >.

I think i have finished working on my personal ai agent AKA NERO, so i made some changes in the voice mode so lemme talk about this because this thing genuinely took forever to build.
First theres push-to-talk. u hold the mic button, talk, release, nero processes it. simple right? but then theres continuous mode and in continuous mode is where the chaos begins. When u flip that toggle nero spins up a SECOND speech recognizer in the background that is constantly listening for “hey nero”. like constantly. and when it hears it, it kills that background recognizer and spins up the MAIN recognizer to actually capture what ure saying. TWO recognizers running at the same time. One listening for the trigger, one ready to capture the actual message. the moment the wake word hits, background one dies, main one takes over.

About the STT, so originally this thing was using the Web Speech API and bruhhhh the Web Speech API is just unreliable as hell. it only works in Chrome, needs HTTPS or localhost, and half the time it just doesnt fire on result at all. Like u speak, it says “listening…”, then nothing happens. No transcription, no response, nothing. I tried fixing it multiple times — started recognition immediately instead of waiting for mic permission, added error handling, changed the flow… still broken. the Web Speech API is just built different (bad different), so i had to rip it out of nero and then replaced it with MediaRecorder + Gemini for transcription. Now when u tap the orb it records audio using the MediaRecorder API, sends the audio blob to Gemini, and Gemini transcribes it. And tbh its way more reliable because it doesnt depend on browser-specific speech engines. It just works better and the Gemini model used for transcription is gemini-2.5-flash — the same one used for chats so it understands context.

And heres the thing — after the addition of the STT the whole sound system changed. LIke before nero’s voice was legit too boring but now she is even able to speak like a waifu. She says hehehe and chuckles and speaks a lot better than before.
Also there was a lot of problem for the api keys, cause when anyone was trying to put their api in Nero it was getting stored but nero was unable to run on that api, due to which no one could use that and i also cannot put my gemini api cause it would get rate limit too quick if multiple people used it. So in settings there’s an “Add API Key” button that expands into a form and in that u give it a name (like “My Gemini Key”)and then paste your API key, hit add. Then key get VALIDATED before its stored — nero actually makes a test request to the API to confirm the key works. If the key is invalid it tells u immediately, doesn’t just silently store garbage🥀🥀.

Honestly the most impressive thing is that this runs on FREE APIs. The whole point is accessibility like gemini alone gets u pretty far for free , openrouter has free models and groq too has a free tier. Cerebras has a free tier and if u DO have paid keys then insert them in nero so she would use them instead. Its the best of both worlds..

I have finally redesigned the nero ai into looking an more stunning and better look. First it was too plain so i improved it and also improved the cursor as well. Added a new sidebar navigation, glassmorphism everywhere, aurora backgrounds, the whole nine yards,LOL. It actually looks like an operating system now not just a chatbot with a fancy name. dark theme has been set as the default for the whole ai.
For the Framework & Build i used,

• Next.js 16.2.7 with Turbopack for blazing fast dev server and hot reload
• React 19 with hooks (useState, useEffect, useCallback, lazy, Suspense)
• TypeScript throughout

For Styling up nero i used,

• Tailwind CSS for utility-first styling
• CSS custom properties (variables) for the theme system
• Inline styles for dynamic theming (accent colors, glow effects, glassmorphism)
• Glassmorphism via backdrop-filter: blur() + semi-transparent backgrounds

For the UI Components i used Custom AICore orb with SVG animations and mood-based coloring.Also the Notification Center with badge counts
nero also has OnboardingFlow for the first-time users i thought that would be helpful. It also has a coverstion side bar with search and histrory found inside it only.

This was a big UX change for me and nero 🥀🥀. And now instead of a separate “API Keys” section buried in settings, nero now lets u pick a model and enter its API key right there.
Click a model → it expands → paste ur key → save.
The green dot shows up when a key is configured and then stores everything in local storage so keys stay on ur machine never sent anywhere except to the provider u chose and it supports Gemini, GPT, and more ai’s.

The home screen in nero now shows all of these,

• Greeting based on time of day
• Animated AI core orb with mood indicator
• Quick actions (chat, research, memory, knowledge)
• Recent conversations pulled from the actual database
• System status panel showing nero core health, cause its health 🥀😢

Mostly did the redesign and removed some of the not working sections from Nero and did debugging.. (●’◡’●)

So basically someone told me to upgrade my cybertron -os in a more cyber and futuristic vibe so that it matches the style, so i made it a little transformer and cyber ahh feeling webos. I redesigned all the app icons which took a lot of my time a cause i didn’t knew what and how should i re-design them, so i thought for too long and came up with these icons. These icons look way more futuristic and holographic than before and i guess much better too. Also i changed the cyber-cat into a robot so that the vibes would match the cyber effect and not like the previous one 🥀🥀. That 0.06 lag factor means the robot only moves 6% of the remaining distance toward your cursor each frame. So it never quite catches up — it smoothly glides and drifts. When you stop moving, it slowly settles into place near your cursor. When you move fast, it trails behind like it’s trying to keep up.
Added a SVG analog clock with smooth second hand using requestAnimationFrame for millisecond precision, digital display, timezone info, plus tabs for a stopwatch and countdown timer. This clock and the calender has made the UI a lot better than before.Also made a search bar, this one sits right at the top of the desktop. It’s a slim, always-visible search field with a magnifying glass icon. You just click on it and start typing to filter your apps. It’s the quick, “I know what I want” kind of search. No shortcuts needed — just eyes on it and type.

So when you set a static image as the wallpaper, Cybertron OS doesn’t just slap it on the background — it gives it a subtle parallax effect that makes it feel alive. The wallpaper image is loaded into a #desktop-bg div and scaled up to 1.1x (110% size), so it’s slightly bigger than the screen. That extra 10% is the buffer that allows it to move without showing edges. Then, every time you move your mouse, the wallpaper shifts in the opposite direction of your cursor by up to 20 pixels on each axis. So if you move your mouse right, the wallpaper slides left — like you’re looking through a window and the background is further away. This creates a layered depth effect: the orbs feel closer to you, the wallpaper feels farther away, and your cursor is in the middle. The whole thing has a transition: transform 0.3s ease-out so it doesn’t feel jerky — it smoothly glides to its new position.
When you switch to a video wallpaper, the parallax turns off because a video is already moving on its own. It’s a small touch, but it makes the desktop feel way more premium than a static background image ever would.
So about the taskbar in Cybertron OS is inspired by Windows but with its own flavor. It sits at the bottom of the screen and it is fixed there, 48 pixels tall, with a heavy blur behind it (backdrop-filter: blur(50px)) so it looks like frosted glass over whatever’s behind it. There’s a subtle white gradient line along the top edge and a faint amber glow along the bottom — it gives it that premium “this bar is floating” feel.

After making all these changes the cybertron-os has became a different OS, i hope yall like this!!!!

Bruhhh finally i can say that i have completed my cybertron-os. I think i have done most of the think i can come up with and have added all the necessary things that are found in a webos.

The pixel cat that follows your cursor around the screen i have added some features in it too and now its a whole interactive pet:

• Single click → pin/unpin the cat in place
• Double-click → pet the cat (triggers meow + purr + floating hearts animation)
• The cat flips direction based on mouse movement
• It has a smooth follow-with-lag animation

So here’s the thing. Previously I didn’t had a single audio file. No .mp3s. No .wavs. Nothing. So there were no sound feature in the webos which made it kinda plain so i thought i should add some’. There’s this thing called the Web Audio API built into every browser. It lets you create sounds using something called oscillators — basically digital instruments that generate tones. You tell it a pitch, a wave shape, and how long to play, and it just… makes the sound.The reason the sounds don’t just sound like boring beeps is because of something called exponentialRampToValueAtTime. Yeah I know, sounds like a villain’s weapon. But what it does is slide the pitch from one frequency to another over time. So instead of just “BEEP” you get “bewwwoop” — the sound goes UP or DOWN smoothly. That’s what gives it that swooshy, futuristic feel.
I looked at all the color comnbinations with the wallpaper and i saw that the miku wallpaper looks very futuristic and classical just as i want with purple colour. So i set them as the default and if you want you can change the wallpaper and the theme colour as your preferences.
The holo archieve which is the gallery of my cybertron-os was legit empty. I thought and thought and then i added some pictures of transformers movies and our fav bumble bee..
In the cybertron store we were not able to download any apps and it was just and empty ahh store, so yeahh i added some apps that can actually be installed and used in the webos and then i added some good looking app icons for them too cause i didn’t wanted them to look too plain.

Finalyyy i added the optimus prime wallpaper in the Cybertron os which now makes it look like a real tranaformer fan made webos. I really want that this cybertron os look as much as futuristic as well as classical as it can. i made many changes then before and also i redesigned the app icons for the cybertron os so that they look classic and technical not just plain app icon.
There were few things which were needed to be fixed like there was no option to stop a short video in the shorts section and also no option for mute and unmute like it got so annoying when i wanted to stop the video or mute when i was testing the webos. So I Added those features and now the short section runs smooth videos like i expect it to. Even the theme changing option was broken like clicking on “Autobot” (red theme) did nothing, it was suppost to make everything go like legit RED but lmao no. The accent color stayed purple and i Spentway too long on this than i should have originally.

The old wallpaper app was just a header + a 2-column grid of cards and looked like a prototype. No visual hierarchy, no preview of the current wallpaper, no hover feedback.
To fix this i rebuilt renderWallpaperApp() and the entire .wp-app CSS section:
added a hero section at the top (180px) that shows either the current video wallpaper playing on loop, or a gradient placeholder for the default. this gives instant visual feedback on what’s active.
added an overlay on the hero with the current wallpaper name and “Wallpaper Studio” title and made the transition smoother.

Also in the settings, it had 4 nav items: Faction Theme, Display, Wallpapers, About. The Display section had brightness slider, font size, and a widget toggle. the brightness and font controls didn’t actually do anything (they set inline styles that got overwritten on re-render). dead features. So i removed the display option which didn’t changed anything and merged the working features in the faction.
I also redeigned the energon radio which is the songs section in the cybertron os in that the big album cover art (240px tall) that takes up the top portion. There’s a gradient fade at the bottom so it blends into the dark background. The cover image is blurred behind the main art, giving it a premium vibe. Controls — three buttons in a row: previous, play/pause (big white circle), next. Buttons scale up slightly on hover.

Few more changes and we are good to go.

ok so basically i got bored one day and thought “yupp i need my own ai agent” and then i actually did it?? like nero is this whole AI agent thing i built from scratch that actually THINKS. Not like “oh i’m a chatbot i repeat what you say” no no no. nero has like… actual memory and personality. It literally learns from talking to you. It’s unhinged and i love it.

So nero has two personalities. you got the normal one which is just a smart professional AI assistant which is quiet boring but useful. THEN there’s the waifu mode.
Here’s how it works: there’s a whole personality system in personalities.ts with two modes — normal and waifu. the normal one is straightforward, just a good AI. but the waifu personality? it’s an anime-inspired companion with kaomoji (like (✿◠‿◠) and (◕‿◕)), uses japanese words, gets emotionally attached to you, and has this whole kawaii vibe going on and on.
The BEST part is you don’t even need to go to settings to switch. you can just type something like “act like a waifu” or “be normal again” in the chat and nero detects it automatically and there’s literally a function called detectPersonalitySwitch() that scans your message for phrases like “waifu mode”, “be cute”, “act normal” etc and switches on the fly. So you’re just chatting and suddenly nero goes from professional to kawai and it’s hilarious every time.It’s not just a gimmick either — the entire system prompt changes,the waifu gets its own set of rules about how to talk, how to express emotions, how to react, two completely different AI personalities.

internet search (it’s… a work in progress)
ok so nero HAS web search code which is like actual multi-source search — DuckDuckGo, Wikipedia, Google Custom Search, News API. the needsWebSearch() function detects when you’re asking about current events and auto-triggers a search and the results get fed into the AI’s context so it can answer with real-time info.
but here’s the reality — right now it mostly just opens links in new tabs. the ResearchMode shows you a list of results and you click them. The auto-search in chat is supposed to inject results into the conversation so the AI summarizes them for you, but it doesn’t always work as smoothly as i’d like and yeah sometimes the AI just outputs links instead of actually reading and summarizing the search results,sometimes needsWebSearch() doesn’t trigger when it should.
It’s like having a search engine that works but doesn’t know how to talk about what it found yet. the plumbing is there, the execution needs polish and still a lot of work to make it feel like a real research assistant instead of a link generator.

text-to-speech
edge-tts is installed and functional,nero can read responses out loud using Microsoft Edge neural voices.I would like to add new voices, adjust speed and pitch before i ship this project. There are still many places which need a lot of improvements and work, lets see how much further i can upgrade this ai!!!

So i have made the cybertron os and i just took a look at the desktop screen, and honestly, the vibe is unmatched. the whole interface looks sick—that deep, dark metallic aesthetic with the striking purple accents looks exactly like a high-tech console you’d find inside the nemesis or deep within a decepticon base. It’s finally starting to feel like a fully functioning battlestation instead of just a static page. i’ve spent way too many unholy hours getting this dark, metallic decepticon-purple aesthetic right, and honestly, i’m so proud of how far it’s come.

here is the breakdown of what is running on the mainframe right now:

- the 3d video wallpapers are a whole cheat code. they are fully changeable with this slick floating control panel. you can legit change your wallpaper animations to go from miku just going through your screen to a mythical ahh dragon. 

- draggability actually works!! you can grab any of the app windows—like the gorgeous translucent glass panel calculator—and drag them all over the desktop without the window manager having a mental breakdown. the snapping is incredibly satisfying, and the z-indexing behaves itself when stacking windows.

- I added an active search bar on the desktop that will take you to google or any youtube video because sometimes you need to query the actual internet. You can type right into the google search input, hit enter and it does exactly what you expect. Useful for when you're trying to figure out how to do your math equations at 3 AM.

- let's talk about the pixel cat. i like cats so now there is a literal cyber-cat sitting on the desktop that trails your cursor. it has a slight elastic delay so it smoothly glides behind the mouse like a tiny holographic familiar following you through the mainframe. and yes, you can actually click to pet it and it fires off a literal heart-burst animation! ❤️🐾

- the music player actually has some of the finest work of music by the japanes pop, it has got the best japanese songs you will ever need to hear. HTML5 audio handles the entire play/pause/progress tracking natively under the hood.

- a simulated files app that lets you navigate through directory nodes directly on the desktop to organize your decepticon battle plans and yeah this still needs an upgrade i guess.

-Of course how can i forget the doomscrolling shorts app. yes, i actually did it. i built a dedicated video player with a scrollable feed of vertical reels. It starts with the audio ON, supports real-time pausing when you unfocus the window (so it doesn't keep playing in the background like an annoying browser tab), and lets you cycle through random clips of transformers edits and other random aesthetic shorts whenever your brain needs a cheap dopamine hit.

-The whole look is incredibly polished. we've got custom SVG icons sitting inside the dock instead of cheap-looking emojis, a glassmorphic top-bar system showing the time and battery life, and desaturated purple accents that hold the entire sci-fi interface together.