Design about page

Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>

components/about/footer.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="py-5 border-t mt-5 text-zinc-700">
+    <div class="px-6 container max-w-5xl mx-auto">
+      <div class="grid grid-cols-1 md:grid-cols-2">
+        <div class="flex flex-col my-5 md:my-0 md:justify-self-start">
+          <p class="text-black text-base font-semibold">
+            Quick Link
+          </p>
+          <NuxtLink to="/" class="hover:underline">
+            Home
+          </NuxtLink>
+          <NuxtLink to="/categories" class="hover:underline">
+            Categories
+          </NuxtLink>
+          <NuxtLink to="/blogs" class="hover:underline">
+            Archive
+          </NuxtLink>
+          <NuxtLink to="https://www.nurriyad.xyz/" target="_blank" class="hover:underline">
+            About Me
+          </NuxtLink>
+        </div>
+        <div>
+          <p class="text-black text-base font-semibold">
+            Connect
+          </p>
+          <p>
+            I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you
+            have an interesting idea, either open source or paid let's connect.
+          </p>
+
+          <a
+            href="mailto: alasadnurriyad4@gmail.com"
+            class="block text-center w-full bg-sky-700 p-2 rounded-lg text-white mt-3 text-sm"
+          >
+            Sent Mail
+          </a>
+        </div>
+      </div>
+
+      <div class="border-t mt-5 text-center p-2">
+        © 2020-2022 No Right is reserved. Who cares 🤷‍♂️? It's
+        <a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline">open source</a>
+        anyway.
+      </div>
+    </div>
+  </div>
+</template>

components/main/header.vue

@@ -5,16 +5,16 @@ const path = computed(() => route.fullPath.replace('/', ''))
 </script>
 
 <template>
-  <div class="py-5 border-b text-zinc-700">
+  <div class="py-5 border-b font-semibold">
     <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline ">
       <ul class="flex items-baseline space-x-5">
-        <li class="">
-          <NuxtLink to="/" class="text-2xl text-black font-bold " :class="{ underline: path === '' }">
-            Home
+        <li class="text-lg sm:text-2xl font-bold">
+          <NuxtLink to="/" :class="{ underline: path === '' }">
+            Riyad's Blog
           </NuxtLink>
         </li>
       </ul>
-      <ul class="flex items-center space-x-3 font-bold ">
+      <ul class="flex items-center space-x-3 sm:space-x-6 text-sm sm:text-lg">
         <li>
           <NuxtLink to="/blogs" :class="{ underline: path === 'blogs' }">
             Blogs
@@ -25,9 +25,9 @@ const path = computed(() => route.fullPath.replace('/', ''))
             Categories
           </NuxtLink>
         </li>
-        <li title="About Me" :class="{ underline: path === 'myself' }">
-          <NuxtLink to="/myself" aria-label="About me">
-            About Me
+        <li title="About Me" :class="{ underline: path === 'about' }">
+          <NuxtLink to="/about" aria-label="About me">
+            About
           </NuxtLink>
         </li>
       </ul>