+
{children}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index ece6ad2..72db689 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,45 +1,101 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import { FiHome, FiUser, FiBriefcase, FiMail } from 'react-icons/fi';
+import React, { useState, useEffect, useRef } from "react";
+import { FiHome, FiUser, FiBriefcase, FiMail } from "react-icons/fi";
+import { Link as ScrollLink } from "react-scroll";
const Navbar = () => {
- const activeStyles = "text-black border-b-2 border-black";
+ const activeStyles = "!text-black border-b-2 border-black";
const inactiveStyles = "text-gray-400 hover:text-gray-600 cursor";
- const getLinkStyles = ({ isActive, isPending }) => isActive ? activeStyles : inactiveStyles;
+ const getLinkStyles = ({ isActive, isPending }) =>
+ isActive ? activeStyles : inactiveStyles;
+
+ const [offsetNavbar, setOffsetNavabr] = useState(-64);
+ const navbarRef = React.createRef(null);
+ const resizeObserver = useRef(null);
+
+ useEffect(() => {
+ // Check if the navbarRef (reference to the navbar element) is available
+ if (navbarRef.current) {
+ // Create a new ResizeObserver instance to watch for size changes of the navbar element
+ resizeObserver.current = new ResizeObserver((entries) => {
+ // Loop through all observed entries (in this case, it should be just the navbar element)
+ for (const entry of entries) {
+ // Get the observed element (the navbar)
+ const observedElement = entry.target;
+
+ // Get the height of the observed element, including padding
+ const outerHeight = observedElement.offsetHeight;
+
+ // Update the state with the new height value
+ setOffsetNavabr(-1 * outerHeight);
+ }
+ });
+
+ // Start observing the navbar element for size changes
+ resizeObserver.current.observe(navbarRef.current);
+ }
+
+ // Clean up function, which runs when the component is unmounted or the effect dependencies change
+ return () => {
+ // Check if there's a ResizeObserver instance
+ if (resizeObserver.current) {
+ // Disconnect the observer to stop observing size changes and release resources
+ resizeObserver.current.disconnect();
+ }
+ };
+ }, []);
return (
-
+
Inicio
-
+
Acerca de mi
-
+
Portafolio
-
+
Contacto
+
diff --git a/src/components/PortfolioGallery.jsx b/src/components/PortfolioGallery.jsx
new file mode 100644
index 0000000..f40c8cb
--- /dev/null
+++ b/src/components/PortfolioGallery.jsx
@@ -0,0 +1,71 @@
+import React, { useRef, useState, useEffect } from "react";
+
+import LightGallery from "lightgallery/react";
+
+// import styles
+import 'lightgallery/css/lightgallery.css';
+import 'lightgallery/css/lg-zoom.css';
+import 'lightgallery/css/lg-thumbnail.css';
+
+// import plugins if you need
+import lgThumbnail from "lightgallery/plugins/thumbnail";
+import lgZoom from "lightgallery/plugins/zoom";
+
+
+
+const PortfolioGallery = ({ selectedAlbum, setSelectedAlbum }) => {
+ const [preloaded, setPreloaded] = useState(false);
+
+ useEffect(() => {
+ const preloadImages = async () => {
+ if (!selectedAlbum?.images) return;
+
+ const imageUrls = selectedAlbum.images;
+
+ try {
+ const preloadPromises = imageUrls.map((imageUrl) => {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = resolve;
+ img.onerror = reject;
+ img.src = imageUrl;
+ });
+ });
+
+ await Promise.all(preloadPromises);
+ setPreloaded(true);
+ } catch (error) {
+ console.error("Image preloading error:", error);
+ }
+ };
+
+ preloadImages();
+ }, [selectedAlbum]);
+
+ const onInit = () => {
+ console.log("lightGallery has been initialized");
+ };
+
+ return (
+ <>
+
+ {preloaded &&
+ selectedAlbum?.images &&
+ selectedAlbum?.images.map((src, index) => (
+
+ 
+
+ ))}
+
+
+
+ );
+};
+
+export default PortfolioGallery;
diff --git a/src/components/PortfolioMenu.jsx b/src/components/PortfolioMenu.jsx
new file mode 100644
index 0000000..ae06575
--- /dev/null
+++ b/src/components/PortfolioMenu.jsx
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import albumData from "../data/albumsData";
+import imagesData from "../data/imagesData";
+
+const PortfolioMenu = ({ selectedAlbum, setSelectedAlbum }) => {
+
+ const [menuItems, setMenuItems] = useState(
+ albumData.map((item, idx) => ({ label: item.name, active: idx === 0 }))
+ );
+
+ useEffect(() => {
+ console.log(menuItems)
+ let activeAlbum = menuItems.find((item) => item.active === true)
+ let albumToUpdate = imagesData.find((item) =>
+ item.album === activeAlbum.label.toLowerCase().replace(/\s+/g, '-')
+ );
+ setSelectedAlbum(albumToUpdate);
+ }, [menuItems]);
+
+ const handleOnClickAlbum = (e) => {
+ const albumName = e.target.name;
+ const newMenuItems = menuItems.map((item) => {
+ if (item.label === albumName) {
+ return { ...item, active: true };
+ } else {
+ return { ...item, active: false };
+ }
+ });
+ setMenuItems(newMenuItems);
+ setSelectedAlbum(...newMenuItems.filter((item) => item.active === true));
+ };
+
+ return (
+
- {title}
-
- {/* I) Primary Meta Tags */}
- {/*
- */}
-
- {/* II) Open Graph / Facebook */}
- {/*
-
-
-
-
- */}
-
- {/* III) Twitter */}
- {/*
-
-
-
- */}
-
-
- );
-};
-
-export default Seo;
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 5a87534..37a2301 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,18 +1,21 @@
-import React from 'react';
-import { FiHome, FiUser, FiBriefcase, FiMail } from 'react-icons/fi';
-import { NavLink } from 'react-router-dom';
+import React from "react";
+import { FiHome, FiUser, FiBriefcase, FiMail } from "react-icons/fi";
+import { Link as ScrollLink } from "react-scroll";
-import userDetails from '../data/userDetails';
+import userDetails from "../data/userDetails";
const Sidebar = () => {
- const activeStyles = 'flex items-center text-black underline';
+ const activeStyles = "flex items-center !text-black underline";
const inactiveStyles =
- 'flex items-center text-gray-400 hover:text-gray-600 cursor';
+ "flex items-center text-gray-400 hover:text-gray-600 cursor cursor-pointer";
+
+ // const activeStyles = "text-black border-b-2 border-black";
+ // const inactiveStyles = "text-gray-400 hover:text-gray-600 cursor";
const getLinkStyles = ({ isActive, isPending }) =>
isActive ? activeStyles : inactiveStyles;
return (
-
AMG
-
+ {menuItems.map((item, index) => (
+
+ ))}
+
+ );
+};
+
+export default PortfolioMenu;
diff --git a/src/components/Seo.jsx b/src/components/Seo.jsx
deleted file mode 100644
index 9293283..0000000
--- a/src/components/Seo.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import { Helmet } from 'react-helmet-async';
-
-import metaTags from '../data/metaTags';
-
-const Seo = ({ title }) => {
- return (
- <>
-