From 8a964665715c33be26eb481271f3ad82e8410048 Mon Sep 17 00:00:00 2001
From: AmbrizAlberto <albertpoambez@gmail.com>
Date: Sat, 27 Apr 2024 19:24:08 -0600
Subject: [PATCH] Responsive Fixed

---
 .../components/espa\303\261ol/aboutme.jsx"    |  2 +-
 .../components/espa\303\261ol/contactme.jsx"  |  0
 .../components/espa\303\261ol/creator.jsx"    |  0
 .../components/espa\303\261ol/navbar.jsx"     |  4 +-
 .../components/espa\303\261ol/projects.jsx"   | 22 +++----
 .../espa\303\261ol/tecnologies.jsx"           |  0
 app/components/{ => ingles}/aboutmeen.jsx     |  2 +-
 app/components/{ => ingles}/contactmeen.jsx   |  0
 app/components/{ => ingles}/creatoren.jsx     |  0
 app/components/{ => ingles}/navbaren.jsx      |  4 +-
 app/components/{ => ingles}/projectsen.jsx    | 18 +++---
 app/components/{ => ingles}/tecnologiesen.jsx |  0
 app/components/pageen.jsx                     | 64 -------------------
 app/css/mainrespons.css                       | 28 ++------
 app/css/modal.css                             | 15 ++---
 app/page.jsx                                  | 25 ++++----
 16 files changed, 48 insertions(+), 136 deletions(-)
 rename app/components/aboutme.jsx => "app/components/espa\303\261ol/aboutme.jsx" (96%)
 rename app/components/contactme.jsx => "app/components/espa\303\261ol/contactme.jsx" (100%)
 rename app/components/creator.jsx => "app/components/espa\303\261ol/creator.jsx" (100%)
 rename app/components/navbar.jsx => "app/components/espa\303\261ol/navbar.jsx" (85%)
 rename app/components/projects.jsx => "app/components/espa\303\261ol/projects.jsx" (95%)
 rename app/components/tecnologies.jsx => "app/components/espa\303\261ol/tecnologies.jsx" (100%)
 rename app/components/{ => ingles}/aboutmeen.jsx (96%)
 rename app/components/{ => ingles}/contactmeen.jsx (100%)
 rename app/components/{ => ingles}/creatoren.jsx (100%)
 rename app/components/{ => ingles}/navbaren.jsx (85%)
 rename app/components/{ => ingles}/projectsen.jsx (96%)
 rename app/components/{ => ingles}/tecnologiesen.jsx (100%)
 delete mode 100644 app/components/pageen.jsx

