My Journal

Another update on the redesign

23/Jun/2025

I have really good news on that front; I finished the main page, the welcome section of the page, the blog and the links page!!
You might have also noticed the new look of the blog! Now called journal (since I think will be more fitting).

This is how the Index page looks like! Yeah I got rid of the landing page, BUT! you'll see a cool loading animation instead!

Windows

From the things I showed last time; The chat is now stylized to my liking! with all the pinks and purples and whatnot. I just put some placeholder emojis (really cute sanrio graphics courtesy of Pinku Kingdom!), but I do want to add my own.
Not a lot on the music player and the paint window, I just need to draw the graphics that go there.

The new stuff I added are an updates log window, a Blinkies and Stamps display, a to-do list, video recommendations, and a webring window (still yet to apply for any webrings, but once the new site is up, hopefully I'll be in one!)

PixelStar Icons

Speaking of icons!! I actually drew some icons for my page!! So far I've done 42 icons that you can see here and are free to use!
I really want to keep adding more icons so it can be more like a proper icon library, but for the time being, I'm just going to add little by little, I still have a site to build after all.

Responsive

Now, when it comes to HTML Semantics, my page is ducked, but I did try to build a more responsive page this time around. For now, My page is best viewed on a 1366x768 and I tried to move things around for a 800x600 view (as you can see in the picture above, is not perfect, but it's better than nothing, also I'm not too worried since the windows can be minimized), I still yet to make it mobile-friendly but I'll work on that next!

Renovation incoming and comeback

27/May/2025

So... It's been a while
I'm not gonna go into detail about my personal life (maybe when I sort things out with that), but I am going to show what I have so far of a site total revamp.
Side note, I can't believe I just noticed two years later, that the blog page wasn't visually updated, like, it was one of the things I did finish but apparently I... forgor??? anyways...
So I wanted to nuke everything and start over, and not update until everything is ready.
I started with some sketches of the layout, I recommend writting down what you want in your website first (links, updates, music player, stamps, gif and images, the main content, etc) so you can have an idea of how many things are going to be on the front page. For this I also recommend exploring Neocities for inspiration, and also cause there's a lot of cool websites here, you can check the links on my site to get started!

Now, I knew I wanted my site to be like a cute windows desktop, with various windows across the screen with my stuff in them, but you see, I didn't just want my site to look like it had little windows, I wanted the windows to be somewhat functional; to drag and minimize.

Before I got started on any code or mock-up, I first had to make sure I could make the divs behave like I wanted, and for that I had to turn to my swore enemy: JavaScript. I KNEW that what I was trying to do was only possible with JS, but because of my poor-piss knowledge of JavaScript, I had to rely on the code of the people on the internet that generously share their codes online.

I'm going to list a few options that I found that I almost used but in the end I went with another one.

SuperHi's draggable and resizable windows (almost went with this one since it had the two features that I needed the most, aka be muliple draggables).
Window's Manager by max1220 (it's so good, the deal breaker for me was the fact that it requires each window to have an iframe for the content, and I thought too many iframes in one page would't be good, but if you don't mind, I recommend it!).
Resizable & Draggable Dialog by ZulNs (I couldn't figure out how to change the position of the windows).
DivWindow by Marc Clifton (I thought I would use this one, since you can move, resize, minimize and close the window… But it comes with so many files that I don't know what can I omit or if all of it it's necessary for the windows to work. I might read the documentation in more detail later since I just skimmed trough it, but for now I'll just stick to the code I'm using now).
Draggable Div Element from CodingNepal (You can minimize the window in the demo(and more!) but I downloaded the zip file to see the code and it didn't have those features??? and I couldn't duplicate the div to boot).
Drag/Resize/Minimize/Maximize/Close Any Elements by InteractiveJS (Almost perfect! I was going to use this one since I could do multiples, I could customize them with css… But, because the JS is the one creating the template, I couldn't give the window header a title nor an icon, and I could not figure that one out so yeah).

All on these codes were goods, but there were not Exactly what I was looking for, so I did the unthinkable… LEARN JAVASCRIPT.
I once read a comment that learning JS is like learning to play chest: Is actually easy to learn the basic rules; where and how each piece moves, what you can do and can't do, and the state of check and mate. But applying all that knowledge to strategize and win is hard, and its what needs practice.
It's true, no matter how many statements and methods I painstakingly try to read (thanks adhd), I don't really know how to apply them, but good lord that wasn't going to stop me.

Yes my little outerspace creatures, I, Kiko, against all odds, Learned JavaScripts!!!!!!!!!!!… Kinda.
Well, what you see is a mishmash of codes I forcefully made myself learn and a lot, and I mean A LOT of borrowed stuff from stackflow, that I held with ducktape in hopes of working. And it does!!!! I even made it do math for the battery percentage!

The code in case you want to have it on your website!

//JAVASCRIPT!!!!
    
    //WINDOW STUFF
    const windows = document.querySelectorAll(".window"); 
    const taskBar = document.getElementById("taskBar"); 
    let zIndexCounter = 100; 
                        
    windows.forEach((win, index) => { 
        const header = win.querySelector(".win-header"); 
        const miniBtn = win.querySelector(".min-btn"); 
        const icon = header.querySelector(".win-ico"); 
        const title = header.querySelector(".win-title"); 
                        
        let offsetX = 0, offsetY = 0, isDragging = false; 
        let isMinimized = false; 
                        
        if (win.getAttribute("resize") === "true") { 
            const resizer = document.createElement("div"); 
            resizer.className = "resizer"; 
            win.appendChild(resizer); 
                        
            let isResizing = false; 
                        
            resizer.addEventListener("mousedown", (e) => { 
                e.preventDefault(); 
                isResizing = true; 
                        
                const startX = e.clientX; 
                const startY = e.clientY; 
                const startWidth = parseInt(document.defaultView.getComputedStyle(win).width, 10); 
                const startHeight = parseInt(document.defaultView.getComputedStyle(win).height, 10); 
                        
                function doDrag(e) { 
                    if (!isResizing) return; 
                    win.style.width = (startWidth + e.clientX - startX) + "px"; 
                    win.style.height = (startHeight + e.clientY - startY) + "px"; 
                } 
                        
                function stopDrag() { 
                    isResizing = false; 
                    document.removeEventListener("mousemove", doDrag); 
                    document.removeEventListener("mouseup", stopDrag); 
                } 
                        
                document.addEventListener("mousemove", doDrag); 
                document.addEventListener("mouseup", stopDrag); 
            }); 
        } 
                        
        if (win.getAttribute("closed") === "true") { 
            win.style.display = "none"; 
            isMinimized = true; 
        } 
        win.addEventListener("mousedown", () => { 
            zIndexCounter++; 
            win.style.zIndex = zIndexCounter;d 
        }); 
                        
        header.addEventListener("mousedown", (e) => { 
            if (e.target.classList.contains("min-btn")) return; 
            isDragging = true; 
            offsetX = e.clientX - win.offsetLeft; 
            offsetY = e.clientY - win.offsetTop; 
                        
            function onMouseMove(e) { 
                if (isDragging) { 
                    win.style.left = e.clientX - offsetX + "px"; 
                    win.style.top = e.clientY - offsetY + "px"; 
                } 
            } 
                        
            function onMouseUp() { 
                isDragging = false; 
                document.removeEventListener("mousemove", onMouseMove); 
                document.removeEventListener("mouseup", onMouseUp); 
            } 
                        
            document.addEventListener("mousemove", onMouseMove); 
            document.addEventListener("mouseup", onMouseUp); 
        }); 
                        
        const minButt = document.createElement("div"); 
        minButt.className = "min-win"; 
        const minIco = icon.cloneNode(true); 
        minButt.appendChild(minIco); 
                        
        const minTitle = title.cloneNode(true); 
        minButt.appendChild(minTitle); 
                        
        minButt.style.display = isMinimized ? "flex" : "none"; 
        taskBar.appendChild(minButt); 
                        
        miniBtn.addEventListener("click", () => { 
            win.style.display = "none"; 
            minButt.style.display = "flex"; 
            isMinimized = true; 
        }); 
                        
        minButt.addEventListener("click", () => { 
            win.style.display = "block"; 
            minButt.style.display = "none"; 
            isMinimized = false; 
            zIndexCounter++; 
            win.style.zIndex = zIndexCounter; 
        }); 
    }); 
    
    //TASKBAR STUFF aka clokc and battery
    document.addEventListener("DOMContentLoaded", function() {
      const batteryIcon = document.createElement("i"); 
      batteryIcon.classList.add("fa-solid");
      const taskSep = document.createElement("p"); 
      taskSep.classList.add("line");
      const taskbarClock = document.createElement("div");
      taskbarClock.classList.add("clock");
      const taskBar = document.getElementById("timeBat");
      taskBar.appendChild(batteryIcon);
      taskBar.appendChild(taskSep);
      taskBar.appendChild(taskbarClock);
    
      taskSep.style.margin = '0 -4px 0 6px';
      taskSep.style.fontWeight = 'bold';
      document.querySelector(".line").innerHTML = "|";
    
      function updateTaskbar() {
        const currentTime = new Date();
        const hours = currentTime.getHours();
        const minutes = currentTime.getMinutes();
    
        const formattedTime = currentTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true });
    
        taskbarClock.textContent = `${formattedTime}`;
    
        let batteryPercentage;
        
        if (hours >= 6 && hours < 12) {
          batteryPercentage = 100;
        } else if (hours >= 12 && hours < 18) {
          batteryPercentage = 70;
        } else if (hours >= 18 && hours < 24) {
          batteryPercentage = 40;
        } else {
          batteryPercentage = 100;
        }
    
        if (batteryPercentage > 80) {
          batteryIcon.classList.add("fa-battery-full");
          batteryIcon.classList.remove("fa-battery-three-quarters", "fa-battery-half", "fa-battery-quarter", "fa-battery-empty");
        } else if (batteryPercentage > 60) {
          batteryIcon.classList.add("fa-battery-three-quarters");
          batteryIcon.classList.remove("fa-battery-full", "fa-battery-half", "fa-battery-quarter", "fa-battery-empty");
        } else if (batteryPercentage > 40) {
          batteryIcon.classList.add("fa-battery-half");
          batteryIcon.classList.remove("fa-battery-full", "fa-battery-three-quarters", "fa-battery-quarter", "fa-battery-empty");
        } else if (batteryPercentage > 20) {
          batteryIcon.classList.add("fa-battery-quarter");
          batteryIcon.classList.remove("fa-battery-full", "fa-battery-three-quarters", "fa-battery-half", "fa-battery-empty");
        } else {
          batteryIcon.classList.add("fa-battery-empty");
          batteryIcon.classList.remove("fa-battery-full", "fa-battery-three-quarters", "fa-battery-half", "fa-battery-quarter");
        }
        batteryIcon.title = `Battery: ${batteryPercentage}%`;
      }
    
      setInterval(updateTaskbar, 60000);
    
      updateTaskbar();
    });

