add about page content

14 files changed, 134 insertions, 29 deletions

diff --git a/_data/links.yml b/_data/links.yml
new file mode 100644
index 0000000..b9af95e
--- /dev/null
+++ b/_data/links.yml
@@ -0,0 +1,21 @@
+- name: github
+  link: https://github.com/la-ninpre
+  type: github
+- name: youtube
+  link: https://www.youtube.com/channel/UCLW6sGRLddTR-fB-Ae5uv6Q/
+  type: youtube
+- name: cgit
+  link: https://git.aaoth.xyz
+  type: git
+- name: fossil
+  link: https://fsl.aaoth.xyz
+  type: fsl
+- name: aaoth
+  link: https://aaoth.bandcamp.com
+  type: bandcamp
+- name: spiral materivm 
+  link: https://spiralmaterivm.bandcamp.com
+  type: bandcamp
+- name: hälsorisk
+  link: https://haelsorisk.bandcamp.com
+  type: bandcamp
diff --git a/_layouts/about-page.html b/_layouts/about-page.html
new file mode 100644
index 0000000..205bce6
--- /dev/null
+++ b/_layouts/about-page.html
@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+<div class="about">
+    <div class="about-sidebar">
+    <img id="avatar" alt="aaoth-photo" src="/assets/img/aaoth-photo.jpeg">
+    <div class="about-links">
+        <p>other links:</p>
+        <ul>
+    {% assign sorted_links = site.data.links | sort: "type" %}
+        {% for link in sorted_links %}
+        <li>
+            <a href="{{ link.link }}">
+            <img 
+                class= "link-icon"
+                alt="{{ link.type }}"
+                src="/assets/img/{{ link.type }}-icon.png">
+            <div class="link-text">{{ link.name }}</div>
+            </a>
+        </li>
+        {% endfor %}
+        </ul>
+    </div>
+    </div>
+
+    <div class="about-info">
+        {{ content }}
+    </div>
+</div>
diff --git a/_sass/main.scss b/_sass/main.scss
index d2d5da6..f6fca46 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -49,11 +49,9 @@ nav {
 		display: inline-flex;
 		width: 430px;
 		height: 32px;
-		margin: 0;
 		padding: 50px 30px 0 0;
 		flex-direction: row;
 		justify-content: space-between;
-		list-style-type: none;
 		border-bottom: $border-nav;
 	}
 }
@@ -65,6 +63,44 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: 500;
 }
 
