Update styles and templates for improved layout and design

- Updated Tailwind CSS to version 4.0.17, introducing new color variables and adjustments to existing styles.
- Added a new section template for displaying project sections with a consistent design.
- Enhanced card shortcodes to include list styles for better readability.
- Modified sidebar links to ensure correct image paths and improved accessibility with added links for projects.

zola/content/about.md

@@ -13,7 +13,7 @@ I have published one article — you can read it [here](https://dx.doi.org/10.10
 
 {% card(title="Hobbies") %}
 
-<ul class="flex flex-wrap gap-1 list-none p-2 w-full justify-between">
+<ul class="flex gap-1 p-2 w-full justify-between list-none!">
                   <li>Programming</li>
                   <li>Filmmaking</li>
                   <li>Gaming</li>
@@ -23,7 +23,7 @@ I have published one article — you can read it [here](https://dx.doi.org/10.10
 
 {% card(title="Interests") %}
 
-<ul class="flex flex-wrap gap-1 list-none p-2 w-full justify-between">
+<ul class="flex flex-wrap gap-1 p-2 w-full justify-between list-none!">
                   <li>Computer Science</li>
                   <li>Sci-Fi Books</li>
                   <li>Astronomy</li>

zola/content/projects/_index.md

@@ -0,0 +1,4 @@
++++
+title = "Projects"
+description = "List of projects"
++++

zola/content/projects/tiny_packer.md

@@ -0,0 +1,80 @@
++++
+title = "Tiny packer"
+summary = "A CLI/GUI tool to generate texture atlases from multiple images with padding and auto-sizing support."
++++
+
+{% card(title="Tiny packer") %}
+
+**Overview:** Tiny Packer is a command-line utility designed to combine multiple images into a single texture atlas. It provides options for manual and automatic sizing of the atlas, including adjustable padding between images.
+
+# Features
+
+- CLI
+- GUI
+- Padding support
+- Auto size
+
+# How to use?
+
+## GUI
+
+**Hotkeys**
+
+- Ctrl+I - Import images
+- Ctrl+Shift+I - Add images
+- Ctrl+Shift+C - Clear images
+- Ctrl+S - Save generated atlas
+
+## CLI
+
+**Usage:**
+
+    tiny_packer --input <input_files> --output <output_file> [OPTIONS]
+
+**Required Arguments:**
+
+- `--input`, `-i`: Specify the input image files. Multiple files can be specified by repeating the argument for each file.
+- `--output`, `-o`: Specify the path where the output atlas image will be saved.
+
+**Options:**
+
+- `--width`: Specify the width of the atlas. Defaults to `512` pixels. This option is ignored if auto sizing is enabled.
+- `--height`: Specify the height of the atlas. Defaults to `512` pixels. This option is ignored if auto sizing is enabled.
+- `--padding`, `-p`: Set the padding between images in the atlas. Defaults to `0` pixels.
+- `--auto_size`, `-a`: Enable or disable automatic sizing of the atlas dimensions. Defaults to `true`. When enabled, the atlas dimensions are calculated based on the input images.
+
+**Examples:**
+
+1.  **Creating an Atlas with Specified Dimensions:** Generate an atlas with a specific width and height, ignoring automatic sizing.
+
+        tiny_packer -i image1.png -i image2.png -o atlas.png --width 1024 --height 1024 -a false
+
+2.  **Creating an Atlas with Automatic Sizing:** Generate an atlas where dimensions are automatically calculated.
+
+        tiny_packer -i image1.png -i image2.png -i image3.png -o atlas.png
+
+3.  **Creating an Atlas with Padding:** Generate an atlas with a specified padding between images.
+
+        tiny_packer -i image1.png -i image2.png -o atlas.png -p 10
+
+**Additional Tips:**
+
+- Multiple input files should be specified by repeating the `-i` or `--input` option for each file.
+- Ensure that file paths are correctly specified and accessible from the command line.
+- For best results, images should be of compatible formats and dimensions when padding and auto sizing are considered.
+
+**Help:** To view more information and help regarding the command options, you can use the `--help` flag:
+
+    tiny_packer --help
+
+{% end %}
+
+{% card(title="Technologies") %}
+
+<ul class="flex flex-wrap gap-1 p-2 w-full justify-center list-none!">
+                  <li>Rust</li>
+                  <li>Tauri</li>
+                  <li>TailwindCSS</li>
+                  <li>React</li>
+</ul>
+{% end %}

zola/templates/section.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %} {% block content %}
+<article
+  class="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border w-full"
+>
+  <section
+    class="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-p:m-1 w-full 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"
+    >
+      {{ section.title | default(value="Projects") }}
+    </h6>
+
+    <section>
+      <p>{{ section.description | safe }}</p>
+
+      <ul class="list-none p-0">
+        {% for page in section.pages %}
+        <li class="mb-2">
+          <a href="{{ page.permalink }}" class="text-blue-400 hover:underline"
+            >{{ page.title }}</a
+          >
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+  </section>
+</article>
+{% endblock %}

zola/templates/shortcodes/card.html

@@ -2,7 +2,7 @@
   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"
+    class="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-a:text-blue-500 text-white flex flex-col prose-ul:list-disc overflow-auto"
   >
     <h6
       class="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center"

zola/templates/sidebar.html

@@ -6,33 +6,36 @@
     <ul class="flex flex-col gap-1 justify-center">
       <li class="border-b border-midnight">
         <a href="/" class="flex items-center gap-2">
-          <img class="w-6 h-6" src="img/icons/home.png" alt="home-icon" />
+          <img class="w-6 h-6" src="/img/icons/home.png" alt="home-icon" />
           Home
         </a>
       </li>
       <li class="border-b border-midnight flex items-center">
         <a href="/cv" class="flex items-center gap-2">
-          <img class="w-6 h-6" src="img/icons/cv.png" alt="cv-icon" />
+          <img class="w-6 h-6" src="/img/icons/cv.png" alt="cv-icon" />
           CV
         </a>
       </li>
       <li class="border-b border-midnight flex items-center gap-2">
         <a href="/about" class="flex items-center gap-2">
-          <img class="w-6 h-6" src="img/icons/about.png" alt="about-icon" />
+          <img class="w-6 h-6" src="/img/icons/about.png" alt="about-icon" />
           About
         </a>
       </li>
     </ul>
   </section>
   <section class="aero-gradient-dark text-white p-1 rounded-sm">
-    <p
+    <a
       class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
+      href="/projects"
     >
-      <img src="img/icons/folder.png" alt="folder-icon" class="w-6 h-6" />
+      <img src="/img/icons/folder.png" alt="folder-icon" class="w-6 h-6" />
       Projects
-    </p>
+    </a>
     <ul class="flex flex-col gap-1 justify-center">
-      <li class="border-b border-midnight">Project 1</li>
+      <li class="border-b border-midnight">
+        <a href="/projects/tiny-packer">Tiny packer</a>
+      </li>
       <li class="border-b border-midnight">Project 2</li>
       <li class="border-b border-midnight">Project 3</li>
     </ul>
@@ -41,7 +44,7 @@
     <p
       class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
     >
-      <img class="w-6 h-6" src="img/icons/games.png" alt="games-icon" />
+      <img class="w-6 h-6" src="/img/icons/games.png" alt="games-icon" />
       Games
     </p>
     <ul class="flex flex-col gap-1 justify-center">
@@ -54,13 +57,17 @@
     <p
       class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
     >
-      <img src="img/icons/disc.png" alt="disc-icon" class="w-6 h-6" />
+      <img src="/img/icons/disc.png" alt="disc-icon" class="w-6 h-6" />
       Multimedia
     </p>
     <ul class="flex flex-col gap-1 justify-center">
       <li class="border-b border-midnight flex items-center gap-2">
         <a href="/podcasts" class="flex items-center gap-2">
-          <img class="w-6 h-6" src="img/icons/podcast.png" alt="podcast-icon" />
+          <img
+            class="w-6 h-6"
+            src="/img/icons/podcast.png"
+            alt="podcast-icon"
+          />
           Podcasts
         </a>
       </li>