@iamsrijitbanerjee

Devlog #1: Building a Custom Personal Site & Interactive Deck. I’ve officially kicked off development on my custom personal website, built completely from scratch using vanilla HTML5, CSS3, and JavaScript. The goal of this project is to create an interactive, cinematic hub that showcases my work as a CS engineering student, STEM Olympiad background, hardware builds, and personal passions. So far, I have established the overall responsive layout, crafted a clean light-mode aesthetic, and built the core interactive elements—including a dynamic typing hero section, a popup FUT manager card modal, a football goal kick minigame with live commentary, and a Mentalist-inspired observation generator. Over the past session, my primary agenda focused on layout alignment, UI refinements, and asset fixes. I resolved poster aspect-ratio inconsistencies across the cinema, web series, and gaming cards to ensure uniform vertical alignment, while wrapping each card in subtle neon glow rings. Furthermore, I aligned the baseline for all widgets in the personalized space, updated the polyglot section with official Duolingo stats and branding, and introduced floating background mathematical symbols to reflect the site’s STEM theme. Looking ahead, my shortlist for the next milestone involves setting up the GitHub repository, establishing a clean deployment pipeline, and testing cross-device responsiveness. I also plan to implement smoother section scroll transitions, add further polish to the chess conundrum puzzle widget, and integrate an embedded feed for my math paradox blog. The core foundation is set, and the next phase will focus on micro-interactions and performance optimization!

Devlog #2: Goalpost Animations, Multi-Puzzle Engine & Expanded Social DeckIn this second development update, the primary focus shifted toward deepening interactivity and refining visual feedback across the personalized deck. The football minigame received a full structural overhaul, transitioning from a basic bounce effect to a dedicated goalpost frame complete with net pattern styling. Clicking the ball now triggers a smooth CSS transform animation that shoots the ball directly into the “Top Bin” target before resetting. Additionally, the single chess conundrum was upgraded into a dynamic multi-puzzle system featuring custom navigation controls, allowing users to toggle seamlessly between different tactical scenarios like Smothered Mates, Queen Sacrifices, and Back-Rank Checkmates.On the UI and networking front, several visual polish passes and link integrations were executed. A subtle neon glow text-shadow was applied to the hero header to make the main title stand out against the radial backdrop. The social media grid was expanded with Spotify and Reddit widgets to complete the box layout, and the Duolingo badge was updated with a clean monochrome owl vector icon. To ensure full functionality, all movie posters, web series cards, gaming overlays, and social widgets were wrapped in explicit link structures, ready for exact external URL mapping, along with a lightweight SVG favicon added to the document head.With the core interactive features fully implemented, the next milestone focuses on deployment readiness and optimization. The short-term plan includes conducting thorough cross-device responsiveness testing, verifying touch interactions on mobile viewports, and populating final project links. Following these final refinements, the site will be pushed to GitHub to establish an automated deployment pipeline for live hosting.

Devlog 1: Laying the Foundation & The Manila VisionWhen I started working on Web OS 1 for the Stardance project, I knew right away that I didn’t want to build just another generic dark-mode desktop. I’m a huge fan of The Mentalist, so I decided to base the entire aesthetic on a warm, tactile CBI detective station. For the first phase, my main focus was setting up the baseline window architecture. I built a custom drag-and-drop window engine from scratch using vanilla JavaScript mouse events (mousedown, mousemove, and mouseup). The trickiest part was getting the dynamic $z$-index focal stacking to work smoothly so that whichever window you click automatically pops to the front. Once the core mechanics were solid, I applied the Manila folder styling, tab stamps, clean window bars, and basic close controls.

With the basic window manager up and running, Phase 2 was all about bringing functional detective utilities to the desktop. I created Patrick’s Tea Lounge, a built-in focus timer widget with steep presets (Earl Grey, Green Tea, Chamomile) and Web Audio API chimes to fulfill the unlisted extra feature requirement. Next, I designed the Evidence Pinboard app using corkboard textures, polaroid cards, and status tags. To make the system feel truly functional, I built the Encrypted Field Notes application. I wired it directly up to local storage so draft notes automatically save and persist even if you refresh the browser, and added a timestamped archive system so notes can be saved and reloaded later.

Just reached a goal with my Slack bot project! I have now. Run locally “Shelby Company Ltd.”—a Peaky Blinders-themed productivity bot. It has slash commands to send out important tasks (/by-order-of) start quick team meetings (/family-meeting) and record achievements, in the company ledger. Making Node.js and Socket Mode work well with Windows PowerShell was a problem but seeing that first automatic Slack reply was a really exciting moment. The bot now has 5 commands. Next step: putting it on Hack Club Nest for availability!

