This is a submission for the WeCoded Challenge: Celebrate in Code
We WeCoded Landing Page
The goal of this landing page is to be engaging and interactive, celebrating the evolution from SheCoded to WeCoded, while promoting diversity, inclusion, and empowerment in tech.
The design bridges the past, present, and future of technology, embracing a retrofuturistic and cyberpunk aesthetic. It features pixelated visuals inspired by the official WeCoded logo, vibrant color schemes, and subtle visual effects that connect history with innovation.
Demo
Demo: We WeCoded Landing Page
Code: GitHub repo
How I Built It
Structure
The landing page is made up of key sections that tell a story and invite engagement:
- About We – Showcasing the WeCoded initiative and its evolution from SheCoded
- Community Stories – Featuring inspiring posts from the dev.to community tagged with #wecoded
- Inspiring History – Honoring iconic figures like Ada Lovelace, Grace Hopper, and the women from Hidden Figures
- Organizations That Empower – Spotlighting organizations that support diversity in tech
Tech Stack
- React + Next.js
- TailwindCSS
- ReactBits for animations
- dev.to API – to dynamically fetch real community stories using the #wecoded tag
Design Highlights
Fonts:
- Fira Code – for code aesthetics
- Press Start 2P – for a pixel-perfect retro vibe
Color Palette:
- Blue: #4531EA
- Green: #CCEA71
- Purple: #9D00E5
