REFACTOR: Folder structure for images, preview image, cta for dowload…

…ing resume (#4) * chore: added cta for downloading resume, directly open links instead of opening a popup * chore: deleted unused component * refactor: updated folder structure of images, updated preview image * chore: removed heroloader component * refactor: moved batlogo image to misc folder * chore: updated image dimensions for preview image --------- Co-authored-by: ArjunGTX <[email protected]>
ArjunGTX · Dec 19, 2024 · b53c235 · b53c235
1 parent 9291acf
commit b53c235
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 88 deletions.
diff --git a/images/favicon.jpg → images/meta/favicon.jpg b/images/favicon.jpg → images/meta/favicon.jpg
diff --git a/images/meta/preview.png b/images/meta/preview.png
diff --git a/images/batlogo.svg → images/misc/batlogo.svg b/images/batlogo.svg → images/misc/batlogo.svg
diff --git a/images/preview.png b/images/preview.png
diff --git a/public/videos/loader.webm b/public/videos/loader.webm
diff --git a/src/app/_components/HeroCopy.tsx b/src/app/_components/HeroCopy.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { HeroCta } from "./HeroCta";
+import { CustomLink } from "@/components/CustomLink";
+import { ExternalLinks } from "@/utils/constants";
 
 export const HeroCopy = () => {
   return (
@@ -14,7 +15,30 @@ export const HeroCopy = () => {
           don&apos;t care what happens to me.&rdquo;
         </i>
       </p>
-      <HeroCta />
+      <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"
+          href={ExternalLinks.meeting}
+          target="_blank"
+        >
+          SUMMON THE KNIGHT
+          <small className="text-gray-400 group-hover:text-gray-200 group-focus-visible:text-gray-200">
+            (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"
+          href={ExternalLinks.resume}
+          target="_blank"
+        >
+          VIGILANTE PROFILE
+          <small className="text-gray-400 group-hover:text-gray-200 group-focus-visible:text-gray-200">
+            (Download resume)
+          </small>
+        </CustomLink>
+      </div>
     </div>
   );
 };
diff --git a/src/app/_components/HeroCta.tsx b/src/app/_components/HeroCta.tsx
diff --git a/src/app/_components/HeroSection.tsx b/src/app/_components/HeroSection.tsx
@@ -1,17 +1,12 @@
 import React from "react";
 import dynamic from "next/dynamic";
-import { HeroSectionLoader } from "./HeroSectionLoader";
 import { HeroCopy } from "./HeroCopy";
 import { PageSection } from "./PageSection";
 
 const BatLogo = dynamic(
   () => import("./BatLogo").then((module) => module.BatLogo),
   {
-    loading: () => (
-      <div className="w-full flex justify-center items-center">
-        <HeroSectionLoader />
-      </div>
-    ),
+    loading: () => <></>,
   },
 );
 

diff --git a/src/app/_components/HeroSectionLoader.tsx b/src/app/_components/HeroSectionLoader.tsx
diff --git a/src/components/Button.tsx b/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-10  focus-visible:[&:not(:disabled)]:text-white hover:[&:not(:disabled)]:border-white/50 hover:[&:not(:disabled)]:text-white disabled:opacity-30",
+    "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",
 };
 
 export interface ButtonProps

diff --git a/src/lib/tsparticles.ts b/src/lib/tsparticles.ts
@@ -153,7 +153,7 @@ export const batLogoOptions: RecursivePartial<IOptions> = {
     },
     scale: 1,
     type: "inline",
-    url: "/images/batlogo.svg",
+    url: "/images/misc/batlogo.svg",
     position: {
       x: 50,
       y: 50,

diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -32,7 +32,8 @@ export const getMetaData = (options?: {
     icons: [
       {
         rel: "icon",
-        url: "/images/favicon.webp",
+        url: "/images/meta/favicon.webp",
+        type: "image/webp",
       },
     ],
     twitter: {
@@ -41,10 +42,11 @@ export const getMetaData = (options?: {
       card: "summary_large_image",
       images: [
         {
-          url: `${Constants.frontendUrl}/images/preview.webp`,
-          height: 630,
+          url: `${Constants.frontendUrl}/images/meta/preview.webp`,
+          height: 600,
           width: 1200,
           alt: "Developer by day, vigilante by night.",
+          type: "image/webp",
         },
       ],
       creator: "@im_arjunvc",
@@ -56,10 +58,11 @@ export const getMetaData = (options?: {
       locale: "en_US",
       images: [
         {
-          url: `${Constants.frontendUrl}/images/preview.webp`,
-          height: 630,
+          url: `${Constants.frontendUrl}/images/meta/preview.webp`,
+          height: 600,
           width: 1200,
           alt: "Developer by day, vigilante by night.",
+          type: "image/webp",
         },
       ],
       title,