Contactos added v1

AmbrizAlberto · Apr 6, 2024 · c3a2154 · c3a2154
1 parent 7429b69
commit c3a2154
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 28 deletions.
diff --git a/app/css/main.css b/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 85%, #7bccffd5 91%,  #7bccff8e 97%);
+    background-image: linear-gradient(to bottom, #ff7e5f 20%, #ff7f5f 20%, #31405fe7 40%, #31405f 83%, #000000 89%,  #000000 97%);
     font-family: 'Roboto', sans-serif;
     height: auto;
 }
@@ -163,18 +163,20 @@ button{
     transition: 1000ms;
     color: rgb(52, 52, 52);
     font-size: 160%;
+    transition: 500ms;
 }
 .container-project:hover{
     background-color: rgba(65, 65, 65, 0.622);
     color: white;
     box-shadow: 0 0 10px rgb(0, 0, 0);
     cursor: pointer;
-    transition: 1000ms;
+    transition: 500ms;
 }
 
 .container-project .nameprj{
     font-size: 27px;
     font-weight: bold;
+    transition: 300ms;
 }
 
 .container-project .categorie{
@@ -211,12 +213,12 @@ button{
     display: none;
     position: relative;
     color:transparent;
-    transition: 1000ms;
+    transition: 500ms;
 }
 
 .container-project .github i{
     margin-right: 2%;
-    transition: 1000ms;
+    transition: 500ms;
 }
 
 .container-project:hover .categorie{
@@ -225,36 +227,44 @@ button{
 }
 
 .container-project:hover .github{
+    transition-delay: 500ms;
     width: 100%;
     display:inline;
     color: white;
-    transition: 1000ms;
+    transition: 500ms;
 }
 
 .contactme{
     margin: auto;
-    margin-top: 15%;
-    color: #000000;
+    margin-top: 20%;
+    color: #ffffff;
 }
 .contactme h1{
+    color: rgb(255, 255, 255);
     margin-bottom: 0%;
 }
+.contactme .contactmett{
+    font-size: 300%;
+    color: rgb(255, 255, 255);
+    text-shadow: 0 0 50px rgba(255, 255, 255, 0.702);
+}
 .contactme .correotxt{
     font-size: 200%;
+    color: rgb(255, 255, 255);
 }
 
 .contactme .correobtn{
     cursor: pointer;
-    color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
     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;
+    border: 1px solid rgb(255, 255, 255);
+    background-color: #ffffff14;
     transition: 500ms;
 }
 .contactme .correobtn:hover{
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.467);
+    box-shadow: 0 0 30px rgb(55, 182, 255);
     transition: 500ms;
 }
diff --git a/app/page.jsx b/app/page.jsx
@@ -12,7 +12,8 @@ import Navbar from './components/navbar';
 
 export default function Portafolio() {
 
-  const [copiado, setCopiado] = useState(false);
+  const [copiadoCorreo, setCopiadoCorreo] = useState(false);
+  const [copiadoTelefono, setCopiadoTelefono] = useState(false);
 
   function copiarAlPortapapeles(id_elemento) {
     const aux = document.createElement('input');
@@ -23,7 +24,19 @@ export default function Portafolio() {
     document.body.removeChild(aux);
 
     // Cambiar el estado para mostrar "Copiado"
-    setCopiado(true);
+    setCopiadoCorreo(true);
+  }
+
+  function copiarTelefono(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"
+    setCopiadoTelefono(true);
   }
 
   return (
@@ -182,28 +195,31 @@ export default function Portafolio() {
 
       <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>
+      <h1 className="contactmett">CONTACTAME</h1>
 
+      <h1>CORREO</h1>
+      <div className="correo">
+        <span id="url" className='correotxt'>[email protected]</span>
+        <button className='correobtn' onClick={() => copiarAlPortapapeles('url')}>
+          {copiadoCorreo ? 'Copiado' : 'Copiar'}
+        </button>
       </div>
 
+      <h1>TELEFONO</h1>
+      <div className="telefono">
+        <span id="tel" className='correotxt'>+52 3141576598</span>
+        <button className='correobtn' onClick={() => copiarTelefono('tel')}>
+          {copiadoTelefono ? 'Copiado' : 'Copiar'}
+        </button>
+      </div>
+
+      </div>
 
 
 
 
-      </div>   
+
+      </div>
       <script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
     </div>