From bda70451927d7472814401d9253483be238c9b9c Mon Sep 17 00:00:00 2001
From: pphatdev <pphat.kits@gmail.com>
Date: Fri, 4 Jul 2025 15:07:27 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20AboutMeSection=20?=
 =?UTF-8?q?and=20GradientLines=20components,=20update=20HomePage=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(web)/(home)/page.tsx                 |  4 +-
 .../(web)/(home)/sections/home-aboutme.tsx    | 82 +++++++++++++++++++
 src/components/ui/gradient-line.tsx           | 39 +++++++++
 src/components/ui/title.tsx                   | 28 +++++++
 4 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(web)/(home)/sections/home-aboutme.tsx
 create mode 100644 src/components/ui/gradient-line.tsx
 create mode 100644 src/components/ui/title.tsx

diff --git a/src/app/(web)/(home)/page.tsx b/src/app/(web)/(home)/page.tsx
index 8e750f8..b9184f3 100644
--- a/src/app/(web)/(home)/page.tsx
+++ b/src/app/(web)/(home)/page.tsx
@@ -4,6 +4,7 @@ import { ProjectsSection } from './sections/projects';
 import { metadata as meta } from './data/meta';
 import { AboutTimeline } from './sections/timeline';
 import { Footer } from '@/components/ui/footer';
+import { AboutMeSection } from './sections/home-aboutme';
 
 export const metadata: Metadata = meta
 
