https://hanson-wu.com/_next/static/chunks/168-0d8db17eee4c42b6.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[168],{2168:function(e,n,t){Promise.resolve().then(t.bind(t,2275)),Promise.resolve().then(t.t.bind(t,5878,23)),Promise.resolve().then(t.bind(t,1772)),Promise.resolve().then(t.bind(t,2193))},9607:function(e,n,t){"use strict";t.d(n,{Z:function(){return s}});var a=t(7437),r=t(3145),i=t(2193);function s(){return(0,a.jsx)("div",{className:"logo",children:(0,a.jsx)("div",{className:"logo__image",children:(0,a.jsx)("a",{title:"Hanson Wu | Portfolio",href:"https://hanson-wu.com",children:(0,a.jsx)(r.default,{src:i.default,width:140,height:38,alt:"Hanson Wu",className:"preload-img",priority:!0})})})})}},2275:function(e,n,t){"use strict";t.d(n,{default:function(){return d}});var a=t(7437),r=t(2265),i=t(7048),s=t(6498),A=t(2386),o=t(40),l=t(625);function c(e){let{children:n}=e,t=(0,r.useRef)(null),s=i.tq||i.Em;return(0,r.useEffect)(()=>{(0,l.x)()},[]),(0,a.jsx)(o.a5,{options:{smooth:!0,direction:"horizontal",tablet:{smooth:!s,direction:"vertical",...!s&&{breakpoint:0}},mobile:{smooth:!s,direction:"vertical",...!s&&{breakpoint:0}}},watch:[],containerRef:t,children:(0,a.jsx)("main",{className:"content","data-scroll-container":!0,ref:t,children:n})})}function d(e){let n,t,o,l,d,u,{children:m}=e,f=(0,r.useRef)(null),h=(0,r.useRef)(null),g=(0,r.useRef)(null),p=(0,r.useRef)(null),v=(0,r.useRef)(null),x=s.ZP.timeline(),w=s.ZP.timeline();return n=h.current,t=g.current,o=p.current,l=v.current,d=n,u=t,x.to({},.016,{repeat:-1,onRepeat:function(){n+=(o-n)/10,t+=(l-t)/10;let e=n-d,a=t-u;f&&x.set(f,{css:{left:n-50,top:t-50,transform:"rotateZ(".concat(Math.min(Math.max(e-a,-10),10),"deg)")}}),d=n,u=t}}),document.addEventListener("mousemove",function(e){o=e.pageX,l=e.pageY}),w.from(f,{duration:1.5,delay:2,opacity:0}

