added all components and assembeled an okayish looking website

src/components/hobbies/Hobbies.tsx

@@ -0,0 +1,23 @@
+import {AllHobbies} from "../../static/data/Hobbies";
+import InfoCard from "../info-card/InfoCard";
+import React from "react";
+
+export default function Hobbies () {
+    return (
+        <div className={"child"} style={{minHeight: "100vh"}}>
+            <div style={{
+                display: "flex",
+                justifyContent: "center",
+                flexDirection: "column",
+                width: "96vw",
+                minHeight: "100vh",
+                alignContent: "center",
+                alignItems: "center"
+            }}>
+                <h1>Other Hobbies</h1>
+                {AllHobbies.map((hobby) => <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
+                                                     info={hobby}/>)}
+            </div>
+        </div>
+    )
+}