Skip to content

most animations #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kevinloritsch merged 6 commits into from
Sep 4, 2025
Merged

most animations #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
75e9f37
Update README.md
Kevinloritsch Sep 4, 2025
73a65ba
add links per project
Kevinloritsch Sep 4, 2025
6306626
quick spacing
Kevinloritsch Sep 4, 2025
c675d73
some animations
Kevinloritsch Sep 4, 2025
6551fd8
project animations
Kevinloritsch Sep 4, 2025
2f05cda
Merge branch 'dev' of https://github.com/Kevinloritsch/portfolio into…
Kevinloritsch Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
<br/>
![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

Expand Down
76 changes: 63 additions & 13 deletions src/app/components/Experience.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,44 @@
"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 },
});

interface DescriptionEntry {
description: string;
Expand All @@ -23,29 +61,41 @@ const Experience = ({ image, name, entries }: experienceProps) => {
<div className="mx-auto w-2/3">
<div className="flex w-full flex-row gap-4">
<div className="w-1/6">
<p className="text-center text-3xl font-bold">{name}</p>
<Image
src={image}
alt={name}
className="mx-auto aspect-square w-2/3 rounded-2xl shadow-xl"
/>
<motion.p {...moveUp} className="text-center text-3xl font-bold">
{name}
</motion.p>
<motion.div {...hoverAnimation} {...fadeIn}>
<Image
src={image}
alt={name}
className="mx-auto aspect-square w-2/3 rounded-2xl shadow-xl"
/>
</motion.div>
</div>
<div className="border-gray w-5/6 justify-center border-l-2">
{entries.map(({ name, date, description }, i) => (
<div key={i} className="relative flex flex-row py-2">
<motion.div
{...slideIn(i / 3)}
key={i}
className="relative flex flex-row py-2"
>
<div className="absolute -left-1.5 top-4 h-3 w-3 rounded-full bg-gray-500" />
<div className="mx-4">
<div className="flex flex-row justify-evenly">
<motion.div className="flex flex-row justify-evenly">
<p className="mr-auto text-lg underline">{name}</p>
<p className="ml-auto text-gray-500">{date}</p>
</div>
<motion.p {...fadeUp} className="ml-auto text-gray-500">
{date}
</motion.p>
</motion.div>
<div>
{description.map(({ description }, i) => (
<p key={i}>{description}</p>
{description.map(({ description }, j) => (
<motion.p {...slideIn(i / 3 + (1.5 * j) / 9)} key={j}>
{description}
</motion.p>
))}
</div>
</div>
</div>
</motion.div>
))}
</div>
</div>
Expand Down
16 changes: 15 additions & 1 deletion src/app/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -8,7 +20,9 @@ interface headerProps {
const Header = ({ title, subtitle }: headerProps) => {
return (
<div className="text-center">
<div className="text-4xl font-bold">{title}</div>
<motion.div {...moveDown} className="text-4xl font-bold">
{title}
</motion.div>
{subtitle && (
<div className="text-2xl text-gray-500">
<TypeAnimation
Expand Down
16 changes: 13 additions & 3 deletions src/app/components/Landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { motion } from "motion/react";
import { Element } from "react-scroll";

import profilePicture from "@/public/profilePicture.webp";

import { socialLinks } from "@/data/SocialData";

const hoverAnimation = {
whileHover: { scale: 1.07 },
transition: {
duration: 0.4,
},
};

const Landing = () => {
return (
<div
Expand All @@ -20,14 +28,16 @@ const Landing = () => {
<div className="absolute flex h-full w-full flex-row items-center justify-center gap-12">
<div className="flex w-2/3 flex-row justify-evenly">
<div className="flex w-2/3 flex-col">
<p className="flex place-items-center justify-center pb-2 text-center text-4xl font-bold md:text-5xl lg:text-6xl">
<p className="flex pb-2 text-left text-4xl font-bold md:text-5xl lg:text-6xl">
Kevin Loritsch
</p>

<div className="mx-auto flex w-fit flex-row gap-4 border-t-2 border-black px-4 pt-2">
<div className="mr-auto flex w-fit flex-row gap-4 border-t-2 border-black px-4 pt-2">
{socialLinks.map(({ link, icon: Icon }, i) => (
<Link key={i} href={link} target="_blank">
<Icon className="text-4xl" />
<motion.div {...hoverAnimation}>
<Icon className="text-2xl" />
</motion.div>
</Link>
))}
</div>
Expand Down
66 changes: 56 additions & 10 deletions src/app/components/Project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,77 @@
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 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,
description,
date,
role,
techStack,
links,
}: projectProps) => {
return (
<div className="mx-8">
<p className="text-center text-xl font-bold">{title}</p>
<div className="mb-4 text-center">Deploy Links</div>
<motion.p {...moveUp} className="text-center text-xl font-bold">
{title}
</motion.p>
<div className="my-1">
<div className="mx-auto mb-3 flex flex-row justify-center gap-2">
{links.map(({ icon: Icon, link }, i) => (
<motion.div {...hoverAnimation} {...slideIn(i / 3)}>
<Link href={link} target="_blank" key={i}>
<Icon className="text-xl" />
</Link>
</motion.div>
))}
</div>
</div>

<motion.div
className="group relative aspect-[3/2] overflow-hidden rounded-2xl shadow-xl"
Expand Down Expand Up @@ -62,15 +107,16 @@ const Project = ({
</motion.div>
<div className="flex flex-row justify-evenly pt-3">
<div className="mr-auto flex flex-row gap-2 pl-4">
{techStack &&
techStack.map(({ icon: Icon }, i) => (
<div key={i} className="w-full">
<Icon className="text-xl" />
</div>
))}
{techStack.map(({ icon: Icon }, i) => (
<motion.div {...hoverAnimation} {...slideIn(i / 4)} key={i}>
<Icon className="text-xl" />
</motion.div>
))}
</div>

<div className="ml-auto pr-4">{role}</div>
<motion.p {...moveDown} className="ml-auto pr-4">
{role}
</motion.p>
</div>
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion src/app/components/Projects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Projects = () => {
/>
<div className="flex w-full flex-row flex-wrap justify-center">
{projectItems.map(
({ image, title, date, description, role, techStack }, i) => (
({ image, title, date, description, role, techStack, links }, i) => (
<div key={i} className="w-2/5 py-8">
<Project
image={image}
Expand All @@ -21,6 +21,7 @@ const Projects = () => {
description={description}
role={role}
techStack={techStack}
links={links}
/>
</div>
),
Expand Down
Loading
Loading