fanzor

src/components/Fanzorviewer.tsx

-import React, { useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import * as THREE from 'three';
 
 export const ProteinViewer: React.FC = () => {
@@ -9,9 +9,9 @@ export const ProteinViewer: React.FC = () => {
     const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); // Adjust aspect ratio if needed
     const renderer = new THREE.WebGLRenderer({ antialias: true });
 
-    renderer.setSize(200, 200);
+    renderer.setSize(100, 100); // Set a smaller size
 
-    // Append the renderer to the div container instead of body
+    
     if (viewerRef.current) {
       viewerRef.current.appendChild(renderer.domElement);
     }
@@ -20,7 +20,7 @@ export const ProteinViewer: React.FC = () => {
     light.position.set(0, 1, 2);
     scene.add(light);
 
-    camera.position.z = 5; 
+    camera.position.z = 10; 
 
     // Render loop
     const animate = () => {
@@ -41,8 +41,8 @@ export const ProteinViewer: React.FC = () => {
     <div
       ref={viewerRef}
       style={{
-        width: '400px', // Customize the width
-        height: '400px', // Customize the height
+        width: '100px',  // Smaller width
+        height: '100px', // Smaller height
         margin: '0 auto', // Center it if you want
         border: '1px solid #ddd', // Optional: border around the viewer
       }}

src/contents/description.tsx

@@ -63,6 +63,7 @@ export function Description() {
                         </div>
                         <div className="col">
                         <p>Text about CFTR <LoremMedium/></p>
+                        <img src="https://static.igem.wiki/teams/5247/fanzor/cftr.gif"></img>
                         </div>
                     </div>
                 </Subesction>

src/contents/engineering.tsx

@@ -169,6 +169,7 @@ export function Engineering() {
                      <H3 id="Nikase" text="Nikase"></H3>
                      <p><LoremShort></LoremShort></p>
                      <img src="https://static.igem.wiki/teams/5247/fanzor/movie4-ezgif-com-video-to-gif-converter.gif"></img>
+                     <img src="https://static.igem.wiki/teams/5247/fanzor/movie5-ezgif-com-video-to-gif-converter-2.gif"></img>
                   </div>
                   <div className="box" >
                      <p id="nik1">