rid of popups moved data

src/components/HorizontalTimeline.tsx

 import { HPMoreButton } from "./Buttons";
-
+import { data } from "./data/hptimelinedata";
 function TimeItem({tag, title, pic, author, tabid}: ItemProps){
     let cl = "t-tag " + tag;
     return(
@@ -71,18 +71,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
     )
   }
   
-  
-  
-  
-  export function AllPopus(){
-    let rows = []
-    for ( let i = 0;  i < data.length; i++ ){
-      rows.push(<Popup person={data[i].author}>
-        Hi
-      </Popup>)
-    }
-    return rows; 
-  }
+ 
   
   export function TimeHori({tab}:{tab: string}){
     let nod; 
@@ -110,51 +99,8 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
     )
   }
   
-  function Open({person}:{person: string}){
-    const openPop =  (_event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-      var popup = document.getElementById(person);
-      popup!.classList.toggle("show");
-    }
-    return openPop; 
-    }
-  
-  interface PopProps {
-    person: string, 
-    children: React.ReactNode
-    }
-    
-  
-  function Popup({person, children}: PopProps){
-    return(
-      <div id="myPopup" className="popup">
-        <span className="popuptext" id={person}>
-          <div>
-          {children}
-          </div>
-          <button onClick={Open({person})}>Close</button>
-        </span>
-        
-      </div>
-    )
-    }
+
   
-/*   
-     export function openCity({cityName}:{cityName: string}) {
-        const opencity =  (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
-        var i, tabcontent, tablinks;
-        tabcontent = document.getElementsByClassName("tabcontent");
-        for (i = 0; i < tabcontent.length; i++) {
-          (tabcontent[i] as HTMLElement).style.display = "none";
-        }
-        tablinks = document.getElementsByClassName("tablinks");
-        for (i = 0; i < tablinks.length; i++) {
-          tablinks[i].className = tablinks[i].className.replace(" active", "");
-        }
-        document.getElementById(cityName)!.style.display = "block";
-        event.currentTarget.className += " active";
-        }
-        return opencity; 
-      } */
       
       interface ItemProps {
         title: string ,
@@ -218,248 +164,4 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
         return rows; 
     }
     
