feat: add dedicated tech stack page and polish site UX

[CodingWithJiro]

Description

Added a dedicated /tech-stack page with with related UX, accessibility, routing, and performance improvements discovered while inspecting the site.

Changes

Tech Stack

• Added a dedicated /tech-stack page.
• Added a complete categorized list of technologies and tools.
• Created a reusable TechList component for displaying technology categories.
• Added a View all link to the homepage Tech Stack section.

UX & Accessibility

• Added a You are here! tooltip to the current Breadcrumb page label.
• Added a one second hover delay to the current page Breadcrumb tooltip.
• Added hover border styling to project items and banner images.
• Added hover styling to the profile picture.
• Polished link hover, focus, color transitions, and outline offsets.

Routing & Error Handling

• Added a custom not-found.tsx page for unknown routes.

Performance & Navigation

• Replaced anchor navigation with Next.js Link for internal navigation.
• Updated social links, certification links, skip link, project links, and footer navigation to use Link component.

Metadata

• Updated blog article metadata to use the article title and author name.

Testing

• Added and updated Vitest integration tests for the Tech Stack section.
• Added Playwright E2E coverage for:
  • Tech Stack page navigation.
  • Blog, Projects, and Tech Stack View all keyboard navigation.
  • Custom 404 page.
  • Page URL verification.
• Updated existing keyboard accessibility coverage for the new navigation paths.

Demo

portfolio-tech-stack-demo.mp4

Notes for Reviewers

• This PR started with the goal of adding a dedicated /tech-stack page.
• I will be adding new technologies as soon as I learn and used it in a project.
• During implementation and site inspection, I also addressed several related UX, accessibility, routing, and performance issues.
• I also added my latest acquired certificate, Front-End Development Libraries from freeCodeCamp.
• Planning on adding the View all link to my Experience section for my next PR.
• I'm also considering adding Google Analytics feature right after.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
elmarchavez	Ready	Preview	Sep 12, 2026 5:14am UTC

[CodingWithJiro]

In a team setting, this PR would await senior developer approval.
For this solo project, I’ll proceed with merging after review.