
<p>A prościej: lista różnych narzędzi, jakich użyłam do zbudowania tej strony.</p>



<h2 class="wp-block-heading">Tech stack</h2>



<p>Strona zbudowana jest w architekturze <a href="https://www.wpbeginner.com/beginners-guide/what-is-headless-wordpress-and-should-you-use-it/#:~:text=Headless%20WordPress%20is%20a%20term,admin%20area%20of%20a%20website.">headless WordPress</a>, która zakłada oddzielenie warstwy wizualnej strony od WordPressa i wykorzystywanie go jedynie jako system zarządzania treścią.</p>



<p>Do zbudowania warstwy wizualnej strony użyłam <a href="https://nextjs.org/">Next.js</a> oraz <a href="https://tailwindcss.com/">Tailwind CSS</a>. </p>



<p>W WordPressie korzystam z pluginu <a href="https://www.wpgraphql.com/">WPGraphQL</a>, który pozwala na pobieranie danych z WordPressa za pomocą GraphQL API &#8211; oraz z pluginu <a href="https://www.advancedcustomfields.com/">Advanced Custom Fields</a> do tworzenia customowych parametrów danego posta (np. etapu &#8220;dojrzałości&#8221; postów).</p>



<p>Do implementacji funkcjonalności &#8220;serduszek&#8221; przy stronach czy postach użyłam <a href="https://supabase.com/" data-type="link" data-id="https://supabase.com/">Supabase</a>.</p>



<h2 class="wp-block-heading">Wygląd</h2>



<p>Czcionki, jakie wykorzystałam, to <a href="https://fonts.google.com/specimen/Karla">Karla</a> (nagłówki) oraz <a href="https://fonts.google.com/specimen/Inconsolata">Inconsolata</a> (tekst w akapitach) &#8211; połączenie, które znalazłam dzięki <a href="https://www.fontpair.co/pairings/">fontpair.co</a>. Favikonę mam dzięki <a href="https://www.freepik.com/icon/sunflower_7403160#fromView=keyword&amp;page=1&amp;position=5&amp;uuid=4c05220d-78ca-412d-87a9-8b8d1bf7d075">Freepik</a>.</p>



<p>Ikony, które wykorzystuję do oznaczenia statusu postów to:</p>



<ol class="wp-block-list">
<li>Nasiono: <a href="https://www.flaticon.com/free-icons/planting">Planting icons created by Mihimihi &#8211; Flaticon</a></li>



<li>Sadzonka: <a href="https://www.flaticon.com/free-icons/bud">Bud icons created by cahiwak &#8211; Flaticon</a></li>



<li>Owoc: <a href="https://www.flaticon.com/free-icons/strawberry">Strawberry icons created by Freepik &#8211; Flaticon</a></li>
</ol>



<h2 class="wp-block-heading">Hosting &amp; inne</h2>



<p>Jako, że programistka ze mnie mierna, to w całym procesie wspomagam się <a href="https://claude.ai/">Claude</a>.</p>



<p>Strona jest w całości hostowana w <a href="https://wpengine.com/">WP Engine</a>, na dedykowanej platformie <a href="https://wpengine.com/headless-wordpress/">Headless</a>, którą gorąco polecam &#8211; bo buduję ją wraz z zespołem. 🙂</p>
