diff --git a/src/components/Fanzorviewer.tsx b/src/components/Fanzorviewer.tsx index 65029ebf5b4243da82cbddff2bb740dddaa31ff5..dd58af6ca1b7303747353f995152bc424ddaf7a8 100644 --- a/src/components/Fanzorviewer.tsx +++ b/src/components/Fanzorviewer.tsx @@ -1,4 +1,4 @@ -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 }} diff --git a/src/contents/description.tsx b/src/contents/description.tsx index 3df8bbfaf8d0b76b63006d4e1d253b2db7c7c9ae..a3a6176a763b531ae36eabbfd5b45aca60be38d0 100644 --- a/src/contents/description.tsx +++ b/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> diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx index d0b2ead0b5750b297a3d3c9847c77db304d50f39..2fd73c3f2ff7a00a5ac7d7751445da4748380442 100644 --- a/src/contents/engineering.tsx +++ b/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">