data/headerNavLinks.js

@@ -1,6 +1,7 @@
 const headerNavLinks = [
   { href: '/blog', title: 'Blog' },
   { href: '/tags', title: 'Tags' },
+  { href: '/projects', title: 'Projects' },
   { href: '/about', title: 'About' },
 ]
 

data/projectsData.js

@@ -0,0 +1,20 @@
+const projectsData = [
+  {
+    title: 'A Search Engine',
+    description: `What is you could look up any information in the world? Webpages, images, videos
+    and more. Google has many features to help you find exactly what you're looking
+    for.`,
+    imgSrc: '/static/images/google.png',
+    href: 'https://www.google.com',
+  },
+  {
+    title: 'The Time Machine',
+    description: `Imagine being able to travel back in time or to the future. Simple turn the knob
+    to the desired date and press "Go". No more worrying about lost keys or
+    forgotten handphones with this simple yet affordable solution.`,
+    imgSrc: '/static/images/time-machine.jpg',
+    href: '/blog/the-time-machine',
+  },
+]
+
+export default projectsData

pages/projects.js

@@ -0,0 +1,59 @@
+import Image from 'next/image'
+import siteMetadata from '@/data/siteMetadata'
+import projectsData from '@/data/projectsData'
+import Link from '@/components/Link'
+import { PageSeo } from '@/components/SEO'
+
+export default function Projects() {
+  return (
+    <>
+      <PageSeo
+        title={`Projects - ${siteMetadata.author}`}
+        description={siteMetadata.description}
+        url={`${siteMetadata.siteUrl}/projects`}
+      />
+      <div className="divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="pt-6 pb-8 space-y-2 md:space-y-5">
+          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
+            Projects
+          </h1>
+          <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
+            Showcase your projects with a hero image (16 x 9)
+          </p>
+        </div>
+        <div className="container py-12">
+          <div className="flex flex-wrap -m-4">
+            {projectsData.map((d) => (
+              <div className="p-4 md:w-1/2" key={d.title}>
+                <div className="h-full border-2 border-gray-200 border-opacity-60 dark:border-gray-700 rounded-md overflow-hidden">
+                  <Image
+                    alt={d.title}
+                    src={d.imgSrc}
+                    className="lg:h-48 md:h-36 object-cover object-center"
+                    width={721}
+                    height={401}
+                  />
+                  <div className="p-6">
+                    <h2 className="text-2xl font-bold leading-8 tracking-tight mb-3">{d.title}</h2>
+                    <p className="prose text-gray-500 max-w-none dark:text-gray-400 mb-3">
+                      {d.description}
+                    </p>
+                    <div className="text-base font-medium leading-6">
+                      <Link
+                        href={d.href}
+                        className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
+                        aria-label={`Link to ${d.title}`}
+                      >
+                        Learn more &rarr;
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}