<style>
    /*The Window!*/
    .window {
        background-color: #ffd1fa;
        border: 2px solid #d980ff;
        position: absolute;
        min-width: 150px;
        min-height: 100px;
    }
    /*The header*/
    .win-header {
        padding: 5px;
        background-color: #a133e5;
        color: #fff;
        cursor: grab;
    }
    .win-header:active {cursor: grabbing;}
                    
    /*The minimized button!*/
    .min-btn {
        float: right;
        width: 16px;
        height: 16px;
        cursor: pointer;
        font-size: 12px;
        padding-bottom: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
                    
    /*the resize corner!*/
    .resizer {
        width: 10px;
        height: 10px;
        background-image: url('https://cosmic-kiko.neocities.org/images/corner-resize-un.png'); /*You can hotlink the image if you want, or you can save it!*/
        position: absolute;
        right: 0;
        bottom: 0;
        cursor: se-resize;
    }
    /*Taskbar*/
    #taskBar {
        z-index: 1000;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        background-color: #ac1afacb;
        height: 12px;
        width: 100%;
        padding: 10px;
        align-items: center;
        gap: 6px;
    }
    /*Minimized window*/
    .min-win {
        background-color: #a133e5;
        border: 2px solid #d980ff;
        min-width: 90px;
        padding: 2px;
    }
    </style>
    
    <body>
    
    <div class="window win" resize="true" style="width: 300px; height: 200px;"> 
                                    
        <div class="win-header">
                                    
            <span class="win-ico">♥</span> 
                                    
            <span class="win-title">Resizable Window</span>
                                    
                                            
            <button class="min-btn" title="Minimize">_</button>
        </div>
                                    
        <div class="window-body"> 
            This window is Resizable! puul on the bottom right corner! The other window is on the bottom, it is Closed but if you click on it, it will open!
        </div>
                                    
    </div>
                                    
    
    <div class="window win" closed="true" style="left: 80px; top: 150px; width: 200px; height: 180px;"> 
                                    
        <div class="win-header">
                                    
            <span class="win-ico">♠</span>
                                    
            <span class="win-title">Closed Window</span>
                                    
                                            
            <button class="min-btn" title="Minimize">_</button>
        </div>
                                    
        <div class="window-body"> 
            This window is open now! You can use this code however you want! It's free to use!
        </div>
                                    
    </div>
                                    
    
    <div id="taskBar">
        <div id="timeBat"></div> 
    </div>
    
    <script src=""></script> 
    </body>

