81 lines
2.5 KiB
React
81 lines
2.5 KiB
React
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
|
|
const Certifications = () => {
|
|
const [certifications, setCertifications] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const fetchCertifications = async () => {
|
|
try {
|
|
const response = await fetch("/assets/data/data.json");
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
setCertifications(data.certifications || []);
|
|
} catch (error) {
|
|
console.error("Failed to fetch certifications data:", error);
|
|
}
|
|
};
|
|
|
|
fetchCertifications();
|
|
}, []);
|
|
|
|
if (!certifications) {
|
|
return (
|
|
<div className="flex justify-center items-center h-64 bg-gray-50">
|
|
<p className="text-xl font-medium text-gray-700">
|
|
Loading Certifications...
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section
|
|
id="certificationsScroll"
|
|
className="w-full flex flex-col items-center justify-center py-20 px-4 md:px-8 bg-gray-50 rounded-lg shadow-inner"
|
|
>
|
|
<h3 className="text-2xl font-poppins text-blue-500 mb-12 font-extrabold">
|
|
Certifications
|
|
</h3>
|
|
|
|
<div className="w-full max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
|
|
{certifications.map((cert) => (
|
|
<a
|
|
key={cert.name}
|
|
href={cert.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title={cert.name}
|
|
className="flex flex-col bg-white rounded-xl border border-gray-100 shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-xl"
|
|
>
|
|
<div className="relative w-full aspect-[4/3] bg-gray-50">
|
|
<Image
|
|
src={cert.img}
|
|
alt={`${cert.name} certificate`}
|
|
fill
|
|
className="object-contain p-2"
|
|
sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, 20vw"
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col items-start p-4 gap-1">
|
|
<p className="text-sm font-semibold text-gray-800 font-poppins leading-snug">
|
|
{cert.name}
|
|
</p>
|
|
<p className="text-xs text-gray-500 font-poppins">
|
|
{cert.issuer}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Certifications;
|