Skip to content

Commit 7c9edb0

Browse files
ayush391ayush391
committed
added ui and anims for aldifest project page
1 parent 3e9fa25 commit 7c9edb0

File tree

9 files changed

+171
-7
lines changed

9 files changed

+171
-7
lines changed

‎package-lock.json

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"postcss": "8.4.24",
2525
"react": "18.2.0",
2626
"react-dom": "18.2.0",
27+
"react-icons": "^4.9.0",
2728
"react-indiana-drag-scroll": "^2.2.0",
2829
"tailwindcss": "3.3.2",
2930
"typescript": "5.0.4"

‎src/app/components/anim/bg-spring-anim.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ export default function BgSpringAnim({ children }: React.PropsWithChildren) {
2222
onMouseLeave={handleMouseLeave}
2323
>
2424
<animated.div
25-
className={`mx-auto absolute w-10 h-10 bg-black -z-10 rounded-full`}
25+
className={`mx-auto absolute w-10 h-10 bg-black -z-1 rounded-full`}
2626
style={{ opacity, transform, transformOrigin: "center center" }}
2727
></animated.div>
28-
{children}
28+
<div className="z-10">{children}</div>
2929
</div>
3030
);
3131
}

‎src/app/components/anim/fade-in-anim.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { animated, config, useSpring } from "@react-spring/web";
2+
import { AnimationRefWithChildrenProps } from "../types";
3+
4+
export default function FadeIn({
5+
animRef,
6+
children,
7+
...props
8+
}: AnimationRefWithChildrenProps) {
9+
const style = useSpring({
10+
ref: animRef,
11+
from: { opacity: 0 },
12+
to: { opacity: 1 },
13+
config: { ...config.gentle },
14+
...props,
15+
});
16+
17+
return <animated.div style={{ ...style }}>{children}</animated.div>;
18+
}

‎src/app/components/anim/slide-left-anim.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import { animated, config, useSpring } from "@react-spring/web";
22
import { AnimationRefWithChildrenProps } from "../types";
33

