feat: major changes in theme

package.json

@@ -34,24 +34,24 @@
 		"format:all:changed": "yarn format --changed",
 		"lint": "biome lint",
 		"lint:ts": "biome lint .",
-		"lint:ts:fix": "yarn lint:ts --apply",
-		"lint:ts:changed": "yarn lint:ts --apply --changed",
+		"lint:ts:fix": "yarn lint:ts --write",
+		"lint:ts:changed": "yarn lint:ts --write --changed",
 		"lint:styles": "stylelint --fix \"src/**/*.css\" --config ./.stylelintrc.cjs --max-warnings=0",
 		"lint:styles:fix": "yarn lint:styles --fix",
 		"lint:typecheck": "tsc --project . --noEmit"
 	},
 	"dependencies": {
 		"@astrojs/check": "^0.7.0",
-		"@astrojs/cloudflare": "^10.2.6",
-		"@astrojs/mdx": "^3.0.1",
+		"@astrojs/cloudflare": "^10.3.0",
+		"@astrojs/mdx": "^3.1.0",
 		"@astrojs/partytown": "^2.1.0",
-		"@astrojs/react": "^3.4.0",
+		"@astrojs/react": "^3.5.0",
 		"@astrojs/rss": "^4.0.6",
 		"@astrojs/sitemap": "^3.1.5",
 		"@fontsource-variable/nunito-sans": "^5.0.14",
 		"@fontsource/baskervville": "^5.0.20",
-		"@hookform/resolvers": "^3.4.2",
-		"astro": "^4.9.2",
+		"@hookform/resolvers": "^3.6.0",
+		"astro": "^4.10.0",
 		"clsx": "^2.1.1",
 		"firebase": "^10.12.2",
 		"firebase-admin": "^12.1.1",
@@ -79,7 +79,7 @@
 		"@testing-library/react-hooks": "^8.0.1",
 		"@types/add": "^2.0.3",
 		"@types/markdown-it": "^14.1.1",
-		"@types/node": "^20.14.1",
+		"@types/node": "^20.14.2",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@types/three": "^0.165.0",

src/consts.ts

@@ -35,7 +35,7 @@ export const WORLD_GLOBE_CONFIG: WorldGlobeConfig = {
 	POINTS_MERGE: true,
 	ANIMATE_IN: true,
 	SHOW_ATMOSPHERE: false,
-	BACKGROUND_COLOR: "#fff",
+	BACKGROUND_COLOR: "#FFFFFF00",
 	HEXAGON_POLYGON_COLOR: "#d4a259",
 	MESH_PHONG_MATERIAL_CONFIG: {
 		TRANSPARENT: true,

src/pages/articles/_articles.css

@@ -1,6 +1,9 @@
 @layer articles {
     .articles__wrapper {
         background-color: var(--neutral-light-4);
+        [data-theme="dark"] & {
+            background-color: var(--background-main);
+        }
     }
 
     .articles__title {

src/pages/index.astro

@@ -5,7 +5,8 @@ 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: cookies and acceptance (css, text, funcionality (localstorage...etc) and privacy policy and terms)
+// todo: cookies and acceptance (text, funcionality (localstorage, track/do not track...etc), +and privacy policy and terms)
+// todo: test dark mode in all pages (add a shared isDarkMode and test clickability of all scripts)
 // todo: add thinner svg lines
 // todo: tags page
 // todo: add resume (PDF) in about?
@@ -55,6 +56,7 @@ import LatestArticles from "@components/organisms/latestArticles/LatestArticles.
 // todo: fer que el globe es mogui segons l'scroll actual
 // todo: check namings
 // todo: add comments section
+// todo: content bar https://x.com/anatudor/status/1798615928420344018?t=m-9Hn_qO58wltQejaEMHNg&s=19
 // todo: svg scroll offset driven animation in background
 // todo: remove ReactScripts and use event listeners in files
 // todo: https://codepen.io/jh3y/pen/GReZEwK

src/ui/components/atoms/logo/Logo.astro

@@ -3,6 +3,6 @@ import logo from "@assets/images/svg/logo.svg?raw";
 import "./logo.css";
 ---
 
-<a class="site__logo clickable flex" href="/">
-  <Fragment set:html={logo}/>
+<a class="site__logo flex" href="/">
+  <Fragment set:html={logo} />
 </a>

src/ui/components/atoms/logo/logo.css

@@ -8,16 +8,21 @@
         inset: 1.25rem 0 1rem 0;
         margin: 0 auto;
         position: absolute;
-        transition: top 0.3s linear 1.75s,
+        transition: top 0.3s 0.95s, linear 1.75s,
         scale 0.2s linear 0.3s,
         transform 0.2s ease-out;
         width: fit-content;
         z-index: 20;
 
         svg {
+            fill: var(--neutral-main);
             transition: top 0.3s ease-out 1.75s,
             scale 0.2s linear;
 
+            &.--has-intersected{
+                fill: var(--white);
+         }
+
             @media (max-width: 525px) {
                 width: 75%;
             }
@@ -26,7 +31,13 @@
         :not(.--is-menu-open) svg {
             scale: 0.85;
         }
-
+        &.--is-menu-open {
+            transform: translateY(2rem);
+            transition-delay: 0.85s;
+            svg > g > g:nth-child(1){
+                fill:var(--white);
+            }
+        }
         @media (max-width: 525px) {
             inset: auto 0;
         }

src/ui/components/atoms/themeToggle/utils/themeSetter/themeSetter.ts

@@ -4,18 +4,27 @@ export enum ThemeType {
 	DARK = "dark",
 	LIGHT = "light",
 }
+
+const SELECTORS = {
+	THEME_INPUT: '.theme-toggle input[type="checkbox"]',
+	TOGGLE: ".theme-toggle",
+};
+
 const PREFERS_DARK_SCHEME = window.matchMedia("(prefers-color-scheme: dark)");
 
-export const getInitialTheme = (): ThemeType => {
-	const cachedTheme = localStorage.getItem(THEME_STORAGE_KEY) as ThemeType | null;
+export const getCurrentTheme = () => localStorage.getItem(THEME_STORAGE_KEY) as ThemeType | null;
+
+const getInitialTheme = (): ThemeType => {
+	const cachedTheme = getCurrentTheme();
 	const prefersDarkScheme = PREFERS_DARK_SCHEME.matches;
 
 	return cachedTheme ?? (prefersDarkScheme ? ThemeType.DARK : ThemeType.LIGHT);
 };
 
 export const initializeThemeSetter = () => {
-	const THEME_TOGGLE_INPUT = document.querySelector<HTMLInputElement>('.theme-toggle input[type="checkbox"]');
-	const THEME_TOGGLE = document.querySelector<HTMLInputElement>(".theme-toggle");
+	const { THEME_INPUT, TOGGLE } = SELECTORS;
+	const THEME_TOGGLE_INPUT = document.querySelector<HTMLInputElement>(THEME_INPUT);
+	const THEME_TOGGLE = document.querySelector<HTMLInputElement>(TOGGLE);
 
 	const initialTheme = getInitialTheme();
 
@@ -46,12 +55,15 @@ export const initializeThemeSetter = () => {
 	window.addEventListener("storage", (event) => {
 		if (event.key === THEME_STORAGE_KEY && event.newValue) {
 			const newTheme = event.newValue as ThemeType;
-			if (newTheme !== initialTheme) applyTheme(newTheme);
+			const currentTheme = getCurrentTheme();
+			if (newTheme !== currentTheme) applyTheme(newTheme);
 		}
 	});
 
 	PREFERS_DARK_SCHEME.addEventListener("change", (event) => {
 		const newTheme = event.matches ? ThemeType.DARK : ThemeType.LIGHT;
-		applyTheme(newTheme);
+		const currentTheme = getCurrentTheme();
+		console.log(newTheme, currentTheme);
+		if (newTheme !== currentTheme) applyTheme(newTheme);
 	});
 };

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

@@ -5,15 +5,15 @@ import * as Three from "three";
 import countries from "@data/countries.geojson.json";
 import "./world-globe.css";
 import { calculateCenter } from "@components/atoms/worldGlobe/utils/calculateCenter";
-import { THEME_STORAGE_KEY, WORLD_GLOBE_CONFIG } from "src/consts.ts";
+import { WORLD_GLOBE_CONFIG } from "src/consts.ts";
 import { renderPin } from "@components/atoms/worldGlobe/utils/renderPin";
 import type { ReactGlobePoint } from "./utils/refineCities";
 import { 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";
-import { ThemeType } from "@components/atoms/themeToggle/utils/themeSetter";
+import { getCurrentTheme, ThemeType } from "@components/atoms/themeToggle/utils/themeSetter";
 
 export interface City {
 	latitude: string;
@@ -50,21 +50,21 @@ const worldGlobeSize = {
 	width: window.innerWidth > 720 ? 680 : undefined,
 	height: 458,
 };
+const {
+	MESH_PHONG_MATERIAL_CONFIG,
+	HEXAGON_POLYGON_COLOR,
+	BACKGROUND_COLOR,
+	SHOW_ATMOSPHERE,
+	ANIMATE_IN,
+	POINTS_MERGE,
+	ANIMATION_DURATION,
+	MOVEMENT_OFFSET,
+	ZOOM_OFFSET,
+} = WORLD_GLOBE_CONFIG;
 
 const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitiesProps) => {
 	const tabVisibility = useTabVisibility();
 	const worldGlobeReference = useRef<GlobeMethods | undefined>(undefined);
-	const {
-		MESH_PHONG_MATERIAL_CONFIG,
-		HEXAGON_POLYGON_COLOR,
-		BACKGROUND_COLOR,
-		SHOW_ATMOSPHERE,
-		ANIMATE_IN,
-		POINTS_MERGE,
-		ANIMATION_DURATION,
-		MOVEMENT_OFFSET,
-		ZOOM_OFFSET,
-	} = WORLD_GLOBE_CONFIG;
 
 	const onGlobeReady = () => {
 		if (!worldGlobeReference.current || !cities) return;
@@ -79,8 +79,6 @@ const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitie
 		});
 	};
 
-	const isDarkMode = () => localStorage.getItem(THEME_STORAGE_KEY) === ThemeType.DARK;
-
 	useEffect(() => {
 		if (!worldGlobeReference.current) return;
 		worldGlobeReference.current.controls().autoRotate = document.visibilityState === TabVisibility.VISIBLE;
@@ -114,7 +112,7 @@ const WorldGlobe = memo(({ cities, width = worldGlobeSize.width }: GlobeAllCitie
 				pointsMerge={POINTS_MERGE}
 				animateIn={ANIMATE_IN}
 				showAtmosphere={SHOW_ATMOSPHERE}
-				backgroundColor={isDarkMode() ? "#1E2021FF" : BACKGROUND_COLOR}
+				backgroundColor={BACKGROUND_COLOR}
 				hexPolygonsData={countries.features}
 				hexPolygonColor={() => HEXAGON_POLYGON_COLOR}
 				globeMaterial={

src/ui/components/molecules/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx

@@ -4,7 +4,7 @@ import { createExcerpt } from "@shared/utils/createExcerpt";
 import { slugify } from "@shared/utils/slugify";
 import MarkdownIt from "markdown-it";
 import { DEFAULT_DATE_FORMAT } from "src/consts.ts";
-import { A11y, Keyboard, Navigation, Virtual } from "swiper/modules";
+import { A11y, Keyboard, Navigation, Autoplay, Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import type { SwiperOptions } from "swiper/types";
 import "./about-latest-articles-slider.css";
@@ -20,11 +20,11 @@ enum ArticleType {
 }
 
 const SLIDER_CONFIG: SwiperOptions = {
-	modules: [Navigation, Keyboard, Virtual, A11y],
+	modules: [Navigation, Keyboard, Virtual, Autoplay, A11y],
 	loop: true,
 	slidesPerView: 2,
 	autoplay: {
-		delay: 3000,
+		delay: 10000,
 		pauseOnMouseEnter: true,
 	},
 	pagination: {

src/ui/components/molecules/cookieConsent/CookieConsent.tsx

@@ -1,21 +1,21 @@
-import "vanilla-cookieconsent/dist/cookieconsent.css";
-import { useEffect } from 'react';
-import { reset, showPreferences, run } from "vanilla-cookieconsent";
-import { Cookie } from '@assets/images/svg-components/cookie';
-import { config } from './utils/config.ts';
-import './cookie-consent.css'
-
-const CookieConsent = () => {
-
-  useEffect(() => {
-    run(config);
-
-    return () => reset()
-  }, [])
-
-  return <button type="button" className="cookies_consent_button flex justify-center clickable" onClick={showPreferences}>
-    <Cookie classNames={"cookie_consent_icon"} />
-  </button>
-}
-
-export default CookieConsent
+import { useEffect } from "react";
+import { reset, showPreferences, run } from "vanilla-cookieconsent";
+import { Cookie } from "@assets/images/svg-components/cookie";
+import { config } from "./utils/config.ts";
+import "./cookie-consent.css";
+
+const CookieConsent = () => {
+	useEffect(() => {
+		run(config);
+
+		return () => reset();
+	}, []);
+
+	return (
+		<button type="button" className="cookies_consent_button flex justify-center clickable" onClick={showPreferences}>
+			<Cookie classNames={"cookie_consent_icon"} />
+		</button>
+	);
+};
+
+export default CookieConsent;

src/ui/components/molecules/cookieConsent/cookie-consent.css

@@ -8,11 +8,14 @@
         width: fit-content;
         z-index: 100;
 
-        .cookie_consent_icon {
-            fill: var(--primary-dark-3);
-            height:3rem;
-            padding: .5rem;
-            width:3rem;
+        @media (max-width: 575px) {
+            inset: auto 0 1rem 1rem;
         }
     }
+    .cookie_consent_icon {
+        fill: var(--primary-dark-3);
+        height: 3rem;
+        padding: .5rem;
+        width:3rem;
+    }
 }

src/ui/components/molecules/latestArticles/LatestArticlesSlider.tsx

@@ -3,7 +3,7 @@ import { createExcerpt } from "@shared/utils/createExcerpt";
 import { slugify } from "@shared/utils/slugify";
 import MarkdownIt from "markdown-it";
 import { DEFAULT_DATE_FORMAT } from "src/consts.ts";
-import { A11y, Keyboard, Navigation, Virtual } from "swiper/modules";
+import { A11y, Keyboard, Navigation, Virtual, Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import type { SwiperOptions } from "swiper/types";
 import "./latest-articles-slider.css";
@@ -20,11 +20,11 @@ enum ArticleType {
 }
 
 const SLIDER_CONFIG: SwiperOptions = {
-	modules: [Navigation, Keyboard, Virtual, A11y],
+	modules: [Navigation, Keyboard, Virtual, Autoplay, A11y],
 	loop: true,
 	slidesPerView: 4,
 	autoplay: {
-		delay: 3000,
+		delay: 10000,
 		pauseOnMouseEnter: true,
 	},
 	pagination: {