Redesign home page "personality"

[joshpinto6]

👀 Overview:

Redesigned the entire homepage, navbar, and footer!

🌐 Public Deployment URL: https://hackclub-site-inky.vercel.app/

✨ New features:

• 💇 A new personality
  • rather than just colorful highlighted text cards, strikethroughs and the "sketched", "handwritten" style is representative of hack club's ethos and focus on just building cool things (that aren't necessarily perfect or polished)
  • Lots of rounded corners, chunky cards, and moving parts (interface is meant to be reminiscent of video game UIs such as Animal Crossing)
  • To me, the old site felt sorta too serious for HC's audience, with sharp corners, overwhelming amounts of detail, etc.
• ☁️ New "floating" Navbar
  • conveys the new modern, playful aesthetic
  • quick shortcut links to GitHub, Slack, and Youtube (hackclub's primary socials)
  • hamburger menu for mobile
• 🎠 Header Carousel
  • with progress indicators, caption links, and a "city population" billboard
• 🌚 Dark mode (with persistent light/dark toggle)
• 📱 Responsive on mobile
  • More compact UIs (not as much scrolling required on desktop)
    • The old site has several sections with so much detail that it became difficult to get a basic understanding of hack club's purpose. instead, I have made these things more brief and linked to more information about them.
• 🔝 Scroll to Top FAB
• 🍡 Kawaii Logo Flag: (?uwu)
• 🍱 Update Program Cards on homepage
  • Removed some older programs (like the trail) and added new ones to make the section more accurately and clearly reflect HackClub's recent and current offerings (highway, scrapyard, shipwre cked, juice, and highseas) while still reducing the total page area dedicated to these with a responsive, faux-masonry grid.

✏️ Rubric:

• Builds on Verrcel (live deployment url above)
• Merge-able (no conflicts)
• Follows general code formatting/conventions and uses existing design systems
• Every feature works on mobile
• Made significant updates/overhauls, not only tiny tweaks!

💭 Reflection:

• This week I found myself with extremely limited time, yet I couldn't pass up this challenge to recreate and re-imagine the home page of one of my favorite organizations...
• There are still things I would (and will if able to) change about my design to increase consistency across the board, but I'm overall quite pleased with the new "vibe" I think I've managed to instill.
• A lot of thought went into how a UI targeted at highschool students should look, and I think I did a pretty good job considering my time constraints.
• Ethical Disclosure: Since it was explicitly allowed, I used an LLM to get through a lot of the more complicated CSS stuff I wasn't able to invest time doing myself in the time I was given.

📸 Preview Images:

Light Mode:

Dark Mode:

Before	After
* This section is so long I couldn't screenshot it 😱
	* look at those input boxes! 🤩

📺 Demo Videos:

2025-05-26.17-57-25.mp4

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 5, 2025 1:10am

[vercel]

@joshpinto6 is attempting to deploy a commit to the Hack Club Team on Vercel.

A member of the Team first needs to authorize it.

[zachlatta]

Overall, I really like this submission! I love how high effort it is, and how you really re-imagined what the aesthetic for the homepage could be. This definitely qualifies for the $50 USD.

I am not sure about merging it, as I feel a little confused about what Hack Club is from going to the page. But I will ponder that.

Nice job!

[sampoder]

Wow! I love this section. It's very bubbly.

[joshpinto6]

Thank you so much for the compliment!
edit: didn't see the announcement, nevermind my previous question