Merge pull request #79 from pphatdev/feat-projects

Feat projects

Author: pphatdev

public/assets/brands/language/vercel.svg

@@ -15,16 +15,16 @@ import Footer from "@components/layouts/footer";
 
 // Lazy-load below-the-fold sections to reduce initial bundle size
 const HomeSkills = dynamic(() => import("./sections/home-skills").then(mod => ({ default: mod.HomeSkills })), {
-    loading: () => <div className="min-h-[200px]" />,
+    loading: () => <div className="min-h-50" />,
 });
 const HomeFeatureSection = dynamic(() => import("./sections/home-feature").then(mod => ({ default: mod.HomeFeatureSection })), {
-    loading: () => <div className="min-h-[200px]" />,
+    loading: () => <div className="min-h-50" />,
 });
 const HomeAboutMe = dynamic(() => import("./sections/home-aboutme").then(mod => ({ default: mod.HomeAboutMe })), {
-    loading: () => <div className="min-h-[200px]" />,
+    loading: () => <div className="min-h-50" />,
 });
 const HomeFAQSection = dynamic(() => import("./sections/home-faq").then(mod => ({ default: mod.HomeFAQSection })), {
-    loading: () => <div className="min-h-[100px]" />,
+    loading: () => <div className="min-h-25" />,
 });
 const GetInTouchSections = dynamic(() => import("./sections/home-getintouch"));
 const homeSearchImage = `${NEXT_PUBLIC_APP_URL}/assets/screenshots/home-dark.png`;
@@ -160,7 +160,7 @@ export default function Home() {
             <RainbowGlow className="opacity-5 top-0 h-96"/>
 
             <SectionNavigation />
-            <div className="h-20 pointer-events-none fixed bottom-0 inset-x-0 bg-gradient-to-b from-transparent to-background z-50" />
+            <div className="h-20 pointer-events-none fixed bottom-0 inset-x-0 bg-linear-to-b from-transparent to-background z-50" />
         </div>
     );
 }

src/app/(home)/page.tsx

