feat: add Experience and Certificates pages

package.json

@@ -35,7 +35,8 @@
     "react-icons": "^5.6.0",
     "shadcn": "^4.6.0",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "yet-another-react-lightbox": "^3.32.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.61.1",
@@ -58,4 +59,4 @@
     "typescript": "^5",
     "vitest": "^4.1.5"
   }
-}
+}

src/app/certificates/page.tsx

@@ -0,0 +1,83 @@
+import Breadcrumb from '@/components/sections/breadcrumb';
+import ThemeToggle from '@/components/theme/theme-toggle';
+import Footer from '@/components/sections/footer';
+import CertificateImage from '@/components/ui/certificate-image';
+import { CERTIFICATES } from '@/data/experiences';
+import { FiExternalLink } from 'react-icons/fi';
+import Link from 'next/link';
+
+export default function ExperiencePage() {
+  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="Certificates" />
+        <ThemeToggle />
+      </header>
+
+      <section className="mb-8">
+        <h1 className="mb-1 text-lg font-bold md:text-3xl">Certificates</h1>
+        <h2 className="mb-6 text-sm font-medium md:text-base">
+          List of all my professional certifications to date.
+        </h2>
+      </section>
+
+      <ul className="grid grid-cols-1 gap-x-3 gap-y-3 min-[520px]:grid-cols-2 md:grid-cols-3 md:gap-y-6">
+        {CERTIFICATES.map(
+          ({
+            id,
+            title,
+            institution,
+            dateReceived,
+            urlLink,
+            imgUrl,
+            description,
+          }) => {
+            return (
+              <li
+                className="border-ring/80 focus-within:border-foreground has-hover:border-foreground bg-background text-foreground mx-auto flex max-w-57.5 flex-col rounded-lg border p-2 transition-colors duration-150 ease-in-out md:max-w-65"
+                key={id}
+              >
+                <CertificateImage
+                  src={imgUrl}
+                  title={title}
+                  alt={`Elmar Chavez's certificate for ${title}.`}
+                />
+
+                <Link
+                  className="group mb-1 flex items-center gap-1 outline-0"
+                  href={urlLink}
+                  target="_blank"
+                  aria-label={`See Elmar Chavez's ${title} certificate in new tab`}
+                >
+                  <h3 className="text-foreground text-sm font-semibold decoration-1 underline-offset-4 transition-colors duration-150 ease-in-out group-hover:underline group-focus-visible:underline md:text-base">
+                    {title}
+                  </h3>
+                  <FiExternalLink
+                    className="text-muted-foreground group-hover:text-foreground group-focus-visible:text-foreground relative bottom-px transition-colors duration-150 ease-in-out"
+                    size={14}
+                    aria-hidden="true"
+                  />
+                </Link>
+
+                <p className="text-foreground text-[0.75rem] transition-colors duration-150 ease-in-out md:text-sm">
+                  {institution}
+                </p>
+                <p className="text-muted-foreground mb-2 text-[0.70rem] transition-colors duration-150 ease-in-out md:text-[0.75rem]">
+                  Issued {dateReceived}
+                </p>
+                <p className="text-muted-foreground mb-2 text-[0.70rem] transition-colors duration-150 ease-in-out md:text-[0.75rem]">
+                  {description}
+                </p>
+              </li>
+            );
+          },
+        )}
+      </ul>
+
+      <Footer />
+    </main>
+  );
+}

src/app/experience/page.tsx

