add projects page

_data/locale.toml

@@ -11,6 +11,10 @@ es = "acerca de"
 en = "blog"
 es = "blog"
 
+[projects]
+en = "projects"
+es = "proyectos"
+
 [music]
 en = "music"
 es = "música"
@@ -24,6 +28,10 @@ es = "etc"
 en = "read more..."
 es = "leer más..."
 
+[end-of-feed]
+en = "what are you looking at...?"
+es = "a quién buscas..."
+
 # 404
 [404]
 en = "404 not found"

_data/navbar.toml

@@ -10,6 +10,10 @@ url = "/about/"
 name = "blog"
 url = "/blog/"
 
+[projects]
+name = "projects"
+url = "/projects/"
+
 # TODO: review section of the site :p
 # [reviews]
 # name = "reviews"

_layouts/recent_feed.njk

@@ -15,25 +15,33 @@
     <div id="feed">
         {% set current_year = 0 %}
         {% for post in collections[cycling_tag] | i18n_filter %}
-            <div class="feed-item">
             {% set post_year = post.date | date("yyyy") %}
             {% if post_year != current_year %}
                 <h2 class="year-title">{{ post_year }}</h2>
                 {% set current_year = post_year %}
             {% endif %}
-                <h3 id="{{ post.data.title | slugify }}" class="post-title">{{ post.data.title }}</h3>
+            <div class="feed-item">
+                <h3 id="{{ post.data.title | slugify }}" class="post-title">
+                    <a href={{ post.url | locale_url_resolve }}>{{ post.data.title }}</a>
+                </h3>
                 <p class="post-date">{{ post.date | date("dd/MM/yyyy") }}</p>
                 {#<p>Debug: {{ post.date }} -> {{ post.date | date("dd/MM/yyyy") }}</p>#}
                 {% if post.data.description %}
-                    <p class="post-description">{{ post.data.description }}</p>
+                    <p class="post-description post-content">{{ post.data.description }}</p>
                 {% else %}
-                    <p class="post-excerpt">{% excerpt post %}</p>
+                    <p class="post-excerpt post-content">{% excerpt post %}</p>
                 {% endif %}
-                <a href="{{ post.url | locale_url_resolve }}" class="post-link">{{ "read-more" | i18n }}</a>
-                {% if post.data.image %}
-                    <img src="{{ post.data.image }}" alt="{{ post.data.image.alt }}" class="post-image">
+                {% if post.data.image.url %}
+                    <a href="{{ post.url | locale_url_resolve }}"><img src="{{ post.data.image.url }}" {% if post.data.image.title %}title="{{ post.data.image.title }}"{% endif %} {% if post.data.image.alt %}alt="{{ post.data.image.alt }}"{% endif %} class="post-image"></a>
                 {% endif %}
+                <p class="post-link"><a href="{{ post.url | locale_url_resolve }}">{{ "read-more" | i18n }}</a></p>
             </div>
         {% endfor %}
+        <div class="end-of-feed">
+            <a href="https://www.youtube.com/watch?v=mB5YeQFw1S4" target="_blank">
+                <div id="tv"></div>
+            </a>
+            <p>{{ "end-of-feed" | i18n }}</p>
+        </div>
     </div>
 {% endblock content %}

css/main.scss

@@ -5,7 +5,7 @@
 @use "main-palette" as mp;
 
 $psize: 0.8em;
-$h1size: 2.0em;
+$h1size: 2em;
 $h2size: 1.8em;
 $h3size: 1.6em;
 $h4size: 1.4em;
@@ -18,16 +18,25 @@ body {
     /*background-image: url("/img/bgpat.png");
     background-repeat: repeat;*/
 
-    a { color: mp.$link; }
-    a:hover { color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%); }
+    a {
+        color: mp.$link;
+    }
+    a:hover {
+        color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%);
+    }
 
     p {
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         font-size: $psize;
     }
 
