73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { usePortfolioData } from "@/lib/usePortfolioData";
|
|
import { Section } from "./Section";
|
|
import { Reveal } from "./Reveal";
|
|
|
|
export default function Experience() {
|
|
const { data, loading, error } = usePortfolioData();
|
|
|
|
const sortedExperiences = useMemo(() => {
|
|
if (!data?.experiences) return [];
|
|
return [...data.experiences]
|
|
.filter((exp) => exp.featured)
|
|
.sort((a, b) => {
|
|
const yearA = parseInt(a.period.match(/\d{4}/)?.[0] || "0", 10);
|
|
const yearB = parseInt(b.period.match(/\d{4}/)?.[0] || "0", 10);
|
|
return yearB - yearA;
|
|
});
|
|
}, [data]);
|
|
|
|
if (loading) return <div className="ds-loading">Loading system logs</div>;
|
|
if (error || !data)
|
|
return <div className="ds-error">Error loading system logs</div>;
|
|
|
|
return (
|
|
<Section
|
|
id="experience"
|
|
eyebrow="SYSTEM_LOGS.history"
|
|
title="Trajetória focada em produto, legado e crescimento sustentável"
|
|
description="Experiências recentes onde combinei entrega rápida com responsabilidade arquitetural."
|
|
disableChildrenAnimation
|
|
>
|
|
<div className="space-y-sp-6">
|
|
{sortedExperiences.map((exp, index) => (
|
|
<Reveal key={exp.id} y={50} duration={0.8} delay={0.1 * index}>
|
|
<article className="ds-card">
|
|
<div className="ds-grid-2">
|
|
<div>
|
|
<div className="ds-kicker">{exp.period}</div>
|
|
<h3 className="ds-card-title">{exp.title}</h3>
|
|
<div className="mt-sp-3 text-[11px] uppercase tracking-[0.1em] text-meta">
|
|
{exp.company} · {exp.type}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap items-start justify-start gap-sp-3 lg:justify-end">
|
|
<span className="ds-tag">{exp.location}</span>
|
|
<span className="ds-tag">
|
|
{exp.technologies.length} tecnologias
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<p className="ds-copy">{exp.description}</p>
|
|
<ul className="ds-list">
|
|
{exp.achievements?.map((achievement) => (
|
|
<li key={achievement}>{achievement}</li>
|
|
))}
|
|
</ul>
|
|
<ul className="ds-tags mt-sp-6">
|
|
{exp.technologies?.map((tech) => (
|
|
<li key={tech} className="ds-tag">
|
|
{tech}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|