skarifikator

[skarifikator]

i love windows movie maker.

[skarifikator]

the raw ingredients

[skarifikator]

WTF?!-KMFDM

[skarifikator]

Frilly, Maud Madsen

[skarifikator]

hey! i found you thru your neocities site and really really wanted to ask, how did you code your art gallery? it's lovely and perfect and i high-key want to steal it

THANK YOU FIRST OF ALL!

secondly... I wish i could give you a comprehensive answer but truth is since i worked on it for over a year i don't remember everything i did? a lot of the things i achieve with my markup is based on trial and error and testing different solutions. i don't actually know what i'm doing lol. i use a lot of tutorials and old forum posts and such and i wish i could just link those but when so much time has passed i can't remember everything i looked up. HOWEVER i'll try my best to provide some basic guidance to what's what, and what it does in my markup, to make it easier if you want to copy my shoestring bullshit. (and past how embarrassing it is that my markup is so messy and inefficient, i have no problem with anyone referencing my source or even copy pasting whole chunks of it to have a base to work from if they wanna make something similar to me. no credit needed ofc , just don't use any of my assets or style it the exact same, make it your own! )

THIS IS GONNA BE A LONG POST SORRY SO I'M GONNA HAVE TO PUT THE REST OF IT UNDER A "KEEP READING" , ANYTHING ELSE WOULD BE INHUMANE...

here are links to the relevant sources for the page, there's also another stylesheet linked but this is just a very basic one for my website that has my fonts and scrollbar styling so it's not important here.

view-source:https://korsse.neocities.org/gallery view-source:https://korsse.neocities.org/sidebarstyle.css

(no idea if these links will work for you or if its different per browser or what, if they don't just go to my gallery and right-click view source or inspect or smth)

btw before reading further its useful to know that i use https://www.w3schools.com/ a lot (playing around with the tryit editor is really helpful to understand HOW shit works. sometimes i even make the basic structure i want in the w3s editor isolated from the rest of my messy markup to ensure i get the basics of it to work before i integrate. this way i know that if it breaks it's because it's conflicting with other shit on the page and not because i fundamentally fucked up. ) and i'm just going to assume you know the basics of stuff like what a div is and the difference between class and id etc...

my gallery is largely based on 3 main types of thing(?) : modal images, tabs and collapsible.

THUMBNAILS AND MODALS

my thumbnails are also css, (I KNOW the method i used for my thumbs is something i got off some forum post or reddit comment or substack or whatever, i can't find it again though.) HOWEVER I would not recommend doing thumbnails the way i did because you do not get an appealing custom crop (or i guess you probably could in theory but to do that for every image would be more work than its worth) and because considering it's really just the full image sized down and cropped with styling, it takes a long ass time to load. ( the only reason i do it this way is to not have to make, edit and host individual thumbnails for 6 years worth of art. it's a real menial task to do when you'd have to do it for over 400 images ) but if you need uniform sized thumbnails the best way to do it afaik is to make them in whatever graphics editor you have. i'm unsure if this would be compatible with image modals ( as constructed in the w3s tutorial ) but if not you could probably just make a box modal do the same thing and have the thumbnails be buttons styled with inline css like this:

<button id="whatever your id is" style="background-image:url(thumbnail path)">

to make them work as thumbnails though you'd have to make all the dimensions of the actual image file for each thumbnail true to the pixel height/width you'd want them to display as on the page and use css to style all the buttons to be those same dimensions. this will interfere with other buttons on the page but you can probably get around this with making a button class. like for example if your thumbnails are 100x100px you slap this in your css

button.thumb {width:100px; height:100px;}

and add this to the button tag

<button id="whatever your id is" class="thumb" style="background-image:url(thumbnail path)">

HOWEVER... this might mean you'd have to make a new modal (on the html side) for every single image so it's probably not ideal if you're gonna have over 400 images like i do... there should be ways to make multiple modals on the same page not a nightmare but you'd have to keep track of unique ids for each one at the very least.

here are both links to the basic w3s modal image and modal box tutorials for convenience.

wish i could have explained what i did better but the modal was like the first thing i did,

and was kind of a nightmare to figure out because i originally wanted it to display a description using the alt text styled in a very specific way that i ended up scrapping because it was broken as fuck and evil and bad. (cw: gore in the bg of the image below btw)

my memory has been corrupted so that the battle with the alt text is all i remember from making it rather than the useful stuff that survived into the current version lololol.

tabs

ok now we're getting into the layout of the page itself. my gallery consists of a sidebar and the page content

in the sidebar the bottom two boxes have the universal stuff that goes on every page that has the sidebar, and the links are just normal links to individual pages. but the top box with the red "links" is the gallery navigation right? and they are not links at all, they're buttons to designated tabs.

for the BASIC layout of the page, it's split into two divs called "sidenav" and "main". [sidenav] is everything that goes in the sidebar space and [main] is literally everything else. there should be nothing directly in the [main] div except for other divs, it is merely a container for the tabs. each and every "page" is a tab, including the "Art" tab that is open by default (i might be wrong but iirc what tab is open by default is simply decided by which one is first in the html document i am so so wrong, it's determined by id in the javascript.)

tab buttons go inside the sidenav div and tabcontent goes inside the main div. i have my tabs styled as inline-block, i can't remember if it matters that much or not but you know... considering what inline-block is, it probably does?

tabcontent contains everything the visitor will see, for most of my gallery tabs this means thumbnails. my thumbnails are laid out in a grid using div classes called "row" and "column" four [column] divs go inside one [row] with one thumbnail directly inside each [column] div. each new line of thumbnails is a new [row] div with another 4 [columns] and their contents, you get it, it's not complicated, just verbose. there are lots of other less amateur ways you can display shit in a grid layout using html/css but my brain is small so this works for me!! :,D

even though they might seem intimidating with the javascript required, tabs in general are pretty simple if you follow the w3s tutorial (there's even one specifically for vertical tabs) . just make sure to keep all the contents of each tab INSIDE said tab and it shouldn't cause much trouble.

since my gallery is so bloated with image links and such i thought i'd also link this example page ( and the source: view-source:https://korsse.neocities.org/temp/exampleignorethis ) i made on the fly for someone else a long time ago. its just a hodgepodge of copy pasted w3s stuff to quickly show off a navbar with tabs and "accordions" (more or less the same thing as collapsible just called smth different in a menu context?) but it's kind of a simple version of the same stuff i did with my gallery? perhaps it can be useful for you as an example, perhaps not. but i might as well link it just in case lol.

collapsibles

the doodle tab also has collapsibles! idk if you even care about this but it's part of my gallery and one of the more fun features that isn't present in your average neocities gallery page. (talking out my ass, maybe they are super common idk, i haven't checked)

the collapsible aren't any more complicated than tabs, and their integration into my gallery isn't any worse than putting the buttons and collapsible content div inside the tabcontent and putting the thumbnails inside the collapsible content div. style as desired with css to make it look the way you want. i didn't do anything too fancy with it. once again easy-peasy if you use the w3s tutorial

uhhh i think that's it? there is more stuff i could explain but i have very little experience with writing explanations like this so i'll leave it at this to start. but don't hesitate to ask if there's anything specific you found confusing, or anything else about how my gallery works that you want me to go into ! ik i could have been more concise but i'd be here all day retyping stuff so i hope u could bear with my long wall of text, i'm not a writer ^^' (i'm a rambler). good luck on your webpage endeavors!

[skarifikator]

Day 106. Don't look away.

[skarifikator]

Never give in to the flat tummy propaganda

[skarifikator]

[skarifikator]

[skarifikator]

what a pretty date! three 1s, two 0s, two 2s and one 3!

but because there's three 1s its actually two 3s and there are two already existing pairs of two numbers, but if you count the three 1s as another three you actually have three pairs of two of the same number! and that's another 3! both of the zeros are equal distance from the center of 11.. the two 2s hug the 0 so cozily... this sequence of numbers make a beautiful pattern and the numbers repeat in very pleasing ways. it feels so balanced and harmonious.

this is not something i would usually notice but i'm glad i did! november first two thousand and twenty four may not be a great day of living but it looks beautiful on the calendar!

[skarifikator]

jeff the killer source image found

[skarifikator]

can you get me a crumb from the store

...

and 2 Lint

[skarifikator]

[skarifikator]

neocities guide - why you should build your own html website

do you miss the charm of the 90s/00s web where sites had actual personality instead of the same minimalistic theme? are you feeling drained by social media and the constant corporate monopoly of your data and time? do you want to be excited about the internet again? try neocities!!

what is neocities?

neocities is a free hosting website that lets you build your own html website from scratch, with total creative control. in their own words: "we are tired of living in an online world where people are isolated from each other on boring, generic social networks that don't let us truly express ourselves. it's time we took back our personalities from these sterilized, lifeless, monetized, data mined, monitored addiction machines and let our creativity flourish again."

why should I make my own website?

web3 has been overtaken by capitalism & conformity. websites that once were meant to be fun online social spaces now exist solely to steal your data and sell you things. it sucks!! building a personal site is a great way to express yourself and take control of your online experience.

what would I even put on a website?

the best part about making your own site is that you can do literally whatever the hell you want! focus on a specific subject or make it a wild collection of all your interests. share your art! make a shrine for one of your interests! post a picture of every bird you see when you step outside! make a collection of your favorite blinkies! the world is your oyster !! here are some cool example sites to inspire you: recently updated neocities sites | it can be fun to just look through these and browse people's content! space bar | local interstellar dive bar creature feature | halloween & monsters big gulp supreme peanutbuttaz | personal site dragodiluna linwood | personal site patho grove | personal site

getting started: neocities/html guide

sound interesting? here are some guides to help you get started, especially if you aren't familiar with html/css sadgrl.online webmastery | a fantastic resource for getting started with html & web revival. also has a layout builder that you can use to start with in case starting from scratch is too intimidating web design in 4 minutes | good for learning coding basics w3schools | html tutorials templaterr | demo & html for basic web elements eggramen test pages | css page templates to get started with sadgrl background tiles | bg tiles rivendell background tiles | more free bg tiles

fun stuff to add to your site

want your site to be cool? here's some fun stuff that i've found blinkies-cafe | fantastic blinkie maker! (run by @transbro & @graphics-cafe) gificities | internet archive of 90s/00s web gifs internet bumper stickers | web bumper stickers momg | gif gallery 99 gif shop | 3d gifs 123 guestbook | add a guestbook for people to leave messages cbox | add a live chat box moon phases | track the phases of the moon gifypet | a little clickable page pet adopt a shroom | mushroom page pet tamaNOTchi | virtual pet crossword puzzle | daily crossword imood | track your mood neko | cute cat that chases your mouse pollcode | custom poll maker website hit counter | track how many visitors you have

web revival manifestos & communities

also, there's actually a pretty cool community of people out there who want to bring joy back to the web! melonland project | web project/community celebrating individual & joyful online experiences. Also has an online forum melonland intro to web revival | what is web revival? melonking manifesto | status cafe | share your current status nightfall city | online community onio.cafe | leave a message and enjoy the ambiance sadgrl internet manifesto | yesterweb internet manifesto | sadly defunct, still a great resource reclaiming online social spaces | great manifesto on cultivating your online experience

in conclusion

i want everyone to make a neocities site because it's fun af and i love seeing everyone's weird personal sites that they made outside of the control of capitalism :) say hi to me on neocities

[skarifikator]

artfight attack for siphonophore