ACE

I focused on making the project feel more like a real Windows 98 boot experience, and on upgrading the UI so the Start menu matches the classic Win98 style.

Windows 98 Startup Scene + Sound
I added a proper “power on” flow instead of loading straight into the desktop. The project now begins with a Click to Start Windows 98 screen. This wasn’t just for looks—it’s also required because modern browsers block autoplay audio. Once the user clicks, the boot screen appears, the loading bar starts, and the startup sound plays at the right moment, just like the original Windows 98 vibe. After the boot finishes, it smoothly transitions into the desktop.

Start Menu (Win98 Style)
After the boot sequence was working, I replaced the basic Start menu with a more authentic Windows 98 layout. The menu now uses a left-side “Windows 98” vertical sidebar, proper spacing, hover highlight behavior, and the classic arrow indicators for menu items that would normally open submenus. This made the interface instantly feel more accurate and recognizable.

Notes / Fixes Along the Way
While adding these features, I also cleaned up some initialization issues (like duplicate event handlers) to ensure the desktop loads once, the Start button responds correctly, and the UI stays stable after the boot animation.

Next, I’ll keep improving the apps so the windows don’t just look correct, but also behave like the real Win98 programs.

Today I focused on getting the core “Windows 98 desktop” experience working smoothly inside the browser. The goal was to make the project instantly recognizable the moment it loads, with the classic wallpaper, icon layout, and the iconic taskbar at the bottom.

Desktop & Icon Layout
I finished setting up the desktop background (clouds wallpaper) and arranged the main desktop icons in a clean left-side column, similar to the original Windows 98 layout. Each icon has its own image and label styling, and I adjusted the label size so the app names look smaller and closer to the authentic Win98 desktop text.

You can see the main shortcuts showing correctly now:

My Computer
Paint
Calculator
Notepad
Shortcut Arrow Overlay
A big part of making it feel real was adding the shortcut arrow overlay. I implemented it so only certain apps display the shortcut arrow (instead of every icon), matching the behavior of Windows. This also required careful CSS positioning to ensure the arrow stays at the lower-left of the icon.

At this stage, the project successfully reproduces the visual layout of a Windows 98 desktop in the browser, including the icon set and taskbar. The next focus will be improving app functionality (like giving Paint, Explorer, and others real content), plus polishing interactions like window focus behavior and smoother UI transitions.

The simulation works by placing several nuclei (U-235) randomly on the canvas and starting with one moving neutron. When a neutron collides with a nucleus, it triggers fission — the nucleus splits into fragments and releases more neutrons. These newly created neutrons continue moving and can hit other nuclei, creating a chain reaction. This process is updated frame-by-frame using animation, making the reaction feel alive and continuous.
I added collision detection to check when neutrons hit nuclei, and after fission, I generate fragments and 2–3 new neutrons with random directions. There’s also a small visual highlight effect when a nucleus splits, which makes the reaction easier to follow.
Some special features include particle trails, bouncing neutrons, and a legend that explains each element (nucleus, neutron, fragments). The simulation also automatically stops when no active neutrons or nuclei are left, keeping it clean and controlled.

Black Hole Simulator
The idea was to create a simple space environment where particles can orbit, spiral inward, and eventually disappear into the black hole.
The core logic is based on gravitational force, where each object is continuously pulled toward the center using an inverse-square relation. Every frame, I update velocity and position, which creates smooth motion and realistic curved paths. Objects closer to the center experience stronger force, so they accelerate faster and fall in.
One interesting part was handling the “event horizon.” I set a boundary near the center where objects get removed, giving the effect that they are being absorbed. I also added trails to each object so their paths look more dynamic and help visualize orbits.

For interactivity, I included sliders to control black hole strength, number of objects, and speed. This lets users experiment with different scenarios—like stable orbits vs chaotic collapse. Another nice feature is the ability to click on the canvas to add new objects with automatic orbital motion.
IN Visually, I worked on making it feel more like space by adding glow effects, an accretion disk, and fading trails. These small details make the simulation more engaging without making the code too complex.