Check out the webiste in different aesthetics. I have been working on the website since the start of the world cup, it uses supabase integration and raw html, here are my last few updates that i could log: Fetching data from admin.html(back panel score updating page), supabase correspondence fixed(data storing table provider) along with new FUT manager cards dossier introduction(each player/manager has his own FUT card based on his performances both recent and historical). Flexible number of participants ensured(from strict 3 to any number, currently sitting at 6). Also winners announced from first phase(based on managers’ real 2026 world cup fantasy team performance data)

Check out the webiste in different aesthetics. I have been working on the website since the start of the world cup, it uses supabase integration and raw html, here are my last few updates that i could log: Fetching data from admin.html(back panel score updating page), supabase correspondence fixed(data storing table provider) along with new FUT manager cards dossier introduction(each player/manager has his own FUT card based on his performances both recent and historical). Flexible number of participants ensured(from strict 3 to any number, currently sitting at 6). Also winners announced from first phase(based on managers’ real 2026 world cup fantasy team performance data)

The final phase was dedicated to deep show immersion, worldbuilding, and UI polish. I integrated a search bar into the top system bar that lets users look up characters, suspects, and team members from The Mentalist. I also built a CBI Consultant ID Generator that uses HTML5 Canvas to let users create and download their own custom digital badge. To ensure the UI looked polished, I tuned the CSS framing to prevent head cropping on character photos. Finally, to wrap it up, I hid a subtle Red John smiley face on the desktop—clicking it triggers eerie synthesized horror audio, falling blood animations, and flips the entire OS into a high-contrast dark mystery mode. With all submission requirements checked, Mentalist OS 1 is officially complete and ready for testing!

The final phase was dedicated to deep show immersion, worldbuilding, and UI polish. I integrated a search bar into the top system bar that lets users look up characters, suspects, and team members from The Mentalist. I also built a CBI Consultant ID Generator that uses HTML5 Canvas to let users create and download their own custom digital badge. To ensure the UI looked polished, I tuned the CSS framing to prevent head cropping on character photos. Finally, to wrap it up, I hid a subtle Red John smiley face on the desktop—clicking it triggers eerie synthesized horror audio, falling blood animations, and flips the entire OS into a high-contrast dark mystery mode. With all submission requirements checked, Mentalist OS 1 is officially complete and ready for testing!

With the basic window manager up and running, Phase 2 was all about bringing functional detective utilities to the desktop. I created Patrick’s Tea Lounge, a built-in focus timer widget with steep presets (Earl Grey, Green Tea, Chamomile) and Web Audio API chimes to fulfill the unlisted extra feature requirement. Next, I designed the Evidence Pinboard app using corkboard textures, polaroid cards, and status tags. To make the system feel truly functional, I built the Encrypted Field Notes application. I wired it directly up to local storage so draft notes automatically save and persist even if you refresh the browser, and added a timestamped archive system so notes can be saved and reloaded later.

Building this website was a fun challenge especially when I was dealing with the math logic of the tracking terminal. At first I had all my code for the project in one file, which became incredibly messy. My biggest recent win with the tracking terminal was refactoring the project into separate clean HTML files CSS files and JavaScript files for the website. This made debugging the tracking terminal much easier.

I also spent a lot of time completely rewriting the CSS for the website from scratch. I wanted to move from generic layouts and build a clean dashboard for the project that felt personal to my league. The technical hurdle with the tracking was writing the JavaScript to make the Supabase database dynamically adjust the points scale depending on whether 5 or 6 managers submitted scores that week in the tracking terminal. After tweaking the array sorting logic and fixing a few silent database bugs, in the tracking terminal the live sync is finally running perfectly.

Devlog 1: Laying the Foundation & The Manila VisionWhen I started working on Web OS 1 for the Stardance project, I knew right away that I didn’t want to build just another generic dark-mode desktop. I’m a huge fan of The Mentalist, so I decided to base the entire aesthetic on a warm, tactile CBI detective station. For the first phase, my main focus was setting up the baseline window architecture. I built a custom drag-and-drop window engine from scratch using vanilla JavaScript mouse events (mousedown, mousemove, and mouseup). The trickiest part was getting the dynamic $z$-index focal stacking to work smoothly so that whichever window you click automatically pops to the front. Once the core mechanics were solid, I applied the Manila folder styling, tab stamps, clean window bars, and basic close controls.

In this update, the primary focus was on resolving external asset rendering issues, expanding the interactive deck, and completing the site’s digital footprint grid. The most critical fix involved addressing hotlink restrictions from media hosts like IMDb and Amazon CNDs by implementing a no-referrer meta header in the layout. This allowed all high-resolution film posters, web series covers, and gaming media assets to render smoothly without broken image links or aspect-ratio distortion. Additionally, a custom SVG favicon was introduced, and a subtle neon text-shadow glow was added to highlight my name across the hero section. To complete the digital footprint section, I added dedicated Spotify and Reddit widgets with glowing neon halos alongside the existing social cards. The Duolingo widget icon was also updated to a sleek, monochrome vector design to maintain visual consistency across all network blocks. With the media display bugs resolved and all interactive props fully operational, the project is ready for its final deployment pipeline and cross-device performance testing.

