refactor: seo and footer icons

sgoudham · Aug 13, 2023 · 172eb9b · 172eb9b
1 parent 55c01e4
commit 172eb9b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 34 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -8,6 +8,7 @@ import {
 } from "./icons/SocialMedia";
 import Link from "next/link";
 import { Heart } from "./icons/Heart";
+import { ExternalLink } from "./icons/ExternalLink";
 
 export const Footer = () => {
   return (
@@ -33,19 +34,25 @@ const BuildInfo = () => {
       <p>
         GitHub SHA:{" "}
         <Link
-          className="hocus:underline hocus:decoration-solid hocus:decoration-blue hocus:decoration-2"
+          rel="noopener noreferrer"
+          target="_blank"
+          className="hocus:underline hocus:decoration-solid hocus:underline-offset-1"
           href={`https://github.com/sgoudham/website/commit/${process.env.NEXT_PUBLIC_BUILD_SHA}`}
         >
           {process.env.NEXT_PUBLIC_BUILD_SHA}
+          <ExternalLink />
         </Link>
       </p>
       <p>
         Build ID:{" "}
         <Link
-          className="hocus:underline hocus:decoration-solid hocus:decoration-blue hocus:decoration-2"
+          rel="noopener noreferrer"
+          target="_blank"
+          className="hocus:underline hocus:decoration-solid hocus:underline-offset-1"
           href={`https://github.com/sgoudham/website/actions/runs/${process.env.NEXT_PUBLIC_BUILD_ID}`}
         >
           {process.env.NEXT_PUBLIC_BUILD_ID}
+          <ExternalLink />
         </Link>
       </p>
       <p>Build Num: #{process.env.NEXT_PUBLIC_BUILD_NUM}</p>

diff --git a/app/components/Navigation.tsx b/app/components/Navigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { ProfilePicture } from "./images/ProfilePicture";
 import { Hamburger } from "./nav/Hamburger";
 import { Links } from "./nav/Links";
@@ -11,6 +11,7 @@ import { usePathname } from "next/navigation";
 
 export const NavBar = () => {
   const path = usePathname();
+  const focusedRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const checkPath = (href: string) => {
     if (href === path) {
@@ -26,12 +27,12 @@ export const NavBar = () => {
           <div className="hidden md:flex flex-row gap-x-4 font-bold tracking-tight">
             <Links />
           </div>
-          <div
+          <button
             className="md:hidden px-4 py-2 hover:bg-crust dark:hover:bg-base rounded-lg"
             onClick={() => setIsOpen((prev) => !prev)}
           >
             <Hamburger />
-          </div>
+          </button>
         </div>
       </nav>
 
@@ -45,33 +46,26 @@ export const NavBar = () => {
         onClose={() => setIsOpen(false)}
         // initialFocus={focusedRef}
       >
-        <div className="p-4 w-full flex flex-row items-center justify-between">
-          <ProfilePicture />
-          <div
-            className="px-4 py-2 hover:bg-crust dark:hover:bg-base rounded-lg"
-            onClick={() => setIsOpen((prev) => !prev)}
-          >
-            <Close />
+        <div className="max-w-xl mx-auto">
+          <div className="p-4 w-full flex flex-row items-center justify-between">
+            <ProfilePicture />
+            <button
+              className="px-4 py-1 hover:bg-crust dark:hover:bg-base rounded-lg focus:bg-crust dark:focus:bg-base"
+              onClick={() => setIsOpen((prev) => !prev)}
+              ref={focusedRef}
+            >
+              <Close />
+            </button>
           </div>
+          <ul className="flex flex-col space-y-6 items-center text-2xl font-semibold justify-center">
+            <Link href="/" onClick={() => checkPath("/")}>
+              &lt; Home /&gt;
+            </Link>
+            <Link href="/projects" onClick={() => checkPath("/projects")}>
+              &lt; Projects /&gt;
+            </Link>
+          </ul>
         </div>
-        <ul className="flex flex-col space-y-6 items-center text-2xl font-semibold justify-center">
-          <Link
-            href="/"
-            // ref={focusedRef}
-            className="focus:outline-none"
-            onClick={() => checkPath("/")}
-          >
-            &lt; Home /&gt;
-          </Link>
-          <Link
-            href="/projects"
-            // ref={focusedRef}
-            className="focus:outline-none"
-            onClick={() => checkPath("/projects")}
-          >
-            &lt; Projects /&gt;
-          </Link>
-        </ul>
       </Dialog>
     </>
   );

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,7 +10,7 @@ const raleway = Raleway({
 export const metadata: Metadata = {
   title: "Goudham Suresh",
   description:
-    "I am a software engineer by day, and an open source enthusiast by night. This is my corner of the internet where I write about my experiences, projects, and more.",
+    "I am a software engineer by day, and an open source enthusiast by night. Welcome to my corner of the internet where I write about my experiences, projects, and more.",
   keywords: ["Next.js", "React", "Typescript", "Catppuccin", "Goudham"],
   colorScheme: "light dark",
   metadataBase: new URL(
@@ -26,7 +26,7 @@ export const metadata: Metadata = {
       process.env.NEXT_PUBLIC_IS_PREVIEW ? " (Preview)" : ""
     }`,
     description:
-      "I am a software engineer by day, and an open source enthusiast by night. This is my corner of the internet where I write about my experiences, projects, and more.",
+      "I am a software engineer by day, and an open source enthusiast by night. Welcome to my corner of the internet where I write about my experiences, projects, and more.",
     locale: "en_GB",
   },
   twitter: {

diff --git a/app/projects/layout.tsx b/app/projects/layout.tsx
@@ -3,7 +3,7 @@ import { Metadata } from "next";
 export const metadata: Metadata = {
   title: "Projects by Goudham Suresh",
   description:
-    "I am a software engineer by day, and an open source enthusiast by night. This is my corner of the internet where I write about my experiences, projects, and more.",
+    "I am a software engineer by day, and an open source enthusiast by night. Welcome to my corner of the internet where I write about my experiences, projects, and more.",
   openGraph: {
     url: process.env.NEXT_PUBLIC_IS_PREVIEW
       ? "https://preview.goudham.com/projects"
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
       process.env.NEXT_PUBLIC_IS_PREVIEW ? " (Preview)" : ""
     }`,
     description:
-      "I am a software engineer by day, and an open source enthusiast by night. This is my corner of the internet where I write about my experiences, projects, and more.",
+      "I am a software engineer by day, and an open source enthusiast by night. Welcome to my corner of the internet where I write about my experiences, projects, and more.",
   },
 };