REFACTOR: Update color palette, service worker script

.gitignore

@@ -49,4 +49,7 @@ pnpm-lock.yaml
 
 # auto-generated icon files
 /icons/types
-/public/icons/sprites
+/public/icons/sprites
+
+# Service worker
+/public/sw.js

package.json

@@ -1,18 +1,20 @@
 {
   "name": "thebatproject",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "npm run pretty:check && npm run lint && npm run minify:images && npm run build:icons && next dev --turbopack",
-    "build": "npm run pretty:check && npm run lint && npm run minify:images && npm run build:icons && next build",
+    "dev": "npm run prebuild && next dev --turbopack",
+    "build": "npm run prebuild && next build",
     "start": "next start",
     "lint": "next lint --max-warnings 0",
     "pretty": "prettier --write \"./**/*.{json,tsx,ts,css,js,html,scss,yml}\"",
     "pretty:check": "prettier \"./**/*.{json,tsx,ts,css,js,html,scss,yml}\" --check",
     "minify:images": "npx tsx ./scripts/minify-images.ts",
     "build:ci": "npx @cloudflare/next-on-pages@1",
-    "build:icons": "npx tsx ./scripts/build-icons.ts"
+    "build:icons": "npx tsx ./scripts/build-icons.ts",
+    "generate:sw": "npx tsx ./scripts/generate-sw.ts",
+    "prebuild": "npm run pretty:check && npm run lint && npm run minify:images && npm run build:icons && npm run generate:sw"
   },
   "dependencies": {
     "@tsparticles/all": "^3.7.1",

scripts/generate-sw.ts

@@ -0,0 +1,77 @@
+import pkg from "../package.json";
+import * as path from "node:path";
+import fsExtra from "fs-extra";
+
+console.log(`Generating service worker for ${pkg.version}`);
+
+const scriptContent = `
+const cacheName = "${pkg.version}";
+const cacheLimit = 100;
+
+const ignoreEndPoints = [];
+
+const shouldIgnoreCaching = (request) => {
+  if (request.method !== "GET") {
+    return true;
+  }
+  return ignoreEndPoints.some((endPoint) => request.url.startsWith(endPoint));
+};
+
+const cacheClone = async (request) => {
+  const res = await fetch(request);
+  const cache = await caches.open(cacheName);
+  await cache.put(request, res.clone());
+  limitCacheSize(cacheName, cacheLimit);
+  return res;
+};
+
+const getCache = async (request) => {
+  const cache = await caches.match(request);
+  if (cache) {
+    return cache;
+  }
+  return cacheClone(request);
+};
+
+const clearOldCache = async () => {
+  const existingCaches = await caches.keys();
+  return Promise.all(
+    existingCaches
+      .filter((cache) => cache !== cacheName)
+      .map((cache) => caches.delete(cache)),
+  );
+};
+
+const limitCacheSize = async (cacheName, size) => {
+  const cache = await caches.open(cacheName);
+  const cacheKeys = await cache.keys();
+  if (cacheKeys.length > size) {
+    await cache.delete(cacheKeys[0]);
+    limitCacheSize(cacheName, size);
+  }
+};
+
+self.addEventListener("install", (e) => {
+  self.skipWaiting();
+  e.waitUntil(clearOldCache());
+});
+
+self.addEventListener("activate", (e) => {
+  e.waitUntil(clearOldCache());
+});
+
+self.addEventListener("fetch", (e) => {
+  if (shouldIgnoreCaching(e.request)) {
+    return;
+  }
+  e.respondWith(getCache(e.request));
+});
+`;
+
+const cwd = process.cwd();
+const outputDir = path.join(cwd, "public");
+const outputPath = path.join(outputDir, "sw.js");
+await fsExtra.ensureDir(outputDir);
+await fsExtra.writeFile(outputPath, scriptContent, "utf8");
+
+console.log(`Service worker generated at ${path.relative(cwd, outputPath)}`);

src/app/_components/HeroCopy.tsx

@@ -5,10 +5,10 @@ import { ExternalLinks } from "@/utils/constants";
 export const HeroCopy = () => {
   return (
     <div className="flex flex-col justify-start gap-6 md:gap-8 items-center text-center order-1 self-start lg:self-center lg:-order-1 lg:text-left lg:items-start">
-      <h1 className="text-5xl xs:text-6xl font-bebas-neue sm:text-7xl lg:text-9xl xl:text-10xl leading-none font-bold tracking-normal lg:tracking-[0.02em]">
+      <h1 className="text-5xl text-primary xs:text-6xl font-bebas-neue sm:text-7xl lg:text-9xl xl:text-10xl leading-none font-bold tracking-normal lg:tracking-[0.02em]">
         Developer by day, <br /> Vigilante by night
       </h1>
-      <p className="text-base text-gray-300 sm:text-lg xl:text-xl leading-snug">
+      <p className="text-base text-secondary sm:text-lg xl:text-xl leading-snug">
         <i>
           &ldquo;If I can&apos;t change things here,{" "}
           <br className="md:hidden" /> if I can&apos;t have an effect, <br />I
@@ -18,23 +18,23 @@ export const HeroCopy = () => {
       <div className="flex justify-center flex-wrap items-center gap-4">
         <CustomLink
           variant="primary"
-          className="no-underline flex text-sm md:text-base flex-col justify-center items-center group w-64"
+          className="flex text-sm md:text-base flex-col justify-center items-center group w-64"
           href={ExternalLinks.meeting}
           target="_blank"
         >
           SUMMON THE KNIGHT
-          <small className="text-gray-400 group-hover:text-gray-200 group-focus-visible:text-gray-200">
+          <small className="text-tertiary group-hover:text-secondary group-focus-visible:text-secondary">
             (Schedule a call)
           </small>
         </CustomLink>
         <CustomLink
           variant="primary"
-          className="no-underline flex flex-col text-sm md:text-base justify-center items-center group w-64"
+          className="flex flex-col text-sm md:text-base justify-center items-center group w-64"
           href={ExternalLinks.resume}
           target="_blank"
         >
           VIGILANTE PROFILE
-          <small className="text-gray-400 group-hover:text-gray-200 group-focus-visible:text-gray-200">
+          <small className="text-tertiary group-hover:text-secondary group-focus-visible:text-secondary">
             (Download resume)
           </small>
         </CustomLink>

src/app/_components/HeroSection.tsx

@@ -17,7 +17,9 @@ export const HeroSection = () => {
       className="w-full h-svh grid grid-cols-1 overflow-x-clip pt-32 xs:pt-32 sm:pt-36 lg:pt-16 lg:grid-cols-[1fr_1.2fr] items-center gap-10 xl:gap-20"
     >
       <HeroCopy />
-      <BatLogo />
+      <div className="w-full min-h-[20vh]">
+        <BatLogo />
+      </div>
     </PageSection>
   );
 };

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import { Bebas_Neue, Inter } from "next/font/google";
 import "@/styles/globals.css";
 import { getMetaData, getViewPort } from "@/utils/helpers";
+import { ServiceWorker } from "@/components/ServiceWorker";
 
 const rethinkSans = Inter({
   subsets: ["latin"],
@@ -25,9 +26,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${bebasNeue.variable} ${rethinkSans.variable} antialiased font-inter bg-black text-white text-base scroll-pt-24`}
+        className={`${bebasNeue.variable} ${rethinkSans.variable} antialiased font-inter bg-surface text-primary text-base scroll-pt-24`}
       >
         {children}
+        <ServiceWorker />
       </body>
     </html>
   );

src/app/not-found.tsx

@@ -7,15 +7,11 @@ const NotFound = () => {
       <h1 className="text-5xl font-bebas-neue xs:text-6xl md:text-8xl lg:text-9xl leading-none">
         Holy Broken Links, Batman!
       </h1>
-      <p className="text-base max-w-[50ch] md:text-xl text-gray-300 mb-6">
+      <p className="text-base max-w-[50ch] md:text-xl text-tertiary mb-6">
         Even Batman can&apos;t find this page... It might have vanished into the
         Batcave or been taken down by the Joker. Either way, it&apos;s not here.{" "}
       </p>
-      <CustomLink
-        href={InternalRoutes.home}
-        variant="primary"
-        className="no-underline"
-      >
+      <CustomLink href={InternalRoutes.home} variant="primary">
         Back to Home
       </CustomLink>
     </main>

src/components/Button.tsx

@@ -5,7 +5,7 @@ export type ButtonVariant = "primary";
 
 export const variantClasses: Record<ButtonVariant, string> = {
   primary:
-    "border border-gray-500 rounded-md border-solid text-white/80 bg-black/70 backdrop-blur-sm py-3 px-5  focus-visible:[&:not(:disabled)]:text-white hover:[&:not(:disabled)]:border-white/50 hover:[&:not(:disabled)]:text-white disabled:opacity-30",
+    "border border-stroke rounded-md border-solid text-secondary bg-surface/70 backdrop-blur-sm py-3 px-5 focus-visible:[&:not(:disabled)]:text-primary hover:[&:not(:disabled)]:border-tertiary hover:[&:not(:disabled)]:text-primary disabled:opacity-30",
 };
 
 export interface ButtonProps

src/components/CustomLink.tsx

@@ -16,7 +16,7 @@ export const CustomLink: React.ForwardRefExoticComponent<
   return (
     <Link
       className={cn(
-        "text-base font-inter cursor-pointer",
+        "text-base font-inter cursor-pointer no-underline",
         variant && variantClasses[variant],
         className,
       )}

src/components/Footer.tsx

@@ -95,22 +95,22 @@ const ContactLinks = [
 export const Footer = () => {
   return (
     <footer className="w-full flex justify-center items-start relative z-50">
-      <div className="h-[2px] bg-[linear-gradient(to_right,#9ca3af10,#6b7280,#9ca3af10)] w-full absolute top-0"></div>
+      <div className="h-[2px] bg-[linear-gradient(to_right,#9ca3af10,#6b7280bb,#9ca3af10)] w-full absolute top-0"></div>
       <PageSection className="w-full flex justify-center items-start py-12 md:py-14 lg:py-16 xl:py-20">
-        <div className="flex justify-start flex-wrap items-start gap-y-10 gap-x-24">
+        <div className="flex justify-start flex-wrap items-start gap-y-8 gap-x-24">
           <div className="flex flex-col gap-3">
             <h2 className="text-2xl md:text-4xl leading-none">
               The Bat Project
             </h2>
-            <p className="text-gray-400 text-sm">
+            <p className="text-tertiary text-sm">
               Portfolio of a digital architect
             </p>
             <ul className="flex justify-start p-0 m-0 gap-2 items-center mt-2">
               {SocialLinks.map((link) => (
                 <li key={link.title} className="flex">
                   <CustomLink
                     href={link.url}
-                    className="text-gray-300 size-8 border border-solid border-gray-500 flex justify-center items-center rounded-full hover:text-white"
+                    className="text-secondary size-8 border border-solid border-stroke flex justify-center items-center rounded-full hover:text-primary hover:border-tertiary focus-visible:text-primary"
                     target="_blank"
                     rel="noopener"
                   >
@@ -122,13 +122,13 @@ export const Footer = () => {
             </ul>
           </div>
           <div className="flex flex-col justify-start items-start gap-5">
-            <p className="text-lg font-medium">This Website</p>
+            <p className="text-xs text-tertiary">This Website</p>
             <ul className="flex flex-col gap-3 p-0 m-0">
               {SiteLinks.map((link) => (
                 <li key={link.url} className="flex p-0 m-0">
                   <CustomLink
                     href={link.url}
-                    className="text-gray-300 hover:text-white no-underline text-sm"
+                    className="text-secondary hover:text-primary focus-visible:text-primary text-sm"
                   >
                     {link.name}
                   </CustomLink>
@@ -137,15 +137,15 @@ export const Footer = () => {
             </ul>
           </div>
           <div className="flex flex-col justify-start items-start gap-5">
-            <p className="text-lg font-medium">Experience</p>
+            <p className="text-xs text-tertiary">Experience</p>
             <ul className="flex flex-col gap-3 p-0 m-0">
               {WorkLinks.map((link) => (
                 <li key={link.url} className="flex p-0 m-0">
                   <CustomLink
                     href={link.url}
                     target="_blank"
                     rel="noopener"
-                    className="text-gray-300 hover:text-white no-underline text-sm"
+                    className="text-secondary hover:text-primary focus-visible:text-primary text-sm"
                   >
                     {link.name}
                   </CustomLink>
@@ -154,15 +154,15 @@ export const Footer = () => {
             </ul>
           </div>
           <div className="flex flex-col justify-start items-start gap-5">
-            <p className="text-lg font-medium">Projects</p>
+            <p className="text-xs text-tertiary">Projects</p>
             <ul className="flex flex-col gap-3 p-0 m-0">
               {ProjectLinks.map((link) => (
                 <li key={link.url} className="flex p-0 m-0">
                   <CustomLink
                     href={link.url}
                     target="_blank"
                     rel="noopener"
-                    className="text-gray-300 hover:text-white no-underline text-sm"
+                    className="text-secondary hover:text-primary focus-visible:text-primary text-sm"
                   >
                     {link.name}
                   </CustomLink>
@@ -171,15 +171,15 @@ export const Footer = () => {
             </ul>
           </div>
           <div className="flex flex-col justify-start items-start gap-5">
-            <p className="text-lg font-medium">Contact Me</p>
+            <p className="text-xs text-tertiary">Contact Me</p>
             <ul className="flex flex-col gap-3 p-0 m-0">
               {ContactLinks.map((link) => (
                 <li key={link.url} className="flex p-0 m-0">
                   <CustomLink
                     href={link.url}
                     target="_blank"
                     rel="noopener"
-                    className="text-gray-300 hover:text-white no-underline text-sm"
+                    className="text-secondary hover:text-primary focus-visible:text-primary text-sm"
                   >
                     {link.name}
                   </CustomLink>

src/components/Header.tsx

@@ -23,14 +23,14 @@ const NavLinks = [
 
 export const Header = () => {
   return (
-    <header className="w-full fixed top-0 left-0 h-24 flex justify-center items-center gap-4 px-14 py-3 z-50 backdrop-blur-sm bg-black/10">
+    <header className="w-full fixed top-0 left-0 h-24 flex justify-center items-center gap-4 px-14 py-3 z-50 backdrop-blur-sm bg-surface/10">
       <nav>
         <ul className="flex gap-6 md:gap-10 justify-center p-0 items-center">
           {NavLinks.map((link) => (
             <li key={link.name} className="flex p-0 m-0">
               <CustomLink
                 href={link.url}
-                className="text-gray-300 hover:text-white no-underline md:text-lg"
+                className="text-secondary hover:text-primary focus-visible:text-primary md:text-lg"
               >
                 {link.name}
               </CustomLink>