Merge pull request #9 from JoaoGabriellBR/feature/optimizing-application-seo

JoaoGabriellBR · web-flow · commit 7c2f258f6124 · 2025-08-29T01:06:36.000-03:00
Feature/sitemap via code
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -11,12 +11,7 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Analytics } from "@vercel/analytics/next";
 import Script from "next/script";
 import { SITE, type Locale } from "@/config/site";
-import {
-  buildAlternates,
-  buildOgImagePath,
-  getLocalizedMeta,
-  ogLocale,
-} from "@/lib/seo";
+import { ogLocale } from "@/lib/seo";
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -29,16 +24,16 @@ type LayoutParams = { params: { locale: Locale } };
 
 export function generateMetadata({ params }: LayoutParams): Metadata {
   const { locale } = params;
-  const meta = getLocalizedMeta(locale, "home");
-  const alternates = buildAlternates(locale, "/");
-  const url = alternates.canonical;
-
   return {
     metadataBase: SITE.metadataBase,
-    title: meta.title,
-    description: meta.description,
-    keywords: meta.keywords,
-    alternates,
+    title: {
+      default: SITE.siteName,
+      template: `%s | ${SITE.siteName}`,
+    },
+    description: SITE.defaultDescription,
+    twitter: {
+      card: "summary_large_image",
+    },
     robots: { index: true, follow: true },
     icons: {
       icon: "/favicon.ico",
@@ -48,18 +43,9 @@ export function generateMetadata({ params }: LayoutParams): Metadata {
     },
     // manifest: "/site.webmanifest",
     openGraph: {
-      title: meta.title,
-      description: meta.description,
-      url,
       siteName: SITE.siteName,
       type: "website",
       locale: ogLocale[locale],
-      images: [
-        {
-          url: buildOgImagePath("home", locale),
-          alt: meta.title,
-        },
-      ],
     },
   };
 }
diff --git a/app/robots.ts b/app/robots.ts
@@ -0,0 +1,15 @@
+import type { MetadataRoute } from "next";
+import { SITE } from "@/config/site";
+
+export default function robots(): MetadataRoute.Robots {
+  const base = SITE.metadataBase.toString().replace(/\/$/, "");
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: `${base}/sitemap.xml`,
+    host: base,
+  };
+}
+
diff --git a/app/sitemap.ts b/app/sitemap.ts
@@ -0,0 +1,50 @@
+import type { MetadataRoute } from "next";
+import { SITE } from "@/config/site";
+import { projects } from "@/utils/projects";
+
+const staticPaths = [
+  "",
+  "/about",
+  "/certifications",
+  "/projects",
+  "/contact",
+] as const;
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const now = new Date();
+
+  const entries: MetadataRoute.Sitemap = [];
+
+  for (const locale of SITE.locales) {
+    // Static routes per locale
+    for (const path of staticPaths) {
+      const url = new URL(`/${locale}${path}`, SITE.metadataBase).toString();
+      const priority = path === "" ? 1 : path === "/projects" ? 0.8 : 0.7;
+      entries.push({
+        url,
+        lastModified: now,
+        changeFrequency: "weekly",
+        priority,
+      });
+    }
+
+    // Dynamic project detail pages per locale
+    for (const p of projects) {
+      const url = new URL(
+        `/${locale}/projects/${encodeURIComponent(p.name)}`,
+        SITE.metadataBase
+      ).toString();
+      entries.push({
+        url,
+        lastModified: now,
+        changeFrequency: "monthly",
+        priority: 0.6,
+      });
+    }
+  }
+
+  return entries;
+}
+
+// Revalida o sitemap diariamente (24h)
+export const revalidate = 60 * 60 * 24;
diff --git a/components/page-with-loader.tsx b/components/page-with-loader.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState, ReactNode, Suspense } from "react";
+import { useEffect, useRef, useState, ReactNode, Suspense } from "react";
 import { AnimatePresence } from "framer-motion";
 import { usePathname } from "@/i18n/navigation";
 import Preloader from "./preloader";
@@ -9,79 +9,96 @@ type PageWithLoaderProps = {
   children: ReactNode;
 };
 