-      
-      let data = [
-        {
-          title: "Team",
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag: "Tag",
-          author: "Name",
-          tabid: "",
-          text: " ", 
-          type: "meta"
-          },
-          {
-        title: "Erste Presi",
-        pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-        tag: "Tag",
-        author: "Name",
-        tabid: "",
-        text: " ", 
-        type: "meta"
-        },
-        {
-          title: "Verworfenes",
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag: "Tag",
-          author: "Name",
-          tabid: "",
-          text: " ", 
-          type: "meta"
-          },
-          {
-            title: "",
-            pic: "https://static.igem.wiki/teams/5247/photos/hp/kristian.jpeg",
-            tag: "Academia",
-            author: "Kristian",
-            tabid: "",
-            text: " "
-            },
-        {
-        title: "First Impression",
-        pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-max-portrait.jpg",
-        tag: "Patient",
-        author: "Max Beckmann",
-        tabid: "InvMax1",
-        text: " "
-        },
-        {
-          title: "Approach??" ,
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag:  "Academia",
-          author: "Prof. Dr. Christoph Weber",
-          tabid: "InvWeber",
-          text: "Text",
-          },
-          {
-            title: "Brainstorming",
-            pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-            tag: "Tag",
-            author: "Name",
-            tabid: "",
-            text: " ", 
-            type: "meta"
-            },
-            {
-              title: "",
-              pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-              tag: "Industry",
-              author: "Michaela",
-              tabid: "",
-              text: " "
-              },
-        {
-          title: "More Experts",
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag: "Tag",
-          author: "Name",
-          tabid: "",
-          text: " ", 
-          type: "meta"
-          },
-          {
-            title: "Progress",
-            pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-            tag: "Tag",
-            author: "Name",
-            tabid: "",
-            text: " ", 
-            type: "meta"
-            },
-        {
-        title: "Breathing therapy" ,
-        pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-katrin-portrait.jpg",
-        tag:  "Medical Professional",
-        author: "Katrin Westhoff",
-        tabid: "InvWesthoff",
-        text: "Text",
-        },
-        {
-          title: "" ,
-          pic: "https://static.igem.wiki/teams/5247/photos/hp/olariu-cristian.jpg",
-          tag:  "Medical Professional",
-          author: "Cristian-Gabriel Olariu",
-          tabid: "InvOlariu",
-          text: "Text",
-        },
-        {
-          title: "" ,
-          pic: "https://static.igem.wiki/teams/5247/photos/hp/mattijs.jpg",
-          tag:  "Academia",
-          author: "Mattijs Bulcaen",
-          tabid: "InvBulcaen1",
-          text: "Text",
-          },
-          {
-            title: "" ,
-            pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-            tag:  "Academia",
-            author: "Nicole Friedlein",
-            tabid: "InvFriedlein",
-            text: "Text",
-          },
-          {
-            title: "Physiotherapie live" ,
-            pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-katrin-portrait.jpg",
-            tag:  "Medical Professional",
-            author: "Katrin Westhoff",
-            tabid: "BesWesthoff",
-            text: "Text",
-            },
-        {
-          title: "" ,
-          pic: "https://static.igem.wiki/teams/5247/photos/hp/julia.jpg",
-          tag:  "Patient",
-          author: "Julia",
-          tabid: "InvJulia",
-          text: "Text",
-        },
-        {
-          title: "" ,
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag:  "Patient",
-          author: "Joshua",
-          tabid: "InvJoshua",
-          text: "Text",
-        },
-        {
-          title: "Research Group Cellular Neurophysiology" ,
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag:  "Academia",
-          author: "Prof. Dr. Erhard Wischmeyer",
-          tabid: "InvWischmeyer",
-          text: "Text",
-        },
-/*         {
-          title: "Approach??" ,
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag:  "Academia",
-          author: "Prof. Dr. Stefan Hammer",
-          tabid: "InvHammer",
-          text: "Text",
-        },   */  
-        {
-          title: "First Steps in LNP" ,
-          pic: "https://static.igem.wiki/teams/5247/photos/hp/kolonko-neu.jpg",
-          tag:  "Academia",
-          author: "Dr. Katharina Kolonko",
-          tabid: "InvKolonko",
-          text: "Text",
-        },
-        {
-          title: "",
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag: "Academia",
-          author: "Vinke",  
-          tabid: "",
-          text: " "
-          },
-          {
-            title: "Hygiene Concept",
-            pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-max-portrait.jpg",
-            tag: "Patient",
-            author: "Max Beckmann",
-            tabid: "InvMax2",
-            text: " "
-            },
-          {
-            title: "",
-            pic: "https://static.igem.wiki/teams/5247/photos/hp/berens.jpg",
-            tag: "Academia",
-            author: "Dr. Eva-Maria Berens",
-            tabid: "Berens",
-            text: ""
-            },
-            {
-              title: "",
-              pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-              tag: "Academia",
-              author: "Collabs",
-              tabid: "",
-              text: " "
-              },
-        {
-          title: "" ,
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag:  "Industry",
-          author: "RNale",
-          tabid: "InvRNale",
-          text: "Text",
-        },
-        {
-          title: "",
-          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag: "Academia",
-          author: "LiU",
-          tabid: "",
-          text: " "
-          },
-          {
-            title: "",
-            pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-            tag: "Academia",
-            author: "Corden Pharma",
-            tabid: "",
-            text: " "
-            },
-            {
-              title: "" ,
-              pic: "https://static.igem.wiki/teams/5247/photos/hp/mattijs.jpg",
-              tag:  "Academia",
-              author: "Mattijs Bulcaen",
-              tabid: "InvBulcaen2",
-              text: "Text",
-              },
-              {
-                title: "Research Group Cellular Neurophysiology" ,
-                pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-                tag:  "Academia",
-                author: "Dr. Oliver Dräger",
-                tabid: "InvWischmeyer",
-                text: "Text",
-                },
-        
-       
-        
-        
-        ]
\ No newline at end of file
+     
\ No newline at end of file

src/components/My-Timeline.tsx

