crybaby landing page

welcome to my website!

i'm trying out neocities for the first time. looking for reasons to live frankly, and thought it'd be cool to compile all my art and thoughts and everything into one singular brain dump. expect no logical flow, constant non-sequiturs, anti-ai rants, and maybe some good writing here and there. lots of experimentation too.

(btw i randomly chose this quirk of no capitalisation, so expect some random Slip ups from time to time.)

from time to time i'll add links to random websites i really like. i reckon i'll find a lot of them as i spend more time on neocities. here's one: poetry foundation!

things i like

• some good ass music:
  • queens of the stone age
  • nine inch nails
  • carpenter brut
  • gorillaz
  • shoe
• witcher
• cyberpunk (both aesthetic and the ttrpg/videogame world. never played the ttrpg tho)
• writing stories
• solving the 3x3 rubik's cube over and over again lol

neocities CSS tutorial - notes and practice!

Going through the Neocities CSS tutorial, I noticed some advice so good that I thought it was worth documenting. At first I was thinking pen and paper, Obsidian, or Notion, but then I realised - what better place to document than on here. So, here it is:

• If you ever pick a dark background-color, make sure to make the text colour readable - color: #f5f5f5; - to keep your words readable.
• With hex code having the pattern of #rrggbb you can eyeball it: #ff0000 is pure red, #000000 is all-off (black), #ffffff is all-on (white), and equal pairs like #888888 are grays. There's also a short form - #f0f means #ff00ff.
• font-family sets the typeface. You give it a wish list of fonts. Always worth ending these lists with a generic family like serif, sans-serif, or monospace so there's a safety net. There are three big font-types worth keeping in mind:

  Font Type	Looks Like
  Arial, Helvetica, sans-serif	Clean and modern
  Georgia, serif	A well-loved paperback
  "Courier New", monospace	A typewriter or a terminal

• A serif heading over sans-serif text (or the reverse) is a classic look.
• font-size: 18px; on the body makes everything comfier to read.
• Every element is a box, and CSS gives you dials for each layer of it:
  1. padding - breathing room inside the box, between the edge and the content.
  2. border - the edge itself. Takes three values at once: how thick, what style, what colour.
  3. margin - space outside the box, pushing neighbours away.
  4. border-radius - how rounded the corners are.
  Two more finishing touches worth remembering: margin: 40px 0; gives the box space above and below; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); makes it float off the page like a sticker.
• Regarding centering your page:
  • max-width caps how wide the body can get. Around 600-700px keeps lines short enough to read comfortably.
  • margin: 0 auto is the centering spell: zero margin on top and bottom, and auto splits the leftover space evenly between left and right. Split evenly = centered. DON'T FORGET THIS INCANTATION: margin zero auto.
• text-align: center centers the text inside a box (example: centering text inside an h1 tag).
• On a phone, a max-width column can still touch the screen edges. Adding padding: 0 20px; to the body keeps your words off the walls no matter how small the window gets.
• Adding :hover to a CSS selector in the style section makes a rule that only applies while the mouse is over the element. It's called a Pseudo-class.
• w.r.t. links, a:visited styles links the visitor has already clicked, and text-decoration: none; removes the underline (although if you do this, don't forget to keep some hint that links are links).
• Gradients - there's a catch that trips everyone up once: background-color only holds solid colours. Gradients go in the bigger background property.

  
      body {
        background: linear-gradient(lightskyblue, plum);
        min-height: 100vh;
      }
          

  The above code block creates a sunset gradient in one line of code.
  • The first line: linear gradient goes top to bottom. You can specify left to right however: linear-gradient(to right, lightskyblue, plum)
  • The second line: Your body is only as tall as your words, and a gradient that runs out part-way down the window starts over from the top colour - leaving a strange band at the bottom. min-height: 100vh; stretches the body to at least one full window (vh is short for viewport height, and 100 is all of it), so the sky always reaches the ground.
• Some other gradients that achieve cool effects:
  • linear-gradient(gold, orangered) - warm dawn
  • linear-gradient(to right, #ffe9f0, #e6e6fa) - sideways fade
  • linear-gradient(midnightblue, black) - nightfall
  • linear-gradient(gold, hotpink, midnightblue) - the full sunset
• The background property has a few more tricks: background: url("/mypattern.png"); tiles an image across the page - wallpaper look of the classic web.

neocities JAVASCRIPT tutorial - notes and practice!

While I've dabbled into it plenty, I'd say my fundamentals have always remained weak. Time to rectify that!

• JavaScript code lives inside the <script> tag. The best spot for it is at the bottom of the page, just above </body>. This is because the browser reads the page top to bottom, so by the time it reaches the script, everything above already exists and is ready to be commanded.
• Let's take the following simple JavaScript command:

   document.getElementById('greeting').textContent = 'This sentence was written by JavaScript!'

  It'll be easier to unpack this jargon by reading it right to left: take this sentence, make it the text content of the element named greeting, in the document.
• JavaScript is much fussier than HTML. When something doesn't work on your page, your prime suspect should be a typo in the JavaScript. It's because capital letters matter (camlCase); quotes must come in pairs; and the id in your script has to match the id in your HTML exactly.
• document.body.style lets JavaScript write CSS onto an element directly. Example:

        
    document.body.style.background = 'linear-gradient(moccasin, lavender)'
    document.body.style.minHeight = '100vh'
        

  Note the spelling change: CSS names lose their dashes in JavaScript and get a capital instead. min-height becomes minHeight. I'll be using this to create a dark mode / light mode toggle right here: switch to mode
• Buttons vs links - a good rule for your site: links (<a>) take you somewhere, buttons do something here.
• Randomise everything! - Take an array, say an array of greetings: var greetings = ['Hello!', 'Welcome, traveler!', 'You found my website!']; now, Math.random()gives a random decimal between 0 and 1, and if you multiply it with the array's length and round down with Math.floor(), you get a fair pick of any position! The pattern is always the same: list[Math.floor(Math.random() * list.length)]
• JavaScript Date Object - JavaScript's new Date() hands you the visitor's current date and time, and it can describe itself in words using .toDateString() method:

        
    var today = new Date()
    document.getElementById('today').textContent = today.toDateString()
        

  In fact, here am I, using it to tell you that today's .
  You can, in fact, get more information out of the date object:
  • today.getHours() - the hour, 0 to 23. Current hour: .