[{"data":1,"prerenderedAt":2486},["ShallowReactive",2],{"project-envelope":3,"projects-nav":53,"projects-all":389},{"id":4,"title":5,"body":6,"category":35,"components":36,"cover":37,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":39,"navigation":45,"path":46,"preview":36,"seo":47,"slug":48,"stem":49,"summary":50,"video":51,"__hash__":52},"projects/projects/envelope.md","Envelope",{"type":7,"value":8,"toc":31},"minimark",[9,13,26],[10,11],"project-envelope",{":autoPlay":12},"true",[14,15],"opposite-direction-marquees",{":durationSec":16,":fontSizeVw":17,":iconGapVw":18,":iconSizeVw":19,":items":20,":meta":21,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":5,"separatorIcon":24,"theme":25},"50","12","3","3.5","[\"Vite\",\"GSAP\",\"SVG\",\"Illustrator\",\"Masks\"]","[\"Year 2019\",\"Prototype\"]","160","2","uil:bolt","light",[27,28],"simultaneous-words",{":pinHeightVh":29,"paragraph":30,"theme":25},"320","Interactive envelope-opening prototype for virtual wish cards and invitations. Built with SVG, GSAP, Illustrator masks, and Vite. The plan was to use the blank card at the end and put a canvas based design on top of it",{"title":32,"searchDepth":33,"depth":33,"links":34},"",2,[],"custom-animation",null,"/assets/medias/envelope-thumb.svg","md",{"tags":40,"date":44},[41,42,43],"animation","gsap","svg","2019-12-01",true,"/projects/envelope",{"title":5,"description":32},"envelope","projects/envelope","Interactive envelope-opening prototype for virtual wish cards and invitations. Built with SVG, GSAP, Illustrator masks, and Vite.","/movies/web-optimized/envelope.mp4","zClwYr4B6bB1kVHAyZ8GFIMpY9jbxYJqDcSODZvsJpw",[54],{"title":55,"path":56,"stem":57,"children":58,"page":388},"Projects","/projects","projects",[59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304,308,312,316,320,324,328,332,336,340,344,348,352,356,360,364,368,372,376,380,384],{"title":60,"path":61,"stem":62},"314","/projects/site314","projects/site314",{"title":64,"path":65,"stem":66},"AeroFlux","/projects/aeroflux","projects/aeroflux",{"title":68,"path":69,"stem":70},"Apparel Impact","/projects/apparelimpact","projects/apparelimpact",{"title":72,"path":73,"stem":74},"ArtTech","/projects/arttech","projects/arttech",{"title":76,"path":77,"stem":78},"ArtistX","/projects/artistx","projects/artistx",{"title":80,"path":81,"stem":82},"Audiologist","/projects/audiologist","projects/audiologist",{"title":84,"path":85,"stem":86},"Bartender","/projects/bartender","projects/bartender",{"title":88,"path":89,"stem":90},"Bat Out of Hell","/projects/bat-out-of-hell","projects/bat-out-of-hell",{"title":92,"path":93,"stem":94},"Berkan","/projects/berkan","projects/berkan",{"title":96,"path":97,"stem":98},"Blood Bank Status","/projects/blood","projects/blood",{"title":100,"path":101,"stem":102},"Booking Engine","/projects/bookingengine","projects/bookingengine",{"title":104,"path":105,"stem":106},"CB PCB - Custom Branding","/projects/cb-pcb","projects/cb-pcb",{"title":108,"path":109,"stem":110},"Catalyst Consortium","/projects/catalyst","projects/catalyst",{"title":112,"path":113,"stem":114},"Do It For Jack","/projects/doitforjack","projects/doitforjack",{"title":116,"path":117,"stem":118},"Dobra Hipoteka","/projects/dobra-hipoteka","projects/dobra-hipoteka",{"title":5,"path":46,"stem":49},{"title":121,"path":122,"stem":123},"Farm Table","/projects/farm-table","projects/farm-table",{"title":125,"path":126,"stem":127},"Fidelis Elevate","/projects/fidelis-elevate","projects/fidelis-elevate",{"title":129,"path":130,"stem":131},"Fort Privacy","/projects/fort-privacy","projects/fort-privacy",{"title":133,"path":134,"stem":135},"Frozen - Brisbane","/projects/frozen-bris","projects/frozen-bris",{"title":137,"path":138,"stem":139},"Frozen - Elza","/projects/frozen-elza","projects/frozen-elza",{"title":141,"path":142,"stem":143},"GreenRubino - Phones Down","/projects/greenrubino-phonesdown","projects/greenrubino-phonesdown",{"title":145,"path":146,"stem":147},"GreenRubino - Swipe","/projects/greenrubino-swipe","projects/greenrubino-swipe",{"title":149,"path":150,"stem":151},"Ground-up build","/projects/auto-service-platform","projects/auto-service-platform",{"title":153,"path":154,"stem":155},"HEMA - Sinterklaas","/projects/hema","projects/hema",{"title":157,"path":158,"stem":159},"HQ Bio","/projects/hqbio","projects/hqbio",{"title":161,"path":162,"stem":163},"Halftone Lab","/projects/halftone-lab","projects/halftone-lab",{"title":165,"path":166,"stem":167},"Harry Potter - The Cursed Child","/projects/harry-potter-the-cursed-child","projects/harry-potter-the-cursed-child",{"title":169,"path":170,"stem":171},"Harry Potter Christmas","/projects/harry-potter-christmas","projects/harry-potter-christmas",{"title":173,"path":174,"stem":175},"Horridus Is Coming","/projects/horridus-is-coming","projects/horridus-is-coming",{"title":177,"path":178,"stem":179},"Iceberg Web Design","/projects/iceberg-webdesign","projects/iceberg-webdesign",{"title":181,"path":182,"stem":183},"Icon Bars","/projects/icon-bars","projects/icon-bars",{"title":185,"path":186,"stem":187},"Icon Ladder","/projects/icon-ladder","projects/icon-ladder",{"title":189,"path":190,"stem":191},"Icon Laptop","/projects/icon-laptop","projects/icon-laptop",{"title":193,"path":194,"stem":195},"Icon Message","/projects/icon-message","projects/icon-message",{"title":197,"path":198,"stem":199},"Icon Monitor","/projects/icon-monitor","projects/icon-monitor",{"title":201,"path":202,"stem":203},"Icon Phone","/projects/icon-phone","projects/icon-phone",{"title":205,"path":206,"stem":207},"InfOrca","/projects/inforca","projects/inforca",{"title":209,"path":210,"stem":211},"Interview","/projects/interview","projects/interview",{"title":213,"path":214,"stem":215},"KBS Graph Slider","/projects/graph-slider","projects/graph-slider",{"title":217,"path":218,"stem":219},"LNY - Snoqualmie Casino","/projects/lny","projects/lny",{"title":221,"path":222,"stem":223},"Life Balance Congress","/projects/life-balance-congress","projects/life-balance-congress",{"title":225,"path":226,"stem":227},"Lion","/projects/lion","projects/lion",{"title":229,"path":230,"stem":231},"MCA Australia - Cornelia Parker","/projects/mca-australia-cornelia-parker","projects/mca-australia-cornelia-parker",{"title":233,"path":234,"stem":235},"Melbourne Museum - Tyama","/projects/melbourne-museum-tyama","projects/melbourne-museum-tyama",{"title":237,"path":238,"stem":239},"Michael Arthur","/projects/michael-arthur","projects/michael-arthur",{"title":241,"path":242,"stem":243},"Milk","/projects/milk","projects/milk",{"title":245,"path":246,"stem":247},"Molki","/projects/molki","projects/molki",{"title":249,"path":250,"stem":251},"Molki Design","/projects/molkidesign","projects/molkidesign",{"title":253,"path":254,"stem":255},"Museums Victoria - Stories","/projects/museums-victoria-stories","projects/museums-victoria-stories",{"title":257,"path":258,"stem":259},"Nuxt Portfolio GSAP","/projects/nuxt-gsap-portfolio","projects/nuxt-gsap-portfolio",{"title":261,"path":262,"stem":263},"PIMA - Medical Institute","/projects/pima","projects/pima",{"title":265,"path":266,"stem":267},"Page 404","/projects/page-404","projects/page-404",{"title":269,"path":270,"stem":271},"Pixality","/projects/pixality","projects/pixality",{"title":273,"path":274,"stem":275},"Player Prototype","/projects/player-prototype","projects/player-prototype",{"title":277,"path":278,"stem":279},"Polish plus speed","/projects/architecture-studio","projects/architecture-studio",{"title":281,"path":282,"stem":283},"Pumpehuset","/projects/pumpehuset","projects/pumpehuset",{"title":285,"path":286,"stem":287},"Pushups Tracker","/projects/pushups-tracker","projects/pushups-tracker",{"title":289,"path":290,"stem":291},"Quorum","/projects/quorum","projects/quorum",{"title":293,"path":294,"stem":295},"Releasd","/projects/releasd","projects/releasd",{"title":297,"path":298,"stem":299},"Riverscape","/projects/riverscape","projects/riverscape",{"title":301,"path":302,"stem":303},"SCCA - Seattle Cancer Care Alliance","/projects/scca","projects/scca",{"title":305,"path":306,"stem":307},"SKCAR - Seattle King County Realtors","/projects/skcar","projects/skcar",{"title":309,"path":310,"stem":311},"SPTHE - Proton Beam Therapy","/projects/spthe","projects/spthe",{"title":313,"path":314,"stem":315},"SSRTA - Explore Campaign","/projects/ssrta","projects/ssrta",{"title":317,"path":318,"stem":319},"Settings - Winter Break","/projects/winterbreak","projects/winterbreak",{"title":321,"path":322,"stem":323},"Snoqualmie Casino","/projects/snocs","projects/snocs",{"title":325,"path":326,"stem":327},"SoundTransit - Orca Card","/projects/soundtransit-orcacard","projects/soundtransit-orcacard",{"title":329,"path":330,"stem":331},"SoundTransit - Punishing Commute","/projects/soundtransit-punishing","projects/soundtransit-punishing",{"title":333,"path":334,"stem":335},"Spectrometer","/projects/spectrometer","projects/spectrometer",{"title":337,"path":338,"stem":339},"Spectrum","/projects/spectrum","projects/spectrum",{"title":341,"path":342,"stem":343},"Tabellae","/projects/tabellae","projects/tabellae",{"title":345,"path":346,"stem":347},"The Tina Turner Musical","/projects/the-tina-turner-musical","projects/the-tina-turner-musical",{"title":349,"path":350,"stem":351},"Trefl Sport","/projects/trefl-sport","projects/trefl-sport",{"title":353,"path":354,"stem":355},"Vibeuu","/projects/vibeuu","projects/vibeuu",{"title":357,"path":358,"stem":359},"We Push Buttons","/projects/wepushbuttons","projects/wepushbuttons",{"title":361,"path":362,"stem":363},"Wobi","/projects/wobi","projects/wobi",{"title":365,"path":366,"stem":367},"Wordpress Widget","/projects/wordpress-widget","projects/wordpress-widget",{"title":369,"path":370,"stem":371},"Working Jobs Vyne","/projects/working-jobs-vyne","projects/working-jobs-vyne",{"title":373,"path":374,"stem":375},"Yamahata","/projects/yamahata","projects/yamahata",{"title":377,"path":378,"stem":379},"Zaksa","/projects/zaksa","projects/zaksa",{"title":381,"path":382,"stem":383},"Zap Black","/projects/zap-black","projects/zap-black",{"title":385,"path":386,"stem":387},"Śliwka w Kompot","/projects/sliwka-w-kompot","projects/sliwka-w-kompot",false,[390,422,462,508,536,564,589,631,659,688,713,740,766,790,818,841,870,884,908,933,959,983,1006,1029,1052,1073,1109,1132,1154,1180,1204,1230,1253,1276,1301,1324,1346,1367,1388,1412,1435,1462,1487,1509,1531,1553,1575,1597,1622,1651,1674,1703,1730,1752,1780,1806,1835,1865,1898,1925,1952,1974,1998,2020,2043,2063,2084,2106,2128,2152,2173,2195,2223,2244,2269,2293,2320,2341,2367,2390,2414,2436,2460],{"id":391,"title":64,"body":392,"category":409,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":410,"navigation":45,"path":65,"preview":36,"seo":417,"slug":418,"stem":66,"summary":419,"video":420,"__hash__":421},"projects/projects/aeroflux.md",{"type":7,"value":393,"toc":407},[394,397,403],[395,396],"project-aeroflux",{":autoPlay":12},[14,398],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":400,":meta":401,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":64,"separatorIcon":402,"theme":25},"8","[\"GSAP\",\"DrawSVG\",\"SVG Animation\",\"Particles.js\",\"Drone Tech\",\"Landing Page\"]","[\"Year 2018\",\"GSAP + DrawSVG + Particles.js\",\"Drone Marketing Animation\"]","uil:plane-fly",[27,404],{":pinHeightVh":405,"paragraph":406,"theme":25},"420","AeroFlux is a simple SVG logo animation crafted for a drone related company. The animation features progressive stroke reveals using DrawSVG, dynamic particle backgrounds, and intricate GSAP timelines to showcase the brand's innovation in aerial technology.",{"title":32,"searchDepth":33,"depth":33,"links":408},[],"logo-animation",{"tags":411,"date":416},[43,42,412,413,414,415],"drawsvg","particles","drone","marketing","2018-01-01",{"title":64,"description":32},"aeroflux","Dynamic drone marketing animation with DrawSVG progressive reveals, particle effects, and smooth GSAP timelines. Created for an innovative drone technology brand's landing page.","/movies/web-optimized/aeroflux.mp4","SYwLD7MflPiplnMja4gcXTFiItyFNC11jxo9UovspqM",{"id":423,"title":68,"body":424,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":448,"liveLinkLabel":36,"meta":449,"navigation":45,"path":69,"preview":36,"seo":459,"slug":460,"stem":70,"summary":444,"video":431,"__hash__":461},"projects/projects/apparelimpact.md",{"type":7,"value":425,"toc":445},[426,432,436,439,442],[427,428],"hero-video",{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":431},"cover","auto","/movies/web-optimized/apparelimpact.mp4",[14,433],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":434,":meta":435,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":68,"separatorIcon":24,"theme":25},"[\"WordPress\",\"Scrollytelling\",\"Gallery Animation\",\"Non-Profit\"]","[\"Non-profit\",\"WordPress + Scrollytelling\",\"Clothing waste awareness\"]",[427,437],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":438},"/movies/web-optimized/apparelimpact-gallery.mp4",[427,440],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":441},"/movies/web-optimized/apparelimpact-horizontal.mp4",[27,443],{":pinHeightVh":405,"paragraph":444,"theme":25},"I built the scrolling sections and interactive components for this non-profit fighting clothing waste. Nice long scroll, gallery animation in there too ^^",{"title":32,"searchDepth":33,"depth":33,"links":446},[],"website","https://apparelimpact.org/",{"tags":450,"date":458},[451,452,453,454,455,456,457],"webdesign","wordpress","scrollytelling","non-profit","frontend","tastysites","portfolio","2020-01-01",{"title":68,"description":32},"apparelimpact","dB_nh1WARE6zWHt-PDNXq-hr7NnUPkL5wYyJjK_aKhs",{"id":463,"title":277,"body":464,"category":447,"components":36,"cover":494,"ctaLabel":36,"description":32,"extension":38,"liveLink":495,"liveLinkLabel":496,"meta":497,"navigation":45,"path":278,"preview":36,"seo":504,"slug":505,"stem":279,"summary":506,"video":468,"__hash__":507},"projects/projects/architecture-studio.md",{"type":7,"value":465,"toc":492},[466,469,473,476,480,483,486,489],[427,467],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":468},"/movies/web-optimized/architecture-studio.mp4",[14,470],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":471,":meta":472,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":277,"separatorIcon":24,"theme":25},"[\"WordPress\",\"GSAP ScrollTrigger\",\"Barba.js\",\"Lenis\",\"Matter.js\"]","[\"Year 2026\",\"Architecture and Workplace Design\",\"Role - Front-end Developer\"]",[27,474],{":pinHeightVh":405,"paragraph":475,"theme":25},"A brand-showcase website for an architecture and workplace-design consultancy. Role, front-end developer. A custom WordPress theme carries page transitions, scroll-driven animation, smooth scroll and a physics interaction, on a site its owners edit themselves. It scores 99 on desktop PageSpeed with all motion on.",[427,477],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":479},"metadata","/movies/web-optimized/architecture-studio-shapes.mp4",[427,481],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":482},"/movies/web-optimized/architecture-studio-services-stack.mp4",[427,484],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":485},"/movies/web-optimized/architecture-studio-page-transition.mp4",[427,487],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":488},"/movies/web-optimized/architecture-studio-projects-scroll.mp4",[427,490],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":491},"/movies/web-optimized/architecture-studio-footer-logo.mp4",{"title":32,"searchDepth":33,"depth":33,"links":493},[],"/assets/medias/architecture-studio-thumb.jpg","https://ronnsquare.fr/","View live site",{"tags":498,"date":503},[452,42,499,500,501,502],"scrolltrigger","lenis","barba","matterjs","2026-08-01",{"title":277,"description":32},"architecture-studio","Site for an architecture and workplace-design consultancy. Custom WordPress theme with page transitions, scroll-driven animation, smooth scroll and a physics interaction, on a site its owners edit themselves. 99 on desktop PageSpeed with all motion on.","dvYk6rOXSWuvHHGnI6sL0AeM1kKjn-ipX8nbw9NiGuw",{"id":509,"title":76,"body":510,"category":447,"components":36,"cover":524,"ctaLabel":36,"description":32,"extension":38,"liveLink":525,"liveLinkLabel":36,"meta":526,"navigation":45,"path":77,"preview":36,"seo":532,"slug":533,"stem":78,"summary":534,"video":514,"__hash__":535},"projects/projects/artistx.md",{"type":7,"value":511,"toc":522},[512,515,519],[427,513],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":514},"/movies/web-optimized/artistx.mp4",[14,516],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":517,":meta":518,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":76,"separatorIcon":24,"theme":25},"[\"WordPress\",\"ACF\",\"GSAP\",\"ScrollTrigger\",\"Canvas Animations\",\"Smooth Scrolling\"]","[\"Year 2022\",\"Custom ACF WordPress\",\"Canvas + GSAP + Smooth Scroll\"]",[27,520],{":pinHeightVh":405,"paragraph":521,"theme":25},"ArtistX is a custom ACF WordPress theme featuring performant canvas animations, smooth scrolling, and scroll-triggered interactions.",{"title":32,"searchDepth":33,"depth":33,"links":523},[],"/assets/medias/ax-thumb.svg","https://ax.tastysites.pl/",{"tags":527,"date":531},[452,528,529,42,530,457],"acf","canvas","scroll","2025-01-15",{"title":76,"description":32},"artistx","Custom ACF WordPress website with canvas animations, smooth scrolling, and scroll-driven effects.","4aQ0hNvBOFhid8hJFeBLAS_nMNiRoO3yXPVYInDbqMI",{"id":537,"title":72,"body":538,"category":409,"components":36,"cover":552,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":553,"navigation":45,"path":73,"preview":36,"seo":559,"slug":560,"stem":74,"summary":561,"video":562,"__hash__":563},"projects/projects/arttech.md",{"type":7,"value":539,"toc":550},[540,543,547],[541,542],"project-art-tech",{":autoPlay":12},[14,544],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":545,":meta":546,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":72,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Glitch Effects\",\"Cyberpunk Motion\",\"Next.js\",\"Logo Animation\"]","[\"Year 2024\",\"GSAP + SVG + Next.js\",\"Logo Animation\"]",[27,548],{":pinHeightVh":405,"paragraph":549,"theme":25},"ArtTech is a cyberpunk-inspired SVG logo animation featuring dynamic path motion, glitch distortions, and layered GSAP timelines. It was delivered for a cryptocurrency company and embedded on a Next.js landing page.",{"title":32,"searchDepth":33,"depth":33,"links":551},[],"/assets/medias/arttech-thumb.svg",{"tags":554,"date":558},[43,42,555,556,557],"logo","glitch","nextjs","2024-01-01",{"title":72,"description":32},"arttech","Cyberpunk-style SVG logo animation with dynamic movement, glitch effects, and GSAP timelines. Built for a cryptocurrency company landing page in Next.js.","/movies/web-optimized/art-tech.mp4","Czg-s3SoxuctJXTbdGVXaT3fjNNzeyaYgH6uSZEZUr8",{"id":565,"title":80,"body":566,"category":35,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":581,"navigation":45,"path":81,"preview":36,"seo":584,"slug":585,"stem":82,"summary":586,"video":587,"__hash__":588},"projects/projects/audiologist.md",{"type":7,"value":567,"toc":579},[568,571,576],[569,570],"project-audiologist",{":autoPlay":12},[14,572],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":573,":meta":574,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":575,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"DrawSVG\",\"Wave Animation\",\"Non-linear Motion\",\"Interactive Slider\"]","[\"Year 2018\",\"GSAP + SVG + DrawSVG\",\"Custom Animation\"]","The Hearing Club",[27,577],{":pinHeightVh":405,"paragraph":578,"theme":25},"Custom Slider featuring smooth wave animations and non-linear motion graphics. Built for a hearing healthcare company, this animation combines organic SVG wave patterns with DrawSVG path animations",{"title":32,"searchDepth":33,"depth":33,"links":580},[],{"tags":582,"date":416},[41,42,43,412,583],"slider",{"title":80,"description":32},"animation-wave","Interactive slider with smooth wave animations and non-linear motion graphics. Built for a hearing healthcare company featuring organic SVG morphing, synchronized DrawSVG effects, and elegant transitions.","/movies/web-optimized/audiologist.mp4","qxqxg3q1dFHtJEgMLdw8qorC4ydCoqRR7NYF8ZrNxCE",{"id":590,"title":149,"body":591,"category":447,"components":36,"cover":620,"ctaLabel":36,"description":32,"extension":38,"liveLink":621,"liveLinkLabel":496,"meta":622,"navigation":45,"path":150,"preview":36,"seo":627,"slug":628,"stem":151,"summary":629,"video":595,"__hash__":630},"projects/projects/auto-service-platform.md",{"type":7,"value":592,"toc":618},[593,596,600,603,606,609,612,615],[427,594],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":595},"/movies/web-optimized/auto-service-platform.mp4",[14,597],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":598,":meta":599,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":149,"separatorIcon":24,"theme":25},"[\"WordPress\",\"GSAP\",\"Three.js\",\"Page Transitions\",\"Smooth Scroll\",\"Core Web Vitals\"]","[\"Year 2026\",\"SaaS Marketing Site\",\"Role - Front-end Developer\"]",[27,601],{":pinHeightVh":405,"paragraph":602,"theme":25},"A marketing site for a SaaS product company, built from the ground up. Role, front-end developer. First a static front end in Vite, Nunjucks and Sass, then a custom WordPress theme the owners edit. 14 page templates and 50 animated sections, with page transitions, smooth scroll, a Three.js scene and a custom animated preloader. Later, a performance pass on the same build took mobile largest contentful paint from 21.1 s to 3.0 s, page weight from 21.2 MB to 5.8 MB and blocking time from 310 ms to 95 ms.",[427,604],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":605},"/movies/web-optimized/auto-service-platform-hero-reveal.mp4",[427,607],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":608},"/movies/web-optimized/auto-service-platform-howto.mp4",[427,610],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":611},"/movies/web-optimized/auto-service-platform-horizontal-scroll.mp4",[427,613],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":614},"/movies/web-optimized/auto-service-platform-map-title.mp4",[427,616],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":617},"/movies/web-optimized/auto-service-platform-page-transition.mp4",{"title":32,"searchDepth":33,"depth":33,"links":619},[],"/assets/medias/auto-service-platform-thumb.jpg","https://driveberry.fr/",{"tags":623,"date":503},[452,42,624,625,626],"threejs","performance","core-web-vitals",{"title":149,"description":32},"auto-service-platform","Marketing site for a SaaS product company, built from the ground up: 14 page templates and 50 animated sections in a custom WordPress theme, with GSAP, Three.js and a custom animated preloader. A later performance pass on the same build took mobile largest contentful paint from 21.1 s to 3.0 s and page weight from 21.2 MB to 5.8 MB.","wlQrGZxbi_cUTWAySz3kzfGSjaRf0GhUFD7zQw9fC2g",{"id":632,"title":84,"body":633,"category":35,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":649,"navigation":45,"path":85,"preview":36,"seo":654,"slug":655,"stem":86,"summary":656,"video":657,"__hash__":658},"projects/projects/bartender.md",{"type":7,"value":634,"toc":647},[635,640,644],[636,637],"project-bartender",{":pinHeightVh":638,":scrub":639,":useScrollTrigger":12},"500","1",[14,641],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":642,":meta":643,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":84,"separatorIcon":24,"theme":25},"[\"GSAP\",\"MorphSVG\",\"DrawSVG\",\"ScrollTrigger\",\"Scroll-Driven Animation\",\"SVG Animation\"]","[\"Year 2019\",\"Feature Showcase Animation\",\"GSAP MorphSVG + DrawSVG\"]",[27,645],{":pinHeightVh":405,"paragraph":646,"theme":25},"Bartender Free Edition feature showcase - a scroll-driven animation where three product features are revealed one by one. An SVG illustration morphs between scenes as you scroll, powered by GSAP MorphSVGPlugin and DrawSVGPlugin.",{"title":32,"searchDepth":33,"depth":33,"links":648},[],{"tags":650,"date":653},[42,499,43,651,412,652],"morphsvg","scroll-animation","2019-06-15",{"title":84,"description":32},"bartender","Scroll-driven product feature animation for Bartender Free Edition, built with GSAP ScrollTrigger, MorphSVGPlugin, and DrawSVGPlugin.","/movies/web-optimized/bartender.mp4","ZVjbZcb2SsYKc0VMTYN8yxGeNsX0P_qCp65ecI4MPFA",{"id":660,"title":88,"body":661,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":676,"liveLinkLabel":36,"meta":677,"navigation":45,"path":89,"preview":36,"seo":684,"slug":685,"stem":90,"summary":686,"video":665,"__hash__":687},"projects/projects/bat-out-of-hell.md",{"type":7,"value":662,"toc":674},[663,666,671],[427,664],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":665},"/movies/web-optimized/bat-out-of-hell.mp4",[14,667],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":668,":meta":669,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":88,"separatorIcon":24,"theme":670},"[\"JavaScript\",\"Scroll Animations\",\"Video Embed\",\"Lightbox Gallery\",\"Landing Page\"]","[\"Year 2020\",\"Musical Tour Landing Page\",\"JavaScript + Scroll Animations\"]","dark",[27,672],{":pinHeightVh":405,"paragraph":673,"theme":25},"Bat Out of Hell is the Australian tour landing page for Jim Steinman's rock musical. Features scroll-triggered animations, embedded video, lightbox gallery, and a high-energy dark aesthetic matching the show's intensity",{"title":32,"searchDepth":33,"depth":33,"links":675},[],"https://bat-out-of-hell.netlify.app/",{"tags":678,"date":683},[679,652,680,681,682],"javascript","landing-page","entertainment","web-animation","2020-01-15",{"title":88,"description":32},"bat-out-of-hell","Australian tour page for the Bat Out of Hell rock musical with scroll-triggered animations, embedded video, and a high-energy visual design.","KMp3b2wfT6BmzeKNWQffmYF0MLiBBH9Q3n-eX1ry1dc",{"id":689,"title":92,"body":690,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":704,"liveLinkLabel":36,"meta":705,"navigation":45,"path":93,"preview":36,"seo":709,"slug":710,"stem":94,"summary":711,"video":694,"__hash__":712},"projects/projects/berkan.md",{"type":7,"value":691,"toc":702},[692,695,699],[427,693],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":694},"/movies/web-optimized/berkan.mp4",[14,696],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":697,":meta":698,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":92,"separatorIcon":24,"theme":670},"[\"GSAP\",\"ScrollTrigger\",\"Scroll Animation\",\"SVG Line Animation\",\"Restaurant Experience\"]","[\"Year 2024\",\"Scroll-Driven Restaurant Site\",\"GSAP ScrollTrigger\"]",[27,700],{":pinHeightVh":405,"paragraph":701,"theme":25},"Berkan is a scroll-driven restaurant experience where an animated line guides you through all the dishes as you scroll. Each dish gets its own reveal moment, creating an interactive journey through the menu powered by GSAP ScrollTrigger.",{"title":32,"searchDepth":33,"depth":33,"links":703},[],"https://berkan-scroll-animaitons.netlify.app/",{"tags":706,"date":708},[42,499,652,707,682],"restaurant","2024-01-15",{"title":92,"description":32},"berkan","Scroll-driven restaurant website with an animated line guiding you through each dish, built with GSAP ScrollTrigger.","tYI4N1iVrmXic10Be64zjIdg_-jbGYVJm2frWx_i3Ws",{"id":714,"title":96,"body":715,"category":35,"components":36,"cover":729,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":730,"navigation":45,"path":97,"preview":36,"seo":735,"slug":736,"stem":98,"summary":737,"video":738,"__hash__":739},"projects/projects/blood.md",{"type":7,"value":716,"toc":727},[717,720,724],[718,719],"project-blood",{":autoPlay":12},[14,721],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":722,":meta":723,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":96,"separatorIcon":24,"theme":25},"[\"WordPress\",\"GSAP\",\"SVG\",\"ClipPath\",\"Widget\",\"Medical Dashboard\"]","[\"Year 2018\",\"WordPress Widget\",\"Medical Institution\"]",[27,725],{":pinHeightVh":405,"paragraph":726,"theme":25},"WordPress SVG widget designed for a medical institution managing blood inventory across multiple hospitals. Using GSAP and clipPath masking, it visualizes real-time availability of all blood types with configurable animation of fill levels.",{"title":32,"searchDepth":33,"depth":33,"links":728},[],"/assets/medias/blood-thumb.svg",{"tags":731,"date":734},[452,42,43,732,733],"clippath","widget","2018-06-01",{"title":96,"description":32},"blood","Real-time blood bank status visualization widget with animated SVG drops and clipPath masking. Built for a medical institution to display available blood inventory across hospitals.","/movies/web-optimized/blood.mp4","gFQ1u8ha2cGJFWXtRlxrlEiscZHGhR-tU5oHeVanTRs",{"id":741,"title":100,"body":742,"category":35,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":757,"navigation":45,"path":101,"preview":36,"seo":761,"slug":762,"stem":102,"summary":763,"video":764,"__hash__":765},"projects/projects/bookingengine.md",{"type":7,"value":743,"toc":755},[744,747,752],[745,746],"project-booking-engine",{":autoPlay":12},[14,748],{":durationSec":16,":fontSizeVw":749,":iconGapVw":18,":iconSizeVw":19,":items":750,":meta":751,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":100,"separatorIcon":24,"theme":25},"10","[\"GSAP\",\"SVG\",\"DrawSVG Plugin\",\"Clip Path Masks\",\"Path Animation\"]","[\"Year 2021\",\"SVG + GSAP DrawSVG\",\"Process Animation\"]",[27,753],{":pinHeightVh":405,"paragraph":754,"theme":25},"A sequential SVG animation breaking down the booking process into clear visual steps. Built with GSAP DrawSVG plugin and clip-path masks to reveal each stage with smooth path drawing and staggered text transitions.",{"title":32,"searchDepth":33,"depth":33,"links":756},[],{"tags":758,"date":760},[43,42,412,41,759],"ui","2021-06-01",{"title":100,"description":32},"bookingengine","SVG path drawing animation visualizing a multi-step booking process. Sequential reveals with clip-path masks and GSAP DrawSVG plugin for smooth transitions.","/movies/web-optimized/booking-engine.mp4","Ni5dtJloW8t91saCo8OLHeDmkKBRWdP2T1jgCm-yhQc",{"id":767,"title":108,"body":768,"category":409,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":782,"navigation":45,"path":109,"preview":36,"seo":785,"slug":786,"stem":110,"summary":787,"video":788,"__hash__":789},"projects/projects/catalyst.md",{"type":7,"value":769,"toc":780},[770,773,777],[771,772],"project-catalyst",{":autoPlay":12},[14,774],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":775,":meta":776,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":108,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"CustomBounce\",\"Custom Ease\",\"Smooth Reveal\",\"Bidirectional Motion\",\"Marketing Campaign\"]","[\"Year 2018\",\"GSAP + CustomBounce + Custom Ease\",\"Logo Animation for Marketing\"]",[27,778],{":pinHeightVh":405,"paragraph":779,"theme":25},"Catalyst Consortium is a bidirectional SVG logo animation featuring staggered bounce effects, smooth reveal mechanics, and precise timing choreography. Built with GSAP CustomBounce and CustomEase, this animation was designed for a marketing campaign",{"title":32,"searchDepth":33,"depth":33,"links":781},[],{"tags":783,"date":416},[43,42,555,784,415],"custombounce",{"title":108,"description":32},"catalyst","Bidirectional SVG logo animation with staggered bounce effects and smooth reveal mechanics. Built with GSAP CustomBounce for a marketing campaign focused on dynamic brand presence.","/movies/web-optimized/catalyst.mp4","X31ToSfaFNeDmhh8pkprAQq33BCxvj4vpFjxmZQc4Ac",{"id":791,"title":104,"body":792,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":808,"navigation":45,"path":105,"preview":36,"seo":814,"slug":815,"stem":106,"summary":816,"video":796,"__hash__":817},"projects/projects/cb-pcb.md",{"type":7,"value":793,"toc":805},[794,797,802],[427,795],{":autoPlay":12,":loop":12,"src":796},"/movies/web-optimized/cb-pcb.mp4",[14,798],{":items":799,":meta":800,":showMeta":12,"projectName":801,"separatorIcon":24,"theme":25},"[\"GSAP\",\"HTML5\",\"Banners\",\"SVG\"]","[\"Year 2017\",\"HTML5 Banners\",\"5 Sizes\"]","CB PCB",[27,803],{"paragraph":804,"theme":25},"HTML5 banner campaign for CB PCB branding. Five banner sizes including billboard format with SVG mask reveal effects, nested timeline sequences, and staggered path animations.",{"title":32,"searchDepth":33,"depth":33,"links":806},[],"banner",{"tags":809,"date":813},[810,42,811,812,43],"html5","banners","advertising","2017-01-01",{"title":104,"description":32},"cb-pcb","Animated HTML5 banner set for CB PCB branding campaign - 5 sizes with SVG mask reveals and stagger animations","EX6wq5Jh84gyQAyZkxnr23lFiv5zL5NWd8PbtOZ8Bd4",{"id":819,"title":116,"body":820,"category":409,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":834,"navigation":45,"path":117,"preview":36,"seo":836,"slug":837,"stem":118,"summary":838,"video":839,"__hash__":840},"projects/projects/dobra-hipoteka.md",{"type":7,"value":821,"toc":832},[822,825,829],[823,824],"project-dobra-hipoteka",{":autoPlay":12},[14,826],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":827,":meta":828,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":116,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"DrawSVG\",\"Logo Animation\",\"Metallic Gradients\"]","[\"Year 2018\",\"GSAP + SVG + DrawSVG\",\"Logo Animation\"]",[27,830],{":pinHeightVh":405,"paragraph":831,"theme":25},"Logo animation for a Polish mortgage company featuring metallic stroke reveals and staggered text fades. Built with GSAP DrawSVG plugin.",{"title":32,"searchDepth":33,"depth":33,"links":833},[],{"tags":835,"date":416},[43,42,412,409],{"title":116,"description":32},"dobra-hipoteka","Metallic DrawSVG logo animation for a mortgage company - house, key, and ring icons draw in followed by staggered text reveal with gold gradient accents.","/movies/web-optimized/dobra-hipoteka.mp4","I5pnikjB5GKQuNjoZPa_OJB5XnnfR2h4NvUTO4jK9TE",{"id":842,"title":112,"body":843,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":859,"liveLinkLabel":36,"meta":860,"navigation":45,"path":113,"preview":36,"seo":866,"slug":867,"stem":114,"summary":868,"video":847,"__hash__":869},"projects/projects/doitforjack.md",{"type":7,"value":844,"toc":857},[845,848,854],[427,846],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":847},"/movies/web-optimized/doitforjack.mp4",[14,849],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":850,":meta":851,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"credit":852,"creditUrl":853,"separatorIcon":24,"theme":670},"[\"Responsive Design\",\"Grid Layouts\",\"Donation Integration\",\"Form Handling\",\"Impact Storytelling\"]","[\"Year 2022\",\"Non-Profit Foundation Website\",\"Responsive Web Design\"]","DevPhase","https://devphase.io/",[27,855],{":pinHeightVh":405,"paragraph":856,"theme":25},"Do It For Jack is a non-profit foundation website dedicated to fentanyl awareness and education. The site combines emotional storytelling with responsive grid layouts, donation integration, and clear call-to-action flows",{"title":32,"searchDepth":33,"depth":33,"links":858},[],"https://www.doitforjack.org/",{"tags":861,"date":865},[454,862,680,863,864],"responsive","web-design","grid-layout","2022-01-15",{"title":112,"description":32},"doitforjack","Non-profit foundation website for fentanyl awareness with high-impact imagery, responsive grid layouts, and donation integration.","XqG-zR2M5A3a1bwrQTiKa-sInELTpPaqa2ZO5SkpQCg",{"id":4,"title":5,"body":871,"category":35,"components":36,"cover":37,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":881,"navigation":45,"path":46,"preview":36,"seo":883,"slug":48,"stem":49,"summary":50,"video":51,"__hash__":52},{"type":7,"value":872,"toc":879},[873,875,877],[10,874],{":autoPlay":12},[14,876],{":durationSec":16,":fontSizeVw":17,":iconGapVw":18,":iconSizeVw":19,":items":20,":meta":21,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":5,"separatorIcon":24,"theme":25},[27,878],{":pinHeightVh":29,"paragraph":30,"theme":25},{"title":32,"searchDepth":33,"depth":33,"links":880},[],{"tags":882,"date":44},[41,42,43],{"title":5,"description":32},{"id":885,"title":121,"body":886,"category":409,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":900,"navigation":45,"path":122,"preview":36,"seo":903,"slug":904,"stem":123,"summary":905,"video":906,"__hash__":907},"projects/projects/farm-table.md",{"type":7,"value":887,"toc":898},[888,891,895],[889,890],"project-farm-table",{":autoPlay":12},[14,892],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":893,":meta":894,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":121,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Logo Animation\",\"Stagger\",\"MorphSVG\"]","[\"Year 2018\",\"GSAP + SVG + MorphSVG\",\"Logo Animation\"]",[27,896],{":pinHeightVh":405,"paragraph":897,"theme":25},"Colorful staggered logo animation with geometric shapes flying in from different directions and text scaling up from opposing origins. Built with GSAP and MorphSVG plugin.",{"title":32,"searchDepth":33,"depth":33,"links":899},[],{"tags":901,"date":416},[43,42,409,902],"stagger",{"title":121,"description":32},"farm-table","Colorful staggered logo animation for Farm Table - geometric shapes fly in from different directions followed by text scaling reveals.","/movies/web-optimized/farm-table.mp4","K3j8OW_49iN6kwnHtlFIqC0xLm2C8fgQVV1myclJyyU",{"id":909,"title":125,"body":910,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":924,"navigation":45,"path":126,"preview":36,"seo":928,"slug":929,"stem":127,"summary":930,"video":931,"__hash__":932},"projects/projects/fidelis-elevate.md",{"type":7,"value":911,"toc":922},[912,915,919],[913,914],"project-fidelis-elevate",{":autoPlay":12},[14,916],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":917,":meta":918,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":125,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Interactive\",\"Custom Animation\",\"Hover Effects\"]","[\"Year 2019\",\"GSAP + SVG\",\"Custom Animation\"]",[27,920],{":pinHeightVh":405,"paragraph":921,"theme":25},"Interactive cybersecurity product wheel with hover-triggered section reveals and rotating segments. Built with GSAP.",{"title":32,"searchDepth":33,"depth":33,"links":923},[],{"tags":925,"date":927},[43,42,926,35],"interactive","2019-01-01",{"title":125,"description":32},"fidelis-elevate","Interactive wheel animation for Fidelis cybersecurity platform with hover-triggered section reveals.","/movies/web-optimized/fidelis-elevate.mp4","1N1f880ybT611aIZZbTD-tZtxlk8tqA80ig2rMYRmDo",{"id":934,"title":129,"body":935,"category":35,"components":36,"cover":949,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":950,"navigation":45,"path":130,"preview":36,"seo":954,"slug":955,"stem":131,"summary":956,"video":957,"__hash__":958},"projects/projects/fort-privacy.md",{"type":7,"value":936,"toc":947},[937,940,944],[938,939],"project-fort-privacy",{":autoPlay":12},[14,941],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":942,":meta":943,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":129,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"DrawSVG\",\"SVG Filters\",\"Hero Animation\",\"Security UX\"]","[\"Year 2024\",\"GSAP + SVG + Filters\",\"Hero section animation\"]",[27,945],{":pinHeightVh":405,"paragraph":946,"theme":25},"Custom hero animation for a web security company. Built with GSAP DrawSVG and SVG filters to visualize how the software runs and protects users, blending protective layers and motion with clarity.",{"title":32,"searchDepth":33,"depth":33,"links":948},[],"/assets/medias/fort-privacy-thumb.svg",{"tags":951,"date":558},[43,42,412,952,953,41],"filters","hero",{"title":129,"description":32},"fort-privacy","Custom SVG hero animation using GSAP DrawSVG and filters to illustrate how the software runs and protects users for a web security company.","/movies/web-optimized/fort-privacy.mp4","ENPi3oKDGWgoFCAk3X9X1xF3GIRrDaR17OcXegWLvEY",{"id":960,"title":133,"body":961,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":975,"liveLinkLabel":36,"meta":976,"navigation":45,"path":134,"preview":36,"seo":979,"slug":980,"stem":135,"summary":981,"video":965,"__hash__":982},"projects/projects/frozen-bris.md",{"type":7,"value":962,"toc":973},[963,966,970],[427,964],{":autoPlay":12,":loop":12,"src":965},"/movies/web-optimized/frozen-bris.mp4",[14,967],{":items":799,":meta":968,":showMeta":12,"projectName":969,"separatorIcon":24,"theme":25},"[\"Year 2022\",\"HTML5 Banners\",\"5 Sizes\"]","Frozen Brisbane",[27,971],{"paragraph":972,"theme":25},"Animated HTML5 banner campaign for Disney's Frozen at QPAC Brisbane. Five responsive banner sizes featuring SVG snowflake particle effects and smooth GSAP timeline animations.",{"title":32,"searchDepth":33,"depth":33,"links":974},[],"https://frozen-bris-banners.netlify.app/",{"tags":977,"date":978},[810,42,811,812],"2022-01-01",{"title":133,"description":32},"frozen-bris","Animated HTML5 banner set for Disney's Frozen at QPAC Brisbane - 5 sizes with SVG snowflake effects","WrbFZnv5-ekzAYkNz_E02qPbj6n5SI8qeazw_Bivg0U",{"id":984,"title":137,"body":985,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":999,"liveLinkLabel":36,"meta":1000,"navigation":45,"path":138,"preview":36,"seo":1002,"slug":1003,"stem":139,"summary":1004,"video":989,"__hash__":1005},"projects/projects/frozen-elza.md",{"type":7,"value":986,"toc":997},[987,990,994],[427,988],{":autoPlay":12,":loop":12,"src":989},"/movies/web-optimized/frozen-elza.mp4",[14,991],{":items":799,":meta":992,":showMeta":12,"projectName":993,"separatorIcon":24,"theme":25},"[\"Year 2022\",\"HTML5 Banners\",\"4 Sizes\"]","Frozen Elza",[27,995],{"paragraph":996,"theme":25},"Animated HTML5 banner campaign for Disney's Frozen featuring Elza. Four banner sizes with smooth fade-in sequences and GSAP timeline animations for the theatrical release.",{"title":32,"searchDepth":33,"depth":33,"links":998},[],"https://frozen-elza-banners.netlify.app/",{"tags":1001,"date":978},[810,42,811,812],{"title":137,"description":32},"frozen-elza","Animated HTML5 banner set for Disney's Frozen featuring Elza - 4 sizes with smooth fade-in sequences","HXhnl-8wDeJiEKut3Fpbc8r0gCbkrGw68y1hVM0dih4",{"id":1007,"title":213,"body":1008,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1022,"navigation":45,"path":214,"preview":36,"seo":1024,"slug":1025,"stem":215,"summary":1026,"video":1027,"__hash__":1028},"projects/projects/graph-slider.md",{"type":7,"value":1009,"toc":1020},[1010,1013,1017],[1011,1012],"project-graph-slider",{":autoPlay":12},[14,1014],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1015,":meta":1016,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":213,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Interactive Timeline\",\"MorphSVG\",\"DrawSVG\"]","[\"Year 2020\",\"GSAP + SVG\",\"Interactive Animation\"]",[27,1018],{":pinHeightVh":405,"paragraph":1019,"theme":25},"Interactive financial timeline visualization for KBS Real Estate featuring MorphSVG graph transformations, DrawSVG line animations, and click-driven navigation across 28 years of transaction milestones",{"title":32,"searchDepth":33,"depth":33,"links":1021},[],{"tags":1023,"date":458},[43,42,926,651,412,41],{"title":213,"description":32},"graph-slider","Interactive timeline visualization for KBS Real Estate - 28 years of transaction milestones with SVG morphing and DrawSVG animations","/movies/web-optimized/graph-slider.mp4","6tFx7Pr7ePI642lLpxhlramse170qE0NtVJ2KDO373w",{"id":1030,"title":141,"body":1031,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1046,"navigation":45,"path":142,"preview":36,"seo":1048,"slug":1049,"stem":143,"summary":1050,"video":1035,"__hash__":1051},"projects/projects/greenrubino-phonesdown.md",{"type":7,"value":1032,"toc":1044},[1033,1036,1041],[427,1034],{":autoPlay":12,":loop":12,"src":1035},"/movies/web-optimized/greenrubino-phonesdown.mp4",[14,1037],{":items":1038,":meta":1039,":showMeta":12,"projectName":1040,"separatorIcon":24,"theme":25},"[\"GSAP\",\"HTML5\",\"Banners\",\"Particles\"]","[\"Year 2020\",\"HTML5 Banners\",\"4 Sizes\"]","GreenRubino Phones Down",[27,1042],{"paragraph":1043,"theme":25},"HTML5 banner campaign for GreenRubino's Phones Down distracted driving awareness initiative. Four banner sizes with snowfall particle effects, multi-scene transitions, and smooth text reveals.",{"title":32,"searchDepth":33,"depth":33,"links":1045},[],{"tags":1047,"date":458},[810,42,811,812,413],{"title":141,"description":32},"greenrubino-phonesdown","Animated HTML5 banner set for GreenRubino's Phones Down campaign - 4 sizes with snowfall particle effects and scene transitions","Fa3uYCd1hsrXxwp2feBXwF7vwzWstMQ5lFGzvivz0jk",{"id":1053,"title":145,"body":1054,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1067,"navigation":45,"path":146,"preview":36,"seo":1069,"slug":1070,"stem":147,"summary":1071,"video":1058,"__hash__":1072},"projects/projects/greenrubino-swipe.md",{"type":7,"value":1055,"toc":1065},[1056,1059,1062],[427,1057],{":autoPlay":12,":loop":12,"src":1058},"/movies/web-optimized/greenrubino-swipe.mp4",[14,1060],{":items":1038,":meta":1039,":showMeta":12,"projectName":1061,"separatorIcon":24,"theme":25},"GreenRubino Swipe",[27,1063],{"paragraph":1064,"theme":25},"HTML5 banner campaign for GreenRubino's Swipe distracted driving campaign. Four banner sizes with snowfall particle effects, multi-scene transitions, and smooth text reveals.",{"title":32,"searchDepth":33,"depth":33,"links":1066},[],{"tags":1068,"date":458},[810,42,811,812,413],{"title":145,"description":32},"greenrubino-swipe","Animated HTML5 banner set for GreenRubino's Swipe campaign - 4 sizes with snowfall particle effects and multi-scene transitions","-XB3MP31eQ3AnPTVoggbWP-Pc1cKaw0CW7jN3EP75qw",{"id":1074,"title":161,"body":1075,"category":447,"components":36,"cover":1095,"ctaLabel":36,"description":32,"extension":38,"liveLink":1096,"liveLinkLabel":1097,"meta":1098,"navigation":45,"path":162,"preview":36,"seo":1105,"slug":1106,"stem":163,"summary":1107,"video":1079,"__hash__":1108},"projects/projects/halftone-lab.md",{"type":7,"value":1076,"toc":1093},[1077,1080,1084,1087,1090],[427,1078],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1079},"/movies/web-optimized/halftone-lab.mp4",[14,1081],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1082,":meta":1083,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":161,"separatorIcon":24,"theme":670},"[\"Raw WebGL\",\"GLSL\",\"Shaders\",\"Raymarching\",\"Creative Coding\"]","[\"Year 2026\",\"Shader Experiment\",\"No Dependencies, No Build Step\"]",[27,1085],{":pinHeightVh":405,"paragraph":1086,"theme":25},"Halftone Lab is a set of dot-field shaders on one full-screen canvas, with a panel to switch six variants and tune them live. One variant raymarches a small 3D scene and draws it as halftone. It is raw WebGL and GLSL with no dependencies and no build step.",[427,1088],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":1089},"/movies/web-optimized/halftone-lab-object.mp4",[427,1091],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":1092},"/movies/web-optimized/halftone-lab-image-push.mp4",{"title":32,"searchDepth":33,"depth":33,"links":1094},[],"/assets/medias/halftone-lab-thumb.jpg","https://halftone-lab-drab.vercel.app/","Open the live lab",{"tags":1099,"date":1104},[1100,1101,1102,1103],"webgl","glsl","shaders","creative-coding","2026-10-02",{"title":161,"description":32},"halftone-lab","A halftone shader lab: dot-field shaders on one full-screen canvas with a panel to switch six variants and tune them live. One variant raymarches a small 3D scene and draws it as halftone. Raw WebGL and GLSL, no dependencies, no build step.","qErFP2JYyc5K8ZhcQ8987Vclisxayi9gv7-ui52QN8A",{"id":1110,"title":169,"body":1111,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":1124,"liveLinkLabel":36,"meta":1125,"navigation":45,"path":170,"preview":36,"seo":1128,"slug":1129,"stem":171,"summary":1130,"video":1115,"__hash__":1131},"projects/projects/harry-potter-christmas.md",{"type":7,"value":1112,"toc":1122},[1113,1116,1119],[427,1114],{":autoPlay":12,":loop":12,"src":1115},"/movies/web-optimized/harry-potter-christmas.mp4",[14,1117],{":items":799,":meta":1118,":showMeta":12,"projectName":169,"separatorIcon":24,"theme":25},"[\"Year 2021\",\"HTML5 Banners\",\"6 Sizes\"]",[27,1120],{"paragraph":1121,"theme":25},"Holiday campaign HTML5 banners for Harry Potter and the Cursed Child. Six banner sizes featuring smooth fade-in sequences and carefully timed GSAP timeline animations.",{"title":32,"searchDepth":33,"depth":33,"links":1123},[],"https://harry-potter-christmas-banners.netlify.app/",{"tags":1126,"date":1127},[810,42,811,812],"2021-01-01",{"title":169,"description":32},"harry-potter-christmas","Animated HTML5 banner set for Harry Potter and the Cursed Child holiday campaign - 6 sizes with smooth fade-in sequences","YQ6VKumh4BhJUpABtV-LtIeoh_V2hyyNRpHi82xZcmc",{"id":1133,"title":165,"body":1134,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":1147,"liveLinkLabel":36,"meta":1148,"navigation":45,"path":166,"preview":36,"seo":1150,"slug":1151,"stem":167,"summary":1152,"video":1138,"__hash__":1153},"projects/projects/harry-potter-the-cursed-child.md",{"type":7,"value":1135,"toc":1145},[1136,1139,1142],[427,1137],{":autoPlay":12,":loop":12,"src":1138},"/movies/web-optimized/harry-potter-the-cursed-child.mp4",[14,1140],{":items":799,":meta":1118,":showMeta":12,"projectName":1141,"separatorIcon":24,"theme":25},"Harry Potter The Cursed Child",[27,1143],{"paragraph":1144,"theme":25},"Theatrical campaign HTML5 banners for Harry Potter and the Cursed Child. Six banner sizes with smooth fade-in sequences and carefully timed GSAP timeline animations.",{"title":32,"searchDepth":33,"depth":33,"links":1146},[],"https://harry-potter-the-cursed-child-banners.netlify.app/",{"tags":1149,"date":1127},[810,42,811,812],{"title":165,"description":32},"harry-potter-the-cursed-child","Animated HTML5 banner set for Harry Potter and the Cursed Child theatrical campaign - 6 sizes with smooth fade-in sequences","PcfqaGfAaF9AO3M_vcOz_1Hs5Xuj6zfSRXNjqChTH3k",{"id":1155,"title":153,"body":1156,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":1171,"liveLinkLabel":1172,"meta":1173,"navigation":45,"path":154,"preview":36,"seo":1176,"slug":1177,"stem":155,"summary":1178,"video":1160,"__hash__":1179},"projects/projects/hema.md",{"type":7,"value":1157,"toc":1169},[1158,1161,1166],[427,1159],{":autoPlay":12,":loop":12,"src":1160},"/movies/web-optimized/hema.mp4",[14,1162],{":items":1163,":meta":1164,":showMeta":12,"projectName":1165,"separatorIcon":24,"theme":25},"[\"GSAP\",\"HTML5\",\"Interactive\",\"SVG\"]","[\"Year 2017\",\"HTML5 Banners\",\"2 Playable Games\"]","HEMA Sinterklaas",[27,1167],{"paragraph":1168,"theme":25},"Two 970x250 banners for HEMA's Sinterklaas campaign that you play rather than watch. In the first, the wind blows the Sint's mitre away and your cursor has to chase it down. In the second, you steer him left and right to catch a falling gift. Both are hand-drawn SVG driven entirely by GSAP, with live hit detection and separate win and lose endings.",{"title":32,"searchDepth":33,"depth":33,"links":1170},[],"https://tastysites.pl/oldportfolio/dev/banners/hema/02/","Play the banner",{"tags":1174,"date":1175},[810,42,811,926,812],"2017-10-26",{"title":153,"description":32},"hema","Two playable HTML5 banner games for HEMA's Sinterklaas campaign - catch the mitre, catch the gift","u2KySYKSP_1SARJa-jWGXSfc3XtNXJTbTQ00VhdcRX8",{"id":1181,"title":173,"body":1182,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":1196,"liveLinkLabel":36,"meta":1197,"navigation":45,"path":174,"preview":36,"seo":1200,"slug":1201,"stem":175,"summary":1202,"video":1186,"__hash__":1203},"projects/projects/horridus-is-coming.md",{"type":7,"value":1183,"toc":1194},[1184,1187,1191],[427,1185],{":autoPlay":12,":loop":12,"src":1186},"/movies/web-optimized/horridus-is-coming.mp4",[14,1188],{":items":1189,":meta":1190,":showMeta":12,"projectName":173,"separatorIcon":24,"theme":25},"[\"GSAP\",\"HTML5\",\"Banners\",\"Kinetic Typography\"]","[\"Year 2021\",\"HTML5 Banners\",\"5 Sizes\"]",[27,1192],{"paragraph":1193,"theme":25},"HTML5 banner campaign for Museums Victoria's Horridus dinosaur exhibit. Cinematic text reveal - words enter one by one as if shaken by heavy footsteps, kinetic typography bouncing off the ground.",{"title":32,"searchDepth":33,"depth":33,"links":1195},[],"https://horridus-is-coming-banners.netlify.app/",{"tags":1198,"date":1127},[810,42,811,812,1199],"kinetic-typography",{"title":173,"description":32},"horridus-is-coming","Animated HTML5 banner set for Museums Victoria's Horridus dinosaur exhibit - 5 sizes with kinetic typography and ground-shaking text effects","i_VdeLhoisL42zFliFcccnS3GW0_7XDJfiEfWkOqksY",{"id":1205,"title":157,"body":1206,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":1220,"liveLinkLabel":36,"meta":1221,"navigation":45,"path":158,"preview":36,"seo":1226,"slug":1227,"stem":159,"summary":1228,"video":1210,"__hash__":1229},"projects/projects/hqbio.md",{"type":7,"value":1207,"toc":1218},[1208,1211,1215],[427,1209],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1210},"/movies/web-optimized/hq-bio.mp4",[14,1212],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1213,":meta":1214,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":157,"separatorIcon":24,"theme":25},"[\"SVG Animations\",\"GSAP\",\"Storytelling\",\"Scroll-Driven Narrative\",\"Interactive Experience\"]","[\"Year 2019\",\"Desktop-First Experience\",\"SVG + GSAP Storytelling\"]",[27,1216],{":pinHeightVh":405,"paragraph":1217,"theme":25},"HQ Bio is an interactive storytelling experience that visualizes the innovative GMO approach to yeast production. Built with SVG animations and GSAP, the website guides users through a scroll-driven narrative demonstrating how biotechnology reduces production costs.",{"title":32,"searchDepth":33,"depth":33,"links":1219},[],"https://hqbio-tasty-sites.netlify.app",{"tags":1222,"date":1225},[43,42,1223,530,41,1224],"storytelling","desktop","2019-01-15",{"title":157,"description":32},"hqbio","Interactive SVG-driven storytelling website showcasing GMO yeast production innovation with GSAP animations and scroll-based narrative flow.","dk1bdHuJsTzH_1tl49SBq-AX-wqBs-7x3e8z_fNffas",{"id":1231,"title":177,"body":1232,"category":409,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1246,"navigation":45,"path":178,"preview":36,"seo":1248,"slug":1249,"stem":179,"summary":1250,"video":1251,"__hash__":1252},"projects/projects/iceberg-webdesign.md",{"type":7,"value":1233,"toc":1244},[1234,1237,1241],[1235,1236],"project-iceberg-webdesign",{":autoPlay":12},[14,1238],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1239,":meta":1240,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":177,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"CustomBounce\",\"Logo Animation\",\"Penguin\"]","[\"Year 2017\",\"GSAP + SVG + CustomBounce\",\"Logo Animation\"]",[27,1242],{":pinHeightVh":405,"paragraph":1243,"theme":25},"Logo animation for a web design agency featuring a playful penguin mascot that bounces into frame with wobbling flippers. Built with GSAP CustomBounce plugin.",{"title":32,"searchDepth":33,"depth":33,"links":1245},[],{"tags":1247,"date":813},[43,42,784,409],{"title":177,"description":32},"iceberg-webdesign","Playful logo animation for a web design agency - text fades in followed by a bouncing penguin sliding into frame with wobbling body parts.","/movies/web-optimized/iceberg-webdesign.mp4","mXsx6nNjio7o5BeqKdZqE63wVmXPX2lw3bpNxxtGiWg",{"id":1254,"title":181,"body":1255,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1269,"navigation":45,"path":182,"preview":36,"seo":1271,"slug":1272,"stem":183,"summary":1273,"video":1274,"__hash__":1275},"projects/projects/icon-bars.md",{"type":7,"value":1256,"toc":1267},[1257,1260,1264],[1258,1259],"project-icon-bars",{":autoPlay":12},[14,1261],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1262,":meta":1263,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":181,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"MorphSVG\",\"Custom Animation\",\"Isometric 3D\"]","[\"Year 2018\",\"GSAP + SVG + MorphSVG\",\"Custom Animation\"]",[27,1265],{":pinHeightVh":405,"paragraph":1266,"theme":25},"Isometric 3D bar chart showing search engine statistics with bars that morph between two height states. Built with GSAP MorphSVG plugin with staggered timing and animated counters.",{"title":32,"searchDepth":33,"depth":33,"links":1268},[],{"tags":1270,"date":416},[43,42,651,35],{"title":181,"description":32},"icon-bars","Isometric 3D bar chart animation with MorphSVG - four search engine bars morph between height states while percentage counters animate with staggered timing.","/movies/web-optimized/icon-bars.mp4","7UxuNRY1yfjcNR5jJbNvOOjf0XlGUe42ZB385DsVdBo",{"id":1277,"title":185,"body":1278,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1292,"navigation":45,"path":186,"preview":36,"seo":1296,"slug":1297,"stem":187,"summary":1298,"video":1299,"__hash__":1300},"projects/projects/icon-ladder.md",{"type":7,"value":1279,"toc":1290},[1280,1283,1287],[1281,1282],"project-icon-ladder",{":autoPlay":12},[14,1284],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1285,":meta":1286,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":185,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Custom Animation\",\"3D Isometric\",\"Motion Path\"]","[\"Year 2018\",\"GSAP + SVG\",\"Custom Animation\"]",[27,1288],{":pinHeightVh":405,"paragraph":1289,"theme":25},"3D isometric staircase animation with a character climbing along motion paths. Built with GSAP bezier tweens and colorful gradient bar charts.",{"title":32,"searchDepth":33,"depth":33,"links":1291},[],{"tags":1293,"date":416},[43,42,35,1294,1295],"3d-isometric","motion-path",{"title":185,"description":32},"icon-ladder","3D isometric staircase animation with a character climbing along bezier motion paths - featuring a colorful dashboard with gradient bar charts and floating icons.","/movies/web-optimized/icon-ladder.mp4","oQzilQFRGdqTuAbHgN1ESIdxMxrBLdVgZDcnMx5LzB0",{"id":1302,"title":189,"body":1303,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1316,"navigation":45,"path":190,"preview":36,"seo":1319,"slug":1320,"stem":191,"summary":1321,"video":1322,"__hash__":1323},"projects/projects/icon-laptop.md",{"type":7,"value":1304,"toc":1314},[1305,1308,1311],[1306,1307],"project-icon-laptop",{":autoPlay":12},[14,1309],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1310,":meta":1286,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":189,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Custom Animation\",\"3D Isometric\",\"MotionPath\"]",[27,1312],{":pinHeightVh":405,"paragraph":1313,"theme":25},"3D isometric laptop animation with staggered keyword text reveal and stepped bezier motion. Built with GSAP MotionPath and stagger transforms.",{"title":32,"searchDepth":33,"depth":33,"links":1315},[],{"tags":1317,"date":416},[43,42,35,1294,1318],"motionpath",{"title":189,"description":32},"icon-laptop","3D isometric laptop animation with staggered keyword text reveal - letters appear one by one while a separator bar steps across a bezier path.","/movies/web-optimized/icon-laptop.mp4","kbRk_Md5f5fYDNmET8hU4GX0OuzgyWCZVS60PelwJM0",{"id":1325,"title":193,"body":1326,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1339,"navigation":45,"path":194,"preview":36,"seo":1341,"slug":1342,"stem":195,"summary":1343,"video":1344,"__hash__":1345},"projects/projects/icon-message.md",{"type":7,"value":1327,"toc":1337},[1328,1331,1334],[1329,1330],"project-icon-message",{":autoPlay":12},[14,1332],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1333,":meta":1286,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":193,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Custom Animation\",\"3D Isometric\",\"Stagger\"]",[27,1335],{":pinHeightVh":405,"paragraph":1336,"theme":25},"3D isometric chat bubble animation with staggered entrances, typing dot indicators, and message icon reveals. Built with GSAP stagger and scale transforms.",{"title":32,"searchDepth":33,"depth":33,"links":1338},[],{"tags":1340,"date":416},[43,42,35,1294],{"title":193,"description":32},"icon-message","3D isometric chat bubble animation with typing dots and message icon reveals - three staggered chat icons bounce in, pulse their typing indicators, then transform into message envelopes.","/movies/web-optimized/icon-message.mp4","UjpWwjKF4rGRej_JPH0zzOEkR8zTt67nfJqJZkYUYWs",{"id":1347,"title":197,"body":1348,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1360,"navigation":45,"path":198,"preview":36,"seo":1362,"slug":1363,"stem":199,"summary":1364,"video":1365,"__hash__":1366},"projects/projects/icon-monitor.md",{"type":7,"value":1349,"toc":1358},[1350,1353,1355],[1351,1352],"project-icon-monitor",{":autoPlay":12},[14,1354],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1310,":meta":1286,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":197,"separatorIcon":24,"theme":25},[27,1356],{":pinHeightVh":405,"paragraph":1357,"theme":25},"3D isometric monitor animation with zooming mountain landscape and a magnifier gliding along a bezier path. Built with GSAP MotionPath and stagger transforms.",{"title":32,"searchDepth":33,"depth":33,"links":1359},[],{"tags":1361,"date":416},[43,42,35,1294,1318],{"title":197,"description":32},"icon-monitor","3D isometric monitor with animated mountain landscape and magnifier tracing a bezier path.","/movies/web-optimized/icon-monitor.mp4","OA8VCeSPZnKlO2vTsgdWe9VBE3fMTg-fiUn8SFv5bSQ",{"id":1368,"title":201,"body":1369,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1381,"navigation":45,"path":202,"preview":36,"seo":1383,"slug":1384,"stem":203,"summary":1385,"video":1386,"__hash__":1387},"projects/projects/icon-phone.md",{"type":7,"value":1370,"toc":1379},[1371,1374,1376],[1372,1373],"project-icon-phone",{":autoPlay":12},[14,1375],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1310,":meta":1286,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":201,"separatorIcon":24,"theme":25},[27,1377],{":pinHeightVh":405,"paragraph":1378,"theme":25},"3D isometric phone animation with cars following bezier motion paths and swapping into social media icons. Built with GSAP MotionPath and elastic ease transitions.",{"title":32,"searchDepth":33,"depth":33,"links":1380},[],{"tags":1382,"date":416},[43,42,35,1294,1318],{"title":201,"description":32},"icon-phone","3D isometric phone animation with cars traveling bezier paths and swapping with social media icons using elastic ease transitions.","/movies/web-optimized/icon-phone.mp4","xLl05oeFW9CvAAcxDD1gzZDU6P1Asv87xGRAZYVk-8Y",{"id":1389,"title":205,"body":1390,"category":409,"components":36,"cover":1404,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1405,"navigation":45,"path":206,"preview":36,"seo":1407,"slug":1408,"stem":207,"summary":1409,"video":1410,"__hash__":1411},"projects/projects/inforca.md",{"type":7,"value":1391,"toc":1402},[1392,1395,1399],[1393,1394],"project-inf-orca",{":autoPlay":12},[14,1396],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1397,":meta":1398,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":205,"separatorIcon":24,"theme":670},"[\"GSAP\",\"SVG\",\"Morphing\",\"Smooth Motion\",\"Logo Animation\"]","[\"Year 2021\",\"GSAP + SVG Morph\",\"Logo Animation\"]",[27,1400],{":pinHeightVh":405,"paragraph":1401,"theme":25},"InfOrca is a morphing SVG logo animation of an orca with smooth stage-to-stage transitions so it looks like swimming. Built with GSAP for fluid motion.",{"title":32,"searchDepth":33,"depth":33,"links":1403},[],"/assets/medias/inforca-thumb.svg",{"tags":1406,"date":1127},[43,42,555,651,41],{"title":205,"description":32},"inforca","Morphing SVG orca logo animation with smooth swim-like motion using GSAP.","/movies/web-optimized/inforca.mp4","sD8TjqtW0hlpwBNIzAfesNklf0KCt8-pBXCQssJWP18",{"id":1413,"title":209,"body":1414,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1428,"navigation":45,"path":210,"preview":36,"seo":1430,"slug":1431,"stem":211,"summary":1432,"video":1433,"__hash__":1434},"projects/projects/interview.md",{"type":7,"value":1415,"toc":1426},[1416,1419,1423],[1417,1418],"project-interview",{":autoPlay":12},[14,1420],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1421,":meta":1422,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":209,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"MorphSVG\",\"DrawSVG\",\"MotionPath\"]","[\"Year 2017\",\"GSAP + SVG\",\"Custom Animation\"]",[27,1424],{":pinHeightVh":405,"paragraph":1425,"theme":25},"Animated office interview scene featuring MorphSVG paper morphing, DrawSVG clock reveal, MotionPath buzzing fly, and character idle animations including smoke drift, eye blinks, and shoe fidgeting.",{"title":32,"searchDepth":33,"depth":33,"links":1427},[],{"tags":1429,"date":813},[43,42,651,412,1318,35],{"title":209,"description":32},"interview","Animated office interview scene with MorphSVG paper transforms, DrawSVG clock reveal, MotionPath fly animation, and character idle loops.","/movies/web-optimized/interview.mp4","Zof6xrLwji3_s2DeW4ISGQMcJWZw3blgoi1-mr1yh0s",{"id":1436,"title":221,"body":1437,"category":447,"components":36,"cover":1451,"ctaLabel":36,"description":32,"extension":38,"liveLink":1452,"liveLinkLabel":36,"meta":1453,"navigation":45,"path":222,"preview":36,"seo":1458,"slug":1459,"stem":223,"summary":1460,"video":1441,"__hash__":1461},"projects/projects/life-balance-congress.md",{"type":7,"value":1438,"toc":1449},[1439,1442,1446],[427,1440],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1441},"/movies/web-optimized/life-balance-prototype.mp4",[14,1443],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1444,":meta":1445,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":221,"separatorIcon":24,"theme":25},"[\"Nuxt 3\",\"GSAP\",\"ScrollTrigger\",\"Tailwind CSS\",\"Transitions\"]","[\"Year 2025\",\"Website\"]",[27,1447],{":pinHeightVh":405,"paragraph":1448,"theme":25},"Scroll animated Nuxt 3 Landing Page with seamless transitions between sections. Mixing various GSAP animation techniques to create a smooth and engaging experience. Mostly on desktop.",{"title":32,"searchDepth":33,"depth":33,"links":1450},[],"/assets/medias/lbc-thumb.svg","https://life-balance-prototype.netlify.app/",{"tags":1454,"date":531},[1455,1456,1457,42],"video","autoplay","nuxt",{"title":221,"description":32},"life-balance-congress","Scroll animated Nuxt 3 Landing Page with seamless transitions between sections. Mixing various GSAP animation techniques to create a smooth and engaging experience. Mostly on desktop.Autoplaying loop test across devices.","LA0pASW_7gYU6Xp0R9JszkONwx8DbROhSlUi1-v89hA",{"id":1463,"title":225,"body":1464,"category":409,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1478,"navigation":45,"path":226,"preview":36,"seo":1482,"slug":1483,"stem":227,"summary":1484,"video":1485,"__hash__":1486},"projects/projects/lion.md",{"type":7,"value":1465,"toc":1476},[1466,1469,1473],[1467,1468],"project-lion",{":autoPlay":12},[14,1470],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1471,":meta":1472,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":225,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Low-Poly\",\"Logo Animation\",\"Geometric Art\"]","[\"Year 2018\",\"GSAP + SVG\",\"Logo Animation\"]",[27,1474],{":pinHeightVh":405,"paragraph":1475,"theme":25},"Low-poly geometric lion built from hundreds of colored polygons that stagger in with scale and rotation effects. Built with GSAP.",{"title":32,"searchDepth":33,"depth":33,"links":1477},[],{"tags":1479,"date":416},[43,42,1480,409,1481],"polygon","low-poly",{"title":225,"description":32},"lion","Low-poly geometric lion logo animation with staggered polygon reveals and rotation effects.","/movies/web-optimized/lion.mp4","93H9HPe05qSNhN_6hc5eRD7ej0e10ThdFmoVCO_KVs4",{"id":1488,"title":217,"body":1489,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1503,"navigation":45,"path":218,"preview":36,"seo":1505,"slug":1506,"stem":219,"summary":1507,"video":1493,"__hash__":1508},"projects/projects/lny.md",{"type":7,"value":1490,"toc":1501},[1491,1494,1498],[427,1492],{":autoPlay":12,":loop":12,"src":1493},"/movies/web-optimized/lny.mp4",[14,1495],{":items":799,":meta":1496,":showMeta":12,"projectName":1497,"separatorIcon":24,"theme":25},"[\"Year 2018\",\"HTML5 Banners\",\"2 Sizes\"]","Snoqualmie Casino LNY",[27,1499],{"paragraph":1500,"theme":25},"HTML5 banner campaign for Snoqualmie Casino's Lunar New Year promotion. Two banner sizes with multi-scene transitions featuring cash prizes, car giveaways, and travel packages.",{"title":32,"searchDepth":33,"depth":33,"links":1502},[],{"tags":1504,"date":416},[810,42,811,812],{"title":217,"description":32},"lny","Animated HTML5 banner set for Snoqualmie Casino Lunar New Year campaign - 2 sizes with multi-scene transitions","W0h90Hqmgt8Vr76ZV65bPyvWROSsN-3X0d219Z4Mzlg",{"id":1510,"title":229,"body":1511,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":1524,"liveLinkLabel":36,"meta":1525,"navigation":45,"path":230,"preview":36,"seo":1527,"slug":1528,"stem":231,"summary":1529,"video":1515,"__hash__":1530},"projects/projects/mca-australia-cornelia-parker.md",{"type":7,"value":1512,"toc":1522},[1513,1516,1519],[427,1514],{":autoPlay":12,":loop":12,"src":1515},"/movies/web-optimized/mca-australia-cornelia-parker.mp4",[14,1517],{":items":799,":meta":1118,":showMeta":12,"projectName":1518,"separatorIcon":24,"theme":25},"MCA Cornelia Parker",[27,1520],{"paragraph":1521,"theme":25},"HTML5 banner campaign for MCA Australia's Sydney International Art Series featuring Cornelia Parker. Artistic slow panning around gallery spaces with gentle fade transitions.",{"title":32,"searchDepth":33,"depth":33,"links":1523},[],"https://mca-australia-cornelia-parker-banners.netlify.app/",{"tags":1526,"date":1127},[810,42,811,812],{"title":229,"description":32},"mca-australia-cornelia-parker","Animated HTML5 banner set for MCA Sydney's Cornelia Parker exhibition - 6 sizes with slow panning and gentle fade transitions","qhITxZ6dYChnlo-rnZ9uMMlcb6WgSc1kKAZAUy-wwqE",{"id":1532,"title":233,"body":1533,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":1546,"liveLinkLabel":36,"meta":1547,"navigation":45,"path":234,"preview":36,"seo":1549,"slug":1550,"stem":235,"summary":1551,"video":1537,"__hash__":1552},"projects/projects/melbourne-museum-tyama.md",{"type":7,"value":1534,"toc":1544},[1535,1538,1541],[427,1536],{":autoPlay":12,":loop":12,"src":1537},"/movies/web-optimized/melbourne-museum-tyama.mp4",[14,1539],{":items":799,":meta":1190,":showMeta":12,"projectName":1540,"separatorIcon":24,"theme":25},"Melbourne Museum Tyama",[27,1542],{"paragraph":1543,"theme":25},"HTML5 banner campaign for Museums Victoria's Tyama exhibition at Melbourne Museum. Dreamy scenery with gentle reveals and animated butterflies floating across the composition.",{"title":32,"searchDepth":33,"depth":33,"links":1545},[],"https://melbourne-museum-tyama-banners.netlify.app/",{"tags":1548,"date":1127},[810,42,811,812],{"title":233,"description":32},"melbourne-museum-tyama","Animated HTML5 banner set for Museums Victoria's Tyama exhibition - 5 sizes with dreamy scenery and animated butterflies","wRVSPuTwDp3cl9NxYlAKzeGi_hVJH5LWk--uxq5GMEU",{"id":1554,"title":237,"body":1555,"category":409,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1568,"navigation":45,"path":238,"preview":36,"seo":1570,"slug":1571,"stem":239,"summary":1572,"video":1573,"__hash__":1574},"projects/projects/michael-arthur.md",{"type":7,"value":1556,"toc":1566},[1557,1560,1563],[1558,1559],"project-michael-arthur",{":autoPlay":12},[14,1561],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1562,":meta":828,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":237,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"DrawSVG\",\"Logo Animation\",\"Mask Reveal\"]",[27,1564],{":pinHeightVh":405,"paragraph":1565,"theme":25},"Circular logo animation with masked text drawn via DrawSVG, a rotating outer stroke, and staggered letter reveals. Built with GSAP.",{"title":32,"searchDepth":33,"depth":33,"links":1567},[],{"tags":1569,"date":416},[43,42,412,409],{"title":237,"description":32},"michael-arthur","Circular logo animation with DrawSVG mask reveals, rotating outer stroke, and staggered text entrance.","/movies/web-optimized/michael-arthur.mp4","yNh3ov5vbCV67-Z_vUgT04jwnvQT7qNyuYiBjKeBS-U",{"id":1576,"title":241,"body":1577,"category":409,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1590,"navigation":45,"path":242,"preview":36,"seo":1592,"slug":1593,"stem":243,"summary":1594,"video":1595,"__hash__":1596},"projects/projects/milk.md",{"type":7,"value":1578,"toc":1588},[1579,1582,1585],[1580,1581],"project-milk",{":autoPlay":12},[14,1583],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1584,":meta":894,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":241,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"MorphSVG\",\"Logo Animation\",\"Shape Morphing\"]",[27,1586],{":pinHeightVh":405,"paragraph":1587,"theme":25},"Shape-morphing logo animation transforming Europe Dairy branding into I Love Milk with elastic easing. Built with GSAP MorphSVG plugin.",{"title":32,"searchDepth":33,"depth":33,"links":1589},[],{"tags":1591,"date":416},[43,42,651,409],{"title":241,"description":32},"milk","MorphSVG logo animation that transforms Europe Dairy branding into I Love Milk with elastic shape morphing.","/movies/web-optimized/milk.mp4","kYxTEjdd_WydDZ1Sk8tm4vuBCXO7U1_JFapdgYyHgm4",{"id":1598,"title":245,"body":1599,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":1613,"liveLinkLabel":36,"meta":1614,"navigation":45,"path":246,"preview":36,"seo":1618,"slug":1619,"stem":247,"summary":1620,"video":1603,"__hash__":1621},"projects/projects/molki.md",{"type":7,"value":1600,"toc":1611},[1601,1604,1608],[427,1602],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1603},"/movies/web-optimized/molki.mp4",[14,1605],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1606,":meta":1607,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":245,"separatorIcon":24,"theme":670},"[\"WordPress\",\"GSAP\",\"SVG Animation\",\"Landing Page\",\"Full Viewport Video\"]","[\"Year 2020\",\"Real Estate Landing Page\",\"WordPress + SVG + GSAP\"]",[27,1609],{":pinHeightVh":405,"paragraph":1610,"theme":25},"Molki is a real estate company landing page that opens with an animated logo reveal, then walks you through three distinct branches - each with its own logo, description, and full viewport video background. The animations are driven by GSAP with custom SVG work bringing each section to life.",{"title":32,"searchDepth":33,"depth":33,"links":1612},[],"https://molki.pl/",{"tags":1615,"date":1617},[452,42,43,680,652,1616],"real-estate","2020-06-15",{"title":245,"description":32},"molki","Real estate landing page with an animated logo entry and three company branches revealed with full viewport video backgrounds, built with WordPress, SVG, and GSAP.","ljgodRkK5x9E8d5EurHuF8Y7uExquYLv3PTqmoTp3n0",{"id":1623,"title":249,"body":1624,"category":447,"components":36,"cover":1638,"ctaLabel":36,"description":32,"extension":38,"liveLink":1639,"liveLinkLabel":36,"meta":1640,"navigation":45,"path":250,"preview":36,"seo":1647,"slug":1648,"stem":251,"summary":1649,"video":1628,"__hash__":1650},"projects/projects/molkidesign.md",{"type":7,"value":1625,"toc":1636},[1626,1629,1633],[427,1627],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1628},"/movies/web-optimized/molkidesign.mp4",[14,1630],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1631,":meta":1632,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":249,"separatorIcon":24,"theme":25},"[\"Nuxt 3\",\"Nuxt Content\",\"Tailwind CSS\",\"Nuxt Studio\",\"TypeScript\",\"GSAP\"]","[\"Year 2025\",\"Nuxt 3 + GSAP + Tailwind\",\"Website\"]",[27,1634],{":pinHeightVh":405,"paragraph":1635,"theme":25},"Molki Design is a full Nuxt 3 website for a real estate company. It leverages Nuxt Content, Nuxt Studio, Tailwind CSS and GSAP to deliver a modern, scroll-animated experience with performance and maintainability in mind.",{"title":32,"searchDepth":33,"depth":33,"links":1637},[],"/assets/medias/molkidesign-thumb.svg","https://molkidesign.pl/",{"tags":1641,"date":531},[1642,1643,1644,1645,1646,42,530],"nuxt3","content","tailwind","nuxt-studio","typescript",{"title":249,"description":32},"molkidesign","Full Nuxt 3 website for a real estate company with scroll animations, Nuxt Content, Tailwind CSS, Nuxt Studio, TypeScript, and GSAP.","4RGEs1ernHvfNh4fF0PYopaLUZ3ohGiyW7pQHKQnS5I",{"id":1652,"title":253,"body":1653,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":1667,"liveLinkLabel":36,"meta":1668,"navigation":45,"path":254,"preview":36,"seo":1670,"slug":1671,"stem":255,"summary":1672,"video":1657,"__hash__":1673},"projects/projects/museums-victoria-stories.md",{"type":7,"value":1654,"toc":1665},[1655,1658,1662],[427,1656],{":autoPlay":12,":loop":12,"src":1657},"/movies/web-optimized/museums-victoria-stories.mp4",[14,1659],{":items":799,":meta":1660,":showMeta":12,"projectName":1661,"separatorIcon":24,"theme":25},"[\"Year 2021\",\"HTML5 Banners\",\"4 Sizes\"]","Museums Victoria Stories",[27,1663],{"paragraph":1664,"theme":25},"HTML5 banner campaign for Museums Victoria's Immigration Museum. Slow, grounded image-in animations with portraits fading to reveal copy across four banner sizes.",{"title":32,"searchDepth":33,"depth":33,"links":1666},[],"https://museums-victoria-stories-banners.netlify.app/",{"tags":1669,"date":1127},[810,42,811,812],{"title":253,"description":32},"museums-victoria-stories","Animated HTML5 banner set for Immigration Museum's Stories exhibition - 4 sizes with slow image reveals and grounded typography","jsuOUl67LrWd-YOZjj8WLniomtwPQeeVcdZUtbpXY4Q",{"id":1675,"title":257,"body":1676,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":1690,"liveLinkLabel":36,"meta":1691,"navigation":45,"path":258,"preview":36,"seo":1699,"slug":1700,"stem":259,"summary":1701,"video":1680,"__hash__":1702},"projects/projects/nuxt-gsap-portfolio.md",{"type":7,"value":1677,"toc":1688},[1678,1681,1685],[427,1679],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1680},"/movies/web-optimized/nuxt-gsap-portfolio.mp4",[14,1682],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1683,":meta":1684,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":257,"separatorIcon":24,"theme":25},"[\"Nuxt 4\",\"GSAP\",\"ScrollSmoother\",\"WebGL\",\"TypeScript\"]","[\"Nuxt 4 + Vue 3\",\"GSAP + TresJS\",\"SSR-safe animations\"]",[27,1686],{":pinHeightVh":405,"paragraph":1687,"theme":25},"A personal portfolio template built on Nuxt 4 with GSAP. Smooth scrolling, SSR-safe entrance animations, a WebGL fluid gradient background and SVG theme morphing.",{"title":32,"searchDepth":33,"depth":33,"links":1689},[],"https://nuxt-portfolio-gsap.netlify.app/",{"tags":1692,"date":1698},[1693,1694,42,1695,1100,1696,1646,1697,457,456],"nuxt4","vue3","scrollsmoother","tresjs","tailwindcss","2025-01-01",{"title":257,"description":32},"nuxt-gsap-portfolio","Nuxt 4 + GSAP portfolio template with smooth scrolling, SSR-safe entrance animations and a WebGL fluid gradient. Content managed via Nuxt Studio.","6pMxL_rE7gIcH6kmXvFueIyC4C1rMKkpbh-GOrx2vZA",{"id":1704,"title":265,"body":1705,"category":447,"components":36,"cover":1719,"ctaLabel":36,"description":32,"extension":38,"liveLink":1720,"liveLinkLabel":36,"meta":1721,"navigation":45,"path":266,"preview":36,"seo":1725,"slug":1726,"stem":267,"summary":1727,"video":1728,"__hash__":1729},"projects/projects/page-404.md",{"type":7,"value":1706,"toc":1717},[1707,1710,1714],[1708,1709],"project-page404",{":autoPlay":12},[14,1711],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1712,":meta":1713,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":265,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Pixel Art\",\"Custom Page\",\"Playful UX\"]","[\"Year 2019\",\"GSAP + SVG\",\"Island adventure theme\"]",[27,1715],{":pinHeightVh":405,"paragraph":1716,"theme":25},"A custom pixel-art 404 experience - a lone island with krakens, octopuses, and a passing ship to set the playful tone. Implemented with GSAP and SVG as part of a bespoke website build.",{"title":32,"searchDepth":33,"depth":33,"links":1718},[],"/assets/medias/page404-thumb.svg","https://tastysites.pl/oldportfolio/animations/page404/",{"tags":1722,"date":927},[43,42,1723,1724,41],"pixel-art","custom-page",{"title":265,"description":32},"page-404","Pixel-art custom 404 page with playful island theme: krakens, octopuses, and passing ships. Built with GSAP and SVG as part of a bespoke website.","/movies/web-optimized/page404.mp4","uFZdAJU_diyYbOeSXpQYDfGricSBp4puHB5QguXP0Ys",{"id":1731,"title":261,"body":1732,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1746,"navigation":45,"path":262,"preview":36,"seo":1748,"slug":1749,"stem":263,"summary":1750,"video":1736,"__hash__":1751},"projects/projects/pima.md",{"type":7,"value":1733,"toc":1744},[1734,1737,1741],[427,1735],{":autoPlay":12,":loop":12,"src":1736},"/movies/web-optimized/pima.mp4",[14,1738],{":items":799,":meta":1739,":showMeta":12,"projectName":1740,"separatorIcon":24,"theme":25},"[\"Year 2017\",\"HTML5 Banners\",\"3 Sizes\"]","PIMA",[27,1742],{"paragraph":1743,"theme":25},"HTML5 banner campaign for PIMA Medical Institute education programs. Three banner sizes with smooth text and image transitions promoting healthcare education.",{"title":32,"searchDepth":33,"depth":33,"links":1745},[],{"tags":1747,"date":813},[810,42,811,812],{"title":261,"description":32},"pima","Animated HTML5 banner set for PIMA Medical Institute - 3 sizes with text and image transitions","rI01z_AKQWs9TL5CwSBITp_zkK0PQA-i8gr8rNKZZgE",{"id":1753,"title":269,"body":1754,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":1770,"liveLinkLabel":36,"meta":1771,"navigation":45,"path":270,"preview":36,"seo":1776,"slug":1777,"stem":271,"summary":1778,"video":1758,"__hash__":1779},"projects/projects/pixality.md",{"type":7,"value":1755,"toc":1768},[1756,1759,1765],[427,1757],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1758},"/movies/web-optimized/pixality.mp4",[14,1760],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1761,":meta":1762,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"credit":1763,"creditUrl":1764,"separatorIcon":24,"theme":670},"[\"JavaScript\",\"SVG\",\"Project Filtering\",\"Smooth Scroll\",\"Responsive Design\"]","[\"Year 2019\",\"Design Portfolio Website\",\"JavaScript + SVG\"]","Website Style","https://www.websitestyle.pl/",[27,1766],{":pinHeightVh":405,"paragraph":1767,"theme":25},"Pixality is a design portfolio with category-based project filtering, smooth scroll interactions, and a minimalist aesthetic. Built with JavaScript and SVG for a studio showcasing planning, interior, and residential work",{"title":32,"searchDepth":33,"depth":33,"links":1769},[],"https://pixality.netlify.app/",{"tags":1772,"date":1775},[679,457,1773,862,1774,863],"filtering","minimalist","2019-09-15",{"title":269,"description":32},"pixality","Design portfolio website with project filtering, smooth scroll interactions, and a clean minimalist aesthetic.","gM5a0AFO5KsfzBIOl1yRlpw2e3MM1GFsjEEl4DUjylo",{"id":1781,"title":273,"body":1782,"category":35,"components":36,"cover":1796,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1797,"navigation":45,"path":274,"preview":36,"seo":1801,"slug":1802,"stem":275,"summary":1803,"video":1804,"__hash__":1805},"projects/projects/player-prototype.md",{"type":7,"value":1783,"toc":1794},[1784,1787,1791],[1785,1786],"project-player-prototype",{":autoPlay":12},[14,1788],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1789,":meta":1790,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":273,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"JSON-driven\",\"Filters\",\"Prototype\",\"Logo Animation\"]","[\"Year 2021\",\"GSAP + SVG Filters\",\"Dynamic data inputs\"]",[27,1792],{":pinHeightVh":405,"paragraph":1793,"theme":25},"SVG-based NFL player presentation prototype powered by JSON inputs for name and image. GSAP timelines and SVG filters drive smooth motion and transitions, enabling flexible branding and repeatable content.",{"title":32,"searchDepth":33,"depth":33,"links":1795},[],"/assets/medias/prototype-thumb.svg",{"tags":1798,"date":1127},[43,42,1799,1800,952,41],"prototype","json",{"title":273,"description":32},"player-prototype","Prototype of an SVG NFL player presentation driven by JSON data. Supports dynamic player name and image with GSAP-powered motion and SVG filters.","/movies/web-optimized/player-svg-prototype.mp4","v4n_9k7kHl3kpMwdPVn50CshmBCFi59JErV7x67yZP0",{"id":1807,"title":281,"body":1808,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":1824,"liveLinkLabel":36,"meta":1825,"navigation":45,"path":282,"preview":36,"seo":1831,"slug":1832,"stem":283,"summary":1833,"video":1812,"__hash__":1834},"projects/projects/pumpehuset.md",{"type":7,"value":1809,"toc":1822},[1810,1813,1819],[427,1811],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1812},"/movies/web-optimized/pumpehuset.mp4",[14,1814],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1815,":meta":1816,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"credit":1817,"creditUrl":1818,"separatorIcon":24,"theme":670},"[\"Tailwind CSS\",\"Swiper\",\"JavaScript\",\"Animated Navigation\",\"Responsive Design\"]","[\"Year 2021\",\"Concert Venue Website\",\"Tailwind CSS + JavaScript\"]","Baernholdt","https://baernholdt.com/",[27,1820],{":pinHeightVh":405,"paragraph":1821,"theme":25},"Pumpehuset is a Copenhagen concert venue website with bold black backgrounds, yellow accents, and large typography. Features Swiper-powered carousels, animated navigation, and smooth fade-in transitions built with Tailwind CSS",{"title":32,"searchDepth":33,"depth":33,"links":1823},[],"https://pumpehuset.dk/",{"tags":1826,"date":1830},[1644,679,1827,1828,1829,682],"swiper","music","event-venue","2021-06-15",{"title":281,"description":32},"pumpehuset","Copenhagen concert venue website with bold typography, Swiper carousels, and animated navigation, built with Tailwind CSS and modern JavaScript.","CGdBc-Do66vaLWVfDUPLMalzaiAraYgVsJk0F6wwvco",{"id":1836,"title":285,"body":1837,"category":447,"components":36,"cover":1851,"ctaLabel":36,"description":32,"extension":38,"liveLink":1852,"liveLinkLabel":36,"meta":1853,"navigation":45,"path":286,"preview":36,"seo":1861,"slug":1862,"stem":287,"summary":1863,"video":1841,"__hash__":1864},"projects/projects/pushups-tracker.md",{"type":7,"value":1838,"toc":1849},[1839,1842,1846],[427,1840],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1841},"/movies/web-optimized/pushups-tracker.mp4",[14,1843],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1844,":meta":1845,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":285,"separatorIcon":24,"theme":25},"[\"Nuxt 3\",\"Nuxt UI\",\"Nuxt Icon\",\"RxDB\",\"Dexie.js\",\"WebRTC\",\"GSAP\"]","[\"Year 2025\",\"Local-first Application\",\"Real-time P2P Updates\"]",[27,1847],{":pinHeightVh":405,"paragraph":1848,"theme":25},"Pushups Tracker is a local-first Nuxt 3 application using TypeScript, RxDB, Dexie.js and WebRTC for peer-to-peer sync. It works without a server, keeping data on-device while sharing updates instantly between friends. GSAP adds polish to the motion and micro-interactions.",{"title":32,"searchDepth":33,"depth":33,"links":1850},[],"/assets/medias/pushups-thumb.svg","https://pushup-tracker.netlify.app/",{"tags":1854,"date":531},[1642,1855,1856,1646,1857,1858,1859,42,1860],"nuxt-ui","nuxt-icon","rxdb","dexie","webrtc","local-first",{"title":285,"description":32},"pushups-tracker","Local-first Nuxt app with TypeScript, RxDB, Dexie.js, WebRTC, Nuxt UI, and GSAP for real-time pushups tracking between friends without a server.","ZJgUoxLtNLAQjWTYCdPQGs2oEDORc291SMEwfO3RsUs",{"id":1866,"title":289,"body":1867,"category":447,"components":36,"cover":1887,"ctaLabel":36,"description":32,"extension":38,"liveLink":1888,"liveLinkLabel":1889,"meta":1890,"navigation":45,"path":290,"preview":36,"seo":1894,"slug":1895,"stem":291,"summary":1896,"video":1871,"__hash__":1897},"projects/projects/quorum.md",{"type":7,"value":1868,"toc":1885},[1869,1872,1876,1879,1882],[427,1870],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1871},"/movies/web-optimized/quorum.mp4",[14,1873],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1874,":meta":1875,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":289,"separatorIcon":24,"theme":670},"[\"Nuxt 4\",\"RxDB\",\"WebRTC\",\"Playwright\",\"Local-first\"]","[\"Year 2026\",\"Local-first Application\",\"Peer-to-peer Sync, Signed Writes\"]",[27,1877],{":pinHeightVh":405,"paragraph":1878,"theme":25},"Quorum is group scheduling with no database server. Browsers sync with each other directly over WebRTC and every write is signed with a per-device key. It is built on Nuxt 4 and RxDB, and tested with Playwright runs that prove two browsers converge on the same state.",[427,1880],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":1881},"/movies/web-optimized/quorum-availability.mp4",[427,1883],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":478,"src":1884},"/movies/web-optimized/quorum-journal.mp4",{"title":32,"searchDepth":33,"depth":33,"links":1886},[],"/assets/medias/quorum-thumb.jpg","https://quorum.tastysites.pl/","Open the live app",{"tags":1891,"date":1893},[1693,1857,1859,1892,1860],"playwright","2026-09-29",{"title":289,"description":32},"quorum","Group scheduling with no database server. Browsers sync with each other directly and every write is signed with a per-device key. Built on Nuxt 4, RxDB and WebRTC, tested with Playwright runs that prove two browsers converge.","-aj7dJ801rTFk_VHbwTjCv-vuWYrzk0QZx2Z-wQI4Qc",{"id":1899,"title":293,"body":1900,"category":447,"components":36,"cover":1914,"ctaLabel":36,"description":32,"extension":38,"liveLink":1915,"liveLinkLabel":36,"meta":1916,"navigation":45,"path":294,"preview":36,"seo":1921,"slug":1922,"stem":295,"summary":1923,"video":1904,"__hash__":1924},"projects/projects/releasd.md",{"type":7,"value":1901,"toc":1912},[1902,1905,1909],[427,1903],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1904},"/movies/web-optimized/releasd.mp4",[14,1906],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1907,":meta":1908,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":293,"separatorIcon":24,"theme":670},"[\"Nuxt 4\",\"Nuxt UI 4\",\"Nuxt Content\",\"TypeScript\"]","[\"Year 2025 - 2026\",\"SaaS Marketing Site\",\"Nuxt 2 to Nuxt 4 Rebuild\"]",[27,1910],{":pinHeightVh":405,"paragraph":1911,"theme":25},"Releasd is the marketing site for a PR reporting SaaS. The work started as maintenance of an existing Nuxt 2 site and became a full rebuild on Nuxt 4, with Nuxt UI 4 for the interface and Nuxt Content for the pages the team edits.",{"title":32,"searchDepth":33,"depth":33,"links":1913},[],"/assets/medias/releasd-thumb.jpg","https://www.releasd.com/",{"tags":1917,"date":1920},[1693,1855,1918,1646,1919],"nuxt-content","saas","2025-09-20",{"title":293,"description":32},"releasd","Marketing site for a PR reporting SaaS. Started as maintenance of a Nuxt 2 site and became a full rebuild on Nuxt 4, Nuxt UI 4 and Nuxt Content.","XclaWlstN9jW1niU9ibremxoPwQnU4waEPbsLxS_MIU",{"id":1926,"title":297,"body":1927,"category":447,"components":36,"cover":1941,"ctaLabel":36,"description":32,"extension":38,"liveLink":1942,"liveLinkLabel":36,"meta":1943,"navigation":45,"path":298,"preview":36,"seo":1948,"slug":1949,"stem":299,"summary":1950,"video":1931,"__hash__":1951},"projects/projects/riverscape.md",{"type":7,"value":1928,"toc":1939},[1929,1932,1936],[427,1930],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1931},"/movies/web-optimized/riverscape.mp4",[14,1933],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1934,":meta":1935,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":297,"separatorIcon":24,"theme":670},"[\"Nuxt 2\",\"Headless WordPress\",\"Locomotive Scroll\",\"GSAP Animations\",\"Scroll Animations\"]","[\"Year 2020\",\"Real Estate Website\",\"Nuxt 2 + Headless WP + GSAP\"]",[27,1937],{":pinHeightVh":405,"paragraph":1938,"theme":25},"Riverscape is a Nuxt 2 website powered by a headless WordPress backend. Locomotive Scroll drives smooth scrolling, while GSAP orchestrates the animation layer for refined, scroll-triggered experiences across pages.",{"title":32,"searchDepth":33,"depth":33,"links":1940},[],"/assets/medias/riverscape-thumb.svg","https://www.riverscape.co.uk/",{"tags":1944,"date":683},[1945,1946,1947,42,530,1616],"nuxt2","headless-wordpress","locomotive-scroll",{"title":297,"description":32},"riverscape","Nuxt 2 + headless WordPress website with Locomotive Scroll, GSAP, and scroll-driven animations for a London-based real estate company.","d2gu7OFnZ3hXkE8sg_50qAOHn4Snkvc2m3H8Z8or8Fs",{"id":1953,"title":301,"body":1954,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":1968,"navigation":45,"path":302,"preview":36,"seo":1970,"slug":1971,"stem":303,"summary":1972,"video":1958,"__hash__":1973},"projects/projects/scca.md",{"type":7,"value":1955,"toc":1966},[1956,1959,1963],[427,1957],{":autoPlay":12,":loop":12,"src":1958},"/movies/web-optimized/scca.mp4",[14,1960],{":items":799,":meta":1961,":showMeta":12,"projectName":1962,"separatorIcon":24,"theme":25},"[\"Year 2017\",\"HTML5 Banners\",\"2 Sizes\"]","SCCA",[27,1964],{"paragraph":1965,"theme":25},"HTML5 banner campaign for the Seattle Cancer Care Alliance. Two banner sizes with SVG-driven animations and smooth GSAP timeline sequences.",{"title":32,"searchDepth":33,"depth":33,"links":1967},[],{"tags":1969,"date":813},[810,42,811,812,43],{"title":301,"description":32},"scca","Animated HTML5 banner set for Seattle Cancer Care Alliance - 2 sizes with SVG animations","dARz8wt8_q2K2dYZUbc3UoZaUfr75MkwWPjotyqhY8s",{"id":1975,"title":60,"body":1976,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":1990,"liveLinkLabel":36,"meta":1991,"navigation":45,"path":61,"preview":36,"seo":1994,"slug":1995,"stem":62,"summary":1996,"video":1980,"__hash__":1997},"projects/projects/site314.md",{"type":7,"value":1977,"toc":1988},[1978,1981,1985],[427,1979],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":1980},"/movies/web-optimized/site314.mp4",[14,1982],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1983,":meta":1984,":pinHeightVh":22,":projectName":60,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"separatorIcon":24,"theme":670},"[\"WordPress\",\"JavaScript\",\"Custom Animations\",\"Responsive Design\",\"Portfolio Showcase\"]","[\"Year 2019\",\"Interactive Agency Website\",\"WordPress + JavaScript\"]",[27,1986],{":pinHeightVh":405,"paragraph":1987,"theme":25},"314 is a Polish interactive agency website featuring smooth carousel animations, scroll-driven interactions, and organized portfolio grid layouts. Built with WordPress and custom JavaScript for a studio with over 2,000 completed projects",{"title":32,"searchDepth":33,"depth":33,"links":1989},[],"https://314.pl/",{"tags":1992,"date":653},[452,679,1993,457,862,682],"agency",{"title":60,"description":32},"site314","Polish interactive agency website with a portfolio showcase, custom animations, and responsive layouts, built with WordPress and JavaScript.","3MDJD36xzDpcpzIhw_H91B5Py0GYaMHO3BrpO2KBICc",{"id":1999,"title":305,"body":2000,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2014,"navigation":45,"path":306,"preview":36,"seo":2016,"slug":2017,"stem":307,"summary":2018,"video":2004,"__hash__":2019},"projects/projects/skcar.md",{"type":7,"value":2001,"toc":2012},[2002,2005,2009],[427,2003],{":autoPlay":12,":loop":12,"src":2004},"/movies/web-optimized/skcar.mp4",[14,2006],{":items":799,":meta":2007,":showMeta":12,"projectName":2008,"separatorIcon":24,"theme":25},"[\"Year 2017\",\"HTML5 Banners\",\"4 Sizes\"]","SKCAR",[27,2010],{"paragraph":2011,"theme":25},"HTML5 banner campaign for Seattle King County Association of Realtors. Four banner sizes with smooth text reveal sequences and GSAP timeline animations promoting housing resources.",{"title":32,"searchDepth":33,"depth":33,"links":2013},[],{"tags":2015,"date":813},[810,42,811,812],{"title":305,"description":32},"skcar","Animated HTML5 banner set for Seattle King County Association of Realtors - 4 sizes with smooth text reveal sequences","RtaZWMDOyRPUYicP6zEUhxK-QqU1QoZQkS0nDdeveiQ",{"id":2021,"title":385,"body":2022,"category":409,"components":36,"cover":2035,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2036,"navigation":45,"path":386,"preview":36,"seo":2038,"slug":2039,"stem":387,"summary":2040,"video":2041,"__hash__":2042},"projects/projects/sliwka-w-kompot.md",{"type":7,"value":2023,"toc":2033},[2024,2027,2030],[2025,2026],"project-sliwka",{":autoPlay":12},[14,2028],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":1397,":meta":2029,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":385,"separatorIcon":24,"theme":670},"[\"Year 2022\",\"GSAP + SVG Morph\",\"Logo Animation\"]",[27,2031],{":pinHeightVh":405,"paragraph":2032,"theme":25},"Logo animation for a restaurant, built with GSAP morphing and smooth motion for a playful, fluid identity. SVG-based for crisp rendering at any size.",{"title":32,"searchDepth":33,"depth":33,"links":2034},[],"/assets/medias/sliwka-thumb.svg",{"tags":2037,"date":978},[43,42,555,651,41],{"title":385,"description":32},"sliwka-w-kompot","SVG logo animation for a restaurant using GSAP Morphing and smooth motion.","/movies/web-optimized/sliwka-w-kompot.mp4","6odXWDgraXQAQM3u_JbQqOSv7DJV4hVGmqYR7qHBatk",{"id":2044,"title":321,"body":2045,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2057,"navigation":45,"path":322,"preview":36,"seo":2059,"slug":2060,"stem":323,"summary":2061,"video":2049,"__hash__":2062},"projects/projects/snocs.md",{"type":7,"value":2046,"toc":2055},[2047,2050,2052],[427,2048],{":autoPlay":12,":loop":12,"src":2049},"/movies/web-optimized/snocs.mp4",[14,2051],{":items":799,":meta":1961,":showMeta":12,"projectName":321,"separatorIcon":24,"theme":25},[27,2053],{"paragraph":2054,"theme":25},"HTML5 banner campaign for Snoqualmie Casino. Two banner sizes with smooth image crossfades and text reveal animations.",{"title":32,"searchDepth":33,"depth":33,"links":2056},[],{"tags":2058,"date":813},[810,42,811,812],{"title":321,"description":32},"snocs","Animated HTML5 banner set for Snoqualmie Casino - 2 sizes with smooth image and text transitions","rqnQgmwQkvRXp1eXLKbuHB2RaXUv96OrllZpi0Pw3J0",{"id":2064,"title":325,"body":2065,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2078,"navigation":45,"path":326,"preview":36,"seo":2080,"slug":2081,"stem":327,"summary":2082,"video":2069,"__hash__":2083},"projects/projects/soundtransit-orcacard.md",{"type":7,"value":2066,"toc":2076},[2067,2070,2073],[427,2068],{":autoPlay":12,":loop":12,"src":2069},"/movies/web-optimized/soundtransit-orcacard.mp4",[14,2071],{":items":799,":meta":2007,":showMeta":12,"projectName":2072,"separatorIcon":24,"theme":25},"SoundTransit Orca Card",[27,2074],{"paragraph":2075,"theme":25},"HTML5 banner campaign for Sound Transit's Orca Card. Four banner sizes with sliding text reveals and a scale-in card animation promoting Seattle-area transit passes.",{"title":32,"searchDepth":33,"depth":33,"links":2077},[],{"tags":2079,"date":813},[810,42,811,812],{"title":325,"description":32},"soundtransit-orcacard","Animated HTML5 banner set for Sound Transit's Orca Card campaign - 4 sizes with sliding text and card scale reveal","HOKLQxSTAh0SM-lAeyMMwyZ__PdgA6vdI4m01QfT5yQ",{"id":2085,"title":329,"body":2086,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2100,"navigation":45,"path":330,"preview":36,"seo":2102,"slug":2103,"stem":331,"summary":2104,"video":2090,"__hash__":2105},"projects/projects/soundtransit-punishing.md",{"type":7,"value":2087,"toc":2098},[2088,2091,2095],[427,2089],{":autoPlay":12,":loop":12,"src":2090},"/movies/web-optimized/soundtransit-punishing.mp4",[14,2092],{":items":2093,":meta":2007,":showMeta":12,"projectName":2094,"separatorIcon":24,"theme":25},"[\"GSAP\",\"HTML5\",\"Banners\",\"Video\"]","SoundTransit Punishing",[27,2096],{"paragraph":2097,"theme":25},"HTML5 banner campaign for Sound Transit's Punishing Commute series. Four banner sizes with sliding text reveals and embedded video promoting Seattle-area transit alternatives.",{"title":32,"searchDepth":33,"depth":33,"links":2099},[],{"tags":2101,"date":813},[810,42,811,812],{"title":329,"description":32},"soundtransit-punishing","Animated HTML5 banner set for Sound Transit's Punishing Commute campaign - 4 sizes with sliding text and embedded video","uWRe2PmiYomabc52MFf0uJHwrZOonK5CigfFtrXwL1A",{"id":2107,"title":333,"body":2108,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2121,"navigation":45,"path":334,"preview":36,"seo":2123,"slug":2124,"stem":335,"summary":2125,"video":2126,"__hash__":2127},"projects/projects/spectrometer.md",{"type":7,"value":2109,"toc":2119},[2110,2113,2116],[2111,2112],"project-spectrometer",{":autoPlay":12},[14,2114],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2115,":meta":1263,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":333,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"MorphSVG\",\"DrawSVG\",\"MotionPath\",\"CustomEase\"]",[27,2117],{":pinHeightVh":405,"paragraph":2118,"theme":25},"Mass spectrometer visualization with molecule breakdown, particle separation, and data chart morphing. Built with GSAP premium plugins.",{"title":32,"searchDepth":33,"depth":33,"links":2120},[],{"tags":2122,"date":416},[42,43,651,412,35,1295],{"title":333,"description":32},"spectrometer","Scientific mass spectrometer animation - molecule enters chamber, electron gun breaks molecular bonds, particles separate through magnetic fields, and results display as an interactive chart with color-coded data visualization.","/movies/web-optimized/spectrometer.mp4","oNmL8FTU7uYTWhnky2Y18iaWrpvdcFB2Ow_zPyOiVh0",{"id":2129,"title":337,"body":2130,"category":409,"components":36,"cover":2144,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2145,"navigation":45,"path":338,"preview":36,"seo":2147,"slug":2148,"stem":339,"summary":2149,"video":2150,"__hash__":2151},"projects/projects/spectrum.md",{"type":7,"value":2131,"toc":2142},[2132,2135,2139],[2133,2134],"project-spectrum",{":autoPlay":12},[14,2136],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2137,":meta":2138,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":337,"separatorIcon":24,"theme":670},"[\"GSAP\",\"SVG\",\"DrawSVG\",\"Sound Wave\",\"Logo Animation\",\"Email Signature GIF\"]","[\"Year 2024\",\"GSAP + SVG Draw\",\"Logo Animation\"]",[27,2140],{":pinHeightVh":405,"paragraph":2141,"theme":25},"SVG logo animation representing a sound wave, animated with GSAP DrawSVG and smooth color transitions. Later adapted as a footer email signature GIF.",{"title":32,"searchDepth":33,"depth":33,"links":2143},[],"/assets/medias/spectrum-thumb.svg",{"tags":2146,"date":558},[43,42,555,412,41],{"title":337,"description":32},"spectrum","SVG logo animation built as a multi-rectangle sound wave with GSAP DrawSVG and smooth color transitions. Later adapted as an email footer signature GIF.","/movies/web-optimized/spectrum-way.mp4","hbvw2oOzYJTlx_4j_NrGp75H1KHaWiiwi47FtZ8muDM",{"id":2153,"title":309,"body":2154,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2167,"navigation":45,"path":310,"preview":36,"seo":2169,"slug":2170,"stem":311,"summary":2171,"video":2158,"__hash__":2172},"projects/projects/spthe.md",{"type":7,"value":2155,"toc":2165},[2156,2159,2162],[427,2157],{":autoPlay":12,":loop":12,"src":2158},"/movies/web-optimized/spthe.mp4",[14,2160],{":items":799,":meta":2007,":showMeta":12,"projectName":2161,"separatorIcon":24,"theme":25},"SPTHE",[27,2163],{"paragraph":2164,"theme":25},"HTML5 banner campaign for proton beam therapy medical services. Four banner sizes with smooth text and image transitions promoting advanced cancer treatment options.",{"title":32,"searchDepth":33,"depth":33,"links":2166},[],{"tags":2168,"date":813},[810,42,811,812],{"title":309,"description":32},"spthe","Animated HTML5 banner set for proton beam therapy medical campaign - 4 sizes with smooth text and image transitions","pZWIEeJ8y7365ikkOfjd1jDXxHSNWbPGQkv2cGairfo",{"id":2174,"title":313,"body":2175,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2189,"navigation":45,"path":314,"preview":36,"seo":2191,"slug":2192,"stem":315,"summary":2193,"video":2179,"__hash__":2194},"projects/projects/ssrta.md",{"type":7,"value":2176,"toc":2187},[2177,2180,2184],[427,2178],{":autoPlay":12,":loop":12,"src":2179},"/movies/web-optimized/ssrta.mp4",[14,2181],{":items":799,":meta":2182,":showMeta":12,"projectName":2183,"separatorIcon":24,"theme":25},"[\"Year 2018\",\"HTML5 Banners\",\"4 Sizes\"]","SSRTA Explore",[27,2185],{"paragraph":2186,"theme":25},"HTML5 banner campaign for Silver Star Resort Tourism Association's Explore campaign. Four banner sizes with smooth image crossfade transitions and text reveals promoting tourism activities.",{"title":32,"searchDepth":33,"depth":33,"links":2188},[],{"tags":2190,"date":416},[810,42,811,812],{"title":313,"description":32},"ssrta","Animated HTML5 banner set for Silver Star Resort Tourism Association - 4 sizes with image crossfade transitions","vT61p63_Ev3SjZh_-T654-UHcDor1bQF8pUajjh15Rg",{"id":2196,"title":341,"body":2197,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":2211,"liveLinkLabel":36,"meta":2212,"navigation":45,"path":342,"preview":36,"seo":2219,"slug":2220,"stem":343,"summary":2221,"video":2201,"__hash__":2222},"projects/projects/tabellae.md",{"type":7,"value":2198,"toc":2209},[2199,2202,2206],[427,2200],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":2201},"/movies/web-optimized/tabellae.mp4",[14,2203],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2204,":meta":2205,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"credit":1817,"creditUrl":1818,"separatorIcon":24,"theme":670},"[\"WordPress\",\"WPML\",\"Multi-Language\",\"Interactive Filtering\",\"Smooth Animations\"]","[\"Year 2020\",\"Enterprise Consulting Website\",\"WordPress + WPML\"]",[27,2207],{":pinHeightVh":405,"paragraph":2208,"theme":25},"Tabellae is an enterprise consulting website with multi-language support across five languages, interactive case study filtering, and subtle scroll animations. Built with WordPress and WPML for a document management firm serving 600+ clients globally",{"title":32,"searchDepth":33,"depth":33,"links":2210},[],"https://tabellae.com/",{"tags":2213,"date":2218},[452,2214,2215,2216,2217,682],"wpml","enterprise","multilingual","consulting","2020-09-15",{"title":341,"description":32},"tabellae","Enterprise consulting firm website with multi-language support, interactive case study filtering, and smooth scroll animations, built with WordPress and WPML.","Z9mJr9bAqYpfSSU24pgzx8AA8dnxEV6YEKMJG_THD7o",{"id":2224,"title":345,"body":2225,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":2237,"liveLinkLabel":36,"meta":2238,"navigation":45,"path":346,"preview":36,"seo":2240,"slug":2241,"stem":347,"summary":2242,"video":2229,"__hash__":2243},"projects/projects/the-tina-turner-musical.md",{"type":7,"value":2226,"toc":2235},[2227,2230,2232],[427,2228],{":autoPlay":12,":loop":12,"src":2229},"/movies/web-optimized/the-tina-turner-musical.mp4",[14,2231],{":items":799,":meta":1118,":showMeta":12,"projectName":345,"separatorIcon":24,"theme":25},[27,2233],{"paragraph":2234,"theme":25},"HTML5 banner campaign for The Tina Turner Musical. Cinematic black backdrop with flickering golden brocade face reveal, smooth draw-in text effects and twinkling star accents.",{"title":32,"searchDepth":33,"depth":33,"links":2236},[],"https://the-tina-turner-musical-banners.netlify.app/",{"tags":2239,"date":1127},[810,42,811,812],{"title":345,"description":32},"the-tina-turner-musical","Animated HTML5 banner set for The Tina Turner Musical - 6 sizes with golden brocade reveal, draw-in text effects and flickering stars","5XdYiLf52n9HcnYOavXiLAPzCCTsetsNTgeC9iRSY64",{"id":2245,"title":349,"body":2246,"category":447,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":2260,"liveLinkLabel":36,"meta":2261,"navigation":45,"path":350,"preview":36,"seo":2265,"slug":2266,"stem":351,"summary":2267,"video":2250,"__hash__":2268},"projects/projects/trefl-sport.md",{"type":7,"value":2247,"toc":2258},[2248,2251,2255],[427,2249],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"preload":430,"src":2250},"/movies/web-optimized/trefl-sport.mp4",[14,2252],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2253,":meta":2254,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":349,"separatorIcon":24,"theme":25},"[\"GSAP\",\"Vite\",\"Website\",\"Sports Branding\",\"SVG Animation\"]","[\"Year 2020\",\"GSAP + Vite\",\"Website\"]",[27,2256],{":pinHeightVh":405,"paragraph":2257,"theme":25},"Interactive sports website for Trefl Gdansk and Trefl Sopot featuring GSAP-powered shield animations and hover interactions. Built with Vite.",{"title":32,"searchDepth":33,"depth":33,"links":2259},[],"https://trefl-sport.netlify.app/",{"tags":2262,"date":458},[42,447,2263,2264],"vite","sports",{"title":349,"description":32},"trefl-sport","Interactive sports website for Trefl Gdansk and Trefl Sopot with GSAP-powered animations.","ANR40O_oIkuB1x7PIxHlf4CdibXj-jPmS0uMZuhvB7M",{"id":2270,"title":353,"body":2271,"category":409,"components":36,"cover":2285,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2286,"navigation":45,"path":354,"preview":36,"seo":2288,"slug":2289,"stem":355,"summary":2290,"video":2291,"__hash__":2292},"projects/projects/vibeuu.md",{"type":7,"value":2272,"toc":2283},[2273,2276,2280],[2274,2275],"project-vibeuu",{":autoPlay":12},[14,2277],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2278,":meta":2279,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":353,"separatorIcon":24,"theme":670},"[\"GSAP\",\"SVG\",\"DrawSVG\",\"Ball Jump\",\"Logo Animation\",\"Email Signature GIF\"]","[\"Year 2025\",\"GSAP + SVG Draw\",\"Playful motion branding\"]",[27,2281],{":pinHeightVh":405,"paragraph":2282,"theme":25},"Vibeuu is an SVG logo animation combining clean DrawSVG strokes with a playful ball jump for character and momentum. Built with GSAP for precise timing and export-ready motion, later adapted as a footer email signature GIF.",{"title":32,"searchDepth":33,"depth":33,"links":2284},[],"/assets/medias/vibeuu-thumb.svg",{"tags":2287,"date":1698},[43,42,555,412,41],{"title":353,"description":32},"vibeuu","SVG logo animation featuring DrawSVG line work and a playful ball jump, built with GSAP. Later adapted as a footer signature GIF.","/movies/web-optimized/vibeuu.mp4","fHZuxEAGagDl2QapQ3NHjVwu0t8ICKdx5vcACrOTu0w",{"id":2294,"title":357,"body":2295,"category":35,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":2309,"liveLinkLabel":36,"meta":2310,"navigation":45,"path":358,"preview":36,"seo":2316,"slug":2317,"stem":359,"summary":2318,"video":2299,"__hash__":2319},"projects/projects/wepushbuttons.md",{"type":7,"value":2296,"toc":2307},[2297,2300,2304],[427,2298],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":2299},"/movies/web-optimized/wepushbuttons.mp4",[14,2301],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2302,":meta":2303,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":357,"separatorIcon":24,"theme":670},"[\"CSS Animation\",\"JavaScript\",\"SVG\",\"Interactive Illustration\",\"Creative Motion\"]","[\"Year 2018\",\"Animated Illustration\",\"CSS + JavaScript Animation\"]",[27,2305],{":pinHeightVh":405,"paragraph":2306,"theme":25},"We Push Buttons is an animated illustration bringing a creative workspace to life with character animations and interactive elements. Built with CSS keyframe animations and JavaScript-driven interactivity for a playful, looping scene",{"title":32,"searchDepth":33,"depth":33,"links":2308},[],"https://tastysites.pl/oldportfolio/animations/wepushbuttons/",{"tags":2311,"date":2315},[2312,679,2313,2314,682],"css-animation","illustration","creative","2018-06-15",{"title":357,"description":32},"wepushbuttons","Animated illustration of a creative workspace with interactive button-pushing characters, built with CSS and JavaScript animation.","Th6qPEZX3VLkqHNpqah5kgk7KZzDjOQTFxuRTaFzg7k",{"id":2321,"title":317,"body":2322,"category":807,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2335,"navigation":45,"path":318,"preview":36,"seo":2337,"slug":2338,"stem":319,"summary":2339,"video":2326,"__hash__":2340},"projects/projects/winterbreak.md",{"type":7,"value":2323,"toc":2333},[2324,2327,2330],[427,2325],{":autoPlay":12,":loop":12,"src":2326},"/movies/web-optimized/winterbreak.mp4",[14,2328],{":items":1038,":meta":2007,":showMeta":12,"projectName":2329,"separatorIcon":24,"theme":25},"Winter Break",[27,2331],{"paragraph":2332,"theme":25},"HTML5 banner campaign for Settings Winter Break promotion. Four banner sizes with snowfall particle effects and smooth GSAP text transitions.",{"title":32,"searchDepth":33,"depth":33,"links":2334},[],{"tags":2336,"date":813},[810,42,811,812,413],{"title":317,"description":32},"winterbreak","Animated HTML5 banner set for Settings Winter Break campaign - 4 sizes with snowfall particle effects","k1b52oFYdTRnqbaEjX37E3JTEphrQpEpKwTVLIbM_74",{"id":2342,"title":361,"body":2343,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":2357,"liveLinkLabel":36,"meta":2358,"navigation":45,"path":362,"preview":36,"seo":2363,"slug":2364,"stem":363,"summary":2365,"video":2347,"__hash__":2366},"projects/projects/wobi.md",{"type":7,"value":2344,"toc":2355},[2345,2348,2352],[427,2346],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":2347},"/movies/web-optimized/wobi.mp4",[14,2349],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2350,":meta":2351,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":361,"separatorIcon":24,"theme":670},"[\"WordPress\",\"GSAP\",\"ScrollTrigger\",\"SVG Path Animation\",\"Scroll-Driven Motion\"]","[\"Year 2021\",\"Insurance Company Website\",\"WordPress + GSAP ScrollTrigger\"]",[27,2353],{":pinHeightVh":405,"paragraph":2354,"theme":25},"Wobi is an insurance company website where a ball animates along a hidden path as you scroll, connecting sections with fluid motion. The path was constructed from strategically placed waypoints, stitched into an SVG path that the ball follows via GSAP ScrollTrigger.",{"title":32,"searchDepth":33,"depth":33,"links":2356},[],"https://www.wobi.co.il/",{"tags":2359,"date":2362},[452,42,499,652,2360,2361],"path-animation","insurance","2021-01-15",{"title":361,"description":32},"wobi","Insurance company website with a scroll-driven ball animation that follows an invisible path through the page, built with WordPress and GSAP ScrollTrigger.","bUjSGs8OZanSvAQ0ONTPgt33GHWQ9JL16Zc9cLNPIj8",{"id":2368,"title":365,"body":2369,"category":35,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2383,"navigation":45,"path":366,"preview":36,"seo":2385,"slug":2386,"stem":367,"summary":2387,"video":2388,"__hash__":2389},"projects/projects/wordpress-widget.md",{"type":7,"value":2370,"toc":2381},[2371,2374,2378],[2372,2373],"project-wordpress-widget",{":autoPlay":12},[14,2375],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2376,":meta":2377,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":365,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"DrawSVG\",\"Custom Animation\",\"Progress Tracker\"]","[\"Year 2019\",\"GSAP + SVG + DrawSVG\",\"Custom Animation\"]",[27,2379],{":pinHeightVh":405,"paragraph":2380,"theme":25},"Custom animated progress tracker widget built for a WordPress site. Four sections draw in sequentially with shuffled stagger reveals and circular progress indicators.",{"title":32,"searchDepth":33,"depth":33,"links":2382},[],{"tags":2384,"date":927},[43,42,412,35,733],{"title":365,"description":32},"wordpress-widget","Animated circular progress tracker widget with four sequential sections - personal profile, visa application, required documents, and payments - featuring DrawSVG reveals and shuffled stagger effects.","/movies/web-optimized/wordpress-widget.mp4","pd2SZwbIu4QbKU9wd6lVOhaAn4adqusyj58PBWcEQ2U",{"id":2391,"title":369,"body":2392,"category":409,"components":36,"cover":2405,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2406,"navigation":45,"path":370,"preview":36,"seo":2409,"slug":2410,"stem":371,"summary":2411,"video":2412,"__hash__":2413},"projects/projects/working-jobs-vyne.md",{"type":7,"value":2393,"toc":2403},[2394,2397,2400],[2395,2396],"project-working-jobs-vyne",{":autoPlay":12},[14,2398],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2399,":meta":1472,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":369,"separatorIcon":24,"theme":670},"[\"GSAP\",\"SVG\",\"Gradients\",\"Smooth Motion\",\"Logo Animation\"]",[27,2401],{":pinHeightVh":405,"paragraph":2402,"theme":25},"SVG logo animation for a freelancers work platform featuring smooth gradient transitions and motion. Built with GSAP for fluid timing and polish.",{"title":32,"searchDepth":33,"depth":33,"links":2404},[],"/assets/medias/working-jobs-vyne-thumb.svg",{"tags":2407,"date":416},[43,42,555,2408,41],"gradients",{"title":369,"description":32},"working-jobs-vyne","SVG logo animation for a freelancer hub platform with smooth gradient transitions, built using GSAP.","/movies/web-optimized/working-jobs-vyne.mp4","mBkcRYCGC6_srXLz7T_UVtMyRRwFX4cH0biyhOFIepc",{"id":2415,"title":373,"body":2416,"category":409,"components":36,"cover":32,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2429,"navigation":45,"path":374,"preview":36,"seo":2431,"slug":2432,"stem":375,"summary":2433,"video":2434,"__hash__":2435},"projects/projects/yamahata.md",{"type":7,"value":2417,"toc":2427},[2418,2421,2424],[2419,2420],"project-yamahata",{":autoPlay":12},[14,2422],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2423,":meta":1472,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":373,"separatorIcon":24,"theme":25},"[\"GSAP\",\"SVG\",\"Logo Animation\",\"Color Fill\",\"Sequential\"]",[27,2425],{":pinHeightVh":405,"paragraph":2426,"theme":25},"Logo animation for Yamahata with sequential color fill effects. Each letter transitions to a random vibrant color then fades back to white.",{"title":32,"searchDepth":33,"depth":33,"links":2428},[],{"tags":2430,"date":416},[43,42,409],{"title":373,"description":32},"yamahata","Sequential color fill logo animation for Yamahata - each letter shifts to a random vibrant color then returns to white against a black background.","/movies/web-optimized/yamahata.mp4","XZwJGrn0lAUROxeEtsoxk_UOemUrXxD0Kn-C1blpGks",{"id":2437,"title":377,"body":2438,"category":409,"components":36,"cover":2452,"ctaLabel":36,"description":32,"extension":38,"liveLink":36,"liveLinkLabel":36,"meta":2453,"navigation":45,"path":378,"preview":36,"seo":2456,"slug":2457,"stem":379,"summary":2449,"video":2458,"__hash__":2459},"projects/projects/zaksa.md",{"type":7,"value":2439,"toc":2450},[2440,2443,2447],[2441,2442],"project-zaksa",{":autoPlay":12},[14,2444],{":durationSec":16,":fontSizeVw":17,":iconGapVw":18,":iconSizeVw":19,":items":2445,":meta":2446,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":377,"separatorIcon":24,"theme":670},"[\"Vite\",\"GSAP\",\"SVG\",\"GSAP Club Plugins\"]","[\"Year 2021\",\"Logo Animation\"]",[27,2448],{":pinHeightVh":405,"paragraph":2449,"theme":25},"Dynamic logo animation for a Polish Volleyball Champion, lightweight web ready version, built so it can be used anywhere on the team website, potentially as main website header logo; built with GSAP.",{"title":32,"searchDepth":33,"depth":33,"links":2451},[],"/assets/medias/zaksa-thumb.svg",{"tags":2454,"date":2455},[41,42],"2024-08-01",{"title":377,"description":32},"zaksa","/movies/web-optimized/zaksa.mp4","YkeSp92Vq74cW4sDvScDeBaxYUDg0II_FExEgp8HC4Y",{"id":2461,"title":381,"body":2462,"category":447,"components":36,"cover":36,"ctaLabel":36,"description":32,"extension":38,"liveLink":2476,"liveLinkLabel":36,"meta":2477,"navigation":45,"path":382,"preview":36,"seo":2482,"slug":2483,"stem":383,"summary":2484,"video":2466,"__hash__":2485},"projects/projects/zap-black.md",{"type":7,"value":2463,"toc":2474},[2464,2467,2471],[427,2465],{":autoPlay":12,":loop":12,":muted":12,"fit":429,"poster":32,"preload":430,"src":2466},"/movies/web-optimized/zap-black.mp4",[14,2468],{":durationSec":16,":fontSizeVw":399,":iconGapVw":18,":iconSizeVw":19,":items":2469,":meta":2470,":pinHeightVh":22,":repeatBlocks":23,":showMeta":12,":uppercase":12,":wordGapVw":18,"projectName":381,"separatorIcon":24,"theme":670},"[\"Barba.js\",\"GSAP\",\"SVG Animations\",\"Scroll Pinning\",\"Page Transitions\",\"Mobile & Desktop\"]","[\"Year 2021\",\"Landing Page\",\"Barba.js + GSAP + Scroll Pinning\"]",[27,2472],{":pinHeightVh":405,"paragraph":2473,"theme":25},"Zap Black is a landing page showcasing a stress-free checkout solution designed to increase checkout ROI. Built with barba.js for smooth page transitions, GSAP for animations, and scroll pinning techniques, the experience works seamlessly across mobile and desktop devices.",{"title":32,"searchDepth":33,"depth":33,"links":2475},[],"https://zap-black.netlify.app",{"tags":2478,"date":2362},[2479,42,43,2480,680,2481],"barba.js","scroll-pinning","checkout",{"title":381,"description":32},"zap-black","Landing page featuring barba.js page transitions, GSAP animations, and scroll pinning for a stress-free checkout solution designed to increase ROI.","Def5R3im6_JQmkv3MrDBFVqSgs5jttr2IVZ_s1l35R8",1791881404757]