+type NavigatorWithConnection = Navigator & {
+  connection?: {
+    saveData?: boolean;
+  };
+};
+
+function prefersReducedMotion(): boolean {
+  if (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function"
+  ) {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function saveDataEnabled(): boolean {
+  if (typeof navigator === "undefined") return false;
+  const nav = navigator as NavigatorWithConnection;
+  return Boolean(nav.connection?.saveData);
+}
+
 export default function PageWithLoader({
   text,
   children,
 }: PageWithLoaderProps) {
   const pathname = usePathname();
-  const [isPreloaderVisible, setIsPreloaderVisible] = useState(true);
-  const [shouldShowGreetings, setShouldShowGreetings] = useState(false);
-  const [isContentReady, setIsContentReady] = useState(false);
+  // Inicialmente oculto para não bloquear o carregamento
+  const [isPreloaderVisible, setIsPreloaderVisible] = useState<boolean>(false);
+  const [shouldShowGreetings, setShouldShowGreetings] =
+    useState<boolean>(false);
+  const isInitialMount = useRef<boolean>(true);
 
-  // Gerencia a lógica de saudações na página inicial
+  // Exibe saudações ocasionais apenas na home em navegação "dura" e respeita preferências
   useEffect(() => {
     const isHome = pathname === "/";
-    const navEntries = performance.getEntriesByType(
-      "navigation"
-    ) as PerformanceNavigationTiming[];
+    const navEntries = performance.getEntriesByType("navigation");
     const isHardNavigation =
-      navEntries.length && navEntries[0].type === "navigate";
+      navEntries.length > 0 &&
+      (navEntries[0] as PerformanceNavigationTiming).type === "navigate";
 
     const GREETING_TIMEOUT_MINUTES = 30;
     const lastShown = sessionStorage.getItem("last-home-greeting");
     const now = Date.now();
-
     const hasExpired =
       !lastShown ||
       now - parseInt(lastShown, 10) > GREETING_TIMEOUT_MINUTES * 60 * 1000;
 
+    const prefersReduced = prefersReducedMotion();
+    const saveData = saveDataEnabled();
+
+    if (prefersReduced || saveData) {
+      setShouldShowGreetings(false);
+      setIsPreloaderVisible(false);
+      return;
+    }
+
     if (isHome && isHardNavigation && hasExpired) {
       setShouldShowGreetings(true);
+      setIsPreloaderVisible(true);
       sessionStorage.setItem("last-home-greeting", now.toString());
     }
   }, [pathname]);
 
-  // Gerencia a transição do preloader e conteúdo
+  // Preloader curto em trocas internas de rota (não no primeiro render)
   useEffect(() => {
-    // Inicia o carregamento do conteúdo imediatamente
-    const contentLoadTimeout = setTimeout(() => {
-      setIsContentReady(true);
-    }, 100); // Pequeno delay para garantir que o React tenha tempo de montar o componente
-
-    // Configura o timer para remover o preloader
-    const preloaderTimeout = setTimeout(
-      () => {
-        requestAnimationFrame(() => {
-          document.body.style.cursor = "default";
-          window.scrollTo(0, 0);
-          setIsPreloaderVisible(false);
-        });
-      },
-      shouldShowGreetings ? 2000 : 700
-    );
-
-    return () => {
-      clearTimeout(contentLoadTimeout);
-      clearTimeout(preloaderTimeout);
-    };
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    if (shouldShowGreetings) return;
+    setIsPreloaderVisible(true);
+    const t = setTimeout(() => setIsPreloaderVisible(false), 350);
+    return () => clearTimeout(t);
   }, [pathname, shouldShowGreetings]);
 
   return (
     <>
       <AnimatePresence mode="wait">
         {isPreloaderVisible && (
-          <Preloader text={text} showGreetings={shouldShowGreetings} />
+          <Preloader
+            text={text}
+            showGreetings={shouldShowGreetings}
+            onFinish={() => setIsPreloaderVisible(false)}
+          />
         )}
       </AnimatePresence>
 
-      <div
-        style={{
-          opacity: isPreloaderVisible ? 0 : 1,
-          transition: "opacity 0.3s ease-in-out",
-          visibility: isPreloaderVisible ? "hidden" : "visible",
-        }}
-      >
-        <Suspense fallback={null}>{isContentReady && children}</Suspense>
+      <div>
+        <Suspense fallback={null}>{children}</Suspense>
       </div>
     </>
   );
diff --git a/components/pages/home.tsx b/components/pages/home.tsx
@@ -103,7 +103,8 @@ function BackgroundImage() {
       height={1100}
       alt="Personal photo"
       priority
-      loading="eager"
+      fetchPriority="high"
+      sizes="100vw"
       placeholder="blur"
       blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDABQODxIPDRQSEBIXFRQdHx4dHRsdHR4dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR3/2wBDAR4SEhwYHB4cHBwcHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR3/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
       className="opacity-80 dark:opacity-70 -scale-x-100 pointer-events-none"
diff --git a/components/preloader.tsx b/components/preloader.tsx
@@ -8,6 +8,7 @@ import { opacity, preloader } from "@/utils/animations";
 type PreloaderProps = {
   text: string;
   showGreetings?: boolean;
+  onFinish?: () => void;
 };
 
 const greetings = [
@@ -39,11 +40,11 @@ const AnimatedText = memo(function AnimatedText({ text }: { text: string }) {
   );
 });
 
-function Preloader({ text, showGreetings }: PreloaderProps) {
+function Preloader({ text, showGreetings, onFinish }: PreloaderProps) {
   const [index, setIndex] = useState(0);
   const [dimension, setDimension] = useState({ width: 0, height: 0 });
 
-  // Otimiza a medição das dimensões da janela
+  // Medição responsiva da viewport para a animação
   useEffect(() => {
     const updateDimension = () => {
       requestAnimationFrame(() => {
@@ -56,36 +57,39 @@ function Preloader({ text, showGreetings }: PreloaderProps) {
 
     updateDimension();
 
-    // Adiciona listener para redimensionamento apenas se necessário
     if (showGreetings) {
       window.addEventListener("resize", updateDimension);
       return () => window.removeEventListener("resize", updateDimension);
     }
   }, [showGreetings]);
 
-  // Otimiza a animação de saudações
+  // Avança a sequência de saudações
   useEffect(() => {
     if (!showGreetings || index === greetings.length - 1) return;
-
     const timer = setTimeout(
       () => {
-        requestAnimationFrame(() => {
-          setIndex((i) => i + 1);
-        });
+        requestAnimationFrame(() => setIndex((i) => i + 1));
       },
-      index === 0 ? 1000 : 180
+      index === 0 ? 600 : 180
     );
-
     return () => clearTimeout(timer);
   }, [index, showGreetings]);
 
-  // Calcula os paths para a animação SVG
+  // Encerra após a última saudação (com pequena pausa)
+  useEffect(() => {
+    if (!showGreetings) return;
+    if (index === greetings.length - 1) {
+      const t = setTimeout(() => onFinish?.(), 600);
+      return () => clearTimeout(t);
+    }
+  }, [index, showGreetings, onFinish]);
+
+  // Paths do SVG da curva
   const initialPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${
     dimension.height
   } Q${dimension.width / 2} ${dimension.height + 300} 0 ${
     dimension.height
   }  L0 0`;
-
   const targetPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${
     dimension.height
   } Q${dimension.width / 2} ${dimension.height} 0 ${dimension.height}  L0 0`;
diff --git a/components/project-details.tsx b/components/project-details.tsx
@@ -234,6 +234,7 @@ function FullImageSection({ imageSrc }: { imageSrc: string }) {
           src={imageSrc}
           alt="Full screen mockup"
           fill
+          sizes="100vw"
           className="rounded-[3rem] h-[90%]"
           loading="lazy"
           onError={(e) => {
@@ -283,11 +284,21 @@ function DesktopMockupsSection({ images }: { images: string[] }) {
       {images.map((src, index) => (
         <div
           key={index}
-          role="img"
+          className="relative w-full min-h-screen"
           aria-label={`Desktop application mockup ${index + 1}`}
-          className="w-full min-h-screen bg-no-repeat bg-contain lg:bg-cover bg-center bg-fixed"
-          style={{ backgroundImage: `url(${src})` }}
-        />
+        >
+          <MemoizedImage
+            src={src}
+            alt={`Desktop application mockup ${index + 1}`}
+            fill
+            sizes="100vw"
+            className="object-contain lg:object-cover"
+            loading="lazy"
+            onError={(e) => {
+              e.currentTarget.src = "/images/fallback.webp";
+            }}
+          />
+        </div>
       ))}
     </section>
   );
diff --git a/components/projects.tsx b/components/projects.tsx
@@ -83,7 +83,8 @@ export default function ProjectsComponent({
               alt={project.title}
               width={600}
               height={600}
-              priority
+              loading="lazy"
+              sizes="(max-width: 768px) 60vw, (max-width: 1200px) 33vw, 20vw"
             />
           </div>
         ))}
diff --git a/config/site.ts b/config/site.ts
diff --git a/lib/seo.ts b/lib/seo.ts
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/public/sitemap.xml b/public/sitemap.xml
