[{"data":1,"prerenderedAt":114},["ShallowReactive",2],{"navigation":3,"\u002Fprojects\u002Fstrona-sokrates-system":22,"\u002Fprojects\u002Fstrona-sokrates-system-surround":110},[4],{"title":5,"path":6,"stem":7,"children":8,"page":21},"Projects","\u002Fprojects","projects",[9,13,17],{"title":10,"path":11,"stem":12},"Klimatyzacja 24 Katowice","\u002Fprojects\u002Fklimatyzacja-katowice-24","projects\u002Fklimatyzacja-katowice-24",{"title":14,"path":15,"stem":16},"LiveTagPro","\u002Fprojects\u002Flivetagpro","projects\u002Flivetagpro",{"title":18,"path":19,"stem":20},"Sokrates system","\u002Fprojects\u002Fstrona-sokrates-system","projects\u002Fstrona-sokrates-system",false,{"id":23,"title":18,"body":24,"date":96,"description":97,"extension":98,"image":99,"link":100,"meta":101,"navigation":102,"path":19,"seo":103,"stem":20,"tags":104,"__hash__":109},"projects\u002Fprojects\u002Fstrona-sokrates-system.md",{"type":25,"value":26,"toc":89},"minimark",[27,32,41,45,50,53,57,60,64,67,71,74,77,81,86],[28,29,31],"h2",{"id":30},"o-projekcie","O projekcie:",[33,34,35,36,40],"p",{},"Projekt strony landing page ",[37,38,39],"strong",{},"systemsokrates.pl"," - zaawansowanego systemu do zarządzania szkołami i placówkami edukacyjnymi. Projekt łączy przejrzystą prezentację funkcjonalności systemu z nowoczesnym designem, tworząc profesjonalną wizytówkę produktu skierowaną zarówno do dyrektorów szkół, jak i kadry administracyjnej.",[28,42,44],{"id":43},"proces-realizacji","Proces realizacji",[46,47,49],"h4",{"id":48},"design","Design:",[33,51,52],{},"Projekt strony powstał w Figmie z wykorzystaniem najnowszych trendów w web designie: grid patterns, light rays, bento grid z animacjami i inne rozwiązania wizualne. W ramach projektu zaprojektowano również brakujące elementy identyfikacji wizualnej, w tym loga nowych modułów oraz wzorce graficzne.",[46,54,56],{"id":55},"design-to-code","Design-to-Code:",[33,58,59],{},"Przekształcenie projektu graficznego w czysty i semantyczny kod z wykorzystaniem Tailwind CSS\u002FNuxt UI dla szybkiego i elastycznego stylowania.",[46,61,63],{"id":62},"optymalizacja-assetów","Optymalizacja Assetów:",[33,65,66],{},"Wdrożenie najlepszych praktyk ładowania obrazów i fontów, zapewniających dobre wyniki w narzędziach takich jak Lighthouse.",[46,68,70],{"id":69},"interaktywność","Interaktywność:",[33,72,73],{},"Wykorzystanie Nuxt 3 do obsługi dynamicznych elementów – m.in. menu i animacji, które są \"nawadniane\" (hydration) po stronie klienta.",[33,75,76],{},"W projekcie po raz pierwszy zastosowałem nowe możliwości lazy hydration z najnowszej wersji Nuxta, dzięki czemu JavaScript poszczególnych komponentów ładuje się dopiero po pojawieniu się elementu w viewport lub po pierwszej interakcji użytkownika.",[28,78,80],{"id":79},"bento-grid-animacje","Bento grid - Animacje",[82,83],"video",{":autoplay":84,":loop":84,"src":85},"true","\u002Fprojects\u002Fsokrates\u002Fbento.mp4",[33,87,88],{},"Animacje stworzone w JavaScript i CSS, zoptymalizowane pod kątem płynności podczas scrollowania.",{"title":90,"searchDepth":91,"depth":91,"links":92},"",2,[93,94,95],{"id":30,"depth":91,"text":31},{"id":43,"depth":91,"text":44},{"id":79,"depth":91,"text":80},"2024-12-11","Landing page z projektem wizualnym.","md","\u002Fprojects\u002Fsokrates\u002Fhero.png","https:\u002F\u002Fsystemsokrates.pl\u002F",{},true,{"title":18,"description":97},[105,106,107,108],"Nuxt","figma","Tailwind CSS 4","Nuxt UI","iVuncCuYkJNyrC7Fldql75Ba4FUB9wj1J1lTvPkPCU4",[111,113],{"title":14,"path":15,"stem":16,"description":112,"children":-1},"Landing page.",null,1775768023430]