1,"-=1"),(0,r.useEffect)(()=>{let e=document.querySelector(".layout");i.tq&&e.classList.add("is-mobile"),i.Em&&e.classList.add("is-tablet"),"Firefox"===i.KC&&e.classList.add("is-firefox"),"Safari"===i.KC&&e.classList.add("is-safari")},[]),(0,a.jsxs)("div",{className:"layout",children:[(0,a.jsx)(A.Z,{}),(0,a.jsx)(c,{children:m}),(0,a.jsxs)("div",{className:"decorator",children:[(0,a.jsx)("div",{className:"noise"}),(0,a.jsx)("div",{className:"cursor-image",ref:e=>{f=e}})]})]})}},2386:function(e,n,t){"use strict";t.d(n,{Z:function(){return g}});var a=t(7437),r=t(2265),i=t(3145),s=t(4772),A=t.n(s),o=t(1151);function l(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("a",{target:"_blank",rel:"noreferrer noopener",href:"https://x.com/sunsquarez",title:"X",children:(0,a.jsx)(o.LCd,{})}),(0,a.jsx)("a",{target:"_blank",rel:"noreferrer noopener",href:"https://www.linkedin.com/in/hanson-wu-a61492107/",title:"LinkedIn",children:(0,a.jsx)(o.BUd,{})}),(0,a.jsx)("a",{target:"_blank",rel:"noreferrer noopener",href:"https://github.com/sunsquarez",title:"GitHub",children:(0,a.jsx)(o.hJX,{})})]})}var c={src:"/_next/static/media/hanson.568c4e3a.jpg",height:400,width:400,blurDataURL:"data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wgARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGAP//EABYQAQEBAAAAAAAAAAAAAAAAAAECAP/aAAgBAQABBQItnf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Bf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Bf//EABgQAAIDAAAAAAAAAAAAAAAAAAARATFR/9oACAEBAAY/AqnEz//EABcQAQEBAQAAAAAAAAAAAAAAAAERQQD/2gAIAQEAAT8hsIYN4be//9oADAMBAAIAAwAAABDz/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAwEBPxB//8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAgEBPxB//8QAGRABAAIDAAAAAAAAAAAAAAAAAREhADGR/9oACAEBAAE/EEkOpSTGg1Fdz//Z",blurWidth:8,blurHeight:8},d=t(2193);function u(e){let{isMenuOpened:n,onMenuToggle:t}=e;return(0,a.jsx)("header",{className:"sidebar",children:(0,a.jsxs)("div",{className:"sidebar__content",children:[(0,a.jsx)("button",{"aria-label":"toggle",className:A()("sidebar__menu-btn",{active:n}),onClick:t,children:(0,a.jsx)("div",{className:"sidebar__menu-line"})}),(0,a.jsx)("div",{className:"sidebar__alt-logo desktop-only",children:(0,a.jsx)("a",{title:"Hanson Wu | Portfolio",href:"https://hanson-wu.com",children:(0,a.jsx)(i.default,{src:c,width:48,height:48,alt:"Hanson Wu",className:"preload-img"})})}),(0,a.jsx)("div",{className:"sidebar__logo mobile-only",children:(0,a.jsx)("a",{title:"Hanson Wu | Portfolio",href:"https://hanson-wu.com",children:(0,a.jsx)(i.default,{src:d.default,width:140,height:38,alt:"Hanson Wu",className:"preload-img"})})}),(0,a.jsx)("div",{className:"sidebar__socials",children:(0,a.jsx)(l,{})})]})})}var m=t(9607);let f=[{id:"web3",title:"0xHanson.xyz",href:"https://0xhanson.xyz",imgs:["/images/menu/0xhanson1.png","/images/menu/0xhanson2.png"],alt:"0xHanson.xyz"},{id:"studio",title:"Web Design Studio",href:"https://theotherleaf.github.io/en",imgs:["/images/menu/theotherleaf1.png","/images/menu/theotherleaf2.png"],alt:"The Other Leaf"}];function h(e){let{isMenuOpened:n}=e;return(0,a.jsxs)("nav",{className:A()("menu",{active:n}),children:[(0,a.jsx)(m.Z,{}),(0,a.jsxs)("div",{className:"menu__container",children:[(0,a.jsx)("div",{className:"menu__label",children:"Choose a Portfolio"}),f.map((e,t)=>(0,a.jsx)("div",{className:A()("menu__item","animated-row-item-reverse",{"is-inview":n}),style:{transitionDelay:n?"".concat(.6+.1*t,"s"):"".concat(0+.1*t,"s")},children:(0,a.jsxs)("a",{target:"_blank",rel:"noreferrer noopener",href:e.href,title:e.title,children:[(0,a.jsx)("div",{className:"menu__title",children:e.title}),(0,a.jsx)("div",{className:"menu__images",children:(e.imgs||[]).map(n=>(0,a.jsx)(i.default,{src:n,width:n.includes("cssda")?72:126,height:72,alt:e.alt,className:"preload-img"},n))})]})},e.id)),(0,a.jsx)("div",{className:"menu__socials mobile-only",children:(0,a.jsx)(l,{})})]})]})}function g(){let[e,n]=(0,r.useState)(!1);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(u,{isMenuOpened:e,onMenuToggle:()=>{n(!e)}}),(0,a.jsx)(h,{isMenuOpened:e})]})}},1772:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var a=t(2265),r=a&&"object"==typeof a&&"default"in a?a:{default:a};!function(e){if(!e||"undefined"==typeof window)return;let n=document.createElement("style");n.setAttribute("type","text/css"),n.innerHTML=e,document.head.appendChild(n)}('.rfm-marquee-container {\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  width: var(--width);\n  transform: var(--transform);\n}\n.rfm-marquee-container:hover div {\n  animation-play-state: var(--pause-on-hover);\n}\n.rfm-marquee-container:active div {\n  animation-play-state: var(--pause-on-click);\n}\n\n.rfm-overlay {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.rfm-overlay::before, .rfm-overlay::after {\n  background: linear-gradient(to right, var(--gradient-color), transparent);\n  content: "";\n  height: 100%;\n  position: absolute;\n  width: var(--gradient-width);\n  z-index: 2;\n  pointer-events: none;\n  touch-action: none;\n}\n.rfm-overlay::after {\n  right: 0;\n  top: 0;\n  transform: rotateZ(180deg);\n}\n.rfm-overlay::before {\n  left: 0;\n  top: 0;\n}\n\n.rfm-marquee {\n  flex: 0 0 auto;\n  min-width: var(--min-width);\n  z-index: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  animation: scroll var(--duration) linear var(--delay) var(--iteration-count);\n  animation-play-state: var(--play);\n  animation-delay: var(--delay);\n  animation-direction: var(--direction);\n}\n@keyframes scroll {\n  0% {\n    transform: translateX(0%);\n  }\n  100% {\n    transform: translateX(-100%);\n  }\n}\n\n.rfm-initial-child-container {\n  flex: 0 0 auto;\n  display: flex;\n  min-width: auto;\n  flex-direction: row;\n  align-items: center;\n}\n\n.rfm-child {\n  transform: var(--transform);\n}');let i=a.forwardRef(function(e,n){let{style:t={},className:i="",autoFill:s=!1,play:A=!0,pauseOnHover:o=!1,pauseOnClick:l=!1,direction:c="left",speed:d=50,delay:u=0,loop:m=0,gradient:f=!1,gradientColor:h="white",gradientWidth:g=200,onFinish:p,onCycleComplete:v,onMount:x,children:w}=e,[b,E]=a.useState(0),[j,y]=a.useState(0),[B,N]=a.useState(1),[_,z]=a.useState(!1),Q=a.useRef(null),R=n||Q,C=a.useRef(null),O=a.useCallback(()=>

1{if(C.current&&R.current){let e=R.current.getBoundingClientRect(),n=C.current.getBoundingClientRect(),t=e.width,a=n.width;("up"===c||"down"===c)&&(t=e.height,a=n.height),s&&t&&a?N(a<t?Math.ceil(t/a):1):N(1),E(t),y(a)}},[s,R,c]);a.useEffect(()=>{if(_&&(O(),C.current&&R.current)){let e=new ResizeObserver(()=>O());return e.observe(R.current),e.observe(C.current),()=>{e&&e.disconnect()}}},[O,R,_]),a.useEffect(()=>{O()},[O,w]),a.useEffect(()=>{z(!0)},[]),a.useEffect(()=>{"function"==typeof x&&x()},[]);let k=a.useMemo(()=>s?j*B/d:j<b?b/d:j/d,[s,b,j,B,d]),D=a.useMemo(()=>Object.assign(Object.assign({},t),{"--pause-on-hover":!A||o?"paused":"running","--pause-on-click":!A||o&&!l||l?"paused":"running","--width":"up"===c||"down"===c?"100vh":"100%","--transform":"up"===c?"rotate(-90deg)":"down"===c?"rotate(90deg)":"none"}),[t,A,o,l,c]),M=a.useMemo(()=>({"--gradient-color":h,"--gradient-width":"number"==typeof g?"".concat(g,"px"):g}),[h,g]),P=a.useMemo(()=>({"--play":A?"running":"paused","--direction":"left"===c?"normal":"reverse","--duration":"".concat(k,"s"),"--delay":"".concat(u,"s"),"--iteration-count":m?"".concat(m):"infinite","--min-width":s?"auto":"100%"}),[A,c,k,u,m,s]),S=a.useMemo(()=>({"--transform":"up"===c?"rotate(90deg)":"down"===c?"rotate(-90deg)":"none"}),[c]),I=a.useCallback(e=>[...Array(Number.isFinite(e)&&e>=0?e:0)].map((e,n)=>r.default.createElement(a.Fragment,{key:n},a.Children.map(w,e=>r.default.createElement("div",{style:S,className:"rfm-child"},e)))),[S,w]);return _?r.default.createElement("div",{ref:R,style:D,className:"rfm-marquee-container "+i},f&&r.default.createElement("div",{style:M,className:"rfm-overlay"}),r.default.createElement("div",{className:"rfm-marquee",style:P,onAnimationIteration:v,onAnimationEnd:p},r.default.createElement("div",{className:"rfm-initial-child-container",ref:C},a.Children.map(w,e=>r.default.createElement("div",{style:S,className:"rfm-child"},e))),I(B-1)),r.default.createElement("div",{className:"rfm-marquee",style:P},I(B))):null});n.default=i},625:function(e,n,t){"use strict";t.d(n,{x:function(){return r}});let a=t(7123),r=()=>new Promise(e=>{a(document.querySelectorAll(".preload-img"),()=>{setTimeout(()=>{document.body.classList.remove("loading"),e()},[1200])})})},2193:function(e,n,t){"use strict";t.r(n),n.default={src:"/_next/static/media/logo.6a79eb70.png",height:63,width:230,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAACCAMAAABSSm3fAAAADFBMVEX////////////////1pQ5zAAAABHRSTlMiPxAw+oSBfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABhJREFUeJwFwQEBAAAIwyB2+3cWaLajLvIAuwASiwy3CgAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:2}}}]);