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 %}