Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | 1x 17x 17x 17x 17x 17x 17x 9x 9x 9x 8x 17x 9x 17x 17x 17x 8x 7x 22x | import {Award, ExternalLink} from "lucide-react";
import {useTranslation} from "react-i18next";
import {Card} from "@/components/ui/card/Card";
import {CardContent} from "@/components/ui/cardContent/CardContent";
import {PageSection} from "@/components/ui/pageSection/PageSection";
import {SeoHead} from "@/components/seoHead/SeoHead";
import React, {useEffect, useState} from "react";
import {Pagination} from "@/components/ui/pagination/Pagination";
import {PageGrid} from "@/components/ui/pageGrid/PageGrid";
import {getCertifications} from "@/services/portfolioService";
import {Loading} from "@/components/loading/Loading";
import {ErrorState} from "@/components/errorState/ErrorState";
const ITEMS_PER_PAGE = 4;
/**
* Certifications component.
*
* Displays a paginated list of professional certifications, each with title, issuer, and date.
*
* Features:
* - Uses i18next for translations.
* - Shows 4 certifications per page with next/previous pagination buttons.
* - Includes smooth animations via Framer Motion for entry transitions.
*
* @component
* @module pages/certifications/Certifications
* @returns {JSX.Element} The rendered Certifications page section.
*/
export default function Certifications() {
const {t} = useTranslation();
const [page, setPage] = useState(1);
const [certifications, setCertifications] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const loadCertifications = () => {
setLoading(true);
setError(null);
getCertifications()
.then(setCertifications)
.catch(setError)
.finally(() => setLoading(false));
};
useEffect(() => {
loadCertifications();
}, []);
const totalPages = Math.ceil(certifications.length / ITEMS_PER_PAGE);
const displayedCerts = certifications.slice(
(page - 1) * ITEMS_PER_PAGE,
page * ITEMS_PER_PAGE
);
if (loading) return <Loading/>;
if (error) return <ErrorState message={t("error_generic")} onRetry={loadCertifications}/>;
return (
<>
<SeoHead pageKey="certifications" path="/certifications"/>
<PageSection title={t("certifications_page.title")}>
{/* Pagination mobile sticky */}
<div
className="md:hidden sticky top-0 z-20 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md py-2 mb-4 border-b border-gray-200 dark:border-gray-700"
>
<Pagination
page={page}
totalPages={totalPages}
onPageChange={setPage}
/>
</div>
<PageGrid page={page}>
{displayedCerts.map((cert, idx) => (
<Card
key={idx}
className="relative w-full p-5 sm:p-6 border border-gray-200/60
dark:border-gray-700/60 bg-white/60 dark:bg-gray-800/40 backdrop-blur-md
rounded-xl hover:shadow-lg transition-all duration-300
flex flex-col md:flex-row items-start gap-4"
>
{/* Icon */}
<div className="absolute -top-3 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-blue-100 to-blue-200
dark:from-blue-900/40 dark:to-blue-800/40 flex items-center justify-center shadow-lg z-20 ring-4 ring-background">
<Award className="w-6 h-6 text-blue-600 dark:text-blue-400"/>
</div>
<CardContent className="p-0 flex flex-col gap-3 h-full">
{/* Header */}
<div className="space-y-1.5">
<h3 className="text-lg font-bold text-gray-900 dark:text-white leading-tight">
{t(cert.nameKey)}
</h3>
<p className="text-sm font-mono text-gray-600 dark:text-gray-400 leading-tight">
{cert.issuer}
</p>
<p className="text-xs text-gray-500 dark:text-gray-500 font-mono">
{cert.date}
</p>
</div>
{/* Description (optional) */}
{cert.descriptionKey && (
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
{t(cert.descriptionKey)}
</p>
)}
{/* CTA */}
<div className="mt-auto pt-2">
<a
href={cert.link}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center justify-center
w-[200px] sm:w-[220px] h-10
text-sm font-semibold
text-blue-600 dark:text-blue-400
hover:text-blue-700 dark:hover:text-blue-300
transition-all duration-300
hover:underline underline-offset-4
hover:shadow-md hover:shadow-blue-100 dark:hover:shadow-blue-900/50
rounded-lg
border border-blue-200/50 dark:border-blue-800/50 hover:border-blue-300
"
>
{t("certifications_page.view_certificate")}
<ExternalLink
className="w-4 h-4 ml-2 shrink-0 group-hover:translate-x-1 transition-transform duration-300"/>
</a>
</div>
</CardContent>
{/* Hover overlay */}
<div
className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100
transition-all duration-500 bg-gradient-to-br from-blue-50/80 via-transparent to-transparent
dark:from-blue-900/30 rounded-xl backdrop-blur-sm"
/>
</Card>
))}
</PageGrid>
{/* Pagination desktop normal */}
<div className="hidden md:block mt-4">
<Pagination
page={page}
totalPages={totalPages}
onPageChange={setPage}
/>
</div>
</PageSection>
</>
);
}
|