From 900a55c597ad62016e8616c8a532991d53311ee7 Mon Sep 17 00:00:00 2001 From: Aeonoi Date: Fri, 25 Oct 2024 16:33:31 -0400 Subject: [PATCH 1/3] feat(packages): add framer-motion --- package.json | 1 + yarn.lock | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/package.json b/package.json index 38484f2..f0fc33f 100644 --- 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/yarn.lock b/yarn.lock index 95cb853..d47672a 100644 --- 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" From a42e8b4022f1ee46b3360cd1292e68fe3da3c3fb Mon Sep 17 00:00:00 2001 From: Aeonoi Date: Fri, 25 Oct 2024 18:19:06 -0400 Subject: [PATCH 2/3] style(style): add animations to hero icons and add catppuccin colors --- app/globals.css | 8 ++--- components/about.tsx | 61 ++++++++++++++++++++++--------------- components/background.tsx | 2 +- components/hero.tsx | 49 ++++++++++++++++++----------- components/project-card.tsx | 4 ++- tailwind.config.ts | 4 +++ 6 files changed, 81 insertions(+), 47 deletions(-) diff --git a/app/globals.css b/app/globals.css index c5f9805..e43407b 100644 --- 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 index 2d2e25d..8b09ca2 100644 --- a/components/about.tsx +++ b/components/about.tsx @@ -6,19 +6,26 @@ const About: React.FC = () => {
{/*
*/} -
+

Hi, I'm Dylan

-

- 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. +

+ 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.

@@ -26,20 +33,22 @@ const About: React.FC = () => {

Skills & Technologies

-
    +
    • - Languages: C++, Java, JavaScript, TypeScript, C + Languages: C++, + Java, JavaScript, TypeScript, C
    • - Frontend: React.js, Next.js, Preact.js, - Electron.js, Tailwind CSS, JavaFX + Frontend:{" "} + React.js, Next.js, Preact.js, Electron.js, Tailwind CSS, JavaFX
    • - Backend: Node.js, Express, MongoDB, Mongoose, - PostgreSQL, Spring Boot + Backend:{" "} + Node.js, Express, MongoDB, Mongoose, PostgreSQL, Spring Boot
    • - Other: Material Tailwind, ShadCN UI components + Other: Material + Tailwind, ShadCN UI components
      • {/*
    • */} {/* Tools: Git, GitHub Desktop, tmux, VSCode, */} @@ -52,13 +61,17 @@ const About: React.FC = () => {

      Current Focus & Interests

      -

      +

      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{" "} + + 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.

      {/*
      */} diff --git a/components/background.tsx b/components/background.tsx index b8d57bf..14a544a 100644 --- a/components/background.tsx +++ b/components/background.tsx @@ -10,7 +10,7 @@ const Background: React.FC = ({ children, styles }) => { return (
      {children}
      diff --git a/components/hero.tsx b/components/hero.tsx index 02162f1..c54f927 100644 --- 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 = () => {

      I'm a dedicated student passionate about{" "} - Full Stack Web Development, - always seeking new challenges to grow my skills and improve my + + Full Stack Web Development + + , always seeking new challenges to grow my skills and improve my applications.

      - - - - - - - - - - {/* */} - {/* Contact Me */} - {/* */} + + + + + + + + + + + + + + +
      diff --git a/components/project-card.tsx b/components/project-card.tsx index 0415245..d0ee248 100644 --- a/components/project-card.tsx +++ b/components/project-card.tsx @@ -30,7 +30,9 @@ const ProjectCard: React.FC = ({ />
-

{description}

+

+ {description} +

diff --git a/tailwind.config.ts b/tailwind.config.ts index 9bf76f5..92953cf 100644 --- 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", }, }, }, From 444240f2e400a4b6cfc14ec10fd914ae29a879a9 Mon Sep 17 00:00:00 2001 From: Aeonoi Date: Fri, 25 Oct 2024 20:44:02 -0400 Subject: [PATCH 3/3] 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 = () => {
{/*
*/} -
-
+
+

Hi, I'm Dylan

I'm a junior Computer Science major studying at{" "} @@ -29,7 +29,7 @@ const About: React.FC = () => {

-
+

Skills & Technologies

@@ -57,7 +57,7 @@ const About: React.FC = () => {
-
+

Current Focus & Interests

@@ -74,40 +74,6 @@ const About: React.FC = () => { applications that uses Rust.

- {/*
*/} - {/*
*/} - {/*
*/} - {/*

Hi, I'm Dylan

*/} - {/*

*/} - {/* 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. */} - {/*

*/} - {/*
*/} - {/*
*/} - {/*

Education

*/} - {/*

GPA: 3.62

*/} - {/*

Major: Computer Science

*/} - {/*

Expected Graduation: May 2026

*/} - {/*

Honors: Deans List

*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*

Skills

*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/}
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 = ({
{title}
{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 = () => { {

Resume

-
+