diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
index 2e7d854..4ab6961 100644
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -4,11 +4,44 @@ import ArticleHeader from '@/components/sections/article-header';
 import Footer from '@/components/sections/footer';
 import Link from 'next/link';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
+import type { Metadata } from 'next';
+
+const metaDescription =
+  'Blog posts on full stack development and tech from Elmar Chavez.';
 
 type ArticlePageProps = {
   params: Promise<{ slug: string }>;
 };
 
+export async function generateMetadata({
+  params,
+}: ArticlePageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const blog = getBlogMeta(slug);
+  const title = `${blog.title} | Elmar Chavez`;
+  const metadata: Metadata = {
+    title,
+    description: metaDescription,
+    keywords: [
+      'Elmar Chavez Blog',
+      'Web Development Blog',
+      'Tech Articles',
+      'Tech Community',
+      'Software Engineering Blog',
+    ],
+    openGraph: {
+      title,
+      description: metaDescription,
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description: metaDescription,
+    },
+  };
+  return metadata;
+}
+
 export default async function ArticlePage({ params }: ArticlePageProps) {
   const { slug } = await params;
   const blog = getBlogMeta(slug);
@@ -48,7 +81,7 @@ export default async function ArticlePage({ params }: ArticlePageProps) {
       <div className="flex items-center justify-between">
         <Link
           href="/"
-          className="focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-[0.85rem] font-normal underline-offset-4 outline-2 outline-offset-4 outline-transparent hover:underline md:text-[0.875rem]"
+          className="focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-[0.85rem] font-normal underline-offset-4 outline-2 outline-offset-6 outline-transparent hover:underline focus-visible:transition-colors focus-visible:duration-150 focus-visible:ease-in-out md:text-[0.875rem]"
         >
           <ArrowLeft aria-hidden="true" size={16} />
           <span>Back to homepage</span>
@@ -56,7 +89,7 @@ export default async function ArticlePage({ params }: ArticlePageProps) {
 
         <Link
           href="/blog"
-          className="focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-right text-[0.85rem] font-normal underline-offset-4 outline-2 outline-offset-4 outline-transparent hover:underline md:text-[0.875rem]"
+          className="focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-right text-[0.85rem] font-normal underline-offset-4 outline-2 outline-offset-6 outline-transparent hover:underline focus-visible:transition-colors focus-visible:duration-150 focus-visible:ease-in-out md:text-[0.875rem]"
         >
           <span>Read more articles</span>
           <ArrowRight aria-hidden="true" size={16} />
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index ff9d84c..95cf212 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -69,14 +69,14 @@ export default function BlogPage() {
                 className="border-border/60 border-b pb-4 transition-colors duration-150 ease-in-out last:border-b-0 md:flex md:flex-row md:items-center md:justify-between md:gap-4"
                 key={id}
               >
-                <div className="border-ring/20 focus-within:border-ring has-hover:border-ring hidden w-55 shrink-0 overflow-hidden rounded-xl border-2 transition-all duration-150 ease-in-out md:block">
+                <div className="border-ring/20 focus-within:border-foreground has-hover:border-foreground hidden w-55 shrink-0 overflow-hidden rounded-xl border transition-all duration-150 ease-in-out md:block">
                   <Image
                     src={imgUrl}
                     alt={imgAlt}
                     width={800}
                     height={400}
                     loading="eager"
-                    className="aspect-video w-full object-cover transition-transform duration-150 hover:scale-105"
+                    className="aspect-video w-full object-cover"
                   />
                 </div>
 
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..b6e7441
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,29 @@
+import Footer from '@/components/sections/footer';
+import Breadcrumb from '@/components/sections/breadcrumb';
+import ThemeToggle from '@/components/theme/theme-toggle';
+
+export default function NotFound() {
+  return (
+    <main
+      id="main"
+      className="mx-auto flex min-h-screen max-w-130 flex-col justify-between px-4 py-8 md:max-w-4xl"
+    >
+      <header>
+        <div className="mb-12 flex items-center justify-between">
+          <Breadcrumb items={[]} currentLabel="Page not found" />
+          <ThemeToggle />
+        </div>
+
+        <h1 className="mb-4 text-[36px] leading-10 font-extrabold">
+          Page not found
+        </h1>
+        <p className="text-muted-foreground text-base">
+          Seems like this page doesn&apos;t exist{' '}
+          <span className="whitespace-nowrap">¯\_(ツ)_/¯</span>
+        </p>
+      </header>
+
+      <Footer />
+    </main>
+  );
+}
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index da02590..c419e0f 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -44,8 +44,10 @@ export default function ProjectsPage() {
       </header>
 
       <section>
-        <h1 className="mb-1 text-lg font-bold md:text-3xl">Projects</h1>
-        <p className="mb-6 text-sm font-medium md:text-base">
+        <h1 className="mb-1 text-lg font-bold transition-colors duration-150 ease-in-out md:text-3xl">
+          Projects
+        </h1>
+        <p className="mb-6 text-sm font-medium transition-colors duration-150 ease-in-out md:text-base">
           Things I built and worked on.
         </p>
       </section>
@@ -64,7 +66,7 @@ export default function ProjectsPage() {
           }) => {
             return (
               <li
-                className="border-ring/20 focus-within:border-ring has-hover:border-ring bg-background text-foreground mx-auto flex max-w-60 flex-col overflow-hidden rounded-lg border transition-all duration-150 ease-in-out min-[850px]:max-w-70"
+                className="border-ring/40 focus-within:border-foreground has-hover:border-foreground bg-background text-foreground mx-auto flex max-w-60 flex-col overflow-hidden rounded-lg border duration-150 ease-in-out hover:transition-colors focus-visible:transition-colors min-[850px]:max-w-70"
                 key={id}
               >
                 <div className="relative mb-4 aspect-video max-w-60 shrink-0 overflow-hidden min-[850px]:max-w-70">
@@ -101,17 +103,19 @@ export default function ProjectsPage() {
 
                 <section className="flex h-full flex-col justify-between">
                   <header className="mb-4 px-4">
-                    <h2 className="mb-2 text-[0.875rem] font-semibold">
+                    <h2 className="text-foreground mb-2 text-[0.875rem] font-semibold">
                       {title}
                     </h2>
-                    <p className="text-[0.75rem]">{description}</p>
+                    <p className="text-foreground text-[0.75rem]">
+                      {description}
+                    </p>
                   </header>
 
                   <div className="mb-4 flex items-center justify-center gap-2 px-4 text-[0.75rem]">
                     <Link
                       href={githubUrl}
                       target="_blank"
-                      className="bg-background border-border/50 hover:bg-foreground hover:text-background focus-visible:outline-muted-foreground flex items-center justify-center gap-1 rounded-sm border px-4 py-1 outline-offset-4 outline-transparent transition-colors duration-150 ease-in-out focus-visible:outline-2 min-[850px]:px-6"
+                      className="bg-background border-border/50 text-foreground hover:bg-foreground hover:text-background focus-visible:outline-muted-foreground flex items-center justify-center gap-1 rounded-sm border px-4 py-1 outline-offset-4 outline-transparent duration-150 ease-in-out hover:transition-colors focus-visible:outline-2 focus-visible:transition-colors min-[850px]:px-6"
                       aria-label={`Go to ${title}'s GitHub repository.`}
                     >
                       <FaGithub size={12} />
@@ -120,7 +124,7 @@ export default function ProjectsPage() {
                     <Link
                       href={siteUrl}
                       target="_blank"
-                      className="bg-background border-border/50 text-foreground hover:bg-foreground hover:text-background focus-visible:outline-muted-foreground flex items-center justify-center gap-1 rounded-sm border px-4 py-1 outline-offset-4 outline-transparent transition-colors duration-150 ease-in-out focus-visible:outline-2 min-[850px]:px-6"
+                      className="bg-background border-border/50 text-foreground hover:bg-foreground hover:text-background focus-visible:outline-muted-foreground flex items-center justify-center gap-1 rounded-sm border px-4 py-1 outline-offset-4 outline-transparent duration-150 ease-in-out hover:transition-colors focus-visible:outline-2 focus-visible:transition-colors min-[850px]:px-6"
                       aria-label={`Go to ${title}'s live website.`}
                     >
                       <Globe size={12} />
@@ -137,7 +141,7 @@ export default function ProjectsPage() {
       <div className="flex items-center justify-between">
         <Link
           href="/"
-          className="focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-[0.85rem] font-normal underline-offset-4 outline-2 outline-offset-4 outline-transparent hover:underline md:text-[0.875rem]"
+          className="focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-[0.85rem] font-normal underline-offset-4 outline-2 outline-offset-6 outline-transparent hover:underline focus-visible:transition-colors focus-visible:duration-150 focus-visible:ease-in-out md:text-[0.875rem]"
         >
           <ArrowLeft aria-hidden="true" size={16} />
           <span>Back to homepage</span>
@@ -145,7 +149,7 @@ export default function ProjectsPage() {
 
         <Link
           href="https://github.com/CodingWithJiro/Projects-Hub"
-          className="focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-[0.85rem] font-normal underline-offset-4 outline-2 outline-offset-4 outline-transparent hover:underline md:text-[0.875rem]"
+          className="focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-[0.85rem] font-normal underline-offset-4 outline-2 outline-offset-6 outline-transparent hover:underline focus-visible:transition-colors focus-visible:duration-150 focus-visible:ease-in-out md:text-[0.875rem]"
           target="_blank"
         >
           <span>View all projects</span>
diff --git a/src/app/tech-stack/page.tsx b/src/app/tech-stack/page.tsx
new file mode 100644
index 0000000..4d88dae
--- /dev/null
+++ b/src/app/tech-stack/page.tsx
@@ -0,0 +1,63 @@
+import type { Metadata } from 'next';
+import Breadcrumb from '@/components/sections/breadcrumb';
+import ThemeToggle from '@/components/theme/theme-toggle';
+import Footer from '@/components/sections/footer';
+import TechList from '@/components/sections/tech-list';
+import { TECH_STACK } from '@/data/tech-stack';
+
+const metaDescription =
+  'Technologies and tools Elmar Chavez has worked with across his projects.';
+
+export const metadata: Metadata = {
+  title: 'Elmar Chavez | Tech Stack',
+  description: metaDescription,
+  keywords: [
+    'Elmar Chavez Tech Stack',
+    'Web Development Technologies',
+    'Full Stack Development Skills',
+    'Frontend Tech',
+    'Backend Tech',
+  ],
+  openGraph: {
+    title: 'Tech Stack | Elmar Chavez',
+    description: metaDescription,
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Tech Stack | Elmar Chavez',
+    description: metaDescription,
+  },
+};
+
+export default function TechStackPage() {
+  return (
+    <main
+      id="main"
+      className="mx-auto min-h-screen max-w-130 px-4 py-8 md:max-w-4xl"
+    >
+      <header className="mb-8 flex items-center justify-between">
+        <Breadcrumb items={[]} currentLabel="Tech Stack" />
+        <ThemeToggle />
+      </header>
+
+      <section className="mb-8">
+        <h1 className="mb-1 text-lg font-bold md:text-3xl">Tech Stack</h1>
+        <h2 className="mb-6 text-sm font-medium md:text-base">
+          Technologies and tools I&apos;ve worked with so far.
+        </h2>
+      </section>
+
+      <ul className="flex flex-col gap-10">
+        {TECH_STACK.map(({ category, technologies }) => {
+          return (
+            <li key={category}>
+              <TechList category={category} technologies={technologies} />
+            </li>
+          );
+        })}
+      </ul>
+
+      <Footer />
+    </main>
+  );
+}
diff --git a/src/components/accessibility/skip-link.tsx b/src/components/accessibility/skip-link.tsx
index 8521a76..dc5d0c6 100644
--- a/src/components/accessibility/skip-link.tsx
+++ b/src/components/accessibility/skip-link.tsx
@@ -1,11 +1,13 @@
+import Link from 'next/link';
+
 const SkipLink = () => {
   return (
-    <a
+    <Link
       className="focus-visible:outline-muted-foreground focus-visible:text-foreground focus-visible:bg-card focus-visible:border-border/40 sr-only rounded-sm text-sm outline-offset-4 focus-visible:not-sr-only focus-visible:absolute focus-visible:top-4 focus-visible:left-4 focus-visible:border focus-visible:p-2 focus-visible:outline-2"
       href="#main"
     >
       Skip to main content
-    </a>
+    </Link>
   );
 };
 
diff --git a/src/components/sections/article-header.tsx b/src/components/sections/article-header.tsx
index 0cfd62b..e931e92 100644
--- a/src/components/sections/article-header.tsx
+++ b/src/components/sections/article-header.tsx
@@ -47,18 +47,18 @@ const ArticleHeader = ({ breadcrumbItems, blogMeta }: ArticleHeaderProps) => {
           />
         </div>
 
-        <ul className="mb-1 flex gap-2 text-[0.65rem] font-light">
+        <ul className="text-foreground mb-1 flex gap-2 text-[0.65rem] font-light">
           {blogMeta.tags.map((tag) => {
             return <li key={tag}>{tag}</li>;
           })}
         </ul>
 
-        <h1 className="mb-4 text-[24px] font-extrabold md:text-[32px] md:leading-10">
+        <h1 className="text-foreground mb-4 text-[24px] font-extrabold md:text-[32px] md:leading-10">
           {blogMeta.title}
         </h1>
 
         <section>
-          <div className="flex items-center gap-2">
+          <div className="text-foreground flex items-center gap-2">
             <div className="flex items-center gap-1">
               <div className="size-6 overflow-hidden rounded-full">
                 <Image
diff --git a/src/components/sections/blog.tsx b/src/components/sections/blog.tsx
index 0f345aa..98de716 100644
--- a/src/components/sections/blog.tsx
+++ b/src/components/sections/blog.tsx
@@ -30,7 +30,7 @@ const Blog = () => {
                 className="border-border/60 border-b pb-4 last:border-b-0 md:flex md:flex-row md:items-center md:justify-between md:gap-4"
                 key={id}
               >
-                <div className="border-ring/20 focus-within:border-ring has-hover:border-ring hidden w-55 shrink-0 overflow-hidden rounded-xl border-2 transition-all duration-150 ease-in-out md:block">
+                <div className="border-ring/20 focus-within:border-foreground has-hover:border-foreground hidden w-55 shrink-0 overflow-hidden rounded-xl border transition-all duration-150 ease-in-out md:block">
                   <Image
                     src={imgUrl}
                     alt={imgAlt}
@@ -61,7 +61,7 @@ const Blog = () => {
                     </ul>
 
                     <Link
-                      className="focus-visible:outline-muted-foreground flex w-fit items-center justify-center gap-1 self-end rounded-sm text-[0.75rem] font-normal underline-offset-4 outline-2 outline-offset-4 outline-transparent transition-colors duration-150 ease-in-out hover:underline min-[425px]:self-auto md:text-right"
+                      className="focus-visible:outline-muted-foreground flex w-fit items-center justify-center gap-1 self-end rounded-sm text-[0.75rem] font-normal underline-offset-4 outline-2 outline-offset-6 outline-transparent hover:underline focus-visible:transition-colors focus-visible:duration-150 focus-visible:ease-in-out min-[425px]:self-auto md:text-right"
                       href={blogUrl}
                       aria-label={`Read more about ${title}`}
                     >
diff --git a/src/components/sections/breadcrumb.tsx b/src/components/sections/breadcrumb.tsx
index 80fd6a5..528c586 100644
--- a/src/components/sections/breadcrumb.tsx
+++ b/src/components/sections/breadcrumb.tsx
@@ -12,7 +12,7 @@ const Breadcrumb = ({ items, currentLabel }: BreadCrumbProps) => {
       <ol className="flex items-center gap-1">
         <li className="flex items-center">
           <Link
-            className="text-muted-foreground hover:text-foreground focus-visible:text-foreground text-[12px] font-medium outline-transparent transition-colors focus-visible:underline focus-visible:underline-offset-4 md:text-sm"
+            className="text-muted-foreground hover:text-foreground focus-visible:text-foreground text-[12px] font-medium outline-transparent focus-visible:underline focus-visible:underline-offset-4 md:text-sm"
             href="/"
           >
             Home
@@ -30,7 +30,7 @@ const Breadcrumb = ({ items, currentLabel }: BreadCrumbProps) => {
               </span>
 
               <Link
-                className="text-muted-foreground hover:text-foreground focus-visible:text-foreground text-[12px] font-medium outline-transparent transition-colors focus-visible:underline focus-visible:underline-offset-4 md:text-sm"
+                className="text-muted-foreground hover:text-foreground focus-visible:text-foreground text-[12px] font-medium outline-transparent focus-visible:underline focus-visible:underline-offset-4 md:text-sm"
                 href={href}
               >
                 {label}
@@ -47,12 +47,18 @@ const Breadcrumb = ({ items, currentLabel }: BreadCrumbProps) => {
             /
           </span>
 
-          <p
-            className="text-muted-foreground hover:text-foreground max-w-32 truncate text-[12px] font-medium transition-colors hover:cursor-pointer md:max-w-62 md:text-sm"
-            aria-current="page"
-          >
-            {currentLabel}
-          </p>
+          <div className="group relative">
+            <p
+              className="text-muted-foreground group-hover:text-foreground max-w-32 truncate text-[12px] font-medium hover:cursor-pointer md:max-w-62 md:text-sm"
+              aria-current="page"
+            >
+              {currentLabel}
+            </p>
+
+            <span className="bg-foreground text-background after:bg-foreground pointer-events-none absolute bottom-full left-[75%] rounded-md rounded-bl-none px-2 py-1 text-xs whitespace-nowrap opacity-0 transition-opacity duration-150 ease-in-out group-hover:opacity-100 group-hover:delay-1000">
+              You are here!
+            </span>
+          </div>
         </li>
       </ol>
     </nav>
diff --git a/src/components/sections/experience.tsx b/src/components/sections/experience.tsx
index f84dff1..8d585e1 100644
--- a/src/components/sections/experience.tsx
+++ b/src/components/sections/experience.tsx
@@ -1,5 +1,6 @@
 import { FiExternalLink } from 'react-icons/fi';
 import { workExperiences, certificates } from '@/data/experiences';
+import Link from 'next/link';
 
 const Experience = () => {
   return (
@@ -36,7 +37,7 @@ const Experience = () => {
                   className="before:border-border before:bg-background first:before:bg-foreground after:bg-border/50 hover:before:bg-foreground relative pl-4.5 before:absolute before:top-1 before:left-0 before:h-3 before:w-3 before:rounded-full before:border-2 before:transition-colors before:duration-150 before:ease-in-out after:absolute after:top-4 after:-bottom-6 after:left-1.5 after:w-px after:transition-colors after:duration-150 after:ease-in-out last:after:hidden md:pl-6"
                   key={id}
                 >
-                  <a
+                  <Link
                     className="group decoration-muted-foreground relative mb-1 inline-block text-[0.85rem] font-semibold decoration-1 underline-offset-4 outline-0 hover:underline focus-visible:underline"
                     href={urlLink}
                     target="_blank"
@@ -44,7 +45,7 @@ const Experience = () => {
                   >
                     {title}
                     <FiExternalLink className="group-focus-visible:text-foreground text-muted-foreground group-hover:text-foreground absolute top-px -right-5" />
-                  </a>
+                  </Link>
                   <p className="flex flex-col text-[0.75rem]">
                     <span>{institution}</span>
                     <span className="text-muted-foreground text-[0.70rem]">
diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
index 0a4bc9e..eb4a07e 100644
--- a/src/components/sections/footer.tsx
+++ b/src/components/sections/footer.tsx
@@ -1,4 +1,5 @@
 import { socialLinks } from '@/data/social-links';
+import Link from 'next/link';
 
 const currentYear = new Date().getFullYear();
 
@@ -13,14 +14,14 @@ const Footer = () => {
         {socialLinks.map(({ id, url, label, Icon }) => {
           return (
             <li key={id}>
-              <a
+              <Link
                 className="text-muted-foreground hover:text-accent focus-visible:outline-muted-foreground focus-visible:text-foreground inline-flex items-center justify-center rounded-sm outline-offset-4 outline-transparent transition-colors duration-150 ease-in-out focus-visible:outline-2"
                 href={url}
                 target="_blank"
                 aria-label={label}
               >
                 <Icon className="size-4.5 md:size-5" aria-hidden="true" />
-              </a>
+              </Link>
             </li>
           );
         })}
diff --git a/src/components/sections/hero.tsx b/src/components/sections/hero.tsx
index 0a8e24c..e539e73 100644
--- a/src/components/sections/hero.tsx
+++ b/src/components/sections/hero.tsx
@@ -1,11 +1,12 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import ThemeToggle from '../theme/theme-toggle';
 import { socialLinks } from '@/data/social-links';
 
 const Hero = () => {
   return (
     <header className="mb-6 flex flex-row items-center gap-2 md:gap-4">
-      <div className="border-ring/20 w-25 shrink-0 overflow-hidden rounded-lg border md:w-30">
+      <div className="border-ring/20 hover:border-foreground w-25 shrink-0 overflow-hidden rounded-lg border transition-colors duration-150 ease-in-out md:w-30">
         <Image
           src="/img/author-profile_683x771.png"
           alt="Elmar Chavez - Full Stack Developer"
@@ -28,14 +29,14 @@ const Hero = () => {
             {socialLinks.map(({ id, url, label, Icon }) => {
               return (
                 <li key={id}>
-                  <a
+                  <Link
                     className="text-muted-foreground hover:text-accent focus-visible:outline-muted-foreground focus-visible:text-foreground inline-flex items-center justify-center rounded-sm outline-offset-4 outline-transparent transition-colors duration-150 ease-in-out focus-visible:outline-2"
                     href={url}
                     target="_blank"
                     aria-label={label}
                   >
                     <Icon className="size-4.5 md:size-5" aria-hidden="true" />
-                  </a>
+                  </Link>
                 </li>
               );
             })}
diff --git a/src/components/sections/projects.tsx b/src/components/sections/projects.tsx
index c9697db..d3b3a63 100644
--- a/src/components/sections/projects.tsx
+++ b/src/components/sections/projects.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import { projectList } from '@/data/project-list';
 import ViewAllLink from '../ui/view-all-link';
 
@@ -15,7 +16,7 @@ const Projects = () => {
           ({ id, title, description, imgUrl, imgUrlDark, siteUrl }) => {
             return (
               <li
-                className="border-ring/20 focus-within:border-ring has-hover:border-ring bg-muted/40 mx-auto flex max-w-50 flex-col items-center justify-start rounded-lg border text-center transition-all duration-150 ease-in-out md:max-w-[clamp(12.5rem,1.25rem+23.4375vw,14.375rem)]"
+                className="border-ring/20 focus-within:border-foreground has-hover:border-foreground bg-muted/40 mx-auto flex max-w-50 flex-col items-center justify-start rounded-lg border text-center transition-all duration-150 ease-in-out md:max-w-[clamp(12.5rem,1.25rem+23.4375vw,14.375rem)]"
                 key={id}
               >
                 <div className="mb-4 h-35.5 w-50 md:w-[clamp(12.5rem,1.25rem+23.4375vw,14.375rem)]">
@@ -38,14 +39,14 @@ const Projects = () => {
                 </div>
 
                 <h3 className="mb-1 text-[0.875rem] font-semibold">
-                  <a
+                  <Link
                     className="decoration-0 underline-offset-4 opacity-90 hover:underline hover:opacity-100 focus-visible:underline focus-visible:opacity-100 focus-visible:outline-none"
                     href={siteUrl}
                     target="_blank"
                     aria-label={`Go to project ${title}.`}
                   >
                     {title}
-                  </a>
+                  </Link>
                 </h3>
 
                 <p className="px-4 pb-2 text-[0.75rem]">{description}</p>
diff --git a/src/components/sections/tech-list.tsx b/src/components/sections/tech-list.tsx
new file mode 100644
index 0000000..8b44347
--- /dev/null
+++ b/src/components/sections/tech-list.tsx
@@ -0,0 +1,25 @@
+interface TechListProps {
+  category: string;
+  technologies: string[];
+}
+
+export default function TechList({ category, technologies }: TechListProps) {
+  return (
+    <section>
+      <h3 className="mb-1 text-base font-semibold">{category}</h3>
+
+      <ul className="gap flex flex-wrap gap-2">
+        {technologies.map((tech) => {
+          return (
+            <li
+              className="bg-muted/40 border-ring/20 hover:border-foreground rounded-sm border px-2 py-1.5 text-[0.85rem] transition-colors duration-150 ease-in-out"
+              key={tech}
+            >
+              {tech}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
diff --git a/src/components/sections/tech-stack.test.tsx b/src/components/sections/tech-stack.test.tsx
index 5cd57c9..3e46684 100644
--- a/src/components/sections/tech-stack.test.tsx
+++ b/src/components/sections/tech-stack.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { FRONTEND, BACKEND, DEVOPS } from './tech-stack';
+import { frontend, backend, devOps } from '@/data/tech-stack';
 import TechStack from './tech-stack';
 
 describe('Tech Stack section', () => {
@@ -26,7 +26,12 @@ describe('Tech Stack section', () => {
   test('renders every tech in each category', () => {
     render(<TechStack />);
     const techLists = screen.getAllByRole('listitem');
-    const totalTech = FRONTEND.length + BACKEND.length + DEVOPS.length;
+    const totalTech = frontend.length + backend.length + devOps.length;
     expect(techLists.length).toBe(totalTech);
   });
+  test('renders view all link', () => {
+    render(<TechStack />);
+    const viewAllLink = screen.getByRole('link', { name: /view all/i });
+    expect(viewAllLink).toBeInTheDocument();
+  });
 });
diff --git a/src/components/sections/tech-stack.tsx b/src/components/sections/tech-stack.tsx
index bb32382..53b0a51 100644
--- a/src/components/sections/tech-stack.tsx
+++ b/src/components/sections/tech-stack.tsx
@@ -1,68 +1,17 @@
-export const FRONTEND: string[] = [
-  'JavaScript',
-  'TypeScript',
-  'React',
-  'Next.js',
-  'Tailwind CSS',
-];
-export const BACKEND: string[] = ['Node.js', 'Express.js', 'PostgreSQL'];
-export const DEVOPS: string[] = ['GitHub Actions', 'Docker'];
+import { backend, devOps, frontend } from '@/data/tech-stack';
+import ViewAllLink from '../ui/view-all-link';
+import TechList from './tech-list';
 
 const TechStack = () => {
   return (
     <section className="border-border/40 bg-card flex flex-col gap-3 rounded-lg border p-4 transition-colors duration-150 ease-in-out">
-      <h2 className="text-lg font-bold">Tech Stack</h2>
-
-      <section>
-        <h3 className="mb-1 text-base font-semibold">Frontend</h3>
-
-        <ul className="gap flex flex-wrap gap-x-2 gap-y-1">
-          {FRONTEND.map((tech) => {
-            return (
-              <li
-                className="bg-muted/40 border-ring/20 rounded-sm border px-2 py-1.5 text-[0.85rem]"
-                key={tech}
-              >
-                {tech}
-              </li>
-            );
-          })}
-        </ul>
-      </section>
-
-      <section>
-        <h3 className="mb-1 text-base font-semibold">Backend</h3>
-
-        <ul className="gap flex flex-wrap gap-x-2 gap-y-1">
-          {BACKEND.map((tech) => {
-            return (
-              <li
-                className="bg-muted/40 border-ring/20 rounded-sm border px-2 py-1 text-[0.85rem]"
-                key={tech}
-              >
-                {tech}
-              </li>
-            );
-          })}
-        </ul>
-      </section>
-
-      <section>
-        <h3 className="mb-1 text-base font-semibold">DevOps</h3>
-
-        <ul className="gap flex flex-wrap gap-x-2 gap-y-1">
-          {DEVOPS.map((tech) => {
-            return (
-              <li
-                className="bg-muted/40 border-ring/20 rounded-sm border px-2 py-1 text-[0.85rem]"
-                key={tech}
-              >
-                {tech}
-              </li>
-            );
-          })}
-        </ul>
-      </section>
+      <header className="flex items-center justify-between">
+        <h2 className="text-lg font-bold">Tech Stack</h2>
+        <ViewAllLink href="/tech-stack" />
+      </header>
+      <TechList category="Frontend" technologies={frontend} />
+      <TechList category="Backend" technologies={backend} />
+      <TechList category="DevOps" technologies={devOps} />
     </section>
   );
 };
diff --git a/src/components/ui/view-all-link.tsx b/src/components/ui/view-all-link.tsx
index c022c4e..cfda1e7 100644
--- a/src/components/ui/view-all-link.tsx
+++ b/src/components/ui/view-all-link.tsx
@@ -8,10 +8,10 @@ type ViewAllLinkProps = {
 const ViewAllLink = ({ href }: ViewAllLinkProps) => {
   return (
     <Link
-      className="group focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-[1rem] font-normal outline-2 outline-offset-4 outline-transparent transition-all duration-150 ease-in-out"
+      className="group focus-visible:outline-muted-foreground flex items-center gap-1 rounded-sm text-[1rem] font-normal outline-2 outline-offset-6 outline-transparent focus-visible:transition-colors focus-visible:duration-150 focus-visible:ease-in-out"
       href={href}
     >
-      <span className="max-w-0 overflow-hidden text-[0.75rem] whitespace-nowrap underline-offset-4 opacity-0 transition-all duration-150 group-hover:max-w-xs group-hover:underline group-hover:opacity-100 group-focus:max-w-xs group-focus:opacity-100">
+      <span className="max-w-0 overflow-hidden text-[0.75rem] whitespace-nowrap underline-offset-4 opacity-0 group-hover:max-w-xs group-hover:underline group-hover:opacity-100 group-focus:max-w-xs group-focus:opacity-100">
         View all
       </span>
       <span className="group-hover:hidden group-focus:hidden">
diff --git a/src/data/experiences.test.ts b/src/data/experiences.test.ts
index 159aa35..2175fc5 100644
--- a/src/data/experiences.test.ts
+++ b/src/data/experiences.test.ts
@@ -1,4 +1,4 @@
-import { workExperiences, certificates } from './experiences';
+import { workExperiences, CERTIFICATES } from './experiences';
 import { isNotEmpty, isValidUrl } from '@/tests/utils';
 
 describe('Work Experiences and Certificates data', () => {
@@ -11,15 +11,15 @@ describe('Work Experiences and Certificates data', () => {
     expect(isNotEmpty(companyNames)).toBe(true);
   });
   test('every certificate has a non-empty title', () => {
-    const titles = certificates.map(({ title }) => title);
+    const titles = CERTIFICATES.map(({ title }) => title);
     expect(isNotEmpty(titles)).toBe(true);
   });
   test('every certificate has a non-empty institution', () => {
-    const institutions = certificates.map(({ institution }) => institution);
+    const institutions = CERTIFICATES.map(({ institution }) => institution);
     expect(isNotEmpty(institutions)).toBe(true);
   });
   test('every certificate uses a valid HTTPS URL', () => {
-    const urls = certificates.map(({ urlLink }) => urlLink);
+    const urls = CERTIFICATES.map(({ urlLink }) => urlLink);
     expect(isValidUrl(urls)).toBe(true);
   });
 });
diff --git a/src/data/experiences.ts b/src/data/experiences.ts
index 4849326..d30c58a 100644
--- a/src/data/experiences.ts
+++ b/src/data/experiences.ts
@@ -19,14 +19,14 @@ export const workExperiences: WorkExperience[] = [
   },
 ];
 
-export const certificates: Certificate[] = [
+export const CERTIFICATES: Certificate[] = [
   {
-    id: 3,
-    title: 'Relational Databases',
+    id: 1,
+    title: 'Responsive Web Design',
     institution: 'freeCodeCamp',
-    dateReceived: 'May 2026',
+    dateReceived: 'Dec 2025',
     urlLink:
-      'https://www.freecodecamp.org/certification/codingwithjiro/relational-databases-v9',
+      'https://www.freecodecamp.org/certification/codingwithjiro/responsive-web-design-v9',
   },
   {
     id: 2,
@@ -37,11 +37,21 @@ export const certificates: Certificate[] = [
       'https://www.freecodecamp.org/certification/codingwithjiro/javascript-v9',
   },
   {
-    id: 1,
-    title: 'Responsive Web Design',
+    id: 3,
+    title: 'Relational Databases',
     institution: 'freeCodeCamp',
-    dateReceived: 'Dec 2025',
+    dateReceived: 'May 2026',
     urlLink:
-      'https://www.freecodecamp.org/certification/codingwithjiro/responsive-web-design-v9',
+      'https://www.freecodecamp.org/certification/codingwithjiro/relational-databases-v9',
+  },
+  {
+    id: 4,
+    title: 'Front-End Libraries',
+    institution: 'freeCodeCamp',
+    dateReceived: 'September 2026',
+    urlLink:
+      'https://www.freecodecamp.org/certification/codingwithjiro/front-end-development-libraries-v9',
   },
 ];
+
+export const certificates: Certificate[] = CERTIFICATES.slice(-3).reverse();
diff --git a/src/data/tech-stack.ts b/src/data/tech-stack.ts
new file mode 100644
index 0000000..abb6e8b
--- /dev/null
+++ b/src/data/tech-stack.ts
@@ -0,0 +1,65 @@
+export const FRONTEND: string[] = [
+  'JavaScript',
+  'TypeScript',
+  'React',
+  'Next.js',
+  'Tailwind CSS',
+  'React Router',
+  'Styled Components',
+  'HTML',
+  'CSS',
+  'Vite',
+  'Responsive Web Design',
+];
+export const BACKEND: string[] = ['Node.js', 'Express.js', 'PostgreSQL'];
+export const TESTING_AND_QUALITY: string[] = [
+  'Vitest',
+  'React Testing Library',
+  'MSW',
+  'Playwright',
+  'Axe DevTools',
+  'Lighthouse',
+  'ESLint',
+  'Prettier',
+];
+export const DEVOPS: string[] = ['GitHub Actions', 'Docker'];
+export const CONTENT: string[] = ['MDX', 'Tailwind CSS Typography'];
+export const TOOLS: string[] = [
+  'Git',
+  'GitHub',
+  'VS Code',
+  'Slack',
+  'Discord',
+  'Teams',
+];
+
+export const frontend = FRONTEND.slice(0, 5);
+export const backend = BACKEND.slice(0, 5);
+export const devOps = DEVOPS.slice(0, 5);
+
+export const TECH_STACK = [
+  {
+    category: 'Frontend',
+    technologies: FRONTEND,
+  },
+  {
+    category: 'Backend',
+    technologies: BACKEND,
+  },
+  {
+    category: 'DevOps',
+    technologies: DEVOPS,
+  },
+  {
+    category: 'Testing & Quality',
+    technologies: TESTING_AND_QUALITY,
+  },
+  {
+    category: 'Content',
+    technologies: CONTENT,
+  },
+  {
+    category: 'Tools',
+    technologies: TOOLS,
+  },
+];
diff --git a/tests/home.spec.ts b/tests/home.spec.ts
index 5d56289..66ce08b 100644
--- a/tests/home.spec.ts
+++ b/tests/home.spec.ts
@@ -6,3 +6,10 @@ test('visitor can open the portfolio homepage', async ({ page }) => {
     page.getByRole('heading', { name: /elmar chavez/i }),
   ).toBeVisible();
 });
+test('visitor sees a 404 Page not found when going to an unknown page', async ({
+  page,
+}) => {
+  await page.goto('/non-existent-page');
+  const heading = page.getByRole('heading', { name: /^page not found$/i });
+  await expect(heading).toBeVisible();
+});
diff --git a/tests/keyboard.spec.ts b/tests/keyboard.spec.ts
index dce755f..7ce088d 100644
--- a/tests/keyboard.spec.ts
+++ b/tests/keyboard.spec.ts
@@ -92,7 +92,7 @@ test.describe('Keyboard Accessibility', () => {
     const blog = blogList[0];
     const link = page.getByRole('link', { name: blog.title });
     await tabUntilFocused(page, link, blog.title);
-    expect(link).toBeFocused();
+    await expect(link).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(page).toHaveURL(blog.blogUrl);
   });
@@ -107,10 +107,52 @@ test.describe('Keyboard Accessibility', () => {
     const certificate = certificates[0];
     const link = page.getByRole('link', { name: certificate.title });
     await tabUntilFocused(page, link, certificate.title);
-    expect(link).toBeFocused();
+    await expect(link).toBeFocused();
     const newPagePromise = page.waitForEvent('popup');
     await page.keyboard.press('Enter');
     const newPage = await newPagePromise;
     await expect(newPage).toHaveURL(certificate.urlLink);
   });
+  test('visitor can tab to the Tech Stack view all link and open the Tech Stack page', async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(
+      browserName === 'webkit',
+      'WebKit on Windows does not traverse focus order correctly.',
+    );
+    const viewAllLink = page.locator('a[href="/tech-stack"]');
+    await tabUntilFocused(page, viewAllLink, 'View all link');
+    await expect(viewAllLink).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page).toHaveURL('/tech-stack');
+  });
+  test('visitor can tab to the Projects view all link and open the Projects page', async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(
+      browserName === 'webkit',
+      'WebKit on Windows does not traverse focus order correctly.',
+    );
+    const viewAllLink = page.locator('a[href="/projects"]');
+    await tabUntilFocused(page, viewAllLink, 'View all link');
+    await expect(viewAllLink).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page).toHaveURL('/projects');
+  });
+  test('visitor can tab to the Blog view all link and open the Blog page', async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(
+      browserName === 'webkit',
+      'WebKit on Windows does not traverse focus order correctly.',
+    );
+    const viewAllLink = page.locator('a[href="/blog"]');
+    await tabUntilFocused(page, viewAllLink, 'View all link');
+    await expect(viewAllLink).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page).toHaveURL('/blog');
+  });
 });
diff --git a/tests/tech-stack.spec.ts b/tests/tech-stack.spec.ts
new file mode 100644
index 0000000..55f6754
--- /dev/null
+++ b/tests/tech-stack.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tech Stack', () => {
+  test('visitor can see the Tech Stack section', async ({ page }) => {
+    await page.goto('/');
+    const heading = page.getByRole('heading', { name: /^tech stack$/i });
+    await expect(heading).toBeVisible();
+  });
+  test('visitor can view the Tech Stack page', async ({ page }) => {
+    await page.goto('/');
+    const viewAllLink = page.locator('a[href="/tech-stack"]');
+    await viewAllLink.click();
+    await expect(page).toHaveURL('/tech-stack');
+    const heading = page.getByRole('heading', { name: /^tech stack$/i });
+    await expect(heading).toBeVisible();
+  });
+});