Skip to content

Commit 80a8252

Browse files
pphatdevpphatdev
authored
Merge pull request #78 from pphatdev/feat-projects
feat: update gradient mask classes for consistency across components
2 parents fc6cb44 + 82a98e9 commit 80a8252

7 files changed

Lines changed: 30 additions & 20 deletions

File tree

‎src/app/contact/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ export default function ContactPage() {
142142
x={-1}
143143
y={-1}
144144
strokeDasharray={"4 2"}
145-
className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
145+
className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
146146
/>
147147
</div>
148148
<div className="absolute overflow-hidden inset-0 pointer-events-none" aria-hidden="true">

‎src/app/posts/page.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,8 @@ import { BlurFade } from '@components/ui/blur-fade';
99
import { NavigationBar } from "@components/navbar/navbar";
1010
import { PostsHero } from "@components/heros/posts-hero";
1111
import { useSearchParams, useRouter } from "next/navigation";
12-
import { Badge } from "@components/ui/badge";
1312
import { cn } from "@lib/utils";
1413
import { Button } from "src/components/ui";
15-
import Footer from "src/components/layouts/footer";
1614

1715
const PostsContent = () => {
1816
const router = useRouter();
@@ -26,14 +24,17 @@ const PostsContent = () => {
2624
const [selectedTag, setSelectedTag] = useState("");
2725
const [availableTags, setAvailableTags] = useState<string[]>([]);
2826
const hasFetched = useRef(false);
27+
const isFetchingRef = useRef(false);
2928

3029
const next = useCallback(async () => {
31-
if (loading) return;
30+
if (isFetchingRef.current || !hasMore) return;
3231

32+
isFetchingRef.current = true;
3333
setLoading(true);
34+
const currentPage = page;
3435

3536
try {
36-
const response = await fetch(`/api/posts?page=${page}&limit=${limit}`);
37+
const response = await fetch(`/api/posts?page=${currentPage}&limit=${limit}`);
3738

3839
if (!response.ok) {
3940
throw new Error(`HTTP error! status: ${response.status}`);
@@ -56,9 +57,10 @@ const PostsContent = () => {
5657
console.error('Error fetching posts:', error);
5758
setHasMore(false);
5859
} finally {
60+
isFetchingRef.current = false;
5961
setLoading(false);
6062
}
61-
}, [loading, page, limit]);
63+
}, [hasMore, page, limit]);
6264

6365
useEffect(() => {
6466
if (!hasFetched.current) {

‎src/app/projects/page.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,20 @@
33
import React, { useEffect, useState, useCallback, useRef, useMemo, Suspense } from "react";
44
import InfiniteScroll from "@components/infinit-scroll";
55
import { Spinner } from "@components/ui/loading";
6-
import { ProjectHero } from "@components/heros/project-hero";
76
import { ProjectCard } from "@components/cards/project-card";
87
import { Project } from "../../lib/types/interfaces";
98
import { BlurFade } from '@components/ui/blur-fade';
109
import { NavigationBar } from "@components/navbar/navbar";
1110
import ProjectsStructuredData from "@components/projects-structured-data";
1211
import { useSearchParams, useRouter } from "next/navigation";
12+
import dynamic from "next/dynamic";
1313
import { Button } from "src/components/ui";
1414
import { cn } from "@lib/utils";
15-
import Footer from "src/components/layouts/footer";
15+
16+
const ProjectHero = dynamic(
17+
() => import("@components/heros/project-hero").then((mod) => mod.ProjectHero),
18+
{ ssr: false }
19+
);
1620

1721
const ProjectsContent = () => {
1822
const router = useRouter();
@@ -26,14 +30,17 @@ const ProjectsContent = () => {
2630
const [selectedTag, setSelectedTag] = useState("");
2731
const [availableTags, setAvailableTags] = useState<string[]>([]);
2832
const hasFetched = useRef(false);
33+
const isFetchingRef = useRef(false);
2934

3035
const next = useCallback(async () => {
31-
if (loading) return;
36+
if (isFetchingRef.current || !hasMore) return;
3237

38+
isFetchingRef.current = true;
3339
setLoading(true);
40+
const currentPage = page;
3441

3542
try {
36-
const response = await fetch(`/api/projects?page=${page}&limit=${limit}`);
43+
const response = await fetch(`/api/projects?page=${currentPage}&limit=${limit}`);
3744

3845
if (!response.ok) {
3946
throw new Error(`HTTP error! status: ${response.status}`);
@@ -56,9 +63,10 @@ const ProjectsContent = () => {
5663
console.error('Error fetching projects:', error);
5764
setHasMore(false);
5865
} finally {
66+
isFetchingRef.current = false;
5967
setLoading(false);
6068
}
61-
}, [loading, page, limit]);
69+
}, [hasMore, page, limit]);
6270

6371
useEffect(() => {
6472
if (!hasFetched.current) {
@@ -142,7 +150,7 @@ const ProjectsContent = () => {
142150
{availableTags.length > 0 && (
143151
<div className="max-w-5xl mx-auto w-full px-5 mb-4">
144152
<div className="flex flex-wrap max-sm:justify-center items-center gap-1.5">
145-
<p className="text-xs font-medium">Tag: </p>
153+
{/* <p className="text-xs font-medium">Tag: </p> */}
146154
<Button
147155
className={cn("mt-0 py-1 sm:py-2 px-2.5 h-fit! text-xs leading-4 text-foreground/80 hover:text-primary transition-all", !selectedTag && "ring-1 px-4! bg-primary/5 text-primary")}
148156
onClick={() => handleTagChange("")}

‎src/components/heros/contact-hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const ContactHero = () => {
1616
x={-1}
1717
y={-1}
1818
strokeDasharray={"4 2"}
19-
className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
19+
className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
2020
/>
2121
</div>
2222
<div className="w-full p-4 sm:px-5 space-y-5 flex flex-col max-w-5xl mx-auto ">

‎src/components/heros/home-hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default function HeroSection({ latestPostSlug, latestPostTitle }: HeroSec
7171
x={-1}
7272
y={-1}
7373
strokeDasharray={"4 2"}
74-
className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
74+
className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
7575
/>
7676
</div>
7777

‎src/components/heros/posts-hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const PostsHero = React.memo(({ searchQuery, onSearchChange, onClearSearc
3333
x={-1}
3434
y={-1}
3535
strokeDasharray={"4 2"}
36-
className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
36+
className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
3737
/>
3838
</div>
3939
<div className="w-full px-4 pt-4 sm:px-5 flex flex-col max-w-5xl mx-auto ">

‎src/components/heros/project-hero.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,20 @@ export const ProjectHero = React.memo(({ searchQuery, onSearchChange, onClearSea
2323
const pageDescription = "Explore my portfolio of web development projects and applications.";
2424

2525
return (
26-
<div className="min-h-36 sm:min-h-60 flex bg-gradient-to-b from-primary/10 pt-14 sm:pt-24 to-background flex-col overflow-clip relative items-start justify-center">
26+
<div className="min-h-36 sm:min-h-60 flex bg-linear-to-b from-primary/10 pt-14 sm:pt-24 to-background flex-col overflow-clip relative items-start justify-center">
2727
<RainbowGlow className="opacity-10"/>
28-
<BackgroundBeamsWithCollision className="flex items-center absolute -z-[1] pointer-events-none max-w-5xl left-1/2 -translate-x-1/2 mx-auto justify-center w-full h-full" />
28+
<BackgroundBeamsWithCollision className="flex items-center absolute -z-1 pointer-events-none max-w-5xl left-1/2 -translate-x-1/2 mx-auto justify-center w-full h-full" />
2929
<div className="absolute inset-y-0 left-1/3 right-0 pointer-events-none" aria-hidden="true">
3030
<GridPattern
3131
width={30}
3232
height={30}
3333
x={-1}
3434
y={-1}
3535
strokeDasharray={"4 2"}
36-
className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
36+
className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
3737
/>
3838
</div>
39-
<div className="w-full p-4 sm:px-5 flex flex-col max-w-5xl mx-auto">
39+
<div className="w-full p-4 pb-0 sm:px-5 flex flex-col max-w-5xl mx-auto">
4040
<BlurFade delay={0.6} inView className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 w-full">
4141
<div className="space-y-2 max-w-2xl">
4242
<h1 className="text-3xl -translate-x-0.5 font-bold sm:text-5xl xl:text-6xl/none"> Pro<span className="text-left bg-background bg-clip-text bg-no-repeat text-transparent bg-gradient-to-r from-sky-500 via-teal-500 to-green-500 [text-shadow:0_0_rgba(0,0,0,0.1)]">jects</span> </h1>
@@ -70,7 +70,7 @@ export const ProjectHero = React.memo(({ searchQuery, onSearchChange, onClearSea
7070
</div>
7171
</BlurFade>
7272
<BlurFade delay={0.5} inView className="flex max-sm:order-first max-sm:mb-5 flex-col items-start justify-start">
73-
<Button asChild>
73+
<Button asChild className="mt-5">
7474
<Link href="/">
7575
<ArrowLeftIcon className="w-4 h-4" /> Back to Home
7676
</Link>

0 commit comments

Comments
 (0)