@@ -27,6 +27,6 @@ values:
       image: true
 
   - scope:
-      path: "assets/img/art"
+      path: "art"
     values:
       art: true

@@ -0,0 +1,22 @@
+<div class="art-menu">
+{%- for page in site.pages -%}
+    {%- assign pagedir = page.dir | remove_first: "/" | split: "/" -%}
+    {%- capture arts -%}
+    {%- for file in site.static_files -%}
+        {%- if file.art and file.path contains page.title -%}
+            {{ file.path }}
+        {%- endif -%}
+    {%- endfor -%}
+    {%- endcapture -%}
+    {% assign artpics = arts | strip_newlines | split: " " %}
+    {%- if pagedir.first == "art" and pagedir.size > 1 -%}
+    <div class="art-category">
+        <a href="{{ page.url }}">
+            {{ page.title }}
+            <br>
+            <img src="{{ artpics.first }}">
+        </a> 
+    </div>
+    {% endif %}
+{%- endfor -%}
+</div>

@@ -0,0 +1,8 @@
+{%- capture arts -%}
+{%- for file in site.static_files -%}
+    {%- if file.art and file.path contains page.title -%}
+        {{ file.path }}
+    {% endif %}
+{%- endfor -%}
+{%- endcapture -%}
+{% assign artpics = arts | split: " " %}

@@ -0,0 +1,18 @@
+---
+layout: default
+---
+
+<h1>{{ page.title }}</h1>
+
+{{ content }}
+
+{%- include pic-path.html -%} <!-- provides artpics array -->
+
+<div class="art">
+{%- for imgpath in artpics -%}
+    {% assign imgname = imgpath | split: "/" | last | split: "." | first %}
+    <div class="art-img">
+        <img src="{{ imgpath }}" alt="{{ imgname }}">
+    </div>
+{% endfor %}
+</div>

@@ -160,6 +160,19 @@ padding-left: 10px;
     }
 }
 
+.art-menu {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    justify-content: space-around;
+    .art-category {
+        img {
+           width: 100%;
+           height: auto;
+        }
+    }
+}
+
 .art {
     display: flex;
     flex-flow: row wrap;

@@ -3,16 +3,8 @@ title: art
 permalink: /art/
 ---
 
-{% assign image_files = site.static_files | where: "art", true %}
-
 here are some photos and pictures.
 
 feel free to use them if and as you wish (don't forget to attribute).
 
-<div class="art">
-{% for img in image_files %}
-    <div class="art-img">
-        <img src="{{ img.path }}" alt="{{ img.name }}">
-    </div>
-{% endfor %}
-</div>
+{% include art-menu.html %}

@@ -0,0 +1,9 @@
+---
+title: photos
+permalink: /art/photos/
+layout: art-category
+---
+
+photos taken in different times and various circumstances.
+
+i'm not a professional photographer, but i have something to show.

@@ -0,0 +1,8 @@
+---
+title: renders
+permalink: /art/renders/
+layout: art-category
+---
+
+computer graphics is small part of my life too.
+i'm working primarily in [blender](https://blender.org).