This is an evaluation of goopthekid.com, a website created and maintained by Jhonen Cossu (AKA 'Goop'). Since Jhonen is their name that's how I'll be referring to them. They don't have their pronouns listed anywhere so I will be using gender neutral ones.

Positives

Jhonen's site is extremely memorable to me. It has a lot of personality and whenever I need to pull up references for "retro" styled websites, this is the one I go to. The site is cute and generally well-put-together and for my needs it's decently functional. I complain about it a lot in the 'negatives' section but it's one of my favourite sites on Neocities, and I really hope they take steps to make it better in the future!

Personality

God, seriously, this thing has style. Jhonen introduces themselves as an "adept designer [&] illustrator" and boy does it show. The overall design of the page is very reminiscent of early Deviantart and Nickelodeon, and I'd be shocked if they ever said they didn't peruse those websites at some point in their life.

They have a very graphic art style that shows itself very loudly in the way the site is designed, down to the color choices.

Although I do think it was by mistake, the way most of the site floats to the left is really cool and I considered doing something similar for my own portfolio site. If ever they choose to revamp the site I do hope they'll keep that feature.

Also the mascot (called 'Mimsy' according to comments) is so darn cute.

Negatives

My biggest problem with this site is that they used 'static' measurements as opposed to 'dynamic' ones, and that even though 95% of the content of the site is visible immediately, you still have to scroll down ever so slightly to see everything.

Resolution issues

Because Jhonen used pixels (px) to determine the size of their elements, their website does not function well on all displays, particularly mobile ones. With resolutions ever-increasing, their website will seem to shrink over time. I suspect that this happened because the display they used to code it is smaller than the display I'm using to code it.

Also, perhaps obvious, but this website just doesn't work at all on mobile. It overflows everywhere,

This problem is actually extremely easy to fix. If Jhonene swaps their pixel measurements for vw and vh or percentages, it will adapt much more fluidly to displays different from theirs. If they really want to use pixel measurements, they could make use of the "@ media" rule to make sure it translates properly across different screens, and the "calc()" property to make sure their percentages and their pixels don't fight with one another.

Scrolling

It's hard to elaborate much on this point. The fact that I have to scroll to see one tiny little bar at the bottom just feels messy, and I suspect this is related to the above-mentioned resolution problems. It wouldn't be solved by changing the width of elements, but if they adjusted the height of the header bar and the height of the main content it would feel a lot better.

Another option would be to use position attributes to pin the bottom bar at the bottom of the viewport, and the header bar to the top of the viewport. Then the main content could be scrollable.

Template

When looking through the console to pin down for sure what was causing the issues I was seeing, I noticed that Jhonen likely used a template for their site. This isn't a bad thing, but it does demonstrate a lack of knowledge. They make some very weird choices with the template, such as using two divs with empty paragraph elements to push the header bar down a little bit rather than using margins, or nesting an image within a div rather than setting it as the background image. That latter decision would make sense if they wanted to include a caption or text, but the container is totally taken up by the image.

Accessibility

Accessibility, turns out, is a pain in the butt to code. I spent the last week or so trying to reformat sections of my portfolio site to be navigable purely by keyboard and adding alt text. It is not an easy commitment. That said, Jhonen fails at accessibility on a lot of very basic levels.

The biggest issue here is that they use images as their buttons. This is a problem because screenreaders cannot read them, they aren't selectable by keyboard by default, and, by default, they can't be clicked on using the enter key. Jhonen seems to have gotten them to be navigable and clickable, but it's a lot of extra javascript that could've been avoided had they used styled buttons instead.

Jhonen also uses an image as their "about" page, with text embedded inside. This would not be a problem if not for the fact that Jhonen did not include alt text.

Portfolio

This website seems to be intended to function as a portfolio. It works okay I guess. The art gallery is well-put-together, though they really should have used the 'lazy-loading' attribute for all those images. The way they chose to implement clicking on the image to make it bigger is also very strange and hard to look at. They get cut off by the surrounding menus. I would think changing the z-index might fix that but it's hard to know because I can't tell how they implemented the gallery.

The projects page is a lot more annoying. On the home page, when you first open the site, there's a cool scrolling thing with a bunch of different graphics Jhonen created. They aren't clickable and seem to be purely decorative. Neat trick.

But then when you open the project page, they have the scrolling graphics... and then another one, below the selected graphic (which, by default, is of a bunch of silly alien guys). If you don't happen to mouse over them, you won't know that they're clickable and that they change what project is shown. I didn't even know they were clickable until today, and I've been using this site as a reference!

The graphics also aren't selectable by keyboard at all, go figure. Neither do they have alt text.