I'm so excited about JavaScript now! More optimistic! I'm thinking on making a few more things with JavaScript on the page! But first!!!!!! The page itself haha.

I based the design of the divs on windows 98, I was torn between doing 98, XP or Vista, and although XP and Vista are more nostalgic to me since I was too little to use my dad's computer when it had 98, I like the aesthetic of it a bit more (but I did find css resouces of 98, xp and vista! In case you do what to give it a go).
So I made a quick muck-up in csp and then started making that in vscode.

I, unfortunately, didn't take as many screenshots of the early process of the html as I would've wanted(the downside of thinking 'mmh maybe I should document this' far too late), but basically, I added the divs, tweaked the design a bit, and added the windows for the stuff that I wanted and slowly worked on the contents.

The first window that I did was the music player since, much like the windows, its integration relied on my js skills, thankfully, I find a simple yet effective code by Dev+Coffee, and with my new found knowledge on js, I could modify it to my liking. So that was a quick implementation! (me when I lie, I actually coulnd't decide on a music player look and I did struggle with the js for the trackbar for a bit).

Next thing I did was look for some kind of chat host and luckily on the Neocities Reddit, people recommended Chattable and I see why; easy integration (literally just two scripts and an iframe), and heavy customization (you can choose an already existing theme, or have your own css). Now I was having trouble with the custom css, so I decided to put aside the chat to focus on the next thing.

When putting in practice my js skills (basically to see if I could make a simple function on my own), I endend up making a link that chagnes background and url every page load at random! So I implemented it into my page as a little gif. Where will the links take you? I still don't know haha.

in case you want it (also yeah, I love Mob, its my new personality trait)

Next thing was the paint window; I just wanted a window with a drawing of my artsona that looks like Paint, but because I'm oh so creative, I decided to make the buttons change the drawing inside the window with js.

the code!

And that's basically what I got so far! I was going to do the updates window next, but I got caught up in a design choose; to add the file, edit, view, etc text at the top of the windows, or just leave the windows as they are. I know if I add the text, I'll naturally want to make text appear as they hover instead of only being a non-functional decoration, I'm fighting the urge!!!! But we'll see…

I also have the urge to make my own icon library, I'm using FontAwesome's icons for the page, but I want to have that pixel look to them and I don't know of any icon font that's pixel art and free. I will try to make one in Icomoon, but only if I got the time… Maybe I'll do the icons needed for my page and update the library as I go, so you can use the library too! When I incorporate the chat, make sure to leave a suggestion for an icon!

Winter Break

01/Dec/2022

So I've been gone for a while cause around these last 3 months, I had all my focus on school; from projects, investigation and even homework where I learned Illustrator and After Effects! To organize and get involved in campus activities, I organized the halloween party in my classroom (even bought pizza) and made a little christmas breakfast last friday before the test and exams started to roll in. I also participated in a showcase of creative works and sold stickers!!
I gotta admit, I wasn't one to get involved in these sorts of things (heck, the previous showcase I passed up cause I wasn't proud of any of my work) but this semester I've been trying to be more energetic and also get my new groups of friends moving to do fun stuff at school.
But enough of me blabbering about school, NOW IT'S WINTER BREAK!! and I want to make a little list of things that are coming to this page and things that I want to work on this winter.

