add CV and Podcasts pages, update About section with new card layout

zola/content/about.md

@@ -2,79 +2,59 @@
 title = "About me"
 +++
 
-<article
+{% card(title="More info about me!") %}
-              class="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border"
+Hi! I am Gabriel and I am 23 years old.  
-            >
+I study Bioinformatics at the University of Gdansk.
-              <section
+
-                class="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-a:text-blue-500 text-white flex flex-col"
+I'm fluent in Polish and English and currently work as a Python Developer at digimonkeys.com.
-              >
+
-                <h6
+I have published one article — you can read it [here](https://dx.doi.org/10.1038/s41598-023-44488-7).
-                  class="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center"
+{% end %}
-                >
+
-                  More info about me!
+{% card(title="Hobbies") %}
-                </h6>
+
-                <p>
+<ul class="flex flex-wrap gap-1 list-none p-2 w-full justify-between">
-                  Hi! I am Gabriel and I am 23 years old. I study Bioinformatics
-                  at the University of Gdansk. I'm fluent in Polish and English
-                  and currently work as a Python Developer at digimonkeys.com
-                </p>
-                <p>
-                  I have published one article you can read it
-                  <a href="https://dx.doi.org/10.1038/s41598-023-44488-7"
-                    >here</a
-                  >.
-                </p>
-              </section>
-            </article>
-            <article
-              class="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border"
-            >
-              <section
-                class="aero-gradient-dark p-2 rounded-lg border-midnight border text-sm text-white flex flex-col"
-              >
-                <h6
-                  class="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center"
-                >
-                  Hobbies
-                </h6>
-                <ul class="flex flex-wrap gap-1 list-none p-2 w-full justify-between">
                   <li>Programming</li>
                   <li>Filmmaking</li>
                   <li>Gaming</li>
                   <li>Playing guitar</li>
                 </ul>
-              </section>
+  {% end %}
-            </article>
+
-            <article
+{% card(title="Interests") %}
-              class="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border"
+
-            >
+<ul class="flex flex-wrap gap-1 list-none p-2 w-full justify-between">
-              <section
-                class="aero-gradient-dark p-2 rounded-lg border-midnight border text-sm text-white flex flex-col"
-              >
-                <h6
-                  class="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center"
-                >
-                  Interests
-                </h6>
-                <ul class="flex flex-wrap gap-1 list-none p-2 w-full justify-between">
                   <li>Computer Science</li>
                   <li>Sci-Fi Books</li>
                   <li>Astronomy</li>
                   <li>Sports</li>
                   <li>History</li>
                 </ul>
-              </section>
+  {% end %}
-            </article>
+
-            <article
+{% card(title="FAQ") %}
-              class="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border"
+
-            >
+- **How old were you when you started programming?**
-              <section
+
-                class="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-a:text-blue-500 text-white flex flex-col"
+  I was 11 years old 🧑‍💻
-              >
+
-                <h6
+- **How did you learn programming?**
-                  class="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center"
+
-                >
+  I read books 📖 and practiced a lot.
-                  FAQ
+
-                </h6>
+- **Are you studying Computer Science?**
-              </section>
+
-            </article>
+  No, I study Bioinformatics, but it's closely related.
+
+- **Which programming language do you recommend for a beginner?**
+
+  The language doesn't really matter, just choose one you like and dive in.
+
+- **What was your first programming language?**
+
+  My journey began with C++.
+
+- What is your favorite programming language?
+
+  I enjoy writing in Rust, C, and Python. But Rust is the best!
+  {% end %}

zola/content/cv.md

@@ -2,5 +2,5 @@
 title = "CV"
 +++
 
-<iframe width="100%" height="100%" src="https://gabrielkaszewski.dev/api/data/cv.pdf"></iframe>
+<iframe width="100%" height="100%" src="/files/cv.pdf" class="rounded-lg"></iframe>
-<a href="https://gabrielkaszewski.dev/api/data/cv.pdf" target="_blank" class="text-blue-500">View in full</a>
+<a href="/files/cv.pdf" target="_blank" class="text-blue-500">View in full</a>

zola/content/podcasts.md

@@ -0,0 +1,5 @@
++++
+title = "Podcasts"
++++
+
+<iframe src="https://podcast.gabrielkaszewski.dev/" width="100%" height="100%" class="rounded-lg"></iframe>

zola/templates/shortcodes/card.html

@@ -0,0 +1,14 @@
+<article
+  class="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border"
+>
+  <section
+    class="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-a:text-blue-500 text-white flex flex-col"
+  >
+    <h6
+      class="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center"
+    >
+      {{ title }}
+    </h6>
+    {{ body | markdown | safe }}
+  </section>
+</article>

zola/templates/sidebar.html

@@ -58,8 +58,13 @@
       Multimedia
     </p>
     <ul class="flex flex-col gap-1 justify-center">
-      <li class="border-b border-midnight">Podcasts</li>
+      <li class="border-b border-midnight flex items-center gap-2">
-      <li class="border-b border-midnight">Photos</li>
+        <a href="/podcasts" class="flex items-center gap-2">
+          <img class="w-6 h-6" src="img/icons/podcast.png" alt="podcast-icon" />
+          Podcasts
+        </a>
+      </li>
+      <li class="border-b border-midnight flex items-center gap-2">Photos</li>
     </ul>
   </section>
 </aside>