-    h1, h2, h3, h4, h5, h6 {
-        font-family: fonts.$ll,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-family: fonts.$ll, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         font-weight: bold;
         text-decoration: underline;
         text-decoration-color: mp.$border;
@@ -36,23 +45,45 @@ body {
         -moz-osx-font-smoothing: none;
     }
 
-    h1 { font-size: $h1size; }
-    h2 { font-size: $h2size; }
-    h3 { font-size: $h3size; }
-    h4 { font-size: $h4size; }
-    h5 { font-size: $h5size; }
-    h6 { font-size: $h6size; }
+    h1 {
+        font-size: $h1size;
+    }
+    h2 {
+        font-size: $h2size;
+    }
+    h3 {
+        font-size: $h3size;
+    }
+    h4 {
+        font-size: $h4size;
+    }
+    h5 {
+        font-size: $h5size;
+    }
+    h6 {
+        font-size: $h6size;
+    }
 
     .warning {
         padding: 2px;
         margin: 2px auto;
         text-align: center;
-        border-top: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
-        border-bottom: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
-        background: c.adjust($color: mp.$border, $saturation: 15%, $lightness: -20%);
+        border-top: 1px solid
+            c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
+        border-bottom: 1px solid
+            c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
+        background: c.adjust(
+            $color: mp.$border,
+            $saturation: 15%,
+            $lightness: -20%
+        );
     }
 
-    @media (min-width: general.$breakpoint) { #mobile-warning { display: none; }}
+    @media (min-width: general.$breakpoint) {
+        #mobile-warning {
+            display: none;
+        }
+    }
 }
 
 // 404
@@ -82,14 +113,14 @@ body {
             width: 780px;
             margin: 0px auto;
             p {
-                font-family: fonts.$ll, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                font-family:
+                    fonts.$ll, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                 font-size: 1.2em;
             }
         }
     }
 }
 
-
 // under construction
 #under-construction {
     width: 100%;
@@ -127,7 +158,9 @@ body {
             border-bottom: 1px solid mp.$border;
             border-radius: 0% 0% 20px 0%;
         }
-        .header-banner:hover{ background-image: url("/img/home_banner_hover.jpg"); }
+        .header-banner:hover {
+            background-image: url("/img/home_banner_hover.jpg");
+        }
     }
     .navbar-wrapper {
         display: flex;
@@ -149,12 +182,22 @@ body {
                 li {
                     display: flex;
                     margin: 2px;
-                    a,p {
+                    a,
+                    p {
                         padding: 0.2em 0.5em;
                         border: 1px solid mp.$border;
 
                         background: mp.$bg;
-                        background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%);
+                        background: linear-gradient(
+                            0deg,
+                            rgba(0, 0, 0, 1) 10%,
+                            c.adjust(
+                                    $color: mp.$link,
+                                    $saturation: 4%,
+                                    $lightness: -20%
+                                )
+                                100%
+                        );
 
                         color: mp.$text;
                         font-family: fonts.$ll;
@@ -163,10 +206,23 @@ body {
                         text-decoration: none;
                         /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
 
-                        &:hover { background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -10%) 100%); }
+                        &:hover {
+                            background: linear-gradient(
+                                0deg,
+                                rgba(0, 0, 0, 1) 0%,
+                                c.adjust(
+                                        $color: mp.$link,
+                                        $saturation: 4%,
+                                        $lightness: -10%
+                                    )
+                                    100%
+                            );
                         }
-                    p { cursor: default; }
-                    --hover-image: url('/img/nav/default_hover.jpg');
+                    }
+                    p {
+                        cursor: default;
+                    }
+                    --hover-image: url("/img/nav/default_hover.jpg");
                     /* TODO: finish each navbar image
                     &#home:hover ~ #nav-hover { --hover-image: url('/img/nav/home_hover.jpg'); }
                     &#about:hover ~ #nav-hover { --hover-image: url('/img/nav/about_hover.jpg'); }
@@ -183,7 +239,9 @@ body {
                     background: mp.$bg;
                     background-image: var(--hover-image, none);
                     /* temporary until i finish navbar images */
-                    &:hover { --hover-image: url('/img/nav/temp_hover.jpg'); }
+                    &:hover {
+                        --hover-image: url("/img/nav/temp_hover.jpg");
+                    }
                 }
             }
         }
@@ -206,7 +264,12 @@ body {
             font-family: fonts.$ll;
             font-size: 1em;
             background: mp.$bg;
-            background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%);
+            background: linear-gradient(
+                0deg,
+                rgba(0, 0, 0, 1) 10%,
+                c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%)
+                    100%
+            );
         }
     }
 