Things that are coming!

An animation cycle I did for class using after effects and duik bassel, alongside with the illustration used.
A small Undertale theory that I wanted to upload in October but got busy and forgot about it.
The art I made for school and sketches I made in my free time!
Uploading an animatic I had to the page! (Not really this page related but I'm thinking of uploading my videos to youtube).
Uploading two animations that I made for a M.A.P.! and also share the process.

Things that I want to do!

Replace the little status thingy on the bottom right corner with something else, maybe a showcase of videos, songs or pages that I just discovered?
Work on that allusive Magical Girl Project that I have (I'll probably upload a blog entry explaining that).
Make an unofficial continuation of a South Park fanfic I really like (and also make a comic adaptation if I have the time).
Give all of the drawings in the gallery the original date, description and a retrospective (if I have one).

That's it for today and I'll see you tomorrow with one of the updates that I mentioned above!! also it is not guaranteed that I will complete all the points on the second list but I'll try my best!!
Have a nice winter!!

THE ARTICLES CAN HIDE!!!!

19/Sep/2022

HOLY YESS! so quick update; THE ARTICLES CAN NOW HIDE YES YES YES YES!! LET 'S GOOOOO.
Just today I checked my neocities feed (my social battery has been too high lately so I haven't che till today) and the lovely Mani commented on my feed that I could use the details tag.

HO-LY-PE-PE-RO-NI

This is what I needed!! This is what I've been looking for! simple and easy to understand.
Mani, if you're reading this, Thank you so so much again for the tip, you're a lifesaver!!!
And to anyone else who's reading, send them all the love you can!
Also! I'm in class right now, but when I get off I'll update this entry with how I used the detail tag in case you also want to collapse text.

Added Iframes!!

13/Sep/2022

Just a little update to say that I added simple iframes to the page! now instead of loading the entire page for each link, it just loads the little content box!
Overall it's much easier like this when it comes to modify the status bar or adding more blinkies! Also you might have notice that beside the date in the title section there's a little arrow thingy that changes color when hovered, well that's because I wanted the articles to be able to collapse so I ~~(and you)~~ wouldn't have to scroll all the way down to check old entries, BUT turns out that isn't an easy task; I thought it would be like marquee and there were gonna be a simple code I could copy and paste to hide the p of my article. haha NOPE, or kinda… turns out you can go simple and download Bootstrap, but I did not want to download it just for this, and the other option was to use javascript, which at first I just copy-pasted from W3schools but it didn't work!
So right here and right now I'm declaring that I'm learning javascript! I mean, I'm already going to learn Javascript for my video game design class in college, so why not get started already?
So W3schools is going to be open in my browser 24/7, wish me luck!

Grand opening.

30/Aug/2022

Welp is officially done!... kind of; I still want to add a gallery of my art and a few other things (like optimize the code of the page) but right now, I feel like the page is in a presentable state!
I'll take it slow in terms of website updates, but the blog is gonna be active; I kinda just want to put the random monologues I have in my mind on here, for posterity and who knows, maybe someone would find them entertaining.

Either way, thanks for reading and hope you enjoy your time here!

This was a process.

20/Aug/2022

My page is out on the internet!! It still has some stuff I want to do (that navbar seems kinda empty, I know), so be prepared for more!
Making this page was in itself a challenge cause I've never coded anything this big, but I wanted to have something pretty and that I loved seeing everytime I loaded the page.

Ya still clicked on see more?? damn well I guess I'll tell you about my process when making this website that you see!

heads up, there gonna be a lot of bold, italic and underlined text through out cause I feel like it's easier for me to read this way.

So I started making a sort of layout in Clip Studio Paint (tho you can use whatever software you are comfortable with; you can even use google presentations!) to visualize first what I wanted to do, what I would have to put and divide and all that sort of stuff (if you wanna see a tutorial about the layout building, go to this page! and check out the rest of their tutorials.)

I decided that I wanted the containers to have an unique border, mostly inspired by Cinni, Angel and another page that for the life of me I cannot find, I had to reset my chrome so is not in my history and I been like crazy on Districts, but maybe I saw her page through surfing? god idk.
Tangents aside, I tried to design two types of borders on my own, but I did not like them.

So I cheated and used one of the borders that you can select in Pokemon RedFire, cause I had the game at hand in an emulator. So if you want to use my edited version, go ahead!

after I was done with the container assets, I went and started coding in VS Code; I first made a div of every section (a Header, a Nav, the Main Container and the Left section) and started making a div inside to put the text in.
at first I wanted to put img and then the text inside, but it turns out the text appears on the side and to get it inside you gotta pad and margin a lot; I obviously didn't wanted to do that so I figure the way to do it is to change the background-image to the desire container, and set the width and height to the ones that the og image has, and it worked!

There is probably a better way to do this and people who know more about webmaking must be thinking of a million ways to do it, but this is my first full on big page made from scratch!; I literally learned more and more the further I got into coding, and there are some things that I kinda want to change to optimize the code but for now I'm gonna leave it as it is. I'm not a webmaster, I'm a webstudent.
So anyway, I started doing the assets for the sides, such as the nav buttons and the guestbook gif.
The nav buttons went through some revisions; first doing some big ones and then some smaller ones, both in pink. But then, because I wanted to add yellow as a contrasting color, I change them so they would fit better!
You can hover these buttons.

I also did the guestbook one based on other guestbook gifs on gifcities, and modified the neocities stamp.
the little blinkie scroller was actually going to be a search bar! but turns out you gotta know a bit of java script for that so I abandoned the idea for a blinkie one; I thought the scrolling effect would be hard to make and would take a wall of coding just for the tag (or worse, I would have to use java and gods I don't know anything about it), but for the people who want to code a scroll and are reading this, it's just marquee behavior="scroll" direction="left"
But now that I had a blinkie scroll, I felt like a stamp box would be too much, so I made it into a status one, and the “powered by neocities" moved it to the left.

Once I had the side bars, it was just a matter of writing and coding the main container for each page.
You are free to look at my code! and if you like the design you can use it!, just make sure to credit me at the bottom.

My digital journal

Windows

PixelStar Icons

Responsive

Things that are coming!

Things that I want to do!