From 75e9f37894a72e002ebd4be2b4f816389d18f09e Mon Sep 17 00:00:00 2001 From: Kevin Loritsch <56408094+Kevinloritsch@users.noreply.github.com> Date: Wed, 3 Sep 2025 17:02:15 -0700 Subject: [PATCH 1/5] Update README.md --- README.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/README.md b/README.md index 6ec10cb..5baa8f4 100644 --- a/README.md +++ b/README.md @@ -3,19 +3,14 @@ ![Next.js](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23407ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white)
![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) ![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=white) -## Figma - -[ACM UCR Website Template Figma Design File](https://www.figma.com/) - ## Node.js -ACM UCR Website Template runs on Node.js Version 20.10.0 and higher. Please ensure you have Node.js installed via the [official website](https://nodejs.org/en). +My Portfolio runs on Node.js Version 20.10.0 and higher. Please ensure you have Node.js installed via the [official website](https://nodejs.org/en). ## Next.js From 73a65ba06c00c26b665a020c9986937eab8590a1 Mon Sep 17 00:00:00 2001 From: Kevin Loritsch Date: Wed, 3 Sep 2025 17:20:36 -0700 Subject: [PATCH 2/5] add links per project --- src/app/components/Project.tsx | 31 ++++++++---- src/app/components/Projects.tsx | 3 +- src/data/ProjectsData.ts | 83 ++++++++++++++++++++++++++++++++- 3 files changed, 106 insertions(+), 11 deletions(-) diff --git a/src/app/components/Project.tsx b/src/app/components/Project.tsx index 7971672..1cbe135 100644 --- a/src/app/components/Project.tsx +++ b/src/app/components/Project.tsx @@ -3,18 +3,25 @@ import Image, { StaticImageData } from "next/image"; import { motion } from "motion/react"; import { IconType } from "react-icons"; +import Link from "next/link"; interface techEntry { icon: IconType; } +interface linkEntry { + icon: IconType; + link: string; +} + interface projectProps { image: StaticImageData; title: string; description: string; date: string; role: string; - techStack?: techEntry[]; + techStack: techEntry[]; + links: linkEntry[]; } const Project = ({ @@ -24,11 +31,20 @@ const Project = ({ date, role, techStack, + links, }: projectProps) => { return (

{title}

