feat: use Next/ font, image, sitemap

TheQueenOfHearts90 · Oct 9, 2024 · 9b02b0f · 9b02b0f
1 parent df51f78
commit 9b02b0f
Show file tree

Hide file tree

Showing 29 changed files with 110 additions and 135 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,7 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'export', // Outputs a Single-Page Application (SPA).
+  // output: 'export', // Outputs a Single-Page Application (SPA).
   distDir: './dist', // Changes the build output directory to `./dist/`.
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+        port: '',
+      },
+    ],
+  },
 }
 
 export default nextConfig
diff --git a/public/fonts/K2D-Bold.woff2 b/public/fonts/K2D-Bold.woff2
diff --git a/public/fonts/K2D-ExtraBold.woff2 b/public/fonts/K2D-ExtraBold.woff2
diff --git a/public/fonts/K2D-ExtraLight.woff2 b/public/fonts/K2D-ExtraLight.woff2
diff --git a/public/fonts/K2D-Light.woff2 b/public/fonts/K2D-Light.woff2
diff --git a/public/fonts/K2D-Medium.woff2 b/public/fonts/K2D-Medium.woff2
diff --git a/public/fonts/K2D-Regular.woff2 b/public/fonts/K2D-Regular.woff2
diff --git a/public/fonts/K2D-SemiBold.woff2 b/public/fonts/K2D-SemiBold.woff2
diff --git a/public/fonts/K2D-Thin.woff2 b/public/fonts/K2D-Thin.woff2
diff --git a/public/robots.txt b/public/robots.txt
@@ -2,4 +2,4 @@
 User-agent: *
 Allow: /
 
