Lumen

• 

  Landing Page

• 

  Space

• 

  Explorer

• 

  Water

• 

  Earth

• 

  Brain

• 

  History

Inspiration

LUMEN was inspired by a simple question: Why does learning have to feel boring when the things we're learning about are actually incredible?

Many educational resources explain concepts through long paragraphs, static diagrams, or videos that students passively watch. I wanted to create something that makes learning feel more like exploration—something visually engaging that makes you curious enough to keep going.

What I Built

LUMEN is an interactive educational experience that turns complex topics into cinematic, visual journeys. Instead of simply reading about a subject, users can explore topics such as space, Earth, the human brain, AI, oceans, and history through an immersive interface, animations, visuals, and storytelling.

The goal is to combine the accessibility of a website with the feeling of exploring something new.

How I Built It

I built LUMEN as a modern web application using React, Vite, Tailwind CSS, Framer Motion, and Lucide icons.

I focused heavily on the user experience—from the landing page and topic exploration to the individual learning experiences. Animations and transitions were used to make navigation feel natural rather than simply moving between static pages.

I also used AI-assisted development during the project to help with implementation, debugging, and iteration. I remained responsible for the project's direction, design decisions, testing, and final integration.

What I Learned

The biggest thing I learned was that building a good project isn't just about making the code work. The way users experience the project matters just as much.

I learned more about structuring a React application, creating responsive interfaces, using animations effectively, deploying a web application, managing a GitHub repository, and thinking about design as part of the product rather than something added at the end.

I also learned how quickly a project can become complicated when trying to combine functionality, visual design, animations, and performance.

Challenges

One of the biggest challenges was turning the original idea into a coherent experience instead of simply creating a collection of educational pages.

I also faced challenges with deployment and GitHub while preparing LUMEN for submission. I had to deal with build issues, repository configuration, environment variables, and making sure generated files and sensitive information were not included in the public repository.

These problems forced me to understand more about how a project works beyond just writing the code.

What's Next

LUMEN is only the beginning. I would like to expand it with more subjects, deeper interactive experiences, better educational content, quizzes and challenges, and eventually personalized learning paths.

The long-term goal is simple: make learning something people want to explore, not something they feel forced to do.

Built With

• css
• css3
• deployment
• framer
• html5
• javascript
• lucide
• motion
• react
• tailwind
• vercel
• vite