@ritvikgrandhi

Devlog 5: 9/8/26

Nothing much, I managed to get the node.js server running and got the css and html to work, but its nowhere near done. Anyway, for now, I’m going to ship this project so that reviewers can actually see and try to use the add project and add devlog functions. Stay tuned!

Devlog: 9/6/2026

I made SO much progress!!

Changes:

• Can now create devlogs within projects
• Can edit those devlogs
• Can add multiple images and videos within the devlogs
• When you click on the images, they open in a new window above the page
• New Navbar and logo design, courtesy of this video: https://www.youtube.com/watch?v=uTPO6fKtBvM
• Can delete devlogs
• Devlogs gain certain ids based on the date and time, so each devlog has a unique id to allow for edits and deletions

For the JavaScript, the basic functionality was carried over from the notes app on my NINJAGO WEBOS, but I did need AI to educate me on how to implement new functions. Also, the CSS and HTML were written mostly by me with the help of tutorials.

Woohoo, some functionality!

Ok, so far I haven’t differentiated a backend and frontend for the projects tab, but for now you can add projects with an image, title, and summary, and they’ll appear as projects on the projects tab. Also, when you click on them, it brings you to a separate viewing tab to see all about the project, although I haven’t started working on the part where you can add devlogs. Also, adding projects isn’t permanent, as when I reload the tab, they all disappear (since I want it to save to the website for everyone to see, I have to implement a Node.js backend, which I haven’t learned about yet). I also slightly changed the theme into dark mode and made the buttons to enter the project look futuristic. They are NOT AI; I made them with the help of this video: (https://www.youtube.com/watch?v=a1NVen8SaqE), but it does look a bit different for reasons unknown. Anyway, stay tuned!

NEW DESIGN:

For those that don’t want to read: I’m tearing down most of the site to make it a dedicated project site.

After realizing that I already have most of my accomplishments and extracurriculars on a different project that I’m making in school, I understood that maintaining a second site would be kind of useless.

So, in an attempt to salvage my efforts and make it something worth using, I’m going to take my Javascript knowledge from the NINJAGO OS project I’m also currently making to create a project and devlog site, similar to stardance, as I want to have a place to store all of my hobby projects. However, I don’t want anyone adding information to my site but me, so i’m biting the bullet and learning to differentiate a frontend and backend (with minor AI help), while salvaging the about page of the already existing porfolio. This way, when people online stumble upon it (as i’ll use the grant I got for purchasing a website domain), they’ll know about me first before moving on to my projects.

That’s pretty much it! Looking forward to it!

CAD EDIT:

• Created spacers between the body and the pcb within the case

I was editing the css to see what parts I used AI for and what was my work, I ended up breaking something that I hopefully fixed, so it took a bit of time. Page looks the same though.

Changed the apps to custom ones I made on canva without using AI.

Another App Done!

After finishing Ninjanotes, I went on to make two apps (one of which is Spotify, but it just opens in a new browser for now). The thing that I spent most of this time on was the Calculator App. Since I still have almost no idea how to use JavaScript, I got AI help again, but I didn’t just copy its code. It taught me what to do myself and helped me debug problems, one of which was the new full-screen feature that’s included in all windows. I also made it generate icons, but I will eventually replace them with my own art, because they look horrendous. Anyway, that’s it for now, and I’m going to get the GitHub Page ready for my first ship because, as of now, I have done the requirements. However, I will still keep working on this, so stay tuned!

Ninjanotes is done! First major change: the styling, which looks AWESOME. Next, I added a delete, edit, and add note button, making it a full fledged note taking app. Also, the icons for each note look like scrolls! I’m onto the next app now, so what should I make? I need your help.

Added some functionality to the NinjaNotes app. It took some time because I didn’t really understand the JavaScript in the guide, but I got it to work with AI guidance. I also forgot to mention that I added a close button for the topbar to prevent it from getting in the way at times.

Added NinjaNotes as an app (although no design or functionality has been done yet)

Through following the guide, I made the window draggable, with an open and close button, and a header for the window. Some minor details include centering the stuff on the welcome screen and putting all of the styles in a css file.

Made the Landing window, the background, and the top bar. Again, like my last project, it’s based on Ninjago(I can’t really think of anything else), but it’s fine because I plan to make peripherals for my desk all based on different Ninjago characters. So far, I’ve done a Kai-themed Hackpad, and now I’m making a webOS for the eventual bigger project of a Lloyd-themed Cyberdeck!(ik cool right?) Anyway, because I still have to get a bit used to HTML, this might take a bit of time, but working on my personal site helped me improve my html/css skills, so it’ll be alright. Anyway, stay tuned!

QMK FIRMWARE:
So for today, I finished the CAD Design, including minor fixes. However, the core part that I completed was configuring my macropad to QMK. Also, I finally decided on a name, the NINJAPAD! Anyway, that’s it for now, so stay tuned! Just have to fix my github repo and make production files.

CAD DESIGN:
Well, I finally decided on a theme of my hackpad, like I said before, and its Ninjago! It’s been a huge part of my childhood since I was little, so it was the perfect theme for my personal hackpad. The color scheme and easter eggs are largely based on Kai(a character from the show), and incorporated the rest of my pcb around it. The case itself has 2 layers: the bottom one holds the pcb in place, while the top is the cover as seen here. Although, it still isn’t quite finished yet, because I will eventually change the default knob I put. Plus, I accidentally forgot to record some of the time it took, so I’m only logging 2 hours. Anyway, stay tuned!

TIME FOR THE REAL HACKPAD:

Sorry I haven’t posted a devlog in a while, but I have fully completed the default keyboard, and am now working to make this thing my own. Currently, i have finished the schematic and PCB of my design, but it has a generic 3x3 matrix of switches, while having a rotary encoder and OLED display on the side(the ones included in the kit). Although I won’t reveal it yet, because you’ll see it in the design, I have finally thought of a theme for the design and I am very excited to start getting to work on it! Stay tuned for the CAD.

EDIT: Forgot to record the time for this, but i rearranged the parts for a little more wiggle room and I also put in mounting holes.

Hey guys, this is my second project/mission, which is my Hackpad. I’m currently following the guide on how to make the default hackpad, and I’ve just finished the Schematics and PCB of it. Stay Tuned!