+ul {
+    margin: 0;
+    padding: 0;
+    li {
+        list-style-type:none;
+    }
+}
+
+.about {
+    padding: 1em 0;
+    display: flex;
+    flex-direction: row;
+    img#avatar {
+        border-radius: 100%;
+        height: 128px;
+    }
+    .about-sidebar {
+        flex: 23%;
+    }
+    .about-links {
+        margin-top: 1em;
+        .link-icon {
+            height: 32px;
+        }
+        .link-text {
+            display: inline;
+            position: relative;
+            bottom: 0.75em;
+        }
+    }
+    .about-info {
+        width: 100%;
+        p:first-child {
+            margin-top: 0;   
+        }
+    }
+}
+
 .post {
     padding: 1em;
     margin: 1em 0;
@@ -86,11 +122,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .post-page .post-header {
     ul {
-        margin: 0;
-        padding: 0;
         display: flex;
         flex-direction: row;
-        list-style-type: none;
         li {
             margin-right: 0.5em;
             a {
@@ -144,7 +177,7 @@ footer {
 	}
 }
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: 760px) {
 	nav {
 		margin-bottom: 5vh;
 		ul {
@@ -159,6 +192,11 @@ footer {
 			top: 0;
 		}
 	}
+    .about {
+        .about-info {
+            padding: 0 2%;
+        }
+    }
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/about.md b/about.md
index b220382..32158a2 100644
--- a/about.md
+++ b/about.md
@@ -1,8 +1,36 @@
 ---
 title: about
-permalink: /about/
+layout: about-page
 ---
 
-# about
+# hi, i'm la-ninpre
 
-here i'll tell smth about myself
+i am also known as aaoth or lev brekalov.
+
+i was thinking a lot about the reason i have so many names, but i could'n find
+a clear answer. maybe i'll try to make myself up somehow, but now it's messy.
+
+anyway, since long time i tried to follow do-it-yourself principle, and this
+website is an example of this. web-development (if you can call it like that)
+is a new thing for me and primary reason of me doing this is probably some
+kind of web-presence. other important thing for me is the ability to create
+anything i want and make things look how i want them to look. for comparison,
+none of the popular social platforms can give me this ability.
+
+i'm creating some music and other stuff related to art, such as fonts, random
+other pictures and occasional poems. style of my creations changed a lot over
+time but it's always something unusual, non-professional and not meant to be
+very popular.
+
+i'm also very interested in sciences (especially biology, chemistry and
+linguistics). i speak russian, speak a little bit english and also
+[toki pona](https://tokipona.org) :D
+
+last year i've been diving into world of unix-related software and operating
+systems, namely gnu/linux and openbsd. for all past years i've been a windows
+user, but then i realized that many things are more comfortable in
+unix userland.
+additionally, it's important for me to understand *what* exactly i'm doing, and
+the last thing is nearly impossible in closed oses like windows or mac.
+
+pona tawa sina!
diff --git a/art.md b/art.md
index f037725..3662ced 100644
--- a/art.md
+++ b/art.md
@@ -1,8 +1,5 @@
 ---
 title: art
-permalink: /art/
 ---
 
-# art
-
 here i'll show some graphical stuff
diff --git a/assets/img/aaoth-photo.jpeg b/assets/img/aaoth-photo.jpeg
new file mode 100644
index 0000000..931dafb
--- /dev/null
+++ b/assets/img/aaoth-photo.jpeg
diff --git a/assets/img/bandcamp-icon.png b/assets/img/bandcamp-icon.png
new file mode 100644
index 0000000..a0af460
--- /dev/null
+++ b/assets/img/bandcamp-icon.png
diff --git a/assets/img/fsl-icon.png b/assets/img/fsl-icon.png
new file mode 100644
index 0000000..25078ca
--- /dev/null
+++ b/assets/img/fsl-icon.png
diff --git a/assets/img/git-icon.png b/assets/img/git-icon.png
new file mode 100644
index 0000000..ae14453
--- /dev/null
+++ b/assets/img/git-icon.png
diff --git a/assets/img/github-icon.png b/assets/img/github-icon.png
new file mode 100644
index 0000000..32741e3
--- /dev/null
+++ b/assets/img/github-icon.png
diff --git a/assets/img/youtube-icon.png b/assets/img/youtube-icon.png
new file mode 100755
index 0000000..0b7f452
--- /dev/null
+++ b/assets/img/youtube-icon.png
diff --git a/index.md b/index.md
index 8e591c0..06008e1 100644
--- a/index.md
+++ b/index.md
@@ -1,6 +1,5 @@
 ---
 title: home
 ---
-# wait
 
-There's nothing yet, but soon
+there's nothing yet, but soon
diff --git a/music.md b/music.md
index 313be9e..24adc77 100644
--- a/music.md
+++ b/music.md
@@ -1,7 +1,5 @@
 ---
 title: music
-permalink: /music/
 ---
-# music
 
 here will be an overview of my musical projects.
diff --git a/other.md b/other.md
index 1d58065..b4d025e 100644
--- a/other.md
+++ b/other.md
@@ -1,26 +1,20 @@
 ---
 title: other
-permalink: /other/
 ---
 
-# other
+miscellaneous posts about different things.
 
-here will be some misc stuff
+filter by tag: {% for tag in site.tags %}[{{ tag[0] }}](/tags/{{ tag[0] }})
+{% endfor %}
 
 <div class="posts">
 {% for post in site.posts %}
     <div class="post">
-        <h2><a href="{{ post.url}}">{{ post.title }}</a></h2>
-        <small>
-            <p>{{ post.date | date_to_string }}</p>
-            {% if post.tags.size > 0 %}
-            <p>| tags: </p>
-            {% for tag in post.tags %}
-            <a href="/tags/{{ tag }}">{{ tag }}</a>
-            {% endfor %}
-            {% endif %}
-        </small>
+        <h2 id="{{ post.title | slugify }}">
+            <a href="{{ post.url}}">{{ post.title }}</a>
+        </h2>
         {{ post.content }}
+        <small><p>{{ post.date | date_to_string }}</p></small>
     </div>
 {% endfor %}
 </div>