{"id":2,"date":"2026-05-09T03:25:44","date_gmt":"2026-05-09T03:25:44","guid":{"rendered":"https:\/\/www.storytempest.com\/?page_id=2"},"modified":"2026-07-20T21:09:28","modified_gmt":"2026-07-20T21:09:28","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/www.storytempest.com\/","title":{"rendered":"Seth Thygesen: Calm leadership inside the storm of active production"},"content":{"rendered":"<div id=\"story-tempest-portfolio-root\" class=\"min-h-screen flex flex-col selection:bg-sky-500\/30 selection:text-white\">\n<p>    <!-- WordPress-Safe Internal Resource Imports -->\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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&#038;family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&#038;display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><\/p>\n<p>    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    fontFamily: {\n                        sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\n                        serif: ['\"Playfair Display\"', 'serif'],\n                    },\n                    colors: {\n                        bgDark: '#0A0D1A',\n                        bgCard: '#12162B',\n                        cerulean: '#38BDF8',\n                        indigoColor: '#818CF8',\n                        emeraldColor: '#34D399',\n                        roseColor: '#FB7185',\n                    }\n                }\n            }\n        }\n    <\/script><\/p>\n<style>\n        \/* ==========================================================================\n           1. THE NUCLEAR SPACING & WIDTH RESET\n           Obliterates Blocksy's core wrappers, forces full width, and overrides Gutenberg\n           ========================================================================== *\/\n        main.site-main,\n        .ct-container,\n        .ct-spacing,\n        .entry-content,\n        .wp-site-blocks,\n        .wp-block-html {\n            padding: 0 !important;\n            margin: 0 !important;\n            max-width: none !important;\n            width: 100% !important;\n        }<\/p>\n<p>        .entry-content > *:first-child,\n        .wp-site-blocks > *:first-child {\n            margin-top: 0 !important;\n            padding-top: 0 !important;\n        }<\/p>\n<p>        .entry-content p:empty,\n        .entry-content br {\n            display: none !important;\n        }<\/p>\n<p>        \/* ==========================================================================\n           2. ADMIN BAR CLIPPING FIX\n           Forces the sticky header down below the logged-in WordPress bar\n           ========================================================================== *\/\n        .admin-bar #story-tempest-portfolio-root .sticky-header {\n            top: 32px !important;\n        }\n        @media screen and (max-width: 782px) {\n            .admin-bar #story-tempest-portfolio-root .sticky-header {\n                top: 46px !important;\n            }\n        }<\/p>\n<p>        \/* ==========================================================================\n           3. WORDPRESS COMPATIBILITY & ISOLATION STYLES\n           ========================================================================== *\/\n        #story-tempest-portfolio-root {\n            width: 100vw !important;\n            max-width: 100vw !important;\n            position: relative !important;\n            left: 50% !important;\n            transform: translateX(-50%) !important;\n            font-family: 'Plus Jakarta Sans', sans-serif;\n            background-color: #0A0D1A;\n            color: #F8FAFC;\n            position: relative;\n            z-index: 1;\n            --bg-dark: #0A0D1A;\n            --bg-card: #12162B;\n            --text-primary: #F8FAFC;\n            --text-secondary: #E2E8F0;\n            --text-muted: #94A3B8;\n            --color-cerulean: #38BDF8;\n            --color-indigo: #818CF8;\n            --color-emerald: #34D399;\n            --color-rose: #FB7185;\n        }<\/p>\n<p>        #story-tempest-portfolio-root .tempest-ambient {\n            background: \n                radial-gradient(circle at 50% 30%, rgba(56, 189, 248, 0.04) 0%, transparent 60%),\n                radial-gradient(circle at 10% 80%, rgba(129, 140, 248, 0.03) 0%, transparent 50%),\n                radial-gradient(circle at 90% 20%, rgba(56, 189, 248, 0.03) 0%, transparent 50%);\n        }<\/p>\n<p>        #story-tempest-portfolio-root .sidebar-link {\n            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n        }<\/p>\n<p>        @keyframes rotateVortex {\n            from { transform: rotate(0deg); }\n            to { transform: rotate(360deg); }\n        }\n        #story-tempest-portfolio-root .animate-vortex {\n            transform-origin: center;\n            animation: rotateVortex 40s linear infinite;\n        }\n        #story-tempest-portfolio-root .animate-vortex-reverse {\n            transform-origin: center;\n            animation: rotateVortex 60s linear infinite reverse;\n        }<\/p>\n<p>        #story-tempest-portfolio-root section {\n            scroll-margin-top: 100px;\n        }\n\/* Safe Scroll Reveal Animation Classes *\/\n        .tempest-reveal {\n            opacity: 0;\n            transform: translateY(40px);\n        }\n        .tempest-reveal.is-visible {\n            opacity: 1;\n            transform: translateY(0);\n            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        }\n    <\/style>\n<p>    <!-- Ambient background canvas --><\/p>\n<div class=\"absolute inset-0 tempest-ambient pointer-events-none z-0\"><\/div>\n<p>    <!-- 1. STICKY HEADER --><\/p>\n<header class=\"sticky-header sticky top-0 z-50 bg-[#0A0D1A]\/85 backdrop-blur-xl border-b border-indigo-500\/10 px-6 sm:px-12 py-4 flex items-center justify-between transition-all relative z-10\">\n        <a href=\"#introduction\" class=\"flex items-center gap-4 group\"><br \/>\n            <svg viewBox=\"0 0 100 100\" class=\"w-10 h-10 stroke-current text-cerulean transition-transform duration-500 group-hover:rotate-45\" fill=\"none\">\n                <path d=\"M 15,15 C 35,10 65,5 85,15 C 95,25 75,32 50,35 C 20,38 12,48 30,55 C 50,62 80,60 75,70 C 70,78 40,75 35,82 C 30,88 40,92 50,92\" stroke=\"#38BDF8\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                <path d=\"M 25,22 C 45,18 60,12 75,20 C 80,25 65,30 50,32 C 28,34 20,42 35,48 C 50,54 70,52 65,60 C 60,66 42,64 42,70\" stroke=\"#818CF8\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\n                <circle cx=\"50\" cy=\"92\" r=\"4.5\" fill=\"#F8FAFC\"\/>\n            <\/svg><\/p>\n<div class=\"flex flex-col\">\n                <span class=\"font-serif font-bold text-xl tracking-wide text-[#F8FAFC]\">STORY TEMPEST<\/span><br \/>\n                <span class=\"text-xs text-[#94A3B8] font-light tracking-widest uppercase\">Seth Thygesen Portfolio<\/span>\n            <\/div>\n<p>        <\/a><\/p>\n<div class=\"hidden md:flex items-center gap-6 text-sm\">\n            <a href=\"mailto:seth.thygesen@gmail.com\" class=\"hover:text-cerulean transition-colors flex items-center gap-2 text-[#E2E8F0] font-light\"><br \/>\n                <i class=\"fa-solid fa-envelope text-cerulean\"><\/i> seth.thygesen@gmail.com<br \/>\n            <\/a><br \/>\n            <a href=\"https:\/\/linkedin.com\/in\/seth-thygesen\" target=\"_blank\" class=\"hover:text-cerulean transition-colors flex items-center gap-2 text-[#E2E8F0] font-light\" rel=\"noopener\"><br \/>\n                <i class=\"fa-brands fa-linkedin text-cerulean\"><\/i> linkedin.com\/in\/seth-thygesen<br \/>\n            <\/a>\n        <\/div>\n<\/header>\n<p><!-- 1.5 FULL-WIDTH HERO & STATS SECTION (Scrolls away) --><\/p>\n<section id=\"introduction\" class=\"w-full border-b border-indigo-500\/10 relative z-10\">\n<p><!-- Top Half: Hero Content --><\/p>\n<div class=\"max-w-7xl mx-auto px-6 sm:px-12 lg:px-16 pt-16 lg:pt-24 pb-4 flex flex-col md:flex-row gap-12 items-stretch\">\n<p>            <!-- Left Column: Text --><\/p>\n<div class=\"w-full md:w-7\/12 space-y-6 flex flex-col justify-center\">\n<div class=\"inline-flex items-center gap-2 bg-sky-500\/10 border border-sky-500\/20 rounded-full px-4 py-1.5 self-start\">\n                    <span class=\"w-2 h-2 rounded-full bg-cerulean animate-pulse\"><\/span><br \/>\n                    <span class=\"text-xs font-bold text-cerulean uppercase tracking-widest\">Executive Producer Portfolio<\/span>\n                <\/div>\n<h1 class=\"text-5xl sm:text-7xl font-serif font-semibold tracking-tight text-[#F8FAFC] leading-[1.05]\">\n                    Harmonious leadership inside the <span class=\"text-cerulean italic font-normal\">storm of active production<\/span>.<br \/>\n                <\/h1>\n<div class=\"h-1 w-24 bg-gradient-to-r from-cerulean to-indigoColor rounded-full my-8\"><\/div>\n<p class=\"text-[#E2E8F0] text-lg sm:text-xl font-light leading-relaxed max-w-2xl\">\n                    I&#8217;m <strong class=\"text-white font-semibold\">Seth Thygesen<\/strong>. I combine powerful narrative instincts and analytical product strategy into my leadership, allowing me to guide teams into creating their best work that convert a user&#8217;s investment in story into focused, monetizable engagement. Together, we&#8217;ll tell stories that make great products.\n                <\/p>\n<\/p><\/div>\n<p>            <!-- Right Column: Image (Absolute container constraint) --><\/p>\n<div class=\"w-full md:w-5\/12 relative mt-8 md:mt-0 min-h-[400px] md:min-h-0\">\n                <img decoding=\"async\" src=\"https:\/\/www.storytempest.com\/wp-content\/uploads\/2026\/07\/SethThygesen.Headshot-1.jpg\" alt=\"Seth Thygesen\" class=\"absolute inset-0 w-full h-full rounded-2xl border border-indigo-500\/20 shadow-2xl shadow-cerulean\/10 object-cover object-top transition-transform duration-700 hover:scale-[1.02]\">\n            <\/div>\n<\/p><\/div>\n<p><!-- Bottom Half: Impact Stats Carousel --><\/p>\n<div class=\"max-w-7xl mx-auto px-6 sm:px-12 lg:px-16 pt-0 pb-8 lg:pb-12 w-full\">\n<p>            <!-- Carousel Container --><\/p>\n<div class=\"w-full\">\n<p>                <!-- Slide 1: codeSpark --><\/p>\n<div id=\"slide-0\" onclick=\"window.location.href='#case2'\" style=\"display: flex; cursor: pointer;\" class=\"flex-col md:flex-row items-center justify-between w-full bg-[#12162B] border border-indigo-500\/10 rounded-xl p-8 md:p-12 text-center shadow-lg border-b-4 border-b-indigoColor hover:bg-[#1A2035] transition-colors duration-300\">\n<div class=\"w-full md:w-1\/2 flex justify-center mb-8 md:mb-0\">\n<div class=\"w-48 h-48 border-2 border-dashed border-indigo-500\/30 rounded-xl flex items-center justify-center text-indigo-500\/50 text-sm font-mono tracking-widest uppercase\">codeSpark Graphic<\/div>\n<\/p><\/div>\n<div class=\"w-full md:w-1\/2 flex flex-col items-center justify-center text-center\">\n                        <i class=\"fa-solid fa-magnet text-indigoColor text-4xl sm:text-5xl mb-4\"><\/i><br \/>\n                        <span class=\"text-white font-semibold text-7xl sm:text-8xl font-serif block mb-2 leading-none\">80%<\/span><br \/>\n                        <span class=\"text-[#E2E8F0] text-xl sm:text-2xl font-light leading-tight block mb-3\">increase in retention<\/span><br \/>\n                        <strong class=\"text-indigoColor text-lg sm:text-xl font-bold uppercase tracking-widest block\">codeSpark<\/strong>\n                    <\/div>\n<\/p><\/div>\n<p>                <!-- Slide 2: Begin --><\/p>\n<div id=\"slide-1\" onclick=\"window.location.href='#case1'\" style=\"display: none; cursor: pointer;\" class=\"flex-col md:flex-row items-center justify-between w-full bg-[#12162B] border border-indigo-500\/10 rounded-xl p-8 md:p-12 text-center shadow-lg border-b-4 border-b-cerulean hover:bg-[#1A2035] transition-colors duration-300\">\n<div class=\"w-full md:w-1\/2 flex justify-center mb-8 md:mb-0\">\n<div class=\"w-48 h-48 border-2 border-dashed border-cerulean\/30 rounded-xl flex items-center justify-center text-cerulean\/50 text-sm font-mono tracking-widest uppercase\">Begin Graphic<\/div>\n<\/p><\/div>\n<div class=\"w-full md:w-1\/2 flex flex-col items-center justify-center text-center\">\n                        <i class=\"fa-solid fa-chart-line text-cerulean text-4xl sm:text-5xl mb-4\"><\/i><br \/>\n                        <span class=\"text-white font-semibold text-7xl sm:text-8xl font-serif block mb-2 leading-none\">35%<\/span><br \/>\n                        <span class=\"text-[#E2E8F0] text-xl sm:text-2xl font-light leading-tight block mb-3\">ecosystem LTV boost<\/span><br \/>\n                        <strong class=\"text-cerulean text-lg sm:text-xl font-bold uppercase tracking-widest block\">Begin<\/strong>\n                    <\/div>\n<\/p><\/div>\n<p>                <!-- Slide 3: 7 Dragons --><\/p>\n<div id=\"slide-2\" onclick=\"window.location.href='#case3'\" style=\"display: none; cursor: pointer;\" class=\"flex-col md:flex-row items-center justify-between w-full bg-[#12162B] border border-indigo-500\/10 rounded-xl p-8 md:p-12 text-center shadow-lg border-b-4 border-b-emeraldColor hover:bg-[#1A2035] transition-colors duration-300\">\n<div class=\"w-full md:w-1\/2 flex justify-center mb-8 md:mb-0\">\n<div class=\"w-48 h-48 border-2 border-dashed border-emeraldColor\/30 rounded-xl flex items-center justify-center text-emeraldColor\/50 text-sm font-mono tracking-widest uppercase\">7 Dragons Graphic<\/div>\n<\/p><\/div>\n<div class=\"w-full md:w-1\/2 flex flex-col items-center justify-center text-center\">\n                        <i class=\"fa-solid fa-users text-emeraldColor text-4xl sm:text-5xl mb-4\"><\/i><br \/>\n                        <span class=\"text-white font-semibold text-7xl sm:text-8xl font-serif block mb-2 leading-none\">0-1MM<\/span><br \/>\n                        <span class=\"text-[#E2E8F0] text-xl sm:text-2xl font-light leading-tight block mb-3\">users in 1 year<\/span><br \/>\n                        <strong class=\"text-emeraldColor text-lg sm:text-xl font-bold uppercase tracking-widest block\">7 Dragons<\/strong>\n                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>            <!-- Carousel Navigation Dots --><\/p>\n<div class=\"flex justify-center items-center gap-4 mt-8\">\n                <button id=\"dot-0\" class=\"carousel-dot w-3 h-3 rounded-full bg-indigoColor transition-colors duration-300 cursor-pointer\" aria-label=\"Slide 1\"><\/button><br \/>\n                <button id=\"dot-1\" class=\"carousel-dot w-3 h-3 rounded-full bg-slate-700 hover:bg-slate-500 transition-colors duration-300 cursor-pointer\" aria-label=\"Slide 2\"><\/button><br \/>\n                <button id=\"dot-2\" class=\"carousel-dot w-3 h-3 rounded-full bg-slate-700 hover:bg-slate-500 transition-colors duration-300 cursor-pointer\" aria-label=\"Slide 3\"><\/button>\n            <\/div>\n<\/p><\/div>\n<p>        <!-- Logic Script (Bulletproofed with safe DOM checks) --><br \/>\n        <script>document.addEventListener('DOMContentLoaded',function(){const total=3;let current=0;let timer;const colors=['bg-indigoColor','bg-cerulean','bg-emeraldColor'];function show(index){for(let i=0;i<total;i++){let s=document.getElementById('slide-'+i);let d=document.getElementById('dot-'+i);if(s)s.style.display='none';if(d)d.className='carousel-dot w-3 h-3 rounded-full bg-slate-700 hover:bg-slate-500 transition-colors duration-300 cursor-pointer';}current=index;let as=document.getElementById('slide-'+current);let ad=document.getElementById('dot-'+current);if(as)as.style.display='flex';if(ad)ad.className='carousel-dot w-3 h-3 rounded-full transition-colors duration-300 cursor-pointer '+colors[current];}function next(){show((current+1)%total);}function play(){timer=setInterval(next,5000);}function reset(){clearInterval(timer);play();}for(let i=0;i<total;i++){let d=document.getElementById('dot-'+i);if(d){d.addEventListener('click',function(){if(current!==i){show(i);reset();}});}}show(0);play();});<\/script><\/p>\n<\/section>\n<p>    <!-- 2. SIDEBAR AND MAIN BODY SPLIT --><\/p>\n<div class=\"tempest-reveal flex-grow flex flex-col lg:flex-row relative z-10\">\n<p>        <!-- STICKY SIDE NAVIGATION --><\/p>\n<aside class=\"w-full lg:w-80 shrink-0 bg-[#0A0D1A]\/40 border-b lg:border-b-0 lg:border-r border-indigo-500\/10 p-8 sticky top-20 lg:top-24 self-start z-40 lg:h-[calc(100vh-80px)] overflow-y-auto\">\n<nav class=\"space-y-8\">\n<div>\n<p class=\"text-xs font-bold text-cerulean uppercase tracking-widest mb-4\">Navigating the Tempest<\/p>\n<ul class=\"space-y-3\">\n<li>\n                            <a href=\"#introduction\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                01. Introduction<br \/>\n                            <\/a>\n                        <\/li>\n<li>\n                            <a href=\"#philosophy\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                02. Core Philosophy<br \/>\n                            <\/a>\n                        <\/li>\n<li>\n                            <a href=\"#roots\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                03. Play Roots<br \/>\n                            <\/a>\n                        <\/li>\n<\/ul><\/div>\n<div>\n<p class=\"text-xs font-bold text-cerulean uppercase tracking-widest mb-4\">Active Operations<\/p>\n<ul class=\"space-y-3\">\n<li>\n                            <a href=\"#case1\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                Case Study I: Begin<br \/>\n                            <\/a>\n                        <\/li>\n<li>\n                            <a href=\"#case2\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                Case Study II: codeSpark<br \/>\n                            <\/a>\n                        <\/li>\n<li>\n                            <a href=\"#case3\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                Case Study III: 7 Dragons<br \/>\n                            <\/a>\n                        <\/li>\n<li>\n                            <a href=\"#case4\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                Case Study IV: Paradox<br \/>\n                            <\/a>\n                        <\/li>\n<\/ul><\/div>\n<div>\n<p class=\"text-xs font-bold text-cerulean uppercase tracking-widest mb-4\">Ecosystem Metrics<\/p>\n<ul class=\"space-y-3\">\n<li>\n                            <a href=\"#competencies\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                Core Competencies<br \/>\n                            <\/a>\n                        <\/li>\n<li>\n                            <a href=\"#benchmarks\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                Impact Benchmarks<br \/>\n                            <\/a>\n                        <\/li>\n<li>\n                            <a href=\"#contact\" class=\"sidebar-link block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-slate-800\/40 text-[#E2E8F0] hover:text-white border-l-2 border-transparent\"><br \/>\n                                Secure Partnership<br \/>\n                            <\/a>\n                        <\/li>\n<\/ul><\/div>\n<\/nav>\n<\/aside>\n<p>        <!-- MAIN CONTENT AREA --><br \/>\n        <main class=\"flex-grow px-6 pb-16 pt-8 sm:px-12 sm:pb-24 lg:px-16 lg:pt-8 space-y-24 max-w-6xl\"><\/p>\n<p>            <!-- 02. CORE PHILOSOPHY --><\/p>\n<section id=\"philosophy\" class=\"scroll-mt-28 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center\">\n<div class=\"tempest-reveal lg:col-span-7 space-y-6\">\n                    <span class=\"text-xs font-bold text-indigoColor uppercase tracking-widest\">Leadership Philosophy<\/span><\/p>\n<h2 class=\"text-3xl sm:text-4xl font-serif text-[#F8FAFC]\">Decades of Emergent System Architecture<\/h2>\n<p class=\"text-[#E2E8F0] font-light text-base leading-relaxed\">\n                        Guiding complex interactive worlds as a Tabletop Dungeon Master has provided me with a robust blueprint for executive game production. I construct the <strong class=\"text-white font-semibold\">concentric boundaries and parameters<\/strong> that organize distributed creative departments without stifling organic ownership.\n                    <\/p>\n<p class=\"text-[#E2E8F0] font-light text-base leading-relaxed\">\n                        My leadership is built on high clarity, active systemic preparation, and deep developer alignment, safeguarding release pipelines from project sprawl and burnout.\n                    <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4\">\n<div class=\"flex gap-3 items-start\">\n                            <i class=\"fa-solid fa-wind text-cerulean text-lg mt-1\"><\/i><\/p>\n<div>\n<h4 class=\"font-bold text-[#F8FAFC] text-sm\">Systemic Calm<\/h4>\n<p class=\"text-[#94A3B8] text-xs font-light\">Formulating precise, predictable sprint parameters.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"flex gap-3 items-start\">\n                            <i class=\"fa-solid fa-users text-cerulean text-lg mt-1\"><\/i><\/p>\n<div>\n<h4 class=\"font-bold text-[#F8FAFC] text-sm\">Empathetic Unblocking<\/h4>\n<p class=\"text-[#94A3B8] text-xs font-light\">Synthesizing grass-roots engineer suggestions.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>                <!-- ILLUSTRATION: Circular Wind Currents --><\/p>\n<div class=\"lg:col-span-5 flex justify-center\">\n<div class=\"w-full max-w-sm aspect-square bg-[#12162B]\/40 border border-indigo-500\/15 rounded-2xl p-6 flex flex-col justify-between items-center relative overflow-hidden\">\n                        <svg viewBox=\"0 0 100 100\" class=\"w-full h-full max-h-[220px]\">\n                            <g class=\"animate-vortex\">\n                                <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"rgba(56, 189, 248, 0.15)\" stroke-width=\"1.5\" stroke-dasharray=\"8,4\"\/>\n                                <path d=\"M 50,10 A 40,40 0 0,1 90,50\" stroke=\"#38BDF8\" stroke-width=\"2\" stroke-linecap=\"round\" fill=\"none\"\/>\n                            <\/g>\n                            <g class=\"animate-vortex-reverse\">\n                                <circle cx=\"50\" cy=\"50\" r=\"28\" fill=\"none\" stroke=\"rgba(129, 140, 248, 0.12)\" stroke-width=\"1.5\" stroke-dasharray=\"6,4\"\/>\n                                <path d=\"M 50,78 A 28,28 0 0,1 22,50\" stroke=\"#818CF8\" stroke-width=\"2\" stroke-linecap=\"round\" fill=\"none\"\/>\n                            <\/g>\n                            <g class=\"animate-vortex\">\n                                <circle cx=\"50\" cy=\"50\" r=\"16\" fill=\"none\" stroke=\"rgba(56, 189, 248, 0.2)\" stroke-width=\"1\"\/>\n                                <path d=\"M 50,34 A 16,16 0 0,1 66,50\" stroke=\"#38BDF8\" stroke-width=\"2.5\" stroke-linecap=\"round\" fill=\"none\"\/>\n                            <\/g>\n                            <circle cx=\"50\" cy=\"50\" r=\"6\" fill=\"#F8FAFC\"\/>\n                        <\/svg><br \/>\n                        <span class=\"text-[10px] font-mono tracking-widest text-[#94A3B8] uppercase text-center mt-2\">Organized Storm Current Mapping<\/span>\n                    <\/div>\n<\/p><\/div>\n<\/section>\n<hr class=\"border-indigo-500\/10\">\n<p>            <!-- 03. PLAY ROOTS --><\/p>\n<section id=\"roots\" class=\"scroll-mt-28 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center\">\n<div class=\"tempest-reveal lg:col-span-5 flex justify-center order-last lg:order-first\">\n                    <!-- ILLUSTRATION: Coding Interface Mockup --><\/p>\n<div class=\"w-full max-w-sm aspect-square bg-[#12162B]\/40 border border-indigo-500\/15 rounded-2xl p-6 flex flex-col justify-between relative overflow-hidden\">\n<div class=\"flex items-center gap-2 border-b border-indigo-500\/10 pb-4\">\n                            <span class=\"w-2.5 h-2.5 rounded-full bg-roseColor\/80\"><\/span><br \/>\n                            <span class=\"w-2.5 h-2.5 rounded-full bg-cerulean\/80\"><\/span><br \/>\n                            <span class=\"w-2.5 h-2.5 rounded-full bg-emeraldColor\/80\"><\/span><br \/>\n                            <span class=\"text-[9px] font-mono text-[#94A3B8] tracking-widest ml-4\">RPGM_SYSTEM_PRESETS<\/span>\n                        <\/div>\n<p>                        <svg viewBox=\"0 0 200 120\" class=\"w-full h-auto\">\n                            <path d=\"M 10 20 L 70 20\" stroke=\"#38BDF8\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                            <path d=\"M 10 40 L 130 40\" stroke=\"#818CF8\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                            <path d=\"M 25 60 L 95 60\" stroke=\"#94A3B8\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                            <path d=\"M 25 80 L 170 80\" stroke=\"#34D399\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                            <path d=\"M 10 100 L 50 100\" stroke=\"#FB7185\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                        <\/svg><br \/>\n                        <span class=\"text-[10px] font-mono tracking-widest text-[#94A3B8] uppercase text-center\">Indie Play Frameworks<\/span>\n                    <\/div>\n<\/p><\/div>\n<div class=\"lg:col-span-7 space-y-6\">\n                    <span class=\"text-xs font-bold text-indigoColor uppercase tracking-widest\">Early Foundation<\/span><\/p>\n<h2 class=\"text-3xl sm:text-4xl font-serif text-[#F8FAFC]\">Hand-Built Autonomy<\/h2>\n<p class=\"text-[#E2E8F0] font-light text-base leading-relaxed\">\n                        Developing narrative structures and complex scripting in <strong class=\"text-white font-semibold\">RPG Maker<\/strong> beginning at age 12 (crafting projects like <em>Radiation Man<\/em> and <em>Flowers for Algernon<\/em>) taught me to appreciate software construction at its most fundamental level.\n                    <\/p>\n<p class=\"text-[#E2E8F0] font-light text-base leading-relaxed\">\n                        This native designer foundation guarantees that I communicate with engineering and art departments as an empathetic peer who understands exactly what is required to turn technical specs into functional magic.\n                    <\/p>\n<\/p><\/div>\n<\/section>\n<hr class=\"border-indigo-500\/10\">\n<p>            <!-- 04. ACTIVE OPERATIONS \/ CASE STUDIES --><\/p>\n<section class=\"space-y-16\">\n<div class=\"text-center max-w-2xl mx-auto\">\n                    <span class=\"text-xs font-bold text-cerulean uppercase tracking-widest block mb-2\">The Production Core<\/span><\/p>\n<h2 class=\"text-4xl sm:text-5xl font-serif text-[#F8FAFC]\">Strategic Case Studies<\/h2>\n<\/p><\/div>\n<p>                <!-- CASE I: BEGIN --><\/p>\n<article id=\"case1\" class=\"scroll-mt-28 bg-[#12162B]\/30 border border-indigo-500\/10 rounded-2xl p-8 sm:p-12 space-y-8\">\n<div class=\"tempest-reveal flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-indigo-500\/10 pb-6\">\n<div>\n                            <span class=\"text-xs font-semibold text-cerulean uppercase tracking-wider\">Begin Learning Ecosystem<\/span><\/p>\n<h3 class=\"text-2xl sm:text-3xl font-serif text-white mt-1\">Tech Stack Harmonization<\/h3>\n<\/p><\/div>\n<div class=\"flex flex-wrap gap-2\">\n                            <span class=\"px-3 py-1 bg-slate-800\/60 border border-indigo-500\/20 text-slate-300 text-xs font-bold rounded-lg\">Unity Wrapper<\/span><br \/>\n                            <span class=\"px-3 py-1 bg-slate-800\/60 border border-indigo-500\/20 text-slate-300 text-xs font-bold rounded-lg\">Parallel SDK<\/span><br \/>\n                            <span class=\"px-3 py-1 bg-emeraldColor\/20 border border-emeraldColor\/30 text-emeraldColor text-xs font-bold rounded-lg\">+35% LTV Boost<\/span>\n                        <\/div>\n<\/p><\/div>\n<div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-center\">\n<div class=\"lg:col-span-7 space-y-6\">\n<div>\n<h4 class=\"text-sm font-bold text-cerulean uppercase tracking-widest mb-3\"><i class=\"fa-solid fa-triangle-exclamation mr-2\"><\/i>The Business Obstacle<\/h4>\n<p class=\"text-[#E2E8F0] font-light text-sm sm:text-base leading-relaxed\">\n                                    Following corporate integration, Begin inherited three mature learning brands working on completely separate, incompatible technical architectures: HOMER and Learn with Sesame Street (native React\/HTML5 platforms) and codeSpark (constructed purely in Unity\/C#). This fragmentation made engineering resources impossible to balance across products and blocked the strategic launch of a unified educational app bundle.\n                                <\/p>\n<\/p><\/div>\n<div>\n<h4 class=\"text-sm font-bold text-cerulean uppercase tracking-widest mb-3\"><i class=\"fa-solid fa-gears mr-2\"><\/i>Strategic Intervention<\/h4>\n<p class=\"text-[#E2E8F0] font-light text-sm sm:text-base leading-relaxed\">\n                                    I directed an engineering-alignment workgroup with the Director of Engineering, Engineer-At-Large, and product leads. We developed a custom Unity SDK capable of executing and hosting non-Unity HTML5 modules. We migrated Sesame Street into the stable wrap, followed by HOMER. Concurrently, I enacted a disciplined descope on the digital component of the physical Little Passports subscription box, trimming the planned launch list from 5 games to 2 to protect engineering velocity.\n                                <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p>                        <!-- SYSTEM FLOW DIAGRAM --><\/p>\n<div class=\"lg:col-span-5 flex justify-center\">\n<div class=\"w-full bg-[#12162B]\/40 border border-indigo-500\/15 rounded-2xl p-6 flex flex-col items-center justify-center text-center shadow-lg\">\n<div class=\"grid grid-cols-3 gap-2.5 w-full mb-6\">\n<div class=\"bg-[#1A1F38] border border-indigo-500\/20 rounded-lg p-2.5 text-center shadow-sm\">\n                                        <span class=\"block text-[11px] font-bold text-white\">React<\/span><br \/>\n                                        <span class=\"block text-[9px] text-[#94A3B8] mt-0.5\">(HOMER)<\/span>\n                                    <\/div>\n<div class=\"bg-[#1A1F38] border border-indigo-500\/20 rounded-lg p-2.5 text-center shadow-sm\">\n                                        <span class=\"block text-[11px] font-bold text-white\">Phaser<\/span><br \/>\n                                        <span class=\"block text-[9px] text-[#94A3B8] mt-0.5\">(Sesame)<\/span>\n                                    <\/div>\n<div class=\"bg-[#1A1F38] border border-indigo-500\/20 rounded-lg p-2.5 text-center shadow-sm\">\n                                        <span class=\"block text-[11px] font-bold text-white\">Unity<\/span><br \/>\n                                        <span class=\"block text-[9px] text-[#94A3B8] mt-0.5\">(codeSpark)<\/span>\n                                    <\/div>\n<\/p><\/div>\n<div class=\"relative w-full flex justify-center mb-6\">\n                                    <svg viewBox=\"0 0 100 30\" class=\"w-24 h-auto stroke-[#818CF8]\" fill=\"none\">\n                                        <path d=\"M 10,2 L 50,28 L 90,2\" stroke-width=\"1.5\" stroke-dasharray=\"3,3\" stroke-linecap=\"round\"\/>\n                                        <circle cx=\"50\" cy=\"28\" r=\"2.5\" fill=\"#38BDF8\"\/>\n                                    <\/svg>\n                                <\/div>\n<div class=\"bg-[#0A0D1A] border border-cerulean rounded-xl px-5 py-3 w-full shadow-md\">\n                                    <span class=\"block text-xs font-bold text-cerulean uppercase tracking-widest\">Unity SDK Wrapper<\/span><br \/>\n                                    <span class=\"block text-[10px] text-[#94A3B8] mt-0.5\">Universal Stack Access<\/span>\n                                <\/div>\n<div class=\"flex justify-center my-4 h-8 w-px bg-gradient-to-b from-cerulean to-[#34D399] relative\">\n<div class=\"absolute -bottom-0.5 left-1\/2 -translate-x-1\/2 w-1.5 h-1.5 rotate-45 border-r border-b border-[#34D399]\"><\/div>\n<\/p><\/div>\n<div class=\"bg-[#34D399]\/10 border border-[#34D399]\/30 rounded-xl px-4 py-2.5 w-full shadow-sm\">\n                                    <span class=\"block text-xs font-bold text-[#34D399]\">+35% Ecosystem LTV Boost<\/span><br \/>\n                                    <span class=\"block text-[9px] text-[#94A3B8] mt-0.5\">Unified App Bundle Conversion<\/span>\n                                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/article>\n<p>                <!-- CASE II: CODESPARK --><\/p>\n<article id=\"case2\" class=\"scroll-mt-28 bg-[#12162B]\/30 border border-indigo-500\/10 rounded-2xl p-8 sm:p-12 space-y-8\">\n<div class=\"tempest-reveal flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-indigo-500\/10 pb-6\">\n<div>\n                            <span class=\"text-xs font-semibold text-cerulean uppercase tracking-wider\">codeSpark | Fooville Legends<\/span><\/p>\n<h3 class=\"text-2xl sm:text-3xl font-serif text-white mt-1\">Deflationary Churn Defense<\/h3>\n<\/p><\/div>\n<div class=\"flex flex-wrap gap-2\">\n                            <span class=\"px-3 py-1 bg-slate-800\/60 border border-indigo-500\/20 text-slate-300 text-xs font-bold rounded-lg\">Narrative Anchor<\/span><br \/>\n                            <span class=\"px-3 py-1 bg-slate-800\/60 border border-indigo-500\/20 text-slate-300 text-xs font-bold rounded-lg\">Live Ops<\/span><br \/>\n                            <span class=\"px-3 py-1 bg-emeraldColor\/20 border border-emeraldColor\/30 text-emeraldColor text-xs font-bold rounded-lg\">+80% Retention<\/span>\n                        <\/div>\n<\/p><\/div>\n<div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-center\">\n<div class=\"lg:col-span-7 space-y-6\">\n<div>\n<h4 class=\"text-sm font-bold text-cerulean uppercase tracking-widest mb-3\"><i class=\"fa-solid fa-triangle-exclamation mr-2\"><\/i>The Business Obstacle<\/h4>\n<p class=\"text-[#E2E8F0] font-light text-sm sm:text-base leading-relaxed\">\n                                    When Apple removed IDFA tracking, standard UA channels fractured. The company could not submit physical App Store builds without risking marketing attribution stability. We were blocked from shipping client-side updates, facing massive organic player churn.\n                                <\/p>\n<\/p><\/div>\n<div>\n<h4 class=\"text-sm font-bold text-cerulean uppercase tracking-widest mb-3\"><i class=\"fa-solid fa-gears mr-2\"><\/i>Strategic Intervention<\/h4>\n<p class=\"text-[#E2E8F0] font-light text-sm sm:text-base leading-relaxed\">\n                                    I engineered a highly localized, server-driven narrative framework: \"Fooville Legends.\" We designed major quarterly \"Anchor Campaigns\" supported by minor, low-effort bridges. This system bypassed App Store approvals, reusing old asset packages and our native voice cast to maintain user involvement with zero client code submissions.\n                                <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p>                        <!-- DATA GRAPH --><\/p>\n<div class=\"lg:col-span-5 flex flex-col justify-center bg-[#0B0F19] border border-indigo-500\/10 rounded-xl p-6 relative\">\n                            <span class=\"text-[10px] font-mono tracking-widest text-[#94A3B8] uppercase text-center block mb-4\">DAU Baseline Preservation (Quarterly)<\/span><\/p>\n<div class=\"relative h-32 ml-10 mr-4\">\n<div class=\"absolute inset-x-0 top-0 h-px border-t border-dashed border-[#94A3B8]\/15\"><\/div>\n<div class=\"absolute inset-x-0 top-1\/3 h-px border-t border-dashed border-[#94A3B8]\/15\"><\/div>\n<div class=\"absolute inset-x-0 top-2\/3 h-px border-t border-dashed border-[#94A3B8]\/15\"><\/div>\n<div class=\"absolute inset-x-0 bottom-0 h-px border-t border-solid border-[#94A3B8]\/40\"><\/div>\n<div class=\"absolute -left-10 top-0 -translate-y-1\/2 text-[9px] text-[#94A3B8]\">100%<\/div>\n<div class=\"absolute -left-10 top-1\/3 -translate-y-1\/2 text-[9px] text-[#94A3B8]\">80%<\/div>\n<div class=\"absolute -left-10 top-2\/3 -translate-y-1\/2 text-[9px] text-[#94A3B8]\">50%<\/div>\n<div class=\"absolute -left-10 bottom-0 translate-y-1\/2 text-[9px] text-[#94A3B8]\">0%<\/div>\n<p>                                <svg class=\"absolute inset-0 w-full h-full\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" fill=\"none\">\n                                    <path d=\"M 0 35 Q 25 70 50 85 T 100 90\" stroke=\"#FB7185\" stroke-width=\"2.5\" stroke-dasharray=\"2,2\" stroke-linecap=\"round\"\/>\n                                    <path d=\"M 0 35 L 25 32 L 50 38 L 75 30 L 100 34\" stroke=\"#38BDF8\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/div>\n<div class=\"flex justify-between ml-10 mr-4 mt-2 text-[9px] text-[#94A3B8] font-sans\">\n                                <span>Q1 (IDFA Block)<\/span><br \/>\n                                <span>Q2<\/span><br \/>\n                                <span>Q3<\/span><br \/>\n                                <span>Q4 (Legends)<\/span>\n                            <\/div>\n<div class=\"chart-legend-box mt-4\">\n<div class=\"legend-item flex items-center gap-2\">\n<div class=\"legend-color bg-[#38BDF8] w-4 h-1.5 rounded-sm\"><\/div>\n<p>                                    <span class=\"text-xs\">With Narrative Loop (Active)<\/span>\n                                <\/div>\n<div class=\"legend-item flex items-center gap-2\">\n<div class=\"legend-color bg-[#FB7185] border-dashed border-[#FB7185] w-4 h-1.5 rounded-sm\"><\/div>\n<p>                                    <span class=\"text-xs\">Standard Drop (No Update)<\/span>\n                                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/article>\n<p>                <!-- CASE III: 7 DRAGONS --><\/p>\n<article id=\"case3\" class=\"scroll-mt-28 bg-[#12162B]\/30 border border-indigo-500\/10 rounded-2xl p-8 sm:p-12 space-y-8\">\n<div class=\"tempest-reveal flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-indigo-500\/10 pb-6\">\n<div>\n                            <span class=\"text-xs font-semibold text-cerulean uppercase tracking-wider\">7 Dragons | Turnaround Publishing<\/span><\/p>\n<h3 class=\"text-2xl sm:text-3xl font-serif text-white mt-1\">Narrative Cohesion as Market Catalyst<\/h3>\n<\/p><\/div>\n<div class=\"flex flex-wrap gap-2\">\n                            <span class=\"px-3 py-1 bg-slate-800\/60 border border-indigo-500\/20 text-slate-300 text-xs font-bold rounded-lg\">Lore Re-Design<\/span><br \/>\n                            <span class=\"px-3 py-1 bg-slate-800\/60 border border-indigo-500\/20 text-slate-300 text-xs font-bold rounded-lg\">Automated Events<\/span><br \/>\n                            <span class=\"px-3 py-1 bg-emeraldColor\/20 border border-emeraldColor\/30 text-emeraldColor text-xs font-bold rounded-lg\">1M+ Western Users<\/span>\n                        <\/div>\n<\/p><\/div>\n<div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-center\">\n<div class=\"lg:col-span-7 space-y-6\">\n<div>\n<h4 class=\"text-sm font-bold text-cerulean uppercase tracking-widest mb-3\"><i class=\"fa-solid fa-triangle-exclamation mr-2\"><\/i>The Business Obstacle<\/h4>\n<p class=\"text-[#E2E8F0] font-light text-sm sm:text-base leading-relaxed\">\n                                    I inherited Western publishing duties for a major Chinese MMO title translated through basic spreadsheets. The localized narrative was garbled, lacking cohesive direction. Crucially, the original game lore only accounted for 6 dragons, despite the imported build being named <em class=\"text-[#F8FAFC]\">Legend of the 7 Dragons 2<\/em>, with no narrative justification for the title discrepancy.\n                                <\/p>\n<\/p><\/div>\n<div>\n<h4 class=\"text-sm font-bold text-cerulean uppercase tracking-widest mb-3\"><i class=\"fa-solid fa-gears mr-2\"><\/i>Strategic Intervention<\/h4>\n<p class=\"text-[#E2E8F0] font-light text-sm sm:text-base leading-relaxed\">\n                                    I completely rewrote the story bible to align the game text with Western sensibilities and accessibility, simplifying the overall brand name. To resolve the lore gap, I designed a central narrative turnaround: positioning the player's quest directly around competing to claim the legendary, vacant title of the \"7th Dragon.\" I then constructed automated, template-based biweekly live ops events (Double XP, dynamic sales) to maximize player progression without engineering overhead.\n                                <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p>                        <!-- VORTEX VISUALIZATION --><\/p>\n<div class=\"lg:col-span-5 flex justify-center\">\n<div class=\"w-full bg-[#12162B]\/40 border border-indigo-500\/15 rounded-2xl p-6 flex flex-col items-center justify-center text-center shadow-lg\">\n<div class=\"relative w-44 h-48 flex items-center justify-center mb-6\">\n<div class=\"absolute inset-0 border border-dashed border-indigoColor\/20 rounded-full animate-vortex\"><\/div>\n<div class=\"absolute inset-4 border border-cerulean\/30 rounded-full animate-vortex-reverse\"><\/div>\n<div class=\"absolute inset-10 border border-indigoColor\/40 rounded-full animate-vortex\"><\/div>\n<div class=\"relative z-10 w-24 h-24 rounded-full bg-[#0A0D1A] border-2 border-cerulean flex flex-col items-center justify-center shadow-lg p-2\">\n                                        <span class=\"text-[9px] font-bold text-cerulean uppercase tracking-widest text-center leading-tight\">Player Focus<\/span><br \/>\n                                        <span class=\"text-[8px] text-slate-300 font-light mt-0.5 leading-none\">7th Dragon<\/span>\n                                    <\/div>\n<\/p><\/div>\n<div class=\"space-y-2 max-w-sm\">\n<h4 class=\"text-sm font-bold text-white font-serif\">6 Lore Dragons Swirling Into 1 Player Goal<\/h4>\n<p class=\"text-xs text-[#94A3B8] font-light\">Resolving Lore Discrepancies via Narrative Design<\/p>\n<div class=\"inline-block bg-emeraldColor\/10 border border-emeraldColor\/30 rounded-lg px-3 py-1 mt-2 text-xs font-bold text-emeraldColor\">\n                                        1 Million+ Western Players Reached\n                                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/article>\n<p>                <!-- CASE IV: PARENT PARADOX --><\/p>\n<article id=\"case4\" class=\"scroll-mt-28 bg-[#12162B]\/30 border border-indigo-500\/10 rounded-2xl p-8 sm:p-12 space-y-8\">\n<div class=\"tempest-reveal flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-indigo-500\/10 pb-6\">\n<div>\n                            <span class=\"text-xs font-semibold text-cerulean uppercase tracking-wider\">codeSpark | Behavioral Metrics<\/span><\/p>\n<h3 class=\"text-2xl sm:text-3xl font-serif text-white mt-1\">The Parent Engagement Paradox<\/h3>\n<\/p><\/div>\n<div class=\"flex flex-wrap gap-2\">\n                            <span class=\"px-3 py-1 bg-slate-800\/60 border border-indigo-500\/20 text-slate-300 text-xs font-bold rounded-lg\">Telemetry Pivot<\/span><br \/>\n                            <span class=\"px-3 py-1 bg-slate-800\/60 border border-indigo-500\/20 text-slate-300 text-xs font-bold rounded-lg\">Physical Badges<\/span><br \/>\n                            <span class=\"px-3 py-1 bg-emeraldColor\/20 border border-emeraldColor\/30 text-emeraldColor text-xs font-bold rounded-lg\">+25% MAU Expansion<\/span>\n                        <\/div>\n<\/p><\/div>\n<div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-center\">\n<div class=\"lg:col-span-7 space-y-6\">\n<div>\n<h4 class=\"challenge-title\"><i class=\"fa-solid fa-triangle-exclamation mr-2\"><\/i>The Business Obstacle<\/h4>\n<p class=\"text-[#E2E8F0] font-light text-sm sm:text-base leading-relaxed\">\n                                    In play-based learning platforms, the buyer (parent) and player (child) represent distinct customer metrics. Parents frequently demanded tracking tools, yet once our design teams shipped \"Parent Academy\" reading panels, active parent engagement collapsed to 0%, resulting in high-overhead features going completely ignored.\n                                <\/p>\n<\/p><\/div>\n<div>\n<h4 class=\"intervention-title\"><i class=\"fa-solid fa-gears mr-2\"><\/i>Strategic Intervention<\/h4>\n<p class=\"text-[#E2E8F0] font-light text-sm sm:text-base leading-relaxed\">\n                                    I convened a cross-department task force. Our analytical reviews proved parents didn't want educational dashboards; they wanted real-world confirmation of logic skills (specifically puzzles). I shifted the roadmap to hook child logic progress directly to seasonal contests that shipped physical, collectable achievement badges straight to the family mailbox.\n                                <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p>                        <!-- INTERACTION DIAGRAM --><\/p>\n<div class=\"lg:col-span-5 flex justify-center\">\n<div class=\"w-full bg-[#12162B]\/40 border border-indigo-500\/15 rounded-2xl p-6 flex flex-col items-center justify-center text-center shadow-lg\">\n<div class=\"flex flex-col sm:flex-row items-center gap-6 mb-6 w-full justify-around\">\n<div class=\"bg-indigoColor\/10 border border-indigoColor\/30 rounded-full w-28 h-28 flex flex-col items-center justify-center p-3 relative shadow-md\">\n<div class=\"absolute inset-0 border border-dashed border-indigoColor\/30 rounded-full animate-vortex\"><\/div>\n<p>                                        <span class=\"text-xs font-bold text-white relative z-10\">Child Loop<\/span><br \/>\n                                        <span class=\"text-[9px] text-cerulean font-medium mt-1 relative z-10\">Puzzles & Play<\/span>\n                                    <\/div>\n<div class=\"flex flex-col items-center justify-center text-indigoColor\">\n                                        <i class=\"fa-solid fa-arrows-spin text-xl animate-spin\" style=\"animation-duration: 10s;\"><\/i>\n                                    <\/div>\n<div class=\"bg-cerulean\/10 border border-cerulean\/30 rounded-full w-28 h-28 flex flex-col items-center justify-center p-3 relative shadow-md\">\n<div class=\"absolute inset-0 border border-dashed border-cerulean\/30 rounded-full animate-vortex-reverse\"><\/div>\n<p>                                        <span class=\"text-xs font-bold text-white relative z-10\">Parent Node<\/span><br \/>\n                                        <span class=\"text-[9px] text-emeraldColor font-medium mt-1 relative z-10\">Verification<\/span>\n                                    <\/div>\n<\/p><\/div>\n<div class=\"space-y-4 w-full\">\n<div class=\"w-full bg-[#0A0D1A] border border-indigo-500\/10 rounded-xl py-3 px-4 shadow-inner\">\n                                        <span class=\"text-xs font-bold text-[#F8FAFC] flex items-center justify-center gap-2\"><br \/>\n                                            <i class=\"fa-solid fa-box-open text-emeraldColor\"><\/i><br \/>\n                                            Tactile Badges Shipped To Door<br \/>\n                                        <\/span>\n                                    <\/div>\n<p class=\"text-xs text-[#94A3B8] font-light\">Synthesizing Digital Play with Physical Evidence of Learning<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/article>\n<\/section>\n<hr class=\"border-indigo-500\/10\">\n<p>            <!-- 05. COMPETENCY MATRIX --><\/p>\n<section id=\"competencies\" class=\"scroll-mt-28 space-y-8\">\n<div class=\"tempest-reveal text-center max-w-2xl mx-auto space-y-2\">\n                    <span class=\"text-xs font-bold text-indigoColor uppercase tracking-widest\">Core Capabilities<\/span><\/p>\n<h2 class=\"text-3xl sm:text-4xl font-serif text-[#F8FAFC]\">Operational Toolbox<\/h2>\n<\/p><\/div>\n<div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n<div class=\"bg-[#12162B]\/40 border border-indigo-500\/10 rounded-xl p-6 border-b-4 border-b-cerulean\">\n                        <i class=\"fa-solid fa-chart-pie text-cerulean text-3xl mb-4 block\"><\/i><\/p>\n<h3 class=\"font-bold text-base text-white mb-2\">Data Analysis<\/h3>\n<p class=\"text-[#CBD5E1] text-sm font-light leading-relaxed\">\n                            Highly capable utilizing <strong class=\"text-white font-semibold\">Mixpanel<\/strong>, spreadsheet formulas, direct database reviews, and AI-assisted data visualization packages to decode user friction.\n                        <\/p>\n<\/p><\/div>\n<div class=\"bg-[#12162B]\/40 border border-indigo-500\/10 rounded-xl p-6 border-b-4 border-b-indigoColor\">\n                        <i class=\"fa-solid fa-diagram-project text-indigoColor text-3xl mb-4 block\"><\/i><\/p>\n<h3 class=\"font-bold text-base text-white mb-2\">Delivery Governance<\/h3>\n<p class=\"text-[#CBD5E1] text-sm font-light leading-relaxed\">\n                            Veteran director of both <strong class=\"text-white font-semibold\">Agile and Waterfall<\/strong> methodologies, aligning engineering velocity and managing cross-disciplinary team milestones.\n                        <\/p>\n<\/p><\/div>\n<div class=\"bg-[#12162B]\/40 border border-indigo-500\/10 rounded-xl p-6 border-b-4 border-b-emeraldColor\">\n                        <i class=\"fa-solid fa-road text-emeraldColor text-3xl mb-4 block\"><\/i><\/p>\n<h3 class=\"font-bold text-base text-white mb-2 font-serif\">Product Roadmapping<\/h3>\n<p class=\"text-[#CBD5E1] text-sm font-light leading-relaxed\">\n                            Launch record stretching from 0-1 product pitches to managing capital budgets and stabilizing live-ops under major platform changes.\n                        <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>            <!-- PHILOSOPHY QUOTE --><\/p>\n<section class=\"bg-[#12162B]\/20 border border-indigo-500\/10 rounded-2xl p-8 sm:p-12\">\n<div class=\"tempest-reveal max-w-3xl mx-auto text-center relative py-6\">\n                    <span class=\"text-5xl font-serif text-cerulean\/15 absolute -left-6 -top-4\">\u201c<\/span><\/p>\n<blockquote class=\"font-serif italic text-xl sm:text-2xl text-[#F8FAFC] leading-relaxed\"><p>\n                        \"I'm a first-in, last-out producer that champions good ideas from any source. The best ideas should always win.\"\n                    <\/p><\/blockquote>\n<p>                    <cite class=\"block mt-6 text-xs text-indigoColor font-semibold uppercase tracking-widest font-sans not-italic\"><br \/>\n                        \u2014 Seth Thygesen, Executive Producer<br \/>\n                    <\/cite>\n                <\/div>\n<\/section>\n<hr class=\"border-indigo-500\/10\">\n<p>            <!-- 06. IMPACT BENCHMARKS --><\/p>\n<section id=\"benchmarks\" class=\"scroll-mt-28 space-y-6\">\n<div class=\"tempest-reveal space-y-2\">\n                    <span class=\"text-xs font-bold text-cerulean uppercase tracking-widest\">Business Results<\/span><\/p>\n<h2 class=\"text-3xl sm:text-4xl font-serif text-[#F8FAFC]\">Direct Strategic Impact<\/h2>\n<\/p><\/div>\n<div class=\"overflow-x-auto bg-[#12162B]\/40 border border-indigo-500\/10 rounded-xl\">\n<table class=\"w-full border-collapse\">\n<thead>\n<tr class=\"border-b border-indigo-500\/10 bg-slate-900\/50\">\n<th class=\"text-left py-4 px-6 text-xs font-bold text-cerulean uppercase tracking-wider\">Strategic Focus<\/th>\n<th class=\"text-left py-4 px-6 text-xs font-bold text-cerulean uppercase tracking-wider\">Intervention<\/th>\n<th class=\"text-left py-4 px-6 text-xs font-bold text-cerulean uppercase tracking-wider\">Resulting KPI Achievement<\/th>\n<\/tr>\n<\/thead>\n<tbody class=\"divide-y divide-indigo-500\/10 text-sm\">\n<tr class=\"hover:bg-slate-800\/20\">\n<td class=\"py-4 px-6 font-semibold text-white\">Product Conversion<\/td>\n<td class=\"py-4 px-6 text-[#E2E8F0]\">Unified Begin SDK Engine Integration<\/td>\n<td class=\"py-4 px-6 text-emeraldColor font-bold\">+35% Ecosystem LTV Expansion<\/td>\n<\/tr>\n<tr class=\"hover:bg-slate-800\/20\">\n<td class=\"py-4 px-6 font-semibold text-white\">Active Retention<\/td>\n<td class=\"py-4 px-6 text-[#E2E8F0]\">Server-Driven Narrative Live Ops (Fooville Legends)<\/td>\n<td class=\"py-4 px-6 text-emeraldColor font-bold\">+80% Long-Term Player Retention<\/td>\n<\/tr>\n<tr class=\"hover:bg-slate-800\/20\">\n<td class=\"py-4 px-6 font-semibold text-white\">Ecosystem Activity<\/td>\n<td class=\"py-4 px-6 text-[#E2E8F0]\">Tactile Physical Progress Rewards Shipped to Door<\/td>\n<td class=\"py-4 px-6 text-emeraldColor font-bold\">+75% YOY UGC Engagement Growth<\/td>\n<\/tr>\n<tr class=\"hover:bg-slate-800\/20\">\n<td class=\"py-4 px-6 font-semibold text-white\">International Market Pivot<\/td>\n<td class=\"py-4 px-6 text-[#E2E8F0]\">Western Sensibility Lore Turnaround (7 Dragons)<\/td>\n<td class=\"py-4 px-6 text-emeraldColor font-bold\">1,000,000+ Active Localized Players<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<\/section>\n<hr class=\"border-indigo-500\/10\">\n<p>            <!-- 07. PARTNERSHIP \/ CONTACT --><\/p>\n<section id=\"contact\" class=\"scroll-mt-28 space-y-8 bg-[#12162B]\/35 border border-indigo-500\/10 rounded-2xl p-8 sm:p-12 text-center relative overflow-hidden\">\n<div class=\" tempest-reveal absolute -top-12 -right-12 w-48 h-48 bg-cerulean\/5 rounded-full blur-3xl pointer-events-none\"><\/div>\n<div class=\"max-w-2xl mx-auto space-y-4\">\n                    <span class=\"text-xs font-bold text-indigoColor uppercase tracking-widest\">Connect with Story Tempest<\/span><\/p>\n<h2 class=\"text-3xl sm:text-4xl font-serif text-[#F8FAFC]\">Let's Anchor Your Production Ecosystem<\/h2>\n<p class=\"text-[#E2E8F0] font-light text-base leading-relaxed\">\n                        I bring predictable operational stability, clean delivery timelines, and highly empathetic leadership structure to studios navigating platform updates, stack conversions, or design transformations.\n                    <\/p>\n<div class=\"pt-6 flex flex-col sm:flex-row justify-center gap-6 text-base sm:text-lg\">\n                        <a href=\"mailto:seth.thygesen@gmail.com\" class=\"hover:text-cerulean transition-colors flex items-center justify-center gap-2 text-[#E2E8F0] font-semibold\"><br \/>\n                            <i class=\"fa-solid fa-envelope text-cerulean\"><\/i> seth.thygesen@gmail.com<br \/>\n                        <\/a><br \/>\n                        <a href=\"https:\/\/linkedin.com\/in\/seth-thygesen\" target=\"_blank\" class=\"hover:text-cerulean transition-colors flex items-center justify-center gap-2 text-[#E2E8F0] font-semibold\" rel=\"noopener\"><br \/>\n                            <i class=\"fa-brands fa-linkedin text-cerulean\"><\/i> linkedin.com\/in\/seth-thygesen<br \/>\n                        <\/a>\n                    <\/div>\n<\/p><\/div>\n<\/section>\n<p>        <\/main>\n    <\/div>\n<p>    <!-- FOOTER --><\/p>\n<footer class=\"border-t border-indigo-500\/10 bg-[#0A0D1A] py-8 text-center text-xs text-[#94A3B8] font-light space-y-2 relative z-10\">\n<p>Story Tempest is an executive-level operational philosophy constructed to neutralize production volatility.<\/p>\n<p>&copy; 2026 Seth Thygesen. All Rights Reserved.<\/p>\n<\/footer>\n<p><!-- Safe Scroll Reveal Logic (Immediate Execution) --><br \/>\n        <script>!function(){const e=new IntersectionObserver((e,r)=>{e.forEach(e=>{e.isIntersecting&&(e.target.classList.add(\"is-visible\"),r.unobserve(e.target))})},{threshold:.1});document.querySelectorAll(\".tempest-reveal\").forEach(r=>e.observe(r))}();<\/script><br \/>\n<!-- Active Navigation Link Highlighting on Scroll --><br \/>\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const observerOptions = {\n            root: null,\n            rootMargin: '-20% 0px -60% 0px',\n            threshold: 0\n        };<\/p>\n<p>        const sections = document.querySelectorAll('#story-tempest-portfolio-root section');\n        const navLinks = document.querySelectorAll('#story-tempest-portfolio-root .sidebar-link');<\/p>\n<p>        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    const activeId = entry.target.id;\n                    navLinks.forEach(link => {\n                        if (link.getAttribute('href') === `#${activeId}`) {\n                            link.classList.add('bg-slate-800\/60', 'text-white', 'border-cerulean');\n                            link.classList.remove('text-[#E2E8F0]', 'border-transparent');\n                        } else {\n                            link.classList.remove('bg-slate-800\/60', 'text-white', 'border-cerulean');\n                            link.classList.add('text-[#E2E8F0]', 'border-transparent');\n                        }\n                    });\n                }\n            });\n        }, observerOptions);<\/p>\n<p>        sections.forEach(section => observer.observe(section));\n    });\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>STORY TEMPEST Seth Thygesen Portfolio seth.thygesen@gmail.com linkedin.com\/in\/seth-thygesen Executive Producer Portfolio Harmonious leadership inside the storm of active production. I&#8217;m Seth Thygesen. I combine powerful narrative instincts and analytical product strategy into my leadership, allowing me to guide teams into creating their best work that convert a user&#8217;s investment in story into focused, monetizable engagement. Together, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"blocksy_meta":{"disable_header":"yes","disable_footer":"yes","disable_share_box":"yes","disable_featured_image":"yes","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7},"page_structure_type":"default","has_hero_section":"disabled","vertical_spacing_source":"custom","content_area_spacing":"none"},"brizy_media":[],"_links":{"self":[{"href":"https:\/\/www.storytempest.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.storytempest.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.storytempest.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.storytempest.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.storytempest.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":6,"href":"https:\/\/www.storytempest.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/www.storytempest.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/www.storytempest.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}