Contactme added v1

app/css/main.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
 html{
-    background-image: linear-gradient(to bottom, #ff7e5f 20%, #ff7f5f 20%, #31405fe7 40%, #31405f 97%, #7bccff 100%);
+    background-image: linear-gradient(to bottom, #ff7e5f 20%, #ff7f5f 20%, #31405fe7 40%, #31405f 85%, #7bccffd5 91%,  #7bccff8e 97%);
     font-family: 'Roboto', sans-serif;
     height: auto;
 }
@@ -231,13 +231,30 @@ button{
     transition: 1000ms;
 }
 
-.containeremail {
-    text-align: center;
-    margin-top: 50px;
-  }
-
-  .containeremail button {
-    padding: 10px 20px;
-    font-size: 16px;
+.contactme{
+    margin: auto;
+    margin-top: 15%;
+    color: #000000;
+}
+.contactme h1{
+    margin-bottom: 0%;
+}
+.contactme .correotxt{
+    font-size: 200%;
+}
+
+.contactme .correobtn{
     cursor: pointer;
-  }
+    color: rgb(0, 0, 0);
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.467);
+    border-radius: 7px;
+    margin-left: 1%;
+    font-size: 150%;
+    border: 1px solid rgb(8, 8, 8);
+    background-color: #00000014;
+    transition: 500ms;
+}
+.contactme .correobtn:hover{
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.467);
+    transition: 500ms;
+}

app/page.jsx

@@ -1,16 +1,30 @@
 /* https://static-00.iconduck.com/assets.00/next-js-icon-512x512-zuauazrk.png - NEXTJS ICON */
 
-
-import React from 'react'
+'use client'
 import Image from 'next/image';
 import 'bootstrap-icons/font/bootstrap-icons.css';
+import React, { useState } from 'react'; 
 
 import styles from "./css/main.css"
 import style from "./css/mainrespons.css"
 import Navbar from './components/navbar';
 
 
-export default function Portafolio() {  
+export default function Portafolio() {
+
+  const [copiado, setCopiado] = useState(false);
+
+  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"
+    setCopiado(true);
+  }
 
   return (
     <div className='main'>
@@ -45,8 +59,6 @@ export default function Portafolio() {
 
 
 
-
-
       <div className="lenguajes">
         <h2>LENGUAJES QUE HE TRABAJADO</h2>
 
@@ -73,7 +85,6 @@ export default function Portafolio() {
 
 
 
-
       <div className='projects'>
         <h2>PROYECTOS</h2>
 
@@ -167,11 +178,31 @@ export default function Portafolio() {
 
       </div>
 
+
+
       <div className="contactme">
 
+        <h1>CORREO</h1>
+        <div className="correo"></div>
+          <span id="url" className='correotxt'>[email protected]</span>
+          <button className='correobtn' onClick={() => copiarAlPortapapeles('url')}>
+            {copiado ? 'Copiado' : 'Copiar'}
+          </button>
+
+        <h1>TELEFONO</h1>
+        <div className="telefono">
+          <span id="url" className='correotxt'>+52 3141576598</span>
+          <button className='correobtn' onClick={() => copiarAlPortapapeles('url')}>
+            {copiado ? 'Copiado' : 'Copiar'}
+          </button>
+        </div>
+
       </div>
 
 
+
+
+
       </div>   
       <script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
     </div>