@@ -14,8 +15,9 @@ export default function HomePage() {
             <div className="fixed inset-0 z-0 pointer-events-none bg-[linear-gradient(to_bottom,transparent_0%,hsl(var(--background))_90%),radial-gradient(ellipse_at_center,transparent_40%,hsl(var(--primary-foreground))_95%)]"></div>
             <main className="max-lg:pt-0 h-full relative text-foreground min-h-screen">
                 <HomeHeroSection />
-                <ProjectsSection />
+                <AboutMeSection />
                 <AboutTimeline />
+                <ProjectsSection />
             </main>
 
             <Footer />
diff --git a/src/app/(web)/(home)/sections/home-aboutme.tsx b/src/app/(web)/(home)/sections/home-aboutme.tsx
new file mode 100644
index 0000000..d1114db
--- /dev/null
+++ b/src/app/(web)/(home)/sections/home-aboutme.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { Badge } from '@/components/ui/badge';
+import { Title } from '@/components/ui/title';
+import { cn } from '@/lib/utils';
+import { motion } from 'framer-motion';
+import { bgGradientLine45deg } from '@/components/ui/gradient-line';
+
+
+export const AboutMeSection = () => {
+    const title = "About me!";
+
+    const description = `My name is <span className="text-primary font-semibold">Leat Sophat</span>, also known as <span className="text-primary font-semibold">PPhat</span>.
+        I'm a Senior Front-end Developer at <a href="https://turbotech.com.kh/" target="_blank" rel="noopener noreferrer">TURBOTECH CO., LTD</a>, and as a Freelance UI/UX Designer.
+        I'm from <a href="https://en.wikipedia.org/wiki/Phnom_Penh" target="_blank" rel="noopener noreferrer">Phnom Penh, Cambodia</a>.
+
+        I started my career as a Front-end Developer in 2021, and I have a passion for creating beautiful and functional user interfaces. I love to learn new technologies and improve my skills every day. I am also a big fan of open-source projects and I enjoy contributing to the community. I believe that sharing knowledge is the key to success in this field.
+    `;
+
+    return (
+        <motion.section
+            variants={{
+                hidden: { opacity: 0, y: 30 },
+                visible: {
+                    opacity: 0.9,
+                    y: 0,
+                    transition: { duration: 0.6, delay: 0.8, staggerChildren: 0.1 }
+                }
+            }}
+            initial="hidden"
+            animate="visible" className='mx-auto w-full bg-gradient-to-b from-background/5 to-primary/5 py-10'>
+            <div className="grid grid-cols-1 max-w-5xl mx-auto gap-8 items-start md:grid-cols-2">
+                <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 rotate-12 hover:rotate-0 duration-300 transition-all transform-3d rounded-4xl px-1 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 m-1 bg-no-repeat mask-size-[105%_100%] mask-center mask-no-repeat"
+                                style={{
+                                    backgroundSize: "contain",
+                                    backgroundImage: `url('/assets/avatars/krate-1.webp')`,
+                                    maskImage: `url('/assets/masks/mask.webp')`,
+                                }}
+                            />
+                        </div>
+                    </div>
+                    <div className='row-span-2'>
+                        <div className={cn("relative flex w-full h-full rounded-4xl 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={{
+                                    backgroundSize: "contain",
+                                    backgroundImage: `url('/assets/avatars/rom-lech.webp')`,
+                                    maskImage: `url('/assets/masks/mask.webp')`,
+                                }}
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <div className={cn("relative flex hover:scale-105 transition-all scale-3d aspect-square w-full rounded-4xl 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={{
+                                    backgroundSize: "cover",
+                                    backgroundImage: `url('/assets/avatars/kampot-2.webp')`,
+                                    maskImage: `url('/assets/masks/mask.webp')`,
+                                }}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className="flex gap-4 flex-col">
+                    <div className='px-5'>
+                        <Badge variant="outline" className='py-1.5 px-3'>{title}</Badge>
+                    </div>
+                    <div className="flex gap-4 flex-col">
+                        <Title as='h2' title={["Who", "the hell am I ?"]} description={description} />
+                    </div>
+                </div>
+            </div>
+        </motion.section>
+    )
+}
\ No newline at end of file
diff --git a/src/components/ui/gradient-line.tsx b/src/components/ui/gradient-line.tsx
new file mode 100644
index 0000000..7542e7a
--- /dev/null
+++ b/src/components/ui/gradient-line.tsx
@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+
+export const GradientLines = ({ className, }: { className?: string; }) => {
+    return (
+        <svg
+            width="166"
+            height="298"
+            viewBox="0 0 166 298"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={cn('pointer-events-none absolute inset-x-0 bottom-0 aspect-square h-[100px] w-full md:h-[200px]', className)}
+        >
+            <line y1="-0.5" x2="406" y2="-0.5" transform="matrix(0 1 1 0 1 -108)" stroke="url(#paint0_linear_254_143)" />
+            <line y1="-0.5" x2="406" y2="-0.5" transform="matrix(0 1 1 0 34 -108)" stroke="url(#paint1_linear_254_143)" />
+            <line y1="-0.5" x2="406" y2="-0.5" transform="matrix(0 1 1 0 67 -108)" stroke="url(#paint2_linear_254_143)" />
+            <line y1="-0.5" x2="406" y2="-0.5" transform="matrix(0 1 1 0 100 -108)" stroke="url(#paint3_linear_254_143)" />
+            <line y1="-0.5" x2="406" y2="-0.5" transform="matrix(0 1 1 0 133 -108)" stroke="url(#paint4_linear_254_143)" />
+            <line y1="-0.5" x2="406" y2="-0.5" transform="matrix(0 1 1 0 166 -108)" stroke="url(#paint5_linear_254_143)" />
+            <defs>
+                {[...Array(3)].map((_, i) => (
+                    <linearGradient
+                        key={i}
+                        id={`paint${i}_linear_254_143`}
+                        x1="-7.42412e-06"
+                        y1="0.500009"
+                        x2="405"
+                        y2="0.500009"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop stopColor="white" />
+                        <stop offset="1" stopOpacity="0" />
+                    </linearGradient>
+                ))}
+            </defs>
+        </svg>
+    );
+};
+
+export const bgGradientLine45deg = `bg-[size:8px_8px] bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,transparent_0,transparent_50%)]`
\ No newline at end of file
diff --git a/src/components/ui/title.tsx b/src/components/ui/title.tsx
new file mode 100644
index 0000000..659a23d
--- /dev/null
+++ b/src/components/ui/title.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+export const Title = ({ as = 'h2', title, description, className }: {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
+    title: string[],
+    description?: string
+    className?: string
+}) => {
+
+    const Heading = as;
+    const lastWord = title[title.length - 1];
+    // middle words are all the words except the last one
+    const middleWords = title.slice(0, title.length - 1).join(' ');
+
+    return (
+        <div className={cn(className)}>
+            <Heading className="max-md:mb-3 px-5 w-full py-3 max-md:text-3xl text-5xl tracking-tighter font-bold font-sans">
+                {middleWords} <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)]"> {lastWord}</span>
+            </Heading>
+
+            {description && <p className="max-md:mb-0 px-5 my-5 text-left text-foreground/90 tracking-normal [&>*]:hover:transition-all [&>a]:text-primary [&>a]:hover:font-semibold"
+                dangerouslySetInnerHTML={
+                    { __html: description.replace(/\n/g, '<br />'), }
+                }
+            />}
+        </div>
+    );
+}
\ No newline at end of file

