Development#4
Conversation
…m X icon, copyright 2026
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Updates the portfolio app’s development setup by upgrading Next.js, standardizing Node.js versioning, and adding Microsoft Clarity analytics support.
Changes:
- Upgrade Next.js (12.2.0 → 13.5.6) and update related lockfile entries.
- Add Microsoft Clarity initialization in
_appand document required env var. - Pin local/dev Node to 18 via
engines,.nvmrc, and.node-version, plus minor Next.js compatibility tweaks (Image props, Link legacy behavior).
Reviewed changes
Copilot reviewed 12 out of 15 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Updates dependency resolution for Next.js 13.5.6 and related transitive deps. |
| package.json | Bumps Next.js / eslint-config-next versions, adds Clarity dependency, pins Node engine to 18.x. |
| pages/_app.jsx | Initializes Microsoft Clarity client-side using NEXT_PUBLIC_CLARITY_PROJECT_ID. |
| pages/work.jsx | Updates next/image width/height props to numeric values. |
| pages/404.jsx | Updates next/image props and uses legacyBehavior with next/link. |
| components/Header.jsx | Replaces Twitter icon with an inline X icon and adds legacyBehavior for Link. |
| components/Hero.jsx | Adds legacyBehavior for Link wrapping an anchor. |
| components/Layout.jsx | Updates footer year to 2026. |
| README.md | Documents Clarity environment variable setup. |
| .nvmrc | Pins Node major version to 18 for nvm users. |
| .node-version | Pins Node major version to 18 for other version managers. |
| .gitignore | Ignores .env.local. |
| .eslintrc.json | Adds Next.js core-web-vitals ESLint configuration. |
| CNAME | Updates custom domain for GitHub Pages. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "version": "0.1.0", | ||
| "private": true, | ||
| "engines": { | ||
| "node": ">=18 <19" |
There was a problem hiding this comment.
The Node.js engine is restricted to 18.x, but the GitHub Pages workflow currently sets up Node 16 (see .github/workflows/nextjs.yml). This mismatch will cause CI installs/builds to fail. Update the workflow to use Node 18, or relax/remove the engines.node constraint so CI and local tooling remain consistent.
| "node": ">=18 <19" | |
| "node": ">=16 <19" |
| className="text-accent-dark/40 text-xl w-full text-center absolute bottom-[20px]" | ||
| > | ||
| © 2025 {header.name}. All Rights Reserved. | ||
| © 2026 {header.name}. All Rights Reserved. |
There was a problem hiding this comment.
Hardcoding the copyright year means it will go stale again next year. Consider rendering the current year dynamically (e.g., from new Date().getFullYear()) to avoid yearly manual updates.
| <a | ||
| className="transition-all text-icons dark:text-icons-dark rounded-[50px] p-[8px] md:hover:scale-[1.2] md:hover:text-[white] md:hover:bg-button md:dark:hover:bg-button-dark" | ||
| href={socials.twitter} | ||
| title="Contact me on Twitter" | ||
| title="Contact me on X" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <FaTwitter className="w-10 h-10 md:w-12 md:h-12" size="3rem" /> | ||
| <XIcon /> | ||
| </a> |
There was a problem hiding this comment.
This social link is icon-only and relies on the title attribute for labeling. title is not a reliable accessible name for screen readers. Add an explicit accessible label (e.g., aria-label="Contact me on X") and consider marking the SVG as decorative (aria-hidden) if the label is on the link.
No description provided.