App - Copy this React, Tailwind Component to your project

.img { display: flex; flex direction: column; justify content: center; align items: center; text align: center; margin: 0 auto; } .img img { width: 120px; height: auto; border radius: 50%; margin bottom: 1rem; } .social icons { display: flex; gap: 15px; margin bottom: 0.5rem; } .redes texto { font size: 14px; color: #000000; max width: 250px; } nav { display: flex; flex direction: column; align items: center; text align: center; gap: 20px; } nav h1 { font family: 'Press Start 2P', cursive; color: rgb(0, 0, 0); margin: 20px 0 0 0; } nav ul { display: flex; gap: 30px; list style: none; padding: 0; } .img container { display: flex; flex direction: column; align items: center; max width: 300px; margin: 0 auto; text align: center; } .logo { width: 100%; max width: 200px; height: auto; border radius: 8px; margin bottom: 1rem; } .social section { display: flex; flex direction: column; align items: center; } .social icons { display: flex; gap: 15px; margin bottom: 0.5rem; } .redes texto { font size: 14px; color: #555; max width: 250px; } i { color: black; } a { text decoration: none; color: black; padding: 10px; border radius: 30px; } .about h1 { display: flex; justify content: center; font size: 40px; } .about p { width: 300px; margin: 0 auto; font size: 15px; } .about ul { list style: none; padding: 0; margin: 10px auto; width: fit content; } .about li { list style: none; width: 130px; margin: 10px auto; border radius: 30px; padding: 10px; text align: center; } .projects { text align: center; margin top: 40px; } .projects h1 { font size: 2rem; font weight: bold; margin bottom: 20px; } .tech stack { display: flex; justify content: center; gap: 30px; flex wrap: wrap; } .tech item { display: flex; flex direction: column; align items: center; justify content: center; text align: center; width: 80px; } .tech item i { font size: 50px; border: solid 2px black; color: #000000; padding: 15px; border radius: 20px; margin bottom: 10px; transition: none; filter: contrast(200%) brightness(150%) pixelate(3px); } @keyframes dispersoEntrada { 0% { transform: translate( 100px, 100px); opacity: 0; } 50% { transform: translate(30px, 30px); opacity: 0.5; } 100% { transform: translate(0, 0); opacity: 1; } } .projects { text align: center; margin top: 40px; } .projects h1 { font size: 2rem; font weight: bold; margin bottom: 20px; } .tech stack { display: flex; justify content: center; gap: 30px; flex wrap: wrap; } .tech item { display: flex; flex direction: column; align items: center; justify content: center; text align: center; width: 80px; animation: dispersoEntrada 3s ease out; } .tech item i { font size: 50px; border: solid 2px black; color: #000000; padding: 15px; border radius: 20px; margin bottom: 10px; transition: none; filter: contrast(200%) brightness(150%) pixelate(3px); animation: dispersoEntrada 3s ease out; } .trabajos { display: flex; justify content: center; align items: center; margin top: 40px; animation: dispersoEntrada 3s ease out; flex wrap: wrap; gap: 20px; } .proyecto1 { display: flex; justify content: center; align items: center; margin top: 20px; overflow: hidden; } .card { background color: #0d0d0d; color: #f8f8f8; width: 280px; padding: 25px 20px; border radius: 20px 0 20px 0; text align: center; box shadow: 0 4px 8px rgba(255, 255, 255, 0.05); border: 2px solid #2e2e2e; transition: transform 0.3s ease, box shadow 0.3s ease; display: flex; flex direction: column; justify content: space between; overflow: hidden; font family: 'Press Start 2P', cursive; } .card:hover { transform: translateY( 5px); box shadow: 0 6px 15px rgba(255, 255, 255, 0.1); border color: #4affb0; } .card title { font size: 1rem; margin bottom: 20px; color: #fff; text shadow: 1px 1px #00ffcc; } .card description { font size: 0.75rem; line height: 1.6; color: #ccc; opacity: 0.95; font size: 20px; word wrap: break word; text align: justify; } @media screen and (max width: 768px) { .trabajos { flex direction: column; align items: stretch; } .card { width: 90%; margin: 0 auto; } } /* Responsive Design: Ajustes para dispositivos móviles */ @media (max width: 768px) { .card { width: 90%; /* Reducción del ancho en móviles */ margin: 0 auto; /* Centra la tarjeta en pantallas pequeñas */ height: auto; /* Ajuste de la altura en dispositivos móviles */ padding: 15px; /* Menos padding en pantallas pequeñas */ } .card title { font size: 1.5rem; /* Ajuste de tamaño de fuente en móviles */ } .card description { font size: 0.9rem; /* Ajuste de tamaño de fuente para descripción */ } } /* Ajustes para pantallas más grandes (PC) */ @media (min width: 769px) { .card { width: 280px; /* Ancho normal para PC */ height: 350px; /* Altura normal para PC */ } .card title { font size: 1.8rem; /* Tamaño de fuente para PC */ } .card description { font size: 1rem; /* Tamaño de fuente para descripción en PC */ } } .card title { font family: 'Press Start 2P', cursive; font size: 1.8rem; margin bottom: 15px; color: white; } .card description { font size: 1rem; line height: 1.5; margin bottom: 20px; color: white; opacity: 0.9; word wrap: break word; } .tech icon { font size: 30px; color: white; border: 2px solid white; padding: 10px; border radius: 15px; transition: transform 0.3s ease; } .tech icon:hover { transform: scale(1.2); } .card link { font size: 1rem; color: #ffffff; text decoration: none; border: 2px solid white; padding: 8px 15px; border radius: 20px; transition: background color 0.3s ease, color 0.3s ease; } @keyframes dispersoEntrada { 0% { transform: translate( 100px, 100px); opacity: 0; } 50% { transform: translate(30px, 30px); } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes dispersoEntrada2 { 0% { transform: translate(100px, 100px); opacity: 0; } 50% { transform: translate( 30px, 30px); opacity: 0.5; } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes dispersoEntrada3 { 0% { transform: translate( 100px, 100px); opacity: 0; } 50% { transform: translate(50px, 50px); opacity: 0.5; } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes dispersoEntrada4 { 0% { transform: translate(100px, 100px); opacity: 0; } 50% { transform: translate( 50px, 50px); opacity: 0.5; } 100% { transform: translate(0, 0); opacity: 1; } } * { animation: dispersoEntrada 3s ease out; } .projects { text align: center; margin top: 40px; } .projects h1 { font size: 2rem; font weight: bold; margin bottom: 20px; animation: dispersoEntrada2 3s ease out; } .tech stack { cursor: pointer; display: flex; justify content: center; gap: 30px; flex wrap: wrap; animation: dispersoEntrada3 3s ease out; } .tech item { display: flex; flex direction: column; align items: center; justify content: center; text align: center; width: 80px; animation: dispersoEntrada4 3s ease out; } .tech item i { font size: 50px; border: solid 2px black; color: #000000; padding: 15px; border radius: 20px; margin bottom: 10px; transition: none; filter: contrast(200%) brightness(150%) pixelate(3px); } nav { animation: dispersoEntrada 3s ease out; } nav h1 { font family: 'Press Start 2P', cursive; color: rgb(0, 0, 0); margin: 20px 0 0 0; } nav ul { display: flex; gap: 30px; list style: none; padding: 0; animation: dispersoEntrada2 3s ease out; } .about { animation: dispersoEntrada3 3s ease out; } .about h1 { display: flex; justify content: center; font size: 40px; } .about p { width: 300px; margin: 0 auto; font size: 15px; } .about ul { list style: none; padding: 0; margin: 10px auto; width: fit content; } .about li { list style: none; border: solid 2px black; width: 130px; margin: 10px auto; border radius: 30px; padding: 10px; text align: center; } @media (max width: 1024px) { nav ul { flex direction: column; gap: 15px; } .tech stack { gap: 20px; } .card { width: 90%; height: auto; } .tech item { width: 60px; } .tech item i { font size: 40px; } .about p { width: 90%; } .about li { width: 100px; } .img img { width: 100px; } } @media (max width: 768px) { nav { flex direction: column; align items: center; padding: 10px; } nav h1 { font size: 1rem; text align: center; } .img img { width: 80px; } nav ul { flex direction: column; gap: 10px; } .about h1 { font size: 25px; } .about p { font size: 14px; } .about li { width: 90px; font size: 13px; padding: 8px; } .projects h1 { font size: 1.5rem; } .tech stack { gap: 15px; } .tech item { width: 50px; } .tech item i { font size: 35px; padding: 10px; } .card { width: 95%; height: auto; padding: 15px; } .card title { font size: 1.2rem; } .card description { font size: 0.9rem; } .tech icon { font size: 20px; padding: 8px; } .card link { font size: 0.9rem; padding: 6px 12px; } } @media (max width: 480px) { .about p { font size: 13px; } .tech item i { font size: 30px; } .card title { font size: 1rem; } .card description { font size: 0.85rem; } .card link { font size: 0.8rem; } } @media (max width: 768px) { nav, nav ul { flex direction: column; align items: center; } .about p, .card description { font size: 14px; } .tech item i { font size: 35px; padding: 10px; } } @media (max width: 1024px) { nav { flex direction: column; gap: 15px; padding: 15px; } .img img { width: 100px; } nav ul { flex direction: column; gap: 15px; } } /* Responsivo: hasta 768px */ @media (max width: 768px) { nav h1 { font size: 1rem; } nav ul { flex direction: column; gap: 10px; } .img img { width: 80px; } } /* Responsivo: hasta 480px */ @media (max width: 480px) { nav { padding: 10px; } nav h1 { font size: 0.9rem; text align: center; } nav ul { gap: 8px; } .img img { width: 70px; } } @media (max width: 1024px) { nav { padding: 25px 30px; gap: 20px; } .img img { width: 120px; } nav ul { flex direction: column; gap: 20px; } } @media (max width: 480px) { nav { padding: 20px; gap: 16px; } nav h1 { font size: 1rem; text align: center; } nav ul { gap: 14px; } .img img { width: 85px; } } @media (max width: 480px) { nav { padding: 20px; gap: 24px; } nav h1 { font size: 1rem; text align: center; } .img img { width: 80px; } nav ul { display: flex; flex wrap: wrap; justify content: center; gap: 20px; padding: 0 10px; } nav ul li { flex: 1 1 40%; /* Distribuye los íconos en dos columnas si es necesario */ display: flex; justify content: center; } nav ul li a { font size: 1.2rem; } } mejora el css que esta aca todo damelo con mas efectos las secciones mejoralas etc