From f6938f84a2c69a1921c8a42f81e6d10fd72d3ba8 Mon Sep 17 00:00:00 2001 From: AmbrizAlberto Date: Mon, 8 Apr 2024 00:12:06 -0600 Subject: [PATCH] Error Fixed --- app/components/LoadingScreen.js | 13 ++ app/components/navbar.jsx | 2 + app/components/spinner.css | 37 ++++ app/components/spinner.jsx | 15 ++ app/css/main.css | 2 +- app/layout.jsx | 40 +++- app/page.jsx | 377 +++++++++++--------------------- next.config.js | 10 + next.config.mjs | 5 - 9 files changed, 242 insertions(+), 259 deletions(-) create mode 100644 app/components/LoadingScreen.js create mode 100644 app/components/spinner.css create mode 100644 app/components/spinner.jsx create mode 100644 next.config.js delete mode 100644 next.config.mjs diff --git a/app/components/LoadingScreen.js b/app/components/LoadingScreen.js new file mode 100644 index 0000000..a29352b --- /dev/null +++ b/app/components/LoadingScreen.js @@ -0,0 +1,13 @@ +import React from 'react'; +import Spinner from './spinner'; + +const LoadingScreen = () => { + return ( +
+

Cargando...

+ +
+ ); +}; + +export default LoadingScreen; \ No newline at end of file diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx index 14247ac..a14ac26 100644 --- a/app/components/navbar.jsx +++ b/app/components/navbar.jsx @@ -1,3 +1,5 @@ +'use client'; + /* IMPORT PRINCIPAL LIBRARYS */ import Link from 'next/link'; diff --git a/app/components/spinner.css b/app/components/spinner.css new file mode 100644 index 0000000..4ffd0fa --- /dev/null +++ b/app/components/spinner.css @@ -0,0 +1,37 @@ +html { + background-color: #333; + display: flex; /* Usar flexbox */ + justify-content: center; /* Centrar horizontalmente */ + align-items: center; /* Centrar verticalmente */ + height: 100vh; /* Hacer que el html ocupe toda la altura de la pantalla */ + text-align: center; + color: orange; + transition: 500ms; +} + +.spinner { + display: flex; + justify-content: center; + align-items: center; + height: 100px; /* Ajusta la altura según sea necesario */ + transition: 500ms; +} + +.spinner-circle { + width: 50px; /* Ajusta el tamaño del círculo según sea necesario */ + height: 50px; /* Ajusta el tamaño del círculo según sea necesario */ + border: 5px solid #ccc; /* Cambia el color y el estilo del borde según sea necesario */ + border-radius: 50%; /* Hace que el borde sea redondeado para formar un círculo */ + border-top-color: #333; /* Cambia el color del borde superior para dar la apariencia de movimiento */ + animation: spin 1s infinite linear; /* Agrega una animación giratoria infinita */ + transition: 500ms; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/app/components/spinner.jsx b/app/components/spinner.jsx new file mode 100644 index 0000000..c1ed5ee --- /dev/null +++ b/app/components/spinner.jsx @@ -0,0 +1,15 @@ +'use client'; + +import React from 'react'; +import "./spinner.css"; // Corrige el nombre del archivo aquí + +const Spinner = () => { + return ( +
+ {/* Agrega aquí la animación de carga */} +
+
+ ); +}; + +export default Spinner; diff --git a/app/css/main.css b/app/css/main.css index 00d7571..15fe9d9 100644 --- a/app/css/main.css +++ b/app/css/main.css @@ -52,10 +52,10 @@ html{ margin-bottom: 1%; }.photomia img { width: 40%; + height: 40%; /* Permite que la altura se ajuste automáticamente para mantener la proporción */ margin-left: 35%; border-radius: 50%; max-width: 100%; /* Asegura que la imagen no supere el 100% del contenedor */ - height: 40; /* Permite que la altura se ajuste automáticamente para mantener la proporción */ cursor: pointer; } diff --git a/app/layout.jsx b/app/layout.jsx index e552ba2..d5bdddc 100644 --- a/app/layout.jsx +++ b/app/layout.jsx @@ -1,13 +1,41 @@ +// layout.jsx + +'use client'; // Marca el componente como un componente de cliente +import React, { useState, useEffect } from 'react'; +import LoadingScreen from './components/LoadingScreen'; + export default function RootLayout({ children }) { + + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (typeof window !== 'undefined') { + // Simulamos un tiempo de carga utilizando un temporizador + const timer = setTimeout(() => { + setLoading(false); + }, 2000); + + // Limpieza del temporizador al desmontar el componente + return () => clearTimeout(timer); + } + }, []); + + + // Renderiza el contenido de la página solo si loading es falso return ( - + + + {/* Aquí puedes agregar tus etiquetas */} + -
- {children} + {loading ? ( // Si loading es verdadero, muestra el spinner de carga + + ) : ( + children // Si loading es falso, muestra el contenido de la página + )}
- - - ) + + ); } diff --git a/app/page.jsx b/app/page.jsx index f5f0195..2396a14 100644 --- a/app/page.jsx +++ b/app/page.jsx @@ -1,275 +1,158 @@ -/* https://static-00.iconduck.com/assets.00/next-js-icon-512x512-zuauazrk.png - NEXTJS ICON */ - -'use client' +'use client'; import Image from 'next/image'; -import 'bootstrap-icons/font/bootstrap-icons.css'; import React, { useState, useEffect } from 'react'; import ScrollReveal from 'scrollreveal'; - - -import styles from "./css/main.css" -import style from "./css/mainrespons.css" import Navbar from './components/navbar'; - +import styles from "./css/main.css"; +import style from "./css/mainrespons.css"; export default function Portafolio() { - const [copiadoCorreo, setCopiadoCorreo] = useState(false); const [copiadoTelefono, setCopiadoTelefono] = useState(false); useEffect(() => { - // Inicializa ScrollReveal - ScrollReveal().reveal('.personaldata', { - duration: 1000, // Duración de la animación (en milisegundos) - origin: 'bottom', // Origen de la animación (top, right, bottom, left) - distance: '20px', // Distancia de la animación - delay: 200, // Retraso antes de que comience la animación (en milisegundos) - easing: 'ease-in-out', // Función de easing - }); - }, []); - - useEffect(() => { - // Inicializa ScrollReveal - ScrollReveal().reveal('.lenguajes', { - duration: 1000, // Duración de la animación (en milisegundos) - origin: 'left', // Origen de la animación (top, right, bottom, left) - distance: '20px', // Distancia de la animación - delay: 200, // Retraso antes de que comience la animación (en milisegundos) - easing: 'ease-in-out', // Función de easing - }); - }, []); - - useEffect(() => { - // Inicializa ScrollReveal - ScrollReveal().reveal('.projects', { - duration: 1000, // Duración de la animación (en milisegundos) - origin: 'right', // Origen de la animación (top, right, bottom, left) - distance: '20px', // Distancia de la animación - delay: 200, // Retraso antes de que comience la animación (en milisegundos) - easing: 'ease-in-out', // Función de easing - }); + if (typeof window !== 'undefined') { + initScrollReveal('.personaldata', 'bottom'); + initScrollReveal('.lenguajes', 'left'); + initScrollReveal('.projects', 'right'); + initScrollReveal('.contactme', 'bottom'); + } }, []); - useEffect(() => { - // Inicializa ScrollReveal - ScrollReveal().reveal('.contactme', { - duration: 2000, // Duración de la animación (en milisegundos) - origin: 'top', // Origen de la animación (top, right, bottom, left) - distance: '20px', // Distancia de la animación - delay: 100, // Retraso antes de que comience la animación (en milisegundos) - easing: 'ease-in-out', // Función de easing - }); - }, []); + function initScrollReveal(selector, origin) { + if (typeof window !== 'undefined') { + ScrollReveal().reveal(selector, { + duration: 1000, + origin: origin, + distance: '20px', + delay: 200, + easing: 'ease-in-out', + }); + } + } function copiarAlPortapapeles(id_elemento) { - const aux = document.createElement('input'); - aux.setAttribute('value', document.getElementById(id_elemento).innerHTML); - document.body.appendChild(aux); - aux.select(); - document.execCommand('copy'); - document.body.removeChild(aux); - - // Cambiar el estado para mostrar "Copiado" - setCopiadoCorreo(true); + if (typeof window !== 'undefined') { + const elemento = document.getElementById(id_elemento); + if (elemento) { + const aux = document.createElement('input'); + aux.setAttribute('value', elemento.innerHTML); + document.body.appendChild(aux); + aux.select(); + document.execCommand('copy'); + document.body.removeChild(aux); + setCopiadoCorreo(true); + } + } } function copiarTelefono(id_elemento) { - const aux = document.createElement('input'); - aux.setAttribute('value', document.getElementById(id_elemento).innerHTML); - document.body.appendChild(aux); - aux.select(); - document.execCommand('copy'); - document.body.removeChild(aux); - - // Cambiar el estado para mostrar "Copiado" - setCopiadoTelefono(true); + if (typeof window !== 'undefined') { + const elemento = document.getElementById(id_elemento); + if (elemento) { + const aux = document.createElement('input'); + aux.setAttribute('value', elemento.innerHTML); + document.body.appendChild(aux); + aux.select(); + document.execCommand('copy'); + document.body.removeChild(aux); + setCopiadoTelefono(true); + } + } } - - return ( - -
- - - -
-
-
- -
-
-
- Alberto - Ambriz -
-
-
-
-
-

SOBRE MI...

-
- Estudiante de Ingenieria en Software, me apasiona el desarrollo de aplicaciones (web/móvil), el diseño de estas es lo más entretenido para mí, estoy listo para trabajar de inmediato. -
-
- - + return ( +
+ +
+
+
+
- - - -
-

LENGUAJES QUE HE TRABAJADO

- -
    -
  • - SWIFT -
    • -
  • - HTML -
    • -
  • - CSS
    • -
  • - NEXTJS
    • -
  • - PYTHON
    • -
  • - MYSQL
    • -
  • - NODEJS
    • -
- +
+
+ Alberto Ambriz +
- - - -
-

PROYECTOS

- -
- - - - - - - +
+
+
+

SOBRE MI...

+
+ Estudiante de Ingeniería en Software, me apasiona el desarrollo de aplicaciones (web/móvil), el diseño de estas es lo más entretenido para mí, estoy listo para trabajar de inmediato. +
- - - -
- -

CONTACTAME

- -

CORREO

-
- albertpoambez@gmail.com - +
+
+
+

LENGUAJES QUE HE TRABAJADO

+
    +
  • + SWIFT +
    • +
  • + HTML +
    • +
  • + CSS +
    • +
  • + NEXTJS +
    • +
  • + PYTHON +
    • +
  • + MYSQL +
    • +
  • + NODEJS +
    • +
+
+
+

PROYECTOS

+
+ +
+

Tienda de instrumentos con CRUD, Inicio de sesión y Punto de venta.

- +
+ + +
+
+ Ver Repositorio +
+ +
+
+

CONTACTAME

+

CORREO

+
+ albertpoambez@gmail.com +
- - - - - +

TELEFONO

+
+ +52 3141576598 +
- -
- - ) +
+ + +
+ ); } diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..d6c3bef --- /dev/null +++ b/next.config.js @@ -0,0 +1,10 @@ +// next.config.mjs + +const nextConfig = { + images: { + domains: ['cdn4.iconfinder.com', 'cdn-icons-png.flaticon.com', 'upload.wikimedia.org', 'static-00.iconduck.com', 'cdn.iconscout.com'], + }, + }; + + module.exports = nextConfig; + \ No newline at end of file diff --git a/next.config.mjs b/next.config.mjs deleted file mode 100644 index 04d1e3e..0000000 --- a/next.config.mjs +++ /dev/null @@ -1,5 +0,0 @@ -/** @type {import('next').NextConfig} */ -const nextConfig = {}; - -export default nextConfig; -