From a343f70f1faf8059c56f335003b2ac9373752a58 Mon Sep 17 00:00:00 2001
From: pphatdev <pphat.kits@gmail.com>
Date: Fri, 4 Jul 2025 15:55:43 +0700
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20Open=20Graph=20Im?=
 =?UTF-8?q?age=20API=20with=20dynamic=20image=20generation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added @vercel/og package to package.json for Open Graph image generation.
- Created API endpoint at /api/og to generate dynamic Open Graph images based on query parameters.
- Implemented multiple layouts (Default, Blog, Project) for different use cases.
- Defined themes and default parameters for image generation.
- Added utility functions for generating Open Graph image URLs and meta tags.
- Included comprehensive README documentation for usage and examples.
---
 package-lock.json                | 212 ++++++++++++++++-
 package.json                     |   1 +
 src/app/api/og/README.md         | 247 ++++++++++++++++++++
 src/app/api/og/layouts/index.tsx | 377 +++++++++++++++++++++++++++++++
 src/app/api/og/route.tsx         |  64 ++++++
 src/app/api/og/types.ts          |  56 +++++
 src/lib/utils/og-image.ts        | 115 ++++++++++
 7 files changed, 1071 insertions(+), 1 deletion(-)
 create mode 100644 src/app/api/og/README.md
 create mode 100644 src/app/api/og/layouts/index.tsx
 create mode 100644 src/app/api/og/route.tsx
 create mode 100644 src/app/api/og/types.ts
 create mode 100644 src/lib/utils/og-image.ts

diff --git a/package-lock.json b/package-lock.json
index d4d9d19..364b2c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@types/canvas-confetti": "^1.9.0",
+        "@vercel/og": "^0.6.8",
         "axios": "^1.10.0",
         "canvas-confetti": "^1.9.3",
         "class-variance-authority": "^0.7.1",
@@ -1329,6 +1330,15 @@
         }
       }
     },
+    "node_modules/@resvg/resvg-wasm": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-wasm/-/resvg-wasm-2.4.0.tgz",
+      "integrity": "sha512-C7c51Nn4yTxXFKvgh2txJFNweaVcfUPQxwEUFw4aWsCmfiBDJsTSwviIF8EcwjQ6k8bPyMWCl1vw4BdxE569Cg==",
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1343,6 +1353,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@shuding/opentype.js": {
+      "version": "1.4.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@shuding/opentype.js/-/opentype.js-1.4.0-beta.0.tgz",
+      "integrity": "sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==",
+      "license": "MIT",
+      "dependencies": {
+        "fflate": "^0.7.3",
+        "string.prototype.codepointat": "^0.2.1"
+      },
+      "bin": {
+        "ot": "bin/ot"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -2239,6 +2265,20 @@
         "win32"
       ]
     },
+    "node_modules/@vercel/og": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@vercel/og/-/og-0.6.8.tgz",
+      "integrity": "sha512-e4kQK9mP8ntpo3dACWirGod/hHv4qO5JMj9a/0a2AZto7b4persj5YP7t1Er372gTtYFTYxNhMx34jRvHooglw==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "@resvg/resvg-wasm": "2.4.0",
+        "satori": "0.12.2",
+        "yoga-wasm-web": "0.3.3"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2561,6 +2601,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2655,6 +2704,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001721",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001721.tgz",
@@ -2768,7 +2826,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/color-string": {
@@ -2816,6 +2873,47 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-background-parser": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/css-background-parser/-/css-background-parser-0.1.0.tgz",
+      "integrity": "sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==",
+      "license": "MIT"
+    },
+    "node_modules/css-box-shadow": {
+      "version": "1.0.0-3",
+      "resolved": "https://registry.npmjs.org/css-box-shadow/-/css-box-shadow-1.0.0-3.tgz",
+      "integrity": "sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg==",
+      "license": "MIT"
+    },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-gradient-parser": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/css-gradient-parser/-/css-gradient-parser-0.0.16.tgz",
+      "integrity": "sha512-3O5QdqgFRUbXvK1x5INf1YkBz1UKSWqrd63vWsum8MNHDBYD5urm3QtxZbKU259OrEXNM26lP/MPY3d1IGkBgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3202,6 +3300,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3702,6 +3806,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz",
+      "integrity": "sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4121,6 +4231,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hex-rgb": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz",
+      "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4976,6 +5098,16 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -5497,6 +5629,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5510,6 +5648,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-css-color": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/parse-css-color/-/parse-css-color-0.2.1.tgz",
+      "integrity": "sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.1.4",
+        "hex-rgb": "^4.1.0"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5595,6 +5743,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5926,6 +6080,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/satori": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/satori/-/satori-0.12.2.tgz",
+      "integrity": "sha512-3C/laIeE6UUe9A+iQ0A48ywPVCCMKCNSTU5Os101Vhgsjd3AAxGNjyq0uAA8kulMPK5n0csn8JlxPN9riXEjLA==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "@shuding/opentype.js": "1.4.0-beta.0",
+        "css-background-parser": "^0.1.0",
+        "css-box-shadow": "1.0.0-3",
+        "css-gradient-parser": "^0.0.16",
+        "css-to-react-native": "^3.0.0",
+        "emoji-regex": "^10.2.1",
+        "escape-html": "^1.0.3",
+        "linebreak": "^1.1.0",
+        "parse-css-color": "^0.2.1",
+        "postcss-value-parser": "^4.2.0",
+        "yoga-wasm-web": "^0.3.3"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/satori/node_modules/emoji-regex": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -6196,6 +6378,12 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string.prototype.codepointat": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz",
+      "integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -6425,6 +6613,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -6655,6 +6849,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
     "node_modules/unrs-resolver": {
       "version": "1.7.12",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.7.12.tgz",
@@ -6891,6 +7095,12 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yoga-wasm-web": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/yoga-wasm-web/-/yoga-wasm-web-0.3.3.tgz",
+      "integrity": "sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==",
+      "license": "MIT"
     }
   }
 }
