https://kyorine.vercel.app/content-creator

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Content Creator Portfolio, Kyorine Thunggono</title><meta name="author" content="Kyorine Thunggono"/><meta property="og:type" content="website"/><meta name="description" content="Short form video and brand campaign content by Kyorine Thunggono."/><meta property="og:title" content="Content Creator, Kyorine Thunggono"/><meta property="og:description" content="Brand campaigns and social first content that speaks Gen Z&#x27;s visual language."/><link rel="modulepreload" href="/assets/index-KR7JKyBE.js"/><link rel="modulepreload" href="/assets/content-creator-BEeoSCFM.js"/><link rel="modulepreload" href="/assets/content-creator.index-D4aMZKmp.js"/><link rel="modulepreload" href="/assets/ScrollReveal-DxlbWjQU.js"/><link rel="modulepreload" href="/assets/api-BOMWpYku.js"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="stylesheet" href="/assets/styles-IOy6M0U1.css"/></head><body><nav class="fixed top-0 left-0 right-0 z-50"><div aria-hidden="true" class="absolute inset-0 border-b border-border backdrop-blur-md transition-opacity duration-300 opacity-100" style="background-color:oklch(0.96 0.01 60 / 0.85)"></div><div class="relative z-10 max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"><a href="/" class="flex items-center gap-3"><span class="wax-seal text-lg">KT</span><span class="font-heading text-xl tracking-widest font-semibold hidden sm:block transition-colors duration-300 text-primary">KYORINE</span></a><div class="hidden lg:flex items-center gap-8"><a href="/" class="nav-link-love text-sm uppercase tracking-wider transition-colors duration-300 text-foreground/70 hover:text-primary">Home</a><a href="/about" class="nav-link-love text-sm uppercase tracking-wider transition-colors duration-300 text-foreground/70 hover:text-primary">About Me</a><a href="/graphic-design" class="nav-link-love text-sm uppercase tracking-wider transition-colors duration-300 text-foreground/70 hover:text-primary">Graphic Design</a><a data-status="active" class="nav-link-love text-sm uppercase tracking-wider transition-colors duration-300 text-foreground/70 hover:text-primary text-primary" href="/content-creator" aria-current="page">Content Creator</a><a href="/photography" class="nav-link-love text-sm uppercase tracking-wider transition-colors duration-300 text-foreground/70 hover:text-primary">Photography</a><a href="/modelling" class="nav-link-love text-sm uppercase tracking-wider transition-colors duration-300 text-foreground/70 hover:text-primary">Modelling</a><a href="/social-media" class="nav-link-love text-sm uppercase tracking-wider transition-colors duration-300 text-foreground/70 hover:text-primary">Social Media</a></div><button class="lg:hidden flex flex-col gap-1.5 p-2" aria-label="Toggle menu"><span class="block w-6 h-px transition-all duration-300 bg-foreground "></span><span class="block w-6 h-px transition-all duration-300 bg-foreground "></span><span class="block w-6 h-px transition-all duration-300 bg-foreground "></span></button></div></nav><main class="pt-[72px]"><!--$--><div><section class="py-24 px-6 bg-linen"><div class="max-w-5xl mx-auto text-center"><div class="reveal-on-scroll "><span class="font-script text-gold text-xl">Portfolio</span><h1 class="font-heading text-5xl md:text-6xl text-primary mt-3 font-light tracking-wide">Content Creator</h1><p class="mt-6 text-muted-foreground max-w-2xl mx-auto leading-relaxed">Creating short form videos, brand campaigns, and social first content.</p><div class="lace-divider-ornate max-w-xs mx-auto mt-6"><span class="text-gold text-xs">❀</span></div></div></div></section><section class="pt-10 md:pt-14 pb-24 px-6"><div class="max-w-7xl mx-auto"><div class="flex items-center justify-between mb-6"><button type="button" aria-label="Show previous cards" class="h-11 w-11 rounded-full border border-primary text-primary flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"></path></svg></button><p class="text-xs md:text-sm tracking-[0.18em] uppercase text-muted-foreground font-heading">1<!-- --> / <!-- -->1</p><button type="button" aria-label="Show next cards" class="h-11 w-11 rounded-full border border-primary text-primary flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg></button></div><div class="grid grid-cols-1 md:grid-cols-3 gap-6 justify-items-center"><p class="col-span-full text-center text-muted-foreground">Loading projects...</p></div></div></section><section class="py-14 px-6 bg-card/70 border-y border-border/60 text-center"><div class="reveal-on-scroll "><span class="font-script text-gold text-2xl">@pikyochu on TikTok</span>

