{"id":21,"date":"2026-09-15T15:56:39","date_gmt":"2026-09-15T15:56:39","guid":{"rendered":"https:\/\/pabloromero.xyz\/?page_id=21"},"modified":"2026-09-22T09:04:36","modified_gmt":"2026-09-22T09:04:36","slug":"skills","status":"publish","type":"page","link":"https:\/\/pabloromero.xyz\/index.php\/skills\/","title":{"rendered":"skills"},"content":{"rendered":"\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=VT323&family=Share+Tech+Mono&display=swap');\n\n\/* full-screen immersion: hide GeneratePress chrome on this page only *\/\nbody.page-id-21{background:#010301 !important;margin:0 !important;}\nbody.page-id-21 #masthead,\nbody.page-id-21 .site-header,\nbody.page-id-21 .entry-title,\nbody.page-id-21 .entry-header,\nbody.page-id-21 .site-info,\nbody.page-id-21 footer.site-info,\nbody.page-id-21 #footer-widgets{display:none !important;}\nbody.page-id-21 .inside-article{padding:0 !important;background:transparent !important;border:0 !important;}\nbody.page-id-21 .site-content,\nbody.page-id-21 .site-main,\nbody.page-id-21 #primary,\nbody.page-id-21 .content-area,\nbody.page-id-21 #content,\nbody.page-id-21 .container.grid-container{padding:0 !important;margin:0 !important;max-width:none !important;width:100% !important;}\nbody.page-id-21 #page,\nbody.page-id-21 .site{background:#010301 !important;}\n\n#pr-skills{\n  --green:#19b955;\n  --green-b:#2fff7a;\n  --green-p:#b9ffd0;\n  position:relative;\n  width:100vw;\n  margin-left:calc(50% - 50vw);\n  margin-right:calc(50% - 50vw);\n  min-height:100vh;\n  background:radial-gradient(ellipse at 50% 45%, #041006 0%, #020602 55%, #000200 100%);\n  overflow:hidden;\n  font-family:\"Share Tech Mono\",\"Courier New\",monospace;\n  color:var(--green-b);\n  user-select:none;\n  cursor:crosshair;\n}\n#pr-skills *{box-sizing:border-box;}\n\n\/* starfield behind *\/\n#pr-stars{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;}\n\n\/* 3D scene *\/\n.pr-skills-scene{\n  position:absolute;inset:0;z-index:2;\n  perspective:620px;\n  perspective-origin:50% 48%;\n  pointer-events:none;\n}\n.pr-skills-space{position:absolute;inset:0;transform-style:preserve-3d;}\n.pr-skill{\n  position:absolute;left:50%;top:50%;\n  font-family:\"VT323\",\"Share Tech Mono\",monospace;\n  white-space:nowrap;\n  font-size:46px;\n  letter-spacing:2px;\n  color:var(--green-b);\n  text-shadow:0 0 6px var(--green-b),0 0 18px rgba(47,255,122,.55);\n  will-change:transform,opacity;\n  transform:translate(-50%,-50%) translateZ(-2000px);\n  opacity:0;\n}\n.pr-skill.dim{color:var(--green);text-shadow:0 0 5px var(--green),0 0 14px rgba(25,185,85,.5);}\n\n\/* HUD frame *\/\n.pr-skills-frame{position:absolute;inset:0;z-index:3;pointer-events:none;}\n.pr-skills-frame::before,\n.pr-skills-frame::after{\n  content:\"\";position:absolute;width:46px;height:46px;\n  border:2px solid var(--green);opacity:.7;\n}\n.pr-skills-frame::before{left:22px;top:22px;border-right:0;border-bottom:0;}\n.pr-skills-frame::after{right:22px;bottom:22px;border-left:0;border-top:0;}\n.pr-corner-tr,.pr-corner-bl{position:absolute;width:46px;height:46px;border:2px solid var(--green);opacity:.7;}\n.pr-corner-tr{right:22px;top:22px;border-left:0;border-bottom:0;}\n.pr-corner-bl{left:22px;bottom:22px;border-right:0;border-top:0;}\n\n.pr-skills-head{\n  position:absolute;top:40px;left:0;right:0;text-align:center;\n  z-index:4;pointer-events:none;\n}\n.pr-skills-title{\n  font-family:\"VT323\",\"Share Tech Mono\",monospace;\n  font-size:clamp(46px,9vw,104px);\n  line-height:.9;letter-spacing:10px;color:var(--green-b);\n  text-shadow:0 0 10px var(--green-b),0 0 34px rgba(47,255,122,.6);\n  animation:pr-flick 3.2s infinite steps(60);\n}\n.pr-skills-sub{\n  margin-top:8px;font-size:clamp(11px,1.6vw,15px);\n  color:var(--green);opacity:.85;letter-spacing:1px;\n}\n.pr-skills-cap{\n  position:absolute;bottom:34px;left:0;right:0;text-align:center;\n  z-index:4;font-size:clamp(10px,1.5vw,14px);color:var(--green);opacity:.8;\n}\n.pr-skills-back{\n  position:absolute;top:26px;left:40px;z-index:5;\n  font-family:\"Share Tech Mono\",monospace;font-size:15px;\n  color:var(--green-b);text-decoration:none;letter-spacing:1px;\n  border:1px solid rgba(25,185,85,.5);padding:6px 12px;border-radius:3px;\n  background:rgba(2,10,4,.5);pointer-events:auto;transition:.15s;\n}\n.pr-skills-back:hover{background:rgba(25,185,85,.16);box-shadow:0 0 14px rgba(47,255,122,.4);color:#fff;}\n\n.pr-sound{\n  position:absolute;top:26px;right:40px;z-index:5;\n  font-family:\"Share Tech Mono\",monospace;font-size:15px;\n  color:var(--green-b);letter-spacing:1px;cursor:pointer;\n  border:1px solid rgba(25,185,85,.5);padding:6px 12px;border-radius:3px;\n  background:rgba(2,10,4,.5);pointer-events:auto;transition:.15s;\n}\n.pr-sound:hover{background:rgba(25,185,85,.16);box-shadow:0 0 14px rgba(47,255,122,.4);color:#fff;}\n.pr-sound.on{border-color:var(--green-b);box-shadow:0 0 12px rgba(47,255,122,.5);}\n\n\/* CRT scanlines + vignette *\/\n.pr-scanlines{\n  position:absolute;inset:0;z-index:6;pointer-events:none;\n  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.16) 3px,rgba(0,0,0,0) 4px);\n  mix-blend-mode:multiply;\n}\n.pr-vignette{\n  position:absolute;inset:0;z-index:6;pointer-events:none;\n  box-shadow:inset 0 0 220px 40px rgba(0,0,0,.85);\n}\n@keyframes pr-flick{\n  0%,97%,100%{opacity:1;}\n  98%{opacity:.72;}99%{opacity:.9;}\n}\n@media(max-width:640px){\n  .pr-skill{font-size:34px;}\n  .pr-skills-back{left:20px;top:18px;font-size:13px;}\n  .pr-sound{right:20px;top:18px;font-size:13px;}\n}\n<\/style>\n\n<div id=\"pr-skills\">\n  <canvas id=\"pr-stars\"><\/canvas>\n\n  <div class=\"pr-skills-scene\"><div class=\"pr-skills-space\" id=\"pr-space\"><\/div><\/div>\n\n  <div class=\"pr-skills-frame\">\n    <span class=\"pr-corner-tr\"><\/span>\n    <span class=\"pr-corner-bl\"><\/span>\n  <\/div>\n\n  <div class=\"pr-skills-head\">\n    <div class=\"pr-skills-title\">SKILLS<\/div>\n    <div class=\"pr-skills-sub\">\/\/ warp_drive.js \u2014 engaged &nbsp;\u00b7&nbsp; incoming data stream<\/div>\n  <\/div>\n\n  <a class=\"pr-skills-back\" href=\"\/\">&lsaquo; cd \/home<\/a>\n  <button class=\"pr-sound on\" id=\"pr-sound\" type=\"button\" aria-label=\"Activar o silenciar sonido\">&#9834; sonido: on<\/button>\n  <audio id=\"pr-audio\" loop preload=\"auto\" src=\"\/wp-content\/uploads\/2026\/09\/Hapines-space-out-of-control.mp3\"><\/audio>\n\n  <div class=\"pr-skills-cap\">&#9834; Japinext Space Outocontrol &nbsp;\u00b7&nbsp; music created by Pablo Romero &nbsp;\u00b7&nbsp; no rights reserved<\/div>\n\n  <div class=\"pr-scanlines\"><\/div>\n  <div class=\"pr-vignette\"><\/div>\n<\/div>\n\n<script>\n(function(){\n  var root=document.getElementById('pr-skills');\n  if(!root||root.dataset.init)return; root.dataset.init='1';\n\n  \/* ---------- SKILLS ---------- *\/\n  var SKILLS=[\n    \"SEO \u00b7 MORE THAN 10 YEARS\",\"AI MASTER\",\"SEO MASTER\",\"WORDPRESS \u00b7 20+ YEARS\",\n    \"TECHNICAL SEO\",\"PROGRAMMATIC SEO\",\"LINK BUILDING\",\"CORE WEB VITALS\",\n    \"RANK MATH\",\"SCHEMA \/ JSON-LD\",\"GOOGLE ANALYTICS\",\"SEARCH CONSOLE\",\n    \"AI COPYWRITING\",\"AUTOMATION\",\"WOOCOMMERCE\",\"PHP\",\n    \"HTML \u00b7 CSS \u00b7 JS\",\"KEYWORD RESEARCH\",\"CONTENT STRATEGY\",\"SERP ANALYSIS\",\n    \"ELEMENTOR\",\"WPO OPTIMIZATION\",\"PROMPT ENGINEERING\",\"SEO MIGRATIONS\"\n  ];\n\n  \/* ---------- FLYING TEXT (CSS 3D) ---------- *\/\n  var space=document.getElementById('pr-space');\n  var Z_FAR=-2100, Z_NEAR=592, PERSP=620;\n  var N=Math.min(SKILLS.length,12);\n  var items=[], idx=0;\n\n  function reset(it,stagger){\n    it.text=SKILLS[idx % SKILLS.length]; idx++;\n    it.el.textContent=it.text;\n    it.el.classList.toggle('dim', Math.random()<0.4);\n    it.z=Z_FAR - (stagger? Math.random()*1600:0);\n    \/\/ spread across the field, avoid dead-center pileup\n    var ang=Math.random()*Math.PI*2, rad=60+Math.random()*300;\n    it.x=Math.cos(ang)*rad*(1+Math.random());\n    it.y=Math.sin(ang)*rad*0.7;\n    it.speed=1.7+Math.random()*1.7;\n  }\n  for(var i=0;i<N;i++){\n    var el=document.createElement('div'); el.className='pr-skill';\n    space.appendChild(el);\n    var it={el:el}; reset(it,true); items.push(it);\n  }\n\n  function frame(){\n    for(var i=0;i<items.length;i++){\n      var it=items[i];\n      it.z+=it.speed*4;\n      if(it.z>=Z_NEAR){ reset(it,false); continue; }\n      var t=(it.z-Z_FAR)\/(Z_NEAR-Z_FAR); \/\/ 0..1\n      var op = t<0.12 ? t\/0.12 : (t>0.90 ? Math.max(0,(1-t)\/0.10) : 1);\n      it.el.style.opacity=op.toFixed(3);\n      it.el.style.transform='translate(-50%,-50%) translate('+it.x.toFixed(1)+'px,'+it.y.toFixed(1)+'px) translateZ('+it.z.toFixed(1)+'px)';\n    }\n    rafT=requestAnimationFrame(frame);\n  }\n  var rafT=requestAnimationFrame(frame);\n\n  \/* ---------- STARFIELD (warp) ---------- *\/\n  var cv=document.getElementById('pr-stars'), ctx=cv.getContext('2d');\n  var W,H,CX,CY,stars=[],SN=520,DPR=Math.min(window.devicePixelRatio||1,2);\n  function resize(){\n    W=root.clientWidth; H=root.clientHeight;\n    cv.width=W*DPR; cv.height=H*DPR; cv.style.width=W+'px'; cv.style.height=H+'px';\n    ctx.setTransform(DPR,0,0,DPR,0,0); CX=W\/2; CY=H*0.48;\n  }\n  function star(){return {x:(Math.random()*2-1)*W, y:(Math.random()*2-1)*H, z:Math.random()*W};}\n  function initStars(){stars=[];for(var i=0;i<SN;i++)stars.push(star());}\n  resize(); initStars();\n\n  function drawStars(){\n    ctx.fillStyle='rgba(2,6,3,0.35)'; ctx.fillRect(0,0,W,H);\n    for(var i=0;i<stars.length;i++){\n      var s=stars[i], px=s.x, py=s.y, pz=s.z;\n      s.z-=3.4;\n      if(s.z<=1){ stars[i]=star(); stars[i].z=W; continue; }\n      var k=128\/s.z, x=CX+s.x*k, y=CY+s.y*k;\n      var pk=128\/pz, ox=CX+px*pk, oy=CY+py*pk;\n      if(x<0||x>W||y<0||y>H){continue;}\n      var b=Math.max(0,1-s.z\/W);\n      ctx.strokeStyle='rgba('+Math.round(60+120*b)+',255,'+Math.round(120+80*b)+','+(0.25+0.7*b)+')';\n      ctx.lineWidth=Math.max(0.5,2.2*b);\n      ctx.beginPath(); ctx.moveTo(ox,oy); ctx.lineTo(x,y); ctx.stroke();\n    }\n    rafS=requestAnimationFrame(drawStars);\n  }\n  var rafS=requestAnimationFrame(drawStars);\n\n  var rt; window.addEventListener('resize',function(){clearTimeout(rt);rt=setTimeout(resize,150);});\n\n  \/* ---------- MUSIC (default ON; browsers require ONE user gesture before audio plays) ---------- *\/\n  var audio=document.getElementById('pr-audio');\n  var sbtn=document.getElementById('pr-sound');\n  var wantOn=true;\n  audio.volume=0.55;\n  function paint(){\n    if(wantOn){ sbtn.innerHTML='\u266a sonido: on'; sbtn.classList.add('on'); }\n    else { sbtn.innerHTML='\u266a sonido: off'; sbtn.classList.remove('on'); }\n  }\n  function play(){ var p=audio.play(); if(p&&p.catch)p.catch(function(){}); }\n  paint();\n  try{ play(); }catch(e){}  \/* attempt immediate autoplay (usually blocked by the browser until a gesture) *\/\n  \/* button reconciles with the REAL state: if it's not sounding, one click starts it *\/\n  sbtn.addEventListener('click',function(e){\n    e.stopPropagation();\n    if(audio.paused){ wantOn=true; play(); } else { wantOn=false; audio.pause(); }\n    paint();\n  });\n  \/* first gesture anywhere (press \/ touch \/ key) kicks the music in \u2014 as immediate as browsers allow *\/\n  var GEST=['pointerdown','touchstart','keydown'];\n  function kick(e){\n    if(e && sbtn && (e.target===sbtn || sbtn.contains(e.target))) return; \/* let the button handle itself *\/\n    if(wantOn && audio.paused) play();\n    if(!audio.paused){ GEST.forEach(function(ev){ document.removeEventListener(ev,kick); }); }\n  }\n  GEST.forEach(function(ev){ document.addEventListener(ev,kick); });\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>SKILLS \/\/ warp_drive.js \u2014 engaged &nbsp;\u00b7&nbsp; incoming data stream &lsaquo; cd \/home &#9834; sonido: on &#9834; Japinext Space Outocontrol &nbsp;\u00b7&nbsp; music created by Pablo Romero &nbsp;\u00b7&nbsp; no rights reserved<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/pabloromero.xyz\/index.php\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pabloromero.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pabloromero.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pabloromero.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pabloromero.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":8,"href":"https:\/\/pabloromero.xyz\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/pabloromero.xyz\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/pabloromero.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}