@@ -33,12 +33,12 @@ export const HomeAboutMe = () => {
                         </p>
                     </div>
                     <div className="flex flex-row gap-4 px-5">
-                        <Link href={`/gallery`} className="rounded-full cursor-pointer bg-primary px-4 py-1.5 bg-gradient-to-tr from-primary/10 to-primary/90 text-primary-foreground"> Gallery </Link>
+                        <Link href={`/gallery`} className="rounded-full cursor-pointer bg-primary px-4 py-1.5 bg-linear-to-tr from-primary/10 to-primary/90 text-primary-foreground"> Gallery </Link>
                     </div>
                 </div>
                 <div className="grid grid-cols-2 max-md:gap-5 max-lg:gap-2 gap-8 max-md:p-5">
                     <div>
-                        <div className={cn("relative flex aspect-square w-full rounded-xl px-1 items-center justify-center overflow-hidden border text-foreground/10 bg-[size:8px_8px] bg-top-left", bgGradientLine45deg)}>
+                        <div className={cn("relative flex aspect-square w-full rounded-xl px-1 items-center justify-center overflow-hidden border text-foreground/10 bg-size-[8px_8px] bg-top-left", bgGradientLine45deg)}>
                             <Image
                                 src={PERSON_IMAGE}
                                 alt={`Profile photo of ${PERSON_NAME} (${PERSON_RELEGIEN_NAME}), known online as ${PERSON_ALTERNATE_NAME}`}
@@ -57,7 +57,7 @@ export const HomeAboutMe = () => {
                         </div>
                     </div>
                     <div className='row-span-2'>
-                        <div className={cn("relative flex w-full h-full rounded-xl px-2 items-center justify-center overflow-hidden border text-foreground/10 bg-[size:8px_8px] bg-top-left", bgGradientLine45deg)}>
+                        <div className={cn("relative flex w-full h-full rounded-xl px-2 items-center justify-center overflow-hidden border text-foreground/10 bg-size-[8px_8px] bg-top-left", bgGradientLine45deg)}>
                             <div
                                 className="h-full w-full bg-center bg-no-repeat mask-size-[130%_100%] mask-center mask-no-repeat"
                                 style={{
@@ -69,7 +69,7 @@ export const HomeAboutMe = () => {
                         </div>
                     </div>
                     <div>
-                        <div className={cn("relative flex aspect-square w-full rounded-xl items-center justify-center overflow-hidden border text-foreground/10 bg-[size:8px_8px] bg-top-left", bgGradientLine45deg)}>
+                        <div className={cn("relative flex aspect-square w-full rounded-xl items-center justify-center overflow-hidden border text-foreground/10 bg-size-[8px_8px] bg-top-left", bgGradientLine45deg)}>
                             <div
                                 className="h-full w-full bg-center bg-no-repeat mask-size-[105%_100%] mask-center mask-no-repeat"
                                 style={{

src/app/(home)/sections/home-aboutme.tsx

@@ -73,7 +73,7 @@ const Feature = ({
                 <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-primary/10 via-primary/10 to-transparent pointer-events-none" />
             )}
             {index >= 4 && (
-                <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-primary/10 via-primary/10 to-transparent pointer-events-none" />
+                <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-linear-to-b from-primary/10 via-primary/10 to-transparent pointer-events-none" />
             )}
             <div className="mb-4 relative z-10 max-sm:px-5 px-10 group-hover/feature:text-primary text-primary/80">
                 {icon}

src/app/(home)/sections/home-feature.tsx

@@ -4,7 +4,7 @@ import { appName, appPositions } from "@lib/constants";
 
 export const GetInTouchSections = () => {
     return (
-        <div className="relative z-20 mx-auto grid w-full mt-20 overflow-clip max-w-5xl grid-cols-1 justify-start bg-gradient-to-br from-background via-foreground/10 md:grid-cols-3">
+        <div className="relative z-20 mx-auto grid w-full mt-20 overflow-clip max-w-5xl grid-cols-1 justify-start bg-linear-to-br from-background via-foreground/10 md:grid-cols-3">
             <RainbowGlow className="opacity-5"/>
             {/* Horizontal lines */}
             <div
@@ -18,7 +18,7 @@ export const GetInTouchSections = () => {
                     '--color-dark': 'rgba(255, 255, 255, 0.2)',
                     maskComposite: 'exclude'
                 } as React.CSSProperties}
-                className="absolute left-[calc(var(--offset)/2*-1)] h-[var(--height)] w-[calc(100%+var(--offset))] bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)] [background-size:var(--width)_var(--height)] [mask:linear-gradient(to_left,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_right,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)] [mask-composite:exclude] z-30 dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)] top-0"
+                className="absolute left-[calc(var(--offset)/2*-1)] h-(--height) w-[calc(100%+var(--offset))] bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)] bg-size-[var(--width)_var(--height)] [mask:linear-gradient(to_left,var(--background)_var(--fade-stop),transparent),linear-gradient(to_right,var(--background)_var(--fade-stop),transparent),linear-gradient(black,black)] mask-exclude z-30 dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)] top-0"
             />
             <div
                 style={{
@@ -31,7 +31,7 @@ export const GetInTouchSections = () => {
                     '--color-dark': 'rgba(255, 255, 255, 0.2)',
                     maskComposite: 'exclude'
                 } as React.CSSProperties}
-                className="absolute left-[calc(var(--offset)/2*-1)] h-[var(--height)] w-[calc(100%+var(--offset))] bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)] [background-size:var(--width)_var(--height)] [mask:linear-gradient(to_left,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_right,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)] [mask-composite:exclude] z-30 dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)] bottom-0 top-auto"
+                className="absolute left-[calc(var(--offset)/2*-1)] h-(--height) w-[calc(100%+var(--offset))] bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)] bg-size-[var(--width)_var(--height)] [mask:linear-gradient(to_left,var(--background)_var(--fade-stop),transparent),linear-gradient(to_right,var(--background)_var(--fade-stop),transparent),linear-gradient(black,black)] mask-exclude z-30 dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)] bottom-0 top-auto"
             />
 
             {/* Vertical lines */}
@@ -48,7 +48,7 @@ export const GetInTouchSections = () => {
                         '--color-dark': 'rgba(255, 255, 255, 0.2)',
                         maskComposite: 'exclude'
                     } as React.CSSProperties}
-                    className={`absolute top-[calc(var(--offset)/2*-1)] h-[calc(100%+var(--offset))] w-[var(--width)] bg-[linear-gradient(to_bottom,var(--color),var(--color)_50%,transparent_0,transparent)] [background-size:var(--width)_var(--height)] [mask:linear-gradient(to_top,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_bottom,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)] [mask-composite:exclude] z-30 dark:bg-[linear-gradient(to_bottom,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)] ${position === 'right' ? 'left-auto right-0' : 'left-0'}`}
+                    className={`absolute top-[calc(var(--offset)/2*-1)] h-[calc(100%+var(--offset))] w-(--width) bg-[linear-gradient(to_bottom,var(--color),var(--color)_50%,transparent_0,transparent)] bg-size-[var(--width)_var(--height)] [mask:linear-gradient(to_top,var(--background)_var(--fade-stop),transparent),linear-gradient(to_bottom,var(--background)_var(--fade-stop),transparent),linear-gradient(black,black)] mask-exclude z-30 dark:bg-[linear-gradient(to_bottom,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)] ${position === 'right' ? 'left-auto right-0' : 'left-0'}`}
                 />
             ))}
 

src/app/(home)/sections/home-getintouch.tsx

@@ -19,7 +19,7 @@ export const HomeSkills = () => {
                 <div className="w-full flex gap-5 mb-5 rounded-2xl shadow-card shadow-primary/5 bg-background/10 p-8 px-5 flex-wrap justify-start">
                     {languages.map((lang, key) => (
                         <MagneticArea key={key}>
-                            <div className="relative flex max-sm:h-9 max-sm:w-9 h-14 shadow-card shadow-primary/5 w-14 p-1 bg-background rounded-full items-center justify-center overflow-hidden border text-foreground/10 bg-[size:8px_8px] bg-top-left bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,transparent_0,transparent_50%)]">
+                            <div className="relative flex max-sm:h-9 max-sm:w-9 h-14 shadow-card shadow-primary/5 w-14 p-1 bg-background rounded-full items-center justify-center overflow-hidden border text-foreground/10 bg-size-[8px_8px] bg-top-left bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,transparent_0,transparent_50%)]">
                                 <div
                                     className={`h-full w-full bg-center m-1 bg-no-repeat mask-size-[105%_90%] mask-center mask-no-repeat`}
                                     style={{

src/app/(home)/sections/home-skills.tsx

@@ -104,7 +104,7 @@ export const AboutTimeline = () => {
     return (
         <div className="max-w-5xl mx-auto px-4 lg:px-6">
             <h1 className="max-md:mb-3 w-full py-3 max-md:text-3xl text-5xl tracking-tighter font-bold font-sans">
-                Exper<span className="text-left bg-background  bg-clip-text bg-no-repeat text-transparent bg-gradient-to-r from-sky-500 via-teal-500 to-green-500 [text-shadow:0_0_rgba(0,0,0,0.1)]">ience</span>
+                Exper<span className="text-left bg-background  bg-clip-text bg-no-repeat text-transparent bg-linear-to-r  from-sky-500 via-teal-500 to-green-500 [text-shadow:0_0_rgba(0,0,0,0.1)]">ience</span>
             </h1>
             <div className="relative sm:pb-12 sm:ml-[calc(2rem+1px)] mt-10 md:ml-[calc(3.5rem+1px)] lg:ml-[max(calc(14.5rem+1px),calc(100%-48rem))]">
                 <div className="hidden absolute top-3 bottom-0 right-full mr-7 md:mr-[3.25rem] w-px bg-foreground/20 sm:block"> </div>