feat: integrate Strapi CMS for dynamic portfolio data
This commit is contained in:
@@ -1,24 +1,43 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { computeDuration, formatDate, CONTACT_EMAIL } from '#/data/portfolio'
|
||||
import type { TExperience, TEducation, TSkillGroup } from '#/types/strapi'
|
||||
import type { TExperience, TEducation, TSkill } from '#/types/strapi'
|
||||
import {
|
||||
fetchExperiences,
|
||||
fetchEducations,
|
||||
fetchSkillGroups,
|
||||
fetchProfile,
|
||||
} from '#/data/loaders/portfolio'
|
||||
|
||||
export const Route = createFileRoute('/')({
|
||||
loader: async () => {
|
||||
const [experiences, educations, skillGroups] = await Promise.all([
|
||||
const [experiences, educations, profile] = await Promise.all([
|
||||
fetchExperiences(),
|
||||
fetchEducations(),
|
||||
fetchSkillGroups(),
|
||||
fetchProfile(),
|
||||
])
|
||||
return { experiences, educations, skillGroups }
|
||||
return { experiences, educations, profile }
|
||||
},
|
||||
errorComponent: StrapiErrorPage,
|
||||
component: HomePage,
|
||||
})
|
||||
|
||||
// ── Error page ────────────────────────────────────────────────────────────
|
||||
|
||||
function StrapiErrorPage() {
|
||||
return (
|
||||
<div className="page-wrap flex min-h-[60vh] flex-col items-center justify-center gap-4 text-center">
|
||||
<p className="island-kicker">Service Unavailable</p>
|
||||
<h1 className="display-title text-4xl">We'll be right back</h1>
|
||||
<p
|
||||
style={{ color: 'var(--sea-ink-soft)' }}
|
||||
className="max-w-md text-base"
|
||||
>
|
||||
The portfolio data is temporarily unavailable. Please check back in a
|
||||
few minutes.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Shared UI primitives ──────────────────────────────────────────────────
|
||||
|
||||
type ButtonVariant = 'primary' | 'ghost'
|
||||
@@ -77,7 +96,7 @@ function SectionHeading({
|
||||
|
||||
// ── Experience card ───────────────────────────────────────────────────────
|
||||
|
||||
const EMPLOYMENT_TYPE_LABEL: Record<TExperience['employmentType'], string> = {
|
||||
const EMPLOYMENT_TYPE_LABEL: Record<'full-time' | 'part-time', string> = {
|
||||
'full-time': 'Full-time',
|
||||
'part-time': 'Part-time',
|
||||
}
|
||||
@@ -89,9 +108,11 @@ function ExperienceCard({
|
||||
readonly exp: TExperience
|
||||
readonly index: number
|
||||
}) {
|
||||
const duration = computeDuration(exp.startDate, exp.endDate ?? undefined)
|
||||
const startLabel = formatDate(exp.startDate)
|
||||
const endLabel = exp.endDate ? formatDate(exp.endDate) : 'Present'
|
||||
const startIso = exp.startDate.slice(0, 7)
|
||||
const endIso = exp.endDate?.slice(0, 7)
|
||||
const duration = computeDuration(startIso, endIso)
|
||||
const startLabel = formatDate(startIso)
|
||||
const endLabel = endIso ? formatDate(endIso) : 'Present'
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -113,9 +134,11 @@ function ExperienceCard({
|
||||
{exp.role}
|
||||
</h3>
|
||||
</div>
|
||||
<span className="mt-0.5 flex-shrink-0 rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-2.5 py-0.5 text-xs font-semibold text-[var(--sea-ink-soft)]">
|
||||
{EMPLOYMENT_TYPE_LABEL[exp.employmentType]}
|
||||
</span>
|
||||
{exp.type != null && (
|
||||
<span className="mt-0.5 flex-shrink-0 rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-2.5 py-0.5 text-xs font-semibold text-[var(--sea-ink-soft)]">
|
||||
{EMPLOYMENT_TYPE_LABEL[exp.type]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--sea-ink-soft)]">
|
||||
@@ -124,28 +147,26 @@ function ExperienceCard({
|
||||
</span>
|
||||
<span className="h-1 w-1 rounded-full bg-[var(--lagoon)]" />
|
||||
<span>{duration}</span>
|
||||
<span className="h-1 w-1 rounded-full bg-[var(--lagoon)]" />
|
||||
<span>{exp.location}</span>
|
||||
</div>
|
||||
|
||||
{exp.bullets.length > 0 && (
|
||||
{exp.objectives.length > 0 && (
|
||||
<ul className="mb-3 ml-0 list-none space-y-1.5 p-0">
|
||||
{exp.bullets.map((bullet) => (
|
||||
{exp.objectives.map((obj) => (
|
||||
<li
|
||||
key={bullet}
|
||||
key={obj.id}
|
||||
className="flex gap-2 text-sm text-[var(--sea-ink-soft)]"
|
||||
>
|
||||
<span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-[var(--lagoon)]" />
|
||||
{bullet}
|
||||
{obj.description}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{exp.tech.length > 0 && (
|
||||
{exp.technologies.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{exp.tech.map((t) => (
|
||||
<TechChip key={t} label={t} />
|
||||
{exp.technologies.map((tech) => (
|
||||
<TechChip key={tech.id} label={tech.name} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@@ -157,15 +178,19 @@ function ExperienceCard({
|
||||
// ── Education card ────────────────────────────────────────────────────────
|
||||
|
||||
function EducationCard({ edu }: { readonly edu: TEducation }) {
|
||||
const startYear = new Date(edu.startDate).getFullYear()
|
||||
const endYear = edu.endDate ? new Date(edu.endDate).getFullYear() : null
|
||||
|
||||
return (
|
||||
<div className="island-shell feature-card rise-in rounded-2xl p-6">
|
||||
<p className="island-kicker mb-2">{edu.institution}</p>
|
||||
<h3 className="mb-2 text-base font-bold leading-snug text-[var(--sea-ink)]">
|
||||
{edu.degree}
|
||||
{edu.fieldOfStudy ? ` ${edu.fieldOfStudy}` : ''}
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--sea-ink-soft)]">
|
||||
<span>
|
||||
{edu.startYear} – {edu.endYear}
|
||||
{startYear} – {endYear ?? 'Present'}
|
||||
</span>
|
||||
{edu.grade != null && (
|
||||
<>
|
||||
@@ -182,13 +207,19 @@ function EducationCard({ edu }: { readonly edu: TEducation }) {
|
||||
|
||||
// ── Skill group card ──────────────────────────────────────────────────────
|
||||
|
||||
function SkillGroupCard({ group }: { readonly group: TSkillGroup }) {
|
||||
function SkillGroupCard({
|
||||
category,
|
||||
skills,
|
||||
}: {
|
||||
readonly category: string
|
||||
readonly skills: readonly TSkill[]
|
||||
}) {
|
||||
return (
|
||||
<div className="island-shell feature-card rise-in rounded-2xl p-5">
|
||||
<p className="island-kicker mb-3">{group.category}</p>
|
||||
<p className="island-kicker mb-3">{category}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{group.skills.map((skill) => (
|
||||
<TechChip key={skill} label={skill} />
|
||||
{skills.map((skill) => (
|
||||
<TechChip key={skill.id} label={skill.name} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -198,7 +229,17 @@ function SkillGroupCard({ group }: { readonly group: TSkillGroup }) {
|
||||
// ── Page ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function HomePage() {
|
||||
const { experiences, educations, skillGroups } = Route.useLoaderData()
|
||||
const { experiences, educations, profile } = Route.useLoaderData()
|
||||
|
||||
const skillsByGroup = profile.skills.reduce<Record<string, TSkill[]>>(
|
||||
(acc, skill) => {
|
||||
const key = skill.group
|
||||
acc[key] = [...(acc[key] ?? []), skill]
|
||||
return acc
|
||||
},
|
||||
{},
|
||||
)
|
||||
|
||||
return (
|
||||
<main className="page-wrap px-4 pb-16 pt-10">
|
||||
{/* ── Hero ──────────────────────────────────────────── */}
|
||||
@@ -211,12 +252,11 @@ function HomePage() {
|
||||
Software Engineer · Copenhagen, Denmark
|
||||
</p>
|
||||
<h1 className="display-title mb-4 max-w-2xl text-5xl font-bold leading-[1.02] tracking-tight text-[var(--sea-ink)] sm:text-7xl">
|
||||
Hi, I'm Mohammad.
|
||||
Hi, I'm {profile.firstname}.
|
||||
</h1>
|
||||
<p className="mb-8 max-w-xl text-base leading-relaxed text-[var(--sea-ink-soft)] sm:text-lg">
|
||||
Crafting robust full-stack solutions with a passion for clean
|
||||
architecture, great developer experience, and shipping products people
|
||||
love.
|
||||
{profile.about ??
|
||||
'Crafting robust full-stack solutions with a passion for clean architecture, great developer experience, and shipping products people love.'}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
@@ -261,8 +301,12 @@ function HomePage() {
|
||||
id="skills"
|
||||
/>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{skillGroups.map((group) => (
|
||||
<SkillGroupCard key={group.id} group={group} />
|
||||
{Object.entries(skillsByGroup).map(([groupKey, skills]) => (
|
||||
<SkillGroupCard
|
||||
key={groupKey}
|
||||
category={groupKey}
|
||||
skills={skills}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user