DEV Community

Cover image for Breaking the Glass Ceiling Through Code — Code Allies
Sathiyamoorthi K
Sathiyamoorthi K

Posted on

Breaking the Glass Ceiling Through Code — Code Allies

WeCoded 2026: Frontend Art 💜

This is a submission for the 2026 WeCoded Challenge: Frontend Art

## Show us your Art



For this challenge, I created Code Allies, an interactive web experience that explores the journey toward gender equity in technology.

Instead of static art, I wanted to build something interactive and symbolic, where users can engage with the story.

🔗 Live Project:

The experience includes:

  • 🕰️ An interactive timeline highlighting moments in the journey toward equity in tech
  • 🔨 A Glass Ceiling interaction where users can break symbolic barriers
  • 🌐 A generative network where visitors can add their voice to the future of tech
  • 💬 Community interaction through feedback and participation

The idea is simple: art can also be interactive code.

Inspiration

When I think about gender equity in tech, the phrase “breaking the glass ceiling” immediately comes to mind.

I wanted to represent this visually through code.

The project symbolizes:

  • the barriers that exist
  • the progress that has been made
  • and the** collective voices pushing for change**

One of my favorite parts of the project is the glass ceiling interaction, where users can repeatedly tap the glass until it finally breaks — representing the persistence needed to overcome systemic barriers.

Another key idea is the network of voices, where visitors can add a node to the visualization, symbolizing people supporting a more inclusive tech future.

As a developer, I built this project as** an ally supporting equity in technology,** using creative frontend development to tell a meaningful story.

My Code

This project was built using modern frontend tools including:

  • HTML
  • CSS
  • JavaScript
  • interactive animations
  • generative visual elements

It was developed using Lovable to rapidly prototype and build the experience.

🌐 Github repo link:

Welcome to your Lovable project

Project info

URL: https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID

How can I edit this code?

There are several ways of editing your application.

Use Lovable

Simply visit the Lovable Project and start prompting.

Changes made via Lovable will be committed automatically to this repo.

Use your preferred IDE

If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.

The only requirement is having Node.js & npm installed - install with nvm

Follow these steps:

# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev

Edit a file directly in GitHub

  • Navigate to the desired…

Top comments (0)