Fixing tags, improving pages

Muaath5 · Jan 9, 2024 · 838b30c · 838b30c
1 parent 77d66fc
commit 838b30c
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 65 deletions.
diff --git a/_includes/blogbox.html b/_includes/blogbox.html
@@ -6,7 +6,7 @@ <h5 class="card-title">{{ blog.title }}</h5>
             <small class="text-body-secondary">
             {{ blog.date | date: "%Y/%m/%d" }}
             {% if blog.tags %}
-                , <span class="badge bg-secondary">{{ blog.tags | join: "</span><span class="badge bg-secondary">" }}</span></small>
+                , <span class="badge bg-secondary">{{ blog.tags | join: '</span><span class="badge bg-secondary">' }}</span></small>
             {% endif %}
             </small>
         </p>

diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -0,0 +1,51 @@
+---
+layout: base
+---
+<nav class="navbar navbar-expand-md shadow-sm">
+    <div class="container py-5">
+        <a class="navbar-brand" href="/blog">Muaath5 Blog</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <!-- Left Side Of Navbar -->
+            <ul class="navbar-nav me-auto">
+
+            </ul>
+
+            <!-- Right Side Of Navbar -->
+            <ul class="navbar-nav ms-auto">
+                <a class="nav-link" href="/blog/list">Blogs</a>
+                <a class="nav-link" href="/blog/tags">Tags</a>
+            </ul>
+        </div>
+    </div>
+</nav>
+<main class="py-4 flex-shrink-0">
+    <div class="container">
+        {{ content }}
+    </div>
+</main>
+<footer class="w-100 mt-auto p-4 bg-light">
+    <div class="row my-2">
+        <div class="col text-center">
+            <a href="https://t.me/Muaath_Alqarni" width="7px" height="7px" class="btn btn-secondary p-1">
+                <i class="bi bi-telegram text-white p-1" style="border-radius: 5px;"></i>
+            </a>
+            <a href="mailto:[email protected]" width="7px" height="7px" class="btn btn-secondary p-1">
+                <i class="bi bi-envelope-fill text-white p-1" style="border-radius: 5px;"></i>
+            </a>
+            <a href="https://x.com/Muaath_dev" width="7px" height="7px" class="btn btn-secondary p-1">
+                <i class="bi bi-twitter-x text-white p-1" style="border-radius: 5px;"></i>
+            </a>
+            <a href="https://github.com/Muaath5" width="7px" height="7px" class="btn btn-secondary p-1">
+                <i class="bi bi-github text-white p-1" style="border-radius: 5px;"></i>
+            </a>
+        </div>
+    </div>
+    <div class="row text-center">
+        <h6 class="text-secondary">Hosted on Github Pages</h6>
+        <h6 class="text-secondary">Built using Jekyll</h6>
+    </div>
+</footer>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,8 +12,6 @@
             <!-- Left Side Of Navbar -->
             <ul class="navbar-nav me-auto">
                 <a class="nav-link" href="/about">About</a>
-                <!-- <a class="nav-link" href="/services">Services</a> -->
-                <!-- <a class="nav-link" href="/projects">Projects</a> -->
                 <a class="nav-link" href="/blog">Blog</a>
             </ul>
 

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -13,7 +13,7 @@ <h1>{{ page.title }}</h1>
             <figcaption class="blockquote-footer mb-0">
                 {{ page.date | date: "%Y/%m/%d" }}
                 {% if page.tags %}
-                , <span class="badge bg-secondary">{{ page.tags | join: "</span><span class="badge bg-secondary">" }}</span></small>
+                , <span class="badge bg-secondary">{{ page.tags | join: "</span><span class=\"badge bg-secondary\">" }}</span></small>
                 {% endif %}
             </figcaption>
         </figure>

diff --git a/_template.md b/_template.md
@@ -1,7 +1,9 @@
 ---
-title: ''
-description: ''
-tags: [abc, def]
+# Template for writing blogs
+title: ""
+description: ""
+tags: ["abc", "def"]
 lang: en
