Merge pull request #3 from Aeonoi/animations

Added styling and some animations
Aeonoi · Oct 26, 2024 · 2e84032 · 2e84032
2 parents d7a50f0 + 444240f
commit 2e84032
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 91 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -3,14 +3,14 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #374151;
+  --background: #24273a;
+  --foreground: #cad3f5;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #374151;
-    --foreground: #ededed;
+    --background: #24273a;
+    --foreground: #cad3f5;
   }
 }
 

diff --git a/components/about.tsx b/components/about.tsx
@@ -6,40 +6,49 @@ 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-white 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">
-              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 className="text-lg text-catppuccin_teal">
+              I'm a junior Computer Science major studying at{" "}
+              <span className="text-catppuccin_red">
+                Rensselaer Polytechnic Institute
+              </span>{" "}
+              with a passion for
+              <span className="text-catppuccin_red">
+                {" "}
+                full-stack web development.
+              </span>{" "}
+              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>
           </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>
-            <ul className="list-disc ml-6 text-lg">
+            <ul className="list-disc ml-6 text-lg text-catppuccin_teal">
               <li>
-                <strong>Languages:</strong> C++, Java, JavaScript, TypeScript, C
+                <strong className="text-catppuccin_red">Languages:</strong> C++,
+                Java, JavaScript, TypeScript, C
               </li>
               <li>
-                <strong>Frontend:</strong> React.js, Next.js, Preact.js,
-                Electron.js, Tailwind CSS, JavaFX
+                <strong className="text-catppuccin_red">Frontend:</strong>{" "}
+                React.js, Next.js, Preact.js, Electron.js, Tailwind CSS, JavaFX
               </li>
               <li>
-                <strong>Backend:</strong> Node.js, Express, MongoDB, Mongoose,
-                PostgreSQL, Spring Boot
+                <strong className="text-catppuccin_red">Backend:</strong>{" "}
+                Node.js, Express, MongoDB, Mongoose, PostgreSQL, Spring Boot
               </li>
               <li>
-                <strong>Other:</strong> Material Tailwind, ShadCN UI components
+                <strong className="text-catppuccin_red">Other:</strong> Material
+                Tailwind, ShadCN UI components
               </li>
               {/* <li> */}
               {/*   <strong>Tools:</strong> Git, GitHub Desktop, tmux, VSCode, */}
@@ -48,53 +57,23 @@ 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>
-            <p className="text-lg">
+            <p className="text-lg text-catppuccin_teal">
               I'm honing my skills in full-stack web development, exploring the
