Skip to content

Commit eff6efd

Browse files
maxwlangmaxwlang
authored
Merge pull request #5 from maxwlang/modernize-portfolio
Chevron tweaks
2 parents 70917c9 + 295ed7a commit eff6efd

File tree

4 files changed

+63
-62
lines changed

4 files changed

+63
-62
lines changed

‎src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const inter = Inter({ subsets: ["latin"] });
1414
export const metadata: Metadata = {
1515
title: "Maxwell Lang",
1616
description:
17-
"Software engineer, tinkerer, and photographer. Breathing information.",
17+
"Software engineer, tinkerer, and photographer. Welcome to my portfolio.",
1818
metadataBase: new URL("https://maxwlang.com"),
1919
keywords: [
2020
"Maxwell Lang",

‎src/components/home/sections/About.tsx‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import images from "@/images";
1212
const About: React.FC = () => {
1313
const animatedSection = useRef<HTMLDivElement>(null);
1414
const parallaxBackground = useRef<HTMLDivElement>(null);
15+
const scrollChevronContainer = useRef<HTMLDivElement>(null);
16+
// const contentContainer = useRef<HTMLDivElement>(null);
1517

1618
useGSAP(() => {
1719
gsap.registerPlugin(ScrollTrigger);
@@ -29,8 +31,40 @@ const About: React.FC = () => {
2931
},
3032
});
3133

32-
// Fade in content
33-
gsap.fromTo(
34+
const timeline = gsap.timeline({
35+
scrollTrigger: {
36+
trigger: animatedSection.current,
37+
start: "top top",
38+
end: "bottom top",
39+
scrub: true,
40+
pin: true,
41+
// onEnter: () => {
42+
// gsap.to(window, {
43+
// duration: 1,
44+
// scrollTo: { y: contentContainer.current, offsetY: -200 },
45+
// ease: "power2.inOut",
46+
// });
47+
// },
48+
},
49+
});
50+
51+
timeline.fromTo(
52+
scrollChevronContainer.current,
53+
{
54+
position: "absolute",
55+
top: "5%",
56+
fontSize: "1.5rem",
57+
},
58+
{
59+
position: "absolute",
60+
top: "70%",
61+
fontSize: "1.25rem",
62+
duration: 1.5,
63+
ease: "power1.out",
64+
}
65+
);
66+
67+
timeline.fromTo(
3468
animatedContent,
3569
{
3670
opacity: 0,
@@ -39,13 +73,6 @@ const About: React.FC = () => {
3973
{
4074
opacity: 1,
4175
y: 0,
42-
scrollTrigger: {
43-
trigger: animatedSection.current,
44-
start: "top top",
45-
end: "bottom top",
46-
scrub: true,
47-
pin: true,
48-
},
4976
stagger: 0.3,
5077
duration: 1,
5178
}
@@ -77,6 +104,12 @@ const About: React.FC = () => {
77104
<div className="absolute inset-0 bg-black opacity-20 dark:opacity-50" />
78105

79106
{/* Foreground Content */}
107+
<div ref={scrollChevronContainer} className="relative z-10">
108+
<div className="text-center mt-6 animate-bounce">
109+
<FontAwesomeIcon icon={faChevronDown} className="fa-2x" />
110+
</div>
111+
</div>
112+
80113
<div className="relative z-10">
81114
<div id="about" className="max-w-xl text-white">
82115
<h2 className="animated-content text-4xl md:text-5xl lg:text-6xl mr-20 font-bold">
@@ -98,9 +131,7 @@ const About: React.FC = () => {
98131
<span className="font-semibold">CAD &amp; 3D Printing</span>, and{" "}
99132
<span className="font-semibold">homelab projects</span>.
100133
</p>
101-
<div className="animated-content text-center mt-6 animate-bounce">
102-
<FontAwesomeIcon icon={faChevronDown} className="fa-2x" />
103-
</div>
134+
{/* <div ref={contentContainer} className="block" /> */}
104135
</div>
105136
</div>
106137
</Section>

‎src/components/home/sections/Hero.tsx‎

Lines changed: 15 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const Hero: React.FC<HeroProps> = ({ id, backgroundImage }) => {
2424
const profilePictureContainer = useRef<HTMLDivElement>(null);
2525
const textContentContainer = useRef<HTMLDivElement>(null);
2626
const foregroundContainer = useRef<HTMLDivElement>(null);
27+
const scrollChevronContainer = useRef<HTMLDivElement>(null);
2728

2829
useGSAP(
2930
() => {
@@ -63,55 +64,20 @@ export const Hero: React.FC<HeroProps> = ({ id, backgroundImage }) => {
6364
}
6465
);
6566

67+
// Hide scroll chevron
68+
timeline.to(scrollChevronContainer.current, {
69+
duration: 1,
70+
opacity: 0,
71+
ease: "power1.out",
72+
});
73+
6674
// Fade up and out content
6775
timeline.to(foregroundContainer.current, {
6876
opacity: 0,
6977
y: "-20%",
7078
duration: 1,
7179
ease: "power1.out",
7280
});
73-
74-
// Initial animation
75-
// ScrollTrigger.create({
76-
// trigger: container.current,
77-
// start: "top",
78-
// end: "bottom 60%",
79-
// scrub: true,
80-
// animation: gsap.fromTo(
81-
// profilePictureContainer.current,
82-
// {
83-
// width: () => profilePictureContainer.current?.offsetWidth || 16,
84-
// height: () => profilePictureContainer.current?.offsetHeight || 16,
85-
// },
86-
// {
87-
// width: () =>
88-
// (profilePictureContainer.current?.offsetWidth || 8) / 2,
89-
// height: () => profilePictureContainer.current?.offsetHeight || 16,
90-
// duration: 0.5,
91-
// ease: "power1.out",
92-
// }
93-
// ),
94-
// });
95-
96-
// Move text content up and fade out
97-
// ScrollTrigger.create({
98-
// trigger: container.current,
99-
// start: "top",
100-
// end: "bottom 60%",
101-
// scrub: true,
102-
// animation: gsap.fromTo(
103-
// textContentContainer.current,
104-
// {
105-
// opacity: 1,
106-
// },
107-
// {
108-
// opacity: 0,
109-
// y: "-20%",
110-
// duration: 1,
111-
// ease: "power1.out",
112-
// }
113-
// ),
114-
// });
11581
},
11682
{
11783
scope: container,
@@ -123,7 +89,7 @@ export const Hero: React.FC<HeroProps> = ({ id, backgroundImage }) => {
12389
<section
12490
ref={container}
12591
id={id}
126-
className="relative h-screen flex justify-center items-center overflow-hidden bg-white-100 dark:bg-slate-600"
92+
className="relative h-screen flex flex-col justify-center items-center overflow-hidden bg-white-100 dark:bg-slate-600"
12793
>
12894
{/* Background for Parallax Effect */}
12995
<div
@@ -172,12 +138,15 @@ export const Hero: React.FC<HeroProps> = ({ id, backgroundImage }) => {
172138
{new Date().getFullYear() - 2018} years and counting.
173139
</span>
174140
</p>
175-
<div className="animated-content text-center mt-6 animate-bounce">
176-
<FontAwesomeIcon icon={faChevronDown} className="fa-2x" />
177-
</div>
178141
</div>
179142
</div>
180143
</div>
144+
145+
<div ref={scrollChevronContainer} className="relative z-10">
146+
<div className="text-center mt-6 animate-bounce">
147+
<FontAwesomeIcon icon={faChevronDown} className="fa-2x" />
148+
</div>
149+
</div>
181150
</section>
182151
);
183152
};

‎src/components/shared/Navbar.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ const Navbar: React.FC = () => {
1717
const [activeItem, setActiveItem] = useState<NavItem>();
1818
const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
1919
const pathname = usePathname();
20-
const navItems =
21-
navPages.find((navPage) => navPage.path == pathname)?.items ?? [];
20+
const navItems = React.useMemo(() => {
21+
return navPages.find((navPage) => navPage.path == pathname)?.items ?? [];
22+
}, [pathname]);
2223

2324
useEffect(() => {
2425
const handleScroll = () => {
@@ -61,7 +62,7 @@ const Navbar: React.FC = () => {
6162
return () => {
6263
sections.forEach((section) => observer.unobserve(section));
6364
};
64-
}, []);
65+
}, [navItems]);
6566

6667
const handleNavigationClick = (
6768
e: React.MouseEvent<HTMLAnchorElement>,

0 commit comments

Comments
 (0)