{"id":10,"date":"2026-08-31T13:58:47","date_gmt":"2026-08-31T13:58:47","guid":{"rendered":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/?page_id=10"},"modified":"2026-09-03T16:19:54","modified_gmt":"2026-09-03T16:19:54","slug":"home","status":"publish","type":"page","link":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4617024 e-con-full e-flex e-con e-parent\" data-id=\"4617024\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e833c63 elementor-widget__width-inherit elementor-widget-mobile__width-inherit elementor-widget elementor-widget-html\" data-id=\"e833c63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"portfolio-hero\">\r\n\r\n    <!-- Decorative background -->\r\n    <div class=\"hero-shape hero-shape-one\"><\/div>\r\n    <div class=\"hero-shape hero-shape-two\"><\/div>\r\n\r\n\r\n    <!-- HERO CONTENT -->\r\n    <div class=\"hero-content\">\r\n\r\n        <p class=\"hero-eyebrow\">\r\n            WordPress Developer | Technical Support Specialist\r\n        <\/p>\r\n\r\n        <h1>\r\n            I CRAFT\r\n            <span>IMPACTING<\/span>\r\n            DIGITAL\r\n            <span>EXPERIENCES<\/span>\r\n        <\/h1>\r\n\r\n        <a href=\"#projects\" class=\"hero-cta\">\r\n            VIEW MY PORTFOLIO\r\n        <\/a>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- TRUSTED BY -->\r\n    <div class=\"trusted-section\">\r\n\r\n        <span class=\"trusted-title\">\r\n            TRUSTED BY\r\n        <\/span>\r\n\r\n        <div class=\"trusted-logos\">\r\n\r\n            <span>\u25c9 BrowStudio<\/span>\r\n            <span>\u2723 Luminae<\/span>\r\n            <span>\u25c6 Momentum Co.<\/span>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- PORTFOLIO SLIDER -->\r\n    <div class=\"portfolio-slider\" id=\"portfolioSlider\">\r\n\r\n        <div class=\"slider-track\">\r\n\r\n            <!-- PROJECT 1 -->\r\n            <article class=\"portfolio-card\">\r\n\r\n                <div class=\"portfolio-image\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/digihive.png\"\r\n                        alt=\"Horizon Coffee branding project\"\r\n                    >\r\n                <\/div>\r\n\r\n                <div class=\"portfolio-overlay\">\r\n                    <h3>Horizon Coffee<\/h3>\r\n                    <p>Sustainable Sourcing<\/p>\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- PROJECT 2 -->\r\n            <article class=\"portfolio-card\">\r\n\r\n                <div class=\"portfolio-image\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/vonkp.png\"\r\n                        alt=\"Nova Tech brand identity\"\r\n                    >\r\n                <\/div>\r\n\r\n                <div class=\"portfolio-overlay\">\r\n                    <h3>Nova Tech<\/h3>\r\n                    <p>Full Brand Identity<\/p>\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- PROJECT 3 -->\r\n            <article class=\"portfolio-card\">\r\n\r\n                <div class=\"portfolio-image\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/luminaep.png\"\r\n                        alt=\"Narrative Matters project\"\r\n                    >\r\n                <\/div>\r\n\r\n                <div class=\"portfolio-overlay\">\r\n                    <h3>Narrative Matters<\/h3>\r\n                    <p>Digital Storytelling<\/p>\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- PROJECT 4 -->\r\n            <article class=\"portfolio-card\">\r\n\r\n                <div class=\"portfolio-image\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/brow-studiop.png\"\r\n                        alt=\"Digital product design\"\r\n                    >\r\n                <\/div>\r\n\r\n                <div class=\"portfolio-overlay\">\r\n                    <h3>Digital Futures<\/h3>\r\n                    <p>Product Experience<\/p>\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- PROJECT 5 -->\r\n            <article class=\"portfolio-card\">\r\n\r\n                <div class=\"portfolio-image\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/safelify.png\"\r\n                        alt=\"Creative brand project\"\r\n                    >\r\n                <\/div>\r\n\r\n                <div class=\"portfolio-overlay\">\r\n                    <h3>Maison Studio<\/h3>\r\n                    <p>Creative Direction<\/p>\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n <script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n    const slider = document.querySelector(\"#portfolioSlider\");\r\n    const track = slider?.querySelector(\".slider-track\");\r\n\r\n    if (!slider || !track) return;\r\n\r\n    const originalCards = Array.from(\r\n        track.querySelectorAll(\".portfolio-card\")\r\n    );\r\n\r\n    const total = originalCards.length;\r\n\r\n    \/*\r\n     * Create TWO additional copies.\r\n     *\r\n     * Original:\r\n     * 1 2 3 4 5\r\n     *\r\n     * Becomes:\r\n     * 1 2 3 4 5 | 1 2 3 4 5 | 1 2 3 4 5\r\n     *\/\r\n    for (let set = 0; set < 2; set++) {\r\n\r\n        originalCards.forEach(card => {\r\n\r\n            const clone = card.cloneNode(true);\r\n\r\n            clone.classList.add(\"clone\");\r\n\r\n            track.appendChild(clone);\r\n\r\n        });\r\n\r\n    }\r\n\r\n    const cards = Array.from(\r\n        track.querySelectorAll(\".portfolio-card\")\r\n    );\r\n\r\n\r\n    \/*\r\n     * Start at the SECOND set.\r\n     *\r\n     * This gives us room to move forward\r\n     * without immediately hitting the edge.\r\n     *\/\r\n    let currentIndex = total;\r\n\r\n    let autoplay;\r\n    let isAnimating = false;\r\n\r\n\r\n    \/*\r\n     * Update card appearance\r\n     *\/\r\n    function updateCardStyles() {\r\n\r\n        cards.forEach((card, index) => {\r\n\r\n            const distance =\r\n                index - currentIndex;\r\n\r\n\r\n            if (distance === 0) {\r\n\r\n                card.style.transform =\r\n                    \"rotate(0deg) scale(1)\";\r\n\r\n                card.style.opacity = \"1\";\r\n\r\n                card.style.zIndex = \"5\";\r\n\r\n            }\r\n\r\n            else if (distance === -1) {\r\n\r\n                card.style.transform =\r\n                    \"rotate(-5deg) scale(0.92)\";\r\n\r\n                card.style.opacity = \"0.95\";\r\n\r\n                card.style.zIndex = \"3\";\r\n\r\n            }\r\n\r\n            else if (distance === 1) {\r\n\r\n                card.style.transform =\r\n                    \"rotate(5deg) scale(0.92)\";\r\n\r\n                card.style.opacity = \"0.95\";\r\n\r\n                card.style.zIndex = \"3\";\r\n\r\n            }\r\n\r\n            else {\r\n\r\n                card.style.transform =\r\n                    \"scale(0.82)\";\r\n\r\n                card.style.opacity = \"0.35\";\r\n\r\n                card.style.zIndex = \"1\";\r\n\r\n            }\r\n\r\n        });\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * Center the active card\r\n     *\/\r\n    function positionSlider(animate = true) {\r\n\r\n        const card = cards[currentIndex];\r\n\r\n        if (!card) return;\r\n\r\n\r\n        if (animate) {\r\n\r\n            track.style.transition =\r\n                \"transform 0.8s cubic-bezier(0.22, 1, 0.36, 1)\";\r\n\r\n        } else {\r\n\r\n            track.style.transition = \"none\";\r\n\r\n        }\r\n\r\n\r\n        const sliderCenter =\r\n            slider.offsetWidth \/ 2;\r\n\r\n\r\n        const cardCenter =\r\n            card.offsetLeft +\r\n            (card.offsetWidth \/ 2);\r\n\r\n\r\n        const movement =\r\n            sliderCenter - cardCenter;\r\n\r\n\r\n        track.style.transform =\r\n            `translateX(${movement}px)`;\r\n\r\n\r\n        updateCardStyles();\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * NEXT SLIDE\r\n     *\/\r\n    function nextSlide() {\r\n\r\n        if (isAnimating) return;\r\n\r\n        isAnimating = true;\r\n\r\n        currentIndex++;\r\n\r\n        positionSlider(true);\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * When the animation finishes,\r\n     * silently move back to the middle set.\r\n     *\/\r\n    track.addEventListener(\r\n        \"transitionend\",\r\n        function () {\r\n\r\n            isAnimating = false;\r\n\r\n\r\n            \/*\r\n             * We've reached the THIRD set.\r\n             *\r\n             * Move back exactly one set.\r\n             *\r\n             * Visually nothing changes because\r\n             * the cards are identical.\r\n             *\/\r\n\r\n            if (currentIndex >= total * 2) {\r\n\r\n                currentIndex -= total;\r\n\r\n                positionSlider(false);\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n     * AUTOPLAY\r\n     *\r\n     * Every 2 seconds.\r\n     *\/\r\n    function startAutoplay() {\r\n\r\n        clearInterval(autoplay);\r\n\r\n        autoplay = setInterval(\r\n            nextSlide,\r\n            2000\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * Pause on hover\r\n     *\/\r\n    slider.addEventListener(\r\n        \"mouseenter\",\r\n        function () {\r\n\r\n            clearInterval(autoplay);\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n     * Resume\r\n     *\/\r\n    slider.addEventListener(\r\n        \"mouseleave\",\r\n        function () {\r\n\r\n            startAutoplay();\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n     * Recalculate on resize\r\n     *\/\r\n    window.addEventListener(\r\n        \"resize\",\r\n        function () {\r\n\r\n            positionSlider(false);\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n     * INITIALIZE\r\n     *\/\r\n    positionSlider(false);\r\n\r\n    startAutoplay();\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f89e665 e-flex e-con-boxed e-con e-parent\" data-id=\"f89e665\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0f67796 e-grid e-con-full e-con e-child\" data-id=\"0f67796\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-51fb321 e-con-full e-flex e-con e-child\" data-id=\"51fb321\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ddfb222 elementor-widget-divider--view-line elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"ddfb222\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInLeft&quot;}\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e55c1c elementor-widget elementor-widget-heading\" data-id=\"2e55c1c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">An award-winning full-stack digital marketing studio<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e816e2b elementor-widget elementor-widget-text-editor\" data-id=\"e816e2b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fe1743 elementor-widget__width-inherit elementor-invisible elementor-widget elementor-widget-image\" data-id=\"8fe1743\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"798\" src=\"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/White-and-Brown-Minimalist-Laptop-Mockup-Instagram-Post-e1788451730608-1024x1021.png\" class=\"attachment-large size-large wp-image-208\" alt=\"\" srcset=\"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/White-and-Brown-Minimalist-Laptop-Mockup-Instagram-Post-e1788451730608-1024x1021.png 1024w, https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/White-and-Brown-Minimalist-Laptop-Mockup-Instagram-Post-e1788451730608-300x300.png 300w, https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/White-and-Brown-Minimalist-Laptop-Mockup-Instagram-Post-e1788451730608-150x150.png 150w, https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/White-and-Brown-Minimalist-Laptop-Mockup-Instagram-Post-e1788451730608-768x766.png 768w, https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/White-and-Brown-Minimalist-Laptop-Mockup-Instagram-Post-e1788451730608.png 1080w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d9b5b4 e-con-full e-flex e-con e-child\" data-id=\"2d9b5b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5eef9d elementor-widget__width-initial elementor-absolute elementor-hidden-tablet elementor-hidden-mobile elementor-invisible elementor-widget elementor-widget-image\" data-id=\"c5eef9d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;,&quot;_animation_tablet&quot;:&quot;fadeInLeft&quot;,&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/mockup-1024x1024.png\" class=\"attachment-large size-large wp-image-203\" alt=\"\" srcset=\"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/mockup-1024x1024.png 1024w, https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/mockup-300x300.png 300w, https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/mockup-150x150.png 150w, https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/mockup-768x768.png 768w, https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-content\/uploads\/2026\/09\/mockup.png 1080w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WordPress Developer | Technical Support Specialist I CRAFT IMPACTING DIGITAL EXPERIENCES VIEW MY PORTFOLIO TRUSTED BY \u25c9 BrowStudio \u2723 Luminae \u25c6 Momentum Co. Horizon Coffee Sustainable Sourcing Nova Tech Full Brand Identity Narrative Matters Digital Storytelling Digital Futures Product Experience Maison Studio Creative Direction An award-winning full-stack digital marketing studio Lorem ipsum dolor sit amet, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":151,"href":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":235,"href":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-json\/wp\/v2\/pages\/10\/revisions\/235"}],"wp:attachment":[{"href":"https:\/\/marvellousbenson.me.dev46.xyz\/mb\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}