Responsive Fixed

AmbrizAlberto · Apr 28, 2024 · 8a96466 · 8a96466
1 parent e75b119
commit 8a96466
Show file tree

Hide file tree

Showing 16 changed files with 48 additions and 136 deletions.
diff --git a/app/components/aboutme.jsx → app/components/español/aboutme.jsx b/app/components/aboutme.jsx → app/components/español/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 → app/components/español/contactme.jsx b/app/components/contactme.jsx → app/components/español/contactme.jsx
diff --git a/app/components/creator.jsx → app/components/español/creator.jsx b/app/components/creator.jsx → app/components/español/creator.jsx
diff --git a/app/components/navbar.jsx → app/components/español/navbar.jsx b/app/components/navbar.jsx → app/components/español/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 → app/components/español/projects.jsx b/app/components/projects.jsx → app/components/español/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 → app/components/español/tecnologies.jsx b/app/components/tecnologies.jsx → app/components/español/tecnologies.jsx
diff --git a/app/components/aboutmeen.jsx → app/components/ingles/aboutmeen.jsx b/app/components/aboutmeen.jsx → 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 → app/components/ingles/contactmeen.jsx b/app/components/contactmeen.jsx → app/components/ingles/contactmeen.jsx
diff --git a/app/components/creatoren.jsx → app/components/ingles/creatoren.jsx b/app/components/creatoren.jsx → app/components/ingles/creatoren.jsx
diff --git a/app/components/navbaren.jsx → app/components/ingles/navbaren.jsx b/app/components/navbaren.jsx → 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 → app/components/ingles/projectsen.jsx b/app/components/projectsen.jsx → 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 → app/components/ingles/tecnologiesen.jsx b/app/components/tecnologiesen.jsx → app/components/ingles/tecnologiesen.jsx
diff --git a/app/components/pageen.jsx b/app/components/pageen.jsx
diff --git 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
@@ -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
@@ -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