David Po-Jui Chen | Creative Portfolio<\/title>\n\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=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap\" rel=\"stylesheet\">\n\n <style>\n :root{\n --cream:#F5F0E7;\n --paper:#FBF8F1;\n --ink:#20211E;\n --tea:#173F36;\n --tea-2:#2B5A4D;\n --wine:#7B3140;\n --gold:#BE9A67;\n --sage:#D9E0D5;\n --line:rgba(32,33,30,.14);\n --muted:#696B64;\n --white:#FFFDF8;\n --shadow:0 24px 60px rgba(34,31,24,.10);\n --radius:28px;\n --max:1180px;\n }\n\n *{box-sizing:border-box}\n html{scroll-behavior:smooth}\n body{\n margin:0;\n background:var(--cream);\n color:var(--ink);\n font-family:\"DM Sans\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n line-height:1.65;\n overflow-x:hidden;\n }\n\n a{color:inherit;text-decoration:none}\n button{font:inherit}\n img{max-width:100%;display:block}\n\n .grain{\n position:fixed;\n inset:0;\n pointer-events:none;\n opacity:.22;\n z-index:999;\n background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'\/%3E%3C\/svg%3E\");\n }\n\n .container{\n width:min(var(--max),calc(100% - 40px));\n margin-inline:auto;\n }\n\n .nav{\n position:sticky;\n top:0;\n z-index:100;\n backdrop-filter:blur(18px);\n -webkit-backdrop-filter:blur(18px);\n background:rgba(245,240,231,.84);\n border-bottom:1px solid rgba(32,33,30,.08);\n }\n\n .nav-inner{\n min-height:76px;\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:24px;\n }\n\n .brand{\n display:flex;\n align-items:center;\n gap:11px;\n font-weight:700;\n letter-spacing:-.02em;\n }\n\n .cup{\n width:34px;\n height:26px;\n border:2px solid var(--tea);\n border-radius:4px 4px 13px 13px;\n position:relative;\n transform:rotate(-2deg);\n }\n\n .cup:before{\n content:\"\";\n width:10px;\n height:10px;\n border:2px solid var(--tea);\n border-left:0;\n border-radius:0 10px 10px 0;\n position:absolute;\n right:-10px;\n top:4px;\n }\n\n .cup:after{\n content:\"\";\n width:2px;\n height:11px;\n background:var(--gold);\n position:absolute;\n left:15px;\n top:-12px;\n border-radius:20px;\n box-shadow:-5px -3px 0 -0.4px var(--gold);\n opacity:.9;\n }\n\n .nav-links{\n display:flex;\n align-items:center;\n gap:22px;\n font-size:14px;\n font-weight:600;\n }\n\n .nav-links a:not(.nav-cta){\n position:relative;\n }\n\n .nav-links a:not(.nav-cta):after{\n content:\"\";\n height:1px;\n width:0;\n background:var(--tea);\n position:absolute;\n left:0;\n bottom:-4px;\n transition:.25s ease;\n }\n\n .nav-links a:hover:after{width:100%}\n\n .nav-cta,\n .btn{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n gap:10px;\n border:1px solid var(--tea);\n border-radius:999px;\n padding:12px 18px;\n font-weight:700;\n transition:.25s ease;\n }\n\n .nav-cta{\n background:var(--tea);\n color:var(--white);\n padding:10px 16px;\n }\n\n .btn:hover,\n .nav-cta:hover{\n transform:translateY(-2px);\n box-shadow:0 10px 24px rgba(23,63,54,.13);\n }\n\n .btn.primary{\n background:var(--tea);\n color:var(--white);\n }\n\n .btn.secondary{\n background:transparent;\n }\n\n .hero{\n padding:78px 0 64px;\n position:relative;\n }\n\n .hero:before{\n content:\"\";\n position:absolute;\n width:440px;\n height:440px;\n border:1px solid rgba(190,154,103,.35);\n border-radius:50%;\n right:-130px;\n top:-150px;\n }\n\n .hero-grid{\n display:grid;\n grid-template-columns:1.28fr .72fr;\n gap:64px;\n align-items:end;\n }\n\n .eyebrow{\n display:inline-flex;\n align-items:center;\n gap:9px;\n text-transform:uppercase;\n letter-spacing:.16em;\n font-size:12px;\n font-weight:700;\n color:var(--tea);\n margin-bottom:22px;\n }\n\n .eyebrow:before{\n content:\"\";\n width:34px;\n height:1px;\n background:var(--gold);\n }\n\n h1,h2,h3{\n font-family:\"Fraunces\",Georgia,serif;\n letter-spacing:-.035em;\n margin:0;\n }\n\n h1{\n font-size:clamp(56px,8vw,108px);\n line-height:.92;\n max-width:900px;\n font-weight:600;\n }\n\n .hero-highlight{\n color:var(--wine);\n font-style:italic;\n font-weight:500;\n }\n\n .hero-copy{\n max-width:650px;\n font-size:19px;\n color:#4F514B;\n margin:28px 0 0;\n }\n\n .hero-actions{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-top:32px;\n }\n\n .hero-side{\n border-left:1px solid var(--line);\n padding-left:30px;\n }\n\n .hero-side p{\n margin:0;\n color:var(--muted);\n font-size:14px;\n }\n\n .hero-side strong{\n display:block;\n font-family:\"Fraunces\",Georgia,serif;\n color:var(--ink);\n font-size:28px;\n line-height:1.15;\n margin:8px 0 20px;\n }\n\n .tiny-list{\n display:grid;\n gap:10px;\n margin-top:24px;\n }\n\n .tiny-list span{\n display:flex;\n align-items:center;\n gap:9px;\n font-size:14px;\n font-weight:600;\n }\n\n .tiny-list span:before{\n content:\"\";\n width:7px;\n height:7px;\n border-radius:50%;\n background:var(--gold);\n flex:0 0 auto;\n }\n\n .marquee{\n border-block:1px solid var(--line);\n overflow:hidden;\n white-space:nowrap;\n background:rgba(255,253,248,.35);\n }\n\n .marquee-track{\n display:inline-flex;\n min-width:max-content;\n gap:34px;\n padding:14px 0;\n animation:marquee 28s linear infinite;\n font-size:12px;\n font-weight:700;\n letter-spacing:.13em;\n text-transform:uppercase;\n color:var(--tea);\n }\n\n .marquee-track span:after{\n content:\"\u2726\";\n margin-left:34px;\n color:var(--gold);\n }\n\n @keyframes marquee{\n from{transform:translateX(0)}\n to{transform:translateX(-50%)}\n }\n\n section{\n padding:110px 0;\n }\n\n .section-head{\n display:grid;\n grid-template-columns:.75fr 1.25fr;\n gap:60px;\n align-items:start;\n margin-bottom:50px;\n }\n\n .section-kicker{\n text-transform:uppercase;\n font-size:12px;\n letter-spacing:.15em;\n font-weight:700;\n color:var(--wine);\n }\n\n .section-head h2{\n font-size:clamp(42px,5vw,68px);\n line-height:1;\n max-width:760px;\n }\n\n .section-head p{\n margin:20px 0 0;\n font-size:18px;\n color:var(--muted);\n max-width:750px;\n }\n\n .metrics{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n border:1px solid var(--line);\n border-radius:var(--radius);\n overflow:hidden;\n background:var(--paper);\n box-shadow:var(--shadow);\n }\n\n .metric{\n padding:32px;\n min-height:165px;\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n }\n\n .metric + .metric{border-left:1px solid var(--line)}\n\n .metric strong{\n font-family:\"Fraunces\",Georgia,serif;\n font-size:38px;\n line-height:1;\n color:var(--tea);\n }\n\n .metric span{\n font-size:13px;\n font-weight:600;\n color:var(--muted);\n max-width:180px;\n }\n\n .metric.placeholder strong{\n color:var(--wine);\n }\n\n .metric.placeholder span:after{\n content:\" \u2190 replace with your verified figure\";\n color:var(--wine);\n font-weight:500;\n }\n\n .work-grid{\n display:grid;\n grid-template-columns:repeat(12,1fr);\n gap:22px;\n }\n\n .project{\n border-radius:var(--radius);\n overflow:hidden;\n position:relative;\n min-height:460px;\n box-shadow:var(--shadow);\n border:1px solid rgba(255,255,255,.45);\n transition:.3s ease;\n }\n\n .project:hover{\n transform:translateY(-5px);\n box-shadow:0 28px 70px rgba(34,31,24,.14);\n }\n\n .project.big{grid-column:span 7}\n .project.small{grid-column:span 5}\n .project.half{grid-column:span 6}\n\n .project.green{background:var(--tea);color:var(--white)}\n .project.wine{background:var(--wine);color:var(--white)}\n .project.paper{background:var(--paper);color:var(--ink)}\n .project.sage{background:var(--sage);color:var(--ink)}\n\n .project-copy{\n padding:34px 34px 22px;\n position:relative;\n z-index:2;\n }\n\n .project-label{\n font-size:11px;\n font-weight:700;\n letter-spacing:.14em;\n text-transform:uppercase;\n opacity:.72;\n }\n\n .project h3{\n font-size:36px;\n line-height:1;\n margin:10px 0 14px;\n }\n\n .project p{\n margin:0;\n max-width:560px;\n opacity:.78;\n font-size:15px;\n }\n\n .project-link{\n display:inline-flex;\n align-items:center;\n gap:8px;\n margin-top:20px;\n font-weight:700;\n font-size:14px;\n border-bottom:1px solid currentColor;\n padding-bottom:2px;\n }\n\n .mock{\n height:230px;\n margin:22px 26px 0;\n border-radius:20px 20px 0 0;\n position:relative;\n overflow:hidden;\n background:var(--white);\n color:var(--ink);\n border:1px solid rgba(32,33,30,.12);\n box-shadow:0 18px 50px rgba(0,0,0,.14);\n }\n\n .browser-top{\n height:36px;\n display:flex;\n align-items:center;\n gap:6px;\n padding:0 13px;\n border-bottom:1px solid var(--line);\n background:#F6F2E9;\n }\n\n .browser-top i{\n width:8px;height:8px;border-radius:50%;\n background:#BBB4A8;\n }\n\n .mock-content{\n padding:22px;\n }\n\n .mock-title{\n font-family:\"Fraunces\",Georgia,serif;\n font-size:25px;\n line-height:1;\n margin-bottom:15px;\n }\n\n .mock-lines{\n display:grid;\n gap:8px;\n max-width:75%;\n }\n\n .mock-lines span{\n height:7px;\n border-radius:999px;\n background:#DED8CE;\n }\n\n .mock-lines span:nth-child(2){width:84%}\n .mock-lines span:nth-child(3){width:60%}\n\n .tea-card{\n position:absolute;\n right:18px;\n bottom:18px;\n width:96px;\n height:116px;\n border-radius:18px;\n background:#E8D8BC;\n display:grid;\n place-items:center;\n font-family:\"Fraunces\",Georgia,serif;\n font-size:34px;\n color:var(--tea);\n transform:rotate(5deg);\n }\n\n .phone-row{\n display:flex;\n gap:12px;\n justify-content:center;\n align-items:flex-end;\n padding:18px 20px 0;\n height:250px;\n }\n\n .phone{\n width:100px;\n height:220px;\n border:5px solid #282927;\n border-radius:28px 28px 0 0;\n background:#FCFAF5;\n position:relative;\n padding:22px 11px;\n box-shadow:0 14px 30px rgba(0,0,0,.16);\n }\n\n .phone:nth-child(2){transform:translateY(18px)}\n\n .phone:before{\n content:\"\";\n width:38px;\n height:7px;\n background:#282927;\n border-radius:999px;\n position:absolute;\n top:7px;\n left:50%;\n transform:translateX(-50%);\n }\n\n .app-icon{\n width:52px;\n height:52px;\n border-radius:14px;\n display:grid;\n place-items:center;\n margin:14px auto 12px;\n background:#D9E0D5;\n font-size:24px;\n }\n\n .app-name{\n text-align:center;\n font-size:10px;\n font-weight:700;\n line-height:1.25;\n }\n\n .orb{\n width:180px;\n height:180px;\n border-radius:50%;\n position:absolute;\n right:30px;\n bottom:20px;\n background:\n radial-gradient(circle at 32% 26%,rgba(255,255,255,.9),transparent 18%),\n radial-gradient(circle at 50% 50%,#EACDA5 0 25%,#BA8769 48%,#704350 74%,#4B2732 100%);\n box-shadow:0 30px 60px rgba(45,20,29,.25);\n }\n\n .orb:after{\n content:\"\u6613\";\n position:absolute;\n inset:0;\n display:grid;\n place-items:center;\n font-family:\"Fraunces\",Georgia,serif;\n color:#FFF4DF;\n font-size:62px;\n }\n\n .case{\n border-top:1px solid var(--line);\n display:grid;\n grid-template-columns:1fr 2fr;\n gap:55px;\n padding:58px 0;\n }\n\n .case:last-child{border-bottom:1px solid var(--line)}\n\n .case-num{\n font-family:\"Fraunces\",Georgia,serif;\n color:var(--gold);\n font-size:18px;\n }\n\n .case h3{\n font-size:40px;\n line-height:1.04;\n margin-bottom:18px;\n }\n\n .case p{\n margin:0 0 18px;\n color:var(--muted);\n font-size:16px;\n max-width:760px;\n }\n\n .case-columns{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:18px;\n margin-top:28px;\n }\n\n .case-box{\n padding:20px;\n border:1px solid var(--line);\n border-radius:18px;\n background:rgba(255,253,248,.45);\n }\n\n .case-box b{\n display:block;\n text-transform:uppercase;\n letter-spacing:.12em;\n font-size:10px;\n color:var(--wine);\n margin-bottom:8px;\n }\n\n .case-box span{\n font-size:13px;\n line-height:1.5;\n color:#52534F;\n }\n\n .link-cloud{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:14px;\n }\n\n .link-card{\n min-height:160px;\n border:1px solid var(--line);\n border-radius:20px;\n padding:22px;\n background:var(--paper);\n transition:.25s ease;\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n }\n\n .link-card:hover{\n background:var(--white);\n transform:translateY(-3px);\n }\n\n .link-card small{\n text-transform:uppercase;\n letter-spacing:.11em;\n color:var(--muted);\n font-weight:700;\n font-size:10px;\n }\n\n .link-card strong{\n font-family:\"Fraunces\",Georgia,serif;\n font-size:23px;\n line-height:1.05;\n }\n\n .arrow{\n font-size:18px;\n color:var(--wine);\n }\n\n .duo-fit{\n background:var(--tea);\n color:var(--white);\n position:relative;\n overflow:hidden;\n }\n\n .duo-fit:after{\n content:\"\";\n width:520px;\n height:520px;\n border:1px solid rgba(255,255,255,.16);\n border-radius:50%;\n position:absolute;\n right:-180px;\n top:-120px;\n }\n\n .duo-fit .section-kicker{color:#E4C892}\n .duo-fit .section-head p{color:rgba(255,255,255,.67)}\n\n .fit-grid{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:16px;\n position:relative;\n z-index:2;\n }\n\n .fit-card{\n border:1px solid rgba(255,255,255,.18);\n border-radius:22px;\n padding:26px;\n min-height:220px;\n background:rgba(255,255,255,.045);\n }\n\n .fit-card .num{\n color:#E4C892;\n font-family:\"Fraunces\",Georgia,serif;\n margin-bottom:46px;\n }\n\n .fit-card h3{\n font-size:24px;\n margin-bottom:10px;\n }\n\n .fit-card p{\n color:rgba(255,255,255,.66);\n font-size:13px;\n margin:0;\n }\n\n .about{\n display:grid;\n grid-template-columns:1.2fr .8fr;\n gap:65px;\n align-items:start;\n }\n\n .about h2{\n font-size:clamp(48px,6vw,82px);\n line-height:.96;\n }\n\n .about-copy{\n padding-top:8px;\n }\n\n .about-copy p{\n font-size:17px;\n color:var(--muted);\n margin:0 0 18px;\n }\n\n .quote{\n margin-top:32px;\n padding:28px 0 0;\n border-top:1px solid var(--line);\n font-family:\"Fraunces\",Georgia,serif;\n font-size:28px;\n line-height:1.16;\n color:var(--tea);\n }\n\n .contact{\n padding-bottom:64px;\n }\n\n .contact-card{\n border-radius:34px;\n background:var(--wine);\n color:var(--white);\n padding:70px;\n display:grid;\n grid-template-columns:1.3fr .7fr;\n gap:40px;\n align-items:end;\n box-shadow:var(--shadow);\n }\n\n .contact-card h2{\n font-size:clamp(48px,6vw,78px);\n line-height:.94;\n }\n\n .contact-card p{\n color:rgba(255,255,255,.72);\n max-width:620px;\n font-size:16px;\n }\n\n .contact-actions{\n display:flex;\n flex-direction:column;\n align-items:flex-start;\n gap:10px;\n }\n\n .contact-actions .btn{\n border-color:rgba(255,255,255,.75);\n width:100%;\n color:var(--white);\n }\n\n .contact-actions .btn.primary{\n background:var(--white);\n color:var(--wine);\n border-color:var(--white);\n }\n\n footer{\n padding:26px 0 40px;\n font-size:12px;\n color:var(--muted);\n }\n\n .footer-inner{\n display:flex;\n justify-content:space-between;\n gap:20px;\n border-top:1px solid var(--line);\n padding-top:24px;\n }\n\n .reveal{\n opacity:0;\n transform:translateY(18px);\n transition:opacity .65s ease,transform .65s ease;\n }\n\n .reveal.visible{\n opacity:1;\n transform:none;\n }\n\n @media(max-width:900px){\n .nav-links a:not(.nav-cta){display:none}\n .hero{padding-top:55px}\n .hero-grid,\n .section-head,\n .about,\n .contact-card{\n grid-template-columns:1fr;\n }\n .hero-side{\n border-left:0;\n border-top:1px solid var(--line);\n padding:26px 0 0;\n }\n .metrics{grid-template-columns:1fr 1fr}\n .metric:nth-child(3){border-left:0;border-top:1px solid var(--line)}\n .metric:nth-child(4){border-top:1px solid var(--line)}\n .project.big,.project.small,.project.half{grid-column:span 12}\n .case{grid-template-columns:1fr;gap:14px}\n .fit-grid{grid-template-columns:1fr 1fr}\n .link-cloud{grid-template-columns:1fr 1fr}\n .contact-card{padding:45px 28px}\n }\n\n @media(max-width:620px){\n .container{width:min(var(--max),calc(100% - 26px))}\n .nav-inner{min-height:66px}\n .nav-cta{font-size:12px;padding:9px 12px}\n .brand span{font-size:13px}\n h1{font-size:54px}\n .hero-copy{font-size:17px}\n section{padding:78px 0}\n .metrics{grid-template-columns:1fr}\n .metric + .metric{border-left:0;border-top:1px solid var(--line)}\n .metric:nth-child(3){border-top:1px solid var(--line)}\n .case-columns{grid-template-columns:1fr}\n .fit-grid,.link-cloud{grid-template-columns:1fr}\n .project{min-height:430px}\n .project-copy{padding:27px 25px 16px}\n .mock{margin-inline:18px}\n .contact-card{padding:38px 23px}\n .footer-inner{flex-direction:column}\n }\n\n @media(prefers-reduced-motion:reduce){\n html{scroll-behavior:auto}\n .marquee-track{animation:none}\n .reveal{opacity:1;transform:none}\n *{transition:none!important}\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"grain\"><\/div>\n\n <nav class=\"nav\">\n <div class=\"container nav-inner\">\n <a class=\"brand\" href=\"#top\" aria-label=\"Back to top\">\n <span class=\"cup\" aria-hidden=\"true\"><\/span>\n <span>David Po-Jui Chen<\/span>\n <\/a>\n\n <div class=\"nav-links\">\n <a href=\"#work\">Work<\/a>\n <a href=\"#cases\">Case Studies<\/a>\n <a href=\"#client-work\">Clients<\/a>\n <a href=\"#about\">About<\/a>\n <a class=\"nav-cta\" href=\"#contact\">Let\u2019s talk \u2197<\/a>\n <\/div>\n <\/div>\n <\/nav>\n\n <main id=\"top\">\n <header class=\"hero\">\n <div class=\"container hero-grid\">\n <div>\n <div class=\"eyebrow\">Creative strategy \u00b7 learning \u00b7 product<\/div>\n <h1>\n I turn ideas into\n <span class=\"hero-highlight\">brands people use.<\/span>\n <\/h1>\n\n <p class=\"hero-copy\">\n I build learning brands, digital products and culturally aware campaigns \u2014\n combining creative thinking, hands-on product building, client strategy\n and measurable commercial outcomes.\n <\/p>\n\n <div class=\"hero-actions\">\n <a class=\"btn primary\" href=\"#work\">See selected work \u2193<\/a>\n <a class=\"btn secondary\" href=\"https:\/\/learnwithacupoftea.com\/\" target=\"_blank\" rel=\"noopener\">A Cup of Tea English \u2197<\/a>\n <\/div>\n <\/div>\n\n <aside class=\"hero-side\">\n <p>Portfolio focus<\/p>\n <strong>Brand building that does more than look good.<\/strong>\n <p>\n My work sits where education, social content, product design,\n growth strategy and entrepreneurship overlap.\n <\/p>\n\n <div class=\"tiny-list\">\n <span>Built and shipped digital products independently<\/span>\n <span>Advise four active education and study-abroad clients<\/span>\n <span>Created journeys designed to generate leads and revenue<\/span>\n <span>Worked across learning, brand, growth and product<\/span>\n <\/div>\n <\/aside>\n <\/div>\n <\/header>\n\n <div class=\"marquee\" aria-hidden=\"true\">\n <div class=\"marquee-track\">\n <span>Brand Strategy<\/span><span>Creative Marketing<\/span><span>Education<\/span>\n <span>Social Content<\/span><span>iOS Products<\/span><span>Interactive Experiences<\/span>\n <span>Growth Thinking<\/span><span>British English<\/span>\n <span>Brand Strategy<\/span><span>Creative Marketing<\/span><span>Education<\/span>\n <span>Social Content<\/span><span>iOS Products<\/span><span>Interactive Experiences<\/span>\n <span>Growth Thinking<\/span><span>British English<\/span>\n <\/div>\n <\/div>\n\n <section>\n <div class=\"container reveal\">\n <div class=\"section-head\">\n <div class=\"section-kicker\">Impact<\/div>\n <div>\n <h2>Creative work should earn attention \u2014 and create a reason to act.<\/h2>\n <p>\n I care about the journey after the idea: what people click, download,\n enquire about, buy, practise and come back to \u2014 and how creative work\n supports a wider commercial strategy.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"metrics\">\n <div class=\"metric\">\n <strong>4<\/strong>\n <span>Active education and study-abroad clients<\/span>\n <\/div>\n <div class=\"metric\">\n <strong>Top 100<\/strong>\n <span>App Store milestone achieved by a wellbeing \/ manifestation app in its first month<\/span>\n <\/div>\n <div class=\"metric\">\n <strong>6+<\/strong>\n <span>Apps, tools and interactive digital products built or supported<\/span>\n <\/div>\n <div class=\"metric\">\n <strong>End-to-end<\/strong>\n <span>From strategy and creative direction to hands-on execution and product delivery<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"work\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Selected work<\/div>\n <div>\n <h2>From content to product, without losing the idea in between.<\/h2>\n <p>\n A selection of work showing how I move between brand strategy,\n storytelling, learning design, digital experience and shipping.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"work-grid\">\n <article class=\"project big green reveal\">\n <div class=\"project-copy\">\n <div class=\"project-label\">Brand ecosystem \u00b7 education<\/div>\n <h3>A Cup of Tea English<\/h3>\n <p>\n An English-learning brand built around a warmer, more culturally\n distinctive alternative to traditional exam-focused education \u2014\n spanning social content, web learning, YouTube, tools and iOS products.\n <\/p>\n <a class=\"project-link\" href=\"https:\/\/learnwithacupoftea.com\/\" target=\"_blank\" rel=\"noopener\">Visit the brand \u2197<\/a>\n <\/div>\n\n <div class=\"mock\">\n <div class=\"browser-top\"><i><\/i><i><\/i><i><\/i><\/div>\n <div class=\"mock-content\">\n <div class=\"mock-title\">English, with a proper cup of tea.<\/div>\n <div class=\"mock-lines\"><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"tea-card\">\u2615<\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"project small paper reveal\">\n <div class=\"project-copy\">\n <div class=\"project-label\">Product building \u00b7 education<\/div>\n <h3>Learning Apps<\/h3>\n <p>\n I have taken learning ideas beyond posts and lessons by building\n standalone iOS products, and by helping education clients turn\n teaching methods into usable digital products.\n <\/p>\n <a class=\"project-link\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E9%87%8C%E8%8C%B2%E8%9E%9E%E8%9F%BB%E6%96%87%E6%B3%95%E4%BD%B3%E5%8F%A5%E6%9C%AC\/id6478044202?l=en-GB#productRatings\" target=\"_blank\" rel=\"noopener\">View LeedsMayi Grammar App \u2197<\/a>\n <\/div>\n\n <div class=\"phone-row\">\n <div class=\"phone\">\n <div class=\"app-icon\">Aa<\/div>\n <div class=\"app-name\">Vocabulary<br>learning<\/div>\n <\/div>\n <div class=\"phone\">\n <div class=\"app-icon\">\/\u0259\/<\/div>\n <div class=\"app-name\">British<br>pronunciation<\/div>\n <\/div>\n <div class=\"phone\">\n <div class=\"app-icon\">\u270e<\/div>\n <div class=\"app-name\">Grammar<br>examples<\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"project half wine reveal\">\n <div class=\"project-copy\">\n <div class=\"project-label\">Interactive experience \u00b7 AI<\/div>\n <h3>AI I Ching<\/h3>\n <p>\n An interactive experience turning an abstract cultural idea into\n something people can question, explore and play with online.\n <\/p>\n <a class=\"project-link\" href=\"https:\/\/wondering.pro\/ai-iching\/\" target=\"_blank\" rel=\"noopener\">Try the experience \u2197<\/a>\n <\/div>\n <div class=\"orb\" aria-hidden=\"true\"><\/div>\n <\/article>\n\n <article class=\"project half sage reveal\">\n <div class=\"project-copy\">\n <div class=\"project-label\">Practice tool \u00b7 learning UX<\/div>\n <h3>IELTS Writing Typing Practice<\/h3>\n <p>\n A focused browser tool that turns a common learner problem \u2014\n practising typed writing under exam conditions \u2014 into a simple,\n accessible experience.\n <\/p>\n <a class=\"project-link\" href=\"https:\/\/learnwithacupoftea.com\/index.php\/ielts-writing-typing-practice\/\" target=\"_blank\" rel=\"noopener\">Open the tool \u2197<\/a>\n <\/div>\n\n <div class=\"mock\">\n <div class=\"browser-top\"><i><\/i><i><\/i><i><\/i><\/div>\n <div class=\"mock-content\">\n <div class=\"mock-title\">Write. Time. Review.<\/div>\n <div class=\"mock-lines\"><span><\/span><span><\/span><span><\/span><\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"cases\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Case studies<\/div>\n <div>\n <h2>Not a gallery. A record of how I think.<\/h2>\n <p>\n Each project starts with a behavioural or commercial problem,\n not a preferred format.\n <\/p>\n <\/div>\n <\/div>\n\n <article class=\"case reveal\">\n <div class=\"case-num\">01 \/ BRAND<\/div>\n <div>\n <h3>Making English learning feel like a brand, not homework.<\/h3>\n <p>\n The challenge was to create an English-learning identity that could\n remain credible while feeling warmer, more distinctive and more human\n than conventional test-preparation brands.\n <\/p>\n <p>\n I developed A Cup of Tea English as an ecosystem rather than a single\n channel: social content creates discovery, the website deepens the\n relationship, tools create utility, and apps turn the idea into\n repeatable product experiences.\n <\/p>\n\n <div class=\"case-columns\">\n <div class=\"case-box\">\n <b>Insight<\/b>\n <span>Learners need more than information; they need a reason to return.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Execution<\/b>\n <span>Brand, social, learning content, website, tools, YouTube and iOS products.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Commercial role<\/b>\n <span>Content and digital journeys designed to generate enquiries and revenue.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"case reveal\">\n <div class=\"case-num\">02 \/ PRODUCT<\/div>\n <div>\n <h3>Shipping the idea myself when a prototype is more useful than a deck.<\/h3>\n <p>\n I enjoy the point where strategy becomes something a user can actually\n touch. For several projects, I have independently taken an idea through\n concept, interface decisions, development and release.\n <\/p>\n <p>\n That changes the way I approach creative work: I naturally think about\n feasibility, friction, user behaviour, retention and what happens after\n the campaign promise.\n <\/p>\n\n <div class=\"case-columns\">\n <div class=\"case-box\">\n <b>Approach<\/b>\n <span>Build enough of the real experience to test the idea properly.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Products<\/b>\n <span>Vocabulary, pronunciation, grammar, manifestation, gratitude and browser-based learning tools.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Strength<\/b>\n <span>Creative thinking with genuine hands-on product ownership.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"case reveal\">\n <div class=\"case-num\">03 \/ GROWTH<\/div>\n <div>\n <h3>Designing content with a commercial destination.<\/h3>\n <p>\n I treat content as part of a wider system. The aim is not simply to\n publish consistently; it is to create curiosity, establish trust,\n make the next action obvious and connect attention with a useful\n product or service.\n <\/p>\n <p>\n Across my own brands and four active client accounts, that means building\n a path from social discovery to owned channels, enquiries and revenue \u2014\n while protecting the personality and expertise of each brand.\n <\/p>\n\n <div class=\"case-columns\">\n <div class=\"case-box\">\n <b>Discovery<\/b>\n <span>Social-first ideas built around useful, recognisable hooks.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Conversion<\/b>\n <span>Owned pages and experiences that give attention somewhere to go.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Outcome<\/b>\n <span>Commercially useful attention: enquiries, sales conversations and revenue rather than vanity metrics alone.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n <section id=\"client-work\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Client portfolio<\/div>\n <div>\n <h2>Creative and growth thinking across four active education brands.<\/h2>\n <p>\n Alongside building my own products, I currently advise four clients\n across test preparation, English learning and international education.\n The work spans positioning, campaigns, content systems, conversion\n journeys, websites and product ideas.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"fit-grid\" style=\"color:var(--ink)\">\n <div class=\"fit-card reveal\" style=\"border-color:var(--line);background:var(--paper)\">\n <div class=\"num\" style=\"margin-bottom:28px;color:var(--wine)\">01<\/div>\n <h3>Donz GMAT<\/h3>\n <p style=\"color:var(--muted)\">Creative marketing and growth support for GMAT preparation, including campaign messaging, landing-page thinking and student conversion.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\" style=\"border-color:var(--line);background:var(--paper)\">\n <div class=\"num\" style=\"margin-bottom:28px;color:var(--wine)\">02<\/div>\n <h3>Lily GRE<\/h3>\n <p style=\"color:var(--muted)\">Brand, content and acquisition support for GRE preparation, translating expert teaching into clearer, more compelling customer journeys.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\" style=\"border-color:var(--line);background:var(--paper)\">\n <div class=\"num\" style=\"margin-bottom:28px;color:var(--wine)\">03<\/div>\n <h3>LeedsMayi<\/h3>\n <p style=\"color:var(--muted)\">Brand, digital experience and product support for an English-learning business, including the LeedsMayi Grammar Example Book app.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\" style=\"border-color:var(--line);background:var(--paper)\">\n <div class=\"num\" style=\"margin-bottom:28px;color:var(--wine)\">04<\/div>\n <h3>Synergy Education<\/h3>\n <p style=\"color:var(--muted)\">Marketing and positioning support for a study-abroad consultancy, helping turn complex admissions expertise into clearer audience-facing content.<\/p>\n <\/div>\n <\/div>\n\n <p class=\"reveal\" style=\"margin:24px 0 0;color:var(--muted);font-size:14px\">\n Previous client work has also included a financial-education camp,\n broadening my experience beyond language learning and admissions.\n <\/p>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Explore<\/div>\n <div>\n <h2>A small digital ecosystem, not a single portfolio format.<\/h2>\n <p>Open the work itself. The links below lead to live brands, products and channels.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"link-cloud\">\n <a class=\"link-card reveal\" href=\"https:\/\/www.instagram.com\/acupofteaenglish\/\" target=\"_blank\" rel=\"noopener\">\n <small>Instagram \u00b7 education<\/small><strong>A Cup of Tea English<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/www.instagram.com\/wonderingentrepreneur\/\" target=\"_blank\" rel=\"noopener\">\n <small>Instagram \u00b7 entrepreneurship<\/small><strong>Wondering Entrepreneur<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/www.youtube.com\/@ACupOfTeaEnglish\" target=\"_blank\" rel=\"noopener\">\n <small>YouTube<\/small><strong>A Cup of Tea English<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/wondering.pro\/\" target=\"_blank\" rel=\"noopener\">\n <small>Consultancy \u00b7 website<\/small><strong>Wondering<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E4%B8%80%E6%9D%AF%E8%8C%B6%E5%AD%B8%E8%8B%B1%E5%BC%8F%E7%99%BC%E9%9F%B3\/id6453698520?l=en-GB\" target=\"_blank\" rel=\"noopener\">\n <small>iOS \u00b7 learning<\/small><strong>British Pronunciation App<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E9%87%8C%E8%8C%B2%E8%9E%9E%E8%9F%BB%E6%96%87%E6%B3%95%E4%BD%B3%E5%8F%A5%E6%9C%AC\/id6478044202?l=en-GB#productRatings\" target=\"_blank\" rel=\"noopener\">\n <small>iOS \u00b7 client product<\/small><strong>LeedsMayi Grammar Example Book<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E5%AE%87%E5%AE%99%E9%A1%AF%E5%8C%96%E8%A8%82%E5%96%AE\/id6448254507?l=en-GB\" target=\"_blank\" rel=\"noopener\">\n <small>iOS \u00b7 consumer product \u00b7 Top 100 in month one<\/small><strong>Manifestation App<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E5%A4%AA%E9%99%BD%E8%B2%93%E6%84%9F%E6%81%A9%E6%97%A5%E8%A8%98\/id6472634851?l=en-GB\" target=\"_blank\" rel=\"noopener\">\n <small>iOS \u00b7 wellbeing<\/small><strong>Gratitude Journal<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/learnwithacupoftea.com\/index.php\/ielts-writing-typing-practice\/\" target=\"_blank\" rel=\"noopener\">\n <small>Web tool \u00b7 education<\/small><strong>IELTS Typing Practice<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/wondering.pro\/ai-iching\/\" target=\"_blank\" rel=\"noopener\">\n <small>Interactive \u00b7 AI<\/small><strong>AI I Ching<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"duo-fit\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Why this matters<\/div>\n <div>\n <h2>I like creative work that behaves like a product.<\/h2>\n <p>\n The most interesting brands do not separate storytelling, utility,\n culture and growth. They create ideas people recognise \u2014 then give\n those people something worth doing.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"fit-grid\">\n <div class=\"fit-card reveal\">\n <div class=\"num\">01<\/div>\n <h3>Learning native<\/h3>\n <p>I understand education as both a learner experience and a brand problem.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\">\n <div class=\"num\">02<\/div>\n <h3>Social instinct<\/h3>\n <p>I build content around recognisable human behaviour rather than channel conventions alone.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\">\n <div class=\"num\">03<\/div>\n <h3>Hands-on maker<\/h3>\n <p>I can move from concept to a working digital experience instead of stopping at the brief.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\">\n <div class=\"num\">04<\/div>\n <h3>Commercial lens<\/h3>\n <p>I connect attention with user action, enquiries, products and revenue across both owned brands and client work.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"about\">\n <div class=\"container about reveal\">\n <div>\n <div class=\"section-kicker\" style=\"margin-bottom:18px\">About<\/div>\n <h2>Strategist in the morning. Builder by the afternoon.<\/h2>\n <\/div>\n\n <div class=\"about-copy\">\n <p>\n I work across creative strategy, education, client growth and digital\n products. I currently support four education and study-abroad brands\n while continuing to build my own learning and consumer products.\n My favourite problems sit between disciplines: when a brand needs a\n product instinct, when expert knowledge needs stronger storytelling,\n or when a good idea needs to become something real.\n <\/p>\n\n <p>\n I am particularly interested in the relationship between human\n expertise, AI, personalisation and the future of digital learning.\n <\/p>\n\n <div class=\"quote\">\n \u201cShow the idea working. Then make the next version better.\u201d\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"contact\" class=\"contact\">\n <div class=\"container\">\n <div class=\"contact-card reveal\">\n <div>\n <div class=\"section-kicker\" style=\"color:#E6C996;margin-bottom:18px\">Get in touch<\/div>\n <h2>Fancy a cup of tea and a good problem?<\/h2>\n <p>\n I am interested in ambitious work at the intersection of learning,\n culture, brand and digital product.\n <\/p>\n <\/div>\n\n <div class=\"contact-actions\">\n \n <a class=\"btn primary\" href=\"mailto:YOUR_EMAIL@example.com\">Email me \u2197<\/a>\n <a class=\"btn\" href=\"https:\/\/www.instagram.com\/acupofteaenglish\/\" target=\"_blank\" rel=\"noopener\">Instagram \u2197<\/a>\n <a class=\"btn\" href=\"https:\/\/www.youtube.com\/@ACupOfTeaEnglish\" target=\"_blank\" rel=\"noopener\">YouTube \u2197<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer>\n <div class=\"container footer-inner\">\n <span>\u00a9 <span id=\"year\"><\/span> David Po-Jui Chen<\/span>\n <span>Built with strategy, code and an unreasonable amount of tea.<\/span>\n <\/div>\n <\/footer>\n\n <script>\n document.getElementById(\"year\").textContent = new Date().getFullYear();\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"visible\");\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.08 });\n\n document.querySelectorAll(\".reveal\").forEach(el => observer.observe(el));\n <\/script>\n<\/body>\n<\/html>\n<div class=\"d8cbceb61c1f23d387e3da30c94bedf8\" data-index=\"3\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6391243819798351\"\r\n crossorigin=\"anonymous\"><\/script>\r\n\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block\"\r\n data-ad-client=\"ca-pub-6391243819798351\"\r\n data-ad-slot=\"8952164463\"\r\n data-ad-format=\"auto\"\r\n data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\n<\/div>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>David Po-Jui Chen | Creative Portfolio David Po-Jui Che […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"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":""}},"footnotes":""},"class_list":["post-2509","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/pages\/2509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/comments?post=2509"}],"version-history":[{"count":1,"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/pages\/2509\/revisions"}],"predecessor-version":[{"id":2510,"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/pages\/2509\/revisions\/2510"}],"wp:attachment":[{"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/media?parent=2509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2509,"date":"2026-08-07T12:46:19","date_gmt":"2026-08-07T04:46:19","guid":{"rendered":"https:\/\/learnwithacupoftea.com\/?page_id=2509"},"modified":"2026-08-07T12:48:35","modified_gmt":"2026-08-07T04:48:35","slug":"chen-portfolio","status":"publish","type":"page","link":"https:\/\/learnwithacupoftea.com\/index.php\/chen-portfolio\/","title":{"rendered":"Chen Portfolio"},"content":{"rendered":"\n\n\n\n \n \n \n David Po-Jui Chen | Creative Portfolio<\/title>\n\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=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap\" rel=\"stylesheet\">\n\n <style>\n :root{\n --cream:#F5F0E7;\n --paper:#FBF8F1;\n --ink:#20211E;\n --tea:#173F36;\n --tea-2:#2B5A4D;\n --wine:#7B3140;\n --gold:#BE9A67;\n --sage:#D9E0D5;\n --line:rgba(32,33,30,.14);\n --muted:#696B64;\n --white:#FFFDF8;\n --shadow:0 24px 60px rgba(34,31,24,.10);\n --radius:28px;\n --max:1180px;\n }\n\n *{box-sizing:border-box}\n html{scroll-behavior:smooth}\n body{\n margin:0;\n background:var(--cream);\n color:var(--ink);\n font-family:\"DM Sans\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n line-height:1.65;\n overflow-x:hidden;\n }\n\n a{color:inherit;text-decoration:none}\n button{font:inherit}\n img{max-width:100%;display:block}\n\n .grain{\n position:fixed;\n inset:0;\n pointer-events:none;\n opacity:.22;\n z-index:999;\n background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'\/%3E%3C\/svg%3E\");\n }\n\n .container{\n width:min(var(--max),calc(100% - 40px));\n margin-inline:auto;\n }\n\n .nav{\n position:sticky;\n top:0;\n z-index:100;\n backdrop-filter:blur(18px);\n -webkit-backdrop-filter:blur(18px);\n background:rgba(245,240,231,.84);\n border-bottom:1px solid rgba(32,33,30,.08);\n }\n\n .nav-inner{\n min-height:76px;\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:24px;\n }\n\n .brand{\n display:flex;\n align-items:center;\n gap:11px;\n font-weight:700;\n letter-spacing:-.02em;\n }\n\n .cup{\n width:34px;\n height:26px;\n border:2px solid var(--tea);\n border-radius:4px 4px 13px 13px;\n position:relative;\n transform:rotate(-2deg);\n }\n\n .cup:before{\n content:\"\";\n width:10px;\n height:10px;\n border:2px solid var(--tea);\n border-left:0;\n border-radius:0 10px 10px 0;\n position:absolute;\n right:-10px;\n top:4px;\n }\n\n .cup:after{\n content:\"\";\n width:2px;\n height:11px;\n background:var(--gold);\n position:absolute;\n left:15px;\n top:-12px;\n border-radius:20px;\n box-shadow:-5px -3px 0 -0.4px var(--gold);\n opacity:.9;\n }\n\n .nav-links{\n display:flex;\n align-items:center;\n gap:22px;\n font-size:14px;\n font-weight:600;\n }\n\n .nav-links a:not(.nav-cta){\n position:relative;\n }\n\n .nav-links a:not(.nav-cta):after{\n content:\"\";\n height:1px;\n width:0;\n background:var(--tea);\n position:absolute;\n left:0;\n bottom:-4px;\n transition:.25s ease;\n }\n\n .nav-links a:hover:after{width:100%}\n\n .nav-cta,\n .btn{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n gap:10px;\n border:1px solid var(--tea);\n border-radius:999px;\n padding:12px 18px;\n font-weight:700;\n transition:.25s ease;\n }\n\n .nav-cta{\n background:var(--tea);\n color:var(--white);\n padding:10px 16px;\n }\n\n .btn:hover,\n .nav-cta:hover{\n transform:translateY(-2px);\n box-shadow:0 10px 24px rgba(23,63,54,.13);\n }\n\n .btn.primary{\n background:var(--tea);\n color:var(--white);\n }\n\n .btn.secondary{\n background:transparent;\n }\n\n .hero{\n padding:78px 0 64px;\n position:relative;\n }\n\n .hero:before{\n content:\"\";\n position:absolute;\n width:440px;\n height:440px;\n border:1px solid rgba(190,154,103,.35);\n border-radius:50%;\n right:-130px;\n top:-150px;\n }\n\n .hero-grid{\n display:grid;\n grid-template-columns:1.28fr .72fr;\n gap:64px;\n align-items:end;\n }\n\n .eyebrow{\n display:inline-flex;\n align-items:center;\n gap:9px;\n text-transform:uppercase;\n letter-spacing:.16em;\n font-size:12px;\n font-weight:700;\n color:var(--tea);\n margin-bottom:22px;\n }\n\n .eyebrow:before{\n content:\"\";\n width:34px;\n height:1px;\n background:var(--gold);\n }\n\n h1,h2,h3{\n font-family:\"Fraunces\",Georgia,serif;\n letter-spacing:-.035em;\n margin:0;\n }\n\n h1{\n font-size:clamp(56px,8vw,108px);\n line-height:.92;\n max-width:900px;\n font-weight:600;\n }\n\n .hero-highlight{\n color:var(--wine);\n font-style:italic;\n font-weight:500;\n }\n\n .hero-copy{\n max-width:650px;\n font-size:19px;\n color:#4F514B;\n margin:28px 0 0;\n }\n\n .hero-actions{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-top:32px;\n }\n\n .hero-side{\n border-left:1px solid var(--line);\n padding-left:30px;\n }\n\n .hero-side p{\n margin:0;\n color:var(--muted);\n font-size:14px;\n }\n\n .hero-side strong{\n display:block;\n font-family:\"Fraunces\",Georgia,serif;\n color:var(--ink);\n font-size:28px;\n line-height:1.15;\n margin:8px 0 20px;\n }\n\n .tiny-list{\n display:grid;\n gap:10px;\n margin-top:24px;\n }\n\n .tiny-list span{\n display:flex;\n align-items:center;\n gap:9px;\n font-size:14px;\n font-weight:600;\n }\n\n .tiny-list span:before{\n content:\"\";\n width:7px;\n height:7px;\n border-radius:50%;\n background:var(--gold);\n flex:0 0 auto;\n }\n\n .marquee{\n border-block:1px solid var(--line);\n overflow:hidden;\n white-space:nowrap;\n background:rgba(255,253,248,.35);\n }\n\n .marquee-track{\n display:inline-flex;\n min-width:max-content;\n gap:34px;\n padding:14px 0;\n animation:marquee 28s linear infinite;\n font-size:12px;\n font-weight:700;\n letter-spacing:.13em;\n text-transform:uppercase;\n color:var(--tea);\n }\n\n .marquee-track span:after{\n content:\"\u2726\";\n margin-left:34px;\n color:var(--gold);\n }\n\n @keyframes marquee{\n from{transform:translateX(0)}\n to{transform:translateX(-50%)}\n }\n\n section{\n padding:110px 0;\n }\n\n .section-head{\n display:grid;\n grid-template-columns:.75fr 1.25fr;\n gap:60px;\n align-items:start;\n margin-bottom:50px;\n }\n\n .section-kicker{\n text-transform:uppercase;\n font-size:12px;\n letter-spacing:.15em;\n font-weight:700;\n color:var(--wine);\n }\n\n .section-head h2{\n font-size:clamp(42px,5vw,68px);\n line-height:1;\n max-width:760px;\n }\n\n .section-head p{\n margin:20px 0 0;\n font-size:18px;\n color:var(--muted);\n max-width:750px;\n }\n\n .metrics{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n border:1px solid var(--line);\n border-radius:var(--radius);\n overflow:hidden;\n background:var(--paper);\n box-shadow:var(--shadow);\n }\n\n .metric{\n padding:32px;\n min-height:165px;\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n }\n\n .metric + .metric{border-left:1px solid var(--line)}\n\n .metric strong{\n font-family:\"Fraunces\",Georgia,serif;\n font-size:38px;\n line-height:1;\n color:var(--tea);\n }\n\n .metric span{\n font-size:13px;\n font-weight:600;\n color:var(--muted);\n max-width:180px;\n }\n\n .metric.placeholder strong{\n color:var(--wine);\n }\n\n .metric.placeholder span:after{\n content:\" \u2190 replace with your verified figure\";\n color:var(--wine);\n font-weight:500;\n }\n\n .work-grid{\n display:grid;\n grid-template-columns:repeat(12,1fr);\n gap:22px;\n }\n\n .project{\n border-radius:var(--radius);\n overflow:hidden;\n position:relative;\n min-height:460px;\n box-shadow:var(--shadow);\n border:1px solid rgba(255,255,255,.45);\n transition:.3s ease;\n }\n\n .project:hover{\n transform:translateY(-5px);\n box-shadow:0 28px 70px rgba(34,31,24,.14);\n }\n\n .project.big{grid-column:span 7}\n .project.small{grid-column:span 5}\n .project.half{grid-column:span 6}\n\n .project.green{background:var(--tea);color:var(--white)}\n .project.wine{background:var(--wine);color:var(--white)}\n .project.paper{background:var(--paper);color:var(--ink)}\n .project.sage{background:var(--sage);color:var(--ink)}\n\n .project-copy{\n padding:34px 34px 22px;\n position:relative;\n z-index:2;\n }\n\n .project-label{\n font-size:11px;\n font-weight:700;\n letter-spacing:.14em;\n text-transform:uppercase;\n opacity:.72;\n }\n\n .project h3{\n font-size:36px;\n line-height:1;\n margin:10px 0 14px;\n }\n\n .project p{\n margin:0;\n max-width:560px;\n opacity:.78;\n font-size:15px;\n }\n\n .project-link{\n display:inline-flex;\n align-items:center;\n gap:8px;\n margin-top:20px;\n font-weight:700;\n font-size:14px;\n border-bottom:1px solid currentColor;\n padding-bottom:2px;\n }\n\n .mock{\n height:230px;\n margin:22px 26px 0;\n border-radius:20px 20px 0 0;\n position:relative;\n overflow:hidden;\n background:var(--white);\n color:var(--ink);\n border:1px solid rgba(32,33,30,.12);\n box-shadow:0 18px 50px rgba(0,0,0,.14);\n }\n\n .browser-top{\n height:36px;\n display:flex;\n align-items:center;\n gap:6px;\n padding:0 13px;\n border-bottom:1px solid var(--line);\n background:#F6F2E9;\n }\n\n .browser-top i{\n width:8px;height:8px;border-radius:50%;\n background:#BBB4A8;\n }\n\n .mock-content{\n padding:22px;\n }\n\n .mock-title{\n font-family:\"Fraunces\",Georgia,serif;\n font-size:25px;\n line-height:1;\n margin-bottom:15px;\n }\n\n .mock-lines{\n display:grid;\n gap:8px;\n max-width:75%;\n }\n\n .mock-lines span{\n height:7px;\n border-radius:999px;\n background:#DED8CE;\n }\n\n .mock-lines span:nth-child(2){width:84%}\n .mock-lines span:nth-child(3){width:60%}\n\n .tea-card{\n position:absolute;\n right:18px;\n bottom:18px;\n width:96px;\n height:116px;\n border-radius:18px;\n background:#E8D8BC;\n display:grid;\n place-items:center;\n font-family:\"Fraunces\",Georgia,serif;\n font-size:34px;\n color:var(--tea);\n transform:rotate(5deg);\n }\n\n .phone-row{\n display:flex;\n gap:12px;\n justify-content:center;\n align-items:flex-end;\n padding:18px 20px 0;\n height:250px;\n }\n\n .phone{\n width:100px;\n height:220px;\n border:5px solid #282927;\n border-radius:28px 28px 0 0;\n background:#FCFAF5;\n position:relative;\n padding:22px 11px;\n box-shadow:0 14px 30px rgba(0,0,0,.16);\n }\n\n .phone:nth-child(2){transform:translateY(18px)}\n\n .phone:before{\n content:\"\";\n width:38px;\n height:7px;\n background:#282927;\n border-radius:999px;\n position:absolute;\n top:7px;\n left:50%;\n transform:translateX(-50%);\n }\n\n .app-icon{\n width:52px;\n height:52px;\n border-radius:14px;\n display:grid;\n place-items:center;\n margin:14px auto 12px;\n background:#D9E0D5;\n font-size:24px;\n }\n\n .app-name{\n text-align:center;\n font-size:10px;\n font-weight:700;\n line-height:1.25;\n }\n\n .orb{\n width:180px;\n height:180px;\n border-radius:50%;\n position:absolute;\n right:30px;\n bottom:20px;\n background:\n radial-gradient(circle at 32% 26%,rgba(255,255,255,.9),transparent 18%),\n radial-gradient(circle at 50% 50%,#EACDA5 0 25%,#BA8769 48%,#704350 74%,#4B2732 100%);\n box-shadow:0 30px 60px rgba(45,20,29,.25);\n }\n\n .orb:after{\n content:\"\u6613\";\n position:absolute;\n inset:0;\n display:grid;\n place-items:center;\n font-family:\"Fraunces\",Georgia,serif;\n color:#FFF4DF;\n font-size:62px;\n }\n\n .case{\n border-top:1px solid var(--line);\n display:grid;\n grid-template-columns:1fr 2fr;\n gap:55px;\n padding:58px 0;\n }\n\n .case:last-child{border-bottom:1px solid var(--line)}\n\n .case-num{\n font-family:\"Fraunces\",Georgia,serif;\n color:var(--gold);\n font-size:18px;\n }\n\n .case h3{\n font-size:40px;\n line-height:1.04;\n margin-bottom:18px;\n }\n\n .case p{\n margin:0 0 18px;\n color:var(--muted);\n font-size:16px;\n max-width:760px;\n }\n\n .case-columns{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:18px;\n margin-top:28px;\n }\n\n .case-box{\n padding:20px;\n border:1px solid var(--line);\n border-radius:18px;\n background:rgba(255,253,248,.45);\n }\n\n .case-box b{\n display:block;\n text-transform:uppercase;\n letter-spacing:.12em;\n font-size:10px;\n color:var(--wine);\n margin-bottom:8px;\n }\n\n .case-box span{\n font-size:13px;\n line-height:1.5;\n color:#52534F;\n }\n\n .link-cloud{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:14px;\n }\n\n .link-card{\n min-height:160px;\n border:1px solid var(--line);\n border-radius:20px;\n padding:22px;\n background:var(--paper);\n transition:.25s ease;\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n }\n\n .link-card:hover{\n background:var(--white);\n transform:translateY(-3px);\n }\n\n .link-card small{\n text-transform:uppercase;\n letter-spacing:.11em;\n color:var(--muted);\n font-weight:700;\n font-size:10px;\n }\n\n .link-card strong{\n font-family:\"Fraunces\",Georgia,serif;\n font-size:23px;\n line-height:1.05;\n }\n\n .arrow{\n font-size:18px;\n color:var(--wine);\n }\n\n .duo-fit{\n background:var(--tea);\n color:var(--white);\n position:relative;\n overflow:hidden;\n }\n\n .duo-fit:after{\n content:\"\";\n width:520px;\n height:520px;\n border:1px solid rgba(255,255,255,.16);\n border-radius:50%;\n position:absolute;\n right:-180px;\n top:-120px;\n }\n\n .duo-fit .section-kicker{color:#E4C892}\n .duo-fit .section-head p{color:rgba(255,255,255,.67)}\n\n .fit-grid{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:16px;\n position:relative;\n z-index:2;\n }\n\n .fit-card{\n border:1px solid rgba(255,255,255,.18);\n border-radius:22px;\n padding:26px;\n min-height:220px;\n background:rgba(255,255,255,.045);\n }\n\n .fit-card .num{\n color:#E4C892;\n font-family:\"Fraunces\",Georgia,serif;\n margin-bottom:46px;\n }\n\n .fit-card h3{\n font-size:24px;\n margin-bottom:10px;\n }\n\n .fit-card p{\n color:rgba(255,255,255,.66);\n font-size:13px;\n margin:0;\n }\n\n .about{\n display:grid;\n grid-template-columns:1.2fr .8fr;\n gap:65px;\n align-items:start;\n }\n\n .about h2{\n font-size:clamp(48px,6vw,82px);\n line-height:.96;\n }\n\n .about-copy{\n padding-top:8px;\n }\n\n .about-copy p{\n font-size:17px;\n color:var(--muted);\n margin:0 0 18px;\n }\n\n .quote{\n margin-top:32px;\n padding:28px 0 0;\n border-top:1px solid var(--line);\n font-family:\"Fraunces\",Georgia,serif;\n font-size:28px;\n line-height:1.16;\n color:var(--tea);\n }\n\n .contact{\n padding-bottom:64px;\n }\n\n .contact-card{\n border-radius:34px;\n background:var(--wine);\n color:var(--white);\n padding:70px;\n display:grid;\n grid-template-columns:1.3fr .7fr;\n gap:40px;\n align-items:end;\n box-shadow:var(--shadow);\n }\n\n .contact-card h2{\n font-size:clamp(48px,6vw,78px);\n line-height:.94;\n }\n\n .contact-card p{\n color:rgba(255,255,255,.72);\n max-width:620px;\n font-size:16px;\n }\n\n .contact-actions{\n display:flex;\n flex-direction:column;\n align-items:flex-start;\n gap:10px;\n }\n\n .contact-actions .btn{\n border-color:rgba(255,255,255,.75);\n width:100%;\n color:var(--white);\n }\n\n .contact-actions .btn.primary{\n background:var(--white);\n color:var(--wine);\n border-color:var(--white);\n }\n\n footer{\n padding:26px 0 40px;\n font-size:12px;\n color:var(--muted);\n }\n\n .footer-inner{\n display:flex;\n justify-content:space-between;\n gap:20px;\n border-top:1px solid var(--line);\n padding-top:24px;\n }\n\n .reveal{\n opacity:0;\n transform:translateY(18px);\n transition:opacity .65s ease,transform .65s ease;\n }\n\n .reveal.visible{\n opacity:1;\n transform:none;\n }\n\n @media(max-width:900px){\n .nav-links a:not(.nav-cta){display:none}\n .hero{padding-top:55px}\n .hero-grid,\n .section-head,\n .about,\n .contact-card{\n grid-template-columns:1fr;\n }\n .hero-side{\n border-left:0;\n border-top:1px solid var(--line);\n padding:26px 0 0;\n }\n .metrics{grid-template-columns:1fr 1fr}\n .metric:nth-child(3){border-left:0;border-top:1px solid var(--line)}\n .metric:nth-child(4){border-top:1px solid var(--line)}\n .project.big,.project.small,.project.half{grid-column:span 12}\n .case{grid-template-columns:1fr;gap:14px}\n .fit-grid{grid-template-columns:1fr 1fr}\n .link-cloud{grid-template-columns:1fr 1fr}\n .contact-card{padding:45px 28px}\n }\n\n @media(max-width:620px){\n .container{width:min(var(--max),calc(100% - 26px))}\n .nav-inner{min-height:66px}\n .nav-cta{font-size:12px;padding:9px 12px}\n .brand span{font-size:13px}\n h1{font-size:54px}\n .hero-copy{font-size:17px}\n section{padding:78px 0}\n .metrics{grid-template-columns:1fr}\n .metric + .metric{border-left:0;border-top:1px solid var(--line)}\n .metric:nth-child(3){border-top:1px solid var(--line)}\n .case-columns{grid-template-columns:1fr}\n .fit-grid,.link-cloud{grid-template-columns:1fr}\n .project{min-height:430px}\n .project-copy{padding:27px 25px 16px}\n .mock{margin-inline:18px}\n .contact-card{padding:38px 23px}\n .footer-inner{flex-direction:column}\n }\n\n @media(prefers-reduced-motion:reduce){\n html{scroll-behavior:auto}\n .marquee-track{animation:none}\n .reveal{opacity:1;transform:none}\n *{transition:none!important}\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"grain\"><\/div>\n\n <nav class=\"nav\">\n <div class=\"container nav-inner\">\n <a class=\"brand\" href=\"#top\" aria-label=\"Back to top\">\n <span class=\"cup\" aria-hidden=\"true\"><\/span>\n <span>David Po-Jui Chen<\/span>\n <\/a>\n\n <div class=\"nav-links\">\n <a href=\"#work\">Work<\/a>\n <a href=\"#cases\">Case Studies<\/a>\n <a href=\"#client-work\">Clients<\/a>\n <a href=\"#about\">About<\/a>\n <a class=\"nav-cta\" href=\"#contact\">Let\u2019s talk \u2197<\/a>\n <\/div>\n <\/div>\n <\/nav>\n\n <main id=\"top\">\n <header class=\"hero\">\n <div class=\"container hero-grid\">\n <div>\n <div class=\"eyebrow\">Creative strategy \u00b7 learning \u00b7 product<\/div>\n <h1>\n I turn ideas into\n <span class=\"hero-highlight\">brands people use.<\/span>\n <\/h1>\n\n <p class=\"hero-copy\">\n I build learning brands, digital products and culturally aware campaigns \u2014\n combining creative thinking, hands-on product building, client strategy\n and measurable commercial outcomes.\n <\/p>\n\n <div class=\"hero-actions\">\n <a class=\"btn primary\" href=\"#work\">See selected work \u2193<\/a>\n <a class=\"btn secondary\" href=\"https:\/\/learnwithacupoftea.com\/\" target=\"_blank\" rel=\"noopener\">A Cup of Tea English \u2197<\/a>\n <\/div>\n <\/div>\n\n <aside class=\"hero-side\">\n <p>Portfolio focus<\/p>\n <strong>Brand building that does more than look good.<\/strong>\n <p>\n My work sits where education, social content, product design,\n growth strategy and entrepreneurship overlap.\n <\/p>\n\n <div class=\"tiny-list\">\n <span>Built and shipped digital products independently<\/span>\n <span>Advise four active education and study-abroad clients<\/span>\n <span>Created journeys designed to generate leads and revenue<\/span>\n <span>Worked across learning, brand, growth and product<\/span>\n <\/div>\n <\/aside>\n <\/div>\n <\/header>\n\n <div class=\"marquee\" aria-hidden=\"true\">\n <div class=\"marquee-track\">\n <span>Brand Strategy<\/span><span>Creative Marketing<\/span><span>Education<\/span>\n <span>Social Content<\/span><span>iOS Products<\/span><span>Interactive Experiences<\/span>\n <span>Growth Thinking<\/span><span>British English<\/span>\n <span>Brand Strategy<\/span><span>Creative Marketing<\/span><span>Education<\/span>\n <span>Social Content<\/span><span>iOS Products<\/span><span>Interactive Experiences<\/span>\n <span>Growth Thinking<\/span><span>British English<\/span>\n <\/div>\n <\/div>\n\n <section>\n <div class=\"container reveal\">\n <div class=\"section-head\">\n <div class=\"section-kicker\">Impact<\/div>\n <div>\n <h2>Creative work should earn attention \u2014 and create a reason to act.<\/h2>\n <p>\n I care about the journey after the idea: what people click, download,\n enquire about, buy, practise and come back to \u2014 and how creative work\n supports a wider commercial strategy.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"metrics\">\n <div class=\"metric\">\n <strong>4<\/strong>\n <span>Active education and study-abroad clients<\/span>\n <\/div>\n <div class=\"metric\">\n <strong>Top 100<\/strong>\n <span>App Store milestone achieved by a wellbeing \/ manifestation app in its first month<\/span>\n <\/div>\n <div class=\"metric\">\n <strong>6+<\/strong>\n <span>Apps, tools and interactive digital products built or supported<\/span>\n <\/div>\n <div class=\"metric\">\n <strong>End-to-end<\/strong>\n <span>From strategy and creative direction to hands-on execution and product delivery<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"work\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Selected work<\/div>\n <div>\n <h2>From content to product, without losing the idea in between.<\/h2>\n <p>\n A selection of work showing how I move between brand strategy,\n storytelling, learning design, digital experience and shipping.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"work-grid\">\n <article class=\"project big green reveal\">\n <div class=\"project-copy\">\n <div class=\"project-label\">Brand ecosystem \u00b7 education<\/div>\n <h3>A Cup of Tea English<\/h3>\n <p>\n An English-learning brand built around a warmer, more culturally\n distinctive alternative to traditional exam-focused education \u2014\n spanning social content, web learning, YouTube, tools and iOS products.\n <\/p>\n <a class=\"project-link\" href=\"https:\/\/learnwithacupoftea.com\/\" target=\"_blank\" rel=\"noopener\">Visit the brand \u2197<\/a>\n <\/div>\n\n <div class=\"mock\">\n <div class=\"browser-top\"><i><\/i><i><\/i><i><\/i><\/div>\n <div class=\"mock-content\">\n <div class=\"mock-title\">English, with a proper cup of tea.<\/div>\n <div class=\"mock-lines\"><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"tea-card\">\u2615<\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"project small paper reveal\">\n <div class=\"project-copy\">\n <div class=\"project-label\">Product building \u00b7 education<\/div>\n <h3>Learning Apps<\/h3>\n <p>\n I have taken learning ideas beyond posts and lessons by building\n standalone iOS products, and by helping education clients turn\n teaching methods into usable digital products.\n <\/p>\n <a class=\"project-link\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E9%87%8C%E8%8C%B2%E8%9E%9E%E8%9F%BB%E6%96%87%E6%B3%95%E4%BD%B3%E5%8F%A5%E6%9C%AC\/id6478044202?l=en-GB#productRatings\" target=\"_blank\" rel=\"noopener\">View LeedsMayi Grammar App \u2197<\/a>\n <\/div>\n\n <div class=\"phone-row\">\n <div class=\"phone\">\n <div class=\"app-icon\">Aa<\/div>\n <div class=\"app-name\">Vocabulary<br>learning<\/div>\n <\/div>\n <div class=\"phone\">\n <div class=\"app-icon\">\/\u0259\/<\/div>\n <div class=\"app-name\">British<br>pronunciation<\/div>\n <\/div>\n <div class=\"phone\">\n <div class=\"app-icon\">\u270e<\/div>\n <div class=\"app-name\">Grammar<br>examples<\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"project half wine reveal\">\n <div class=\"project-copy\">\n <div class=\"project-label\">Interactive experience \u00b7 AI<\/div>\n <h3>AI I Ching<\/h3>\n <p>\n An interactive experience turning an abstract cultural idea into\n something people can question, explore and play with online.\n <\/p>\n <a class=\"project-link\" href=\"https:\/\/wondering.pro\/ai-iching\/\" target=\"_blank\" rel=\"noopener\">Try the experience \u2197<\/a>\n <\/div>\n <div class=\"orb\" aria-hidden=\"true\"><\/div>\n <\/article>\n\n <article class=\"project half sage reveal\">\n <div class=\"project-copy\">\n <div class=\"project-label\">Practice tool \u00b7 learning UX<\/div>\n <h3>IELTS Writing Typing Practice<\/h3>\n <p>\n A focused browser tool that turns a common learner problem \u2014\n practising typed writing under exam conditions \u2014 into a simple,\n accessible experience.\n <\/p>\n <a class=\"project-link\" href=\"https:\/\/learnwithacupoftea.com\/index.php\/ielts-writing-typing-practice\/\" target=\"_blank\" rel=\"noopener\">Open the tool \u2197<\/a>\n <\/div>\n\n <div class=\"mock\">\n <div class=\"browser-top\"><i><\/i><i><\/i><i><\/i><\/div>\n <div class=\"mock-content\">\n <div class=\"mock-title\">Write. Time. Review.<\/div>\n <div class=\"mock-lines\"><span><\/span><span><\/span><span><\/span><\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"cases\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Case studies<\/div>\n <div>\n <h2>Not a gallery. A record of how I think.<\/h2>\n <p>\n Each project starts with a behavioural or commercial problem,\n not a preferred format.\n <\/p>\n <\/div>\n <\/div>\n\n <article class=\"case reveal\">\n <div class=\"case-num\">01 \/ BRAND<\/div>\n <div>\n <h3>Making English learning feel like a brand, not homework.<\/h3>\n <p>\n The challenge was to create an English-learning identity that could\n remain credible while feeling warmer, more distinctive and more human\n than conventional test-preparation brands.\n <\/p>\n <p>\n I developed A Cup of Tea English as an ecosystem rather than a single\n channel: social content creates discovery, the website deepens the\n relationship, tools create utility, and apps turn the idea into\n repeatable product experiences.\n <\/p>\n\n <div class=\"case-columns\">\n <div class=\"case-box\">\n <b>Insight<\/b>\n <span>Learners need more than information; they need a reason to return.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Execution<\/b>\n <span>Brand, social, learning content, website, tools, YouTube and iOS products.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Commercial role<\/b>\n <span>Content and digital journeys designed to generate enquiries and revenue.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"case reveal\">\n <div class=\"case-num\">02 \/ PRODUCT<\/div>\n <div>\n <h3>Shipping the idea myself when a prototype is more useful than a deck.<\/h3>\n <p>\n I enjoy the point where strategy becomes something a user can actually\n touch. For several projects, I have independently taken an idea through\n concept, interface decisions, development and release.\n <\/p>\n <p>\n That changes the way I approach creative work: I naturally think about\n feasibility, friction, user behaviour, retention and what happens after\n the campaign promise.\n <\/p>\n\n <div class=\"case-columns\">\n <div class=\"case-box\">\n <b>Approach<\/b>\n <span>Build enough of the real experience to test the idea properly.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Products<\/b>\n <span>Vocabulary, pronunciation, grammar, manifestation, gratitude and browser-based learning tools.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Strength<\/b>\n <span>Creative thinking with genuine hands-on product ownership.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"case reveal\">\n <div class=\"case-num\">03 \/ GROWTH<\/div>\n <div>\n <h3>Designing content with a commercial destination.<\/h3>\n <p>\n I treat content as part of a wider system. The aim is not simply to\n publish consistently; it is to create curiosity, establish trust,\n make the next action obvious and connect attention with a useful\n product or service.\n <\/p>\n <p>\n Across my own brands and four active client accounts, that means building\n a path from social discovery to owned channels, enquiries and revenue \u2014\n while protecting the personality and expertise of each brand.\n <\/p>\n\n <div class=\"case-columns\">\n <div class=\"case-box\">\n <b>Discovery<\/b>\n <span>Social-first ideas built around useful, recognisable hooks.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Conversion<\/b>\n <span>Owned pages and experiences that give attention somewhere to go.<\/span>\n <\/div>\n <div class=\"case-box\">\n <b>Outcome<\/b>\n <span>Commercially useful attention: enquiries, sales conversations and revenue rather than vanity metrics alone.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n <section id=\"client-work\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Client portfolio<\/div>\n <div>\n <h2>Creative and growth thinking across four active education brands.<\/h2>\n <p>\n Alongside building my own products, I currently advise four clients\n across test preparation, English learning and international education.\n The work spans positioning, campaigns, content systems, conversion\n journeys, websites and product ideas.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"fit-grid\" style=\"color:var(--ink)\">\n <div class=\"fit-card reveal\" style=\"border-color:var(--line);background:var(--paper)\">\n <div class=\"num\" style=\"margin-bottom:28px;color:var(--wine)\">01<\/div>\n <h3>Donz GMAT<\/h3>\n <p style=\"color:var(--muted)\">Creative marketing and growth support for GMAT preparation, including campaign messaging, landing-page thinking and student conversion.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\" style=\"border-color:var(--line);background:var(--paper)\">\n <div class=\"num\" style=\"margin-bottom:28px;color:var(--wine)\">02<\/div>\n <h3>Lily GRE<\/h3>\n <p style=\"color:var(--muted)\">Brand, content and acquisition support for GRE preparation, translating expert teaching into clearer, more compelling customer journeys.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\" style=\"border-color:var(--line);background:var(--paper)\">\n <div class=\"num\" style=\"margin-bottom:28px;color:var(--wine)\">03<\/div>\n <h3>LeedsMayi<\/h3>\n <p style=\"color:var(--muted)\">Brand, digital experience and product support for an English-learning business, including the LeedsMayi Grammar Example Book app.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\" style=\"border-color:var(--line);background:var(--paper)\">\n <div class=\"num\" style=\"margin-bottom:28px;color:var(--wine)\">04<\/div>\n <h3>Synergy Education<\/h3>\n <p style=\"color:var(--muted)\">Marketing and positioning support for a study-abroad consultancy, helping turn complex admissions expertise into clearer audience-facing content.<\/p>\n <\/div>\n <\/div>\n\n <p class=\"reveal\" style=\"margin:24px 0 0;color:var(--muted);font-size:14px\">\n Previous client work has also included a financial-education camp,\n broadening my experience beyond language learning and admissions.\n <\/p>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Explore<\/div>\n <div>\n <h2>A small digital ecosystem, not a single portfolio format.<\/h2>\n <p>Open the work itself. The links below lead to live brands, products and channels.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"link-cloud\">\n <a class=\"link-card reveal\" href=\"https:\/\/www.instagram.com\/acupofteaenglish\/\" target=\"_blank\" rel=\"noopener\">\n <small>Instagram \u00b7 education<\/small><strong>A Cup of Tea English<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/www.instagram.com\/wonderingentrepreneur\/\" target=\"_blank\" rel=\"noopener\">\n <small>Instagram \u00b7 entrepreneurship<\/small><strong>Wondering Entrepreneur<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/www.youtube.com\/@ACupOfTeaEnglish\" target=\"_blank\" rel=\"noopener\">\n <small>YouTube<\/small><strong>A Cup of Tea English<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/wondering.pro\/\" target=\"_blank\" rel=\"noopener\">\n <small>Consultancy \u00b7 website<\/small><strong>Wondering<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E4%B8%80%E6%9D%AF%E8%8C%B6%E5%AD%B8%E8%8B%B1%E5%BC%8F%E7%99%BC%E9%9F%B3\/id6453698520?l=en-GB\" target=\"_blank\" rel=\"noopener\">\n <small>iOS \u00b7 learning<\/small><strong>British Pronunciation App<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E9%87%8C%E8%8C%B2%E8%9E%9E%E8%9F%BB%E6%96%87%E6%B3%95%E4%BD%B3%E5%8F%A5%E6%9C%AC\/id6478044202?l=en-GB#productRatings\" target=\"_blank\" rel=\"noopener\">\n <small>iOS \u00b7 client product<\/small><strong>LeedsMayi Grammar Example Book<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E5%AE%87%E5%AE%99%E9%A1%AF%E5%8C%96%E8%A8%82%E5%96%AE\/id6448254507?l=en-GB\" target=\"_blank\" rel=\"noopener\">\n <small>iOS \u00b7 consumer product \u00b7 Top 100 in month one<\/small><strong>Manifestation App<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/apps.apple.com\/tw\/app\/%E5%A4%AA%E9%99%BD%E8%B2%93%E6%84%9F%E6%81%A9%E6%97%A5%E8%A8%98\/id6472634851?l=en-GB\" target=\"_blank\" rel=\"noopener\">\n <small>iOS \u00b7 wellbeing<\/small><strong>Gratitude Journal<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/learnwithacupoftea.com\/index.php\/ielts-writing-typing-practice\/\" target=\"_blank\" rel=\"noopener\">\n <small>Web tool \u00b7 education<\/small><strong>IELTS Typing Practice<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n\n <a class=\"link-card reveal\" href=\"https:\/\/wondering.pro\/ai-iching\/\" target=\"_blank\" rel=\"noopener\">\n <small>Interactive \u00b7 AI<\/small><strong>AI I Ching<\/strong><span class=\"arrow\">\u2197<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"duo-fit\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <div class=\"section-kicker\">Why this matters<\/div>\n <div>\n <h2>I like creative work that behaves like a product.<\/h2>\n <p>\n The most interesting brands do not separate storytelling, utility,\n culture and growth. They create ideas people recognise \u2014 then give\n those people something worth doing.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"fit-grid\">\n <div class=\"fit-card reveal\">\n <div class=\"num\">01<\/div>\n <h3>Learning native<\/h3>\n <p>I understand education as both a learner experience and a brand problem.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\">\n <div class=\"num\">02<\/div>\n <h3>Social instinct<\/h3>\n <p>I build content around recognisable human behaviour rather than channel conventions alone.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\">\n <div class=\"num\">03<\/div>\n <h3>Hands-on maker<\/h3>\n <p>I can move from concept to a working digital experience instead of stopping at the brief.<\/p>\n <\/div>\n\n <div class=\"fit-card reveal\">\n <div class=\"num\">04<\/div>\n <h3>Commercial lens<\/h3>\n <p>I connect attention with user action, enquiries, products and revenue across both owned brands and client work.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"about\">\n <div class=\"container about reveal\">\n <div>\n <div class=\"section-kicker\" style=\"margin-bottom:18px\">About<\/div>\n <h2>Strategist in the morning. Builder by the afternoon.<\/h2>\n <\/div>\n\n <div class=\"about-copy\">\n <p>\n I work across creative strategy, education, client growth and digital\n products. I currently support four education and study-abroad brands\n while continuing to build my own learning and consumer products.\n My favourite problems sit between disciplines: when a brand needs a\n product instinct, when expert knowledge needs stronger storytelling,\n or when a good idea needs to become something real.\n <\/p>\n\n <p>\n I am particularly interested in the relationship between human\n expertise, AI, personalisation and the future of digital learning.\n <\/p>\n\n <div class=\"quote\">\n \u201cShow the idea working. Then make the next version better.\u201d\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"contact\" class=\"contact\">\n <div class=\"container\">\n <div class=\"contact-card reveal\">\n <div>\n <div class=\"section-kicker\" style=\"color:#E6C996;margin-bottom:18px\">Get in touch<\/div>\n <h2>Fancy a cup of tea and a good problem?<\/h2>\n <p>\n I am interested in ambitious work at the intersection of learning,\n culture, brand and digital product.\n <\/p>\n <\/div>\n\n <div class=\"contact-actions\">\n \n <a class=\"btn primary\" href=\"mailto:YOUR_EMAIL@example.com\">Email me \u2197<\/a>\n <a class=\"btn\" href=\"https:\/\/www.instagram.com\/acupofteaenglish\/\" target=\"_blank\" rel=\"noopener\">Instagram \u2197<\/a>\n <a class=\"btn\" href=\"https:\/\/www.youtube.com\/@ACupOfTeaEnglish\" target=\"_blank\" rel=\"noopener\">YouTube \u2197<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer>\n <div class=\"container footer-inner\">\n <span>\u00a9 <span id=\"year\"><\/span> David Po-Jui Chen<\/span>\n <span>Built with strategy, code and an unreasonable amount of tea.<\/span>\n <\/div>\n <\/footer>\n\n <script>\n document.getElementById(\"year\").textContent = new Date().getFullYear();\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"visible\");\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.08 });\n\n document.querySelectorAll(\".reveal\").forEach(el => observer.observe(el));\n <\/script>\n<\/body>\n<\/html>\n<div class=\"d8cbceb61c1f23d387e3da30c94bedf8\" data-index=\"3\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6391243819798351\"\r\n crossorigin=\"anonymous\"><\/script>\r\n\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block\"\r\n data-ad-client=\"ca-pub-6391243819798351\"\r\n data-ad-slot=\"8952164463\"\r\n data-ad-format=\"auto\"\r\n data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\n<\/div>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>David Po-Jui Chen | Creative Portfolio David Po-Jui Che […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"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":""}},"footnotes":""},"class_list":["post-2509","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/pages\/2509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/comments?post=2509"}],"version-history":[{"count":1,"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/pages\/2509\/revisions"}],"predecessor-version":[{"id":2510,"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/pages\/2509\/revisions\/2510"}],"wp:attachment":[{"href":"https:\/\/learnwithacupoftea.com\/index.php\/wp-json\/wp\/v2\/media?parent=2509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}