Overview: This project was a collaborative effort with a scientist specializing in Catalysis and Chemical Biology. The goal was to create an engaging and informative online presence for his research. The website features a dynamic landing page with 3D animations of a DNA model, providing an immersive introduction to the world of molecular biology.

Technologies:

• Three.js & React-three-fiber: Used to create and render the 3D DNA model on the website's landing page, offering a visually stunning introduction to visitors.
• React: The website is built using React, ensuring a responsive and user-friendly interface.
• GSAP (GreenSock Animation Platform): Implemented for additional webpage animations, enhancing the overall interactivity and visual appeal.
• Content Management System (CMS): A custom CMS was developed to allow the scientist to update and manage website content easily.

Features:

• Interactive 3D DNA Animation: The centerpiece of the website is a rotating DNA model with a moving camera, showcasing the beauty and complexity of molecular structures in biology.
• Customizable Content: The admin page allows the scientist to update and manage website content, ensuring the site remains current and relevant to his research.
• Engaging UI/UX: Combining GSAP animations with a clean and modern design, the website offers an engaging user experience, making scientific information accessible and appealing.

Challenges & Solutions:

• Creating a realistic and engaging 3D DNA model was challenging, requiring both artistic and technical skills. Using Three.js and Blender, a detailed and animated model was developed, which became a key feature of the site.
• Ensuring the website remains easily updatable by someone without technical expertise was crucial. This was achieved by integrating a user-friendly CMS for content management.
• Balancing performance and high-quality animations was essential, particularly for the 3D DNA model. Optimizing rendering processes and using GSAP for efficient animations ensured the website remained fast and responsive.

Project Significance: This project highlights my ability to combine cutting-edge web technologies with creative design to produce an educational and interactive experience. It demonstrates my proficiency in creating complex animations and user interfaces, while also catering to the specific needs of a scientific professional.