style.css

Author: zeroami

style.css

@@ -269,24 +269,31 @@ h1 {
     transform: translateX(3px);
 }
 
+.quote {
+  position: relative;
+  font-family: 'Roboto Mono', monospace;
+  background: rgba(30,41,59,0.9);
+  padding: 2.5rem;
+  border-radius: 15px;
+  border-left: 6px solid var(--primary);
+  box-shadow: 0 0 15px rgba(59,130,246,0.3);
+  overflow: hidden; /* oculta lo que "no se ha escrito" */
+  margin: 2.5rem 0;
+}
+
+/* el texto que se teclea */
 .quote span.typing {
   display: inline-block;
-  white-space: pre-wrap;      /* Para respetar saltos de línea */
-  overflow: hidden;
-  font-family: 'Roboto Mono', monospace;
+  width: 0ch;                /* ⭐ ancho inicial oculto */
+  white-space: pre-wrap;     /* respeta saltos de línea */
+  word-break: break-word;    /* permite partir palabras largas */
+  overflow: hidden;          /* oculta lo que excede el width */
   font-size: 1.3rem;
   line-height: 1.6;
-  /* Anima de 0 hasta N caracteres, y steps(N) asegura 1 paso = 1 letra */
-  animation: typing 4s steps(70, end) forwards; 
+  animation: typing 4s steps(80) forwards; /* 80 ≈ número de caracteres */
 }
 
-/* Ajusta “70ch” al número de caracteres de tu frase. */
-@keyframes typing {
-  from { width: 0ch; }
-  to   { width: 70ch; }
-}
-
-/* Cursor que parpadea */
+/* cursor parpadeante */
 .quote span.typing::after {
   content: '';
   display: inline-block;
@@ -298,18 +305,33 @@ h1 {
   animation: blink-caret .75s step-end infinite;
 }
 
+@keyframes typing {
+  from { width: 0ch; }
+  to   { width: 80ch; } /* mismo valor que en steps() */
+}
+
 @keyframes blink-caret {
   0%,100% { opacity: 0; }
   50%     { opacity: 1; }
 }
 
-
+/* autor tras el texto */
+.quote span.author {
+  display: block;
+  opacity: 0;
+  margin-top: 0.5rem;
+  font-size: 1.3rem;
+  line-height: 1.6;
+  animation: fadeInAuthor 1s ease forwards;
+  animation-delay: 4s;
+}
 @keyframes fadeInAuthor {
   from { opacity: 0; transform: translateY(10px); }
   to   { opacity: 1; transform: translateY(0); }
 }
 
 
+
 /* Roadmap */
 .roadmap-container {
     overflow-x: auto;