#project_website — Public Fediverse posts

Done!

Favorite Pictures Page

… Okay, okay. It actually took me 2 days to write this program. No point uploading the software itself since it’s a ridiculously specific everything-and-the-kitchen-sink tool that’s hard coded to do stuff that only I would ever need. Also it’s written in Flash 8 because that’s what I’m used to programming in. Hello future world, 2005 says hello!

#Project_website #WebDev #NSFW #Software #By_Humbird0 #Finished #AdobeFlash

... so let's talk about menus instead!
One of my favorite things in Chrono Trigger is the way the menus slide around in the equip screen. Maybe I'll do something like with the thumbnails when you hover over them.

#Wip #Webdev #GUI #UI #Design #Css #Chronotrigger #project_Website

"Semantic" HTML is about using HTML tags that represent the information well, so that machines like search engines can understand it. Ironically the trick to writing this way is to pretend a person is viewing this raw page. Would they understand it? Is everything labeled and visible?

Don't worry about how ugly it looks. That is 100% the job of CSS. HTML's job is to be raw data. Because when you separate appearance and data, it becomes easy to modify one without needing to modify the other.

That used to be a lie. For 20 years the order of things in HTML used to affect how it got displayed. CSS "grid" recently changed that. Now you can freely rearrange everything on the page no matter where it is in the HTML.

The best examples of this are in the The CSS Zen Garden

#Wip #Webdev #Html #Css #project_Website

I think I'll try out another generator called Hugo. It's very similar but it might give me more options.

https://www.youtube.com/watch?v=xMv10E561WQ

#Wip #Webdev #Templates #Staticsitegenerator #Markdown #Hugo #Html #project_Website

So I tried out a static-site generator called Zola. It could theoretically re-create my site as separate HTML files. The idea is that I would write all my stuff as MarkDown files and Zola creates folders and HTML based on the templates I give it.

https://www.getzola.org/

#Wip #Zola #Webdev #Templates #Staticsitegenerator #Markdown #Html #project_Website

And sure enough, everything has better contrast now. I've actually never tried this technique before. Apparently it works.

#Wip #Webdev #Css #Accessibility #project_Website

I took screenshots of the old color palette and the new shades of gray. In Photoshop I can overlap the greys on top of the colors and set the blend mode to 'Luminosity' to change the brightness of the colors. Now I have a set of colors that contrast better. I'll just use the eye-dropper to get their color values and paste them into my CSS color-palette file.

#Wip #Webdev #Less #Css #project_Website

Next I'll check if things have enough contrast by temporarily setting all the colors to shades of grey. To test this the only thing I need to change is the hue-palette, the roles update automatically, and everything that uses those roles updates too.

Then I'll adjust the shades until they contrast against each other better, and check the thumbnail to see if links stand out next to text and if text stands out against the backgrounds.

#Wip #Webdev #CSS #LESS #project_Website

Before I get too carried away with adding other things, I should figure out my website's overall color scheme. I usually use 2 colors in multiple shades, and neutral greys.

Gonna try something:
I'll define basic hues. (Greys, Browns, Greens)
Then assign them to color-roles. (text, clickables, foreground, background)
Then apply those roles to individual things in the HTML that fit those roles. (Buttons and Links are both things you click)
They're just variables, but I decide what they mean

#Wip #Webdev #CSS #LESS #project_Website

I'll start with almost raw HTML. Just to figure out what information is going to be on the page. After I know what a thing contains, then I can figure out how it looks.

You can invent your own HTML tags and they'll be treated as SPAN tags, it's just XML, but you should use existing HTML tags whenever possible if they have a specific meaning.

🔗 https://www.semrush.com/blog/semantic-html5-guide/#html-semantic-tags-for-structure
🔗 https://matthewjamestaylor.com/custom-tags

#Wip #Webdev #project_Website

Also, the #ChronoTrigger in-game font is not Chicago. It has some changes.
But I decided to go with a slightly different #font by LockeZ instead of either of those, because it renders sharper pixels in a web browser and has nice chunky punctuation.

#Wip #project_Website

