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

Make about page responsive

Browse Source 
Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>
This commit is contained in:
Al Asad Nur Riyad
2023-05-06 14:15:35 +06:00
parent 6b746e7be7
commit ee2c13ca91
1 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
pages/about.vue
View File

@@ -4,52 +4,66 @@
<template>
<div class="py-5">
<div class="grid grid-cols-8 px-6 py-9 gap-5 container max-w-5xl mx-auto">
<div class="sm:grid grid-cols-8 px-6 py-5 sm:py-9 gap-5 container max-w-5xl mx-auto">
<div class="col-span-5 max-w-md">
<h1 class="text-4xl pb-2 font-bold ">
Al Asad Nur Riyad
</h1>
<div class="my-3 space-x-3 pb-10">
<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 class="flex justify-between">
<div>
<h1 class="text-xl sm:text-4xl pb-2 font-bold ">
Al Asad Nur Riyad
</h1>
<div class="my-3 space-x-3 pb-10">
<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="sm:hidden block col-span-3 pb-5">
<NuxtImg
src="/riyad.jpg"
width="125"
height="115"
quality="50"
class="rounded-md"
/>
</div>
</div>
<h3 class="text-3xl font-semibold pb-12">
<h3 class="text-base sm:text-3xl font-semibold pb-7 sm:pb-12">
Software Engineer, Lorem, ipsum. Lorem, ipsum dolor.
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam ipsam eos aliquam alias eligendi praesentium molestias veniam delectus dolorem, similique sint voluptatum amet adipisci vero ad consequatur expedita nulla commodi dolor veritatis atque. Optio perferendis harum asperiores quas consequuntur, autem repellat ea enim quibusdam sed praesentium, pariatur quos cumque blanditiis.</p>
</div>
<div class="col-span-3">
<div class="hidden sm:block col-span-3">
<NuxtImg
src="/riyad.jpg"
width="450"