rrawr.walk2024

Devlog – MoodStone: The Animated Pet Rock

Day 1 – Idea & Concept

Idea was to make something boring look interesting. A plain rock, but with moods and expressions. The plan was to make it look alive, but only using simple web programming.

Day 2 – UI & Design

Designed the rock using CSS:

• Used gradients to make it look like a soft, rounded rock

• Used CSS to place the eyes and mouth, giving it a cute look

• Kept it simple and centered

Day 3 – Expression System

Made different expressions for the rock:

• Happy, sad, meh, excited, and angry

• Used CSS borders and shapes instead of images

• Made a function to change expressions dynamically

Day 4 – Mood Logic

Made a mood system from 0-100:

• With every click, the mood changes randomly

• The mood value corresponds to a certain expression
  Day 5 – Animations

Made the rock feel alive:

Added blinking with the use of intervals

Added the wiggle animation when the rock is interacted with

Added smooth transitions for the expressions

Day 6 – Interaction Polish

Enhanced the user experience:

Added click feedback with scaling and rotating

Added text reactions according to the mood

What I Learned

How to manipulate the DOM and add event handling

How to be creative with CSS and make animations and shapes

How to make an interactive interface with the least tools

How to make the personality come alive with simple logic

Future Plans

Adding sound and voice reactions

Adding memory-based reactions

Adding more expressions and reactions

Final Thoughts

MoodStone was initially just a simple idea. However, it turned out to be an interactive project that was quite fun. It showed that even the most simple ideas can come alive with the right amount of animation and creativity

🚀 ORION-X Devlog
Interplanetary Mission Simulation

ORION-X began as a vision to build a cinematic, browser-based Earth-to-Mars mission simulator using pure frontend technologies. The goal was to create a realistic space agency experience without any backend — only HTML, CSS, JavaScript, and Three.js.

The first phase focused on setting up the 3D environment. A Three.js scene, perspective camera, and WebGL renderer were configured to create a deep-space canvas. A procedural starfield with 8000 points was generated using BufferGeometry for smooth performance.

Next, Earth and Mars were created using sphere geometries and positioned across space to simulate planetary distance. Subtle rotation animations were added to give life to the scene.

The core feature was the interplanetary transfer trajectory. A Quadratic Bezier Curve was used to simulate a curved orbital path instead of a straight line, making the journey more realistic and cinematic. The rocket travels along this path using a progress-based animation system.

Mission logic was then implemented. As the spacecraft advances, the HUD updates dynamically through mission phases:
• Leaving Earth Orbit
• Deep Space Cruise
• Mars Approach
• Mars Orbit Insertion

A live distance counter increases with progress, enhancing the simulation feel.

Finally, a cinematic success overlay was added. When the rocket reaches Mars, a full-screen mission completion sequence appears, signaling successful orbit insertion.

ORION-X demonstrates how advanced 3D simulations can be built entirely in the browser using WebGL — transforming simple web technologies into an immersive space mission experience. 🚀🌌

🛠️ Devlog – Smart Waste Segregation Bin
📌 Overview

In this project, I built a Smart Waste Segregation Bin using Arduino that can automatically classify waste into metal, wet, and dry categories. The goal was to reduce manual waste sorting and demonstrate how sensors and actuators can work together in a real-world problem.

🔧 Components Used

Arduino Uno

IR Sensor (object detection)

Metal Detector + Sound Sensor

Capacitive Soil Moisture Sensor

3 Servo Motors (for bins)

I2C LCD Display

External 5V power supply

⚙️ How It Works

The IR sensor detects when an item is placed on the tray. The LCD first displays “Checking…”.

If the sound sensor detects sound from the metal detector, the waste is classified as metal and the metal bin opens.

If no metal is detected, the moisture sensor checks for wet waste. If moisture is high, the wet bin opens.

If both checks fail, the waste is treated as dry and the dry bin opens.

Each bin opens using a servo motor, waits for a short time, then closes automatically. The system waits until the item is removed before resetting. After completion, the LCD shows “Smart Waste Bin – Place Item”.

🧠 Challenges Faced

Servos initially vibrated due to timing and angle issues

Sensor thresholds needed calibration

Preventing repeated triggering while the item was still present

These issues were fixed by improving delays, using proper servo angles, and adding logic to wait until the object was removed.

🌱 What I Learned

Sensor integration and threshold calibration

Servo motor control and timing

Real-world debugging of hardware + software

Designing logic flow for automation systems

🚀 Future Improvements

Adding IoT monitoring

Weight-based detection

Mobile app integration

Recycling data analytics

📅 Project Duration

January 2026

🎯 Objective

The objective of this project was to design and develop a modern print-on-demand e-commerce website that allows users to browse custom products and simulate an online shopping experience. The focus was on clean UI design, usability, and frontend functionality.

🛠️ Technologies Used

The project was built using HTML5 for structure, CSS3 for styling and dark-mode design, and JavaScript for interactivity. Responsive layout techniques were used to ensure compatibility across different screen sizes.

