feat: build the projects page feature

src/app/blog/[slug]/page.tsx

@@ -3,7 +3,7 @@ import { BreadcrumbItem } from '@/types/breadcrumb-item';
 import ArticleHeader from '@/components/sections/article-header';
 import Footer from '@/components/sections/footer';
 import Link from 'next/link';
-import { ArrowRight } from 'lucide-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
 
 type ArticlePageProps = {
   params: Promise<{ slug: string }>;
@@ -45,10 +45,18 @@ export default async function ArticlePage({ params }: ArticlePageProps) {
         <Article />
       </article>
 
-      <div className="flex justify-end">
+      <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]"
+        >
+          <ArrowLeft aria-hidden="true" size={16} />
+          <span>Back to homepage</span>
+        </Link>
+
         <Link
           href="/blog"
-          className="focus-visible:outline-muted-foreground flex w-fit items-center gap-1 rounded-sm text-[0.875rem] font-normal underline-offset-4 outline-2 outline-offset-4 outline-transparent transition-colors duration-150 ease-in-out hover:underline md:text-right"
+          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]"
         >
           <span>Read more articles</span>
           <ArrowRight aria-hidden="true" size={16} />

src/app/blog/page.tsx

@@ -35,7 +35,10 @@ const blogsLatestOrder = BLOGS.slice().reverse();
 
 export default function BlogPage() {
   return (
-    <main id="main" className="mx-auto max-w-130 px-4 py-8 md:max-w-2xl">
+    <main
+      id="main"
+      className="mx-auto min-h-screen max-w-130 px-4 py-8 md:max-w-2xl"
+    >
       <header className="mb-8 flex items-center justify-between">
         <Breadcrumb items={[]} currentLabel="Blog" />
         <ThemeToggle />

src/app/globals.css

@@ -64,7 +64,7 @@
   --accent: oklch(0.58 0.1 240);
   --accent-foreground: oklch(1 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.85 0.02 255);
+  --border: oklch(30% 0.00002 271.152 / 0.6);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
   --chart-1: oklch(0.87 0 0);

src/app/projects/page.tsx

@@ -0,0 +1,159 @@
+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 { PROJECTS } from '@/data/project-list';
+import Image from 'next/image';
+import Link from 'next/link';
+import { FaGithub } from 'react-icons/fa';
+import { ArrowLeft, ArrowRight, Globe } from 'lucide-react';
+
+const metaDescription =
+  'List of built projects by Elmar Chavez as a full stack developer.';
+
+export const metadata: Metadata = {
+  title: 'Elmar Chavez | Projects',
+  description: metaDescription,
+  keywords: [
+    'Elmar Chavez Projects',
+    'Web Development Projects',
+    'GitHub Repos',
+    'Web Applications',
+    'Software Engineering Projects',
+  ],
+  openGraph: {
+    title: 'Projects | Elmar Chavez',
+    description: metaDescription,
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Projects | Elmar Chavez',
+    description: metaDescription,
+  },
+};
+
+export default function ProjectsPage() {
+  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="Projects" />
+        <ThemeToggle />
+      </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">
+          Things I built and worked on.
+        </p>
+      </section>
+
+      <ul className="mb-8 grid grid-cols-1 gap-y-3 min-[520px]:grid-cols-2 min-[520px]:gap-x-3 md:grid-cols-3">
+        {PROJECTS.map(
+          ({
+            id,
+            title,
+            description,
+            imgUrl,
+            imgUrlDark,
+            siteUrl,
+            githubUrl,
+            technologies,
+          }) => {
+            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"
+                key={id}
+              >
+                <div className="relative mb-4 aspect-video max-w-60 shrink-0 overflow-hidden min-[850px]:max-w-70">
+                  <Image
+                    className="border-ring/20 mb-2 h-full w-full rounded-lg border object-cover dark:hidden"
+                    src={imgUrl}
+                    alt=""
+                    width={1440}
+                    height={960}
+                    loading="eager"
+                  />
+                  <Image
+                    className="border-ring/20 mb-2 hidden h-full w-full rounded-lg border object-cover dark:block"
+                    src={imgUrlDark}
+                    alt={`${title} project preview.`}
+                    width={1440}
+                    height={960}
+                    loading="eager"
+                  />
+
+                  <ul className="absolute right-1 bottom-1 flex gap-1 text-[0.50rem] font-light">
+                    {technologies.map((technology) => {
+                      return (
+                        <li
+                          key={technology}
+                          className="bg-background/90 border-border/30 rounded-sm border px-1 py-0.5 text-center"
+                        >
+                          {technology}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+
+                <section className="flex h-full flex-col justify-between">
+                  <header className="mb-4 px-4">
+                    <h2 className="mb-2 text-[0.875rem] font-semibold">
+                      {title}
+                    </h2>
+                    <p className="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"
+                      aria-label={`Go to ${title}'s GitHub repository.`}
+                    >
+                      <FaGithub size={12} />
+                      <span>GitHub</span>
+                    </Link>
+                    <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"
+                      aria-label={`Go to ${title}'s live website.`}
+                    >
+                      <Globe size={12} />
+                      <span>Website</span>
+                    </Link>
+                  </div>
+                </section>
+              </li>
+            );
+          },
+        )}
+      </ul>
+
+      <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]"
+        >
+          <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]"
+          target="_blank"
+        >
+          <span>View all projects</span>
+          <ArrowRight aria-hidden="true" size={16} />
+        </Link>
+      </div>
+
+      <Footer />
+    </main>
+  );
+}

src/components/sections/blog.tsx

@@ -30,6 +30,16 @@ 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">
+                  <Image
+                    src={imgUrl}
+                    alt={imgAlt}
+                    width={800}
+                    height={400}
+                    className="aspect-video w-full object-cover"
+                  />
+                </div>
+
                 <article>
                   <h3 className="mb-2 text-[0.875rem] font-semibold">
                     {title}
@@ -60,16 +70,6 @@ const Blog = () => {
                     </Link>
                   </div>
                 </article>
-
-                <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">
-                  <Image
-                    src={imgUrl}
-                    alt={imgAlt}
-                    width={800}
-                    height={400}
-                    className="aspect-video w-full object-cover"
-                  />
-                </div>
               </li>
             );
           },

src/components/sections/hero.tsx

@@ -5,14 +5,16 @@ import { socialLinks } from '@/data/social-links';
 const Hero = () => {
   return (
     <header className="mb-6 flex flex-row items-center gap-2 md:gap-4">
-      <Image
-        src="/img/profile-picture_600x600.jpg"
-        alt="Elmar Chavez - Full Stack Developer"
-        className="border-ring/20 h-25 w-25 rounded-lg border md:h-40 md:w-40"
-        width={600}
-        height={600}
-        loading="eager"
-      />
+      <div className="border-ring/20 w-25 shrink-0 overflow-hidden rounded-lg border md:w-30">
+        <Image
+          src="/img/author-profile_683x771.png"
+          alt="Elmar Chavez - Full Stack Developer"
+          className="aspect-square w-full scale-105 object-cover"
+          width={600}
+          height={600}
+          loading="eager"
+        />
+      </div>
 
       <section className="flex w-full flex-row justify-between">
         <div>

src/components/sections/projects.test.tsx

@@ -15,7 +15,14 @@ describe('Projects section', () => {
   });
   test('renders every project link', () => {
     render(<Projects />);
-    const projectLinks = screen.getAllByRole('link');
+    const projectLinks = screen.getAllByRole('link', {
+      name: /^go to project/i,
+    });
     expect(projectLinks).toHaveLength(projectList.length);
   });
+  test('renders view all link', () => {
+    render(<Projects />);
+    const viewAllLink = screen.getByRole('link', { name: /view all/i });
+    expect(viewAllLink).toBeInTheDocument();
+  });
 });

src/components/sections/projects.tsx

@@ -1,10 +1,14 @@
 import Image from 'next/image';
 import { projectList } from '@/data/project-list';
+import ViewAllLink from '../ui/view-all-link';
 
 const Projects = () => {
   return (
     <section className="border-border/40 bg-card flex w-full flex-col gap-3 rounded-lg border p-4 transition-colors duration-150 ease-in-out">
-      <h2 className="text-lg font-bold">Projects</h2>
+      <header className="flex items-center justify-between">
+        <h2 className="text-lg font-bold">Projects</h2>
+        <ViewAllLink href="/projects" />
+      </header>
 
       <ul className="grid grid-cols-1 gap-y-3 min-[488px]:grid-cols-2">
         {projectList.map(
@@ -38,6 +42,7 @@ const Projects = () => {
                     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>

src/data/project-list.test.ts

@@ -1,23 +1,33 @@
-import { projectList } from './project-list';
+import { PROJECTS } from './project-list';
 import { isNotEmpty, isValidUrl } from '@/tests/utils';
 
 describe('Project List data', () => {
   test('every project uses a valid HTTPS URL', () => {
-    const siteUrls = projectList.map(({ siteUrl }) => siteUrl);
+    const siteUrls = PROJECTS.map(({ siteUrl }) => siteUrl);
     expect(isValidUrl(siteUrls)).toBe(true);
   });
   test('every project has a non-empty image path', () => {
-    const imgUrls = projectList.map(({ imgUrl }) => imgUrl);
-    const imgUrlsDark = projectList.map(({ imgUrlDark }) => imgUrlDark);
+    const imgUrls = PROJECTS.map(({ imgUrl }) => imgUrl);
+    const imgUrlsDark = PROJECTS.map(({ imgUrlDark }) => imgUrlDark);
     const allImgUrls = [...imgUrls, ...imgUrlsDark];
     expect(isNotEmpty(allImgUrls)).toBe(true);
   });
   test('every project has a non-empty title', () => {
-    const titles = projectList.map(({ title }) => title);
+    const titles = PROJECTS.map(({ title }) => title);
     expect(isNotEmpty(titles)).toBe(true);
   });
   test('every project has a non-empty description', () => {
-    const descriptions = projectList.map(({ description }) => description);
+    const descriptions = PROJECTS.map(({ description }) => description);
     expect(isNotEmpty(descriptions)).toBe(true);
   });
+  test('every project has a valid GitHub URL', () => {
+    const githubUrls = PROJECTS.map(({ githubUrl }) => githubUrl);
+    expect(isValidUrl(githubUrls)).toBe(true);
+  });
+  test('every project has at least three technologies', () => {
+    const technologies = PROJECTS.map(({ technologies }) => technologies);
+    expect(technologies.every((technology) => technology.length >= 3)).toBe(
+      true,
+    );
+  });
 });