{"id":1205,"date":"2026-07-22T13:29:13","date_gmt":"2026-07-22T13:29:13","guid":{"rendered":"http:\/\/localhost\/diawp\/?st-import=1692a67662e0c80385a927924452f039"},"modified":"2026-07-22T15:48:15","modified_gmt":"2026-07-22T15:48:15","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/zaycast.store\/astral\/portfolio\/","title":{"rendered":"Portfolio"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ================= SECCI\u00d3N PORTAFOLIO (ESTILO ANTERIOR) ================= *\/\n\n\/* Contenedor principal *\/\n.portfolio-container {\n    max-width: 1200px;\n    margin: 50px auto 0 auto;\n    background: #fdfbfd;\n    border-radius: 24px;\n    padding: 50px 40px;\n    box-shadow: 0 15px 35px rgba(138, 108, 153, 0.08);\n}\n\n\/* T\u00edtulo Centrado y con Espacio *\/\n.portfolio-container .section-header {\n    text-align: center;\n    width: 100%;\n    margin-top: 40px;\n    margin-bottom: 25px;\n}\n\n.portfolio-container .main-title {\n    font-family: var(--font-heading);\n    font-size: 3.2rem;\n    color: var(--lilac-primary);\n    text-align: center;\n    letter-spacing: 2px;\n    margin-bottom: 12px;\n}\n\n.portfolio-intro {\n    font-size: 1.05rem;\n    color: var(--text-muted);\n    text-align: center;\n    max-width: 650px;\n    margin: 0 auto 35px auto;\n}\n\n\/* Botones de Filtro *\/\n.portfolio-filters {\n    display: flex;\n    justify-content: center;\n    gap: 12px;\n    flex-wrap: wrap;\n    margin-bottom: 45px;\n}\n\n.filter-btn {\n    background: #f4ecf8;\n    border: 1px solid var(--lilac-light);\n    color: var(--text-dark);\n    padding: 10px 24px;\n    border-radius: 20px;\n    font-family: var(--font-body);\n    font-size: 0.95rem;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.filter-btn.active,\n.filter-btn:hover {\n    background: var(--lilac-gradient);\n    color: #ffffff !important;\n    border-color: transparent;\n    box-shadow: 0 4px 14px rgba(142, 98, 166, 0.35);\n}\n\n\/* ================= GRID DE TARJETAS (RECUPERADO) ================= *\/\n.portfolio-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 30px;\n}\n\n.portfolio-card {\n    background: #ffffff;\n    border-radius: 18px;\n    overflow: hidden;\n    border: 1px solid var(--lilac-light);\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.portfolio-card:hover {\n    transform: translateY(-8px);\n    box-shadow: 0 12px 30px rgba(142, 98, 166, 0.18);\n}\n\n.card-image-wrapper {\n    position: relative;\n    width: 100%;\n    height: 220px;\n    overflow: hidden;\n}\n\n.card-image-wrapper img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.5s ease;\n}\n\n.portfolio-card:hover .card-image-wrapper img {\n    transform: scale(1.08);\n}\n\n.card-content {\n    padding: 22px;\n}\n\n.project-tag {\n    display: inline-block;\n    font-size: 0.88rem;\n    font-weight: 600;\n    color: var(--lilac-primary);\n    margin-bottom: 8px;\n}\n\n.project-title {\n    font-family: var(--font-heading);\n    font-size: 1.6rem;\n    color: var(--text-dark);\n    margin-bottom: 10px;\n    line-height: 1.3;\n}\n\n.project-desc {\n    font-size: 0.98rem;\n    color: var(--text-muted);\n    line-height: 1.5;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/\/ Funcionalidad de Filtros del Portafolio\nconst filterButtons = document.querySelectorAll('.filter-btn');\nconst portfolioCards = document.querySelectorAll('.portfolio-card');\n\nfilterButtons.forEach(button => {\n    button.addEventListener('click', () => {\n        \/\/ Remover clase activa de todos los botones y agregarla al clickeado\n        filterButtons.forEach(btn => btn.classList.remove('active'));\n        button.classList.add('active');\n\n        const filterValue = button.getAttribute('data-filter');\n\n        portfolioCards.forEach(card => {\n            const category = card.getAttribute('data-category');\n            if (filterValue === 'all' || category === filterValue) {\n                card.style.display = 'block';\n            } else {\n                card.style.display = 'none';\n            }\n        });\n    });\n});\n<\/script>\n\n<!-- ================= SECCI\u00d3N PORTAFOLIO ================= -->\n<section class=\"portfolio-container\" id=\"portfolio\">\n    \n    <!-- Encabezado de la Secci\u00f3n -->\n    <header class=\"section-header\">\n        <h2 class=\"main-title\">\n            <span class=\"watercolor-bg\">MI PORTAFOLIO<\/span>\n        <\/h2>\n        <p class=\"portfolio-intro\">\n            Una selecci\u00f3n de mis proyectos m\u00e1s recientes en desarrollo web, dise\u00f1o de interfaces y soluciones creativas.\n        <\/p>\n    <\/header>\n\n    <!-- Filtros de Categor\u00edas -->\n    <div class=\"portfolio-filters\">\n        <button class=\"filter-btn active\" data-filter=\"all\">Todos<\/button>\n        <button class=\"filter-btn\" data-filter=\"web\">Desarrollo Web<\/button>\n        <button class=\"filter-btn\" data-filter=\"ui\">Dise\u00f1o UI\/UX<\/button>\n        <button class=\"filter-btn\" data-filter=\"brand\">Branding<\/button>\n    <\/div>\n\n    <!-- Grid de Proyectos -->\n    <div class=\"portfolio-grid\">\n        \n        <!-- Proyecto 1 -->\n        <article class=\"portfolio-card\" data-category=\"web\">\n            <div class=\"card-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507238691740-187a5b1d37b8?q=80&#038;w=600&#038;auto=format&#038;fit=crop\" alt=\"Proyecto Sitio E-commerce\" title=\"Portfolio\">\n                <div class=\"card-overlay\">\n                    <a href=\"#\" class=\"view-btn\" title=\"Ver detalle\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/a>\n                <\/div>\n            <\/div>\n            <div class=\"card-content\">\n                <span class=\"project-tag\">Desarrollo Web<\/span>\n                <h3 class=\"project-title\">Sistema de Ventas &#038; E-commerce<\/h3>\n                <p class=\"project-desc\">Plataforma web intuitiva dise\u00f1ada para optimizar la gesti\u00f3n de productos y carritos de compra.<\/p>\n            <\/div>\n        <\/article>\n\n        <!-- Proyecto 2 -->\n        <article class=\"portfolio-card\" data-category=\"ui\">\n            <div class=\"card-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?q=80&#038;w=600&#038;auto=format&#038;fit=crop\" alt=\"App Dashboard UI\" title=\"Portfolio\">\n                <div class=\"card-overlay\">\n                    <a href=\"#\" class=\"view-btn\" title=\"Ver detalle\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/a>\n                <\/div>\n            <\/div>\n            <div class=\"card-content\">\n                <span class=\"project-tag\">Dise\u00f1o UI\/UX<\/span>\n                <h3 class=\"project-title\">Dashboard Anal\u00edtico Soft<\/h3>\n                <p class=\"project-desc\">Panel de control interactivo en tonos pastel con m\u00e9tricas claras y gr\u00e1ficos estilizados.<\/p>\n            <\/div>\n        <\/article>\n\n        <!-- Proyecto 3 -->\n        <article class=\"portfolio-card\" data-category=\"brand\">\n            <div class=\"card-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&#038;w=600&#038;auto=format&#038;fit=crop\" alt=\"Identidad Visual\" title=\"Portfolio\">\n                <div class=\"card-overlay\">\n                    <a href=\"#\" class=\"view-btn\" title=\"Ver detalle\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/a>\n                <\/div>\n            <\/div>\n            <div class=\"card-content\">\n                <span class=\"project-tag\">Branding<\/span>\n                <h3 class=\"project-title\">Identidad de Marca Creativa<\/h3>\n                <p class=\"project-desc\">Dise\u00f1o de paletas de color, tipograf\u00eda y papeler\u00eda para un estudio independiente.<\/p>\n            <\/div>\n        <\/article>\n\n        <!-- Proyecto 4 -->\n        <article class=\"portfolio-card\" data-category=\"web\">\n            <div class=\"card-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522542550221-31fd19575a2d?q=80&#038;w=600&#038;auto=format&#038;fit=crop\" alt=\"Aplicaci\u00f3n Web\" title=\"Portfolio\">\n                <div class=\"card-overlay\">\n                    <a href=\"#\" class=\"view-btn\" title=\"Ver detalle\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/a>\n                <\/div>\n            <\/div>\n            <div class=\"card-content\">\n                <span class=\"project-tag\">Desarrollo Web<\/span>\n                <h3 class=\"project-title\">Landing Page para Startup<\/h3>\n                <p class=\"project-desc\">Sitio promocional responsive optimizado para conversi\u00f3n y carga ultra r\u00e1pida.<\/p>\n            <\/div>\n        <\/article>\n\n        <!-- Proyecto 5 -->\n        <article class=\"portfolio-card\" data-category=\"ui\">\n            <div class=\"card-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512941937669-90a1b58e7e9c?q=80&#038;w=600&#038;auto=format&#038;fit=crop\" alt=\"App M\u00f3vil\" title=\"Portfolio\">\n                <div class=\"card-overlay\">\n                    <a href=\"#\" class=\"view-btn\" title=\"Ver detalle\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/a>\n                <\/div>\n            <\/div>\n            <div class=\"card-content\">\n                <span class=\"project-tag\">Dise\u00f1o UI\/UX<\/span>\n                <h3 class=\"project-title\">App M\u00f3vil de Estilo de Vida<\/h3>\n                <p class=\"project-desc\">Prototipo navegable enfocado en la experiencia de usuario y est\u00e9tica minimalista.<\/p>\n            <\/div>\n        <\/article>\n\n        <!-- Proyecto 6 -->\n        <article class=\"portfolio-card\" data-category=\"brand\">\n            <div class=\"card-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1542744094-3a31b272c490?q=80&#038;w=600&#038;auto=format&#038;fit=crop\" alt=\"Dise\u00f1o Editorial\" title=\"Portfolio\">\n                <div class=\"card-overlay\">\n                    <a href=\"#\" class=\"view-btn\" title=\"Ver detalle\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/a>\n                <\/div>\n            <\/div>\n            <div class=\"card-content\">\n                <span class=\"project-tag\">Branding<\/span>\n                <h3 class=\"project-title\">Dise\u00f1o Editorial &#038; Cat\u00e1logo<\/h3>\n                <p class=\"project-desc\">Maquetaci\u00f3n limpia con un enfoque elegante en la fotograf\u00eda de producto.<\/p>\n            <\/div>\n        <\/article>\n\n    <\/div>\n\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>MI PORTAFOLIO Una selecci\u00f3n de mis proyectos m\u00e1s recientes en desarrollo web, dise\u00f1o de interfaces y soluciones creativas. Todos Desarrollo Web Dise\u00f1o UI\/UX Branding Desarrollo Web Sistema de Ventas &#038; E-commerce Plataforma web intuitiva dise\u00f1ada para optimizar la gesti\u00f3n de productos y carritos de compra. Dise\u00f1o UI\/UX Dashboard Anal\u00edtico Soft Panel de control interactivo en [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"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":""},"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-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":"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":""},"mobile":{"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":""}},"_zipai_imported":false,"footnotes":""},"class_list":["post-1205","page","type-page","status-publish","hentry"],"spectra_blocks_featured_image_url":null,"spectra_blocks_author_info":{"display_name":"zayra","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/0086b53ef306fee13b4c3a8d525c25c2c65bdea1e05ed630d3a144dd3fe8339a?s=96&d=mm&r=g","author_link":"https:\/\/zaycast.store\/astral\/author\/zayra\/","description":""},"_links":{"self":[{"href":"https:\/\/zaycast.store\/astral\/wp-json\/wp\/v2\/pages\/1205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zaycast.store\/astral\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zaycast.store\/astral\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zaycast.store\/astral\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zaycast.store\/astral\/wp-json\/wp\/v2\/comments?post=1205"}],"version-history":[{"count":8,"href":"https:\/\/zaycast.store\/astral\/wp-json\/wp\/v2\/pages\/1205\/revisions"}],"predecessor-version":[{"id":2788,"href":"https:\/\/zaycast.store\/astral\/wp-json\/wp\/v2\/pages\/1205\/revisions\/2788"}],"wp:attachment":[{"href":"https:\/\/zaycast.store\/astral\/wp-json\/wp\/v2\/media?parent=1205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}