Marie Curie: The Radiant Pioneer

An immersive and interactive web experience that brings Marie Curie's life and scientific discoveries to life through stunning 3D visualizations,and modern design, making her legacy inspiring for all.

Comment

Project Story

Inspiration

My journey to create "Marie Curie: The Radiant Pioneer" began quite unexpectedly while I was preparing for the IELTS exam. I stumbled upon a reading passage about Marie Curie's life and groundbreaking work. As a young girl, reading about her perseverance, her relentless pursuit of knowledge against immense societal and scientific odds, and her unparalleled achievements, resonated deeply with me. It wasn't just a historical account; it was a powerful narrative of a woman who defied expectations and illuminated the world, both literally and figuratively. This passage sparked a desire to create something that could share her incredible story in a way that was as inspiring and engaging as her life itself. I wanted to build a digital tribute that would make her legacy accessible and captivating for a new generation, especially for other young girls interested in STEM.

What I Learned

Building this project was an immense learning experience, pushing my boundaries across various domains:

  • Advanced Next.js & React: I deepened my understanding of the App Router, Server Components (though much of the interactivity here is client-side), and efficient data fetching patterns.
  • 3D Web Development with React Three Fiber: This was a significant leap. I learned how to integrate complex 3D scenes into a React application, manage lighting, materials, and create custom geometries and animations. Understanding the Three.js ecosystem and its integration with React was a key takeaway.
  • Sophisticated UI/UX Design: I focused heavily on creating a visually appealing and intuitive user experience. This involved mastering Tailwind CSS for responsive and elegant styling, implementing Framer Motion for fluid animations, and refining visual hierarchy and color theory to evoke a sense of scientific wonder.
  • Performance Optimization: Working with 3D elements and complex animations presented challenges in maintaining smooth performance. I learned about optimizing rendering, lazy loading, and using CSS transforms for efficient animations.
  • Code Structure & Reusability: The process of refactoring components, especially the navigation bar, into reusable modules taught me invaluable lessons in maintaining a clean, scalable, and maintainable codebase.

How I Built My Project

I approached this project iteratively, starting with the core content and progressively adding layers of interactivity and visual polish.

  1. Initial Structure: I began by setting up the Next.js App Router and defining the main pages: Home, Biography, Discoveries, Legacy, and Quiz.
  2. Content Integration: I populated each page with the biographical details, scientific facts, and legacy information about Marie Curie.
  3. First Pass Design: I applied initial styling with Tailwind CSS, focusing on a dark, cosmic theme with glowing accents.
  4. Introducing 3D: This was the most exciting phase. I integrated React Three Fiber to create the interactive 3D elements on the Home and Discoveries pages, such as the glowing orb, floating particles, and atomic models.
  5. Adding Interactivity: Framer Motion was then used to add smooth scroll animations, element entrance animations, and subtle hover effects to enhance the user experience. The interactive timeline and quiz logic were also implemented.
  6. Refinement & Iteration (with v0): This is where v0 played a crucial role. I continuously refined the design based on feedback, addressing issues like the initial "gross" navbar and buttons, inconsistent spacing, and overly bright elements. v0's ability to quickly iterate on code and provide visual previews was instrumental in transforming the design into the elegant experience it is now. For instance, the challenge of having two navigation bars was directly addressed by creating a single, reusable SiteNavbar component.

Challenges I Faced

The development process wasn't without its hurdles:

  • 3D Performance & Optimization: Ensuring the 3D scenes ran smoothly across different devices without sacrificing visual quality was a constant balancing act. This involved careful management of geometry, materials, and light sources.
  • Animation Complexity: Coordinating multiple animations with Framer Motion, especially scroll-triggered effects and continuous background animations, required meticulous timing and state management.
  • Design Consistency: Maintaining a cohesive visual language across five distinct pages, each with unique interactive elements, was challenging. The initial feedback about inconsistent navigation and button styles highlighted this, leading to the creation of shared components and a more disciplined approach to design tokens.
  • Debugging 3D Libraries: The R3F: Circle is not part of the THREE namespace! error was a prime example of the specific debugging challenges that arise when integrating specialized libraries like React Three Fiber, requiring a deeper understanding of their underlying APIs.
  • Content Condensation: Striking the right balance between providing comprehensive information and keeping text concise and engaging for a web format was a continuous effort.

Despite these challenges, seeing the project evolve into a beautiful and functional tribute to Marie Curie has been incredibly rewarding.

Built with

  • Languages: TypeScript, JavaScript, HTML, CSS
  • Framework: Next.js 14 (App Router)
  • Styling: Tailwind CSS
  • 3D Graphics: React Three Fiber, Three.js, Drei
  • Animations: Framer Motion
  • UI Components: shadcn/ui
  • Icons: Lucide React
  • Typography: Google Fonts (Inter, Merriweather, Poppins)

Built With

Share this project:

Updates