@iamsrijitbanerjee

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)

Entry 1 — Laying the FoundationThe project kicked off with the development of the core desktop architecture. Instead of following the standard trend of building a sleek dark-glass interface, the vision was to create a warm, tactile detective station inspired by The Mentalist. The initial focus was setting up the baseline window management engine in pure Vanilla JavaScript using mouse event listeners (mousedown, mousemove, and mouseup). A key technical challenge was resolving $z$-index stacking bugs so that clicking any open window instantly brought it to the front. Once the drag logic was stabilized, the initial CSS styling was applied, giving windows their signature manila case folder tabs, red stamps, and custom close buttons.Entry 2 — Interactive Widgets and Local Storage SyncThe next phase focused on expanding functional desktop widgets to bring the detective theme to life. First came Patrick’s Tea Lounge, a custom focus timer allowing users to steep Earl Grey, Green Tea, or Chamomile, complete with an audio chime upon completion. Next, an Evidence Pinboard was added, featuring corkboard textures, polaroid cards, and red string connection tags. Finally, the Encrypted Field Notes app was built with localStorage integration, ensuring draft notes persist across browser reloads while offering a timestamped archive dropdown to load and manage previously saved field notes.Entry 3 — Show Lore, Audio Synthesis, and Final PolishThe final development phase focused on deep worldbuilding, feature additions, and UI polish. A searchable top system bar was integrated with a database containing over 50 characters, suspects, and victims from The Mentalist. An interactive CBI Consultant Badge Generator was added, using an HTML5 Canvas script to render custom digital IDs that users can download directly as PNG files. To fix portrait framing on roster cards, CSS image alignment was tuned to anchor photos from the top center. Lastly, a subtle Red John easter egg was placed in the corner of the desktop, triggering a creepy audio synth, screen flickering, falling blood drops, and a transition into high-contrast dark mode upon interaction.

Entry 1 — Laying the FoundationThe project kicked off with the development of the core desktop architecture. Instead of following the standard trend of building a sleek dark-glass interface, the vision was to create a warm, tactile detective station inspired by The Mentalist. The initial focus was setting up the baseline window management engine in pure Vanilla JavaScript using mouse event listeners (mousedown, mousemove, and mouseup). A key technical challenge was resolving $z$-index stacking bugs so that clicking any open window instantly brought it to the front. Once the drag logic was stabilized, the initial CSS styling was applied, giving windows their signature manila case folder tabs, red stamps, and custom close buttons.Entry 2 — Interactive Widgets and Local Storage SyncThe next phase focused on expanding functional desktop widgets to bring the detective theme to life. First came Patrick’s Tea Lounge, a custom focus timer allowing users to steep Earl Grey, Green Tea, or Chamomile, complete with an audio chime upon completion. Next, an Evidence Pinboard was added, featuring corkboard textures, polaroid cards, and red string connection tags. Finally, the Encrypted Field Notes app was built with localStorage integration, ensuring draft notes persist across browser reloads while offering a timestamped archive dropdown to load and manage previously saved field notes.Entry 3 — Show Lore, Audio Synthesis, and Final PolishThe final development phase focused on deep worldbuilding, feature additions, and UI polish. A searchable top system bar was integrated with a database containing over 50 characters, suspects, and victims from The Mentalist. An interactive CBI Consultant Badge Generator was added, using an HTML5 Canvas script to render custom digital IDs that users can download directly as PNG files. To fix portrait framing on roster cards, CSS image alignment was tuned to anchor photos from the top center. Lastly, a subtle Red John easter egg was placed in the corner of the desktop, triggering a creepy audio synth, screen flickering, falling blood drops, and a transition into high-contrast dark mode upon interaction.

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!

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)