-
Deploy Links
+
+
+ {links.map(({ icon: Icon, link }, i) => ( + + + + ))} +
+
- {techStack && - techStack.map(({ icon: Icon }, i) => ( -
- -
- ))} + {techStack.map(({ icon: Icon }, i) => ( +
+ +
+ ))}
{role}
diff --git a/src/app/components/Projects.tsx b/src/app/components/Projects.tsx index 6b3874f..7e0f436 100644 --- a/src/app/components/Projects.tsx +++ b/src/app/components/Projects.tsx @@ -12,7 +12,7 @@ const Projects = () => { />
{projectItems.map( - ({ image, title, date, description, role, techStack }, i) => ( + ({ image, title, date, description, role, techStack, links }, i) => (
{ description={description} role={role} techStack={techStack} + links={links} />
), diff --git a/src/data/ProjectsData.ts b/src/data/ProjectsData.ts index 8065c37..dc6c438 100644 --- a/src/data/ProjectsData.ts +++ b/src/data/ProjectsData.ts @@ -10,7 +10,7 @@ import SquareRoot from "@/public/projects/squareRoot.webp"; import { IconType } from "react-icons"; import { RiNextjsFill } from "react-icons/ri"; -import { FaReact, FaFigma } from "react-icons/fa"; +import { FaReact, FaFigma, FaGithub } from "react-icons/fa"; import { SiTypescript, SiTailwindcss, @@ -18,17 +18,24 @@ import { SiShadcnui, } from "react-icons/si"; import { PiFileCpp } from "react-icons/pi"; +import { IoIosLink } from "react-icons/io"; interface techEntry { icon: IconType; } + +interface linkEntry { + icon: IconType; + link: string; +} interface ProjectItem { image: StaticImageData; title: string; description: string; date: string; role: string; - techStack?: techEntry[]; + techStack: techEntry[]; + links: linkEntry[]; } const projectItems: ProjectItem[] = [ @@ -59,6 +66,16 @@ const projectItems: ProjectItem[] = [ icon: SiPrettier, }, ], + links: [ + { + icon: FaGithub, + link: "https://github.com/acm-ucr/ula-website", + }, + { + icon: IoIosLink, + link: "https://ula.cs.ucr.edu/", + }, + ], }, { image: Tree, @@ -90,6 +107,16 @@ const projectItems: ProjectItem[] = [ icon: SiShadcnui, }, ], + links: [ + { + icon: FaGithub, + link: "https://github.com/Kevinloritsch/UCRCS010CHelper", + }, + { + icon: IoIosLink, + link: "https://kevinloritsch.github.io/UCRCS010CHelper/", + }, + ], }, { image: PTSO, @@ -118,6 +145,16 @@ const projectItems: ProjectItem[] = [ icon: SiPrettier, }, ], + links: [ + { + icon: FaGithub, + link: "https://github.com/acm-ucr/ptso-website/", + }, + { + icon: IoIosLink, + link: "https://ptso.ucrhighlanders.org/", + }, + ], }, { image: FinalTake, @@ -149,6 +186,16 @@ const projectItems: ProjectItem[] = [ icon: SiShadcnui, }, ], + links: [ + { + icon: FaGithub, + link: "https://github.com/qhgill/final-take/", + }, + { + icon: IoIosLink, + link: "https://qhgill.github.io/final-take/", + }, + ], }, { image: Chess, @@ -162,6 +209,12 @@ const projectItems: ProjectItem[] = [ icon: PiFileCpp, }, ], + links: [ + { + icon: FaGithub, + link: "https://github.com/Kevinloritsch/Chess-Minimax-Parallel", + }, + ], }, { @@ -191,6 +244,16 @@ const projectItems: ProjectItem[] = [ icon: SiPrettier, }, ], + links: [ + { + icon: FaGithub, + link: "https://github.com/acm-ucr/aviatr-website/", + }, + { + icon: IoIosLink, + link: "https://aviatr.ucrhighlanders.org/", + }, + ], }, { @@ -223,6 +286,16 @@ const projectItems: ProjectItem[] = [ icon: SiShadcnui, }, ], + links: [ + { + icon: FaGithub, + link: "https://github.com/acm-ucr/leap-website/", + }, + { + icon: IoIosLink, + link: "https://leap.ucrhighlanders.org/", + }, + ], }, { image: SquareRoot, @@ -235,6 +308,12 @@ const projectItems: ProjectItem[] = [ icon: PiFileCpp, }, ], + links: [ + { + icon: FaGithub, + link: "https://github.com/Kevinloritsch/squareRoot", + }, + ], }, ]; From 6306626ad9ae6f1b02e9975e939e0fa45b96e230 Mon Sep 17 00:00:00 2001 From: Kevin Loritsch Date: Wed, 3 Sep 2025 17:22:47 -0700 Subject: [PATCH 3/5] quick spacing --- src/app/components/Landing.tsx | 4 ++-- src/app/components/Project.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/Landing.tsx b/src/app/components/Landing.tsx index 34233a8..74dfd70 100644 --- a/src/app/components/Landing.tsx +++ b/src/app/components/Landing.tsx @@ -20,11 +20,11 @@ const Landing = () => {
-

+

Kevin Loritsch

-
+
{socialLinks.map(({ link, icon: Icon }, i) => ( diff --git a/src/app/components/Project.tsx b/src/app/components/Project.tsx index 1cbe135..173fc8e 100644 --- a/src/app/components/Project.tsx +++ b/src/app/components/Project.tsx @@ -37,7 +37,7 @@ const Project = ({

{title}

-
+
{links.map(({ icon: Icon, link }, i) => ( From c675d73645fc9a9bfe973bc5cc3faceaa8a59fca Mon Sep 17 00:00:00 2001 From: Kevin Loritsch Date: Wed, 3 Sep 2025 17:51:14 -0700 Subject: [PATCH 4/5] some animations --- src/app/components/Experience.tsx | 77 +++++++++++++++++++++++++------ src/app/components/Header.tsx | 16 ++++++- src/app/components/Landing.tsx | 12 ++++- src/app/components/Project.tsx | 19 ++++++-- 4 files changed, 104 insertions(+), 20 deletions(-) diff --git a/src/app/components/Experience.tsx b/src/app/components/Experience.tsx index 26f83fd..89b681f 100644 --- a/src/app/components/Experience.tsx +++ b/src/app/components/Experience.tsx @@ -1,6 +1,45 @@ "use client"; import Image, { StaticImageData } from "next/image"; +import { motion } from "motion/react"; + +const hoverAnimation = { + whileHover: { scale: 1.06 }, + transition: { + duration: 0.4, + }, +}; + +const moveUp = { + initial: { opacity: 0, y: 30 }, + whileInView: { opacity: 1, y: 0 }, + transition: { + duration: 0.7, + }, +}; + +const fadeIn = { + initial: { opacity: 0, x: -30 }, + whileInView: { opacity: 1, x: 0 }, + transition: { + duration: 0.7, + }, +}; + +const fadeUp = { + initial: { opacity: 0, y: 30 }, + whileInView: { opacity: 1, y: 0 }, + transition: { + duration: 0.7, + }, +}; + +const slideIn = (delay = 0) => ({ + initial: { opacity: 0, x: -40 }, + whileInView: { opacity: 1, x: 0 }, + transition: { duration: 0.8, delay }, + viewport: { once: true }, +}); interface DescriptionEntry { description: string; @@ -23,29 +62,41 @@ const Experience = ({ image, name, entries }: experienceProps) => {
-

{name}

- {name} + + {name} + + + {name} +
{entries.map(({ name, date, description }, i) => ( -
+
-
+

{name}

-

{date}

-
+ + {date} + +
- {description.map(({ description }, i) => ( -

{description}

+ {description.map(({ description }, j) => ( + + {description} + ))}
-
+ ))}
diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index fcf56c0..2e308fe 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -1,5 +1,17 @@ +"use client"; + import { TypeAnimation } from "react-type-animation"; +import { motion } from "motion/react"; + +const moveDown = { + initial: { opacity: 0, y: -30 }, + whileInView: { opacity: 1, y: 0 }, + transition: { + duration: 0.7, + }, +}; + interface headerProps { title: string; subtitle?: string; @@ -8,7 +20,9 @@ interface headerProps { const Header = ({ title, subtitle }: headerProps) => { return (
-
{title}
+ + {title} + {subtitle && (
{ return (
{
{socialLinks.map(({ link, icon: Icon }, i) => ( - + + + ))}
diff --git a/src/app/components/Project.tsx b/src/app/components/Project.tsx index 173fc8e..4fabec0 100644 --- a/src/app/components/Project.tsx +++ b/src/app/components/Project.tsx @@ -5,6 +5,13 @@ import { motion } from "motion/react"; import { IconType } from "react-icons"; import Link from "next/link"; +const hoverAnimation = { + whileHover: { scale: 1.1 }, + transition: { + duration: 0.4, + }, +}; + interface techEntry { icon: IconType; } @@ -39,9 +46,11 @@ const Project = ({
{links.map(({ icon: Icon, link }, i) => ( - - - + + + + + ))}
@@ -79,9 +88,9 @@ const Project = ({
{techStack.map(({ icon: Icon }, i) => ( -
+ -
+ ))}
From 6551fd8941790f4c7543e3c33a40d8cda236ea91 Mon Sep 17 00:00:00 2001 From: Kevin Loritsch Date: Wed, 3 Sep 2025 17:57:46 -0700 Subject: [PATCH 5/5] project animations --- src/app/components/Experience.tsx | 1 - src/app/components/Project.tsx | 44 +++++++++++++++++++++++-------- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/src/app/components/Experience.tsx b/src/app/components/Experience.tsx index 89b681f..fac196b 100644 --- a/src/app/components/Experience.tsx +++ b/src/app/components/Experience.tsx @@ -38,7 +38,6 @@ const slideIn = (delay = 0) => ({ initial: { opacity: 0, x: -40 }, whileInView: { opacity: 1, x: 0 }, transition: { duration: 0.8, delay }, - viewport: { once: true }, }); interface DescriptionEntry { diff --git a/src/app/components/Project.tsx b/src/app/components/Project.tsx index 4fabec0..0ecd506 100644 --- a/src/app/components/Project.tsx +++ b/src/app/components/Project.tsx @@ -5,13 +5,6 @@ import { motion } from "motion/react"; import { IconType } from "react-icons"; import Link from "next/link"; -const hoverAnimation = { - whileHover: { scale: 1.1 }, - transition: { - duration: 0.4, - }, -}; - interface techEntry { icon: IconType; } @@ -31,6 +24,31 @@ interface projectProps { links: linkEntry[]; } +const hoverAnimation = { + whileHover: { scale: 1.1 }, + transition: { + duration: 0.4, + }, +}; + +const slideIn = (delay = 0) => ({ + initial: { opacity: 0, x: -10 }, + whileInView: { opacity: 1, x: 0 }, + transition: { duration: 0.8, delay }, +}); + +const moveDown = { + initial: { opacity: 0, y: -20 }, + whileInView: { opacity: 1, y: 0 }, + transition: { duration: 0.8 }, +}; + +const moveUp = { + initial: { opacity: 0, y: 20 }, + whileInView: { opacity: 1, y: 0 }, + transition: { duration: 0.8 }, +}; + const Project = ({ image, title, @@ -42,11 +60,13 @@ const Project = ({ }: projectProps) => { return (
-

{title}

+ + {title} +
{links.map(({ icon: Icon, link }, i) => ( - + @@ -88,13 +108,15 @@ const Project = ({
{techStack.map(({ icon: Icon }, i) => ( - + ))}
-
{role}
+ + {role} +
);