feat: update gradient mask classes for consistency across components

[pphatdev]

This pull request introduces several improvements to the infinite scroll functionality for both the posts and projects pages, as well as minor UI and code cleanup adjustments. The most significant changes are the addition of a fetch guard to prevent duplicate requests, dynamic import optimization for the projects hero component, and consistent UI updates across hero components.

Infinite Scroll Improvements

• Added an isFetchingRef guard in both PostsContent and ProjectsContent to prevent overlapping fetch requests, ensuring that only one fetch is active at a time and improving performance and reliability. [1] [2] [3] [4]
• Updated fetch logic to use the current page value and adjusted dependency arrays to prevent unnecessary fetches. [1] [2]

Dynamic Import Optimization

• Changed the import for ProjectHero in src/app/projects/page.tsx to a dynamic import with ssr: false, improving client-side rendering performance for the projects page.

UI Consistency and Cleanup

• Updated the mask class for hero background elements from [mask-image:radial-gradient(...)] to mask-[radial-gradient(...)] in multiple hero components for improved Tailwind CSS compatibility and visual consistency. [1] [2] [3] [4] [5]
• Minor UI tweaks in ProjectHero: changed gradient class, adjusted z-index, added padding, and improved the back button layout for better appearance and accessibility. [1] [2]
• Removed unused imports and commented out a tag label for cleaner code in posts and projects pages. [1] [2] [3]

Summary by CodeRabbit

• Bug Fixes

  • Improved pagination stability by preventing concurrent data requests on posts and projects pages.
  • Enhanced error handling for pagination failures.

• Style

  • Refined masking effects and spacing across hero sections.
  • Updated gradient utility syntax for consistency.

• Chores

  • Removed unused component references.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR updates Tailwind CSS mask utilities across multiple hero components to use the newer arbitrary value syntax format, and implements concurrent fetch prevention with isFetchingRef in pagination logic for posts and projects pages. Minor styling adjustments and dependency array updates are included.

Changes

Cohort / File(s)	Summary
Tailwind Mask Utility Syntax Updates src/app/contact/page.tsx, src/components/heros/contact-hero.tsx, src/components/heros/home-hero.tsx, src/components/heros/posts-hero.tsx	Updated mask-image arbitrary Tailwind syntax from [mask-image:radial-gradient(...)] to mask-[radial-gradient(...)] across all files; functional masking behavior unchanged.
Pagination & Fetch Concurrency Control src/app/posts/page.tsx, src/app/projects/page.tsx	Introduced isFetchingRef to prevent overlapping API fetches; updated dependency arrays to [hasMore, page, limit]; refactored fetch logic to use local currentPage variable. Posts page removed unused imports (Badge, Footer); projects page replaced static ProjectHero import with dynamic SSR-disabled loader.
Styling & Mask Updates src/components/heros/project-hero.tsx	Updated mask utility syntax alongside gradient class semantics (bg-linear-to-b), z-index values (-z-1), padding adjustments (pb-0), and explicit button margin class (mt-5); commented out "Tag:" label in available-tags toolbar.

Sequence Diagram

sequenceDiagram
    participant User
    participant Page as Posts/Projects Page
    participant State as Local State
    participant API

    User->>Page: Click "Load More"
    Page->>State: Check isFetchingRef.current
    alt Already Fetching or No More Data
        State-->>Page: Return (abort)
        Page-->>User: No action
    else Safe to Fetch
        Page->>State: Set isFetchingRef.current = true
        Page->>API: Fetch posts (currentPage)
        API-->>Page: Return data + hasMore
        Page->>State: Append new posts, increment page
        Page->>State: Update hasMore from API
        Page->>State: Set isFetchingRef.current = false
        Page-->>User: Posts updated
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A rabbit hops through masks so grand,
Radial gradients dance across the land!
No fetches clash—our guards stand true,
Tailwind syntax gleams in morning dew.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the primary change: updating gradient mask classes for Tailwind consistency across multiple hero components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat-projects

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can validate your CodeRabbit configuration file in your editor.

If your editor has YAML language server, you can enable auto-completion and validation by adding # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json at the top of your CodeRabbit configuration file.

[coderabbitai]

🧹 Nitpick comments (1)

src/app/projects/page.tsx (1)

153-153: Remove commented-out JSX instead of keeping dead UI fragments.

Line 153 leaves stale commented markup in the render path. Prefer deleting it (or replacing with an explicit accessible label if needed) to keep the component clean.

✂️ Minimal cleanup

-                            {/* <p className="text-xs font-medium">Tag: </p> */}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/projects/page.tsx` at line 153, Remove the dead commented JSX
fragment ("{/* <p className=\"text-xs font-medium\">Tag: </p> */}") from the
render in the projects page component (page.tsx) to clean up stale markup; if an
accessible label is required, replace the comment with an explicit element
(e.g., a visible or visually-hidden <p> or <span>) tied to the related UI
instead of leaving commented-out JSX.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/app/projects/page.tsx`:
- Line 153: Remove the dead commented JSX fragment ("{/* <p className=\"text-xs
font-medium\">Tag: </p> */}") from the render in the projects page component
(page.tsx) to clean up stale markup; if an accessible label is required, replace
the comment with an explicit element (e.g., a visible or visually-hidden <p> or
<span>) tied to the related UI instead of leaving commented-out JSX.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b6701fff-61fc-4d12-99e7-df0c44269f2e

📥 Commits

Reviewing files that changed from the base of the PR and between fc6cb44 and 82a98e9.

📒 Files selected for processing (7)

• src/app/contact/page.tsx
• src/app/posts/page.tsx
• src/app/projects/page.tsx
• src/components/heros/contact-hero.tsx
• src/components/heros/home-hero.tsx
• src/components/heros/posts-hero.tsx
• src/components/heros/project-hero.tsx