1<p class="mt-3 text-foreground/70">10K followers · 298K+ views</p></div></section><section class="py-16 px-6 text-center border-t border-border"><a href="/" class="font-heading text-sm tracking-widest uppercase text-primary hover:text-gold transition-colors">← Back to Home</a></section></div>

1<script>(function(t){let s;try{s=JSON.parse(sessionStorage.getItem(t.storageKey)||"{}")}catch(e){console.error(e);return}const c=t.key||window.history.state?.__TSR_key,r=c?s[c]:void 0;if(t.shouldScrollRestoration&&r&&typeof r=="object"&&Object.keys(r).length>0){for(const e in r){const o=r[e];if(!o||typeof o!="object")continue;const l=o.scrollX,i=o.scrollY;if(!(!Number.isFinite(l)||!Number.isFinite(i))){if(e==="window")window.scrollTo({top:i,left:l,behavior:t.behavior});else if(e){let n;try{n=document.querySelector(e)}catch{continue}n&&(n.scrollLeft=l,n.scrollTop=i)}}}return}const a=window.location.hash.split("#",2)[1];if(a){const e=window.history.state?.__hashScrollIntoViewOptions??!0;if(e){const o=document.getElementById(a);o&&o.scrollIntoView(e)}return}window.scrollTo({top:0,left:0,behavior:t.behavior})})({"storageKey":"tsr-scroll-restoration-v1_3","shouldScrollRestoration":true});document.currentScript.remove()</script>

1<!--/$--></main><footer class="bg-linen-crimson text-primary-foreground"><div class="max-w-7xl mx-auto px-6 py-16"><div class="flex flex-col items-center text-center gap-8"><div class="wax-seal !w-16 !h-16 text-2xl animate-float-petal">KT</div><p class="font-script text-2xl text-gold">With love, Kyorine</p><div class="lace-divider-ornate w-full max-w-xs"><span class="font-script text-gold text-sm">✦</span></div><div class="flex flex-wrap justify-center gap-6 text-sm tracking-wider opacity-80"><a href="/" class="hover:text-gold transition-colors">Home</a><a href="/about" class="hover:text-gold transition-colors">About</a><a href="/graphic-design" class="hover:text-gold transition-colors">Graphic Design</a><a class="hover:text-gold transition-colors active" href="/content-creator" data-status="active" aria-current="page">Content Creator</a><a href="/photography" class="hover:text-gold transition-colors">Photography</a><a href="/modelling" class="hover:text-gold transition-colors">Modelling</a></div><div class="text-center space-y-2"><p class="text-xs opacity-50 tracking-wider">© <!-- -->2026<!-- --> Kyorine Thunggono. All rights reserved.</p><p class="text-xs opacity-50 tracking-normal">Built with ♥ by <a href="https://www.ascendweb.id" target="_blank" rel="noreferrer" class="hover:text-gold underline-offset-4 hover:underline">Ascendweb.id</a></p></div></div></div></footer>

1<script class="$tsr" id="$tsr-stream-barrier">(self.$R=self.$R||{})["tsr"]=[];self.$_TSR={h(){this.hydrated=!0,this.c()},e(){this.streamEnded=!0,this.c()},c(){this.hydrated&&this.streamEnded&&(delete self.$_TSR,delete self.$R.tsr)},p(e){this.initialized?e():this.buffer.push(e)},buffer:[]};$_TSR.router=($R=>$R[0]={manifest:$R[1]={routes:$R[2]={__root__:$R[3]={preloads:$R[4]=["/assets/index-KR7JKyBE.js"],assets:$R[5]=[$R[6]={tag:"script",attrs:$R[7]={type:"module",async:!0},children:"import(\"/assets/index-KR7JKyBE.js\")"}]},"/content-creator":$R[8]={preloads:$R[9]=["/assets/content-creator-BEeoSCFM.js"]},"/content-creator/":$R[10]={preloads:$R[11]=["/assets/content-creator.index-D4aMZKmp.js","/assets/ScrollReveal-DxlbWjQU.js","/assets/api-BOMWpYku.js"]}}},matches:$R[12]=[$R[13]={i:"__root__�",u:1791011531811,s:"success",ssr:!0},$R[14]={i:"�content-creator�content-creator",u:1791011531817,s:"success",ssr:!0},$R[15]={i:"�content-creator��content-creator�",u:1791011531817,s:"success",ssr:!0}],lastMatchId:"�content-creator��content-creator�"})($R["tsr"]);$_TSR.e();document.currentScript.remove()</script>

1<script type="module" async="">import("/assets/index-KR7JKyBE.js")</script>

1</body></html>