From d79e692819cae17999d20deae96c8e13a70145b0 Mon Sep 17 00:00:00 2001
From: Aeonoi <dzhou527@gmail.com>
Date: Thu, 24 Oct 2024 18:25:00 -0400
Subject: [PATCH] style(style): fix weird text on small devices

---
 components/about.tsx    | 4 ++--
 components/navbar.tsx   | 6 ++++--
 components/projects.tsx | 1 +
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/about.tsx b/components/about.tsx
index 2cc04d1..4224f84 100644
--- a/components/about.tsx
+++ b/components/about.tsx
@@ -4,9 +4,9 @@ import Background from "./background";
 const About: React.FC = () => {
   return (
     <main id="about" className="animate-fadeIn">
-      <Background styles="h-screen flex items-center">
+      <Background styles="h-max flex items-center">
         {/* <div className="grid grid-cols-2 text-black max-w-4xl mx-auto p-6"> */}
-        <div className="grid grid-cols-2 text-black justify-items-end mx-auto p-10">
+        <div className="grid grid-cols-1 md:grid-cols-2 text-black justify-items-end mx-auto p-10">
           <section className="mb-8 max-w-3xl">
             <h1 className="text-4xl font-bold mb-4">Hi, I'm Dylan</h1>
             <p className="text-lg">
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 3eeec6f..7b98fa2 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -5,8 +5,10 @@ const Navbar: React.FC = () => {
     <header className="sticky top-0 w-full h-14 bg-transparent shadow-md z-50 bg-gradient-to-r from-catppuccin_blue via-catppuccin_lavender to-catppuccin_mauve animate-fadeIn">
       <nav className="container mx-auto px-3 py-3">
         <div className="flex justify-between items-center">
-          <div className="text-2xl font-bold text-gray-800">Dylan Zhou</div>
-          <div className="hidden md:flex items-center space-x-4">
+          <div className="hidden md:flex text-2xl font-bold text-gray-800">
+            Dylan Zhou
+          </div>
+          <div className="flex justify-center items-center space-x-4">
             <Link
               href="#hero"
               className="text-gray-800 hover:text-catppuccin_blue"
diff --git a/components/projects.tsx b/components/projects.tsx
index 54ade3c..fcc1cff 100644
--- a/components/projects.tsx
+++ b/components/projects.tsx
@@ -5,6 +5,7 @@ const Projects: React.FC = () => {
   return (
     <main id="projects" className="animate-fadeIn">
       <Background styles="h-max">
+        <p className="text-5xl items-center text-center text-black">Projects</p>
         <div className="grid grid-cols-1 xl:grid-cols-2 justify-items-center items-center gap-10 p-8">
           <ProjectCard
             link="https://github.com/Aeonoi/studyit"