diff --git a/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx b/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx index a01f5225..4d39f7a3 100644 --- a/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx +++ b/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx @@ -20,8 +20,8 @@ export const ResumePDFProfile = ({ themeColor: string; isPDF: boolean; }) => { - const { name, email, phone, url, summary, location } = profile; - const iconProps = { email, phone, location, url }; + const { name, email, phone, portfolioLink, linkedinLink, githubLink, summary, location } = profile; + const iconProps = { email, phone, location,portfolioLink, linkedinLink, githubLink }; return ( @@ -38,21 +38,28 @@ export const ResumePDFProfile = ({ ...styles.flexRowBetween, flexWrap: "wrap", marginTop: spacing["0.5"], + justifyContent: "center", + alignContent: "center", + gap:spacing["2.5"], }} > {Object.entries(iconProps).map(([key, value]) => { if (!value) return null; let iconType = key as IconType; - if (key === "url") { - if (value.includes("github")) { - iconType = "url_github"; - } else if (value.includes("linkedin")) { + switch (key) { + case "portfolioLink": + iconType = "url"; + break; + case "linkedinLink": iconType = "url_linkedin"; - } + break; + case "githubLink": + iconType = "url_github"; + break; } - const shouldUseLinkWrapper = ["email", "url", "phone"].includes(key); + const shouldUseLinkWrapper = ["email", "phone", "portfolioLink", "linkedinLink", "githubLink"].includes(key); const Wrapper = ({ children }: { children: React.ReactNode }) => { if (!shouldUseLinkWrapper) return <>{children}; @@ -66,6 +73,14 @@ export const ResumePDFProfile = ({ src = `tel:${value.replace(/[^\d+]/g, "")}`; // Keep only + and digits break; } + case "linkedinLink": { + src = value.startsWith("http") ? value : `https://www.linkedin.com/in/${value}`; + break; + } + case "githubLink": { + src = value.startsWith("http") ? value : `https://github.com/${value}`; + break; + } default: { src = value.startsWith("http") ? value : `https://${value}`; } @@ -83,8 +98,8 @@ export const ResumePDFProfile = ({ key={key} style={{ ...styles.flexRow, - alignItems: "center", - gap: spacing["1"], + gap: spacing["2"], + flex: "0 1 calc(33.333% - 10px)", }} > diff --git a/src/app/components/ResumeForm/ProfileForm.tsx b/src/app/components/ResumeForm/ProfileForm.tsx index c7461d87..831d9caf 100644 --- a/src/app/components/ResumeForm/ProfileForm.tsx +++ b/src/app/components/ResumeForm/ProfileForm.tsx @@ -7,7 +7,7 @@ import { ResumeProfile } from "lib/redux/types"; export const ProfileForm = () => { const profile = useAppSelector(selectProfile); const dispatch = useAppDispatch(); - const { name, email, phone, url, summary, location } = profile; + const { name, email, phone, summary, location, portfolioLink, linkedinLink, githubLink } = profile; const handleProfileChange = (field: keyof ResumeProfile, value: string) => { dispatch(changeProfile({ field, value })); @@ -49,11 +49,11 @@ export const ProfileForm = () => { onChange={handleProfileChange} /> { value={location} onChange={handleProfileChange} /> + + ); diff --git a/src/app/lib/redux/types.ts b/src/app/lib/redux/types.ts index 45b11f24..4ea379c6 100644 --- a/src/app/lib/redux/types.ts +++ b/src/app/lib/redux/types.ts @@ -2,9 +2,11 @@ export interface ResumeProfile { name: string; email: string; phone: string; - url: string; summary: string; location: string; + portfolioLink: string; + linkedinLink: string; + githubLink: string; } export interface ResumeWorkExperience {