🎉🎉 MAK.OS, is finally COMPLETED and LIVE! ✨✨

MAK.OS, a web based OS, is all done and ready to use!
Seriously this time all the things added were way more easy and fun. Unlike in many previously added features where I would stuck on issues etc. All the features below were able to be added in just 2hrs!
Fun Fact about the project, the windows in the MAK.OS are literally just Bootstrap’s cards! ’Cause they had almost every thing, a card header, card body, card image alignment etc.

Features Added: ✅

• Log in Screen added with username input option.
• Start Menu buttons of Logout and Sleep now work
• Username displayed in Start Menu.
• Web Browser added in the form of my very own MAK_Tab project!
• Added an About app for info
• Added Desktop Icons
• Taskbar icons only appear when a window is open.
• Taskbar Icons changed to only emoji logo instead of text+emoji style.

That’s It! The Project is finally completed!
Try it now at: https://mako-s.netlify.app
Now I am just going to Ship this Project! Yippee!

🎉🎉 MAK_Tab, is finally COMPLETED and LIVE! ✨✨

MAK_Tab, your new browser new tab is All Done and ready for Use!

Features Added: ✅

• Weather System changed from GPS to Postal Code System.
• 5 Shortcut Buttons to your favourite websites which save the url using localStorage.setItem(‘’) in JS!
• Small Created by Badge added cleanly.
• From 4 Welcome phrases, one is chosen randomly from each time you reload or open the page to give a living touch!

That’s It! The Project is finally completed!
To set it as your default new tab:
If you are on chrome or chromium-based browser, download “New Tab Redirect” Extension from chrome web store and set the URL of this site to show as your Default New Tab!

🎉🎉 MAK_Tab, is finally COMPLETED and LIVE! ✨✨

MAK_Tab, your new browser new tab is All Done and ready for Use!

Features Added: ✅

• Weather System changed from GPS to Postal Code System.
• 5 Shortcut Buttons to your favourite websites which save the url using localStorage.setItem(‘’) in JS!
• Small Created by Badge added cleanly.
• From 4 Welcome phrases, one is chosen randomly from each time you reload or open the page to give a living touch!

That’s It! The Project is finally completed!
To set it as your default new tab:
If you are on chrome or chromium-based browser, download “New Tab Redirect” Extension from chrome web store and set the URL of this site to show as your Default New Tab!

MAK-Tab is almost complete! ✨

(Hopefully last devlog before ship!)

MAK Tab, your new browser new-tab, is on its way to last Devlog! I added much more working features to make it work seamlessly as your new-tab replacement. I kept running into errors in JS for functions but most of them were typos. I also accidentally corrupted my git repo by doing commit without adding “-m” but now it is fixed.

Key Features Added✅:

• Working Local Time Clock
• Working local weather temperature (requires location permission)
• Calculator in the Tools Box (triggered with the Tools Button)
• NASA image description hidden until the button is clicked.

Next Goals🎯:

• Make the Shortcut link editor work and add more shortcut buttons
• Think to add some more things in toolbox (ideas in comments are welcome)
• Implement use of Cookies to save the URL links and also to remember that location permission is already given (now everytime browser restarts, it asks for location again)

Please give me some recommendations and also some ideas for things in toolbox in the comments!

MAK-Tab is almost complete! ✨

(Hopefully last devlog before ship!)

MAK Tab, your new browser new-tab, is on its way to last Devlog! I added much more working features to make it work seamlessly as your new-tab replacement. I kept running into errors in JS for functions but most of them were typos. I also accidentally corrupted my git repo by doing commit without adding “-m” but now it is fixed.

Key Features Added✅:

• Working Local Time Clock
• Working local weather temperature (requires location permission)
• Calculator in the Tools Box (triggered with the Tools Button)
• NASA image description hidden until the button is clicked.

Next Goals🎯:

• Make the Shortcut link editor work and add more shortcut buttons
• Think to add some more things in toolbox (ideas in comments are welcome)
• Implement use of Cookies to save the URL links and also to remember that location permission is already given (now everytime browser restarts, it asks for location again)

Please give me some recommendations and also some ideas for things in toolbox in the comments!

Added Working NASA Image API:

MAK_Tab(your new browser new tab) is on the progress
I Finally made all the basic core functions working✨. Now by just adding things to that core structure, i can make this browser New Tab complete in no time!

Key Features added ✅:

• NASA Image API Handler using JS
• Exceptions handling for videos
• Styling to set it as background Image
• JS Structure is ready to add any new stuff along the way.
• I used GoogleSans font to keep text cleaner.
• Bootstrap is used for UI elements, though only a single blank div is developed yet. More things will come soon!

Next Steps 🎯:

• Search Box
• Place the NASA API text in a nice box
• Add some tools to the Page.
• Empower the website using AOS Animations.

Added Working NASA Image API:

MAK_Tab(your new browser new tab) is on the progress
I Finally made all the basic core functions working✨. Now by just adding things to that core structure, i can make this browser New Tab complete in no time!

Key Features added ✅:

• NASA Image API Handler using JS
• Exceptions handling for videos
• Styling to set it as background Image
• JS Structure is ready to add any new stuff along the way.
• I used GoogleSans font to keep text cleaner.
• Bootstrap is used for UI elements, though only a single blank div is developed yet. More things will come soon!

Next Steps 🎯:

• Search Box
• Place the NASA API text in a nice box
• Add some tools to the Page.
• Empower the website using AOS Animations.

Update 0.3 of MAK_OS!!!

This Time I added A Lot of new cool and nice things for the update 0.3! Try at https://mako-s.netlify.app

New Things Added✨ :

• TaskBar Clock Added! 🕙
• The “One feature not listed in guide” added in the form of WebViewer 🌐 container apps that display any webpage as an app within the WebOS. Url are added from Settings.
• Added Some Nice wallpapers you can switch through in Settings. 🧱