@@ -0,0 +1,90 @@
+import Breadcrumb from '@/components/sections/breadcrumb';
+import Footer from '@/components/sections/footer';
+import ThemeToggle from '@/components/theme/theme-toggle';
+import { WORK_EXPERIENCES } from '@/data/experiences';
+import Link from 'next/link';
+import { FiExternalLink } from 'react-icons/fi';
+
+export default function ExperiencePage() {
+  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="Experience" />
+        <ThemeToggle />
+      </header>
+
+      <section className="mb-8">
+        <h1 className="mb-1 text-lg font-bold md:text-3xl">Experience</h1>
+        <h2 className="mb-6 text-sm font-medium md:text-base">
+          My professional experience as a software engineer.
+        </h2>
+      </section>
+
+      <ul className="before:bg-border/50 relative mx-auto flex max-w-125 flex-col gap-4 before:absolute before:top-4 before:bottom-4 before:left-1 before:w-px md:gap-8">
+        {WORK_EXPERIENCES.slice()
+          .reverse()
+          .map(
+            (
+              {
+                id,
+                startDate,
+                endDate,
+                position,
+                companyName,
+                companyUrl,
+                location,
+                responsibilities,
+              },
+              index,
+            ) => {
+              return (
+                <li className="group relative pl-5" key={id}>
+                  <span
+                    className={`border-border group-hover:bg-foreground absolute top-3 -left-1 size-4 rounded-full border-2 transition-colors duration-150 ease-in-out ${index === 0 ? 'bg-foreground' : 'bg-background'}`}
+                    aria-hidden="true"
+                  />
+
+                  <article className="border-border/40 bg-card group-hover:border-border rounded-lg border p-4 transition-colors duration-150">
+                    <h3 className="mb-2 text-base font-semibold md:text-lg">
+                      {position}
+                    </h3>
+                    <div className="mb-1 flex items-center gap-1 text-sm md:gap-2 md:text-base">
+                      <Link
+                        className="focus-visible:outline-muted-foreground text-muted-foreground hover:text-foreground flex items-center gap-0.5 rounded-lg underline-offset-4 outline-2 outline-offset-4 outline-transparent hover:underline hover:transition-colors hover:duration-150 hover:ease-in-out focus-visible:transition-colors focus-visible:duration-150 focus-visible:ease-in-out"
+                        aria-label={`Open ${companyName}'s official website to new tab.`}
+                        href={companyUrl}
+                        target="_blank"
+                      >
+                        <span className="text-foreground">{companyName}</span>
+                        <FiExternalLink className="relative bottom-0.5 size-4" />
+                      </Link>
+                      <span>·</span>
+                      <p className="text-[0.75rem] font-light md:text-sm">
+                        {location}
+                      </p>
+                    </div>
+                    <p className="text-muted-foreground mb-4 text-[0.75rem] md:text-sm">{`${startDate} - ${endDate}`}</p>
+
+                    <ul className="marker:text-muted-foreground flex list-disc flex-col gap-0 text-[0.75rem] leading-4.5 tracking-wide marker:text-base md:gap-1 md:text-sm">
+                      {responsibilities.map((responsibility) => {
+                        return (
+                          <li className="ml-4" key={responsibility}>
+                            {responsibility}
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </article>
+                </li>
+              );
+            },
+          )}
+      </ul>
+
+      <Footer />
+    </main>
+  );
+}

src/components/sections/experience.tsx

@@ -1,12 +1,16 @@
 import { FiExternalLink } from 'react-icons/fi';
 import { workExperiences, certificates } from '@/data/experiences';
+import ViewAllLink from '../ui/view-all-link';
 import Link from 'next/link';
 
 const Experience = () => {
   return (
-    <section className="border-border/40 bg-card flex shrink-0 flex-col gap-4 rounded-lg border p-4 transition-colors duration-150 ease-in-out min-[488px]:flex-row md:max-w-[clamp(16rem,-12rem+50vw,20rem)] md:flex-col md:gap-8">
-      <article>
-        <h2 className="mb-3 text-lg font-bold">Experience</h2>
+    <section className="border-border/40 bg-card flex shrink-0 flex-col gap-4 rounded-lg border p-4 transition-colors duration-150 ease-in-out min-[488px]:flex-row md:max-w-[20rem] md:flex-col md:gap-8">
+      <article className="min-w-0 flex-1">
+        <header className="mb-3 flex items-center justify-between">
+          <h2 className="text-lg font-bold">Experience</h2>
+          <ViewAllLink href="/experience" />
+        </header>
 
         <ul className="flex flex-col gap-4 md:gap-8">
           {workExperiences.map(
@@ -26,8 +30,11 @@ const Experience = () => {
         </ul>
       </article>
 
-      <article>
-        <h2 className="mb-3 text-lg font-bold">Certificates</h2>
+      <article className="min-w-0 flex-1">
+        <header className="mb-3 flex items-center justify-between">
+          <h2 className="text-lg font-bold">Certificates</h2>
+          <ViewAllLink href="/certificates" />
+        </header>
 
         <ul className="flex flex-col gap-4">
           {certificates.map(
@@ -38,13 +45,13 @@ const Experience = () => {
                   key={id}
                 >
                   <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"
+                    className="group decoration-muted-foreground mb-1 flex items-center gap-1 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" />
+                    <FiExternalLink className="group-focus-visible:text-foreground text-muted-foreground group-hover:text-foreground relative bottom-px" />
                   </Link>
                   <p className="flex flex-col text-[0.75rem]">
                     <span>{institution}</span>

src/components/ui/certificate-image.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import Image from 'next/image';
+import Lightbox from 'yet-another-react-lightbox';
+import 'yet-another-react-lightbox/styles.css';
+
+interface CertificateImageProps {
+  src: string;
+  alt: string;
+  title: string;
+}
+
+export default function CertificateImage({
+  src,
+  alt,
+  title,
+}: CertificateImageProps) {
+  const [open, setOpen] = useState(false);
+  const slides = useMemo(
+    () => [
+      {
+        src,
+        alt,
+        width: 1250,
+        height: 830,
+      },
+    ],
+    [src, alt],
+  );
+
+  const handleClick = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <button
+        className="focus-visible:outline-foreground mb-4 block w-full cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2"
+        type="button"
+        onClick={handleClick}
+        aria-label={`Enlarge and view ${title} certificate.`}
+      >
+        <Image
+          className="border-ring/20 border"
+          src={src}
+          alt={alt}
+          width={1250}
+          height={830}
+          loading="eager"
+        />
+      </button>
+
+      <Lightbox
+        open={open}
+        close={handleClose}
+        slides={slides}
+        render={{
+          buttonPrev: () => null,
+          buttonNext: () => null,
+        }}
+      />
+    </>
+  );
+}

src/data/blog-list.ts

@@ -60,7 +60,7 @@ export const BLOGS: BlogType[] = [
     description:
       'My thoughts on AI dependency and why struggling through problems is still one of the best ways to combat cognitive atrophy and become a better engineer.',
     publishDate: 'September 2026',
-    readTime: '8 min read',
+    readTime: '9 min read',
     tags: ['#ai', '#programming', '#software'],
     blogUrl: `/blog/${getSlug('The Slow and Quiet Cognitive Atrophy of a Modern Software Engineer')}`,
     imgUrl: '/img/blog-5.webp',