A high-performance monorepo showcase of modular web apps and experiments built strictly with Vanilla HTML5, CSS3 (3D transforms/variables), and JavaScript
A high-performance monorepo aggregating a curated collection of standalone vanilla web applications, each managed as an isolated Git submodule. Designed to demonstrate the advanced capabilities of native web APIs, hardware-accelerated animations, and responsive interactions without the overhead of modern framework layers. The portfolio includes a hardware-accelerated 3D rotating cylindrical carousel built using pure CSS transforms (css-playground), a real-time analog and digital timepiece using dynamic rotational trigonometric math (clock), an accessible, event-delegated task manager with persistent browser storage sync (to-do-list), and a highly responsive number guessing game featuring interactive validation, dynamic autofocus, keyboard binding hooks, and a hidden YouTube Easter egg (guess-number).
Sub-1ms scripting evaluation and DOM rendering times; sub-10ms localized event-to-UI update latency.
Locked 60 FPS visual rendering across all animations under heavy DOM manipulation, using GPU-accelerated transforms; 100% Google Lighthouse scores for Performance, Accessibility, and Best Practices.
Absolute zero ($0.00) monthly hosting and maintenance costs, running serverless on static CDNs (GitHub Pages/Vercel) with no backend compute requirements.
Monorepo Submodule Architecture: Engineered a decoupled, modular monorepo structure utilizing Git Submodules to maintain separate repositories for each project while presenting them inside a single master portfolio page, keeping individual dependency trees clean and standalone deployments trivial.
Pure CSS 3D Mathematical Layouts: Developed a highly optimized, JavaScript-free 3D rotating cylindrical carousel using advanced CSS 3D transforms (preserve-3d, backface-visibility: hidden) and mathematical angle calculations (transform: rotateY() translateZ()) to create a hardware-accelerated, fluid carousel that renders at a locked 60 FPS.
Smooth Analog Rotation Ratios: Implemented a real-time analog clock hand movement system that bypasses jerky minute-to-minute transitions. Calculated continuous floating-point rotation ratios mapping seconds to minutes, and minutes to hours, enabling smooth physical-like sweeps across the analog dial.
Event-Delegated State Serialization: Engineered a high-performance To-Do list state-management loop using event delegation and synchronous browser localStorage serialization. Submitting or deleting items instantly parses the DOM state and updates the serialized JSON array to prevent data loss across sessions.
Exhaustive situation-action-result breakdowns showcasing problem-solving and architectural execution.
Creating a 3D cylindrical carousel rotating infinitely in space using traditional JavaScript and CSS results in layout thrashing, main thread locking, and visible stuttering on mobile viewports due to continuous DOM style computations.
Architected a zero-JavaScript 3D rotating slider. Leveraged custom CSS variables (--width, --height, --position, --quantity) to dynamically compute rotational positions (transform: rotateY(calc(360deg / var(--quantity) * var(--position))) translateZ(...)) in compile-time stylesheets. Delegated the entire rotation loop to the GPU via hardware-accelerated CSS animations (@keyframes operating purely on transform: rotateY).
Low-level component relationships, system boundaries, and runtime flows.
The vanilla-projects monorepo is architected around a strict decoupled, client-side, zero-dependency philosophy. The root directory acts as a static gateway and index page. Each application exists as an isolated Git submodule, completely self-contained with its own structural index.html, custom modular styles.css, and client-side script.js file. Submodules communicate with the host browser's native window context for storage (localStorage API), animation frame rendering (CSS transition engines), and real-time state calculation (Date API). The styling layer utilizes root-scoped CSS Custom Variables to enable rapid system variables hot-swapping and responsive calculations directly within the stylesheet compilation step, eliminating the need for client-side layout math.
Bypassing modern, heavy JavaScript frameworks for lightweight utility applications reveals the true efficiency of native browser engines. Using CSS variables to handle spatial mathematics and delegating complex 3D transformations to the GPU dramatically reduces battery drain, eliminates frame drops, and minimizes script bundle size to practically zero. Additionally, utilizing Git Submodules allows developers to create a highly organized, decoupled project ecosystem where each individual component remains fully functional, testable, and deployable on its own, avoiding the standard 'dependency hell' of unified monorepos.
Keyboard Event-Binding Hook System: Created clean, non-intrusive global and local keyboard event listeners (keydown) inside the guessing game to bind interactive controls directly to application states (e.g., standardizing 'r' for immediate board resets and 'Enter' for guess checks), featuring robust validation for NaN and out-of-bounds input ranges.
Performance-Driven Rendering & Hardware Acceleration: Bypassed expensive layout reflows in animations by leveraging CSS GPU-accelerated transition properties (transform: translate3d() and opacity), keeping paint times sub-1ms even under heavy animations.
Achieved a perfect, lock-tight 60 FPS rotational animation on both high-end desktop screens and low-tier mobile devices with zero CPU scripting overhead.
Real-time clock hands updated strictly on integers (e.g., rotating the minute hand only when currentDate.getMinutes() changes) caused jarring, unnatural jumps that broken the visual illusion of a premium physical clock sweep.
Refactored the calculation pipeline to use dynamic fractional ratios. Mapped the seconds ratio (currentDate.getSeconds() / 60) into the minute hand's rotational ratio ((secondsRatio + currentDate.getMinutes()) / 60), and recursively injected the minute ratio into the hour hand ((minutesRatio + currentDate.getHours()) / 12).
Achieved a seamless, continuous analog sweep where hands drift imperceptibly and precisely, mimicking high-end physical clock mechanisms.
In the Guess the Number game, the 'Reset Game' button was designed to feature a playful 'Rickroll' Easter egg that opens a new tab, but typical anchor link navigation broke the JavaScript execution context, preventing the game board from resetting locally on the page simultaneously.
Configured an asynchronous event-handling sequence. Bound a click listener directly to the reset anchor element that intercepts the default action. Executed the resetGame() logic synchronously to restore board variables, clear input buffers, and reset the attempts counter, while allowing the browser's native window manager to safely open the YouTube link in a background tab.
Delivered a delightful, fully functional, and dual-purpose Easter egg that maintains flawless local game state integrity while delivering the visual joke.
