feat: responsive avatar and social

chanh1964 · Jun 5, 2024 · 726fef7 · 726fef7
1 parent 911c4b2
commit 726fef7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/app/components/ProfileIntro.tsx b/app/components/ProfileIntro.tsx
@@ -14,10 +14,14 @@ export function AvatarAndSocial(props: Props) {
   const [copyText, setCopyText] = useState<string>('Click to Copy');
 
   return (
-    <Space className="avatar-and-social" direction="vertical" size="middle">
+    <Space
+      className={`avatar-and-social ${props.className}`}
+      direction="vertical"
+      size="middle"
+    >
       <Image
         preview={false}
-        className={`avatar-and-social__avatar ${props.className}`}
+        className={`avatar-and-social__avatar`}
         src="/avatar.jpg"
         alt="Avatar"
       />

diff --git a/app/globals.css b/app/globals.css
@@ -74,23 +74,26 @@ scrollbar {
   @apply h-[100vh] !bg-chanh-emphasize;
 }
 .chanh-nav__links-wrapper {
-  @apply py-8;
+  @apply py-5 xl:py-8;
 }
 .chanh-nav__links {
   text-decoration: none;
   @apply block py-2 px-3 rounded-2xl
   hover:bg-chanh-emphasize-400 focus:bg-chanh-emphasize-400
-  text-3xl text-center text-chanh-secondary hover:text-chanh-secondary focus:text-chanh-secondary;
+  text-2xl xl:text-3xl text-center text-chanh-secondary hover:text-chanh-secondary focus:text-chanh-secondary;
 }
 
 .avatar-and-social {
-  @apply text-center;
+  @apply text-center w-full;
+}
+.avatar-and-social--mobile {
+  @apply lg:!hidden bg-chanh-emphasize py-5 mb-5 rounded-xl;
 }
 .avatar-and-social__avatar {
-  @apply border-chanh-secondary border-8 rounded-full !w-44 xl:!w-full;
+  @apply border-chanh-secondary border-4 xl:border-8 rounded-full !w-40 xl:!w-full;
 }
 .avatar-and-social__name {
-  @apply !text-2xl text-chanh-secondary;
+  @apply !text-xl md:!text-2xl text-chanh-secondary;
 }
 .avatar-and-social__social {
   @apply flex justify-center gap-2;

diff --git a/app/page.tsx b/app/page.tsx
@@ -3,7 +3,7 @@
 import { Divider, Image, Skeleton } from 'antd';
 import { useEffect, useState } from 'react';
 
-import { ChanhUpdatesTable } from './components';
+import { AvatarAndSocial, ChanhUpdatesTable } from './components';
 import DataSource from './DataSource';
 import { Update } from './types';
 
@@ -22,6 +22,7 @@ export default function Home() {
 
   return (
     <>
+      <AvatarAndSocial className="avatar-and-social--mobile" />
       <div id="about-me">
         <h1>About Me</h1>
         <Divider />