Resume page
This commit is contained in:
239
routes/resume.tsx
Normal file
239
routes/resume.tsx
Normal file
@ -0,0 +1,239 @@
|
||||
import { Head } from "$fresh/runtime.ts";
|
||||
import { Handlers, PageProps } from "$fresh/server.ts";
|
||||
import {
|
||||
LuMail,
|
||||
LuGithub,
|
||||
LuLinkedin,
|
||||
LuGlobe,
|
||||
LuGitBranch,
|
||||
LuDownload,
|
||||
} from "@preact-icons/lu";
|
||||
|
||||
interface ResumeData {
|
||||
basics: {
|
||||
name: string;
|
||||
email: string;
|
||||
url?: { href: string };
|
||||
};
|
||||
sections: {
|
||||
summary: { name: string; content: string };
|
||||
profiles: { name: string; items: { network: string; username: string; url: { href: string } }[] };
|
||||
skills: { name: string; items: { id: string; name: string; level: number }[] };
|
||||
experience: { name: string; items: { id: string; company: string; position: string; date: string; location: string; summary: string; url?: { href: string } }[] };
|
||||
education: { name: string; items: { id: string; institution: string; studyType: string; area: string; date: string; summary: string }[] };
|
||||
volunteer: { name: string; items: { id: string; organization: string; position: string; date: string /* No summary here */ }[] };
|
||||
};
|
||||
}
|
||||
|
||||
export const handler: Handlers<ResumeData> = {
|
||||
async GET(_req, ctx) {
|
||||
try {
|
||||
const resp = await fetch(new URL("/files/resume.json", ctx.url).href);
|
||||
if (!resp.ok) {
|
||||
console.error(`Error fetching resume.json: ${resp.status} ${resp.statusText}`);
|
||||
return ctx.render(undefined);
|
||||
}
|
||||
const resumeData: ResumeData = await resp.json();
|
||||
const skillsSection = resumeData.sections.skills;
|
||||
if (skillsSection && skillsSection.items) {
|
||||
const tsSkill = skillsSection.items.find(s => s.name === "Typescrpt");
|
||||
if (tsSkill) {
|
||||
tsSkill.name = "Typescript";
|
||||
}
|
||||
}
|
||||
return ctx.render(resumeData);
|
||||
} catch (error) {
|
||||
console.error("Error processing resume data:", error);
|
||||
return ctx.render(undefined);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default function ResumePage({ data }: PageProps<ResumeData | undefined>) {
|
||||
if (!data) {
|
||||
return (
|
||||
<>
|
||||
<Head><title>Error Loading Resume</title></Head>
|
||||
<div class="container mx-auto p-4 max-w-4xl text-center">
|
||||
<h1 class="text-2xl font-bold text-error">Error loading resume data.</h1>
|
||||
<p>Please try refreshing the page.</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const { basics, sections } = data;
|
||||
const { summary, profiles, skills, experience, education, volunteer } = sections;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{basics.name} - Resume</title>
|
||||
<meta name="description" content={`${basics.name}'s professional resume.`} />
|
||||
</Head>
|
||||
<div class="container mx-auto p-4 max-w-4xl">
|
||||
<h1 class="text-4xl font-bold mb-6 text-center">{basics.name}</h1>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div class="flex justify-center items-center flex-wrap gap-x-4 gap-y-2 mb-6">
|
||||
{basics.email && (
|
||||
<a href={`mailto:${basics.email}`} class="link link-hover inline-flex items-center gap-1">
|
||||
<LuMail /> {basics.email}
|
||||
</a>
|
||||
)}
|
||||
{profiles.items.find(p => p.network === "GitHub") && (
|
||||
<a href={profiles.items.find(p => p.network === "GitHub")!.url.href} target="_blank" rel="noopener noreferrer" class="link link-hover inline-flex items-center gap-1">
|
||||
<LuGithub /> GitHub
|
||||
</a>
|
||||
)}
|
||||
{profiles.items.find(p => p.network === "linkedin") && (
|
||||
<a href={profiles.items.find(p => p.network === "linkedin")!.url.href} target="_blank" rel="noopener noreferrer" class="link link-hover inline-flex items-center gap-1">
|
||||
<LuLinkedin /> LinkedIn
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Download Resume Button */}
|
||||
<div class="text-center mb-8">
|
||||
<a
|
||||
href="/files/Atridad_Lahiji_Resume_Public.pdf"
|
||||
download="Atridad_Lahiji_Resume.pdf"
|
||||
class="btn btn-primary inline-flex items-center gap-2"
|
||||
>
|
||||
<LuDownload /> Download Resume (PDF)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Summary Card */}
|
||||
{summary && (
|
||||
<div class="card bg-base-200 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl">{summary.name || "Summary"}</h2>
|
||||
<div dangerouslySetInnerHTML={{ __html: summary.content }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Profiles Card */}
|
||||
{profiles && profiles.items && profiles.items.length > 0 && (
|
||||
<div class="card bg-base-200 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl">{profiles.name || "Profiles"}</h2>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
{profiles.items.map((profile) => {
|
||||
let IconComponent = LuGlobe;
|
||||
const networkLower = profile.network.toLowerCase();
|
||||
if (networkLower === "github") IconComponent = LuGithub;
|
||||
else if (networkLower === "linkedin") IconComponent = LuLinkedin;
|
||||
else if (networkLower === "forgejo") IconComponent = LuGitBranch;
|
||||
|
||||
return (
|
||||
<a
|
||||
key={profile.network}
|
||||
href={profile.url.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link link-hover inline-flex items-center gap-1"
|
||||
>
|
||||
<IconComponent /> {profile.network} ({profile.username})
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Skills Card */}
|
||||
{skills && skills.items && skills.items.length > 0 && (
|
||||
<div class="card bg-base-200 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl">{skills.name || "Skills"}</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{skills.items.map((skill) => (
|
||||
<div key={skill.id || skill.name}>
|
||||
<label class="label">
|
||||
<span class="label-text">{skill.name}</span>
|
||||
</label>
|
||||
<progress
|
||||
class="progress progress-primary w-full"
|
||||
value={skill.level * 20}
|
||||
max="100"
|
||||
>
|
||||
</progress>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Experience Card */}
|
||||
{experience && experience.items && experience.items.length > 0 && (
|
||||
<div class="card bg-base-200 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl">{experience.name || "Experience"}</h2>
|
||||
<div class="space-y-4">
|
||||
{experience.items.map((exp, index) => (
|
||||
<div key={exp.id || index} class="collapse collapse-arrow bg-base-100">
|
||||
<input type="radio" name="resume-accordion-experience" checked={index === 0} readOnly />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
{exp.position} at {exp.company} ({exp.date})
|
||||
{exp.location && (
|
||||
<span class="text-sm font-normal float-right pt-1">{exp.location}</span>
|
||||
)}
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
{exp.url && exp.url.href && (
|
||||
<a href={exp.url.href} target="_blank" rel="noopener noreferrer" class="link link-primary block mb-2">{exp.url.href}</a>
|
||||
)}
|
||||
<div dangerouslySetInnerHTML={{ __html: exp.summary }}></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Education Card */}
|
||||
{education && education.items && education.items.length > 0 && (
|
||||
<div class="card bg-base-200 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl">{education.name || "Education"}</h2>
|
||||
<div class="space-y-4">
|
||||
{education.items.map((edu, index) => (
|
||||
<div key={edu.id || index}>
|
||||
<h3 class="text-lg font-semibold">{edu.institution}</h3>
|
||||
<p>{edu.studyType} - {edu.area} ({edu.date})</p>
|
||||
{edu.summary && (
|
||||
<div class="ml-4 text-sm mt-1" dangerouslySetInnerHTML={{ __html: edu.summary }}></div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Volunteering Card */}
|
||||
{volunteer && volunteer.items && volunteer.items.length > 0 && (
|
||||
<div class="card bg-base-200 shadow-xl mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl">{volunteer.name || "Volunteering"}</h2>
|
||||
<div class="space-y-4">
|
||||
{volunteer.items.map((vol, index) => (
|
||||
<div key={vol.id || index}>
|
||||
<h3 class="text-lg font-semibold">{vol.organization}</h3>
|
||||
<p>{vol.position} ({vol.date})</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user