diff --git a/package.json b/package.json
index bbf6ae1..6aa77e4 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@types/canvas-confetti": "^1.9.0",
+    "@vercel/og": "^0.6.8",
     "axios": "^1.10.0",
     "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
diff --git a/src/app/api/og/README.md b/src/app/api/og/README.md
new file mode 100644
index 0000000..9e501e5
--- /dev/null
+++ b/src/app/api/og/README.md
@@ -0,0 +1,247 @@
+# Open Graph Image API
+
+This API generates dynamic Open Graph images for your website. It supports multiple layouts, themes, and customization options.
+
+## Usage
+
+The API is available at `/api/og` and accepts the following query parameters:
+
+### Basic Usage
+
+```
+/api/og?title=Your Title&subtitle=Your Subtitle
+```
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `title` | string | "Leat Sophat" | Main title text |
+| `subtitle` | string | "Full-Stack Developer" | Subtitle text |
+| `theme` | string | "dark" | Color theme: `dark`, `light`, `purple`, `green` |
+| `type` | string | "default" | Layout type: `default`, `blog`, `project` |
+| `author` | string | "Leat Sophat" | Author name (for blog layout) |
+| `date` | string | - | Date string (for blog layout) |
+| `tags` | string | - | Comma-separated tags (for project layout) |
+
+## Examples
+
+### Default Layout
+```
+/api/og?title=Welcome to My Site&subtitle=Full-Stack Developer
+```
+
+### Blog Post Layout
+```
+/api/og?type=blog&title=My Blog Post&subtitle=This is an awesome article&date=2025-01-01&author=Leat Sophat
+```
+
+### Project Layout
+```
+/api/og?type=project&title=My Project&subtitle=A cool web application&tags=React,Next.js,TypeScript
+```
+
+### Different Themes
+```
+/api/og?theme=light&title=Light Theme
+/api/og?theme=purple&title=Purple Theme
+/api/og?theme=green&title=Green Theme
+```
+
+## Using in Next.js Metadata
+
+### App Router (app directory)
+
+```tsx
+import { Metadata } from 'next';
+import { generateOGImageUrl, ogImagePresets } from '@/lib/utils/og-image';
+
+export const metadata: Metadata = {
+  title: 'My Page',
+  description: 'Page description',
+  openGraph: {
+    title: 'My Page',
+    description: 'Page description',
+    images: [
+      {
+        url: generateOGImageUrl(ogImagePresets.personal('My Page', 'Custom subtitle')),
+        width: 1200,
+        height: 630,
+        alt: 'My Page',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    images: [generateOGImageUrl(ogImagePresets.personal('My Page', 'Custom subtitle'))],
+  },
+};
+```
+
+### Dynamic Metadata
+
+```tsx
+import { generateOGImageUrl, ogImagePresets } from '@/lib/utils/og-image';
+
+export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
+  // Fetch your data
+  const post = await getPost(params.slug);
+  
+  return {
+    title: post.title,
+    description: post.excerpt,
+    openGraph: {
+      title: post.title,
+      description: post.excerpt,
+      images: [
+        {
+          url: generateOGImageUrl(ogImagePresets.blogPost(
+            post.title,
+            post.excerpt,
+            post.publishedAt
+          )),
+          width: 1200,
+          height: 630,
+          alt: post.title,
+        },
+      ],
+    },
+  };
+}
+```
+
+## Using the Utility Functions
+
+The package includes utility functions to make it easier to generate OG images:
+
+### generateOGImageUrl
+
+```tsx
+import { generateOGImageUrl } from '@/lib/utils/og-image';
+
+const imageUrl = generateOGImageUrl({
+  title: 'My Title',
+  subtitle: 'My Subtitle',
+  theme: 'dark',
+  type: 'blog'
+});
+```
+
+### Presets
+
+```tsx
+import { ogImagePresets } from '@/lib/utils/og-image';
+
+// Personal/Portfolio
+const personalImage = ogImagePresets.personal('John Doe', 'Developer');
+
+// Blog Post
+const blogImage = ogImagePresets.blogPost('My Post', 'Great content', '2025-01-01');
+
+// Project
+const projectImage = ogImagePresets.project('My App', 'Description', ['React', 'TypeScript']);
+
+// Themed variants
+const lightImage = ogImagePresets.light('Title', 'Subtitle');
+const purpleImage = ogImagePresets.purple('Title', 'Subtitle');
+const greenImage = ogImagePresets.green('Title', 'Subtitle');
+```
+
+### Meta Tags Generation
+
+```tsx
+import { generateOGMetaTags, ogImagePresets } from '@/lib/utils/og-image';
+
+const metaTags = generateOGMetaTags(
+  ogImagePresets.blogPost('My Post', 'Description'),
+  'https://sophat.top'
+);
+
+// Returns:
+// {
+//   'og:image': 'https://sophat.top/api/og?title=My+Post&subtitle=Description&theme=dark&type=blog&author=Leat+Sophat',
+//   'og:image:width': '1200',
+//   'og:image:height': '630',
+//   'og:image:type': 'image/png',
+//   'twitter:image': 'https://sophat.top/api/og?title=My+Post&subtitle=Description&theme=dark&type=blog&author=Leat+Sophat',
+//   'twitter:card': 'summary_large_image'
+// }
+```
+
+## Themes
+
+### Dark Theme (default)
+- Background: `#0a0a0a`
+- Primary text: `#ffffff`
+- Secondary text: `#a1a1aa`
+- Accent: `#3b82f6`
+
+### Light Theme
+- Background: `#ffffff`
+- Primary text: `#0a0a0a`
+- Secondary text: `#71717a`
+- Accent: `#3b82f6`
+
+### Purple Theme
+- Background: `#1a0a2e`
+- Primary text: `#ffffff`
+- Secondary text: `#c084fc`
+- Accent: `#a855f7`
+
+### Green Theme
+- Background: `#0f1419`
+- Primary text: `#ffffff`
+- Secondary text: `#86efac`
+- Accent: `#22c55e`
+
+## Layout Types
+
+### Default Layout
+- Centered title and subtitle
+- Decorative elements
+- Best for general pages
+
+### Blog Layout
+- Left-aligned content
+- Author and date information
+- Decorative avatar section
+- Best for blog posts and articles
+
+### Project Layout
+- Header with "PROJECT SHOWCASE" label
+- Centered content
+- Tech stack tags
+- Best for project showcases
+
+## Performance Notes
+
+- Images are generated on-demand using Vercel's Edge Runtime
+- Generated images are automatically cached by Vercel's CDN
+- The API is optimized for fast response times
+- Consider pre-generating images for static content if needed
+
+## Customization
+
+You can extend the API by:
+
+1. Adding new themes in `src/app/api/og/types.ts`
+2. Creating new layouts in `src/app/api/og/layouts/index.tsx`
+3. Adding new presets in `src/lib/utils/og-image.ts`
+
+## Error Handling
+
+The API includes error handling and will return a 500 status code with an error message if image generation fails. Common issues:
+
+- Invalid parameters
+- Text too long for the layout
+- Missing required dependencies
+
+## Browser Testing
+
+You can test the API directly in your browser:
+
+```
+http://localhost:3000/api/og?title=Test&subtitle=This is a test
+```
+
+The API will return a PNG image that you can view directly in the browser.
diff --git a/src/app/api/og/layouts/index.tsx b/src/app/api/og/layouts/index.tsx
new file mode 100644
index 0000000..0db19a3
--- /dev/null
+++ b/src/app/api/og/layouts/index.tsx
@@ -0,0 +1,377 @@
+import { Theme } from '../types';
+
+interface LayoutProps {
+    title: string;
+    subtitle: string;
+    theme: Theme;
+    author?: string;
+    date?: string;
+    tags?: string[];
+}
+
+export const DefaultLayout = ({ title, subtitle, theme }: LayoutProps) => (
+    <div
+        style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.bg,
+            fontSize: 32,
+            fontWeight: 600,
+            fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            position: 'relative',
+            overflow: 'hidden',
+        }}
+    >
+        {/* Background gradient */}
+        <div
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background: theme.gradient,
+                opacity: 0.1,
+            }}
+        />
+
+        {/* Main content */}
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                textAlign: 'center',
+                zIndex: 1,
+                padding: '0 80px',
+            }}
+        >
+            <h1
+                style={{
+                    fontSize: '72px',
+                    fontWeight: 800,
+                    color: theme.primary,
+                    marginBottom: '20px',
+                    lineHeight: 1.1,
+                    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }}
+            >
+                {title}
+            </h1>
+
+            <p
+                style={{
+                    fontSize: '32px',
+                    color: theme.secondary,
+                    marginBottom: '40px',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 3,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }}
+            >
+                {subtitle}
+            </p>
+
+            {/* Decorative elements */}
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '20px',
+                }}
+            >
+                <div
+                    style={{
+                        width: '60px',
+                        height: '4px',
+                        backgroundColor: theme.accent,
+                        borderRadius: '2px',
+                    }}
+                />
+                <div
+                    style={{
+                        fontSize: '24px',
+                        color: theme.accent,
+                        fontWeight: 600,
+                        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    }}
+                >
+                    sophat.top
+                </div>
+                <div
+                    style={{
+                        width: '60px',
+                        height: '4px',
+                        backgroundColor: theme.accent,
+                        borderRadius: '2px',
+                    }}
+                />
+            </div>
+        </div>
+    </div>
+);
+
+export const BlogLayout = ({ title, subtitle, theme, author, date }: LayoutProps) => (
+    <div
+        style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            backgroundColor: theme.bg,
+            position: 'relative',
+            fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        }}
+    >
+        {/* Left side - Content */}
+        <div
+            style={{
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                padding: '80px',
+            }}
+        >
+            <div
+                style={{
+                    fontSize: '24px',
+                    color: theme.accent,
+                    marginBottom: '20px',
+                    fontWeight: 600,
+                }}
+            >
+                BLOG POST
+            </div>
+            <h1
+                style={{
+                    fontSize: '56px',
+                    fontWeight: 800,
+                    color: theme.primary,
+                    lineHeight: 1.2,
+                    marginBottom: '30px',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }}
+            >
+                {title}
+            </h1>
+
+            <p
+                style={{
+                    fontSize: '28px',
+                    color: theme.secondary,
+                    marginBottom: '50px',
+                    lineHeight: 1.3,
+                    display: '-webkit-box',
+                    WebkitLineClamp: 3,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }}
+            >
+                {subtitle}
+            </p>
+
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '20px',
+                    fontSize: '20px',
+                    color: theme.secondary,
+                }}
+            >
+                <span>sophat.top</span>
+                <div
+                    style={{
+                        width: '6px',
+                        height: '6px',
+                        backgroundColor: theme.accent,
+                        borderRadius: '50%',
+                    }}
+                />
+                <span>{author || 'Leat Sophat'}</span>
+                {date && (
+                    <>
+                        <div
+                            style={{
+                                width: '6px',
+                                height: '6px',
+                                backgroundColor: theme.accent,
+                                borderRadius: '50%',
+                            }}
+                        />
+                        <span>{date}</span>
+                    </>
+                )}
+            </div>
+        </div>
+
+        {/* Right side - Decorative */}
+        <div
+            style={{
+                width: '300px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: theme.gradient,
+                position: 'relative',
+            }}
+        >
+            <div
+                style={{
+                    width: '200px',
+                    height: '200px',
+                    backgroundColor: theme.bg,
+                    borderRadius: '20px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '48px',
+                    color: theme.accent,
+                    fontWeight: 800,
+                }}
+            >
+                LS
+            </div>
+        </div>
+    </div>
+);
+
+export const ProjectLayout = ({ title, subtitle, theme, tags }: LayoutProps) => (
+    <div
+        style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: theme.bg,
+            position: 'relative',
+            fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        }}
+    >
+        {/* Header */}
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '40px 80px',
+                borderBottom: `2px solid ${theme.accent}20`,
+            }}
+        >
+            <div
+                style={{
+                    fontSize: '24px',
+                    color: theme.accent,
+                    fontWeight: 600,
+                }}
+            >
+                PROJECT SHOWCASE
+            </div>
+            <div
+                style={{
+                    fontSize: '20px',
+                    color: theme.secondary,
+                }}
+            >
+                sophat.top
+            </div>
+        </div>
+
+        {/* Main content */}
+        <div
+            style={{
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '0 80px',
+            }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    textAlign: 'center',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <h1
+                    style={{
+                        fontSize: '64px',
+                        fontWeight: 800,
+                        color: theme.primary,
+                        marginBottom: '30px',
+                        lineHeight: 1.5,
+                        display: '-webkit-box',
+                        WebkitLineClamp: 1,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        textAlign: 'center',
+                    }}
+                >
+                    {title}
+                </h1>
+                <p
+                    style={{
+                        fontSize: '32px',
+                        color: theme.secondary,
+                        marginBottom: '50px',
+                        lineHeight: 1.3,
+                        display: '-webkit-box',
+                        WebkitLineClamp: 3,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                    }}
+                >
+                    {subtitle}
+                </p>
+
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '20px',
+                        flexWrap: 'wrap',
+                    }}
+                >
+                    {(tags || ['React', 'Next.js', 'TypeScript']).slice(0, 4).map((tech, index) => (
+                        <div
+                            key={tech}
+                            style={{
+                                padding: '12px 24px',
+                                backgroundColor: theme.accent + '20',
+                                color: theme.accent,
+                                borderRadius: '8px',
+                                fontSize: '18px',
+                                fontWeight: 600,
+                            }}
+                        >
+                            {tech}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    </div>
+);
\ No newline at end of file
diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx
new file mode 100644
index 0000000..699f968
--- /dev/null
+++ b/src/app/api/og/route.tsx
@@ -0,0 +1,64 @@
+import { ImageResponse } from '@vercel/og';
+import { NextRequest } from 'next/server';
+import { themes, defaultParams } from './types';
+import { DefaultLayout, BlogLayout, ProjectLayout } from './layouts';
+
+export const runtime = 'edge';
+
+export async function GET(request: NextRequest) {
+    try {
+        const { searchParams } = new URL(request.url);
+
+        // Get parameters from query string
+        const title = searchParams.get('title') || defaultParams.title!;
+        const subtitle = searchParams.get('subtitle') || defaultParams.subtitle!;
+        const theme = searchParams.get('theme') || defaultParams.theme!;
+        const type = searchParams.get('type') || defaultParams.type!;
+        const author = searchParams.get('author') || defaultParams.author!;
+        const date = searchParams.get('date') || '';
+        const tagsParam = searchParams.get('tags') || '';
+        const tags = tagsParam ? tagsParam.split(',').map(tag => tag.trim()) : [];
+
+        const currentTheme = themes[theme as keyof typeof themes] || themes.dark;
+
+        // Select layout based on type
+        let selectedLayout;
+
+        switch (type) {
+            case 'blog':
+                selectedLayout = BlogLayout({
+                    title,
+                    subtitle,
+                    theme: currentTheme,
+                    author,
+                    date
+                });
+                break;
+            case 'project':
+                selectedLayout = ProjectLayout({
+                    title,
+                    subtitle,
+                    theme: currentTheme,
+                    tags
+                });
+                break;
+            default:
+                selectedLayout = DefaultLayout({
+                    title,
+                    subtitle,
+                    theme: currentTheme
+                });
+                break;
+        }
+
+        return new ImageResponse(selectedLayout, {
+            width: 1200,
+            height: 630,
+        });
+    } catch (e: any) {
+        console.log(`${e.message}`);
+        return new Response(`Failed to generate the image`, {
+            status: 500,
+        });
+    }
+}
diff --git a/src/app/api/og/types.ts b/src/app/api/og/types.ts
new file mode 100644
index 0000000..5bbe5f4
--- /dev/null
+++ b/src/app/api/og/types.ts
@@ -0,0 +1,56 @@
+export interface OGImageParams {
+    title?: string;
+    subtitle?: string;
+    theme?: 'dark' | 'light' | 'purple' | 'green';
+    type?: 'default' | 'blog' | 'project';
+    author?: string;
+    date?: string;
+    tags?: string[];
+}
+
+export interface Theme {
+    bg: string;
+    primary: string;
+    secondary: string;
+    accent: string;
+    gradient: string;
+}
+
+export const themes: Record<string, Theme> = {
+    dark: {
+        bg: '#0a0a0a',
+        primary: '#ffffff',
+        secondary: '#a1a1aa',
+        accent: '#3b82f6',
+        gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    },
+    light: {
+        bg: '#ffffff',
+        primary: '#0a0a0a',
+        secondary: '#71717a',
+        accent: '#3b82f6',
+        gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    },
+    purple: {
+        bg: '#1a0a2e',
+        primary: '#ffffff',
+        secondary: '#c084fc',
+        accent: '#a855f7',
+        gradient: 'linear-gradient(135deg, #9333ea 0%, #7c3aed 100%)',
+    },
+    green: {
+        bg: '#0f1419',
+        primary: '#ffffff',
+        secondary: '#86efac',
+        accent: '#22c55e',
+        gradient: 'linear-gradient(135deg, #16a34a 0%, #15803d 100%)',
+    },
+};
+
+export const defaultParams: OGImageParams = {
+    title: 'Leat Sophat',
+    subtitle: 'Full-Stack Developer',
+    theme: 'dark',
+    type: 'default',
+    author: 'Leat Sophat',
+};
diff --git a/src/lib/utils/og-image.ts b/src/lib/utils/og-image.ts
new file mode 100644
index 0000000..ae3df50
--- /dev/null
+++ b/src/lib/utils/og-image.ts
@@ -0,0 +1,115 @@
+import { OGImageParams } from '../../app/api/og/types';
+
+/**
+ * Generate an Open Graph image URL with the given parameters
+ */
+export function generateOGImageUrl(params: OGImageParams = {}, baseUrl?: string): string {
+    const {
+        title,
+        subtitle,
+        theme = 'dark',
+        type = 'default',
+        author,
+        date,
+        tags = [],
+    } = params;
+
+    const searchParams = new URLSearchParams();
+
+    if (title) searchParams.set('title', title);
+    if (subtitle) searchParams.set('subtitle', subtitle);
+    if (theme) searchParams.set('theme', theme);
+    if (type) searchParams.set('type', type);
+    if (author) searchParams.set('author', author);
+    if (date) searchParams.set('date', date);
+    if (tags.length > 0) searchParams.set('tags', tags.join(','));
+
+    const base = baseUrl || (typeof window !== 'undefined' ? window.location.origin : '');
+    const url = `${base}/api/og?${searchParams.toString()}`;
+
+    return url;
+}
+
+/**
+ * Pre-defined OG image configurations for common use cases
+ */
+export const ogImagePresets = {
+    /**
+     * Default personal/portfolio OG image
+     */
+    personal: (title?: string, subtitle?: string): OGImageParams => ({
+        title: title || 'Leat Sophat',
+        subtitle: subtitle || 'Full-Stack Developer',
+        theme: 'dark',
+        type: 'default',
+    }),
+
+    /**
+     * Blog post OG image
+     */
+    blogPost: (title: string, subtitle?: string, date?: string): OGImageParams => ({
+        title,
+        subtitle: subtitle || 'Read the full article on sophat.top',
+        theme: 'dark',
+        type: 'blog',
+        author: 'Leat Sophat',
+        date,
+    }),
+
+    /**
+     * Project showcase OG image
+     */
+    project: (title: string, subtitle?: string, tags?: string[]): OGImageParams => ({
+        title,
+        subtitle: subtitle || 'Check out this project',
+        theme: 'dark',
+        type: 'project',
+        tags: tags || ['React', 'Next.js', 'TypeScript'],
+    }),
+
+    /**
+     * Light theme variant
+     */
+    light: (title?: string, subtitle?: string): OGImageParams => ({
+        title: title || 'Leat Sophat',
+        subtitle: subtitle || 'Full-Stack Developer',
+        theme: 'light',
+        type: 'default',
+    }),
+
+    /**
+     * Purple theme variant
+     */
+    purple: (title?: string, subtitle?: string): OGImageParams => ({
+        title: title || 'Leat Sophat',
+        subtitle: subtitle || 'Full-Stack Developer',
+        theme: 'purple',
+        type: 'default',
+    }),
+
+    /**
+     * Green theme variant
+     */
+    green: (title?: string, subtitle?: string): OGImageParams => ({
+        title: title || 'Leat Sophat',
+        subtitle: subtitle || 'Full-Stack Developer',
+        theme: 'green',
+        type: 'default',
+    }),
+};
+
+/**
+ * Generate meta tags for Open Graph images
+ */
+export function generateOGMetaTags(params: OGImageParams, baseUrl?: string) {
+    const imageUrl = generateOGImageUrl(params, baseUrl);
+
+    return {
+        'og:image': imageUrl,
+        'og:image:width': '1200',
+        'og:image:height': '630',
+        'og:image:type': 'image/png',
+        'twitter:image': imageUrl,
+        'twitter:card': 'summary_large_image',
+    };
+}