-Sitemap: https://laughing0900.github.io/vite-portfolio/sitemap.xml
+Sitemap: https://laughing-portfolio.vercel.app/sitemap.xml
diff --git a/public/sitemap.xml b/public/sitemap.xml
diff --git a/src/app/index.css b/src/app/index.css
@@ -2,51 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-    font-family: "Cyborg";
-    src: url("/fonts/Cyborg.woff2");
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "K2D";
-    src: url("/fonts/K2D-Light.woff2");
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "K2D";
-    src: url("/fonts/K2D-Regular.woff2");
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-@font-face {
-    font-family: "K2D";
-    src: url("/fonts/K2D-Medium.woff2");
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "K2D";
-    src: url("/fonts/K2D-SemiBold.woff2");
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: "K2D";
-    src: url("/fonts/K2D-Bold.woff2");
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-}
-
 @layer base {
     :root {
         --background: #1c1c1e;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import "./index.css";
+import { cyborg, k2d } from "@/lib/fonts/font";
 
 export const metadata: Metadata = {
     title: "Laughing's Portfolio",
@@ -15,7 +16,7 @@ export default function RootLayout({
     children: React.ReactNode;
 }) {
     return (
-        <html lang="en">
+        <html lang="en" className={`${cyborg.variable} ${k2d.variable}`}>
             <body>
                 <div id="root">{children}</div>
             </body>

diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
@@ -0,0 +1,25 @@
+import { MetadataRoute } from "next";
+import { API_ENDPOINT, BASE_URL } from "@/consts/apis";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+    const data = await fetch(API_ENDPOINT + "projects").then((res) =>
+        res.json()
+    );
+    const projects = data.body;
+
+    const projectSitemap = projects.map((project: any) => ({
+        url: `${BASE_URL}/project/${project.id}`,
+        changeFrequency: "yearly",
+        priority: 0.8,
+    }));
+
+    return [
+        {
+            url: "laughing-portfolio.vercel.app",
+            lastModified: new Date(),
+            changeFrequency: "yearly",
+            priority: 1,
+        },
+        ...projectSitemap,
+    ];
+}
diff --git a/src/components/about/bento-grid.tsx b/src/components/about/bento-grid.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@/lib/utils";
 
 export const BentoGrid = ({

diff --git a/src/components/about/cards/performance.tsx b/src/components/about/cards/performance.tsx
@@ -97,7 +97,7 @@ const PerformanceCard = () => {
                                 variants={variants.line}
                                 will-change="transform"
                                 custom={i}
-                                stroke="#6cc070dd"
+                                stroke="#71717166"
                             />
                             <motion.text
                                 fill="#717171"

diff --git a/src/components/about/cards/skillSet.tsx b/src/components/about/cards/skillSet.tsx
@@ -63,6 +63,8 @@ const SkillSetCard = () => {
                         src={`images/skills/${item}`}
                         alt={item}
                         loading="lazy"
+                        width={30}
+                        height={30}
                     />
                 </OrbitingCircles>
             ));

diff --git a/src/components/certificate/certificateItemsGrid.tsx b/src/components/certificate/certificateItemsGrid.tsx
@@ -22,11 +22,8 @@ const CertificateItemsGrid: FC<CertificateItemsGridProps> = ({
             {items.map((item, index) => {
                 return (
                     <LinkPreview
-                        imageSrc={`https://res.cloudinary.com/dicmdiiov/image/upload/f_auto,q_auto/v1/Pawn/portfolio/cert/${item.imageId}`}
-                        url={
-                            item.href ||
-                            `https://res.cloudinary.com/dicmdiiov/image/upload/f_auto,q_auto/v1/Pawn/portfolio/cert/${item.imageId}`
-                        }
+                        imageSrc={`/cert/${item.imageId}`}
+                        url={item.href || `/portfolio/cert/${item.imageId}`}
                         className={cn(
                             "group relative col-span-4 overflow-hidden py-4 md:col-span-3 md:col-start-2",
                             index !== items.length - 1 &&

diff --git a/src/components/project/projectCard.tsx b/src/components/project/projectCard.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import ProjectCardInfo from "@/components/project/projectCardInfo";
 import { ProjectCardProps } from "@/components/project/types/projectTypes";
-import Image from "@/components/ui/image";
+import Image, { cloudinaryLoader } from "@/components/ui/image";
 import { cn } from "@/lib/utils";
 
 const Card = ({ href, company, imageId, name, id }: ProjectCardProps) => {
@@ -26,11 +26,12 @@ const Card = ({ href, company, imageId, name, id }: ProjectCardProps) => {
                         </div>
                     </div>
                     <Image
-                        src={`https://res.cloudinary.com/dicmdiiov/image/upload/f_auto,q_auto/v1/Pawn/portfolio/project/${imageId}`}
-                        width="100%"
+                        src={`/project/${imageId}`}
                         className="h-full w-full object-cover"
                         alt="project image"
-                        loading="lazy"
+                        loader={cloudinaryLoader}
+                        fill={true}
+                        sizes="(min-width: 768px) 800px, (min-width: 640px) 600px, 600px"
                     />
                 </Link>
             </div>
@@ -42,6 +43,8 @@ const Card = ({ href, company, imageId, name, id }: ProjectCardProps) => {
                 className="absolute bottom-3 right-3 aspect-square w-12 opacity-10 drop-shadow md:w-20"
                 src={`images/pawn-white.svg`}
                 alt={"my-logo"}
+                width={48}
+                height={48}
             />
         </div>
     );

diff --git a/src/components/project/skeletons/projectCardSkeleton.tsx b/src/components/project/skeletons/projectCardSkeleton.tsx
@@ -14,6 +14,8 @@ const ProjectCardSkeleton = () => {
                 className="absolute bottom-3 right-3 aspect-square w-12 opacity-10 drop-shadow md:w-20"
                 src={`images/pawn-white.svg`}
                 alt={"my-logo"}
+                width={48}
+                height={48}
             />
         </div>
     );

diff --git a/src/components/projectDetails/detailsGallery.tsx b/src/components/projectDetails/detailsGallery.tsx
@@ -73,10 +73,10 @@ const DetailsGallery = ({ images }: { images: string[] }) => {
                                 >
                                     <Image
                                         src={item.image}
-                                        width="100%"
                                         className="h-full w-full object-contain object-center"
                                         alt="project image"
                                         loading="lazy"
+                                        fill={true}
                                     />
                                 </motion.div>
                             </div>

diff --git a/src/components/projectDetails/projectDetails.tsx b/src/components/projectDetails/projectDetails.tsx
@@ -8,7 +8,7 @@ import MainLayout from "@/components/layout/mainLayout";
 import DetailsGallery from "@/components/projectDetails/detailsGallery";
 import { useProjectsDetails } from "@/components/projectDetails/hooks/useProjectsDetails";
 import ProjectDetailsSkeleton from "@/components/projectDetails/skeletons/projectDetailsSkeletons";
-import Image from "@/components/ui/image";
+import Image, { cloudinaryLoader } from "@/components/ui/image";
 import {
     Tooltip,
     TooltipContent,
@@ -90,12 +90,15 @@ const ProjectDetails: React.FC<{ id: string }> = ({ id }) => {
 
                     {/* right */}
                     <div className="col-span-full h-fit space-y-10 lg:col-span-5">
-                        <Image
-                            src={`https://res.cloudinary.com/dicmdiiov/image/upload/f_auto,q_auto/v1/Pawn/portfolio/project/${imageId}`}
-                            width="100%"
-                            className="object-cove h-full w-full rounded-8"
-                            alt="project image"
-                        />
+                        <div className="relative aspect-video w-full rounded-8">
+                            <Image
+                                src={`/project/${imageId}`}
+                                loader={cloudinaryLoader}
+                                className="rounded-8 object-cover"
+                                alt="project image"
+                                fill={true}
+                            />
+                        </div>
 
                         <div
                             dangerouslySetInnerHTML={{

diff --git a/src/components/ui/dock.tsx b/src/components/ui/dock.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { cva } from "class-variance-authority";
-import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
+import { motion, useMotionValue } from "framer-motion";
 import React, { PropsWithChildren, useRef } from "react";
 import { cn } from "@/lib/utils";
 import type { VariantProps } from "class-variance-authority";
@@ -69,7 +69,6 @@ export interface DockIconProps {
     size?: number;
     magnification?: number;
     distance?: number;
-    mouseX?: any;
     className?: string;
     children?: React.ReactNode;
     props?: PropsWithChildren;
@@ -78,46 +77,23 @@ export interface DockIconProps {
 const DockIcon = ({
     magnification = DEFAULT_MAGNIFICATION,
     distance = DEFAULT_DISTANCE,
-    mouseX,
     className,
     children,
     ...props
 }: DockIconProps) => {
     const ref = useRef<HTMLDivElement>(null);
 
-    const distanceCalc = useTransform(mouseX, (val: number) => {
-        const bounds = ref.current?.getBoundingClientRect() ?? {
-            x: 0,
-            width: 0,
-        };
-
-        return val - bounds.x - bounds.width / 2;
-    });
-
-    const widthSync = useTransform(
-        distanceCalc,
-        [-distance, 0, distance],
-        [40, magnification, 40]
-    );
-
-    const width = useSpring(widthSync, {
-        mass: 0.1,
-        stiffness: 150,
-        damping: 12,
-    });
-
     return (
-        <motion.div
+        <div
             ref={ref}
-            style={{ width }}
             className={cn(
                 "flex aspect-square cursor-pointer items-center justify-center rounded-full",
                 className
             )}
             {...props}
         >
             {children}
-        </motion.div>
+        </div>
     );
 };
 

diff --git a/src/components/ui/image.tsx b/src/components/ui/image.tsx
@@ -1,8 +1,21 @@
-type ImageProps = React.HTMLProps<HTMLImageElement>;
+import Image from "next/image";
 
-const Image: React.FC<ImageProps & { loading?: "lazy" | "eager" }> = ({
-    ...props
-}) => {
-    return <img {...props}></img>;
-};
 export default Image;
+
+export function cloudinaryLoader({
+    src,
+    width,
+    quality,
+}: {
+    src: string;
+    width: number;
+    quality?: number;
+}) {
+    const params = [
+        "f_auto",
+        "c_limit",
+        `w_${width}`,
+        `q_${quality || "auto"}`,
+    ];
+    return `https://res.cloudinary.com/dicmdiiov/image/upload/${params.join(",")}/v1/Pawn/portfolio${src}`;
+}
diff --git a/src/components/ui/link-preview.tsx b/src/components/ui/link-preview.tsx
@@ -8,7 +8,7 @@ import {
     useSpring,
 } from "framer-motion";
 import React, { useEffect } from "react";
-import Image from "@/components/ui/image";
+import Image, { cloudinaryLoader } from "@/components/ui/image";
 import Link from "@/components/ui/link";
 import { cn } from "@/lib/utils";
 
@@ -61,6 +61,7 @@ export const LinkPreview = ({
                 <div className="invisible hidden">
                     <Image
                         src={src}
+                        loader={cloudinaryLoader}
                         width={width}
                         height={height}
                         alt="hidden image"
@@ -119,6 +120,7 @@ export const LinkPreview = ({
                                     {/* <div className="h-40 w-40 bg-gray-500"></div> */}
                                     <Image
                                         src={src}
+                                        loader={cloudinaryLoader}
                                         width={width}
                                         height={height}
                                         className="rounded-lg"