@@ -234,7 +297,10 @@ body {
             margin-bottom: 0px;
             width: 190px;
 
-            h3, a { text-decoration: none; }
+            h3,
+            a {
+                text-decoration: none;
+            }
 
             #trackInfo {
                 display: flex;
@@ -250,7 +316,9 @@ body {
                     align-items: flex-start;
                     flex-direction: column;
                     h3 {
-                        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+                        font-family:
+                            "Gill Sans", "Gill Sans MT", Calibri,
+                            "Trebuchet MS", sans-serif;
                         font-size: 0.8em;
                         padding: 0px 0px 0px 4px;
                     }
@@ -269,7 +337,8 @@ body {
 
         .umihara-kawase {
             margin: 0px;
-            a,img { 
+            a,
+            img {
                 display: block;
                 width: 81px;
                 margin: 0px auto;
@@ -293,14 +362,15 @@ body {
         }
     }
 
-    .welcome-content { margin: 8px 4px; }
+    .welcome-content {
+        margin: 8px 4px;
+    }
 
     .welcome-aside-right {
         width: max-content;
         display: flex;
         flex-direction: column;
 
-        
         .recent-posts {
             width: 190px;
             ul {
@@ -323,13 +393,24 @@ body {
     }
 
     .true-content {
-        h1, h2, h3, h4, h5, h6 { margin: 2px 4px; }
-        p { margin: 8px 4px; }
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin: 2px 4px;
+        }
+        p {
+            margin: 8px 4px;
+        }
         ul {
             list-style-image: url(/img/icons/pichu.gif);
             list-style-type: disc;
             li {
-                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+                font-family:
+                    "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
+                    sans-serif;
                 font-size: $psize;
                 margin: auto;
             }
@@ -361,12 +442,19 @@ body {
         flex-direction: column;
         width: 240px;
 
-        p, li {
-            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        p,
+        li {
+            font-family:
+                "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
             font-size: 11px;
         }
 
-        h1,h2,h3,h4,h5,h6 { 
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
             font-size: 16px;
             text-decoration: none;
             border-bottom: 1px dashed mp.$border;
@@ -375,7 +463,6 @@ body {
 
         .true-content {
             margin: 6px ($sm - 5%) 6px $sm;
-            
         }
 
         .blog-avatar-wrapper {
@@ -401,7 +488,82 @@ body {
     }
 
     #feed {
+        width: 100%;
         margin: 12px;
+        padding: 0px 12%;
+        .year-title {
+            font-size: $h4size;
+            text-align: center;
+            text-decoration: none;
+        }
+        .feed-item {
+            display: block;
+            width: 100%;
+            margin: 8px auto;
+            border: 1px solid mp.$border;
+            padding: 4px 16px;
+            .post-title {
+                margin: 6px 4px 2px 4px;
+                font-size: $h5size;
+                text-decoration: underline dotted;
+                a {
+                    text-decoration: none;
+                }
+            }
+            .post-date {
+                margin: 0px 4px 6px 4px;
+            }
+            .post-content {
+                margin: 4px 4px 4px 4px;
+            }
+            .post-image {
+                max-width: 350px;
+                max-height: 200px;
+                margin: 8px auto 2px auto;
+                display: block;
+            }
+            .post-link {
+                width: 50%;
+                margin-left: auto;
+                text-align: right;
+                a {
+                    text-decoration: none;
+                    font-family:
+                        fonts.$ll, "Gill Sans", "Gill Sans MT", Calibri,
+                        "Trebuchet MS", sans-serif;
+                }
+            }
+        }
+        .end-of-feed {
+            display: block;
+            max-width: 125px;
+            margin: 12px auto;
+            a {
+                #tv {
+                    display: block;
+                    width: 125px;
+                    height: 92px;
+                    background-image: url("/img/gifcities/television.gif");
+                    &:hover {
+                        background-image: url("/img/gifcities/television_hover.jpg");
+                    }
+                }
+                &:hover ~ p {
+                    color: c.adjust(
+                        $color: mp.$text,
+                        $saturation: -40%,
+                        $lightness: -30%
+                    );
+                }
+            }
+            p {
+                color: mp.$bg;
+                font-family:
+                    fonts.$ll, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+                font-size: 0.8em;
+                text-align: center;
+            }
+        }
     }
 }
 
@@ -429,7 +591,9 @@ footer {
             height: 64px;
             margin: auto 0px 0px 0px;
             vertical-align: bottom;
-            &:hover { background-image: url("/img/nekojiruhalo.png"); }
+            &:hover {
+                background-image: url("/img/nekojiruhalo.png");
+            }
         }
 
         .footer-right {
@@ -437,4 +601,3 @@ footer {
         }
     }
 }
-

en/blog/2025/2025-10-18-inaugural-post.md

@@ -5,6 +5,11 @@ tags: test
 
 description: |
   welcome to my website!!!
+
+image:
+  url: /img/nekojiru-thumbs-up.png
+  title: come read me!!
+  alt: come read me!!
 ---
 
 # wait

en/projects.md

@@ -0,0 +1,4 @@
+---
+title: projects
+layout: under_construction
+---

es/blog/index.md

@@ -3,6 +3,9 @@ title: blog
 layout: recent_feed
 cycling_tag: posts
 sidebar: blog
+flight:
+    img: /img/gifcities/mimi.gif
+    url: /
 ---
 # blog
 

es/projects.md

@@ -0,0 +1,5 @@
+---
+title: proyectos
+layout: under_construction
+slug_override: proyectos
+---