Improving index

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

Hide file tree

Showing 6 changed files with 44 additions and 84 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="m-1 badge bg-secondary">' }}</span></small>
             {% endif %}
             </small>
         </p>

diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -2,7 +2,7 @@
 layout: base
 ---
 <nav class="navbar navbar-expand-md shadow-sm">
-    <div class="container py-5">
+    <div class="container px-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>
@@ -16,7 +16,6 @@
 
             <!-- 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>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,51 +1,3 @@
 ---
 layout: base
 ---
-<nav class="navbar navbar-expand-md shadow-sm">
-    <div class="container">
-        <a class="navbar-brand" href="/">Muaath's website</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">
-                <a class="nav-link" href="/about">About</a>
-                <a class="nav-link" href="/blog">Blog</a>
-            </ul>
-
-            <!-- Right Side Of Navbar -->
-            <ul class="navbar-nav ms-auto">
-
-            </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/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="m-1 badge bg-secondary">' }}</span></small>
                 {% endif %}
             </figcaption>
         </figure>

diff --git a/blog/index.html b/blog/index.html
@@ -5,7 +5,8 @@
 layout: blog
 ---
 
-<div class="row alert bg-primary">
+<div class="alert alert-primary">
+  <i class="bi-info-circle"></i>
   For Athka blogs (National Olympiad for Programming), checkout <a href="https://teqaniaat.github.io/Teqaniaat/athka/">Teqaniaat blog</a>
 </div>
 <div class="row">

diff --git a/index.html b/index.html
@@ -16,8 +16,8 @@
 <style>
     main
     {
-        padding-left: 60px;
-        padding-right: 60px;
+        padding-left: 80px;
+        padding-right: 80px;
     }
     main#content > div
     {
@@ -26,21 +26,23 @@
 </style>
 <main id="content" data-bs-spy="scroll" data-bs-target="#main-navbar" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" style="height: 100vh; margin-top: .5rem; overflow: auto;" class="p-3 py-5 rounded-2 container" tabindex="0">
     <div class="row" id="about">
-        <h3>About me</h3>
+        <h2>About me</h2>
         <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, 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>
+            <h5>
+                <p>I'm Muaath Alqarni, Mawhiba student based in Saudi Arabia who is interested in technology in general.</p>
+
+                <p>I like competitive programming, web developement (mainly backend).</p>
+
+                <p>I like helping the Saudi community growing to achieve Saudi Vision 2030</p>
+            </h5>
         </div>
     </div>
     <hr>
-    <div class="row" id="skills">
+    <div class="row" height="500px" id="skills">
         <div class="col-6">
             <h3>Soft skills</h3>
             <ul>
@@ -61,35 +63,41 @@ <h3>Technical skills</h3>
         </div>
     </div>
     <hr>
-    <div class="row" height="300px" id="experience">
-        <h3>Experience</h3>
-        <ul>
-            <li>@tginfo</li>
-            <li>SCPComunity</li>
-            <li>Teqaniaat</li>
-            <li>MRB3</li>
-        </ul>
+    <div class="row" height="500px" id="experience">
+        <div class="col">
+            <h3>Experience</h3>
+            <ul>
+                <li>@tginfo</li>
+                <li>SCPComunity</li>
+                <li>Teqaniaat</li>
+                <li>MRB3</li>
+            </ul>
+        </div>
     </div>
     <hr>
     <div class="row" id="projects">
         <h4>Projects List</h4>
-        <div class="col-6 card m-3">
-            <div class="card-body">
-                <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="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 class="col-6">
+            <div class="card m-3">
+                <div class="card-body">
+                    <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="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>
         </div>
-        <div class="col-6 card m-3">
-            <div class="card-body">
-                <h5 class="card-title">Personal Blog</h5>
-                <p class="card-text">Random blogs in various topics</p>
-                <div class="btn-group" role="group" aria-label="Basic outlined example">
-                    <a href="/blog" type="button" class="btn btn-outline-primary"><i class="bi-link-45deg"></i></a>
+        <div class="col-6">
+            <div class="card m-3">
+                <div class="card-body">
+                    <h5 class="card-title">Personal Blog</h5>
+                    <p class="card-text">Random blogs in various topics</p>
+                    <div class="btn-group" role="group" aria-label="Basic outlined example">
+                        <a href="/blog" type="button" class="btn btn-outline-primary"><i class="bi-link-45deg"></i></a>
+                    </div>
                 </div>
             </div>
         </div>