From dc6233cf4a466fe2ee4701cd5d1447c8007f0a6e Mon Sep 17 00:00:00 2001
From: Zachary Proser <zackproser@gmail.com>
Date: Thu, 1 Feb 2024 20:43:54 -0500
Subject: [PATCH] Replace homepage with about page. Add permanent redirect

---
 next.config.mjs              |  11 ++-
 src/app/{about => }/page.jsx |   0
 src/app/page.tsx             | 157 -----------------------------------
 src/components/Footer.tsx    |   2 +-
 src/components/Header.tsx    |   4 +-
 5 files changed, 13 insertions(+), 161 deletions(-)
 rename src/app/{about => }/page.jsx (100%)
 delete mode 100644 src/app/page.tsx

diff --git a/next.config.mjs b/next.config.mjs
index 59866542..bf941391 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -15,7 +15,16 @@ const nextConfig = {
       'zackproser.com',
       'www.zackproser.com'
     ],
-  }
+  },
+  async redirects() {
+    return [
+      {
+        source: '/about',
+        destination: '/',
+        permanent: true,
+      },
+    ]
+  },
 }
 
 const withMDX = nextMDX({
diff --git a/src/app/about/page.jsx b/src/app/page.jsx
similarity index 100%
rename from src/app/about/page.jsx
rename to src/app/page.jsx
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index 2fbb7cc5..00000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import clsx from 'clsx'
-
-import { Container } from '@/components/Container'
-
-import { BlogPostCard } from '@/components/BlogPostCard'
-import { Newsletter } from '@/components/Newsletter'
-import CV from '@/components/CV'
-
-import {
-  GitHubIcon,
-  InstagramIcon,
-  LinkedInIcon,
-  TwitterIcon,
-} from '@/components/SocialIcons'
-import wikka from '@/images/photos/wikka.webp'
-import canyonRunnerImg from '@/images/canyonrunner-screens/CanyonRunner-Title-Screen.webp'
-import optimizerBlogImg from '@/images/optimizer-blog.webp'
-import terraformAssocImg from '@/images/terraform-associate.webp'
-import teaTutorImg from '@/images/teatutor-logo.webp'
-import { getAllArticles } from '@/lib/articles'
-// Instead of needing to constantly update my static site, do the calculation of years that I've been working in tech in JS
-import RenderNumYearsExperience from '@/components/NumYearsExperience'
-
-import { generateOgUrl } from '@/utils/ogUrl'
-
-const data = {
-  title: 'Homepage',
-  description: 'Full-stack open-source hacker, technical writer and developer advocate.',
-};
-
-const ogUrl = generateOgUrl(data);
-
-export const metadata = {
-  openGraph: {
-    title: data.title,
-    description: data.description,
-    url: ogUrl,
-    siteName: 'Zack Proser&apos;s portfolio',
-    images: [
-      {
-        url: ogUrl,
-      }
-    ],
-    locale: 'en_US',
-    type: 'website',
-  },
-};
-
-
-
-function SocialLink({
-  icon: Icon,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof Link> & {
-  icon: React.ComponentType<{ className?: string }>
-}) {
-  return (
-    <Link className="group -m-1 p-1" {...props}>
-      <Icon className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300" />
-    </Link>
-  )
-}
-
-function Photos() {
-  const images = [wikka, optimizerBlogImg, canyonRunnerImg, teaTutorImg, terraformAssocImg]
-  let rotations = ['rotate-2', '-rotate-2', 'rotate-2', 'rotate-2', '-rotate-2']
-
-  return (
-    <div className="mt-16 sm:mt-20">
-      <div className="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
-        {images.map((image, imageIndex) => (
-          <div
-            key={image.src}
-            className={clsx(
-              'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl',
-              rotations[imageIndex % rotations.length],
-            )}
-          >
-            <Image
-              src={image}
-              alt=""
-              sizes="(min-width: 640px) 18rem, 11rem"
-              className="absolute inset-0 h-full w-full object-cover"
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default async function Home() {
-  let articles = (await getAllArticles()).slice(0, 10)
-
-  return (
-    <>
-      <Container className="mt-9">
-        <div className="max-w-2xl">
-          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
-            Let&apos;s level up!
-          </h1>
-          <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
-            I acquire and share knowledge. I <Link href={"https://github.com/zackproser"} className="text-green-500 font-extrabold"> open-source </Link>the majority of my work. You can <Link href={"/about"} className="text-green-500 font-extrabold"> read more about me here</Link>.
-          </p>
-          <Newsletter />
-          <div className="mt-6 flex gap-6">
-            <SocialLink
-              href="https://twitter.com"
-              aria-label="Follow on Twitter"
-              icon={TwitterIcon}
-            />
-            <SocialLink
-              href="https://instagram.com"
-              aria-label="Follow on Instagram"
-              icon={InstagramIcon}
-            />
-            <SocialLink
-              href="https://github.com"
-              aria-label="Follow on GitHub"
-              icon={GitHubIcon}
-            />
-            <SocialLink
-              href="https://linkedin.com"
-              aria-label="Follow on LinkedIn"
-              icon={LinkedInIcon}
-            />
-          </div>
-        </div>
-      </Container>
-      <Photos />
-      <Container className="mt-9">
-        <div className="max-w-2xl">
-          <p className="mt-6  text-base text-zinc-600 dark:text-zinc-400">
-            On this site, I share open-source software, terminal tricks, demo videos, software career advice, advanced command line techniques and hotkeys, and
-            I blog about things I&apos;ve learned the hard way while working in the industry for {RenderNumYearsExperience()} years.
-          </p>
-          <Newsletter />
-        </div>
-      </Container>
-      <Container className="mt-24 md:mt-28">
-        <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
-          <div className="flex flex-col gap-16">
-            {articles.map((article) => (
-              <BlogPostCard key={article.slug} article={article} />
-            ))}
-          </div>
-          <div className="space-y-10 lg:pl-16 xl:pl-24">
-            <Newsletter />
-            <CV />
-          </div>
-        </div>
-      </Container>
-    </>
-  )
-}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b505bfc4..0c92b748 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -28,7 +28,6 @@ export function Footer() {
             <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
               <div className="flex flex-col sm:flex-row gap-6 text-xl font-medium text-zinc-800 dark:text-zinc-200">
                 <div className="flex flex-col md:flex-row gap-2 md:gap-6">
-                  <NavLink href="/about">About</NavLink>
                   <NavLink href="/blog">Blog</NavLink>
                   <NavLink href="/videos">Videos</NavLink>
                 </div>
@@ -36,6 +35,7 @@ export function Footer() {
                   <NavLink href="/projects">Projects</NavLink>
                   <NavLink href="/testimonials">Testimonials</NavLink>
                   <NavLink href="/contact">Contact</NavLink>
+                  <NavLink href="https://changelog.zackproser.com">Changelog</NavLink>
                 </div>
               </div>
               <p className="text-sm text-zinc-400 dark:text-zinc-500">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c000cdcb..9772f62c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -133,13 +133,13 @@ function MobileNavigation(
             </div>
             <nav className="mt-6">
               <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
-                <MobileNavItem href="/about">About</MobileNavItem>
                 <MobileNavItem href="/blog">Blog</MobileNavItem>
                 <MobileNavItem href="/videos">Videos</MobileNavItem>
                 <MobileNavItem href="/projects">Projects</MobileNavItem>
                 <MobileNavItem href="/testimonials">Testimonials</MobileNavItem>
                 <MobileNavItem href="/contact">Contact</MobileNavItem>
                 <SparkleNavItem href="/learn" title="Learn">Learn</SparkleNavItem>
+                <MobileNavItem href="https://changelog.zackproser.com">Changelog</MobileNavItem>
               </ul>
             </nav>
           </Popover.Panel>
@@ -182,13 +182,13 @@ function DesktopNavigation(props: React.ComponentPropsWithoutRef<'nav'>) {
   return (
     <nav {...props}>
       <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
-        <NavItem href="/about">About</NavItem>
         <NavItem href="/blog">Blog</NavItem>
         <NavItem href="/videos">Videos</NavItem>
         <NavItem href="/projects">Projects</NavItem>
         <NavItem href="/testimonials">Testimonials</NavItem>
         <NavItem href="/contact">Contact</NavItem>
         <SparkleNavItem href="/learn" title="Learn">Learn</SparkleNavItem>
+        <NavItem href="https://changelog.zackproser.com">Changelog</NavItem>
       </ul>
     </nav>
   )