From 444240f2e400a4b6cfc14ec10fd914ae29a879a9 Mon Sep 17 00:00:00 2001
From: Aeonoi <dzhou527@gmail.com>
Date: Fri, 25 Oct 2024 20:44:02 -0400
Subject: [PATCH] style(style): add more gaps between components and add better
 colors

---
 components/about.tsx        | 42 ++++---------------------------------
 components/project-card.tsx |  4 ++--
 components/projects.tsx     |  4 ++--
 components/resume.tsx       |  6 +++---
 4 files changed, 11 insertions(+), 45 deletions(-)

diff --git a/components/about.tsx b/components/about.tsx
index 8b09ca2..c5ecd59 100644
--- a/components/about.tsx
+++ b/components/about.tsx
@@ -6,8 +6,8 @@ const About: React.FC = () => {
     <main id="about" className="animate-fadeIn">
       <Background styles="h-full md:h-screen flex items-center">
         {/* <div className="grid grid-cols-2 text-black max-w-4xl mx-auto p-6"> */}
-        <div className="grid grid-cols-1 md:grid-cols-2 text-catppuccin_text justify-items-center mx-auto p-10">
-          <section className="mb-8 max-w-3xl">
+        <div className="grid grid-cols-1 md:grid-cols-2 text-catppuccin_text p-10 w-full justify-items-center">
+          <section className="mb-8 max-w-xl">
             <h1 className="text-4xl font-bold mb-4">Hi, I'm Dylan</h1>
             <p className="text-lg text-catppuccin_teal">
               I'm a junior Computer Science major studying at{" "}
@@ -29,7 +29,7 @@ const About: React.FC = () => {
             </p>
           </section>
 
-          <section className="mb-8 max-w-3xl">
+          <section className="mb-8 max-w-xl">
             <h2 className="text-3xl font-semibold mb-4">
               Skills & Technologies
             </h2>
@@ -57,7 +57,7 @@ const About: React.FC = () => {
             </ul>
           </section>
 
-          <section className="mb-8 max-w-3xl">
+          <section className="mb-8 max-w-xl">
             <h2 className="text-3xl font-semibold mb-4">
               Current Focus & Interests
             </h2>
@@ -74,40 +74,6 @@ const About: React.FC = () => {
               applications that uses Rust.
             </p>
           </section>
-          {/* <div className="grid grid-cols-2 justify-center items-center flex-wrap"> */}
-          {/*   <div className="flex flex-col gap-5"> */}
-          {/*     <div className="min-h-full max-w-full mx-auto p-6 bg-white shadow-md rounded-lg text-black"> */}
-          {/*       <h2 className="text-2xl font-semibold mb-3">Hi, I'm Dylan</h2> */}
-          {/*       <p className="text-base"> */}
-          {/*         I'm a junior Computer Science major studying at Rensselaer */}
-          {/*         Polytechnic Institute with a passion for full-stack web */}
-          {/*         development. Driven by curiosity, I thrive on exploring new */}
-          {/*         technologies and pushing myself to continuously learn and */}
-          {/*         grow. Whether I'm building dynamic web applications or diving */}
-          {/*         into a new coding challenge, I'm always seeking opportunities */}
-          {/*         to expand my skill set and improve. My goal is to create */}
-          {/*         impactful and intuitive digital solutions while staying at the */}
-          {/*         forefront of innovation in the tech world. */}
-          {/*       </p> */}
-          {/*     </div> */}
-          {/*     <div className="min-h-full max-w-full mx-auto p-6 bg-white shadow-md rounded-lg text-black"> */}
-          {/*       <h2 className="text-2xl font-semibold mb-3">Education</h2> */}
-          {/*       <p>GPA: 3.62</p> */}
-          {/*       <p>Major: Computer Science</p> */}
-          {/*       <p>Expected Graduation: May 2026</p> */}
-          {/*       <p>Honors: Deans List</p> */}
-          {/*     </div> */}
-          {/*   </div> */}
-          {/*   <div className="min-h-full max-w-full mx-auto p-6 bg-white shadow-md rounded-lg text-black"> */}
-          {/*     <h2 className="text-2xl font-semibold mb-3">Skills</h2> */}
-          {/*     <div className="flex"> */}
-          {/*       <IoLogoJavascript size={32} /> */}
-          {/*       <SiTypescript size={32} /> */}
-          {/*       <TbBrandCpp size={32} /> */}
-          {/*       <FaJava size={32} /> */}
-          {/*     </div> */}
-          {/*   </div> */}
-          {/* </div> */}
         </div>
       </Background>
     </main>
diff --git a/components/project-card.tsx b/components/project-card.tsx
index d0ee248..52f9345 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -17,14 +17,14 @@ const ProjectCard: React.FC<Props> = ({
     <div className="min-h-full max-w-3xl mx-auto p-3 text-black">
       <Link
         href={link}
-        className="uppercase tracking-wide text-2xl text-indigo-500 block mt-1 leading-tight font-bold hover:underline m-3"
+        className="uppercase tracking-wide text-2xl text-catppuccin_mauve block mt-1 leading-tight font-bold hover:underline m-3"
       >
         {title}
       </Link>
       <div className="flex flex-col">
         <div className="flex w-full">
           <img
-            className="aspect-auto object-cover max-h-full rounded-t-lg block"
+            className="aspect-auto object-cover max-h-full rounded-lg block"
             src={image}
             alt={title}
           />
diff --git a/components/projects.tsx b/components/projects.tsx
index b039424..e918a48 100644
--- a/components/projects.tsx
+++ b/components/projects.tsx
@@ -25,14 +25,14 @@ const Projects: React.FC = () => {
           <ProjectCard
             link="https://github.com/Aeonoi/notts"
             description="This desktop application is a user friendly markdown note-taking application with support for folder organization to 
-            help users keep notes organized and easily accessible. Users can easily acceess notes via folders and remove notes and folders quickly.
+            help users keep notes organized and easily accessible. Users can easily access notes via folders and remove notes and folders quickly.
             Notes are saved on every write."
             title="Notts"
             image="notts.png"
           />
           <ProjectCard
             link="https://github.com/wrighs6/leanto"
-            description="leanto is a simple task management application designed to simplify the process of being on multiple teams.
+            description="Leanto is a simple task management application designed to simplify the process of being on multiple teams.
             It is common to be a part of multiple different projects.
             leanto aims to provide an interface to display the tasks from each projects while also providing an interface to interact with additional project specific data and controls.
             This application is aimed towards students and professionals alike."
diff --git a/components/resume.tsx b/components/resume.tsx
index fb03f72..5aa4c80 100644
--- a/components/resume.tsx
+++ b/components/resume.tsx
@@ -9,12 +9,12 @@ const Resume: React.FC = () => {
         <p className="text-5xl items-center text-center text-white m-20 lg:m-10">
           Resume
         </p>
-        <div className="grid grid-cols-1 lg:grid-cols-2">
+        <div className="flex flex-col items-center gap-10">
           <div className="hidden lg:flex">
             <embed
-              src="Resume.pdf#zoom=100"
+              src="Resume.pdf#zoom=90"
               width="1000"
-              height="800"
+              height="700"
               type="application/pdf"
             />
           </div>