{"id":184,"date":"2026-01-31T07:22:54","date_gmt":"2026-01-31T06:22:54","guid":{"rendered":"https:\/\/jljimenezcara.es\/?page_id=184"},"modified":"2026-01-31T07:32:00","modified_gmt":"2026-01-31T06:32:00","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/jljimenezcara.es\/en\/portfolio\/","title":{"rendered":"Portfolio"},"content":{"rendered":"<!-- P\u00c1GINA \u00b7 PORTFOLIO \/ CAPACIDADES (ASTRA) \u00b7 FONDO: Fondo-portfolio.png -->\n<section class=\"jl-portfolio-shell\" aria-label=\"Portfolio and skills\">\n  <div class=\"jl-portfolio-bg\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"jl-portfolio-wrap\">\n\n    <header class=\"jl-portfolio-head\">\n      <h1>Portfolio and skills<\/h1>\n      <p class=\"jl-portfolio-lead\">\n        I don\u2019t sell \u201cpretty design.\u201d I build stable web systems with coherent aesthetics, clean structure, and elements that convert. Here\u2019s what I can do \u2014 and how it translates into real work.\n      <\/p>\n    <\/header>\n\n    <!-- TABS 3 BOTONES (SIN TEXTO INICIAL) -->\n    <section class=\"jl-tabs\" aria-label=\"Servicios por plataforma\">\n\n      <div class=\"jl-tabs-controls\" role=\"tablist\" aria-label=\"Plataformas\">\n        <button class=\"jl-tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"jl-tab-moodle\" id=\"jl-tabbtn-moodle\" type=\"button\">\n          Moodle\n        <\/button>\n        <button class=\"jl-tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"jl-tab-wordpress\" id=\"jl-tabbtn-wordpress\" type=\"button\">\n          WordPress\n        <\/button>\n        <button class=\"jl-tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"jl-tab-blogger\" id=\"jl-tabbtn-blogger\" type=\"button\">\n          Blogger\n        <\/button>\n      <\/div>\n\n      <div class=\"jl-tabs-panels\" aria-label=\"Contenido\" hidden>\n\n        <!-- MOODLE -->\n        <article class=\"jl-panel\" role=\"tabpanel\" id=\"jl-tab-moodle\" aria-labelledby=\"jl-tabbtn-moodle\" hidden>\n          <h3>MOODLE \u00b7 A serious, coherent, fully functional online academy<\/h3>\n          <p class=\"jl-panel-lead\">\n            Full setup of a training platform from scratch: consistent aesthetics, user control, courses with pedagogical logic, and a professional finish.\n          <\/p>\n\n          <ul class=\"jl-panel-list\">\n            <li class=\"translation-block\"><strong>Building an online academy from scratch<\/strong>, with a coherent aesthetic.<\/li>\n            <li class=\"translation-block\"><strong>Based on the material you provide<\/strong>, I can structure your course into thematic modules.<\/li>\n            <li class=\"translation-block\"><strong>Quizzes at the end of each module<\/strong>, auto-graded and optionally <strong>required<\/strong> to unlock the next one.<\/li>\n            <li class=\"translation-block\"><strong>Downloadable PDFs<\/strong> and integration of <strong>images, video, and\/or audio<\/strong> inside the course.<\/li>\n            <li class=\"translation-block\"><strong>Course completion<\/strong> with a <strong>badge<\/strong> and\/or <strong>certificate<\/strong>.<\/li>\n            <li class=\"translation-block\"><strong>Payment buttons<\/strong> for each course, with full price or limited-time discounts.<\/li>\n            <li class=\"translation-block\"><strong>User registration and control<\/strong>: manual registration, Google\/Facebook signup, invitation-based access, or single-use codes (e.g., giveaways).<\/li>\n            <li><strong>Social media integration<\/strong>.<\/li>\n          <\/ul>\n\n          <p class=\"jl-panel-proof translation-block\">Example: <a href=\"https:\/\/arcanedomus.com\/\" target=\"_blank\" rel=\"noopener\">arcanedomus.com<\/a><\/p>\n        <\/article>\n\n        <!-- WORDPRESS -->\n        <article class=\"jl-panel\" role=\"tabpanel\" id=\"jl-tab-wordpress\" aria-labelledby=\"jl-tabbtn-wordpress\" hidden>\n          <h3>WORDPRESS \u00b7 A versatile, scalable website built to convert<\/h3>\n          <p class=\"jl-panel-lead\">\n            A complete website built from scratch with a solid structure, coherent aesthetics, and interactive elements when it makes sense.\n          <\/p>\n\n          <ul class=\"jl-panel-list\">\n            <li class=\"translation-block\"><strong>Building a website from scratch<\/strong>, with a coherent aesthetic.<\/li>\n            <li class=\"translation-block\"><strong>Organized structure<\/strong>, with all the necessary pages in the right place.<\/li>\n            <li class=\"translation-block\"><strong>Integration of images<\/strong> (static, GIFs, or interactive), <strong>sound<\/strong> (audio and\/or ambient music), and <strong>video<\/strong>.<\/li>\n            <li class=\"translation-block\"><strong>Interactive, gamifiable content<\/strong> to attract and retain users.<\/li>\n            <li class=\"translation-block\"><strong>User registration and control<\/strong>: manual signup and Google\/Facebook login.<\/li>\n            <li><strong>Social media integration<\/strong>.<\/li>\n          <\/ul>\n\n          <p class=\"jl-panel-proof translation-block\">Interactive example: <a href=\"https:\/\/bazararcano.com\/tarot-arcano\/\" target=\"_blank\" rel=\"noopener\">bazararcano.com\/tarot-arcano<\/a><br>\nSite: <a href=\"https:\/\/bazararcano.com\/\" target=\"_blank\" rel=\"noopener\">bazararcano.com<\/a><\/p>\n        <\/article>\n\n        <!-- BLOGGER -->\n        <article class=\"jl-panel\" role=\"tabpanel\" id=\"jl-tab-blogger\" aria-labelledby=\"jl-tabbtn-blogger\" hidden>\n          <h3>BLOGGER \u00b7 A modular, versatile blog with coherent aesthetics<\/h3>\n          <p class=\"jl-panel-lead\">\n            A well-built Blogger site can be fast, editorial, and even include interactive modules if it\u2019s structured properly.\n          <\/p>\n\n          <ul class=\"jl-panel-list\">\n            <li class=\"translation-block\"><strong>Building a blog from scratch<\/strong>, with a coherent aesthetic.<\/li>\n            <li class=\"translation-block\"><strong>Organized structure<\/strong>, with all the necessary pages in the right place.<\/li>\n            <li><strong>Independent, interactive modules<\/strong>.<\/li>\n            <li class=\"translation-block\"><strong>Integration of images<\/strong> (static, GIFs, or interactive), <strong>sound<\/strong> (audio and\/or ambient music), and <strong>video<\/strong>.<\/li>\n            <li><strong>Social media integration<\/strong>.<\/li>\n          <\/ul>\n\n          <p class=\"jl-panel-proof translation-block\">Module example: <a href=\"https:\/\/curiosidadesencifras.blogspot.com\/\" target=\"_blank\" rel=\"noopener\">curiosidadesencifras.blogspot.com<\/a><br>\nSite: <a href=\"https:\/\/blog.arcanedomus.com\/\" target=\"_blank\" rel=\"noopener\">blog.arcanedomus.com<\/a><\/p>\n        <\/article>\n\n      <\/div>\n    <\/section>\n\n    <!-- CTA FINAL -->\n    <section class=\"jl-portfolio-cta\" aria-label=\"Contact\">\n      <h2>Want me to apply this to your project?<\/h2>\n      <p>\n        Tell me your goal and your current situation. I\u2019ll honestly tell you whether it\u2019s better to fix, rebuild, or simplify.\n      <\/p>\n      <div class=\"jl-portfolio-cta-buttons\">\n        <a class=\"jl-btn jl-btn-primary\" href=\"\/en\/contacto\/\">Contact<\/a>\n        <a class=\"jl-btn jl-btn-ghost\" href=\"\/en\/servicios\/\">Services<\/a>\n      <\/div>\n    <\/section>\n\n  <\/div>\n<\/section>\n\n<style>\n\/* PORTFOLIO \u00b7 SHELL CON FONDO *\/\n.jl-portfolio-shell{\n  position: relative;\n  overflow: hidden;\n  border-radius: 0;\n}\n\n.jl-portfolio-bg{\n  position:absolute;\n  inset:0;\n  background-image: url('https:\/\/jljimenezcara.es\/wp-content\/uploads\/2026\/01\/Fondo-portfolio.png');\n  background-size: cover;\n  background-position: center top;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  filter: saturate(1.05) contrast(1.05);\n  transform: scale(1.02);\n}\n\n.jl-portfolio-shell::before{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background: linear-gradient(\n    180deg,\n    rgba(11,15,20,.92) 0%,\n    rgba(11,15,20,.86) 35%,\n    rgba(11,15,20,.92) 100%\n  );\n  z-index: 1;\n}\n\n.jl-portfolio-wrap{\n  position: relative;\n  z-index: 2;\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 90px 18px 90px;\n}\n\n\/* HEAD *\/\n.jl-portfolio-head h1{\n  margin: 0 0 14px 0;\n  font-size: 42px;\n  line-height: 1.12;\n  color: rgba(237,239,242,.96);\n}\n\n.jl-portfolio-lead{\n  margin: 0 0 22px 0;\n  max-width: 920px;\n  line-height: 1.75;\n  color: rgba(237,239,242,.84);\n}\n\n\/* TABS *\/\n.jl-tabs{ margin-top: 18px; }\n\n.jl-tabs-controls{\n  display:grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n  margin: 10px 0 14px;\n}\n\n.jl-tab{\n  appearance:none;\n  border: 1px solid rgba(31,191,184,.35);\n  background: rgba(11,15,20,.35);\n  color: rgba(237,239,242,.90);\n  border-radius: 999px;\n  padding: 12px 14px;\n  font-weight: 800;\n  letter-spacing: .2px;\n  cursor: pointer;\n  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;\n}\n.jl-tab:hover{ transform: translateY(-1px); border-color: rgba(31,191,184,.55); }\n.jl-tab.is-active{ background:#1FBFB8; color:#0B0F14; border-color: transparent; }\n\n.jl-tabs-panels{\n  border: 1px solid rgba(255,255,255,.06);\n  background: rgba(11,15,20,.35);\n  border-radius: 18px;\n  padding: 18px 18px 10px;\n}\n\n.jl-panel h3{ margin: 0 0 8px 0; font-size: 18px; color: rgba(237,239,242,.95); }\n.jl-panel-lead{ margin: 0 0 12px 0; line-height: 1.75; color: rgba(237,239,242,.84); max-width: 980px; }\n.jl-panel-list{ margin: 0; padding-left: 18px; display: grid; gap: 8px; color: rgba(237,239,242,.82); }\n.jl-panel-proof{ margin: 14px 0 6px 0; color: rgba(138,143,152,.95); line-height: 1.6; }\n.jl-panel a{ color: #7FE3DE; text-decoration: underline; }\n\n\/* CTA *\/\n.jl-portfolio-cta{\n  margin-top: 28px;\n  border: 1px solid rgba(31,191,184,.16);\n  background: linear-gradient(180deg, rgba(11,15,20,.55), rgba(11,15,20,.25));\n  border-radius: 22px;\n  padding: 22px 18px;\n  text-align: center;\n}\n\n.jl-portfolio-cta h2{\n  margin: 0 0 10px 0;\n  font-size: 26px;\n  color: rgba(237,239,242,.96);\n}\n\n.jl-portfolio-cta p{\n  margin: 0 auto 16px auto;\n  max-width: 820px;\n  line-height: 1.75;\n  color: rgba(237,239,242,.84);\n}\n\n.jl-portfolio-cta-buttons{\n  display:flex;\n  gap:14px;\n  justify-content:center;\n  flex-wrap:wrap;\n}\n\n.jl-btn{\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  padding:12px 18px;\n  border-radius:999px;\n  text-decoration:none;\n  font-weight:800;\n  transition: transform .15s ease, border-color .15s ease, opacity .15s ease;\n}\n.jl-btn:hover{ transform: translateY(-1px); }\n\n.jl-btn-primary{ background:#1FBFB8; color:#0B0F14; }\n.jl-btn-ghost{ background:transparent; color:rgba(237,239,242,.92); border:1px solid rgba(31,191,184,.45); }\n\n\/* Responsive *\/\n@media (max-width: 980px){\n  .jl-portfolio-wrap{ padding: 70px 16px 70px; }\n  .jl-portfolio-head h1{ font-size: 34px; }\n}\n@media (max-width: 860px){\n  .jl-tabs-controls{ grid-template-columns: 1fr; }\n}\n\n\/* iOS\/Android: evita tirones de background-attachment fixed *\/\n@media (max-width: 1024px){\n  .jl-portfolio-bg{ background-attachment: scroll; }\n}\n<\/style>\n\n<script>\n\/* Tabs blindado: nada visible hasta click + eventos fiables en WP *\/\ndocument.addEventListener('DOMContentLoaded', function () {\n  const tabs = [\n    { btnId: 'jl-tabbtn-moodle', panelId: 'jl-tab-moodle' },\n    { btnId: 'jl-tabbtn-wordpress', panelId: 'jl-tab-wordpress' },\n    { btnId: 'jl-tabbtn-blogger', panelId: 'jl-tab-blogger' }\n  ];\n\n  const panelsWrap = document.querySelector('.jl-tabs-panels');\n  if (!panelsWrap) return;\n\n  function hideAll() {\n    tabs.forEach(t => {\n      const btn = document.getElementById(t.btnId);\n      const panel = document.getElementById(t.panelId);\n      if (btn) { btn.classList.remove('is-active'); btn.setAttribute('aria-selected', 'false'); }\n      if (panel) panel.setAttribute('hidden', '');\n    });\n    panelsWrap.setAttribute('hidden', '');\n  }\n\n  function show(panelId, btnId) {\n    hideAll();\n    const btn = document.getElementById(btnId);\n    const panel = document.getElementById(panelId);\n    if (!btn || !panel) return;\n    panelsWrap.removeAttribute('hidden');\n    btn.classList.add('is-active');\n    btn.setAttribute('aria-selected', 'true');\n    panel.removeAttribute('hidden');\n  }\n\n  hideAll();\n\n  tabs.forEach(t => {\n    const btn = document.getElementById(t.btnId);\n    if (!btn) return;\n    btn.addEventListener('click', function () {\n      show(t.panelId, t.btnId);\n    });\n  });\n});\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Portfolio y capacidades No vendo \u201cdise\u00f1o bonito\u201d. Construyo sistemas web estables, con est\u00e9tica coherente, estructura limpia y elementos que captan usuarios. Aqu\u00ed tienes lo que puedo hacer y c\u00f3mo se traduce en trabajos reales. Moodle WordPress Blogger MOODLE \u00b7 Academia online seria, coherente y funcional Montaje completo de una plataforma de formaci\u00f3n desde cero: est\u00e9tica [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-184","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/jljimenezcara.es\/en\/wp-json\/wp\/v2\/pages\/184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jljimenezcara.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jljimenezcara.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jljimenezcara.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jljimenezcara.es\/en\/wp-json\/wp\/v2\/comments?post=184"}],"version-history":[{"count":3,"href":"https:\/\/jljimenezcara.es\/en\/wp-json\/wp\/v2\/pages\/184\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/jljimenezcara.es\/en\/wp-json\/wp\/v2\/pages\/184\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/jljimenezcara.es\/en\/wp-json\/wp\/v2\/media?parent=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}