In this update, the primary focus was on resolving external asset rendering issues, expanding the interactive deck, and completing the site’s digital footprint grid. The most critical fix involved addressing hotlink restrictions from media hosts like IMDb and Amazon CNDs by implementing a no-referrer meta header in the layout. This allowed all high-resolution film posters, web series covers, and gaming media assets to render smoothly without broken image links or aspect-ratio distortion. Additionally, a custom SVG favicon was introduced, and a subtle neon text-shadow glow was added to highlight my name across the hero section. To complete the digital footprint section, I added dedicated Spotify and Reddit widgets with glowing neon halos alongside the existing social cards. The Duolingo widget icon was also updated to a sleek, monochrome vector design to maintain visual consistency across all network blocks. With the media display bugs resolved and all interactive props fully operational, the project is ready for its final deployment pipeline and cross-device performance testing.

Devlog #2: Goalpost Animations, Multi-Puzzle Engine & Expanded Social DeckIn this second development update, the primary focus shifted toward deepening interactivity and refining visual feedback across the personalized deck. The football minigame received a full structural overhaul, transitioning from a basic bounce effect to a dedicated goalpost frame complete with net pattern styling. Clicking the ball now triggers a smooth CSS transform animation that shoots the ball directly into the “Top Bin” target before resetting. Additionally, the single chess conundrum was upgraded into a dynamic multi-puzzle system featuring custom navigation controls, allowing users to toggle seamlessly between different tactical scenarios like Smothered Mates, Queen Sacrifices, and Back-Rank Checkmates.On the UI and networking front, several visual polish passes and link integrations were executed. A subtle neon glow text-shadow was applied to the hero header to make the main title stand out against the radial backdrop. The social media grid was expanded with Spotify and Reddit widgets to complete the box layout, and the Duolingo badge was updated with a clean monochrome owl vector icon. To ensure full functionality, all movie posters, web series cards, gaming overlays, and social widgets were wrapped in explicit link structures, ready for exact external URL mapping, along with a lightweight SVG favicon added to the document head.With the core interactive features fully implemented, the next milestone focuses on deployment readiness and optimization. The short-term plan includes conducting thorough cross-device responsiveness testing, verifying touch interactions on mobile viewports, and populating final project links. Following these final refinements, the site will be pushed to GitHub to establish an automated deployment pipeline for live hosting.

Devlog #1: Building a Custom Personal Site & Interactive Deck. I’ve officially kicked off development on my custom personal website, built completely from scratch using vanilla HTML5, CSS3, and JavaScript. The goal of this project is to create an interactive, cinematic hub that showcases my work as a CS engineering student, STEM Olympiad background, hardware builds, and personal passions. So far, I have established the overall responsive layout, crafted a clean light-mode aesthetic, and built the core interactive elements—including a dynamic typing hero section, a popup FUT manager card modal, a football goal kick minigame with live commentary, and a Mentalist-inspired observation generator. Over the past session, my primary agenda focused on layout alignment, UI refinements, and asset fixes. I resolved poster aspect-ratio inconsistencies across the cinema, web series, and gaming cards to ensure uniform vertical alignment, while wrapping each card in subtle neon glow rings. Furthermore, I aligned the baseline for all widgets in the personalized space, updated the polyglot section with official Duolingo stats and branding, and introduced floating background mathematical symbols to reflect the site’s STEM theme. Looking ahead, my shortlist for the next milestone involves setting up the GitHub repository, establishing a clean deployment pipeline, and testing cross-device responsiveness. I also plan to implement smoother section scroll transitions, add further polish to the chess conundrum puzzle widget, and integrate an embedded feed for my math paradox blog. The core foundation is set, and the next phase will focus on micro-interactions and performance optimization!

Building this website was a fun challenge especially when I was dealing with the math logic of the tracking terminal. At first I had all my code for the project in one file, which became incredibly messy. My biggest recent win with the tracking terminal was refactoring the project into separate clean HTML files CSS files and JavaScript files for the website. This made debugging the tracking terminal much easier.

I also spent a lot of time completely rewriting the CSS for the website from scratch. I wanted to move from generic layouts and build a clean dashboard for the project that felt personal to my league. The technical hurdle with the tracking was writing the JavaScript to make the Supabase database dynamically adjust the points scale depending on whether 5 or 6 managers submitted scores that week in the tracking terminal. After tweaking the array sorting logic and fixing a few silent database bugs, in the tracking terminal the live sync is finally running perfectly.