Modal Updated

app/components/navbar.jsx

@@ -6,7 +6,7 @@
 import Link from 'next/link';
 
 /* IMPORT CSS */
-import "./navbar.css"
+import "../css/navbar.css"
 
 /* BOOTSTRAP ICONS */
 import 'bootstrap-icons/font/bootstrap-icons.css';
@@ -21,7 +21,8 @@ export default function Navbar() {
             </div>
 
             <div className="access">
-
+                <Link className="link" href="/"><i className="bi bi-house-fill"></i><span>Hogar</span></Link>
+                <Link className="link" href="/"><i className="bi bi-person-raised-hand"></i><span>En solitario</span></Link>
                 <Link className="link" href="/"><i className="bi bi-people-fill"></i><span>En grupo</span></Link>
             </div>
 

app/components/projects.jsx

@@ -8,10 +8,12 @@ import HyH1 from '../images/HarmonyAndHeavenL.jpg';
 import PEE from '../images/PickEm.jpg';
 import PEE1 from '../images/PickEm1.jpg';
 import PEE2 from '../images/PickEm2.jpg';
+import BB from '../images/BB1.jpg';
+import BB1 from "../images/BB2.jpeg";
 
 
-import "./modal.css";
-import styles from "./project.css";
+import "../css/modal.css";
+import "../css/project.css";
 
 const Proyectos = () => {
   const [modalOpen, setModalOpen] = useState(false);
@@ -53,6 +55,7 @@ const Proyectos = () => {
             <div className="lenguajesprj">
               <Image src="https://static-00.iconduck.com/assets.00/node-js-icon-454x512-nztofx17.png" width={40} height={40} alt="" />
               <Image src="https://cdn-icons-png.flaticon.com/512/5968/5968313.png" width={40} height={40} alt="" />
+              <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/2048px-CSS3_logo.svg.png" width={200} height={200} alt="" />
             </div>
             <div className="github">
               <i className="bi bi-github"></i>Ver proyecto
@@ -76,17 +79,19 @@ const Proyectos = () => {
           </div>
         </button>
 
-        <button className="container-project" onClick={() => openModalForProject("harmony_heaven")}>
+        <button className="container-project" onClick={() => openModalForProject("BugB")}>
           <div className="nameprj">BuggBlock</div>
           <div className="categorie">Grupal</div>
           <div className="photoprj">
-            <Image src={PEE} alt="" width={"auto"} height={"auto"} />
+            <Image src={BB} alt="" width={"auto"} height={"auto"} />
           </div>
           <div className="descriptionprj">
             <h4>Web Blog informatico enfocado a la tecnologia y computadoras, los usuarios pueden hacer nuevas publicaciones y el admin borrarlas</h4>
           </div>
           <div className="lenguajesprj">
-            <Image src="https://cdn.iconscout.com/icon/free/png-256/free-python-3521655-2945099.png?f=webp" width={200} height={200} alt="" />
+            <Image src="https://static-00.iconduck.com/assets.00/php-icon-2048x2048-jyo8hbbt.png" width={200} height={200} alt="" />
+            <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/2048px-CSS3_logo.svg.png" width={200} height={200} alt="" />
+            <Image src="https://cdn-icons-png.flaticon.com/512/5968/5968313.png" width={40} height={40} alt="" />
           </div>
           <div className="github">
             <i className="bi bi-github"></i>Ver proyecto
@@ -179,6 +184,43 @@ const Proyectos = () => {
         </div>
       )}
 
+      {modalOpen && selectedProject === "BugB" && (
+        <div className='modalprj1' onClick={closeModal}>
+          <div className='modalcontent1' onClick={(e) => e.stopPropagation()}>
+
+            <button className="close-modal" onClick={closeModal}>
+              <X size={24} />
+            </button>
+
+            <div className="nameprj1">BuggBlock</div>
+            <div className="categorie1">Grupal</div>
+            <div className="lenguajesprj1">
+              <Image src="https://static-00.iconduck.com/assets.00/php-icon-2048x2048-jyo8hbbt.png" width={200} height={200} alt="" />
+              <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/2048px-CSS3_logo.svg.png" width={200} height={200} alt="" />
+              <Image src="https://cdn-icons-png.flaticon.com/512/5968/5968313.png" width={40} height={40} alt="" />
+            </div>
+            <div className="photoprj1">
+              <Image src={BB} alt="" width={"auto"} height={"auto"} />
+            </div>
+
+            <div className="descriptionprj1">
+              <h4>Un web blog para amantes de la tecnologia.</h4>
+            </div>
+            <div className='descriptionprj3'>
+              <p>BuggBlock es una pagina web tipo Blog con enfoque a informacion tecnologica donde los usuarios registrados podran realizar publicaciones con texto y fotos para despues verlas en el Main</p>
+            </div>
+            <div className="photoprj1">
+              <Image src={BB1} alt="" width={"auto"} height={"auto"} />
+            </div>
+            <br />
+            <br />
+            <div className='descriptionprj3'>
+              BuggBlock fue desarrollado con php para el manejo de datos de usuarios y publicaciones por el lado del Backend, y el diseño realizado con iconos de Bootstrap y CSS puro. 
+            </div>
+          </div>
+        </div>
+      )}
+
     </div>
   );
 }

app/components/spinner.jsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import "./spinner.css"; // Corrige el nombre del archivo aquí
+import "../css/spinner.css"; // Corrige el nombre del archivo aquí
 
 const Spinner = () => {
   return (

app/components/tecnologies.jsx

@@ -26,6 +26,10 @@ const Technologies = () => {
           <div className="grid-itemtec">
             <h2>Backend</h2>
             <div className="tecnologias">
+              <div className="image-with-text">
+                <Image src="https://static-00.iconduck.com/assets.00/php-icon-2048x2048-jyo8hbbt.png" width={200} height={200} alt="" />
+                <p>PHP</p>
+              </div>
               <div className="image-with-text">
                 <Image src="https://camo.githubusercontent.com/57849c6a718458e32ed51527a073b72d8f1737ee515ab6f80d5a9107a485f40c/68747470733a2f2f7777772e6461746f636d732d6173736574732e636f6d2f37353934312f313635373730373837382d6e6578746a735f6c6f676f2e706e67" width={200} height={200} alt="" />
                 <p>NextJS</p>

app/css/main.css

@@ -36,7 +36,6 @@ body{
     border-radius: 20px;
     margin: auto;
     margin-left: auto;
-    transition: 500ms;
 }
 
 
@@ -47,7 +46,6 @@ body{
     display: flex;
     width: 100%;
     color: white;
-    transition: 500ms;
   }
 
 .datos1{
@@ -232,9 +230,10 @@ button{
 .grid-containerprj{
     margin: auto;
     margin-left: 5%;
+    margin-right: 5%;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(410px, 1fr)); /* Establece columnas con un mínimo de 200px y se ajustan automáticamente */
-    gap: 60px 40px; /* Espacio entre los elementos */
+    gap: 60px 4%; /* Espacio entre los elementos */
     transition: 500ms;
 }
 

app/css/mainrespons.css

@@ -1,7 +1,7 @@
 /* Estilos para tabletas */
 @media screen and (max-width: 1024px) {
     html{
-        background-image: linear-gradient(to bottom, #ff7e5f 5%, #ff7f5f 20%, #31405fe7 31%, #31405f 87%, #000000 91%);
+        background-image: linear-gradient(to bottom, #ff7e5f 5%, #ff7f5f 14%, #31405fe7 22%, #31405f 87%, #000000 91%);
         overflow-y: auto
     }
     .main{
@@ -14,17 +14,20 @@
         margin-bottom: 30%;
     }
     .datos1{
-        text-align: left;
+        text-align: center;
         padding-top: 5%;
-        margin-left: -16%;
+        margin-left: -20%;
         width: 100%;
         font-size: 80%;
     }
+    .datos img{
+        margin: auto;
+    }
     .datos2{
         margin-top: 10%;
         margin-left: 5%;
         width: 80%;
-        font-size: 70%;
+        font-size: 80%;
     }
     .lenguajes{
         margin-left: 0%;
@@ -54,7 +57,7 @@
         margin-top: 9%;
         display: grid;
         grid-template-columns: (auto-fill, minmax(95px, 0fr));
-        grid-gap: 20px;
+        grid-gap: 40px;
       }
       .grid-itemtec {
         margin-top: 0%;
@@ -65,10 +68,10 @@
         padding: 15px;
         width: 380px;
         height: 270px;
+        font-size: 100%;
       }.grid-itemtec h2{
         height: 25%;
-        font-size: 200%;
-        margin-bottom: 0%;
+        margin-bottom: 5%;
       }
       .grid-itemtec .tecnologias{
         font-size: 150%;
@@ -105,44 +108,65 @@
     .contactme .correotxt{
         font-size: 170%;
     }
+
+
+
+    .modalprj1 {
+        top: -200%;
+    }
+    .modalcontent1 {
+        font-size: 50%;
+    }
 }
 
 
 
   /* Estilos para teléfonos celulares */
-  @media screen and (max-width: 480px) {
+  @media screen and (max-width: 412px) {
     html{
         background-image: linear-gradient(to bottom, #ff7e5f 15%, #ff7f5f 14%, #31405f 28%, #31405f 84%, #000000 95%,  #000000 100%);
         overflow-x: hidden;
-        font-size: 50%;
+        font-size: 80%;
     }
     body{
         width: 100%;
     }
     .main{
         width: 90%;
     }.personaldata{
+        font-size: 120%;
         margin-top: 10%;
         flex-wrap: wrap;
         text-align: left;
     }
     .datos1{
         text-align: center;
         padding-top: 10%;
-        margin-left: -15%;
+        margin-left: -6%;
         width: 100%;
     }
+    .datos1 img{
+        margin-left: 10%;
+    }
     .datos2{
         margin-top: 10%;
         margin-left: 2%;
         width: 90%;
     }
 
+    .lenguajes h2{
+        margin-bottom: -15%;
+    }
+
     .grid-itemtec {
         margin: auto;
+        margin-left: 16%;
         width: 260px;
         height: 200px;
     }
+    .grid-itemtec h2{
+        margin-bottom: 0%;
+    }
     .image-with-text img {
         width: 40px; /* Ajusta el ancho según sea necesario */
         height: 40px; /* Esto permite que la imagen se ajuste proporcionalmente */
@@ -151,14 +175,33 @@
         width: 100%;
     }
     .grid-containerprj{
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Establece columnas con un mínimo de 200px y se ajustan automáticamente */
+        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); /* Establece columnas con un mínimo de 200px y se ajustan automáticamente */
+        gap: 3% 0%; /* Espacio entre los elementos */
         padding: 0%;
-        width: 100%;
     }
     .container-project{
-        border: 1px solid black;
-        margin: 0;
         margin: auto;
+        margin-left: 2%;
         width: 90%;
     }
+    .modalprj1 {
+        height: 100%;
+    }
+    .modalcontent1 {
+        height: 200%;
+    }
+    .photoprj1 img{
+        width: 70%;
+        height: 1%;
+        margin: auto;
+        margin-top: 1%;
+        border-radius: 0px;
+        box-shadow: 1px 15px 30px rgba(0, 0, 0, 0.533);
+    }
+
+    .contactme{
+        font-size: 90%;
+        margin-top: 50%;
+        margin-bottom: 5%;
+    }
   }

app/components/modal.css → app/css/modal.css

@@ -7,32 +7,37 @@
 /* modal.css */
 .modalprj1 {
     position: absolute;
-    right: 0;
-    top: -700px;
-    bottom: 0;
+    right: -1%;
+    top:-60vh;
+    bottom: 55vh;
     margin: auto;
-    width: 100%;
-    height: 50%; /* Modificado para cubrir el 80% de la ventana */
+    width: 101%;
+    height: 100%; /* Modificado para cubrir el 80% de la ventana */
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1100;
     overflow: hidden; /* Eliminado overflow-y y overflow-x */
+    backdrop-filter: blur(30px);
+    transition: 1000ms;
 }
 
 .modalcontent1 {
+    right: 2%;
+    box-shadow: 0 0 20px black;
     overflow-y: auto;
-    margin: auto;
-    padding: 5%;
+    margin-left: 5%;
+    padding: 4%;
     background-color: #3e3e3e;
-    max-width: 100%;
-    height: 100vh; /* Añadido para que el contenido del modal no exceda el 100% de la altura del modal */
+    max-width: 90%;
+    height: 50vh; /* Añadido para que el contenido del modal no exceda el 100% de la altura del modal */
     border-radius: 20px;
-    border: 1px solid #888;
+    border: 2px solid #888;
     position: relative;
     overflow-y: auto; /* Añadido para permitir el desplazamiento vertical del contenido */
-}
+    scrollbar-width: none;
 
+}
 .close-modal {
     color: #aaa;
     font-size: 28px;

app/page.jsx

@@ -22,9 +22,7 @@ export default function Portafolio() {
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      initScrollReveal('.personaldata', 'right');
-      initScrollReveal('.datos1', 'right');
-      initScrollReveal('.datos2', 'right');
+      initScrollReveal('.personaldata', 'bottom');
       initScrollReveal('.lenguajes', 'right');
       initScrollReveal('.projects', 'right');
       initScrollReveal('.contactme', 'right');