diff --git a/app/components/aboutme.jsx "b/app/components/espa\303\261ol/aboutme.jsx"
similarity index 96%
rename from app/components/aboutme.jsx
rename to "app/components/espa\303\261ol/aboutme.jsx"
index 04beef4..c2e612c 100644
--- a/app/components/aboutme.jsx
+++ "b/app/components/espa\303\261ol/aboutme.jsx"
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import miImagen from '../images/1mb.jpeg';
+import miImagen from '../../images/1mb.jpeg';
 
 const Aboutme = () => {
     const downloadCV = "./CV.pdf";
diff --git a/app/components/contactme.jsx "b/app/components/espa\303\261ol/contactme.jsx"
similarity index 100%
rename from app/components/contactme.jsx
rename to "app/components/espa\303\261ol/contactme.jsx"
diff --git a/app/components/creator.jsx "b/app/components/espa\303\261ol/creator.jsx"
similarity index 100%
rename from app/components/creator.jsx
rename to "app/components/espa\303\261ol/creator.jsx"
diff --git a/app/components/navbar.jsx "b/app/components/espa\303\261ol/navbar.jsx"
similarity index 85%
rename from app/components/navbar.jsx
rename to "app/components/espa\303\261ol/navbar.jsx"
index b921acc..1615ba8 100644
--- a/app/components/navbar.jsx
+++ "b/app/components/espa\303\261ol/navbar.jsx"
@@ -6,7 +6,7 @@
 import Link from 'next/link';
 
 /* IMPORT CSS */
-import "../css/navbar.css"
+import "../../css/navbar.css"
 
 /* BOOTSTRAP ICONS */
 import 'bootstrap-icons/font/bootstrap-icons.css';
@@ -22,7 +22,7 @@ export default function Navbar() {
 
             <div className="access">
                 <Link className="link" href="#"><i className="bi bi-house-fill"></i><span>Inicio</span></Link>
-                <Link className="link" href="/"><i class="bi bi-translate"></i><span>EN / ES</span></Link>
+                <Link className="link" href="/"><i className="bi bi-translate"></i><span>EN / ES</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>
diff --git a/app/components/projects.jsx "b/app/components/espa\303\261ol/projects.jsx"
similarity index 95%
rename from app/components/projects.jsx
rename to "app/components/espa\303\261ol/projects.jsx"
index 29165ec..315d90c 100644
--- a/app/components/projects.jsx
+++ "b/app/components/espa\303\261ol/projects.jsx"
@@ -3,17 +3,17 @@ import Image from 'next/image';
 import { X } from 'react-feather';
 import React, { useState } from 'react';
 
-import HyH from '../images/HarmonyAndHeavenM.jpg';
-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 HyH from '../../images/HarmonyAndHeavenM.jpg';
+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 "../css/modal.css";
-import "../css/project.css";
+import "../../css/modal.css";
+import "../../css/project.css";
 
 const Proyectos = () => {
   const [modalOpen, setModalOpen] = useState(false);
@@ -39,8 +39,8 @@ const Proyectos = () => {
   }
 
   return (
-    <div className='projects' id='proyecto'>
-      <h2>PROYECTOS</h2>
+    <div className='projects' >
+      <h2 id='proyecto'>PROYECTOS</h2>
       <div className="grid-containerprj">
 
         <button className="container-project" onClick={() => openModalForProject("harmony_heaven")}>
diff --git a/app/components/tecnologies.jsx "b/app/components/espa\303\261ol/tecnologies.jsx"
similarity index 100%
rename from app/components/tecnologies.jsx
rename to "app/components/espa\303\261ol/tecnologies.jsx"
diff --git a/app/components/aboutmeen.jsx b/app/components/ingles/aboutmeen.jsx
similarity index 96%
rename from app/components/aboutmeen.jsx
rename to app/components/ingles/aboutmeen.jsx
index 41c19ec..b3c8a59 100644
--- a/app/components/aboutmeen.jsx
+++ b/app/components/ingles/aboutmeen.jsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import miImagen from '../images/1mb.jpeg';
+import miImagen from '../../images/1mb.jpeg';
 
 const AboutmeEN = () => {
 
diff --git a/app/components/contactmeen.jsx b/app/components/ingles/contactmeen.jsx
similarity index 100%
rename from app/components/contactmeen.jsx
rename to app/components/ingles/contactmeen.jsx
diff --git a/app/components/creatoren.jsx b/app/components/ingles/creatoren.jsx
similarity index 100%
rename from app/components/creatoren.jsx
rename to app/components/ingles/creatoren.jsx
diff --git a/app/components/navbaren.jsx b/app/components/ingles/navbaren.jsx
similarity index 85%
rename from app/components/navbaren.jsx
rename to app/components/ingles/navbaren.jsx
index 5a36532..b05bc9a 100644
--- a/app/components/navbaren.jsx
+++ b/app/components/ingles/navbaren.jsx
@@ -6,7 +6,7 @@
 import Link from 'next/link';
 
 /* IMPORT CSS */
-import "../css/navbar.css"
+import "../../css/navbar.css"
 
 /* BOOTSTRAP ICONS */
 import 'bootstrap-icons/font/bootstrap-icons.css';
@@ -22,7 +22,7 @@ export default function NavbarEN() {
 
             <div className="access">
                 <Link className="link" href="#"><i className="bi bi-house-fill"></i><span>Home</span></Link>
-                <Link className="link" href="/"><i class="bi bi-translate"></i><span>ES / EN</span></Link>
+                <Link className="link" href="/"><i className="bi bi-translate"></i><span>ES / EN</span></Link>
                 <Link className="link" href="/"><i className="bi bi-person-raised-hand"></i><span>Solo</span></Link>
                 <Link className="link" href="/"><i className="bi bi-people-fill"></i><span>In Group</span></Link>
             </div>
diff --git a/app/components/projectsen.jsx b/app/components/ingles/projectsen.jsx
similarity index 96%
rename from app/components/projectsen.jsx
rename to app/components/ingles/projectsen.jsx
index 62d7829..82e07a1 100644
--- a/app/components/projectsen.jsx
+++ b/app/components/ingles/projectsen.jsx
@@ -3,17 +3,17 @@ import Image from 'next/image';
 import { X } from 'react-feather';
 import React, { useState } from 'react';
 
-import HyH from '../images/HarmonyAndHeavenM.jpg';
-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 HyH from '../../images/HarmonyAndHeavenM.jpg';
+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 "../css/modal.css";
-import "../css/project.css";
+import "../../css/modal.css";
+import "../../css/project.css";
 
 const ProyectosEN = () => {
   const [modalOpen, setModalOpen] = useState(false);
diff --git a/app/components/tecnologiesen.jsx b/app/components/ingles/tecnologiesen.jsx
similarity index 100%
rename from app/components/tecnologiesen.jsx
rename to app/components/ingles/tecnologiesen.jsx
diff --git a/app/components/pageen.jsx b/app/components/pageen.jsx
deleted file mode 100644
index 9b67133..0000000
--- a/app/components/pageen.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-  // pageen.jsx
-
-import { useState, useEffect } from 'react';
-import Image from 'next/image';
-import Head from 'next/head';
-
-import styles from "../css/main.css";
-import stylerespons from "../css/mainrespons.css";
-
-import miImagen from '../images/1mb.jpeg';
-
-import NavbarEN from './navbaren';
-import TecnologiasEN from './tecnologiesen';
-import ProyectosEN from './projectsen';
-import ContactameEN from './contactmeen';
-import AboutmeEN from './aboutmeen';
-import CreatorEN from './creatoren'
-
-  const PortafolioEN = () => {
-
-    useEffect(() => {
-      if (typeof window !== 'undefined') {
-        initScrollReveal('.personaldata', 'bottom');
-        initScrollReveal('.lenguajes', 'bottom');
-        initScrollReveal('.projects', 'bottom');
-        initScrollReveal('.contactme', 'bottom');
-      }
-    }, []);
-    
-    async function initScrollReveal(selector, origin) {
-      if (typeof window !== 'undefined') {
-        const ScrollReveal = (await import('scrollreveal')).default;
-        ScrollReveal().reveal(selector, {
-          duration: 1000,
-          origin: origin,
-          distance: '10px',
-          delay: 100,
-          easing: 'ease-in-out',
-        });
-      }
-    }
-    
-    const downloadCV = "./CV.pdf";
-
-    return (
-      <div className='main'>
-        
-        <NavbarEN />
-        <AboutmeEN/>        
-        <TecnologiasEN />
-        <ProyectosEN />
-        <ContactameEN />
-        <CreatorEN/>
-
-        
-        <Head>
-          <script src="https://platform.linkedin.com/badges/js/profile.js" async defer />
-          <script src='script/scrollreveal.js' async defer />
-        </Head>
-      </div>
-    );
-  };
-
-  export default PortafolioEN;
diff --git a/app/css/mainrespons.css b/app/css/mainrespons.css
index 91fcd44..dd84f04 100644
--- a/app/css/mainrespons.css
+++ b/app/css/mainrespons.css
@@ -118,23 +118,11 @@
     .contactme .correotxt{
         font-size: 170%;
     }
-
-
-
-    .modalprj1 {
-        top: -200%;
-    }
-    .modalcontent1 {
-        font-size: 40%;
-    }
-    .modalprj1 .photoprj1 img{
-        border-radius: 7px;
+    .modalprj1{
+       font-size: 40%;
     }
-    .modalprj1 .lenguajesprj1 img{
-        width: 15%;
-    }
-    .modalprj1 .lenguajesprj1{
-        margin-bottom: 5%;
+    .modalcontent{
+        margin-top: 50%;
     }
 }
 
@@ -232,14 +220,6 @@
         margin: auto;
         width: 90%;
     }
-    .modalprj1 {
-        top: 0%;
-        margin-bottom: -100%;
-    }
-    .modalcontent1 {
-        margin-top: 100%;
-        height: 200%;
-    }
     .photoprj1 img{
         width: 70%;
         height: 1%;
diff --git a/app/css/modal.css b/app/css/modal.css
index f05ec5b..45ee9ff 100644
--- a/app/css/modal.css
+++ b/app/css/modal.css
@@ -6,13 +6,11 @@
 
 /* modal.css */
 .modalprj1 {
+    top: 0%;
     position: absolute;
-    top:-60vh;
-    bottom: 55vh;
     margin: auto;
-    width: 100%;
-    height: 550%; /* Modificado para cubrir el 80% de la ventana */
-    display: flex;
+    width: 101%;
+    height: 250vh; /* Modificado para cubrir el 80% de la ventana */
     justify-content: center;
     align-items: center;
     z-index: 1100;
@@ -22,20 +20,19 @@
 }
 
 .modalcontent1 {
-    right: 2%;
+    max-width: 70%;
     box-shadow: 0 0 20px black;
     overflow-y: auto;
-    margin-left: 5%;
     padding: 4%;
     background-color: #3e3e3e;
-    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: 2px solid #888;
     position: relative;
     overflow-y: auto; /* Añadido para permitir el desplazamiento vertical del contenido */
     scrollbar-width: none;
-
+    margin: auto;
+    margin-top: 10%;
 }
 .close-modal {
     color: #aaa;
diff --git a/app/page.jsx b/app/page.jsx
index 3f630d0..8d7e394 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -11,20 +11,19 @@ import stylerespons from "./css/mainrespons.css";
 
 import miImagen from './images/1mb.jpeg';
 
-import Navbar from './components/navbar';
-import Aboutme from './components/aboutme';
-import Tecnologias from './components/tecnologies';
-import Proyectos from './components/projects';
-import Contactame from './components/contactme';
-import Creador from './components/creator';
+import Navbar from './components/español/navbar';
+import Aboutme from './components/español/aboutme';
+import Tecnologias from './components/español/tecnologies';
+import Proyectos from './components/español/projects';
+import Contactame from './components/español/contactme';
+import Creador from './components/español/creator';
 
-import PortafolioEN from './components/pageen';
-import NavbarEN from './components/navbarEN';
-import AboutmeEN from './components/aboutmeen';
-import TecnologiasEN from './components/tecnologiesEN';
-import ProyectosEN from './components/projectsEn';
-import ContactameEN from './components/contactmeen';
-import CreadorEN from './components/creatorEN';
+import NavbarEN from './components/ingles/navbaren';
+import AboutmeEN from './components/ingles/aboutmeen';
+import TecnologiasEN from './components/ingles/tecnologiesen';
+import ProyectosEN from './components/ingles/projectsen';
+import ContactameEN from './components/ingles/contactmeen';
+import CreadorEN from './components/ingles/creatoren';
 
 export default function Portafolio() {
   const [english, setEnglish] = useState(true); // Set initial state to true for English version