style(style): add more gaps between components and add better colors

Aeonoi · Oct 26, 2024 · 444240f · 444240f
1 parent a42e8b4
commit 444240f
Show file tree

Hide file tree

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