Web Village/Personal Site WIP (Looking for Crit/Advice)

[pootispaghetti]

Hi all! 

I started making a little village for a few of my characters to act as a personal site.  It's still coming along pretty quickly but still needs a lot of work.  I'm looking for some thoughts/critiques/suggestions for it, both for the art and graphic design side of it and from the technical side.  I had some HTML and CSS experience going in, but there are definitely much better ways of setting up the site.

Here's the link:  pootispaghetti.neocities.org

Thanks a ton, and looking forward to chatting here more! 

[Dan Q]

OMG that site's gorgeous. I love the lively cartoon aesthetic you've got going on. It's a bit "mystery meat" which isn't usually my jam but it looks fabulous enough that I don't even care. I love the use of the vw-based positioning to do sort of a modern-day image map (and I approve of the "title" attribute to give a clue what's "behind" each thing, for those with pointing devices who can see tooltips!).

I wonder if you might benefit from something to tell "tall" screen users (usually people on mobiles!) to rotate their screens? A lazy way to do that might be something like this CSS:

Code

@media (orientation: portrait) {
  body::after {
    content: 'Designed for wide screens, not tall ones! Turn your device!';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: darkgreen;
    color: white;
    font-family: sans-serif;
    padding: 2vw;
    font-size: 24px;
  }
}

But seriously, you've done an amazing job here.

[pootispaghetti]

Thank you so much!  I'll probably improve the readability issues of it over time so the mystery meat problems aren't as bad (maybe interactables having on-hover outlines? hmmm not sure).  I didn't even think of the potential accessibility help that the titles gave, that's super cool to know.  The main reason I went for those was to add to the adventure-game-like feel of it, and also add some extra info bits if they weren't as obvious.

Ahh, that code would definitely help, much more than the finger wag "phone users go away" I have right now hahahaha, much appreciated