📌 Development Process

The project started with planning the layout and defining key sections such as Home, Shop, Cart, and Contact. A dark theme with green accent colors was selected to give the site a modern e-commerce feel. Product cards were created to display items clearly and attractively.

JavaScript was used to implement working buttons, including “Add to Cart,” cart modal handling, item counting, and checkout simulation. Smooth scrolling was added for navigation links to improve user experience.

🚀 Key Features

Responsive dark-mode design

Interactive product listing

Working cart system with modal

Checkout simulation

Smooth navigation

🔮 Future Enhancements

Future improvements include real payment gateway integration, backend support for order storage, product customization uploads, and user authentication.

✅ Outcome

The project successfully demonstrates frontend development skills by combining structure, style, and interactivity to create a functional print-on-demand shopping website suitable for academic and portfolio use.

🧑‍💻 DevLog – Tasty Bites Restaurant Website
📅 Project Duration

January 2026

🎯 Objective

The objective of this project was to design and develop a modern, responsive restaurant website with a dark-mode interface and an interactive table booking feature. The website aims to provide a professional online presence while ensuring ease of use and visual appeal.

🛠️ Technologies Used

HTML5 was used for structuring the content, CSS3 for styling and implementing the dark theme, and JavaScript for interactivity and form handling. Responsive design techniques were applied to ensure compatibility across devices.

📌 Development Process

The project began with planning the website layout and identifying core sections such as Home, Menu, About, and Contact. A dark color palette was selected to create a premium restaurant feel. Semantic HTML was used to build the structure, while CSS Grid and Flexbox were used for layout and responsiveness.

An interactive “Book a Table” button was implemented using JavaScript. Clicking the button opens a modal booking form where users can enter their details. Basic validation ensures all required fields are filled before submission, followed by a confirmation message.

🚀 Key Features

Fully responsive design

Dark mode user interface

Interactive table booking form

Clean and modern layout

Easy to customize

🔮 Future Enhancements

Future improvements include backend integration for storing bookings, email confirmation for reservations, an admin dashboard, and a light/dark mode toggle.

✅ Outcome

The project successfully demonstrates practical use of HTML, CSS, and JavaScript to build a functional and visually appealing restaurant website suitable for academic and portfolio use.

🛠️ Devlog – Robotics Learning Hub

I created Robotics Learning Hub as a simple educational website focused on introducing basic robotics concepts. The goal of this project was to combine my interest in robotics with beginner-level web development and create a clean, easy-to-use platform.

The project was planned as a static website using only HTML and CSS. I wanted to keep the structure simple while making sure the content was well organized and visually clear. I started by designing the layout and adding a robotics-themed banner to set the tone of the site.

During development, I worked on structuring the content into sections such as robotics basics, learning platforms, and general resources. I focused on readability and spacing to avoid clutter. CSS was used to apply a modern, technology-inspired color scheme and improve the overall presentation.

One of the main challenges was deciding how much information to include without overwhelming the user. I solved this by keeping descriptions short and focused. This helped maintain a clean design while still delivering useful content.

Through this project, I learned the basics of HTML structure, CSS styling, and how small design choices affect user experience. The current version is complete as a beginner-friendly educational website.

🛠️ Development Log – Gaming Resources Hub
📅 Project Duration

January 2026

🔹 Day 1 – Project Planning & Design

Defined project idea: Gaming Resources Hub

Decided project scope:

PC gaming guides

Mobile gaming resources

Gaming tools

Created initial wireframe layout

Selected color theme (dark gaming UI)

Chose technologies: HTML, CSS, JavaScript

🔹 Day 2 – HTML Structure Development

Created base HTML structure

Added semantic sections:

Header

Navigation

Main content sections

Footer

Organized content into cards

Ensured clean and readable markup

🔹 Day 3 – CSS Styling & UI Enhancement

Implemented dark theme using CSS variables

Designed responsive layout for mobile and desktop

Styled navigation bar and cards

Added hover effects and transitions

Improved spacing, typography, and readability

🔹 Day 4 – JavaScript Interactivity

Implemented dark/light theme toggle

Added live search filter for PC games

Created dynamic message display for updates

Used DOM manipulation for real-time changes

Ensured JavaScript functions work without page reload

🔹 Day 5 – Testing & Optimization

Tested site on multiple screen sizes

Verified navigation and interactivity

Fixed layout and logic issues

Improved performance and code readability

Finalized project for submission

📈 Challenges Faced

Managing dynamic theme switching using CSS variables

Implementing live search functionality without external libraries

Ensuring responsive design across devices

✅ Final Outcome

Fully functional interactive website

Clean UI with modern gaming aesthetics

JavaScript-powered features

Beginner-friendly and scalable project structure

🔮 Future Improvements

User authentication system

Database integration for dynamic content

Favorite games feature

Backend support using Node.js or PHP

Framework-based version (React)

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.