@@ -22,8 +22,6 @@ interface ItemProps {
 
 
 
-/* import ImageEvent from './ImageEvent.tsx';
-import UrlButton from './UrlButton.tsx'; */
 export const TimelineItemPic  = ({ heading, text, vorname, nachname, date, tag, color, children, csstag, url }:ItemProps) => (
     <div className="timeline-item">
         <div className="timeline-item-content">

src/components/data/hptimelinedata.ts

+export const data = [
+        {
+          title: "Team",
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag: "Tag",
+          author: "Name",
+          tabid: "",
+          text: " ", 
+          type: "meta"
+          },
+          {
+        title: "Erste Presi",
+        pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+        tag: "Tag",
+        author: "Name",
+        tabid: "",
+        text: " ", 
+        type: "meta"
+        },
+        {
+          title: "Verworfenes",
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag: "Tag",
+          author: "Name",
+          tabid: "",
+          text: " ", 
+          type: "meta"
+          },
+          {
+            title: "",
+            pic: "https://static.igem.wiki/teams/5247/photos/hp/kristian.jpeg",
+            tag: "Academia",
+            author: "Kristian",
+            tabid: "",
+            text: " "
+            },
+        {
+        title: "First Impression",
+        pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-max-portrait.jpg",
+        tag: "Patient",
+        author: "Max Beckmann",
+        tabid: "InvMax1",
+        text: " "
+        },
+        {
+          title: "Approach??" ,
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag:  "Academia",
+          author: "Prof. Dr. Christoph Weber",
+          tabid: "InvWeber",
+          text: "Text",
+          },
+          {
+            title: "Brainstorming",
+            pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+            tag: "Tag",
+            author: "Name",
+            tabid: "",
+            text: " ", 
+            type: "meta"
+            },
+            {
+              title: "",
+              pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+              tag: "Industry",
+              author: "Michaela",
+              tabid: "",
+              text: " "
+              },
+        {
+          title: "More Experts",
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag: "Tag",
+          author: "Name",
+          tabid: "",
+          text: " ", 
+          type: "meta"
+          },
+          {
+            title: "Progress",
+            pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+            tag: "Tag",
+            author: "Name",
+            tabid: "",
+            text: " ", 
+            type: "meta"
+            },
+        {
+        title: "Breathing therapy" ,
+        pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-katrin-portrait.jpg",
+        tag:  "Medical Professional",
+        author: "Katrin Westhoff",
+        tabid: "InvWesthoff",
+        text: "Text",
+        },
+        {
+          title: "" ,
+          pic: "https://static.igem.wiki/teams/5247/photos/hp/olariu-cristian.jpg",
+          tag:  "Medical Professional",
+          author: "Cristian-Gabriel Olariu",
+          tabid: "InvOlariu",
+          text: "Text",
+        },
+        {
+          title: "" ,
+          pic: "https://static.igem.wiki/teams/5247/photos/hp/mattijs.jpg",
+          tag:  "Academia",
+          author: "Mattijs Bulcaen",
+          tabid: "InvBulcaen1",
+          text: "Text",
+          },
+          {
+            title: "" ,
+            pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+            tag:  "Academia",
+            author: "Nicole Friedlein",
+            tabid: "InvFriedlein",
+            text: "Text",
+          },
+          {
+            title: "Physiotherapie live" ,
+            pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-katrin-portrait.jpg",
+            tag:  "Medical Professional",
+            author: "Katrin Westhoff",
+            tabid: "BesWesthoff",
+            text: "Text",
+            },
+        {
+          title: "" ,
+          pic: "https://static.igem.wiki/teams/5247/photos/hp/julia.jpg",
+          tag:  "Patient",
+          author: "Julia",
+          tabid: "InvJulia",
+          text: "Text",
+        },
+        {
+          title: "" ,
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag:  "Patient",
+          author: "Joshua",
+          tabid: "InvJoshua",
+          text: "Text",
+        },
+        {
+          title: "Research Group Cellular Neurophysiology" ,
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag:  "Academia",
+          author: "Prof. Dr. Erhard Wischmeyer",
+          tabid: "InvWischmeyer",
+          text: "Text",
+        },
+/*         {
+          title: "Approach??" ,
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag:  "Academia",
+          author: "Prof. Dr. Stefan Hammer",
+          tabid: "InvHammer",
+          text: "Text",
+        },   */  
+        {
+          title: "First Steps in LNP" ,
+          pic: "https://static.igem.wiki/teams/5247/photos/hp/kolonko-neu.jpg",
+          tag:  "Academia",
+          author: "Dr. Katharina Kolonko",
+          tabid: "InvKolonko",
+          text: "Text",
+        },
+        {
+          title: "",
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag: "Academia",
+          author: "Vinke",  
+          tabid: "",
+          text: " "
+          },
+          {
+            title: "Hygiene Concept",
+            pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-max-portrait.jpg",
+            tag: "Patient",
+            author: "Max Beckmann",
+            tabid: "InvMax2",
+            text: " "
+            },
+          {
+            title: "",
+            pic: "https://static.igem.wiki/teams/5247/photos/hp/berens.jpg",
+            tag: "Academia",
+            author: "Dr. Eva-Maria Berens",
+            tabid: "Berens",
+            text: ""
+            },
+            {
+              title: "",
+              pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+              tag: "Academia",
+              author: "Collabs",
+              tabid: "",
+              text: " "
+              },
+        {
+          title: "" ,
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag:  "Industry",
+          author: "RNale",
+          tabid: "InvRNale",
+          text: "Text",
+        },
+        {
+          title: "",
+          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+          tag: "Academia",
+          author: "LiU",
+          tabid: "",
+          text: " "
+          },
+          {
+            title: "",
+            pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+            tag: "Academia",
+            author: "Corden Pharma",
+            tabid: "",
+            text: " "
+            },
+            {
+              title: "" ,
+              pic: "https://static.igem.wiki/teams/5247/photos/hp/mattijs.jpg",
+              tag:  "Academia",
+              author: "Mattijs Bulcaen",
+              tabid: "InvBulcaen2",
+              text: "Text",
+              },
+              {
+                title: "Research Group Cellular Neurophysiology" ,
+                pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+                tag:  "Academia",
+                author: "Dr. Oliver Dräger",
+                tabid: "InvWischmeyer",
+                text: "Text",
+                },
+        
+       
+        
+        
+        ]
\ No newline at end of file

src/components/headings.tsx

 import { stringToSlug } from "../utils";
 
-export function Hhopp({text}:{text: string}){
+export function Hhopp({text, id}:{text: string, id?: string}){
     const arr = []; 
+    var idtext: string; 
+    if (id) {
+        idtext = id; 
+    }
+    else{
+        idtext = stringToSlug(text); 
+    }
     for (let i = 0; i < text.length; i++) {
         const x = text.charAt(i); 
         arr.push(<span aria-hidden="true">{x}</span>)
     }
     return(
-        <h1 className="playful" aria-label="Wash your hands">
+        <h1 id={idtext} className="playful" aria-label="Wash your hands">
             {arr}        
         </h1>
     )
 }
 
-export function Hsmoke({text}:{text: string}){
+export function Hsmoke({text, id}:{text: string, id?: string}){
     const arr = []; 
+    var idtext: string; 
+    if (id) {
+        idtext = id; 
+    }
+    else{
+        idtext = stringToSlug(text); 
+    }
     for (let i = 0; i < text.length; i++) {
         const x = text.charAt(i); 
         arr.push(<span aria-hidden="true">{x}</span>)
     }
     return(
-        <h1 className="smoke" aria-label="Wash your hands">
+        <h1 id={idtext} className="smoke" aria-label="Wash your hands">
             {arr}        
         </h1>
     )
@@ -95,9 +109,16 @@ export function Hspoiler({children}:{children: React.ReactNode}){
     )
 }
 
-export function Hwave({text}:{text: string}){
+export function Hwave({text, id}:{text: string, id?: string}){
+    var idtext: string; 
+    if (id) {
+        idtext = id; 
+    }
+    else{
+        idtext = stringToSlug(text); 
+    }
     return(
-        <svg viewBox="0 0 100 20">
+        <svg id={idtext} viewBox="0 0 100 20">
         <defs>
             <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
             <stop offset="5%" stop-color="#850F78"/>
@@ -122,9 +143,16 @@ export function Hwave({text}:{text: string}){
     )
 }
 
-export function Hpopart({text}:{text: string}){
+export function Hpopart({text, id}:{text: string, id?: string}){
+    var idtext: string; 
+    if (id) {
+        idtext = id; 
+    }
+    else{
+        idtext = stringToSlug(text); 
+    }
 return(
-    <div className="row">
+    <div id={idtext} className="row">
         <div className="col">
     <div className="relative popart-wrapper">
         <div className="absolute popart">