I gotta go with my gut on this one. Small resolution looks better to my eyes. One of the most impressive things about #PixelArt is how it can pack so much detail into small spaces.

#Wip #project_Website

I'm debating whether or not to use chunky pixels. If everything on the page looked like this, then it wouldn't look out-of-place to draw my decorations and pixel girls in low resolution too.

#Wip #project_Website

Looks like this will be easy. The only quirk is that the window's gradient is drawn behind the borders, so I have to use Photoshop to manually add a gradient to the border images to create the illusion that they're getting affected by the shading.

#Wip #Webdev #Sprites #PixelArt #Css #project_Website

Hmm... if I nudge this "inner" border down, I could put title text in between them. I'll have to try some CSS experiments to figure out how I can manage this.

#Wip #Sprites #PixelArt #project_Website

There we go! Sure it's a "stone" texture but the rich colors feel like cozy wood.

#Wip #Sprites #PixelArt #project_Website

In fact, maybe I should just use Chrono Trigger's text windows.

But its wood window is too plain for my tastes, and copying is boring anyway, so I'll use those rich colors and make my own chrono-like window. I always preferred the fancy borders of the game's 2nd window style anyway.

#Wip #project_Website

Oh, and I gotta use the Chrono Trigger font!

#Wip #project_Website

I'm such a sucker for the whole "book study" personal library aesthetic.
Is it something you see in my porn games? No.
Will I ever afford anything remotely like this? Hell no.
Relevent to my website? ... no. 😢

But... I can use the colors.

#Wip #project_Website

Ooh, I REALLY like these warm colors! Dark green and brown with wood textures are a very cozy style.

#Wip #project_Website

The website's background could be a forest or an RPG map.

#Wip #project_Website

Maybe I could have pixel girls sitting on the website's windows, like Kawa's Window-Sitters.
https://helmet.kafuka.org/windowsitters/

#Wip #Software #project_Website

Hmm... ideas.
What should the website's theme be? "Pixels" isn't a theme, it's an art style. But my games tend to have themes. Certain recurring situations, kinks, characters and places. Maybe these cliches can guide the design somehow?

#Wip #7KinksToKnowMe #project_Website

I want #PixelArt all over the place!
That's what I've been making all these years. My website should look like it.

#Wip #project_Website

I wanna play with border-image and decorate all the boxes to look like RPG windows.

#Wip #project_Website

Which means that the main HTML file is pretty huge and every time I add a project, the entire thing needs to get downloaded all over again. And that one file is over a MegaByte! So much for efficient caching.

#Wip #project_Website

Then I discovered the WayBack Machine at the #InternetArchive and changed my mind about this. I wanted my website to be easy to archive for #DigitalPreservation, so I started storing all the information in the HTML itself with standard markup instead of using a weird custom JSON file that nobody else understands. That way when you save my site on the Wayback Machine, it can grab everything.

#Wip #WebDev #DigiPres #project_Website

So how did my website end up this way?
My original plan was to store everything in a JSON file and let the browser cache everything else, so you only load the parts that changed since the last time you visited, theoretically making the site super fast and efficient.

#Wip #project_Website

It's not just the boring flat colors that are bugging me. It uses a big complicated single-page JavaScript blob. And it really doesn't need it.

The irony is that this is technically a static website. There's no database. Everything is stored in the HTML itself.

Thank god I never fell into the trap of using a JavaScript FrameWork.

#Wip #project_Website

It has me thinking that my website's kind of boring. Nice navigation, but not much to look at... besides the porn.

Sure it's not a generic wordpress white rectangle-fest. But it's no NeoCities either. I miss all the cool-looking websites from 2006.

🔗 My Website in 2022
🔗 CSS Zen Garden

#Wip #project_Website

When I left Twitter, some people weren't sure about what was changing. Not much. I'm still making projects. Still using my website. The only difference is that I'm mirroriing the updates to Mastodon instead of #Twitter now.

You'll see the same updates in both places.
🔗 http://www.humbird0.com/content/show.htm
🔗 https://aethy.com/@humbird0

#TwitterMigration #project_Website #By_Humbird0