RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix footer

Browse Source 
Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>
This commit is contained in:
Al Asad Nur Riyad
2023-05-06 12:51:59 +06:00
parent 28ae28be2f
commit 6b746e7be7
8 changed files with 117 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/about/footer.vue
View File

@@ -1,47 +0,0 @@
<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>

18
components/footer/connect.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<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>
</template>

45
components/footer/devloper.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div>
<p class="text-black text-2xl py-1 font-semibold">
Al Asad Nur Riyad
</p>
<p class="py-2">
Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently
working at Appscode Inc.
</p>
<div class="my-3 space-x-3 pb-3">
<NuxtLink
to="https://github.com/nurRiyad"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
aria-label="Github"
>
<Icon name="fa:github" size="1em" />
</NuxtLink>
<NuxtLink
to="https://www.linkedin.com/in/nur-riyad/"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
aria-label="LinkedIn"
>
<Icon name="fa:linkedin-square" size="1em" />
</NuxtLink>
<NuxtLink
to="https://twitter.com/qdnvubp"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
aria-label="Twitter"
>
<Icon name="fa:twitter-square" size="1em" />
</NuxtLink>
<NuxtLink
to="https://stackoverflow.com/users/16781395/nur-riyad"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
aria-label="StackOverflow"
>
<Icon name="fa:stack-overflow" size="1em" />
</NuxtLink>
</div>
</div>
</template>

19
components/footer/link.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="flex flex-col my-5 md:my-0 md:justify-self-center">
<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>
</template>

10
components/footer/site.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<div>
<p class="text-black text-base py-1 font-semibold">
About This Site
</p>
<p class="py-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus obcaecati saepe ratione excepturi, unde nesciunt esse magnam vero qui quam.
</p>
</div>
</template>

99
components/main/footer.vue
View File

@@ -1,83 +1,18 @@
<script setup lang="ts">
const route = useRoute()
const path = computed(() => route.fullPath.replace('/', ''))
</script>
<template> <template>
<div class="py-5 border-t mt-5 text-zinc-700"> <div class="py-5 border-t mt-5 text-zinc-700">
<div class="px-6 container max-w-5xl mx-auto"> <div class="px-6 container max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3"> <div class="grid grid-cols-1 md:grid-cols-3">
<div> <FooterSite v-if="path === 'about'" />
<p class="text-black text-2xl py-1 font-semibold"> <FooterDevloper v-else />
Al Asad Nur Riyad
</p>
<p class="py-2">
Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently
working at Appscode Inc.
</p>
<div class="my-3 space-x-3 pb-3">
<NuxtLink
to="https://github.com/nurRiyad"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
aria-label="Github"
>
<Icon name="fa:github" size="1em" />
</NuxtLink>
<NuxtLink
to="https://www.linkedin.com/in/nur-riyad/"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
aria-label="LinkedIn"
>
<Icon name="fa:linkedin-square" size="1em" />
</NuxtLink>
<NuxtLink
to="https://twitter.com/qdnvubp"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
aria-label="Twitter"
>
<Icon name="fa:twitter-square" size="1em" />
</NuxtLink>
<NuxtLink
to="https://stackoverflow.com/users/16781395/nur-riyad"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
aria-label="StackOverflow"
>
<Icon name="fa:stack-overflow" size="1em" />
</NuxtLink>
</div>
</div>
<div class="flex flex-col my-5 md:my-0 md:justify-self-center">
<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 <FooterLink />
href="mailto: alasadnurriyad4@gmail.com" <FooterConnect />
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>
<div class="border-t mt-5 text-center p-2"> <div class="border-t mt-5 text-center p-2">
@@ -88,3 +23,17 @@
</div> </div>
</div> </div>
</template> </template>
<style>
/* we will explain what these classes do next! */
.v-enter-active,
.v-leave-active {
transition: all 0.4s;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>

22
layouts/bio.vue
View File

@@ -1,22 +0,0 @@
<template>
<div class="gd-container font-spacegrotesk">
<header class="fixed w-full bg-white z-10">
<MainHeader />
</header>
<main>
<div class="p-9" />
<slot />
</main>
<footer>
<AboutFooter />
</footer>
</div>
</template>
<style scoped>
.gd-container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
</style>

4
pages/about.vue
View File

@@ -1,7 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
definePageMeta({
layout: 'bio',
})
</script> </script>
<template> <template>