feat: add dedicated tech stack page and polish site UX

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,15 +81,15 @@ 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>
         </Link>
 
         <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} />

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>
 

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>
+  );
+}

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,15 +141,15 @@ 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>
         </Link>
 
         <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>

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>
+  );
+}

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>
   );
 };
 

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

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}`}
                     >

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>

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,15 +37,15 @@ 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"
                     aria-label={`Open ${title} certificate`}
                   >
                     {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]">