From 049b4106128ef3846f11980346c9e6e875008698 Mon Sep 17 00:00:00 2001
From: Anderson T <tseng.andersonn@gmail.com>
Date: Sun, 19 Jan 2025 06:51:49 -0800
Subject: [PATCH] support very small screen sizes

---
 src/components/footer.tsx |  2 +-
 src/components/header.tsx | 35 ++++++++++++++++++-----------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 5de7a76..3f47090 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -5,7 +5,7 @@ const Footer = () => {
         <footer className="flex flex-col items-center justify-center">
             
             {/* show links if sidebar is hidden because we are on mobile */}
-            <div className="sm:hidden flex">
+            <div className="sm:hidden flex flex-wrap justify-center items-center">
 
                 <Link href="https://www.linkedin.com/in/andersontseng/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">Linkedin</Link>
                 
diff --git a/src/components/header.tsx b/src/components/header.tsx
index f4e890d..720cf2d 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -4,24 +4,25 @@ const Header = () => {
     return (
         <header className=" ">
             <nav className="w-full mx-auto flex items-center justify-between ">
-                
-                <div className="hidden min-[100px]:block justify-start">
-                    <Link href="/" className="text-xl font-bold text-gray-500">
-                        Anderson Tseng
-                    </Link>
-                </div>
+            
+            <div className="justify-start">
+                <Link href="/" className="text-xl font-bold text-gray-500">
+                <span className="min-[300px]:hidden">AT</span>
+                <span className="hidden min-[300px]:inline">Anderson Tseng</span>
+                </Link>
+            </div>
 
-                <div className="flex sm:gap-4 justify-end grow max-[99px]:w-full">
-                    <Link href="/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
-                        Home
-                    </Link>
-                    <Link href="/blog" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
-                        Blog
-                    </Link>
-                    {/* <Link href="/contact" className="text-gray-500 hover:text-gray-900">
-                        Contact
-                    </Link> */}
-                </div>
+            <div className="flex sm:gap-4 justify-end grow max-[99px]:w-full">
+                <Link href="/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
+                Home
+                </Link>
+                <Link href="/blog" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
+                Blog
+                </Link>
+                {/* <Link href="/contact" className="text-gray-500 hover:text-gray-900">
+                Contact
+                </Link> */}
+            </div>
             </nav>
         </header>
     )