Add about page with icons

README.md

@@ -58,7 +58,7 @@ theme: jekyll-theme-tallneck
     - [privacy.md](privacy.md)
     - [terms.md](terms.md)
 
-4. Create the `assets/images` folder and put a replacement for the default image named `default.webp` or change its name in the `_config.yml` file.
+4. Create the `assets/image` folder and put a replacement for the default image named `default.webp` or change its name in the `_config.yml` file.
 5. In the same folder, put also a replacement for `favicon.ico`, `favicon.svg` and `logo.svg` (logo.svg will be used as the home button).
 6. [Optional] Customize the theme by creating the `_sass` folder and editing `custom_variables.scss` and `custom_styles.scss` files.
 7. Edit the `_config.yml` file to your liking (you can use the [config](/_config.yml) file in this repo as a template).
@@ -74,7 +74,7 @@ layout: post   # Optional, post is default
 title:  "First post!"
 subtitle: "Written in Go."  # Optional
 date:   2023-01-16 17:40:28 +0100
-image: /assets/images/golang.jpg  # Optional
+image: /assets/image/golang.jpg  # Optional
 ---
 ```
 

_config.yml

@@ -3,18 +3,30 @@ language: en
 
 copyright: "Copyright (c) 2024 John Toniutti"
 
-# For jekyll-seo-tag
 author: John Toniutti
+keywords: "tallneck, test, jekyll, theme, jekyll-theme-tallneck"
 tagline: "Tallneck test | This a tagline"
 description: "This is a description"
 url: "https://jotonedev.github.io/tallneck-test"
 
+social: true
+github_url: https://example.com/
+gitlab_url: https://example.com/
+discord_url: https://example.com/
+linkedin_url: https://example.com/
+reddit_url: https://example.com/
+instagram_url: https://example.com/
+threads_url: https://example.com/
+x_url: https://example.com/
+telegram_url: https://example.com/
+
+about_image: "/assets/image/about.webp"
 defaults:
   - scope:
       type: "posts"
     values:
       layout: "post"
-      image: "/assets/images/default.webp"
+      image: "/assets/image/default.webp"
       seo:
         type: BlogPosting
 

_includes/head.html

@@ -12,6 +12,12 @@
     {% if page.private %}
         <meta name="robots" content="noindex, nofollow">
     {% else %}
+        {% if page.keywords %}
+        <meta name="keywords" content="{{ page.keywords }}">
+        {% else if site.keywords %}
+        <meta name="keywords" content="{{ site.keywords }}">
+        {% endif %}
+
         {% seo %}
     {% endif %}
 

_includes/header.html

@@ -2,7 +2,7 @@
     <div class="page-header--container">
         <div class="header-logo">
             <a aria-label="Home" href="{{ '/' | relative_url }}">
-                <img alt="Website logo" src="{{ '/assets/images/logo.svg' | relative_url }}">
+                <img alt="Website logo" src="{{ '/assets/image/logo.svg' | relative_url }}">
             </a>
         </div>
 

_layouts/about.html

@@ -0,0 +1,100 @@
+---
+layout: base
+---
+<div class="content-width">
+    {% if page.title %}
+    <h1>{{ page.title }}</h1>
+    {% else %}
+    <h1>About me</h1>
+    {% endif %}
+
+    {% if site.social %}
+    <nav class="about-social">
+        {% if site.github_url %}
+        <a href="{{ site.github_url }}" title="GitHub" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/github.svg#github" | relative_url }}" alt="GitHub"></use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.gitlab_url %}
+        <a href="{{ site.gitlab_url }}" title="GitLab" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/gitlab.svg#gitlab" | relative_url }}" alt="GitLab"></use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.discord_url %}
+        <a href="{{ site.discord_url }}" title="Discord" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/discord.svg#discord" | relative_url }}" alt="Discord"></use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.reddit_url %}
+        <a href="{{ site.reddit_url }}" title="Reddit" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/reddit.svg#reddit" | relative_url }}" alt="Reddit"></use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.instagram_url %}
+        <a href="{{ site.instagram_url }}" title="Instagram" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/instagram.svg#instagram" | relative_url }}" alt="Instagram">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.linkedin_url %}
+        <a href="{{ site.linkedin_url }}" title="LinkedIn" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/linkedin.svg#linkedin" | relative_url }}" alt="LinkedIn">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.threads_url %}
+        <a href="{{ site.threads_url }}" title="Threads" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/threads.svg#threads" | relative_url }}" alt="Threads">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.x_url %}
+        <a href="{{ site.x_url }}" title="X" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/x.svg#x" | relative_url }}" alt="X">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+
+        {% if site.telegram_url %}
+        <a href="{{ site.telegram_url }}" title="Telegram" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/telegram.svg#telegram" | relative_url }}" alt="Telegram">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
+    </nav>
+    {% endif %}
+
+    <div class="about">
+        <div class="about--img">
+            <img src="{{ site.about_image | relative_url }}" alt="About me">
+        </div>
+        <div class="about--content">
+            {{ content }}
+        </div>
+    </div>
+</div>

_layouts/post.html

@@ -2,18 +2,23 @@
 layout: base
 ---
 
-<div class="post-header">
-    <h1 class="post-header--title">{{ page.title }}</h1>
-    {% if page.no_meta %}
-    {% else %}
-    <p class="post-header--meta">
-        <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-            {{ page.date | date: "%-d %B %Y" }}
-        </time>
-    </p>
-    {% endif %}
-</div>
+<div class="content-width">
+    <div class="post-header">
+        <h1 class="post-header--title">{{ page.title }}</h1>
+        {% if page.no_meta %}
+        {% else %}
+        <p class="post-header--meta">
+            <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+                {{ page.date | date: "%-d %B %Y" }}
+            </time>
+            {% if page.keywords %}
+                | <span class="post-header--keywords">{{ page.keywords }}</span>
+            {% endif %}
+        </p>
+        {% endif %}
+    </div>
 
-<div class="post-content">
-    {{ content }}
-</div>
+    <div class="post-content">
+        {{ content }}
+    </div>
+</div>

_posts/2024-02-22-test-02.md

@@ -141,16 +141,16 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 
 ## Images
 
-![Minion](https://octodex.github.com/images/minion.png)
-![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+![Minion](https://octodex.github.com/image/minion.png)
+![Stormtroopocat](https://octodex.github.com/image/stormtroopocat.jpg "The Stormtroopocat")
 
 Like links, Images also have a footnote style syntax
 
 ![Alt text][id]
 
 With a reference later in the document defining the URL location:
 
-[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+[id]: https://octodex.github.com/image/dojocat.jpg  "The Dojocat"
 
 
 ## Plugins

_posts/2024-02-24-test-04.md

@@ -1,6 +1,7 @@
 ---
 title:  "The Dark Forest"
 date:   2024-02-24 11:40:28 +0100
+keywords: "story, forest, dark, adventure"
 ---
 
 Once upon a time, in a land far away, there was a mysterious forest known as the Dark Forest. Legends spoke of its eerie atmosphere and the strange creatures that lurked within its depths.

_posts/2024-02-24-test-05.md

@@ -1,6 +1,7 @@
 ---
 title:  "The Radiant Sun"
 date:   2024-02-24 12:40:28 +0100
+keywords: "story, sun, light, life"
 ---
 
 Once upon a time, in a faraway galaxy, there was a magnificent star called the Sun. It was the center of the solar system, radiating warmth and light to all the planets that orbited around it.

_sass/tallneck/components.scss

@@ -1 +1 @@
-@import "components/post", "components/post-card", "components/post-preview";
+@import "components/post", "components/post-card", "components/post-preview", "components/about.scss";

_sass/tallneck/components/about.scss

@@ -0,0 +1,76 @@
+.about {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+
+    margin-left: auto;
+    margin-right: auto;
+
+
+    .about--img {
+        flex: 0 0 40%;
+
+        height: fit-content;
+
+        @media screen and (max-width: 500px){
+            flex: 0 0 100%;
+        }
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+        border: 3px solid transparent;
+        border-image: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)) 1;
+    }
+
+    .about--content {
+        flex: 0 0 60%;
+        padding: 0 20px;
+
+        @media screen and (min-width: 500px){
+            p {
+                margin-block-start: 0;
+                margin-block-end: 0;
+            }
+        }
+    }
+}
+
+.about-social {
+    width: 100%;
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    gap: 20px;
+
+    a {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: 10px;
+        text-decoration: none;
+        color: var(--text-primary);
+        transition: color 0.3s ease;
+
+        &:hover {
+            color: var(--accent-primary);
+        }
+
+        svg {
+            aspect-ratio: 1/1;
+            max-width: 2rem;
+            max-height: 2rem;
+
+            width: 100%;
+            height: auto;
+
+            display: inline-block;
+
+            fill: var(--svg-fill);
+            color: var(--svg-fill);
+            object-fit: fill;
+        }
+    }
+}