-              features of Next.js 14 and React.js, and working on projects that
-              blend intuitive UI with solid backend functionality. I'm also
-              excited about diving deeper into areas like database optimization
-              and cloud deployment. In my free time, I'm learning the Rust
-              language and exploring the different applications that uses Rust.
+              features of{" "}
+              <span className="text-catppuccin_red">
+                Next.js 14 and React.js
+              </span>
+              , and working on projects that blend intuitive UI with solid
+              backend functionality. I'm also excited about diving deeper into
+              areas like database optimization and cloud deployment. In my free
+              time, I'm learning the Rust language and exploring the different
+              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/background.tsx b/components/background.tsx
@@ -10,7 +10,7 @@ const Background: React.FC<Props> = ({ children, styles }) => {
   return (
     <section
       // className={`relative bg-gradient-to-r from-catppuccin_blue via-catppuccin_lavender to-catppuccin_mauve bg-black opacity-95 ${styles}`}
-      className={`relative bg-gray-700  ${styles}`}
+      className={`relative bg-background  ${styles}`}
     >
       {children}
     </section>

diff --git a/components/hero.tsx b/components/hero.tsx
@@ -1,7 +1,9 @@
+"use client";
 import Link from "next/link";
 import Background from "./background";
 import { FaLinkedin, FaGithub } from "react-icons/fa";
 import { SiGmail } from "react-icons/si";
+import { motion } from "framer-motion";
 
 const Hero: React.FC = () => {
   return (
@@ -13,27 +15,40 @@ const Hero: React.FC = () => {
           </h1>
           <p className="text-lg md:text-xl mb-8">
             I'm a dedicated student passionate about{" "}
-            <span className="font-extrabold">Full Stack Web Development</span>,
-            always seeking new challenges to grow my skills and improve my
+            <span className="font-extrabold text-catppuccin_text">
+              Full Stack Web Development
+            </span>
+            , always seeking new challenges to grow my skills and improve my
             applications.
           </p>
           <div className="flex">
             <div className="flex items-center justify-center space-x-5 mx-10">
-              <Link href={"https://www.linkedin.com/in/dylan-zhou-714110262/"}>
-                <FaLinkedin size={32} />
-              </Link>
-              <Link href={"https://www.github.com/Aeonoi/"}>
-                <FaGithub size={32} />
-              </Link>
-              <Link href={"mailto:[email protected]"}>
-                <SiGmail size={32} />
-              </Link>
-              {/* <Link */}
-              {/*   href="#contact" */}
-              {/*   className="bg-catppuccin_rosewater text-black font-semibold py-3 px-6 rounded-full hover:bg-catppuccin_flamingo transition duration-300" */}
-              {/* > */}
-              {/*   Contact Me */}
-              {/* </Link> */}
+              <motion.div
+                whileHover={{ scale: 1.3, originX: 0 }}
+                transition={{ stype: "spring", stiffness: 300 }}
+              >
+                <Link
+                  href={"https://www.linkedin.com/in/dylan-zhou-714110262/"}
+                >
+                  <FaLinkedin size={32} />
+                </Link>
+              </motion.div>
+              <motion.div
+                whileHover={{ scale: 1.3, originX: 0 }}
+                transition={{ stype: "spring", stiffness: 300 }}
+              >
+                <Link href={"https://www.github.com/Aeonoi/"}>
+                  <FaGithub size={32} />
+                </Link>
+              </motion.div>
+              <motion.div
+                whileHover={{ scale: 1.3, originX: 0 }}
+                transition={{ stype: "spring", stiffness: 300 }}
+              >
+                <Link href={"mailto:[email protected]"}>
+                  <SiGmail size={32} />
+                </Link>
+              </motion.div>
             </div>
           </div>
         </div>

diff --git a/components/project-card.tsx b/components/project-card.tsx
@@ -17,20 +17,22 @@ 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}
           />
         </div>
         <div className="p-8">
-          <p className="mt-2 text-sm text-white font-semibold">{description}</p>
+          <p className="mt-2 text-sm text-catppuccin_teal font-semibold">
+            {description}
+          </p>
         </div>
       </div>
     </div>

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>

diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^11.11.10",
     "next": "15.0.0",
     "react": "19.0.0-rc-65a56d0e-20241020",
     "react-dom": "19.0.0-rc-65a56d0e-20241020",

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -20,6 +20,7 @@ const config: Config = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        catppuccin_base: "#24273a",
         catppuccin_rosewater: "#f4dbd6",
         catppuccin_flamingo: "#f0c6c6",
         catppuccin_pink: "#f5bde6",
@@ -29,6 +30,9 @@ const config: Config = {
         catppuccin_green: "#a6da95",
         catppuccin_blue: "#8aadf4",
         catppuccin_lavender: "#b7bdf8",
+        catppuccin_sapphire: "#7dc4e4",
+        catppuccin_teal: "#8bd5ca",
+        catppuccin_text: "#cad3f5",
       },
     },
   },

diff --git a/yarn.lock b/yarn.lock
@@ -497,6 +497,13 @@ foreground-child@^3.1.0:
     cross-spawn "^7.0.0"
     signal-exit "^4.0.1"
 
+framer-motion@^11.11.10:
+  version "11.11.10"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.11.10.tgz#9045dddf6ebb7548335db1c284cc2824283c7634"
+  integrity sha512-061Bt1jL/vIm+diYIiA4dP/Yld7vD47ROextS7ESBW5hr4wQFhxB5D5T5zAc3c/5me3cOa+iO5LqhA38WDln/A==
+  dependencies:
+    tslib "^2.4.0"
+
 fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"