feat: add about responsive

package.json

@@ -41,7 +41,7 @@
 		"lint:typecheck": "tsc --project . --noEmit"
 	},
 	"dependencies": {
-		"@astrojs/check": "^0.5.10",
+		"@astrojs/check": "^0.6.0",
 		"@astrojs/cloudflare": "^10.2.5",
 		"@astrojs/mdx": "^2.3.1",
 		"@astrojs/partytown": "^2.1.0",
@@ -66,17 +66,17 @@
 		"resend": "^3.2.0",
 		"swiper": "^11.1.1",
 		"three": "^0.164.1",
-		"zod": "^3.23.6"
+		"zod": "^3.23.7"
 	},
 	"devDependencies": {
-		"@astrojs/ts-plugin": "^1.6.1",
+		"@astrojs/ts-plugin": "^1.7.0",
 		"@biomejs/biome": "1.7.3",
 		"@commitlint/cli": "^19.3.0",
 		"@commitlint/config-conventional": "^19.2.2",
-		"@testing-library/react": "^15.0.6",
+		"@testing-library/react": "^15.0.7",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@types/markdown-it": "^14.1.1",
-		"@types/node": "^20.12.10",
+		"@types/node": "^20.12.11",
 		"@types/react": "^18.3.1",
 		"@types/react-dom": "^18.3.0",
 		"@types/three": "^0.164.0",

src/pages/index.astro

@@ -5,7 +5,7 @@ import Testimonials from "@components/organisms/testimonials/Testimonials.astro"
 import MyWork from "@components/organisms/myWork/MyWork.astro";
 import LatestArticles from "@components/organisms/latestArticles/LatestArticles.astro";
 
-// todo (current): responsive (about: city cards + latest articles slider)
+// todo (current): articles
 // todo: tags page
 // todo: add resume (PDF) in about?
 // todo: dynamic content
@@ -29,6 +29,7 @@ import LatestArticles from "@components/organisms/latestArticles/LatestArticles.
 // todo: multilanguage*
 // todo: improve isolation
 // todo: add thinner svg lines
+// todo: control tab visibility and remove autoloop in World Globe (check paulscanlon or create a custom hook)
 // todo: reduce XXSS module
 // todo: replace arrows and icons for a finest ones
 // todo: refer logo (original + finet)

src/ui/components/atoms/worldGlobe/WorldGlobe.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useRef } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
 import Globe, { type GlobeMethods } from "react-globe.gl";
 import * as Three from "three";
 import countries from "@data/countries.geojson.json";
@@ -10,6 +10,7 @@ import { type ReactGlobePoint, refineCities } from "./utils/refineCities";
 import horizontalArrow from "@assets/images/svg/left-arrow.svg";
 import zoomIn from "@assets/images/svg/zoom-in.svg";
 import zoomOut from "@assets/images/svg/zoom-out.svg";
