Skip to content

Commit a997996

Browse files
InfvyrInfvyr
committed
delete layout provider and fix projects animation
1 parent 91272f5 commit a997996

File tree

10 files changed

+252
-282
lines changed

10 files changed

+252
-282
lines changed

‎app/layout.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Suspense } from "react";
22
import { AppHeader, AppFooter, AppMetadata } from "components";
3-
import { LayoutProvider } from "context/layout";
43
import Loading from "./loading";
54
import "styles/globals.css";
65

@@ -10,11 +9,11 @@ export default function RootLayout({ children }) {
109
return (
1110
<html lang="en">
1211
<body>
13-
<AppHeader />
14-
<LayoutProvider>
12+
<div className="theme">
13+
<AppHeader />
1514
<Suspense fallback={<Loading />}>{children}</Suspense>
1615
<AppFooter />
17-
</LayoutProvider>
16+
</div>
1817
</body>
1918
</html>
2019
);

‎app/projects/components/Projects.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ export function Projects({ projects }) {
55
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
66
{projects
77
?.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
8-
?.map((project) => (
9-
<ProjectItem key={project._id} project={project} />
8+
?.map((project, index) => (
9+
<ProjectItem key={project._id} project={project} index={index} />
1010
))}
1111
</div>
1212
);

‎app/sections/introduction/index.jsx‎

Lines changed: 73 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
"use client";
22

3-
import { useEffect, useState, useRef, useContext } from "react";
3+
import { useEffect, useState, useRef } from "react";
44
import Link from "next/link";
55
import { LazyMotion, domAnimation, useInView } from "framer-motion";
66
import { WelcomeAnimation } from "./IntroAnimation";
77
import { useScrollTo } from "hooks";
8-
import { LayoutContext } from "context/layout";
98
import { useMediaQuery } from "utils";
109

1110
export function WelcomeSection() {
1211
const ref = useRef(null);
13-
const { introRef, setIntroHeight } = useContext(LayoutContext);
12+
const introRef = useRef(null);
1413
const isInView = useInView(ref, { once: true });
1514
const { scrollToEl } = useScrollTo();
1615
const isTabletUp = useMediaQuery("min-width: 768px");
@@ -37,100 +36,94 @@ export function WelcomeSection() {
3736
return () => clearInterval(interval);
3837
}, [count]);
3938

40-
useEffect(() => {
41-
setIntroHeight(introRef.current?.offsetHeight);
42-
}, [introRef, setIntroHeight]);
43-
4439
return (
4540
<LazyMotion features={domAnimation}>
46-
<section
47-
id="intro"
48-
className="section grid grid-cols-1 md:grid-cols-[1fr_0.5fr] lg:grid-cols-[1fr_0.7fr] gap-4 items-center"
49-
ref={introRef}
50-
>
51-
<div className="py-5 md:py-10">
52-
<h1
53-
tabIndex="0"
54-
ref={ref}
55-
className="text-3xl md:text-5xl xl:text-6xl font-bold"
56-
style={{
57-
transform: isInView ? "none" : "translateX(-200px)",
58-
opacity: isInView ? 1 : 0,
59-
transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s"
60-
}}
61-
>
62-
<p>
63-
Hi, I&apos;m <mark>Vasile</mark> a <mark>passionate</mark> software developer.
64-
</p>
65-
</h1>
66-
67-
<div className="mt-3 relative flex flex-col overflow-hidden">
68-
<p
41+
<section id="intro" className="section" ref={introRef}>
42+
<div className="grid grid-cols-1 md:grid-cols-[1fr_0.5fr] lg:grid-cols-[1fr_0.7fr] gap-4 items-center">
43+
<div className="py-5 md:py-10">
44+
<h1
45+
tabIndex="0"
6946
ref={ref}
70-
className="text-2xl transform-none opacity-100"
47+
className="text-3xl md:text-5xl xl:text-6xl font-bold"
7148
style={{
7249
transform: isInView ? "none" : "translateX(-200px)",
7350
opacity: isInView ? 1 : 0,
7451
transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s"
7552
}}
7653
>
77-
I
78-
<span
79-
className="absolute flex flex-col transition-all duration-500 ease-in-expo"
54+
<p>
55+
Hi, I&apos;m <mark>Vasile</mark> a <mark>passionate</mark> software developer.
56+
</p>
57+
</h1>
58+
59+
<div className="mt-3 relative flex flex-col overflow-hidden">
60+
<p
61+
ref={ref}
62+
className="text-2xl transform-none opacity-100"
8063
style={{
81-
top: count === 0 ? "0" : count === 1 ? "-100%" : count === 2 ? "-200%" : "0",
82-
left: "13px"
64+
transform: isInView ? "none" : "translateX(-200px)",
65+
opacity: isInView ? 1 : 0,
66+
transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s"
8367
}}
8468
>
85-
{text.map((element) => (
86-
<TextElement key={element} element={element} />
87-
))}
88-
</span>
89-
</p>
90-
</div>
69+
I
70+
<span
71+
className="absolute flex flex-col transition-all duration-500 ease-in-expo"
72+
style={{
73+
top: count === 0 ? "0" : count === 1 ? "-100%" : count === 2 ? "-200%" : "0",
74+
left: "13px"
75+
}}
76+
>
77+
{text.map((element) => (
78+
<TextElement key={element} element={element} />
79+
))}
80+
</span>
81+
</p>
82+
</div>
9183

92-
<p
93-
tabIndex="0"
94-
ref={ref}
95-
className="mt-3 mb-10 text-gray-500 text-xl"
96-
style={{
97-
transform: isInView ? "none" : "translateX(-200px)",
98-
opacity: isInView ? 1 : 0,
99-
transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s"
100-
}}
101-
>
102-
Stick around to see some of my work.
103-
</p>
104-
<div
105-
ref={ref}
106-
style={{
107-
transform: isInView ? "none" : "translateY(50px)",
108-
opacity: isInView ? 1 : 0,
109-
transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s"
110-
}}
111-
>
112-
<Link
113-
href="#projects"
114-
onClick={onClick}
84+
<p
11585
tabIndex="0"
116-
className="btn"
117-
aria-label="Latest projects"
86+
ref={ref}
87+
className="mt-3 mb-10 text-gray-500 text-xl"
88+
style={{
89+
transform: isInView ? "none" : "translateX(-200px)",
90+
opacity: isInView ? 1 : 0,
91+
transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s"
92+
}}
93+
>
94+
Stick around to see some of my work.
95+
</p>
96+
<div
97+
ref={ref}
98+
style={{
99+
transform: isInView ? "none" : "translateY(50px)",
100+
opacity: isInView ? 1 : 0,
101+
transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s"
102+
}}
118103
>
119-
See my latest projects
120-
</Link>
104+
<Link
105+
href="#projects"
106+
onClick={onClick}
107+
tabIndex="0"
108+
className="btn"
109+
aria-label="Latest projects"
110+
>
111+
See my latest projects
112+
</Link>
113+
</div>
121114
</div>
122-
</div>
123115

124-
{isTabletUp && (
125-
<div
126-
style={{
127-
backgroundColor: "#FFFFFF",
128-
mixBlendMode: "color-burn"
129-
}}
130-
>
131-
<WelcomeAnimation />
132-
</div>
133-
)}
116+
{isTabletUp && (
117+
<div
118+
style={{
119+
backgroundColor: "#FFFFFF",
120+
mixBlendMode: "color-burn"
121+
}}
122+
>
123+
<WelcomeAnimation />
124+
</div>
125+
)}
126+
</div>
134127
</section>
135128
</LazyMotion>
136129
);

‎app/sections/project/ProjectItem.jsx‎

Lines changed: 75 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Suspense, useRef } from "react";
2-
import { LazyMotion, domAnimation, useInView } from "framer-motion";
2+
import { useInView } from "framer-motion";
33
import Link from "next/link";
44
import ImageGallery from "react-image-gallery";
55
import { Loader } from "components";
@@ -19,85 +19,83 @@ export function ProjectItem({ project, index }) {
1919
}));
2020