Next Goals 🎯:

• Make The Start Menu Useful Enough.
• Make a Welcome Screen with User Name option.

Update 0.3 of MAK_OS!!!

This Time I added A Lot of new cool and nice things for the update 0.3! Try at https://mako-s.netlify.app

New Things Added✨ :

• TaskBar Clock Added! 🕙
• The “One feature not listed in guide” added in the form of WebViewer 🌐 container apps that display any webpage as an app within the WebOS. Url are added from Settings.
• Added Some Nice wallpapers you can switch through in Settings. 🧱

Next Goals 🎯:

• Make The Start Menu Useful Enough.
• Make a Welcome Screen with User Name option.

MAK OS Development Log: Desktop Environments & Taskbar Design Completed!

I finally managed to be successful in implementing the Window Grabbing System via JS without weird errors. It was extremely difficult to solve the issue of the settings window shooting down as soon as grabbed etc.

✅ Key Updates:

• Added Window Grabbing System (took 80% of time!)
• Added subtle taskbar lines like windows11 to show active windows status

🎉🎉Window Grabbing Fix:✨

Initially, the window-dragging function relied on JS Mouseup, Mousedrag and Mousedown events. However, this caused the settings window card to jump wildly. After spending more than one and a half hour figuring out the problem i finally found the solution which was using CSS’ translate being edited while grabbing the windows with mouse events in JS. The following is the JS code for window grabbing.

function makeWindowDraggable(windowEl) {
    const header = windowEl.querySelector('.window-header');
    if (!header) return;
    let currentX = windowEl.id === 'settings' ? 420 : 100;
    let currentY = 100;
    let startX = 0;
    let startY = 0;
    windowEl.style.transform = `translate(${currentX}px, ${currentY}px)`;
    header.onmousedown = dragMouseDown;

    function dragMouseDown(e) {
        e = e || window.event;
        if (e.target.closest('.close')) return;
        e.preventDefault();
        highestZIndex++;
        windowEl.style.zIndex = highestZIndex;
        startX = e.clientX;
        startY = e.clientY;
        document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        let deltaX = e.clientX - startX;
        let deltaY = e.clientY - startY;
        startX = e.clientX;
        startY = e.clientY;
        currentX += deltaX;
        currentY += deltaY;
        windowEl.style.transform = `translate(${currentX}px, ${currentY}px)`;
    }

    function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

TaskBar Indicators:

I had less time left after all time dumped into mostly fixing a weirdly acting window grabbing system which had no sense that why is that even happening😖. So another thing I added is a line in Taskbar Buttons to show window status. It is inspired from Windows11, when in focus it is wide and blue, when out of focus it is small and grey, and when closed, the line goes out too. Subtle but nice and smooth effect. The CSS was simple not-worth of code but JS played the real affect:

🎯Next Goals:

• Add more and more apps
• Add Taskbar clock
  -Add welcome screen
  -Make the Start Menu actually worth-it to open it.

Feel Free to Reply the project or check it out now here:

https://mako-s.netlify.app

Destroyed all HTML and CSS and recreated from Scratch!
I realized my UI was tooo Cartoonished so i abondoned all my code, except Script.js file since it had all functions. then i remade the whole thing with Bootstrap with minimal CSS code so i can spend less time on styling and more on making the Apps and functions as well as i will get a more professional UI.
I also changed the name from CatOS to MAK_OS.
Link: https://mako-s.netlify.app
Try and review!

Project completed!
The timeline section of my portfolio is now finally completed.
I Completed all remaining CSS styling and optimized for mobile screens. I also animated the cards and added a nice background image too. I also used JS to trigger the animated line of .timeline::after only when in viewport.
The overall features of the timeline are:

-> Showcase my web development advancements over the years in animated cards.

-> The cards appear side by side with an animated line in middle for desktop screens.

-> The cards are on right side with the animated line on left for mobile screens.

-> Have icons and pictures of projects in timeline.

-> A nice background image to complete the feel.

-> Optimized to be responsive enough to fit on a smartwatch’s (SWR50) screen similar to rest of the website.

Try it now at my website and tell what you think: https://ak-dev.is-a.dev
Plus, you can also review me about the rest of the website as well.

Project completed!
The timeline section of my portfolio is now finally completed.
I Completed all remaining CSS styling and optimized for mobile screens. I also animated the cards and added a nice background image too. I also used JS to trigger the animated line of .timeline::after only when in viewport.
The overall features of the timeline are:

-> Showcase my web development advancements over the years in animated cards.

-> The cards appear side by side with an animated line in middle for desktop screens.

-> The cards are on right side with the animated line on left for mobile screens.

-> Have icons and pictures of projects in timeline.

-> A nice background image to complete the feel.

-> Optimized to be responsive enough to fit on a smartwatch’s (SWR50) screen similar to rest of the website.

Try it now at my website and tell what you think: https://ak-dev.is-a.dev
Plus, you can also review me about the rest of the website as well.

Built a real desktop-style window system in the Web based OS.

I added a fully interactive window dragging system, making the web OS feel like a real operating system.
Try now at “https://catos.netlify.app”

v1.3 Updates:
-> Implemented mouse down / move / up event system
-> Added z-index management for active windows
-> Smooth dragging using JS click mouse events
-> Fixed broken mobile UI.

Next Steps:
-> Add minimize window option
-> Add Apps icon to appear at the tasbar

Completed styling for Timeline cards with css adn added an animated vertical line in middle. The whole thing is still under-progress for further refinement and UI tweaks.

I am making a timeline view for my portfolio website. i have just started making the structure. i will make an AOS animation powered tiles to appear side by side to make a timeline showing my progress in web development.