feat: migrate to pnpm, add Turnstile anti-spam, fix performance issues

- Migrate from npm to pnpm for better performance and dependency management
- Add Cloudflare Turnstile to contact form for anti-spam protection
- Add email icon to social links section
- Fix ScrollTrigger "Element not found: body" error
- Reduce will-change memory consumption warnings
- Fix font preload warnings with proper configuration
- Update GitHub Actions workflow to support pnpm
- Update Dockerfile to use pnpm and Node 22
- Fix ESLint warnings across multiple components
- Update metadata to reflect Rust & Web Developer focus

Author: Amitminer

.env example

@@ -1,4 +1,5 @@
-NEXT_PUBLIC_BACKEND_URL=https://github-api-backend.netlify.app/api/github
+NEXT_PUBLIC_BACKEND_URL=https://your-backend-url/api/github
 NEXT_PUBLIC_LOCAL_BACKEND_URL=http://localhost:8000/api/github
-GITHUB_TOKEN=
-NEXT_PUBLIC_FORMSPREE_FORM_ID=
+NEXT_PUBLIC_FORMSPREE_FORM_ID=your-formspree-form-id
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-turnstile-site-key
+NEXT_PUBLIC_EMAIL=your@email.com

.github/workflows/nextjs.yml

@@ -16,6 +16,8 @@ jobs:
     env:
       NEXT_PUBLIC_LOCAL_BACKEND_URL: ${{ secrets.BACKEND_URL }}
       NEXT_PUBLIC_FORMSPREE_FORM_ID: ${{ secrets.FORMSPREE_FORM_ID }}