4+
interface SlideProps extends AnimationRefWithChildrenProps {
5+
direction?: "left" | "right";
6+
}
47
export default function SlideLeft({
58
animRef,
9+
direction = "left",
610
children,
711
...props
8-
}: AnimationRefWithChildrenProps) {
12+
}: SlideProps) {
13+
const d = direction === "left" ? 1 : -1;
914
const style = useSpring({
1015
ref: animRef,
11-
from: { x: 100, opacity: 0 },
16+
from: { x: 100 * d, opacity: 0 },
1217
to: { x: 0, opacity: 1 },
1318
config: { ...config.stiff },
1419
...props,

‎src/app/components/anim/slide-up-anim.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { animated, config, useSpring } from "@react-spring/web";
2+
import { AnimationRefWithChildrenProps } from "../types";
3+
4+
interface SlideProps extends AnimationRefWithChildrenProps {
5+
direction?: "up" | "down";
6+
}
7+
export default function SlideUp({
8+
animRef,
9+
direction = "up",
10+
children,
11+
...props
12+
}: SlideProps) {
13+
const d = direction === "up" ? 1 : -1;
14+
const style = useSpring({
15+
ref: animRef,
16+
from: { y: 100 * d, opacity: 0 },
17+
to: { y: 0, opacity: 1 },
18+
config: { ...config.stiff },
19+
...props,
20+
});
21+
22+
return <animated.div style={{ ...style }}>{children}</animated.div>;
23+
}

‎src/app/components/projects.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useChain, useSpringRef } from "@react-spring/web";
2+
import Link from "next/link";
23
import ScrollContainer from "react-indiana-drag-scroll";
34
import aldiLogo from "../assets/aldi-logo.png";
45
import aldiLogoBig from "../assets/aldifest_2023.webp";
@@ -22,7 +23,9 @@ export default function Projects() {
2223
className="flex gap-10 w-full hover:cursor-pointer overflow-visible p-16 -m-16 "
2324
>
2425
<Trail animRef={projectsRef}>
25-
<Card topImg={aldiLogo} bottomImg={aldiLogoBig} bgColor="#3AC9F7" />
26+
<Link href="/projects/aldifest">
27+
<Card topImg={aldiLogo} bottomImg={aldiLogoBig} bgColor="#3AC9F7" />
28+
</Link>
2629
<Card
2730
topTitle="Blog Website"
2831
bottomImg={blogAppSS}

‎src/app/components/types/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { AnimationProps, SpringRef } from "@react-spring/web";
22

33
export interface AnimationRefWithChildrenProps extends AnimationProps {
4-
animRef: SpringRef;
4+
animRef?: SpringRef;
55
children: React.ReactNode;
66
}
77

‎src/app/projects/aldifest/page.tsx

+106-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,108 @@
1+
"use client";
2+
3+
import BgSpringAnim from "@/app/components/anim/bg-spring-anim";
4+
import FadeIn from "@/app/components/anim/fade-in-anim";
5+
import SlideLeft from "@/app/components/anim/slide-left-anim";
6+
import SlideUp from "@/app/components/anim/slide-up-anim";
7+
import Trail from "@/app/components/anim/trail-anim";
8+
import { ArrowLeftOutlined } from "@ant-design/icons";
9+
import { useChain, useSpringRef } from "@react-spring/web";
10+
import Image from "next/image";
11+
import Link from "next/link";
12+
import { FaReact } from "react-icons/fa";
13+
import { GrGraphQl } from "react-icons/gr";
14+
import { TbBrandNextjs } from "react-icons/tb";
15+
import aldiLogo from "../../assets/aldi-logo.png";
16+
import aldiLogoBig from "../../assets/aldifest_2023.webp";
17+
118
export default function AldifestPage() {
2-
return <div className="bg-blue">asdasd</div>;
19+
const techRef = useSpringRef();
20+
const techTitleRef = useSpringRef();
21+
const titleRef = useSpringRef();
22+
const logoRef = useSpringRef();
23+
const logoBigRef = useSpringRef();
24+
const descRef = useSpringRef();
25+
26+
useChain(
27+
[titleRef, logoRef, descRef, logoBigRef, techRef, techTitleRef],
28+
[0, 0.2, 0.25, 0.3, 0.5, 1],
29+
1500
30+
);
31+
32+
return (
33+
<main className="flex w-screen h-screen items-center bg-[#3AC9F7] flex-col gap-10 xl:px-24 md:px-16 px-5 py-12 ">
34+
<div className="flex flex-col gap-10 max-w-4xl w-full">
35+
<Link href="/" className="mr-auto">
36+
<SlideLeft>
37+
<BgSpringAnim>
38+
<ArrowLeftOutlined className="text-3xl text-white" />
39+
</BgSpringAnim>
40+
</SlideLeft>
41+
</Link>
42+
<div className="flex justify-between gap-10">
43+
<div className="flex flex-col gap-10">
44+
<SlideLeft animRef={logoRef} direction="right">
45+
<Image
46+
alt="aldi_logo"
47+
src={aldiLogo}
48+
width={0}
49+
height={0}
50+
className="w-52"
51+
/>
52+
</SlideLeft>
53+
<div>
54+
<Trail animRef={titleRef}>
55+
<span className="font-medium text-3xl max-w-sm text-white">
56+
A new website
57+
</span>
58+
<span className="font-medium text-3xl max-w-sm text-white">
59+
for the Melbourne
60+
</span>
61+
<span className="font-medium text-3xl max-w-sm text-white">
62+
design studio — MASS{" "}
63+
</span>
64+
</Trail>
65+
</div>
66+
</div>
67+
<div className="flex flex-col gap-5">
68+
<FadeIn animRef={descRef}>
69+
<div className="font-sans text-sm max-w-md text-white">
70+
A full website rebuild, both front-end and back. The backend
71+
consists of Prismic as the headless CMS with Netlify as the CI
72+
and hosting tool, and the front end is all Gatsby. Sprinkled
73+
throughout are some unique visual flourishes - like the SVG
74+
bloating text effect, and imagery that moves based on mouse and
75+
scroll position. It was absolute joy to work on this site, and
76+
with the talented and lovely folks at MASS. It even won an FWA
77+
of the Day award. You can read more about it in this article.{" "}
78+
</div>
79+
</FadeIn>
80+
</div>
81+
</div>
82+
<div className="flex flex-col gap-5">
83+
<SlideUp animRef={techTitleRef}>
84+
<div className="font-sans underline font-semibold text-sm max-w-md text-white">
85+
Technologies Used
86+
</div>
87+
</SlideUp>
88+
<div className="flex gap-5">
89+
<Trail animRef={techRef}>
90+
<FaReact className="text-[50px] text-white font-bold" />
91+
<GrGraphQl className="text-[50px] text-white font-bold" />
92+
<TbBrandNextjs className="text-[50px] text-white font-bold" />
93+
</Trail>
94+
</div>
95+
</div>
96+
<SlideUp animRef={logoBigRef}>
97+
<Image
98+
alt="aldi_logo_big"
99+
src={aldiLogoBig}
100+
width={0}
101+
height={0}
102+
className="w-96 mx-auto mt-auto"
103+
/>
104+
</SlideUp>
105+
</div>
106+
</main>
107+
);
3108
}

0 commit comments

Comments
 (0)