Responsive Styles Updated

AmbrizAlberto · Apr 23, 2024 · efea450 · efea450
1 parent a481a51
commit efea450
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 43 deletions.
diff --git a/app/components/contactme.jsx b/app/components/contactme.jsx
@@ -0,0 +1,50 @@
+'use client'
+
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Head from 'next/head';
+
+const Contactame = () => {
+
+    const [copiadoCorreo, setCopiadoCorreo] = useState(false);
+    const [copiadoTelefono, setCopiadoTelefono] = useState(false);
+
+    function copiarAlPortapapeles(texto) {
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(texto);
+            setCopiadoCorreo(true);
+            setTimeout(() => setCopiadoCorreo(false), 3000); // Espera 3 segundos
+        }
+        }
+
+        function copiarTelefono(texto) {
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(texto);
+            setCopiadoTelefono(true);
+            setTimeout(() => setCopiadoTelefono(false), 3000); // Espera 3 segundos
+        }
+        }
+
+    return (
+        <div className="contactme">
+            <h1 className="contactmett">CONTACTAME</h1>
+            <h1>CORREO</h1>
+            <div className="correo">
+            <span id="url" className='correotxt'>[email protected]</span>
+            <button className='correobtn' onClick={() => copiarAlPortapapeles('[email protected]')}>
+                {copiadoCorreo ? 'Copiado' : 'Copiar'}
+            </button>
+            </div>
+            <h1>TELEFONO</h1>
+            <div className="telefono">
+            <span id="tel" className='correotxt'>+52 3141576598</span>
+            <button className='correobtn' onClick={() => copiarTelefono('+523141576598')}>
+                {copiadoTelefono ? 'Copiado' : 'Copiar'}
+            </button>
+            </div>
+        </div>
+        )
+    }
+
+export default Contactame;
diff --git a/app/css/main.css b/app/css/main.css
@@ -19,6 +19,7 @@ html{
     overflow-x: hidden;
     width: 100%;
     transition: 700ms;
+    font-size: 2vh;
 }
 
 body{
@@ -148,7 +149,6 @@ button{
 
 /* SUBTITULOS */
 .lenguajes{
-    border: 1px solid black;
     padding-top: 10%;
     padding-bottom: 1%;
     margin-top: 20%;

diff --git a/app/css/mainrespons.css b/app/css/mainrespons.css
@@ -1,5 +1,5 @@
 /* Estilos para tabletas */
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 820px) {
     html{
         background-image: linear-gradient(to bottom, #ff7e5f 5%, #ff7f5f 14%, #31405fe7 22%, #31405f 87%, #000000 91%);
         overflow-y: auto
@@ -138,10 +138,25 @@
     }
 }
 
+@media screen and (max-width: 540px) {
+    .datos2{
+        font-size: 70%;
+    }
+}
+
+/* iPmini */
+@media screen and (max-width: 768px) {
+    .datos1{
+        margin-top: 10vh;
+    }
+    .personaldata{
+        font-size: 80%;
+    }
+}
 
 
-  /* Estilos para teléfonos celulares */
-  @media screen and (max-width: 412px) {
+  /* R6Pro */
+  @media screen and (max-width: 431px) {
     html{
         background-image: linear-gradient(to bottom, #ff7e5f 15%, #ff7f5f 14%, #31405f 28%, #31405f 84%, #000000 95%,  #000000 100%);
         overflow-x: hidden;
@@ -171,7 +186,7 @@
         margin: auto;
     }
     .datos2{
-        font-size: 65%;
+        font-size: 1.1vh;
         margin-top: 5%;
         margin-left: 2%;
         width: 90%;

diff --git a/app/page.jsx b/app/page.jsx
@@ -6,18 +6,17 @@ import { useState, useEffect } from 'react';
 import Image from 'next/image';
 import Head from 'next/head';
 
-import Navbar from './components/navbar';
 import styles from "./css/main.css";
 import stylerespons from "./css/mainrespons.css";
 
 import miImagen from './images/1mb.jpeg';
 
+import Navbar from './components/navbar';
 import Tecnologias from './components/tecnologies';
 import Proyectos from './components/projects';
+import Contactame from './components/contactme';
 
 export default function Portafolio() {
-  const [copiadoCorreo, setCopiadoCorreo] = useState(false);
-  const [copiadoTelefono, setCopiadoTelefono] = useState(false);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -41,30 +40,16 @@ export default function Portafolio() {
     }
   }
 
-  function copiarAlPortapapeles(texto) {
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(texto);
-      setCopiadoCorreo(true);
-      setTimeout(() => setCopiadoCorreo(false), 3000); // Espera 3 segundos
-    }
-  }
-
-  function copiarTelefono(texto) {
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(texto);
-      setCopiadoTelefono(true);
-      setTimeout(() => setCopiadoTelefono(false), 3000); // Espera 3 segundos
-    }
-  }
-
   return (
     <div className='main'>
       <Navbar />
       <div className="personaldata">
         <div className="datos1">
           <div className="photomia">
             <button type="button" className='photo'>
-              <Image src={miImagen} width={"auto"} height={"auto"} priority={true}  alt="" />
+              <a href="/CV - Alberto Ambriz.pdf" download>
+                <Image src={miImagen} width={"auto"} height={"auto"} priority={true}  alt="" />
+              </a>
             </button>
           </div>
           <div className="datos">
@@ -95,7 +80,7 @@ export default function Portafolio() {
         </a>
       </button>
       <button>
-        <a href="https://url_de_tu_documento" download>
+        <a href="/CV - Alberto Ambriz.pdf" download>
           <i className="bi bi-file-earmark-person-fill"></i>
         </a>
       </button>
@@ -107,23 +92,7 @@ export default function Portafolio() {
 
       <Proyectos/>
 
-      <div className="contactme">
-        <h1 className="contactmett">CONTACTAME</h1>
-        <h1>CORREO</h1>
-        <div className="correo">
-          <span id="url" className='correotxt'>[email protected]</span>
-          <button className='correobtn' onClick={() => copiarAlPortapapeles('[email protected]')}>
-            {copiadoCorreo ? 'Copiado' : 'Copiar'}
-          </button>
-        </div>
-        <h1>TELEFONO</h1>
-        <div className="telefono">
-          <span id="tel" className='correotxt'>+52 3141576598</span>
-          <button className='correobtn' onClick={() => copiarTelefono('+523141576598')}>
-            {copiadoTelefono ? 'Copiado' : 'Copiar'}
-          </button>
-        </div>
-      </div>
+      <Contactame/>
 
       <div className='creador'>
         <h4>Estilo de portafolio con derechos reservados <i className="bi bi-c-circle"></i></h4>

diff --git a/public/CV - Alberto Ambriz.pdf b/public/CV - Alberto Ambriz.pdf