diff --git a/src/components/FadeIn.tsx b/src/components/FadeIn.tsx
index 985df75e0439097f21d55c75968f5483300c8573..cf498afe03f0d0fe35d0805ddca9a92f25e96f3d 100644
--- a/src/components/FadeIn.tsx
+++ b/src/components/FadeIn.tsx
@@ -6,8 +6,6 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
- {/* debug */}
- entries.forEach(entry => console.log(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
@@ -46,7 +44,7 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
</img>
</div>
{/* Spacing Block */}
- <div className='col' style={{ 'height': '90vh' }}></div>
+ <div className='col' style={{ 'height': '95vh' }}></div>
</>
);
}
\ No newline at end of file
diff --git a/src/components/Problems.tsx b/src/components/Problems.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cdd79468bb34c7823dea2aa66730476c1060ef2e
--- /dev/null
+++ b/src/components/Problems.tsx
@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState } from "react";
+
+export function Problems(){
+ const [isVisible, setVisible] = useState(false);
+ const domRef = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible(entry.isIntersecting));
+ });
+ observer.observe(domRef.current!);
+ }, []);
+
+ const [isVisible2, setVisible2] = useState(false);
+ const domRef2 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible2(entry.isIntersecting));
+ });
+ observer.observe(domRef2.current!);
+ }, []);
+
+ const [isVisible3, setVisible3] = useState(false);
+ const domRef3 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible3(entry.isIntersecting));
+ });
+ observer.observe(domRef3.current!);
+ }, []);
+
+ const [isVisible4, setVisible4] = useState(false);
+ const domRef4 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible4(entry.isIntersecting));
+ });
+ observer.observe(domRef4.current!);
+ }, []);
+
+
+ const [isVisible5, setVisible5] = useState(false);
+ const domRef5 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible5(entry.isIntersecting));
+ });
+ observer.observe(domRef5.current!);
+ }, []);
+
+ return (
+ <>
+ {/* One */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible ? '1' : '0'}`,
+ 'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
+ ref={domRef}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-1.webp">
+ </img>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ </div>
+ {/* Two */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible2 ? '1' : '0'}`,
+ 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
+ ref={domRef2}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
+ </img>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ </div>
+ {/* Three */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible3 ? '1' : '0'}`,
+ 'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
+ ref={domRef3}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
+ </img>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ </div>
+ {/* Four */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible4 ? '1' : '0'}`,
+ 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
+ ref={domRef4}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
+ </img>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ </div>
+ {/* Five */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible5 ? '1' : '0'}`,
+ 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
+ ref={domRef5}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
+ </img>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ </div>
+
+ </>
+ );
+}
\ No newline at end of file
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index e0fd2a0df27986b8ec9b21d06999476c205fed90..9794192c538e64b9435245038a8bf7a242288b52 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,5 +1,6 @@
import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
+import { Problems } from "../components/Problems";
export function Home() {
return (
@@ -10,6 +11,8 @@ export function Home() {
<div className='col' style={{ 'height': '70vh' }}></div>
<Breathe></Breathe>
+
+ <Problems></Problems>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-1.webp" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-2.webp" bg=''></FadeIn>