+      NEXT_PUBLIC_TURNSTILE_SITE_KEY: ${{ secrets.TURNSTILE_SITE_KEY }}
+      NEXT_PUBLIC_EMAIL: ${{ secrets.EMAIL }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -27,6 +29,11 @@ jobs:
             echo "command=install" >> $GITHUB_OUTPUT
             echo "runner=yarn" >> $GITHUB_OUTPUT
             exit 0
+          elif [ -f "${{ github.workspace }}/pnpm-lock.yaml" ]; then
+            echo "manager=pnpm" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=pnpm" >> $GITHUB_OUTPUT
+            exit 0
           elif [ -f "${{ github.workspace }}/package.json" ]; then
             echo "manager=npm" >> $GITHUB_OUTPUT
             echo "command=ci" >> $GITHUB_OUTPUT
@@ -39,8 +46,13 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+        if: steps.detect-package-manager.outputs.manager == 'pnpm'
       - name: Setup Pages
         uses: actions/configure-pages@v5
         with:
@@ -55,6 +67,8 @@ jobs:
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Lint with ESLint
+        run: ${{ steps.detect-package-manager.outputs.runner }} next lint
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
       - name: Upload artifact

Dockerfile

@@ -0,0 +1,27 @@
+# Install dependencies only when needed
+FROM node:22-alpine AS deps
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN npm install -g pnpm && pnpm install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm install -g pnpm && pnpm run build
+
+# Production image, copy necessary files and run next
+FROM node:22-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV production
+
+COPY .env .
+
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+EXPOSE 3000
+
+CMD ["npm", "install", "-g", "pnpm", "&&", "pnpm", "start"] 

README.md

@@ -11,27 +11,22 @@ This is my personal developer portfolio built using **Next.js**, styled with **T
 ```bash
 git clone [https://github.com/amitminer/amitminer.github.io.git](https://github.com/amitminer/amitminer.github.io.git)
 cd amitminer.github.io
-npm install
-````
+pnpm install
+```
 
-### 2\. Set Up Environment Variables
+### 2. Set Up Environment Variables
 
 Create the `.env.local` file:
 
 ```bash
 cp .env.example .env.local
 ```
 
-Then edit `.env.local` with your values:
-
-```
-NEXT_PUBLIC_BACKEND_URL=[https://your-backend-domain.com/api/github](https://your-backend-domain.com/api/github)
-NEXT_PUBLIC_FORMSPREE_FORM_ID=your_formspree_id_here
-```
+Then edit `.env.local` with your values. See the [Environment Variables](#environment-variables) section below for the complete list of required variables.
 
 -----
 
-### 3\. Backend Setup (Required)
+### 3. Backend Setup (Required)
 
 > 📦 GitHub Stats & Projects require a backend API.
 
@@ -49,20 +44,56 @@ Once deployed, use that backend URL as `NEXT_PUBLIC_BACKEND_URL` in `.env.local`
 
 -----
 
-### 4\. Run Development Server
+### 4. Run Development Server
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 Visit your local site at:
 📍 http://localhost:3000
 
 -----
 
+## Environment Variables
+
+Create a `.env` file in the root directory with the following variables:
+
+```env
+# Backend API URLs
+NEXT_PUBLIC_BACKEND_URL=https://github-api-backend.netlify.app/api/github
+NEXT_PUBLIC_LOCAL_BACKEND_URL=http://localhost:8000/api/github
+
+# GitHub API Token (optional, for enhanced rate limits)
+GITHUB_TOKEN=
+
+# Formspree Form ID for contact form
+NEXT_PUBLIC_FORMSPREE_FORM_ID=
+
+# Cloudflare Turnstile Site Key for anti-spam protection
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=
+```
+
 ## 📡 API Backend
 
 Backend Repo → [github-api-backend](https://github.com/amitxd75/github-api-backend)
 Set it up properly, deploy to your server or Netlify, and configure `NEXT_PUBLIC_BACKEND_URL` in `.env.local`.
 
 This enables real-time GitHub stats, repo data, and caching.
+
+## 🚀 Docker
+
+You can now run this app using Docker for easy deployment and local development.
+
+### Build the Docker image
+```sh
+docker build -t my-portfolio-app .
+```
+
+### Run the Docker container
+```sh
+docker run -p 3000:3000 --env-file .env my-portfolio-app
+```
+
+- The app will be available at [http://localhost:3000](http://localhost:3000)
+- Make sure to set up your `.env` file with the required environment variables before running.

app/components/icons/EmailIcon.jsx

@@ -0,0 +1,13 @@
+export const EmailIcon = ({ className = "w-4 h-4", ...props }) => (
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    fill="currentColor"
+    {...props}
+  >
+    <title>Email</title>
+    <path d="M1.5 4.5h21a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-21a1 1 0 0 1-1-1v-13a1 1 0 0 1 1-1zm1 2v11h19v-11l-9.5 6.5L2.5 6.5zm1.62-1l8.38 5.73L20.88 5.5H4.12z" />
+  </svg>
+); 

app/components/icons/index.ts

@@ -15,3 +15,5 @@ export { FaWindows } from 'react-icons/fa';
 // export { VscCode } from 'react-icons/vsc';
 
 export { RefreshCw } from 'lucide-react';
+
+export { EmailIcon } from './EmailIcon';

app/components/sections/AnimatedSections.tsx

@@ -109,7 +109,6 @@ export default function AnimatedSections({ children }: { children: React.ReactNo
           height: 3px;
           background: linear-gradient(90deg, #FF1493, #00FFFF);
           z-index: 1000;
-          will-change: width;
           transition: none;
           box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
         `
@@ -189,7 +188,7 @@ export default function AnimatedSections({ children }: { children: React.ReactNo
               rotation: i % 4 === 0 ? 10 : -10,
               ease: "none",
               scrollTrigger: {
-                trigger: "body",
+                trigger: document.body || containerRef.current,
                 start: "top top",
                 end: "bottom bottom",
                 scrub: 1,
@@ -330,7 +329,6 @@ export default function AnimatedSections({ children }: { children: React.ReactNo
 
             animatedCards.add(card)
             card.setAttribute("data-card-animated", "true")
-            card.style.willChange = "transform"
 
             // Check if it's a project card specifically
             const isProjectCard = card.closest("#projects")
@@ -365,9 +363,6 @@ export default function AnimatedSections({ children }: { children: React.ReactNo
                 end: "bottom 5%",
                 toggleActions: "play none none reverse",
                 fastScrollEnd: true,
-                onEnter: () => {
-                  card.style.willChange = "auto"
-                },
               },
             })
 
@@ -472,7 +467,6 @@ export default function AnimatedSections({ children }: { children: React.ReactNo
           height: 100%;
           pointer-events: none;
           z-index: -1;
-          will-change: background;
           background: linear-gradient(135deg,
             rgba(255, 20, 147, 0.02) 0%,
             transparent 30%,
@@ -579,12 +573,20 @@ export default function AnimatedSections({ children }: { children: React.ReactNo
       return () => {
         ctx.revert()
         ScrollTrigger.getAll().forEach((trigger) => trigger.kill())
+        gsap.killTweensOf("*")
 
         const elements = [".scroll-progress", ".morphing-bg", ".reverse-scroll-bg"]
         elements.forEach((selector) => {
           document.querySelectorAll(selector).forEach((el) => el.remove())
         })
 
+        // Clean up any remaining will-change styles
+        document.querySelectorAll('[style*="will-change"]').forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.style.willChange = 'auto'
+          }
+        })
+
         setIsInitialized(false)
       }
     }, 50)