2121
return (
22-
<LazyMotion features={domAnimation}>
23-
<article
24-
ref={cardRef}
25-
className="flex flex-col rounded-lg bg-card-dark"
26-
style={{
27-
transform: isInView
28-
? "none"
29-
: `${index === 0 ? "translateY(250px)" : `translateY(${200 / index}px)`}`,
30-
opacity: isInView ? 1 : 0,
31-
transition: `all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) ${index === 0 ? 0 : 0.5 * index}s`
32-
}}
33-
>
34-
<figure>
35-
<div className="aspect-[12/9.2] w-full h-full">
36-
<Suspense fallback={<Loader />}>
37-
<ImageGallery
38-
items={galleryImages}
39-
showPlayButton={false}
40-
showThumbnails={false}
41-
showIndex
42-
lazyload
43-
additionalClass="gallery-item"
44-
/>
45-
</Suspense>
46-
</div>
47-
</figure>
22+
<article
23+
ref={cardRef}
24+
className="flex flex-col rounded-lg bg-card-dark"
25+
style={{
26+
transform: isInView
27+
? "none"
28+
: `${index === 0 ? "translateY(250px)" : `translateY(${200 / index}px)`}`,
29+
opacity: isInView ? 1 : 0,
30+
transition: `all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) ${index === 0 ? 0 : 25 * index}ms`
31+
}}
32+
>
33+
<figure>
34+
<div className="aspect-[12/9.2] w-full h-full">
35+
<Suspense fallback={<Loader />}>
36+
<ImageGallery
37+
items={galleryImages}
38+
showPlayButton={false}
39+
showThumbnails={false}
40+
showIndex
41+
lazyload
42+
additionalClass="gallery-item"
43+
/>
44+
</Suspense>
45+
</div>
46+
</figure>
4847

49-
<div className="flex-[2] px-5 py-6 text-center flex flex-col gap-10">
50-
<header className="flex-1 flex items-center justify-start flex-col gap-3">
51-
<h3 tabIndex="0" className="text-2xl font-bold">
52-
{title}
53-
</h3>
54-
<p tabIndex="0" className="leading-7 font-light">
55-
{description}
56-
</p>
57-
</header>
48+
<div className="flex-[2] px-5 py-6 text-center flex flex-col gap-10">
49+
<header className="flex-1 flex items-center justify-start flex-col gap-3">
50+
<h3 tabIndex="0" className="text-2xl font-bold">
51+
{title}
52+
</h3>
53+
<p tabIndex="0" className="leading-7 font-light">
54+
{description}
55+
</p>
56+
</header>
5857

59-
<footer className="flex flex-col gap-10">
60-
{!!stack.length && (
61-
<div className="flex-center flex-wrap gap-3">
62-
{stack.map((tag) => (
63-
<span
64-
key={tag}
65-
tabIndex="0"
66-
className="px-2 text-sm leading-normal rounded bg-badge-dark"
67-
>
68-
{tag}
69-
</span>
70-
))}
71-
</div>
72-
)}
73-
74-
<div className="flex-center gap-10">
75-
{repoUrl && (
76-
<Link
77-
href={repoUrl}
78-
target="_blank"
79-
className="icon-link-btn"
80-
title="Go to Github repository"
81-
>
82-
<VscSourceControl />
83-
<span>Source</span>
84-
</Link>
85-
)}
86-
{liveUrl && (
87-
<Link
88-
href={liveUrl}
89-
target="_blank"
90-
className="icon-link-btn"
91-
title="Go to live address"
58+
<footer className="flex flex-col gap-10">
59+
{!!stack.length && (
60+
<div className="flex-center flex-wrap gap-3">
61+
{stack.map((tag) => (
62+
<span
63+
key={tag}
64+
tabIndex="0"
65+
className="px-2 text-sm leading-normal rounded bg-badge-dark"
9266
>
93-
<FiExternalLink />
94-
<span>Demo</span>
95-
</Link>
96-
)}
67+
{tag}
68+
</span>
69+
))}
9770
</div>
98-
</footer>
99-
</div>
100-
</article>
101-
</LazyMotion>
71+
)}
72+
73+
<div className="flex-center gap-10">
74+
{repoUrl && (
75+
<Link
76+
href={repoUrl}
77+
target="_blank"
78+
className="icon-link-btn"
79+
title="Go to Github repository"
80+
>
81+
<VscSourceControl />
82+
<span>Source</span>
83+
</Link>
84+
)}
85+
{liveUrl && (
86+
<Link
87+
href={liveUrl}
88+
target="_blank"
89+
className="icon-link-btn"
90+
title="Go to live address"
91+
>
92+
<FiExternalLink />
93+
<span>Demo</span>
94+
</Link>
95+
)}
96+
</div>
97+
</footer>
98+
</div>
99+
</article>
102100
);
103101
}

0 commit comments

Comments
 (0)