[{"data":1,"prerenderedAt":116},["ShallowReactive",2],{"project-\u002Fprojects\u002F2026\u002Fpesi-pl":3,"project-posts-\u002Fprojects\u002F2026\u002Fpesi-pl":115},{"id":4,"title":5,"agency":6,"body":7,"compare":21,"cover":62,"date":64,"description":65,"draft":66,"extension":67,"facts":68,"featured":66,"gallery":81,"galleryLead":81,"highlights":82,"image":95,"links":96,"meta":98,"navigation":99,"note":100,"ogImage":101,"path":102,"seo":103,"stack":104,"stem":111,"tags":112,"__hash__":114},"projects_en\u002Fprojects\u002F2026\u002Fpesi-pl\u002Findex.md","pesi.pl – a new version of the website","Pesi",{"type":8,"value":9,"toc":17},"minimark",[10,14],[11,12,13],"p",{},"pesi.pl is the website of the company I work for. The old version ran on Laravel, and every change – including every blog post – was pasted in by a developer, not by marketing. I rewrote it in WordPress with a block theme, so that marketing can publish on their own and follow changes on the site more easily. Claude Code wrote the code. I thought the whole thing through so that I wouldn't repeat the mistakes from the Laravel version, decided on the layout and components and checked every view. I also moved the case studies and all the blog posts so that they kept their previous look.",[11,15,16],{},"What mattered most to me was that the site is light and doesn't go on forever on a phone – the footer has the contact details, so the way there should be short.",{"title":18,"searchDepth":19,"depth":19,"links":20},"",2,[],{"before":22,"after":28,"rows":32,"note":61},{"src":23,"width":24,"height":25,"label":26,"alt":27},"\u002Fprojects\u002F2026\u002Fpesi-pl\u002Fold-home-top.webp",1440,900,"Before · the Laravel site","The old pesi.pl website – first screen",{"src":29,"width":24,"height":25,"label":30,"alt":31},"\u002Fprojects\u002F2026\u002Fpesi-pl\u002Fhome-top.webp","After · the WordPress site","The new pesi.pl website – first screen",[33,37,41,45,49,53,57],{"label":34,"before":35,"after":36},"Lighthouse performance","70","99",{"label":38,"before":39,"after":40},"JavaScript","2,055 kB","37 kB",{"label":42,"before":43,"after":44},"CSS","58 kB","16 kB",{"label":46,"before":47,"after":48},"Page size","2.6 MB","362 kB",{"label":50,"before":51,"after":52},"Requests","131","47",{"label":54,"before":55,"after":56},"Total Blocking Time","178 ms","0 ms",{"label":58,"before":59,"after":60},"Page height (px)","14,553","10,058","Home page on mobile, medians from 3 Lighthouse runs. Before – a copy of the old site from the Internet Archive (17 July 2026), sizes without the archive's scripts, times and scores approximate. Measured before analytics was added – with Google Tag Manager, the home page scores 99 (with consents) and 100 (without) in Lighthouse in Chrome.",{"desktop":29,"phone":63,"width":24,"height":25,"alt":31},"\u002Fprojects\u002F2026\u002Fpesi-pl\u002Fhome-phone-top.webp","2026-11-10","The website of the company I work for: from Laravel to WordPress with the block editor, so that marketing can publish posts on their own. Lighter, shorter on a phone and with animated 3D cubes.",false,"md",[69,72,75,78],{"value":70,"text":71},"70 → 99","home page performance in Lighthouse on mobile",{"value":73,"text":74},"2 MB → 37 kB","of JavaScript on the home page on mobile",{"value":76,"text":77},"18 → 12","phone screens to scroll through on the home page",{"value":79,"text":80},"100","accessibility, best practices and SEO in Lighthouse on all measured pages",null,[83,86,89,92],{"title":84,"text":85},"Marketing publishes on their own","Before, every change and every post was pasted in by someone from the front-end or back-end team. Now posts are made in the block editor, and an article can show who its author is.",{"title":87,"text":88},"Carousels instead of long lists","On phones and tablets, grids with many elements are carousels built with CSS scroll-snap. You can see part of the next slide, and the page is shorter – the footer with the contact details is closer.",{"title":90,"text":91},"3D cubes that don't slow the page down","A normal image loads first, and the Three.js scene only after the page has loaded – only on wider screens and not when reduced motion is on.",{"title":93,"text":94},"Scripts only when they're needed","reCAPTCHA loads the first time someone uses the form, the YouTube player after a click on the thumbnail, and the menu animations on hover.","\u002Fprojects\u002F2026\u002Fpesi-pl\u002Fthumbnail.webp",{"live":97},"https:\u002F\u002Fpesi.pl",{},true,"Claude Code wrote the code – I planned the whole thing, decided on the layout and components and checked every view. The \"before\" results were measured on a copy of the old site from the Internet Archive.","\u002Fog\u002Fprojects\u002Fpesi-pl-en.jpg","\u002Fprojects\u002F2026\u002Fpesi-pl",{"title":5,"description":65},[105,106,107,108,109,110],"WordPress","block theme","PHP","Three.js","CSS scroll-snap","no jQuery","projects\u002F2026\u002Fpesi-pl\u002Findex",[113],"wordpress","1OYREGBSoBvseV0IbYb4BGGExmdVxDJJxlTabhMs09E",[],1794588329845]