portifolio-evandrodevbr/app/curriculo/page.tsx

import type { Metadata } from "next";
import {
  compactHero,
  heroWithMediaGrid,
} from "@/app/cases/_components/hero-styles";
import { Breadcrumb } from "@/app/components/Breadcrumb";
import {
  pageTop,
  primaryButton,
  secondaryButtonDark,
  textLinkDark,
} from "@/app/components/button-styles";
import { CONTACT_FORM_HASH } from "@/app/components/contact-subject";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import { PagePiece } from "@/app/components/PagePiece";
import { safeJsonLd } from "@/lib/jsonld";
import { portfolio } from "@/lib/portfolio-data";
import {
  buildBreadcrumbList,
  buildPageSocialMetadata,
  buildProfilePageJsonLd,
} from "@/lib/seo";
import { buttonLabels, siteUrl } from "@/lib/site-content";
import CvDownloadLink from "./CvDownloadLink";

const pageUrl = `${siteUrl}/curriculo`;
const pageTitle = "Currículo de Evandro Fonseca Junior";
const pageDescription =
  "Currículo profissional de Evandro Fonseca Junior, engenheiro da computação e desenvolvedor de software: experiência, formação e competências técnicas.";

export const metadata: Metadata = {
  title: pageTitle,
  description: pageDescription,
  ...buildPageSocialMetadata({
    url: pageUrl,
    title: pageTitle,
    description: pageDescription,
    type: "profile",
  }),
};

export default function CurriculoPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      buildProfilePageJsonLd(),
      buildBreadcrumbList(pageUrl, [
        ["Início", siteUrl],
        ["Currículo", pageUrl],
      ] as const),
    ],
  };

  return (
    <main>
      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
      <section
        className={`ds-section ds-section-dark ${pageTop} ${compactHero}`}
      >
        <div className={`ds-section-shell ${heroWithMediaGrid}`}>
          <div className="min-w-0">
            <Breadcrumb
              items={[
                { label: "Início", href: "/" },
                { label: "Currículo", href: "/curriculo" },
              ]}
            />
            <h1 className="ds-section-title text-white">
              Engenheiro da Computação e Desenvolvedor de Software.
            </h1>
            <p className="ds-copy max-w-[70ch] !text-[rgba(255,255,255,.78)]">
              Garuva e Joinville (SC) · atendimento remoto em todo o Brasil.
              Este currículo reúne experiência profissional, formação e
              competências técnicas para avaliação de contratação.
            </p>
            <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
              <HoverPrefetchLink
                className={primaryButton}
                href={`/${CONTACT_FORM_HASH}`}
              >
                {buttonLabels.contact}
              </HoverPrefetchLink>
              <CvDownloadLink className={secondaryButtonDark}>
                Baixar currículo em PDF
              </CvDownloadLink>
              <HoverPrefetchLink className={textLinkDark} href="/servicos">
                Procurando consultoria? Ver serviços
              </HoverPrefetchLink>
            </div>
          </div>
          <PagePiece image="/3d/estado-integracoes.webp" />
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <h2 className="ds-section-title">Experiência profissional</h2>
          <div className="mt-sp-8 space-y-sp-6">
            {portfolio.experiences.map((experience) => (
              <article key={experience.id} className="ds-card">
                <p className="ds-kicker">
                  {experience.period} · {experience.location}
                </p>
                <h3 className="ds-card-title">
                  {experience.title} — {experience.company}
                </h3>
                <p className="ds-copy">{experience.description}</p>
                <ul className="ds-list mt-sp-5 space-y-sp-2 pl-[1.15rem]">
                  {experience.achievements.map((achievement) => (
                    <li key={achievement}>{achievement}</li>
                  ))}
                </ul>
                <ul className="ds-tags !mt-sp-6">
                  {experience.technologies.map((technology) => (
                    <li key={technology} className="ds-tag">
                      {technology}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <h2 className="ds-section-title">Competências técnicas</h2>
          <div className="ds-grid-2 mt-sp-8">
            {portfolio.skills.technical.map((category) => (
              <article key={category.category} className="ds-card">
                <h3 className="ds-card-title">{category.category}</h3>
                <ul className="ds-tags !mt-sp-5">
                  {category.skills.map((skill) => (
                    <li key={skill} className="ds-tag">
                      {skill}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
          <div className="mt-sp-8">
            <HoverPrefetchLink className="ds-link ds-link-muted" href="/cases">
              Ver projetos e cases
            </HoverPrefetchLink>
          </div>
        </div>
      </section>
    </main>
  );
}