<\/p>\n\n\n\n
<style data-wp-block-html=\"css\">\n.home header,\n.home .site-header,\n\n.home nav,\n.home footer { display: none !important; }\n<\/style>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n<title>\u00a1Ups! Me he mudado \u00b7 Manuel Alba Villarejo<\/title>\n<meta name=\"description\" content=\"Este era mi portfolio antiguo. Mi web actual est\u00e1 en manualbaweb.com\">\n<meta name=\"robots\" content=\"noindex, follow\">\n<link rel=\"canonical\" href=\"https:\/\/manualbaweb.com\">\n<link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>\ud83d\udcc7<\/text><\/svg>\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@600;700&family=Figtree:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --bg: #E4E7EB;\n --bg-deep: #C9CED6;\n --navy: #1E2B4A;\n --navy-edge: #121B30;\n --white: #FBFBF8;\n --pen: #FFE45C;\n --red: #E2483D;\n --muted: #8A93A3;\n --thick: 3px;\n box-sizing: border-box;\n padding-top: env(safe-area-inset-top, 0px);\n padding-bottom: env(safe-area-inset-bottom, 0px);\n }\n *, *::before, *::after { box-sizing: inherit; }\n html, body { height: 100%; margin: 0; }\n body {\n display: grid; place-items: center;\n overflow: hidden;\n font-family: \"Figtree\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n color: var(--navy);\n background: radial-gradient(ellipse at 50% 35%, #F3F5F7 0%, var(--bg) 45%, var(--bg-deep) 100%);\n -webkit-tap-highlight-color: transparent;\n }\n\n .scene {\n position: relative;\n display: grid; justify-items: center; gap: 2.5rem;\n perspective: 1100px;\n width: 100%;\n padding: 1.5rem;\n }\n\n \/* ---------- tarjeta ---------- *\/\n .card {\n --w: min(86vw, 440px);\n position: relative;\n width: var(--w);\n aspect-ratio: 85 \/ 55;\n transform-style: preserve-3d;\n cursor: grab;\n touch-action: none;\n outline: none;\n will-change: transform;\n }\n .card:active { cursor: grabbing; }\n .card:focus-visible .face { box-shadow: 0 0 0 3px var(--pen); }\n\n .face, .edge {\n position: absolute; inset: 0;\n border-radius: 14px;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n }\n .edge { background: var(--navy-edge); backface-visibility: visible; }\n .face { overflow: hidden; }\n\n .front {\n transform: translateZ(calc(var(--thick) \/ 2));\n background:\n radial-gradient(circle at 110% -10%, rgba(255,255,255,.08) 0 40%, transparent 41%),\n var(--navy);\n color: var(--white);\n padding: 7% 8%;\n display: flex; flex-direction: column; justify-content: space-between;\n }\n .back {\n transform: rotateY(180deg) translateZ(calc(var(--thick) \/ 2));\n background: var(--white);\n padding: 6% 8%;\n display: flex; flex-direction: column; justify-content: center;\n pointer-events: none;\n }\n .card.flipped .back { pointer-events: auto; }\n\n \/* brillo que se desliza con el giro *\/\n .shine {\n position: absolute; inset: 0; pointer-events: none;\n background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%);\n background-size: 250% 100%;\n background-position: var(--shine, 50%) 0;\n mix-blend-mode: screen;\n }\n .back .shine { mix-blend-mode: normal; background-image: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.7) 45%, transparent 60%); }\n\n .mono {\n width: 2.4rem; height: 2.4rem; border-radius: 50%;\n border: 1.5px solid rgba(251,251,248,.55);\n display: grid; place-items: center;\n font-weight: 700; font-size: .8rem; letter-spacing: .02em;\n }\n .name { font-size: clamp(1.25rem, 4.6vw, 1.7rem); font-weight: 700; line-height: 1.1; margin: 0; }\n .role { font-size: clamp(.8rem, 2.6vw, .95rem); color: rgba(251,251,248,.65); margin: .35rem 0 0; }\n\n .url-row { position: relative; font-size: clamp(.8rem, 2.6vw, .95rem); }\n .old-url { position: relative; display: inline-block; color: rgba(251,251,248,.8); }\n .old-url::after { \/* tach\u00f3n *\/\n content: \"\"; position: absolute; left: -4%; top: 52%;\n width: 108%; height: 2px; background: var(--red);\n transform: rotate(-3deg) scaleX(0); transform-origin: left;\n border-radius: 2px;\n animation: strike .45s ease-out 1.9s forwards;\n }\n @keyframes strike { to { transform: rotate(-3deg) scaleX(1); } }\n\n .scribble {\n position: absolute; left: 34%; bottom: 55%;\n font-family: \"Caveat\", \"Segoe Print\", \"Bradley Hand\", cursive;\n font-weight: 700; color: var(--pen);\n font-size: clamp(1.25rem, 5vw, 1.8rem);\n line-height: 1; white-space: nowrap;\n transform: rotate(-7deg);\n clip-path: inset(0 100% 0 0);\n animation: write 1.1s steps(18) 2.35s forwards;\n }\n @keyframes write { to { clip-path: inset(0 0 0 0); } }\n\n .ups {\n font-family: \"Caveat\", \"Segoe Print\", \"Bradley Hand\", cursive;\n font-weight: 700; font-size: clamp(1.8rem, 7vw, 2.5rem);\n line-height: 1; margin: 0 0 .4rem;\n }\n .msg { font-size: clamp(.78rem, 2.5vw, .95rem); line-height: 1.45; margin: 0 0 .9rem; color: #3A4561; max-width: 34ch; }\n .actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }\n .cta {\n display: inline-block;\n padding: .6rem 1.05rem; border-radius: 999px;\n background: var(--navy); color: var(--white);\n font-weight: 700; font-size: clamp(.8rem, 2.5vw, .92rem);\n text-decoration: none;\n transition: transform .15s ease, background .15s ease;\n }\n .cta:hover { transform: scale(1.05); background: #2B3C66; }\n .cta:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; }\n .count { font-size: .78rem; color: var(--muted); }\n .count button {\n font: inherit; color: inherit; background: none; border: 0; padding: 0;\n text-decoration: underline; text-underline-offset: 2px; cursor: pointer;\n }\n\n \/* sombra en el suelo *\/\n .floor {\n position: absolute; left: 50%; top: calc(50% + min(86vw, 440px) * 0.32);\n width: min(70vw, 360px); height: 34px; margin-left: calc(min(70vw, 360px) \/ -2);\n background: radial-gradient(ellipse at center, rgba(20, 28, 48, .35) 0%, transparent 70%);\n filter: blur(6px);\n transform: scaleX(var(--fs, 1)); opacity: var(--fo, 1);\n pointer-events: none;\n }\n\n .hint {\n font-size: .9rem; color: var(--muted); margin: 0;\n opacity: 0; animation: fade .6s ease 3.4s forwards;\n }\n @keyframes fade { to { opacity: 1; } }\n\n @media (prefers-reduced-motion: reduce) {\n .old-url::after, .scribble, .hint { animation-duration: 0s; animation-delay: 0s; }\n }\n<\/style>\n\n\n <div class=\"scene\">\n <div class=\"floor\" id=\"floor\"><\/div>\n\n <div class=\"card\" id=\"card\" tabindex=\"0\" role=\"button\" aria-label=\"Tarjeta de visita. Pulsa para darle la vuelta.\">\n <!-- canto de la tarjeta -->\n <div class=\"edge\" style=\"transform: translateZ(-1px)\"><\/div>\n <div class=\"edge\" style=\"transform: translateZ(0)\"><\/div>\n <div class=\"edge\" style=\"transform: translateZ(1px)\"><\/div>\n\n <div class=\"face front\">\n <div class=\"mono\">MAV<\/div>\n <div>\n <p class=\"name\">Manuel Alba Villarejo<\/p>\n <p class=\"role\">Desarrollo web y dise\u00f1o gr\u00e1fico<\/p>\n <\/div>\n <div class=\"url-row\">\n <span class=\"old-url\" id=\"oldUrl\">portfolio-antiguo.com<\/span>\n <span class=\"scribble\" aria-hidden=\"true\">\u00a1me mud\u00e9! manualbaweb.com<\/span>\n <\/div>\n <div class=\"shine\"><\/div>\n <\/div>\n\n <div class=\"face back\">\n <p class=\"ups\">\u00a1Ups! Tarjeta caducada.<\/p>\n <p class=\"msg\">Si vienes de mi curr\u00edculum, no te has equivocado: el CV sali\u00f3 antes que la mudanza. Mi trabajo actual est\u00e1 en la web nueva.<\/p>\n <div class=\"actions\">\n <a class=\"cta\" id=\"cta\" href=\"https:\/\/manualbaweb.com\">Ver mi web actual<\/a>\n <span class=\"count\" id=\"count\" aria-live=\"polite\">Te llevo en <span id=\"sec\">25<\/span> s. <button id=\"stay\" type=\"button\">Esperar<\/button><\/span>\n <\/div>\n <div class=\"shine\"><\/div>\n <\/div>\n <\/div>\n\n <p class=\"hint\" id=\"hint\">Toca la tarjeta o arr\u00e1strala para girarla<\/p>\n <\/div>\n\n<script>\n(function () {\n var TARGET = \"https:\/\/manualbaweb.com\";\n var card = document.getElementById(\"card\");\n var floor = document.getElementById(\"floor\");\n var reduce = matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n \/\/ muestra el dominio real donde est\u00e1 alojada esta p\u00e1gina\n var host = location.hostname.replace(\/^www\\.\/, \"\");\n if (host && host !== \"localhost\") document.getElementById(\"oldUrl\").textContent = host;\n\n \/\/ estado de giro (muelle)\n var rot = reduce ? 0 : -540, vel = 0, target = 0;\n var tiltX = 0, tiltY = 0, tTiltX = 0, tTiltY = 0;\n var zoom = 0, leaving = false;\n var dragging = false, startX = 0, startRot = 0, lastX = 0, lastT = 0, dragVel = 0, moved = 0;\n\n function faceShown() { return Math.round(target \/ 180) % 2 !== 0; }\n function updateFlipped() { card.classList.toggle(\"flipped\", faceShown()); }\n\n \/\/ inclinaci\u00f3n hacia el puntero\n addEventListener(\"pointermove\", function (e) {\n if (dragging) return;\n tTiltY = ((e.clientX \/ innerWidth) - .5) * 18;\n tTiltX = -((e.clientY \/ innerHeight) - .5) * 18;\n });\n document.addEventListener(\"pointerleave\", function () { tTiltX = tTiltY = 0; });\n\n \/\/ arrastrar para girar\n card.addEventListener(\"pointerdown\", function (e) {\n if (e.target.closest(\"a, button\")) return;\n dragging = true; moved = 0;\n startX = lastX = e.clientX; startRot = rot; lastT = performance.now();\n card.setPointerCapture(e.pointerId);\n });\n card.addEventListener(\"pointermove\", function (e) {\n if (!dragging) return;\n var now = performance.now();\n moved = Math.max(moved, Math.abs(e.clientX - startX));\n rot = startRot + (e.clientX - startX) * .6;\n dragVel = (e.clientX - lastX) \/ Math.max(1, now - lastT) * 16 * .6;\n lastX = e.clientX; lastT = now; vel = 0;\n });\n card.addEventListener(\"pointerup\", function () {\n if (!dragging) return;\n dragging = false;\n if (moved < 6) { target += 180; } \/\/ toque = voltear\n else { target = Math.round((rot + dragVel * 8) \/ 180) * 180; vel = dragVel; }\n updateFlipped();\n });\n card.addEventListener(\"keydown\", function (e) {\n if (e.target !== card) return;\n if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); target += 180; updateFlipped(); }\n });\n\n \/\/ bucle de animaci\u00f3n\n var t0 = performance.now();\n function loop(now) {\n var t = (now - t0) \/ 1000;\n if (!dragging) {\n vel += (target - rot) * (leaving ? .05 : .06);\n vel *= leaving ? .9 : .82;\n rot += vel;\n }\n tiltX += (tTiltX - tiltX) * .08;\n tiltY += (tTiltY - tiltY) * .08;\n\n var float = reduce ? 0 : Math.sin(t * 1.4) * 8;\n var idle = reduce ? 0 : Math.sin(t * .9) * 3;\n if (leaving) zoom += (1 - zoom) * .06;\n\n card.style.transform =\n \"translateY(\" + (float - zoom * 40) + \"px) \" +\n \"translateZ(\" + (zoom * 900) + \"px) \" +\n \"rotateX(\" + (tiltX + 8 + idle) + \"deg) \" +\n \"rotateY(\" + (rot + tiltY) + \"deg)\";\n card.style.opacity = leaving ? Math.max(0, 1 - zoom * 1.4) : 1;\n\n \/\/ brillo seg\u00fan \u00e1ngulo\n var a = ((rot + tiltY) % 360 + 360) % 360;\n card.style.setProperty(\"--shine\", (100 - (a % 180) \/ 180 * 100) + \"%\");\n floor.style.setProperty(\"--fs\", (1 - float \/ 40).toFixed(3));\n floor.style.setProperty(\"--fo\", (1 - zoom).toFixed(3));\n\n requestAnimationFrame(loop);\n }\n requestAnimationFrame(loop);\n\n \/\/ salida: giro r\u00e1pido hacia la c\u00e1mara\n function leave(e) {\n if (e) e.preventDefault();\n if (leaving) return;\n leaving = true; clearInterval(timer);\n if (reduce) { location.href = TARGET; return; }\n target += 720;\n setTimeout(function () { location.href = TARGET; }, 900);\n }\n document.getElementById(\"cta\").addEventListener(\"click\", leave);\n\n \/\/ cuenta atr\u00e1s\n var s = 25, sec = document.getElementById(\"sec\");\n var timer = setInterval(function () { s--; sec.textContent = s; if (s <= 0) leave(); }, 1000);\n document.getElementById(\"stay\").addEventListener(\"click\", function (e) {\n e.stopPropagation(); clearInterval(timer);\n document.getElementById(\"count\").textContent = \"Sin prisa.\";\n });\n\n \/\/ si en 6 s nadie la gira, se da la vuelta sola\n setTimeout(function () { if (!faceShown() && !leaving) { target += 180; updateFlipped(); } }, 6000);\n})();\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/manusketch.es\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/manusketch.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/manusketch.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/manusketch.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manusketch.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":6,"href":"https:\/\/manusketch.es\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/manusketch.es\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/manusketch.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}