+layout: blog
 usemathjax: false
----
+---
diff --git a/about.html b/about.html
diff --git a/blog.html b/blog.html
diff --git a/blog/index.html b/blog/index.html
@@ -0,0 +1,17 @@
+---
+title: "Blogs list"
+description: "Random blogs"
+lang: en
+layout: blog
+---
+
+<div class="row alert bg-primary">
+  For Athka blogs (National Olympiad for Programming), checkout <a href="https://teqaniaat.github.io/Teqaniaat/athka/">Teqaniaat blog</a>
+</div>
+<div class="row">
+    {% for blog in site.posts %}
+    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
+        {% include blogbox.html %}
+    </div>
+    {% endfor %}
+</div>
diff --git a/blog/tags.html b/blog/tags.html
@@ -0,0 +1,5 @@
+---
+title: "Muaath5 Blog Tags"
+layout: blog
+---
+
diff --git a/cv.html b/cv.html
@@ -6,16 +6,20 @@
 ---
 <div class="row text-center">
   <div class="col-12">
-    <i class="bi-envelope-at-fill"></i>
-    <a class="px-2" href="mailto:[email protected]">
-      [email protected]
-    </a>
-    <i class="bi-telegram"></i>
-    <a class="px-2" href="https://t.me/Muaath_5">
-      @Muaath_5
-    </a>
-    <i class="bi-geo-alt-fill"></i>
-    <p class="px-2">
+    <p class="d-inline px-3">
+      <i class="bi-envelope-at-fill"></i>
+      <a class="px-2" href="mailto:[email protected]">
+        [email protected]
+      </a>
+    </p>
+    <p class="d-inline px-3">
+      <i class="bi-telegram"></i>
+      <a href="https://t.me/Muaath_5">
+        @Muaath_5
+      </a>
+    </p>
+    <p class="d-inline px-3">
+      <i class="bi-geo-alt-fill"></i>
       Saudi Arabia
     </p>
   </div>

diff --git a/index.html b/index.html
@@ -29,13 +29,17 @@
         <h3>About me</h3>
         <div class="col-4">
             <!-- Profile photo -->
+            <img src="https://avatars.githubusercontent.com/u/60256639?v=4" class="img-thumbnail" width="260" height="260" alt="Profile photo">
         </div>
         <div class="col-8">
             <h4>
-                I'm Muaath Alqarni, Mawhiba Student, member of Saudi Informatics Team. Interested in backend-stack developement.
+                I'm Muaath Alqarni, Mawhibastudent based in Saudi Arabia who is interested in technology in general.
+                I like competitive programming, web developement (mainly backend).
+                I like helping the Saudi community growing to achieve Saudi Vision 2030
             </h4>
         </div>
     </div>
+    <hr>
     <div class="row" id="skills">
         <div class="col-6">
             <h3>Soft skills</h3>
@@ -74,9 +78,9 @@ <h4>Projects List</h4>
                 <h5 class="card-title">Saudi Online Judge - SOJ</h5>
                 <p class="card-text">First Saudi and Arabic independent online judge</p>
                 <div class="btn-group" role="group" aria-label="Basic outlined example">
-                    <a href="#" type="button" class="btn btn-outline-primary"><i class="bi-github"></i></a>
-                    <a href="#" type="button" class="btn btn-outline-primary"><i class="bi-telegram"></i></a>
-                    <a href="#" type="button" class="btn btn-outline-primary"><i class="bi-x"></i></a>
+                    <a href="https://github.com/SaudiOnlineJudge" type="button" class="btn btn-outline-primary"><i class="bi-github"></i></a>
+                    <a href="https://t.me/SaudiOnlineJudge" type="button" class="btn btn-outline-primary"><i class="bi-telegram"></i></a>
+                    <a href="https://x.com/SaudiJudge" type="button" class="btn btn-outline-primary"><i class="bi-x"></i></a>
                 </div>
             </div>
         </div>