+import useTabVisibility, { TabVisibility } from "@ui/hooks/useTabVisibility/useTabVisibility.ts";
 
 export interface City {
 	latitude: string;
@@ -42,7 +43,13 @@ interface HandleActionParams {
 	type: MovementType;
 }
 
-const WorldGlobe = memo(({ cities, width }: GlobeAllCitiesProps) => {
+const worldGlobeSize = {
+	width: window.innerWidth > 720 ? 680 : undefined,
+	height: 458,
+};
+
+const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitiesProps) => {
+	const tabVisibility = useTabVisibility();
 	const worldGlobeReference = useRef<GlobeMethods | undefined>(undefined);
 	const {
 		MESH_PHONG_MATERIAL_CONFIG,
@@ -69,6 +76,11 @@ const WorldGlobe = memo(({ cities, width }: GlobeAllCitiesProps) => {
 		});
 	};
 
+	useEffect(() => {
+		if (!worldGlobeReference.current) return;
+		worldGlobeReference.current.controls().autoRotate = document.visibilityState === TabVisibility.VISIBLE;
+	}, [tabVisibility]);
+
 	const handleAction = useCallback(
 		({ movementDirection, type }: HandleActionParams) => {
 			if (!worldGlobeReference.current) return;
@@ -91,7 +103,7 @@ const WorldGlobe = memo(({ cities, width }: GlobeAllCitiesProps) => {
 		<aside className="world-globe__wrapper">
 			<Globe
 				ref={worldGlobeReference}
-				height={458}
+				height={worldGlobeSize.height}
 				width={width}
 				onGlobeReady={onGlobeReady}
 				pointsMerge={POINTS_MERGE}

src/ui/components/molecules/aboutLatestArticlesSlider/about-latest-articles-slider.css

@@ -28,6 +28,9 @@
       font-size: clamp(2rem, 3rem, 3rem);
       grid-area: Title;
       letter-spacing: normal;
+      @media (max-width: 720px) {
+        padding-inline: 1rem;
+      }
     }
 
     &.--no-image-variant {
@@ -59,10 +62,16 @@
 
   .about__latest-article__item__publish-date {
     grid-area: Publish-Date;
+    @media (max-width: 720px) {
+      padding-inline: 1rem;
+    }
   }
 
   .about__latest-article__author {
     grid-area: Author;
+    @media (max-width: 720px) {
+      padding-inline: 1rem;
+    }
 
     a {
       color: var(--primary-main);
@@ -73,6 +82,9 @@
 
   .about__latest-article__excerpt {
     grid-area: Excerpt;
+    @media (max-width: 720px) {
+      padding-inline: 1rem;
+    }
   }
 
   .about__latest-article__item__featured-image {
@@ -86,5 +98,8 @@
     grid-area: Tags;
     position: relative;
     z-index: 10;
+    @media (max-width: 720px) {
+      padding-inline: 1rem;
+    }
   }
 }

src/ui/components/molecules/cityCard/city-card.css

@@ -30,6 +30,10 @@
     overflow: hidden;
     transform-origin: 50% 0;
     will-change: transform;
+
+    @media (max-width: 720px) {
+      gap: 0.5rem;
+    }
   }
 
   .city-card__item:nth-child(even) .city-card__content {
@@ -39,6 +43,15 @@
       'City-Image City-Image City-Description City-Description' min-content
       / 1fr 1fr 1fr 1fr;
     padding-inline-end: 2rem;
+    @media (max-width: 960px) {
+      grid:
+  'City-Image' auto
+  'City-Period' auto
+  'City-Name' auto
+  'City-Description' auto
+  / 1fr;
+      padding-inline-end: 0;
+    }
   }
 
   .city-card__item:nth-child(odd) .city-card__content {
@@ -48,5 +61,15 @@
       'City-Description City-Description City-Image City-Image' min-content
       / 1fr 1fr 1fr 1fr;
     padding-inline-start: 1rem;
+
+    @media (max-width: 960px) {
+      grid:
+  'City-Image' auto
+  'City-Period' auto
+  'City-Name' auto
+  'City-Description' auto
+  / 1fr;
+      padding-inline-start: 0;
+    }
   }
 }

src/ui/components/molecules/cityCard/components/cityDescription/city-description.css

@@ -2,5 +2,9 @@
   .city-card__content__description {
     grid-area: City-Description;
     padding-bottom: 2rem;
+    @media (max-width: 720px) {
+      padding-bottom: 1rem;
+      padding-inline: 1rem;
+    }
   }
 }

src/ui/components/molecules/cityCard/components/cityName/city-name.css

@@ -2,5 +2,10 @@
   .city-card__content__name {
     grid-area: City-Name;
     margin-top: -1rem;
+
+    @media (max-width: 720px) {
+      margin-top: 0;
+      padding-inline: 1rem;
+    }
   }
 }

src/ui/components/molecules/cityCard/components/cityPeriod/city-period.css

@@ -2,5 +2,9 @@
   .city-card__content__period {
     grid-area: City-Period;
     padding-top: 1rem;
+    @media (max-width: 720px) {
+      padding-inline: 1rem;
+      padding-top: 0;
+    }
   }
 }

src/ui/components/molecules/welcome/welcome.css

@@ -7,8 +7,6 @@
             grid: 'LeftGreeting LeftGreeting LeftGreeting' auto
             'WelcomeImage WelcomeImage WelcomeImage' auto
             'RightGreeting RightGreeting RightGreeting' auto / 1fr;
-        }
-        @media (max-width: 960px) {
             margin-bottom: 3rem;
         }
     }

src/ui/hooks/useTabVisibility/index.ts

@@ -0,0 +1,2 @@
+
+export * from './useTabVisibility.ts'

src/ui/hooks/useTabVisibility/useTabVisibility.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export enum TabVisibility {
+  VISIBLE = 'visible',
+  HIDDEN = 'hidden',
+  UNDEFINED = 'undefined'
+}
+
+const useTabVisibility = (): TabVisibility => {
+  const [tabVisibility, setTabVisibility] = useState<TabVisibility>(document.visibilityState as TabVisibility);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      setTabVisibility(document.visibilityState as TabVisibility);
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+  }, []);
+
+  return tabVisibility;
+};
+
+export default useTabVisibility;