Magnetic Force Simulator
it visualize how magnetic forces work in real time. It allows users to explore both pole interactions and the behavior of moving charges within a magnetic field. By combining simple physics concepts with dynamic visuals, the project creates an engaging way to understand attraction, repulsion, and field effects.
This includes two main modes: pole interaction and moving charge. In pole mode, users can drag magnets, change their polarity, and observe how forces change based on distance and strength. In charge mode, users can spawn particles that move and curve under the influence of a magnetic field, demonstrating the effect of force on moving charges. These features make the simulation both interactive and educational.
The working mechanism is based on simplified physics principles. Magnetic force is calculated using an inverse-square relationship, while particle motion follows a basic form of the Lorentz force. The animation is handled using (requestAnimationFrame), ensuring smooth and continuous updates, while user inputs from sliders and mouse interactions instantly affect the simulation.

Sound Wave Visualizer
It demonstrate how sound behaves through frequency, amplitude, and wave speed. The app visually represents sound waves on a canvas using sine functions, where users can interactively change sliders to see real-time changes in the wave shape. It also includes smooth animation using requestAnimationFrame and a neon-style visual design to make the experience more engaging.

In addition to the visual part, I integrated basic audio functionality using the Web Audio API, allowing users to generate a tone that matches the selected frequency and amplitude. I also added preset modes like bass and treble to quickly show different sound behaviors. Overall, the project connects both sound and visuals in a simple interactive way.

Gravity Playground
Explore how objects fall under different planetary conditions. The idea was to let users select a planet, set mass and height, and then simulate a falling object in real time.
I used a canvas to animate the motion, updating position and velocity frame by frame to create a smooth falling effect. I also added calculations for falling time and final velocity using basic kinematics.
One thing I focused on was keeping the simulation simple but interactive, especially by showing how gravity changes across planets. Overall, this project helped me better understand how Gravitational Acceleration affects motion in different environments.

another, I built an interactive Ohm’s Law Simulator to show how voltage and resistance affect current in a circuit. Users can adjust values with sliders and see real-time updates based on Ohm’s Law.
I have added a glowing bulb that changes brightness with current and a small animation to represent current flow. I also handled cases like short circuits to make the simulation more realistic.
Overall, the project turns basic electrical formulas into a simple and visual learning experience.

Today I developed the Projectile Motion Simulator, an interactive physics tool that visualizes how objects move under gravity when launched at an angle.
The simulator allows users to adjust launch angle, initial velocity, and gravity for different planets. It then calculates and displays real-time results like maximum height, time of flight, and range using standard projectile motion equations.
It demonstrates core concepts of Projectile Motion in a simple and interactive way, making physics learning more visual and intuitive.

Today I built the main dashboard for Physics Simulation Hub, a web-based collection of interactive physics simulations. The goal was to keep everything in one place so users can easily access different physics experiments like projectile motion, gravity, and electricity.

This dashboard acts as the central hub for all simulations, including Projectile Motion, Ohm’s Law, Wave Motion, and Gravity, making physics learning more interactive and accessible through visual simulation.

In this phase of development, I built a “Total Students” dashboard page for my Student Management System. The goal of this module is to provide a clear, structured overview of student distribution across different academic levels, along with real-time statistics and export functionality.
Objective

The main objective was to design a clean, responsive UI that displays:

Total number of students
Breakdown by education levels (Pre-Primary to Higher Secondary)
Class-wise distribution of boys and girls
Easy data export for reporting purposes

I created a set of top summary cards showing:
Pre-Primary, Primary, Lower Secondary, Secondary, Higher Secondary
Grand Total students

These values are dynamically calculated using data stored in localStorage.
Whenever new students are added, the stats automatically update.

Data Handling via Local Storage

Instead of using a backend, I used:

localStorage.getItem(‘students’) to fetch student data
JSON parsing to manage records

Each student is mapped to a class using a CLASS_MAPPING object, which organizes them into levels like:

Nursery → Pre-Primary
Class 1–5 → Primary
Class 6–8 → Lower Secondary
etc.

This allows automatic grouping and counting.

Gender Detection Logic

A simple function was implemented to determine gender:

Based on the last letter of the student’s name
const girlNames = [‘a’, ‘i’, ‘y’, ‘e’];

While not perfect, this approach helps quickly estimate gender distribution without extra input fields.

Tab-Based Navigation System

I implemented a tab system to switch between levels:

Pre-Primary
Primary
Lower Secondary
Secondary
Higher Secondary

Each tab dynamically shows:

Grade cards
Detailed student table

This improves usability and keeps the UI clean.