style(style): fix weird text on small devices

Aeonoi · Oct 24, 2024 · d79e692 · d79e692
1 parent 504ea97
commit d79e692
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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"