feat: turtle surfin'

[darcyclarke]

Description

• adds the turtle rocket mascot to the homepage
• makes them surf

Fixes: #6480

https://github.com/nodejs/nodejs.org/assets/459713/6b810071-751c-425d-b55b-3818bbf055d3

Validation

Related Issues

Check List

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

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Mar 20, 2024 2:33am

[AugustinMauroy]

-1 for landing page because what user want to see on landing page it's :

• download nodejs (CTA)
• learn nodejs (CTA)
• example of node

So the mascot on landing page isn't good idea but on 404 it's great area to put this animation

[ovflowd]

I think this is cool, but the sort of thing I'd probably add behind a Konami code.

[AugustinMauroy]

I'd probably add behind a Konami code.

fun I like this idea

[darcyclarke]

I think the konami is interesting for sure but it would be nice to also make it a bit more accessible for a wider audience. Maybe we can also have a toggle in the footer (ex. a turtle shell icon that is greyscale/in-color similar to the light/dark mode toggle) & that's connected to the konami code as well.

[darcyclarke]

Just to circle back here - I haven't had time to update this PR yet but will when I get a minute to make the adjustments I noted in my last comment. If anyone thinks those wouldn't be sufficient to unblock the change let me know. Otherwise, I think this would be a nice easter egg/addition.

[ovflowd]

I, unfortunately, don't think we will merge this on the Home page, Darcy 😅 it significantly breaks the visual image/style of the remaining of the website... It just shouldn't be placed there.

We already added the turtle on a branding page and on 404.

[benhalverson]

I think the konami is interesting for sure but it would be nice to also make it a bit more accessible for a wider audience. Maybe we can also have a toggle in the footer (ex. a turtle shell icon that is greyscale/in-color similar to the light/dark mode toggle) & that's connected to the konami code as well.

The old nodejs.dev had a Konami code feature for a while 👍🏻

[darcyclarke]

@ovflowd are you saying you wouldn't merge this if it was an easter egg/behind the konami code?

[ovflowd]

@ovflowd are you saying you wouldn't merge this if it was an easter egg/behind the konami code?

No, the opposite. If this is a konami code, I'm 💯 but that's it.

[ovflowd]

@darcyclarke I bet you busy with your startup but any updates?

[bmuenzenmeyer]

I'd hate to not land this in some way. I propose we add the animation to the 404 - https://nodejs.org/en/surfin and then enable it when the user accepts motion

[mirasayon]

it’s fun. Looks good to me

[darcyclarke]

@ovflowd I don't think I'll get time to finish this anytime soon. It would be awesome if someone else could pick up this PR though & add the changes we discussed in this thread (especially if we could potentially land it before NodeConf EU 😉).

One design note, for the footer turtle-konami-code-toggle, I'd imagine we could leverage the existing turtle emoji (🐢) & just greyscale it with CSS when toggled on/off.

/* found it needed contrast on top of the greyscale (for visibility) */
filter: greyscale(1) contrast(1.5) brightness(1.5)

Either way, if no one else picks this up then I may get some time around the Node.js Collab Summit to update this (but again, anyone else should feel free to pick this up & run with it if they have time - ex. #7056)

[ovflowd]

Hey @darcyclarke I believe that @bmuenzenmeyer is taking care of it https://github.com/nodejs/nodejs.org/pull/7056

Ill close this PR then :)