6492 surfin 404

[bmuenzenmeyer]

Description

I spent the weekend chipping away at @darcyclarke's rocket turtle animation. This will land the longest open PR we have, and it's an important bit of style 😎

• on the 404 page, as add mascot to 404 #6481 established
• converted to Tailwind
• added support for prefers-reduced-motion, per the TW docs

Validation

Go to a non-existent page locally or on the preview.
Tested with
Chrome, Firefox, Edge

Existing	Chrome	Firefox	Edge

Mobile

Existing	New

Turn on prefers reduced motion, in your operating system of choice.

After a bit, see the up and down animation cease to loop.

Related Issues

closes #6492
relates to #6480

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npm run format to ensure the code follows the style guide.
• I have run npm run test to check if all tests are passing.
• I have run npx turbo build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Sep 24, 2024 10:41am

[bmuenzenmeyer]

self-review, open to suggestions, especially on the tailwind conversion

[bmuenzenmeyer]

On mobile text is not centered and the image overlaps with the bottom text.

@ovflowd can you look again, this looks correct to me now on my phone. If you are concerned about the text, that is unrelated to the PR - this only alters the image

[canerakdas]

Looks really cool 😍 I have added a few minor comments about the Tailwind conversion

[darcyclarke]

@bmuenzenmeyer thanks for helping get this over the finish line <3

[ovflowd]

Page could not be found still not centered for me 🙈

it never was, from what i can tell of current production. we can center it if you like.

Let's center it :D

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 99	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 100	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 100	🟢 92	🔗

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.47% (589/651)	76.29% (177/232)	94.35% (117/124)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
131	0 💤	0 ❌	0 🔥	5.234s ⏱️

[AugustinMauroy]

LGTM! Cool new feature

[canerakdas]

LGTM!