fix performance and seo issues

sajadevo · Jan 28, 2025 · fe1b73e · fe1b73e
1 parent 99131c7
commit fe1b73e
Show file tree

Hide file tree

Showing 14 changed files with 125 additions and 73 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -2,6 +2,9 @@
 import Link from "next/link";
 import { Sajad } from "@/components/sajad";
 
+// @utils
+import { generateMetadata } from "@/lib/utils";
+
 const career = [
   {
     title: "Senior Frontend Engineer",
@@ -26,12 +29,34 @@ const career = [
   },
 ];
 
+export const metadata = generateMetadata({
+  title: "Sajad ⋅ About Me",
+  description:
+    "Learn more about me, my career, and my journey as a developer and designer.",
+  keywords: [
+    "Sajad",
+    "Developer",
+    "Designer",
+    "Bio",
+    "Career",
+    "Frontend",
+    "Engineer",
+    "ReactJS",
+    "JavaScript",
+    "TypeScript",
+    "Rust",
+    "Open-Source",
+    "Web Developer",
+    "Web Designer",
+  ],
+});
+
 export default function About() {
   return (
     <div className="min-h-[calc(100vh-48px)] md:min-h-[calc(100vh-65px)]">
       <div className="mx-auto max-w-2xl px-6 pt-12 pb-24 sm:px-8 sm:pt-16 sm:pb-36">
         <div className="border-secondary size-32 rounded-full border p-4 sm:size-36 md:size-40">
-          <Sajad className="text-primary size-full" />
+          <Sajad className="text-primary size-full rounded-full" />
         </div>
         <h2 className="mt-12 mb-4 font-sans text-2xl font-semibold text-black">
           Bio
@@ -70,7 +95,11 @@ export default function About() {
             <div key={key}>
               <h3 className="mb-1 text-lg font-medium text-black">{title}</h3>
               <p className="text-foreground text-base text-balance">
-                <Link href={url} target="_blank" className="text-black">
+                <Link
+                  href={url}
+                  target="_blank"
+                  className="text-black underline underline-offset-2"
+                >
                   {company}
                 </Link>
                 &nbsp;&nbsp;•&nbsp;&nbsp;

diff --git a/app/apple-icon.png b/app/apple-icon.png
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/icon.png b/app/icon.png
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -1,6 +1,8 @@
 // @components
 import Link from "next/link";
-import Image from "next/image";
+
+// @utils
+import { generateMetadata } from "@/lib/utils";
 
 const featuredProjects = [
   {
@@ -98,6 +100,30 @@ const projects = [
   },
 ];
 
+export const metadata = generateMetadata({
+  title: "Sajad ⋅ My Projects",
+  description: "Explore unique websites, apps, and libraries I've developed.",
+  keywords: [
+    "Sajad",
+    "Developer",
+    "Designer",
+    "Projects",
+    "Portfolio",
+    "Websites",
+    "Apps",
+    "Libraries",
+    "JavaScript",
+    "TypeScript",
+    "ReactJS",
+    "NextJS",
+    "TailwindCSS",
+    "MUI",
+    "Blockchain",
+    "NFT",
+    "Web3",
+  ],
+});
+
 export default function About() {
   return (
     <div className="min-h-[calc(100vh-48px)] md:min-h-[calc(100vh-65px)]">
@@ -111,7 +137,7 @@ export default function About() {
           libraries I&apos;ve developed. Some of these projects are thriving,
           while others have completed their lifecycle or pivoted into new ideas.
         </p>
-        <h2 className="mt-12 mb-6 font-sans text-2xl font-semibold text-black">
+        <h2 className="mt-12 mb-6 font-sans text-xl font-semibold text-black sm:text-2xl">
           Featured Projects
         </h2>
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -130,7 +156,7 @@ export default function About() {
             </Link>
           ))}
         </div>
-        <h2 className="mt-16 mb-6 font-sans text-2xl font-semibold text-black">
+        <h2 className="mt-16 mb-6 font-sans text-xl font-semibold text-black sm:text-2xl">
           All Projects
         </h2>
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">

diff --git a/app/uses/page.tsx b/app/uses/page.tsx
@@ -2,6 +2,9 @@
 import Link from "next/link";
 import Image from "next/image";
 
+// @utils
+import { generateMetadata } from "@/lib/utils";
+
 const elements = [
   {
     name: 'MacBook Pro (14", 2023)',
@@ -80,6 +83,34 @@ const elements = [
   },
 ];
 
+export const metadata = generateMetadata({
+  title: "Sajad ⋅ What I Use",
+  description: "Behind the scenes, my workspace setup, tools, and gear.",
+  keywords: [
+    "Sajad",
+    "Developer",
+    "Designer",
+    "Workspace",
+    "Setup",
+    "Tools",
+    "Gear",
+    "MacBook Pro",
+    "Studio Display",
+    "Magic Keyboard",
+    "Magic Mouse",
+    "AirPods Max",
+    "Raycast",
+    "VS Code",
+    "Arc Browser",
+    "Warp",
+    "Figma",
+    "Notion",
+    "Cal.com",
+    "Screen Studio",
+    "CleanShot X",
+  ],
+});
+
 export default function Uses() {
   return (
     <div className="min-h-[calc(100vh-48px)] md:min-h-[calc(100vh-65px)]">
@@ -94,7 +125,7 @@ export default function Uses() {
             <div>
               <Image
                 src={img}
-                alt={name}
+                alt={`Image of ${name}`}
                 width={300}
                 height={300}
                 className="mx-auto h-24 w-auto"

diff --git a/components/header.tsx b/components/header.tsx
@@ -3,7 +3,6 @@
 import React from "react";
 
 // @components
-import Image from "next/image";
 import Link, { type LinkProps } from "next/link";
 import { Button } from "@/components/button";
 import { ThemeToggle } from "@/components/theme-toggle";
@@ -36,9 +35,10 @@ export function Header() {
     <header className="flex justify-between">
       <Link
         href="/"
+        aria-label="navigate to home"
         className="border-secondary hover:bg-secondary/25 size-12 border-r bg-transparent p-2 transition-colors duration-200 md:size-16 md:p-3"
       >
-        <Sajad className="text-primary size-full" />
+        <Sajad className="text-primary size-full rounded-full" />
       </Link>
       <nav className="hidden h-12 items-center gap-1 sm:flex md:h-16">
         {links.map((link) => {
@@ -59,14 +59,18 @@ export function Header() {
         <ThemeToggle />
         <Dialog>
           <DialogTrigger asChild>
-            <button className="hover:bg-secondary/25 border-secondary text-foreground grid size-12 cursor-pointer place-items-center overflow-hidden border-l bg-transparent p-1 text-base font-normal transition-all duration-200 hover:text-black sm:hidden md:size-16">
+            <button
+              aria-label="open menu"
+              className="hover:bg-secondary/25 border-secondary text-foreground grid size-12 cursor-pointer place-items-center overflow-hidden border-l bg-transparent p-1 text-base font-normal transition-all duration-200 hover:text-black sm:hidden md:size-16"
+            >
               <RiCommandLine className="size-4 md:size-5" />
             </button>
           </DialogTrigger>
           <DialogPortal>
             <DialogOverlay className="size-screen bg-background" />
             <DialogClose asChild>
               <Button
+                aria-label="close menu"
                 variant="secondary"
                 className="absolute top-4 right-4 z-50 size-10 p-0"
               >

diff --git a/components/sajad.tsx b/components/sajad.tsx
@@ -8,9 +8,9 @@ export function Sajad(props: React.SVGProps<SVGSVGElement>) {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clipPath="url(#clip0_180_42)">
+      <g clipPath="url(#clip0_183_37)">
         <mask
-          id="mask0_180_42"
+          id="mask0_183_37"
           style={{ maskType: "luminance" }}
           maskUnits="userSpaceOnUse"
           x={0}
@@ -20,8 +20,7 @@ export function Sajad(props: React.SVGProps<SVGSVGElement>) {
         >
           <path d="M0 0H90V90H0V0Z" fill="white" />
         </mask>
-        <g mask="url(#mask0_180_42)">
-          <path d="M0 0H90V90H0V0Z" fill="transparent" />
+        <g mask="url(#mask0_183_37)">
           <path
             d="M71.6146 41.1992H64.5791"
             stroke="currentColor"
@@ -30,8 +29,9 @@ export function Sajad(props: React.SVGProps<SVGSVGElement>) {
             strokeLinejoin="round"
           />
           <path
-            d="M28.3838 70.2677L31.4999 76.5436C31.5093 76.5625 31.5206 76.5804 31.5338 76.5969L35.7364 81.882C35.7933 81.9536 35.8798 81.9953 35.9712 81.9953H38.8918C38.9785 81.9953 39.0609 82.0328 39.1179 82.0982L40.9208 84.1664C41.0794 84.3484 41.3771 84.278 41.4374 84.0442L42.1548 81.2643C42.189 81.1318 42.3085 81.0393 42.4453 81.0393H45.7795C45.7976 81.0393 45.816 81.0376 45.8337 81.0343C53.816 79.5707 56.7491 74.9359 56.9718 72.8789C56.9735 72.8628 56.9737 72.8474 56.9726 72.8312L56.6803 68.2317C56.6724 68.1081 56.7415 67.9932 56.8516 67.9364C60.3265 66.1418 61.952 59.9236 63.0335 56.7183C63.0391 56.7015 63.043 56.6857 63.0456 56.6682C63.433 54.0889 64.29 48.4313 64.6499 46.2267C65.0023 44.0681 65.1556 41.7905 65.0229 40.9565C65.0166 40.917 65.0169 40.8773 65.0252 40.8381L65.7269 37.5298C65.7394 37.4708 65.7339 37.4094 65.711 37.3536L65.0529 35.7499C65.0268 35.6863 65.0234 35.6157 65.0431 35.5498L65.7708 33.1241C65.7792 33.0962 65.7835 33.0671 65.7835 33.0379V29.8698V24.5131C65.7835 24.4087 65.7292 24.3118 65.6401 24.2572L59.5353 20.5196C59.5039 20.5004 59.4692 20.4871 59.433 20.4804L49.053 18.5695C49.0286 18.565 49.0038 18.5635 48.979 18.5651L40.2811 19.1361C40.2376 19.1389 40.1953 19.1512 40.1571 19.172L36.2487 21.3035C36.0993 21.385 36.0476 21.5742 36.1346 21.7204L39.6465 27.6148C39.7165 27.7323 39.6981 27.8823 39.6018 27.9795L32.9445 34.6975C32.9097 34.7326 32.8668 34.7586 32.8195 34.7731L25.664 36.9711C25.6017 36.9902 25.547 37.0289 25.5105 37.083C25.2098 37.5293 24.6354 38.5917 24.3467 39.8909C23.9613 41.6254 25.5032 44.709 26.4669 46.9575C27.1773 48.6153 28.8518 49.1636 29.7804 49.2562C29.9112 49.2692 30.0239 49.3511 30.0542 49.4789C30.9267 53.1697 29.7704 65.0224 28.9728 69.0213C28.9658 69.0567 28.9528 69.0877 28.9337 69.1183L28.3981 69.9753C28.3429 70.0637 28.3374 70.1744 28.3838 70.2677Z"
-            fill="transparent"
+            opacity={0.2}
+            d="M43.1323 70.3034L34.9795 58.5195C37.0355 60.2872 42.192 63.8051 45.8278 66.2289C49.4636 68.6528 54.5534 69.0021 56.6815 68.6054L44.1675 76.1156C43.4406 76.5519 42.5346 75.9425 42.6647 75.1047L43.2981 71.0257C43.3374 70.7726 43.278 70.514 43.1323 70.3034Z"
+            fill="currentColor"
           />
           <path
             d="M60.1039 43.1916C60.1039 40.0106 61.6763 37.5293 65.1994 37.5293C70.0495 37.5293 71.143 39.5901 70.7469 42.4196C70.3507 45.2492 68.8296 48.7142 64.7651 48.7142C63.0813 48.7142 61.7819 48.2662 60.9057 47.1267M60.1039 43.1916C60.6065 46.8202 61.6233 48.0935 60.563 49.6479C59.4888 51.2227 56.373 50.7541 54.9316 50.6033M60.1039 43.1916L59.4909 40.6057"
@@ -41,7 +41,7 @@ export function Sajad(props: React.SVGProps<SVGSVGElement>) {
             strokeLinejoin="round"
           />
           <path
-            d="M44.07 42.7428C42.9638 43.3861 42.8041 45.175 43.7133 46.7385C44.6224 48.3019 46.2562 49.0478 47.3624 48.4045C48.8141 47.5604 49.4187 46.1677 48.5095 44.6043C47.6003 43.0408 45.1762 42.0996 44.07 42.7428Z"
+            d="M44.07 42.7423C42.9638 43.3856 42.8041 45.1745 43.7133 46.738C44.6224 48.3014 46.2562 49.0473 47.3624 48.404C48.8141 47.5599 49.4187 46.1672 48.5095 44.6038C47.6003 43.0403 45.1762 42.0991 44.07 42.7423Z"
             fill="#FED1D0"
           />
           <path
@@ -67,7 +67,8 @@ export function Sajad(props: React.SVGProps<SVGSVGElement>) {
           />
           <path
             d="M34.4488 57.3635L33.0527 39.873H35.5669C35.4999 41.5655 35.2653 45.6443 36.0697 48.4198C36.7771 50.8601 40.0987 52.7035 41.9956 53.5118C42.4016 53.6848 42.6676 54.0915 42.6548 54.5326C42.38 64.0084 47.1438 64.3261 48.0262 64.4732C48.9313 64.624 51.6565 63.9563 54.4722 64.0066C56.7247 64.0468 58.7627 65.0624 59.5002 65.5652C59.0644 66.3027 57.3582 67.9485 54.0197 68.6323C50.6811 69.3161 46.8296 67.3418 45.3212 66.2692L35.7249 59.5867C34.9884 59.0739 34.5202 58.2582 34.4488 57.3635Z"
-            fill="transparent"
+            fill="currentColor"
+            opacity={0.1}
           />
           <path
             d="M27.651 36.1477C30.2648 35.8173 32.5009 38.3328 33.2922 39.6319L34.8905 39.8386C34.8905 38.514 35.3133 37.9503 35.8185 33.7892C36.1024 31.451 39.3716 28.6439 40.7459 28.2584C40.2766 27.8227 38.9962 26.3981 37.6286 24.1858C36.2609 21.9734 37.757 20.9578 38.5447 20.5891C41.7224 20.9913 43.0196 19.7846 43.271 19.131C46.0364 21.293 46.8298 22.1243 50.8522 21.0684C54.8746 20.0125 53.3159 20.1982 58.9975 23.8184C64.6791 27.4385 63.5308 24.706 64.7878 25.3094C65.7934 25.7921 65.8105 27.0451 65.9365 28.2185C66.0289 29.0787 66.071 31.3971 65.5007 33.7892C67.0709 31.8121 67.7399 29.6001 67.8782 28.7413C69.2581 27.3614 70.2453 25.7421 70.6797 24.5506C70.7752 24.2887 70.7301 24.0005 70.5833 23.7636L69.2549 21.6214C71.5879 16.3923 67.3443 13.0068 64.9309 11.9677C64.8471 12.4873 64.7878 13.6984 64.7878 13.6984C60.9163 13.6482 60.1037 9.60497 56.9863 9.25263C53.8689 8.90028 51.2544 7.84517 46.4778 7.0407C42.6565 6.39711 37.5448 8.48205 35.4665 9.60497L32.5 8.95149C32.4868 10.2433 32.0413 11.3723 31.3769 12.332C31.0549 12.7971 29.0707 11.6492 29.0707 11.6492C28.8439 11.8477 29.4848 14.3101 29.0707 14.6046C28.0937 15.2994 27.651 15.8925 26.8977 16.4505L27.651 17.8507C27.189 18.2863 26.2349 19.6505 26.1142 21.6214C25.9935 23.5924 27.0884 27.5046 27.651 29.2144V36.1477Z"
@@ -81,7 +82,7 @@ export function Sajad(props: React.SVGProps<SVGSVGElement>) {
             strokeLinejoin="round"
           />
           <path
-            d="M28.9697 40.6377L29.8722 45.264"
+            d="M28.9697 40.6372L29.8722 45.2635"
             stroke="currentColor"
             strokeWidth="1.5"
             strokeLinecap="round"
@@ -116,7 +117,7 @@ export function Sajad(props: React.SVGProps<SVGSVGElement>) {
             strokeLinejoin="round"
           />
           <path
-            d="M51.1035 55.1156L50.1659 54.9121C49.9266 54.8602 49.685 54.9891 49.5949 55.2168L49.5875 55.2354C49.5012 55.4537 49.5777 55.702 49.7703 55.8361C50.79 56.5462 52.2454 57.6411 53.0232 58.2314C53.3739 58.4975 53.8011 58.6423 54.2412 58.6423H56.6027C56.9793 58.6423 57.3482 58.536 57.667 58.3357L59.4665 57.2046C60.0388 56.8449 60.0968 56.0328 59.5814 55.5955L58.362 54.5608C58.106 54.3435 57.7462 54.2969 57.4432 54.4417C56.9441 54.6802 56.3603 54.6617 55.8773 54.392L55.5653 54.2177C55.3338 54.0885 55.0604 54.0564 54.8053 54.1286L51.3458 55.1081C51.2669 55.1304 51.1837 55.133 51.1035 55.1156Z"
+            d="M51.1032 55.1156L50.1656 54.9121C49.9263 54.8602 49.6847 54.9891 49.5946 55.2168L49.5872 55.2354C49.5009 55.4537 49.5774 55.702 49.77 55.8361C50.7897 56.5462 52.2451 57.6411 53.0229 58.2314C53.3736 58.4975 53.8008 58.6423 54.2409 58.6423H56.6024C56.979 58.6423 57.3479 58.536 57.6667 58.3357L59.4662 57.2046C60.0385 56.8449 60.0965 56.0328 59.5811 55.5955L58.3617 54.5608C58.1057 54.3435 57.7459 54.2969 57.4429 54.4417C56.9438 54.6802 56.36 54.6617 55.877 54.392L55.565 54.2177C55.3335 54.0885 55.0601 54.0564 54.805 54.1286L51.3455 55.1081C51.2666 55.1304 51.1834 55.133 51.1032 55.1156Z"
             fill="#FED1D0"
           />
           <path
@@ -127,7 +128,7 @@ export function Sajad(props: React.SVGProps<SVGSVGElement>) {
             strokeLinejoin="round"
           />
           <path
-            opacity="0.2"
+            opacity={0.2}
             d="M56.4211 59.0078H54.0778C53.8448 59.0078 53.7007 59.2619 53.8203 59.4618L54.6403 60.8325C54.7372 60.9946 54.958 61.0278 55.0984 60.9015L56.6218 59.5308C56.8262 59.3469 56.6961 59.0078 56.4211 59.0078Z"
             fill="currentColor"
           />
@@ -185,18 +186,18 @@ export function Sajad(props: React.SVGProps<SVGSVGElement>) {
             strokeLinejoin="round"
           />
           <path
-            d="M50.7908 38.4109C50.7908 37.4208 50.163 36.6182 49.3886 36.6182C48.6141 36.6182 47.9863 37.4208 47.9863 38.4109C47.9863 39.401 48.6141 40.2036 49.3886 40.2036C50.163 40.2036 50.7908 39.401 50.7908 38.4109Z"
+            d="M50.7908 38.4104C50.7908 37.4203 50.163 36.6177 49.3886 36.6177C48.6141 36.6177 47.9863 37.4203 47.9863 38.4104C47.9863 39.4005 48.6141 40.2031 49.3886 40.2031C50.163 40.2031 50.7908 39.4005 50.7908 38.4104Z"
             fill="currentColor"
           />
           <path
-            d="M64.4412 40.2038C64.4412 39.2137 63.846 38.4111 63.1117 38.4111C62.3775 38.4111 61.7822 39.2137 61.7822 40.2038C61.7822 41.1939 62.3775 41.9965 63.1117 41.9965C63.846 41.9965 64.4412 41.1939 64.4412 40.2038Z"
+            d="M64.4412 40.2033C64.4412 39.2132 63.846 38.4106 63.1117 38.4106C62.3775 38.4106 61.7822 39.2132 61.7822 40.2033C61.7822 41.1934 62.3775 41.996 63.1117 41.996C63.846 41.996 64.4412 41.1934 64.4412 40.2033Z"
             fill="currentColor"
           />
         </g>
       </g>
       <defs>
-        <clipPath id="clip0_180_42">
-          <rect width={90} height={90} rx={45} fill="white" />
+        <clipPath id="clip0_183_37">
+          <rect width={90} height={90} fill="white" />
         </clipPath>
       </defs>
     </svg>

diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
@@ -42,6 +42,7 @@ export function ThemeToggle() {
     <button
       onClick={toggleTheme}
       className="hover:bg-secondary/25 border-secondary text-foreground grid size-12 cursor-pointer place-items-center overflow-hidden border-l bg-transparent p-1 text-base font-normal transition-all duration-200 hover:text-black md:size-16"
+      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
     >
       {theme === "dark" ? (
         <RiMoonLine className="size-4 md:size-5" />

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -15,19 +15,23 @@ export function generateMetadata(args?: Metadata): Metadata {
   const title = args?.title || "Sajad ⋅ Developer & Designer";
   const description =
     args?.description ||
-    "A web developer and designer with 7+ year experience helping startups and early-stage companies to build their websites and apps.";
+    "I'm a passionate developer and designer interested in JavaScript, TypeScript, Rust, Product Design, Startups, Web 3.0 and OSS.";
   const domain = new URL(
     isProd
       ? process.env.NEXT_PUBLIC_PROD_URL!
-      : process.env.NEXT_PUBLIC_DEV_URL!
+      : process.env.NEXT_PUBLIC_DEV_URL!,
   );
-  const productDemoImg = "/demo.png";
+  const productDemoImg = "/avatar.png";
 
   return {
     // general
     metadataBase: domain,
     title,
     description,
+    robots: "follow, index",
+    publisher: "Sajad Ahmad Nawabi",
+    authors: [{ name: "Sajad Ahmad Nawabi", url: "https://x.com/sajadevo_" }],
+    keywords: ["Sajad", "Developer", "Designer", "JavaScript", "TypeScript"],
     alternates: { canonical: domain, ...args?.alternates },
 
     // open-graph
@@ -46,7 +50,7 @@ export function generateMetadata(args?: Metadata): Metadata {
 
     // twitter
     twitter: {
-      card: "summary_large_image",
+      card: "summary",
       title,
       description,
       images: productDemoImg,

diff --git a/next.config.ts b/next.config.ts
@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  productionBrowserSourceMaps: true,
 };
 
 export default nextConfig;
diff --git a/public/avatar.png b/public/avatar.png