Agrega elementos dinamicos

MaximoJSDev · Jan 30, 2024 · 4da0702 · 4da0702
1 parent f82b002
commit 4da0702
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 27 deletions.
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -21,10 +21,14 @@ const { outline } = Astro.props;
     font-size: 20px;
     padding: 8px 30px;
     background-color: var(--primaryColor);
+    transition: opacity 0.2s;
     cursor: pointer;
   }
   .btn.outline {
     background-color: #18202e;
     border: 1px solid #006dff;
   }
+  .btn:hover {
+    opacity: 0.7;
+  }
 </style>
diff --git a/src/components/Habilidades.astro b/src/components/Habilidades.astro
@@ -114,7 +114,7 @@
     background: radial-gradient(
       circle at calc(var(--x) * 1px) calc(var(--y) * 1px),
       hsla(0, 0%, 100%, 0.1),
-      transparent 12vmin
+      transparent 20vmin
     );
     background-attachment: fixed;
     opacity: var(--active, 0);

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,11 +1,43 @@
-<nav>
+<nav id="nav">
   <ul>
-    <li><a href="/#proyectos">Proyectos</a></li>
-    <li><a href="/#habilidades">Habilidades</a></li>
-    <li><a href="/#sobre-mi">Sobre mi</a></li>
-    <li><a href="/#contacto">Contacto</a></li>
+    <li><a aria-label="proyectos" href="/#proyectos">Proyectos</a></li>
+    <li><a aria-label="habilidades" href="/#habilidades">Habilidades</a></li>
+    <li><a aria-label="sobre-mi" href="/#sobre-mi">Sobre mi</a></li>
+    <li><a aria-label="contacto" href="/#contacto">Contacto</a></li>
   </ul>
 </nav>
+<script>
+  document.addEventListener("astro:page-load", () => {
+    const sections = document.querySelectorAll("main > section");
+    const navItems = document.querySelectorAll("nav a");
+
+    const callback = (entries) => {
+      entries.forEach((entry) => {
+        console.log(entry);
+        if (entry.isIntersecting) {
+          navItems.forEach((item) => {
+            if (item.getAttribute("aria-label") == entry.target.id) {
+              item.classList.add("link-active");
+            } else {
+              item.classList.remove("link-active");
+            }
+          });
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(callback, {
+      root: null,
+      rootMargin: "0px",
+      threshold: 0.25,
+    });
+
+    sections.forEach((section) => observer.observe(section));
+
+    // Cleanup function
+    window.onunload = () => observer.disconnect();
+  });
+</script>
 <style>
   nav {
     position: sticky;
@@ -41,4 +73,7 @@
     color: #fff;
     text-decoration: none;
   }
+  .link-active {
+    color: var(--primaryColor);
+  }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from "astro:transitions";
 interface Props {
 	title: string;
 }
@@ -20,11 +21,10 @@ const { title } = Astro.props;
 		/>
 		<meta
 			name="keywords"
-			content="Eduardo Maximiliano,portafolio,desarrollador,desarrollador web,desarrollador front end,diseño web,diseñador web,ui ux,freelance,maximojsdev, maximodev, maximo4ever"
+			content="maximojsdev, portafolio, desarrollador web, front end, diseño web, ui ux,freelance"
 		/>
 		<meta name="robots" content="index, follow" />
-		<meta name="author" content="Eduardo maximiliano" />
-		<meta name="theme-color" content="#303443" />
+		<meta name="author" content="Maximiliano" />
 		<meta property="og:image" content="/images/logo.webp" />
 		<meta property="og:image:alt" content="MaximoJSDev - Logo" />
 
@@ -36,25 +36,26 @@ const { title } = Astro.props;
 			href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap"
 			rel="stylesheet"
 		/>
+		<ViewTransitions />
 	</head>
 	<body>
 		<slot />
+		<style is:global>
+			:root {
+				--primaryColor: #006dff;
+			}
+			*,
+			*::after,
+			*::before {
+				box-sizing: border-box;
+				padding: 0;
+				margin: 0;
+			}
+			body {
+				background-color: #0c1423;
+				color: #fff;
+				font-family: "Roboto";
+			}
+		</style>
 	</body>
 </html>
-<style is:global>
-	:root {
-		--primaryColor: #006dff;
-	}
-	*,
-	*::after,
-	*::before {
-		box-sizing: border-box;
-		padding: 0;
-		margin: 0;
-	}
-	body {
-		background-color: #0c1423;
-		color: #fff;
-		font-family: "Roboto";
-	}
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -175,8 +175,11 @@ import SobreMi from "@/components/SobreMi.astro";
 	}
 
 	@media (max-width: 500px) {
+		#nav {
+			padding-top: 15px;
+		}
 		#inicio .inicio__title {
-			font-size: 36px;
+			font-size: 32px;
 		}
 		#inicio .inicio__text {
 			font-size: 22px;