{"id":6,"date":"2026-08-12T00:00:03","date_gmt":"2026-08-12T00:00:03","guid":{"rendered":"https:\/\/portfoo-lio.com\/staging\/?page_id=6"},"modified":"2026-08-31T21:18:04","modified_gmt":"2026-08-31T21:18:04","slug":"pagina-de-inicio","status":"publish","type":"page","link":"https:\/\/portfoo-lio.com\/staging\/","title":{"rendered":"INICIO"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* Estilos generales *\/\n.contenedor-portafolio {\n  text-align: center;\n  padding: 20px;\n}\n\n\/* EFECTO GLITCH PAREJO EN \"DISE\u00d1ADOR GR\u00c1FICO\" *\/\n.titulo-glitch {\n  font-family: 'Arial', sans-serif;\n  font-size: 3rem;\n  font-weight: 900;\n  text-transform: uppercase;\n  letter-spacing: 4px;\n  position: relative;\n  display: inline-block;\n  color: #000;\n  line-height: 1.1; \/* Asegura un interlineado compacto *\/\n}\n\n\/* Capas duplicadas *\/\n.titulo-glitch::before,\n.titulo-glitch::after {\n  content: attr(data-text);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n\/* Capa Rosa \/ Roja *\/\n.titulo-glitch::before {\n  left: -3px;\n  text-shadow: 3px 0 #ff0055;\n  animation: glitch-anim-1 2.5s infinite linear alternate-reverse;\n}\n\n\/* Capa Azul \/ Cian *\/\n.titulo-glitch::after {\n  left: 3px;\n  text-shadow: -3px 0 #00e5ff;\n  animation: glitch-anim-2 2s infinite linear alternate-reverse;\n}\n\n\/* Animaciones corregidas para cubrir ambas l\u00edneas (hasta 200px de altura) *\/\n@keyframes glitch-anim-1 {\n  0%   { clip: rect(0px, 9999px, 40px, 0); }\n  20%  { clip: rect(35px, 9999px, 90px, 0); }\n  40%  { clip: rect(80px, 9999px, 140px, 0); }\n  60%  { clip: rect(10px, 9999px, 60px, 0); }\n  80%  { clip: rect(110px, 9999px, 180px, 0); }\n  100% { clip: rect(20px, 9999px, 200px, 0); }\n}\n\n@keyframes glitch-anim-2 {\n  0%   { clip: rect(70px, 9999px, 130px, 0); }\n  20%  { clip: rect(10px, 9999px, 50px, 0); }\n  40%  { clip: rect(120px, 9999px, 190px, 0); }\n  60%  { clip: rect(40px, 9999px, 100px, 0); }\n  80%  { clip: rect(0px, 9999px, 80px, 0); }\n  100% { clip: rect(90px, 9999px, 160px, 0); }\n}\n\n\/* EFECTO M\u00c1QUINA DE ESCRIBIR EN \"Lionel Ordu\u00f1a\" *\/\n.subtitulo-animado {\n  font-family: monospace;\n  font-size: 1.3rem;\n  color: #333;\n  display: inline-block;\n  white-space: nowrap;\n  border-right: 2px solid #000;\n  overflow: hidden;\n  margin-top: 15px;\n  animation: \n    escribir 2.5s steps(13) infinite alternate,\n    parpadeo 0.75s step-end infinite;\n}\n\n@keyframes escribir {\n  from { width: 0; }\n  to { width: 13ch; }\n}\n\n@keyframes parpadeo {\n  from, to { border-color: transparent; }\n  50% { border-color: #000; }\n}\n<\/style>\n\n<div class=\"contenedor-portafolio\">\n  <!-- T\u00edtulo principal con efecto Glitch -->\n  <h1 class=\"titulo-glitch\" data-text=\"DISE\u00d1ADOR GR\u00c1FICO\">DISE\u00d1ADOR GR\u00c1FICO<\/h1>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-system-sans-serif-font-family\" style=\"margin-right:0rem;margin-left:0;padding-right:0rem;padding-left:0rem;font-size:clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem);font-style:normal;font-weight:400\"><strong>Lionel Ordu\u00f1a<\/strong><\/h2>\n\n\n\n<div class=\"contenedor-subtitulo\">\n  <span id=\"texto-animado\"><\/span><span class=\"cursor-typewriter\">|<\/span>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    \/\/ Frases que destacan tus habilidades y servicios\n    const frases = [\n      \"Dise\u00f1ador Web & UI\",\n      \"Branding & Identidad Visual\",\n      \"Estrategia & Direcci\u00f3n de Arte\",\n      \"Contenido Visual & Social Media\"\n    ];\n\n    let i = 0;\n    let j = 0;\n    let actual = \"\";\n    let borrando = false;\n    const elem = document.getElementById(\"texto-animado\");\n\n    function animar() {\n      actual = frases[i];\n\n      if (borrando) {\n        elem.textContent = actual.substring(0, j - 1);\n        j--;\n      } else {\n        elem.textContent = actual.substring(0, j + 1);\n        j++;\n      }\n\n      let velocidad = borrando ? 35 : 70;\n\n      if (!borrando && j === actual.length) {\n        velocidad = 2200; \/\/ Tiempo de lectura en pantalla\n        borrando = true;\n      } else if (borrando && j === 0) {\n        borrando = false;\n        i = (i + 1) % frases.length;\n        velocidad = 400;\n      }\n\n      setTimeout(animar, velocidad);\n    }\n\n    animar();\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>DISE\u00d1ADOR GR\u00c1FICO Lionel Ordu\u00f1a |<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"l0061002","author_link":"https:\/\/portfoo-lio.com\/staging\/author\/l0061002\/"},"uagb_comment_info":0,"uagb_excerpt":"DISE\u00d1ADOR GR\u00c1FICO Lionel Ordu\u00f1a |","_links":{"self":[{"href":"https:\/\/portfoo-lio.com\/staging\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portfoo-lio.com\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/portfoo-lio.com\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/portfoo-lio.com\/staging\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/portfoo-lio.com\/staging\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":17,"href":"https:\/\/portfoo-lio.com\/staging\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":46,"href":"https:\/\/portfoo-lio.com\/staging\/wp-json\/wp\/v2\/pages\/6\/revisions\/46"}],"wp:attachment":[{"href":"https:\/\/portfoo-lio.com\/staging\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}