Skip to content

Commit 137d24a

Browse files
pphatdevpphatdev
committed
feat: enhance personal information display and structured data across the application
1 parent c0cb67c commit 137d24a

7 files changed

Lines changed: 129 additions & 26 deletions

File tree

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import { bgGradientLine45deg } from '@components/background/gradient-line';
22
import { Badge } from '@components/ui/badge';
33
import { RainbowGlow } from '@components/ui/rainbow-glow';
4+
import { PERSON_ALTERNATE_NAME, PERSON_IMAGE, PERSON_NAME, PERSON_RELEGIEN_NAME, PERSON_SHORT_NAME } from '@lib/constants';
45
import { Title } from '@components/ui/title';
56
import { cn } from '@lib/utils';
7+
import Image from 'next/image';
68
import Link from 'next/link';
79

810

911
export const HomeAboutMe = () => {
1012
const title = "About me!";
1113

12-
const description = <p> My name is <span className="text-primary font-semibold">Leat Sophat</span>, also known as <span className="text-primary font-semibold">PPhat</span>.
14+
const description = <p> My name is <span className="text-primary font-semibold">{PERSON_NAME}</span>, my relegien name is <span className="text-primary font-semibold">{PERSON_RELEGIEN_NAME}</span>, and I&apos;m known online as <span className="text-primary font-semibold">{PERSON_ALTERNATE_NAME}</span>.
1315
I'm a Senior Front-end Developer at <Link href="https://turbotech.com.kh/" target="_blank" rel="noopener noreferrer">TURBOTECH CO., LTD</Link>, and as a Freelance UI/UX Designer.
1416
I'm from <Link href="https://en.wikipedia.org/wiki/Phnom_Penh" target="_blank" rel="noopener noreferrer">Phnom Penh, Cambodia</Link>.
15-
17+
<br/>
1618
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.
1719
</p>;
1820

@@ -26,6 +28,9 @@ export const HomeAboutMe = () => {
2628
</div>
2729
<div className="flex gap-4 flex-col">
2830
<Title as='h2' title={["Who", "the hell am I ?"]} description={description} />
31+
<p className="sr-only">
32+
{PERSON_NAME}, {PERSON_RELEGIEN_NAME}, {PERSON_ALTERNATE_NAME}, {PERSON_SHORT_NAME}
33+
</p>
2934
</div>
3035
<div className="flex flex-row gap-4 px-5">
3136
<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>
@@ -34,13 +39,20 @@ export const HomeAboutMe = () => {
3439
<div className="grid grid-cols-2 max-md:gap-5 max-lg:gap-2 gap-8 max-md:p-5">
3540
<div>
3641
<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)}>
37-
<div
38-
className="h-full w-full bg-center m-1 bg-no-repeat mask-size-[105%_100%] mask-center mask-no-repeat"
42+
<Image
43+
src={PERSON_IMAGE}
44+
alt={`Profile photo of ${PERSON_NAME} (${PERSON_RELEGIEN_NAME}), known online as ${PERSON_ALTERNATE_NAME}`}
45+
fill
46+
sizes="(max-width: 768px) 100vw, 50vw"
47+
className="object-contain m-1"
3948
style={{
40-
backgroundSize: "contain",
41-
backgroundImage: `url('/assets/avatars/krate-1.webp')`,
4249
maskImage: `url('/assets/masks/mask.webp')`,
50+
maskSize: '105% 100%',
51+
maskPosition: 'center',
52+
maskRepeat: 'no-repeat'
4353
}}
54+
loading="eager"
55+
priority
4456
/>
4557
</div>
4658
</div>

‎src/app/about/page.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,32 @@ import { AboutMeHero } from "@components/heros/about-hero";
33
import { AboutTimeline } from "./sections/timeline";
44
import { BlurFade } from '@components/ui/blur-fade';
55
import { Metadata } from "next";
6-
import { appName, NEXT_PUBLIC_APP_URL } from "@lib/constants";
6+
import { appName, NEXT_PUBLIC_APP_URL, PERSON_ALTERNATE_NAME, PERSON_IMAGE, PERSON_NAME, PERSON_RELEGIEN_NAME } from "@lib/constants";
77
import AboutStructuredData from "@components/about-structured-data";
88
import BreadcrumbStructuredData from "@components/breadcrumb-structured-data";
99
import Footer from "src/components/layouts/footer";
1010

1111
const appPositions = ["I'm a Senior Front-end Developer", "and a Freelance UI/UX Designer."];
12-
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>.
12+
const description = `My name is <span className="text-primary font-semibold">${PERSON_NAME}</span>, my relegien name is <span className="text-primary font-semibold">${PERSON_RELEGIEN_NAME}</span>, and I am known online as <span className="text-primary font-semibold">${PERSON_ALTERNATE_NAME}</span>.
1313
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.
1414
I'm from <a href="https://en.wikipedia.org/wiki/Phnom_Penh" target="_blank" rel="noopener noreferrer">Phnom Penh, Cambodia</a>.
1515
1616
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.
1717
`;
1818

19-
const aboutDescription = "I am Leat Sophat (PPhat), a Senior Front-end Developer and Freelance UI/UX Designer from Phnom Penh, Cambodia. Learn more about my journey, skills, and experience.";
20-
const aboutImage = `${NEXT_PUBLIC_APP_URL}/assets/screenshots/about-light.png`;
19+
const aboutDescription = `I am ${PERSON_NAME} (${PERSON_RELEGIEN_NAME}, ${PERSON_ALTERNATE_NAME}), a Senior Front-end Developer and Freelance UI/UX Designer from Phnom Penh, Cambodia. Learn more about my journey, skills, and experience.`;
20+
const aboutImage = `${NEXT_PUBLIC_APP_URL}${PERSON_IMAGE}`;
2121

2222
export const metadata: Metadata = {
2323
title: `About ${appName}`,
2424
description: aboutDescription,
25+
keywords: [
26+
PERSON_NAME,
27+
PERSON_RELEGIEN_NAME,
28+
PERSON_ALTERNATE_NAME,
29+
`About ${PERSON_NAME}`,
30+
`About ${PERSON_RELEGIEN_NAME}`
31+
],
2532
alternates: {
2633
canonical: `${NEXT_PUBLIC_APP_URL}/about`,
2734
},

‎src/app/layout.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { homeHome } from "../lib/meta/home";
77
import { aladin, kantumruyPro, poppins, srisakdi, openSans } from "../lib/fonts";
88
import { cn } from "../lib/utils";
99
import GoogleIndexingVerification from "../components/google-indexing-verification";
10+
import { GITHUB_URL, LINKEDIN_URL, NEXT_PUBLIC_APP_URL, PERSON_IMAGE, TWITTER_URL } from "@lib/constants";
1011
export { viewport } from "../lib/meta/viewport";
1112
export const metadata: Metadata = homeHome;
1213

@@ -22,6 +23,10 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
2223
/>
2324
<link rel="dns-prefetch" href="https://pphat.me" />
2425
<GoogleIndexingVerification />
26+
<link rel="me" href={GITHUB_URL} />
27+
<link rel="me" href={LINKEDIN_URL} />
28+
<link rel="me" href={TWITTER_URL} />
29+
<link rel="image_src" href={`${NEXT_PUBLIC_APP_URL}${PERSON_IMAGE}`} />
2530
<link rel="alternate" type="application/rss+xml" title="PPhat Dev RSS" href="https://pphat.me/rss.xml" />
2631
<link rel="alternate" type="application/atom+xml" title="PPhat Dev Atom" href="https://pphat.me/atom.xml" />
2732
<link rel="alternate" type="application/feed+json" title="PPhat Dev JSON Feed" href="https://pphat.me/feed.json" />

‎src/components/about-structured-data.tsx‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ import {
44
NEXT_PUBLIC_APP_URL,
55
PERSON_NAME,
66
PERSON_ALTERNATE_NAME,
7+
PERSON_RELEGIEN_NAME,
8+
PERSON_SHORT_NAME,
9+
PERSON_NAME_VARIANTS,
10+
PERSON_GIVEN_NAME,
11+
PERSON_FAMILY_NAME,
712
PERSON_JOB_TITLE,
813
PERSON_IMAGE,
914
COMPANY_NAME,
@@ -21,17 +26,42 @@ export default function AboutStructuredData() {
2126
"name": `About ${appName}`,
2227
"description": `I'm ${PERSON_NAME} (${PERSON_ALTERNATE_NAME}), a ${PERSON_JOB_TITLE}.`,
2328
"url": `${NEXT_PUBLIC_APP_URL}/about`,
24-
"image": personImageUrl,
29+
"mainEntityOfPage": `${NEXT_PUBLIC_APP_URL}/about`,
30+
"primaryImageOfPage": {
31+
"@type": "ImageObject",
32+
"url": personImageUrl,
33+
"contentUrl": personImageUrl,
34+
"caption": `${PERSON_NAME} profile photo`
35+
},
36+
"image": {
37+
"@type": "ImageObject",
38+
"url": personImageUrl,
39+
"contentUrl": personImageUrl,
40+
"caption": `${PERSON_NAME} profile photo`
41+
},
2542
"dateCreated": "2021-01-01T00:00:00Z",
2643
"dateModified": new Date().toISOString(),
2744
"mainEntity": {
2845
"@type": "Person",
2946
"@id": `${NEXT_PUBLIC_APP_URL}#person`,
3047
"name": PERSON_NAME,
31-
"alternateName": PERSON_ALTERNATE_NAME,
48+
"givenName": PERSON_GIVEN_NAME,
49+
"familyName": PERSON_FAMILY_NAME,
50+
"alternateName": Array.from(new Set([
51+
PERSON_RELEGIEN_NAME,
52+
PERSON_ALTERNATE_NAME,
53+
PERSON_SHORT_NAME,
54+
...PERSON_NAME_VARIANTS
55+
])),
56+
"additionalName": PERSON_ALTERNATE_NAME,
3257
"description": `I'm ${PERSON_NAME} (${PERSON_ALTERNATE_NAME}), a ${PERSON_JOB_TITLE}.`,
3358
"jobTitle": PERSON_JOB_TITLE,
34-
"image": personImageUrl,
59+
"image": {
60+
"@type": "ImageObject",
61+
"url": personImageUrl,
62+
"contentUrl": personImageUrl,
63+
"caption": `${PERSON_NAME} profile photo`
64+
},
3565
"worksFor": {
3666
"@type": "Organization",
3767
"name": COMPANY_NAME,

‎src/components/home-person-structured-data.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import {
33
NEXT_PUBLIC_APP_URL,
44
PERSON_NAME,
55
PERSON_ALTERNATE_NAME,
6+
PERSON_RELEGIEN_NAME,
7+
PERSON_SHORT_NAME,
8+
PERSON_NAME_VARIANTS,
9+
PERSON_GIVEN_NAME,
10+
PERSON_FAMILY_NAME,
611
PERSON_JOB_TITLE,
712
PERSON_IMAGE,
813
CONTACT_EMAIL,
@@ -22,16 +27,37 @@ import {
2227
} from '@lib/constants';
2328

2429
export default function HomePersonStructuredData() {
30+
const profileImageUrl = `${NEXT_PUBLIC_APP_URL}${PERSON_IMAGE}`;
31+
2532
const structuredData = {
2633
"@context": "https://schema.org",
2734
"@type": "Person",
2835
"@id": `${NEXT_PUBLIC_APP_URL}#person`,
2936
"name": PERSON_NAME,
30-
"alternateName": PERSON_ALTERNATE_NAME,
37+
"givenName": PERSON_GIVEN_NAME,
38+
"familyName": PERSON_FAMILY_NAME,
39+
"alternateName": Array.from(new Set([
40+
PERSON_RELEGIEN_NAME,
41+
PERSON_ALTERNATE_NAME,
42+
PERSON_SHORT_NAME,
43+
...PERSON_NAME_VARIANTS
44+
])),
45+
"additionalName": PERSON_ALTERNATE_NAME,
3146
"jobTitle": PERSON_JOB_TITLE,
3247
"description": `${PERSON_NAME} (${PERSON_ALTERNATE_NAME}) is the creator of pphat.me and a ${PERSON_JOB_TITLE} based in Phnom Penh, Cambodia.`,
3348
"url": NEXT_PUBLIC_APP_URL,
34-
"image": `${NEXT_PUBLIC_APP_URL}${PERSON_IMAGE}`,
49+
"image": {
50+
"@type": "ImageObject",
51+
"url": profileImageUrl,
52+
"contentUrl": profileImageUrl,
53+
"caption": `${PERSON_NAME} profile photo`
54+
},
55+
"mainEntityOfPage": `${NEXT_PUBLIC_APP_URL}/about`,
56+
"subjectOf": `${NEXT_PUBLIC_APP_URL}/about`,
57+
"hasCredential": [
58+
"Senior Front-end Developer",
59+
"Freelance UI/UX Designer"
60+
],
3561
"owns": {
3662
"@type": "WebSite",
3763
"@id": `${NEXT_PUBLIC_APP_URL}#website`

‎src/lib/constants.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,18 @@ export const CONTACT_PHONE = process.env.CONTACT_PHONE || '+855 96918 3363';
88
export const CONTACT_LOCATION = process.env.CONTACT_LOCATION || 'Phnom Penh, Cambodia';
99

1010
// Personal information
11-
export const PERSON_NAME = process.env.PERSON_NAME || "Leat Sophat";
11+
export const PERSON_NAME = process.env.PERSON_NAME || "Sophat LEAT";
1212
export const PERSON_ALTERNATE_NAME = process.env.PERSON_ALTERNATE_NAME || "PPhat";
13+
export const PERSON_RELEGIEN_NAME = process.env.PERSON_RELEGIEN_NAME || "LEAT Sophat";
14+
export const PERSON_SHORT_NAME = process.env.PERSON_SHORT_NAME || "Sophat";
15+
export const PERSON_NAME_VARIANTS = [
16+
"Sophat LEAT",
17+
"LEAT Sophat",
18+
"PPhat",
19+
"Sophat"
20+
];
21+
export const PERSON_GIVEN_NAME = process.env.PERSON_GIVEN_NAME || "Sophat";
22+
export const PERSON_FAMILY_NAME = process.env.PERSON_FAMILY_NAME || "LEAT";
1323
export const PERSON_JOB_TITLE = process.env.PERSON_JOB_TITLE || "Senior Front-end Developer";
1424
export const PERSON_IMAGE = process.env.PERSON_IMAGE || "/assets/avatars/hero.webp";
1525

‎src/lib/meta/home.ts‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import { Metadata } from "next";
2-
import { appDescriptions, appName, appPositions, NEXT_PUBLIC_APP_URL } from "../constants";
2+
import {
3+
appDescriptions,
4+
appName,
5+
appPositions,
6+
NEXT_PUBLIC_APP_URL,
7+
PERSON_ALTERNATE_NAME,
8+
PERSON_IMAGE,
9+
PERSON_NAME,
10+
PERSON_RELEGIEN_NAME
11+
} from "../constants";
312
import { icons } from "./icons";
413
import { keywords } from "./keywords";
514

15+
const profileImage = `${new URL(NEXT_PUBLIC_APP_URL)}${PERSON_IMAGE}`;
16+
617
export const homeHome: Metadata = {
718
metadataBase: new URL(NEXT_PUBLIC_APP_URL),
819
title: {
@@ -12,8 +23,10 @@ export const homeHome: Metadata = {
1223
description: appDescriptions,
1324
keywords: [
1425
...keywords,
15-
"Leat Sophat",
16-
"PPhat",
26+
PERSON_NAME,
27+
PERSON_RELEGIEN_NAME,
28+
PERSON_ALTERNATE_NAME,
29+
"Sophat",
1730
"Senior Front-end Developer",
1831
"UI/UX Designer",
1932
"Web Developer",
@@ -45,16 +58,16 @@ export const homeHome: Metadata = {
4558
description: appDescriptions,
4659
siteName: appName,
4760
images: [
61+
{
62+
url: profileImage,
63+
width: 1200,
64+
height: 1200,
65+
alt: `${PERSON_NAME} profile photo`
66+
},
4867
{
4968
url: `${new URL(NEXT_PUBLIC_APP_URL)}/assets/screenshots/origin-dark.png`,
5069
width: 1900,
5170
height: 926,
52-
alt: appName
53-
},
54-
{
55-
url: `${new URL(NEXT_PUBLIC_APP_URL)}/assets/avatars/hero.webp`,
56-
width: 800,
57-
height: 600,
5871
alt: `${appName} - ${appPositions.join(' & ')}`
5972
}
6073
],
@@ -64,7 +77,7 @@ export const homeHome: Metadata = {
6477
card: 'summary_large_image',
6578
site: '@pphatdev',
6679
creator: '@pphatdev',
67-
images: ['/assets/screenshots/origin-dark.png']
80+
images: [profileImage]
6881
},
6982
other: {
7083
'google-site-verification': process.env.GOOGLE_SITE_VERIFICATION || ''

0 commit comments

Comments
 (0)