Ten Skills = Ten Heads: The Story Behind My Weekend Web Project

Most people know Ravana through his role in the Indian Mythology Ramayana. When his name comes up, the conversation often focuses on his actions and his eventual downfall.

I wanted to explore another side of his story: his association with knowledge, learning, and scholarship.

That idea became Ravana: The Ten Heads of Mastery, an interactive website I built to present this perspective through a visual experience.

Ravana is a fascinating figure in Indian epic traditions. His character brings together power, ambition, knowledge, and the consequences of his choices. His association with learning makes him an interesting subject to explore beyond the familiar narrative.

As someone interested in technology and building things on the web, I wanted to create something that would encourage people to pause and look at this aspect of his legacy.

Instead of building another article-based website, I decided to use his ten heads as the foundation for an interactive experience.

The website starts with a single head of Ravana in the center of the screen. As visitors scroll, the other nine heads appear one by one, alternating between the right and left sides.

Each head introduces a topic and its explanation. The experience gradually builds towards a complete composition of all ten heads.

I wanted scrolling to feel like discovering something new rather than simply moving down a webpage.

The website has two modes.

Mythology mode explores ten knowledge domains inspired by the Four Vedas and Six Vedangas. These include the Rigveda, Yajurveda, Samaveda, Atharvaveda, Shiksha, Kalpa, Vyakarana, Nirukta, Chandas, and Jyotisha.

The mapping of these ten disciplines to Ravana’s individual heads is my educational interpretation for the website, not a claim that this exact arrangement is established in scripture.

Tech mode takes the same visual concept into the world of software engineering. Its ten skills include technical excellence, data structures and algorithms, system design, strategic thinking, communication, collaboration, creativity, adaptability, execution, and emotional intelligence.

The two modes explore different subjects while sharing the same interactive experience.

I used ChatGPT to brainstorm the concept, refine the requirements, and turn the idea into a detailed master prompt for Antigravity.

The prompt covered the visual direction, the scroll-driven animation, the ten skill representations, the Mythology/Tech toggle, and the expected behavior when switching between modes.

I also provided a reference illustration of Ravana and a specific color palette: red, orange, golden amber, and royal blue.

One of the interesting implementation challenges was designing the animation around ten individual heads. The original illustration contained all ten heads in a single image, while the interaction required them to appear independently. That meant the artwork and its handling needed careful attention.

The first implementation gave me a working visual direction. I then reviewed the output and refined the requirements, particularly around the content hierarchy and how the website communicates its purpose.

This process reminded me that generating a working interface is only part of building a good product. The interaction, presentation, and accuracy of the content need their own attention.

The goal is simple: encourage people to explore Ravana’s association with knowledge and scholarship alongside the more familiar parts of his story.

The Tech mode adds a personal connection to my world as a software engineer. It presents mastery as something that involves more than programming. Problem-solving, system design, communication, and learning all matter in an engineering career.

I’m building this as a small independent web project and deployed it on Vercel. Click here to experience it.

For me, this project was an opportunity to combine mythology, interactive design, and software development into a single experience.

The idea behind it is simple: look beyond the familiar story and explore another perspective.

I hope you found it helpful and informative. If you have any questions or feedback, feel free to leave a comment below. Your support and engagement mean a lot to me.