180 fix coloredSection opacity, style globe on frontpage (#188)

* feat(frontend): change coloredSection opacity,  and hero pading

* feat(frontend): 🎨 create new example framer motion animated divs

* position globe in grid and resize it automatically

frontend/package.json

@@ -28,6 +28,7 @@
         "chartjs-adapter-luxon": "^1.3.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "framer-motion": "^11.0.24",
         "globe.gl": "^2.32.2",
         "gsap": "^3.12.5",
         "lucide-react": "^0.314.0",

frontend/src/app/page.tsx

@@ -8,15 +8,9 @@ const HOST_URL = process.env.HOST_URL;
 import Image from "next/image";
 import Link from "next/link";
 
-// Dynamic import because of leaflet and globe.gl ssr problem with next.js
-import dynamic from "next/dynamic";
 import SatelliteFetcher from "@/components/map/SatelliteFetcher";
 import SatelliteDataTable from "@/components/satelliteData/SatelliteDataTable";
 
-const MyCustomMap = dynamic(() => import("@/components/map/MyCustomMap"), {
-    ssr: false,
-});
-
 const GET_MOST_RECENT_IMAGE = gql(`
 query MostRecentImages {
     mostRecentImages(sort: ["publishedAt:desc"]) {
@@ -62,19 +56,19 @@ export default async function Home() {
     }
 
     return (
-        <main>
+        <>
             <div className="grid grid-cols-2">
-                <SatelliteDataTable satName="HYPSO-1" />
-                <SatelliteDataTable satName="UME (ISS)" />
-                <SatelliteDataTable satName="STARLINK-1007" />
-                <SatelliteDataTable satName="VANGUARD 1" />
-                <SatelliteDataTable satName="MULTIFUNCTION TEST SAT" />
-                <SatelliteDataTable satName="huh" />
-            </div>
-
-            <SatelliteFetcher useExampleData={true} />
+                <div className="grid grid-cols-2">
+                    <SatelliteDataTable satName="HYPSO-1" />
+                    <SatelliteDataTable satName="UME (ISS)" />
+                    <SatelliteDataTable satName="STARLINK-1007" />
+                    <SatelliteDataTable satName="VANGUARD 1" />
+                    <SatelliteDataTable satName="MULTIFUNCTION TEST SAT" />
+                    <SatelliteDataTable satName="huh" />
+                </div>
 
-            <MyCustomMap />
+                <SatelliteFetcher useExampleData={true} />
+            </div>
 
             <ColoredSection
                 id="about-us"
@@ -113,7 +107,7 @@ export default async function Home() {
                     </div>
                 </div>
             </ColoredSection>
-            <div className="flex flex-col items-center px-8 py-12 pt-8 text-center">
+            <div className="flex flex-col items-center px-8 py-24 text-center">
                 <div className="prose prose-invert">
                     <h1 className="">Projects</h1>
                     <p className="">
@@ -133,6 +127,7 @@ export default async function Home() {
                     </Link>
                 </div>
             </div>
+
             <ColoredSection className="flex flex-col items-center px-8 py-12">
                 <div className="prose prose-invert flex flex-col items-center text-center prose-img:rounded-xl">
                     <h1 className="">Most recent picture</h1>
@@ -147,6 +142,6 @@ export default async function Home() {
                     </div>
                 </div>
             </ColoredSection>
-        </main>
+        </>
     );
 }

frontend/src/components/map/MyGlobe.tsx

@@ -40,7 +40,6 @@ export default function MyGlobe({
     satelliteDatas: string; // Expects a string of TLE strings such as the example files in the datasets folder
 }) {
     const chart = React.useRef<HTMLDivElement>(null);
-    const timeLogger = React.useRef<HTMLDivElement>(null);
 
     // useEffect is used because we want to run the code only once when the component is mounted
     useEffect(() => {
@@ -54,14 +53,26 @@ export default function MyGlobe({
                 .objectLng("lng")
                 .objectAltitude("alt")
                 .objectFacesSurface(false)
-                .objectLabel("name");
+                .objectLabel("name")
+                .backgroundColor("rgba(0,0,0,0)")
+                .width(window.innerWidth / 2);
+
+            window.addEventListener("resize", (event) => {
+                let target = event.target as Window;
+                if (target.innerWidth != null && target.innerHeight != null) {
+                    myGlobe.width(target.innerWidth / 2);
+                    // myGlobe.height(event.target.innerHeight / 2);
+                }
+            });
 
             // Set initial camera distance
             setTimeout(() => myGlobe.pointOfView({ altitude: 3.5 }));
 
             // Disable OrbitControls and enable auto-rotation
             // myGlobe.controls().autoRotate = true;
-            // myGlobe.controls().enabled = false;
+            myGlobe.controls().enabled = true;
+            // Disable zooming
+            myGlobe.controls().enableZoom = false;
             // Invert rotation direction
             // myGlobe.controls().autoRotateSpeed *= -1;
 
@@ -102,9 +113,6 @@ export default function MyGlobe({
                 requestAnimationFrame(frameTicker);
 
                 time = new Date(+time + TIME_STEP);
-                if (timeLogger.current) {
-                    timeLogger.current.innerText = time.toString();
-                }
 
                 // Update satellite positions
                 const gmst = satellite.gstime(time);
@@ -128,14 +136,7 @@ export default function MyGlobe({
 
     return (
         <>
-            <div className="relative">
-                <div
-                    id="time-log"
-                    ref={timeLogger}
-                    className="absolute bottom-0 top-0 z-50 text-white text-opacity-75"
-                ></div>
-                <div id="chart" ref={chart}></div>
-            </div>
+            <div id="chart" className="" ref={chart}></div>
         </>
     );
 }

frontend/src/components/ui/coloredSection.tsx

@@ -4,9 +4,17 @@ import { cn } from "@/lib/utils";
 const ColoredSection = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("w-full bg-muted", className)} {...props} />
-));
+>(({ className, ...props }, ref) => {
+    return (
+        <>
+            <div
+                ref={ref}
+                className={cn("w-full bg-black bg-opacity-50", className)}
+                {...props}
+            />
+        </>
+    );
+});
 
 ColoredSection.displayName = "ColoredSection"; // Add display name
 

frontend/src/components/ui/scrollLinkedDiv.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { motion, useScroll } from "framer-motion";
+import { useRef } from "react";
+import React from "react";
+function ScrollLinkedDiv({
+    transformOrigin = "left",
+}: {
+    transformOrigin?: string;
+}) {
+    const ref = useRef(null);
+    const { scrollYProgress } = useScroll({
+        target: ref,
+        offset: ["end end", "start start"],
+    });
+
+    return (
+        <motion.div
+            className="h-[1px] place-self-start self-start bg-white bg-opacity-50"
+            style={{
+                scaleX: scrollYProgress,
+                transformOrigin: transformOrigin,
+            }}
+            initial={{ scaleX: 0 }}
+            ref={ref}
+        />
+    );
+}
+
+function WindowScrollLinkedDiv({ children }: { children?: React.ReactNode }) {
+    const ref = useRef(null);
+    const { scrollYProgress } = useScroll({
+        target: ref,
+        offset: ["end end", "start start"],
+    });
+    return (
+        <>
+            <motion.div
+                className="h-[1px] place-self-start self-start bg-white bg-opacity-50"
+                style={{
+                    scaleX: scrollYProgress,
+                    transformOrigin: "left",
+                }}
+                initial={{ scaleX: 0 }}
+                ref={ref}
+            />
+            {children}
+            <motion.div
+                className="h-[1px] place-self-start self-start bg-white bg-opacity-50"
+                style={{
+                    scaleX: scrollYProgress,
+                    transformOrigin: "right",
+                }}
+                initial={{ scaleX: 0 }}
+            />
+        </>
+    );
+}
+
+export { ScrollLinkedDiv, WindowScrollLinkedDiv };