Uh oh, where is the background and cute borders? seems like you got out of the iframe box, this happens when you open things in a new tab.
Click here to see the page as intended!







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.
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!!





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.





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.


TG:mild cursing

About the site



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.)

Layout of the current page but with simple purple boxes and a background of a purplue to lavender gradient. Layout of the current page but without text; image title 'Cosmic-Kiko', light pink boxes with a pixel border and a background of a purplue to lavender gradient.

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.

Three unfinished container designs.

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!

Option menu from Pokemon: Red Fire; with the Frame #18 selected. Frame #18, and also the current container of the page.

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.