Skip to content

Commit 9a0dc43

Browse files
devendrasaimdevendrasaim
committed
Change certifications to grid layout
1 parent 84bcd73 commit 9a0dc43

2 files changed

Lines changed: 65 additions & 99 deletions

File tree

‎components/certifications-section.tsx‎

Lines changed: 54 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -74,96 +74,62 @@ export function CertificationsSection() {
7474
</h2>
7575
</motion.div>
7676

77-
{/* Stacked Cards Container */}
78-
<div className="w-full flex justify-center py-10">
79-
{/*
80-
Mobile: Simple vertical stack with gap
81-
Desktop: Horizontal overlapping stack requiring hover interaction
82-
*/}
83-
<div className="group flex flex-col md:flex-row items-center justify-center relative w-full max-w-4xl gap-4 md:gap-0 md:h-[200px]">
84-
{certifications.map((cert, index) => {
85-
const offset = index * 40;
86-
87-
return (
88-
<motion.a
89-
href={cert.link}
90-
target="_blank"
91-
rel="noopener noreferrer"
92-
key={cert.id}
93-
// Initial state: Mobile (static) vs Desktop (stacked)
94-
initial={{
95-
opacity: 1,
96-
y: 0
97-
}}
98-
// We only use variants for Desktop hover effects manually here to avoid complex media query logic in variants
99-
whileHover="hover"
100-
101-
className={`
102-
relative flex-shrink-0
103-
w-full md:w-[280px] h-[160px] md:h-[180px]
104-
rounded-lg border overflow-hidden p-6 flex flex-col justify-between
105-
transition-all duration-500 ease-out cursor-pointer group/card
106-
${accentMap[cert.color as keyof typeof accentMap]}
107-
108-
/* DESKTOP STYLES (md:) */
109-
md:absolute md:top-0 md:bg-background/95 md:backdrop-blur-sm
110-
111-
/* Desktop Default Stacked State (via CSS for stability) */
112-
md:[transform:var(--stack-transform)] md:ml-[var(--stack-margin)] md:z-[var(--stack-z)]
113-
114-
/* Desktop Hover State (via group-hover on parent) */
115-
md:group-hover:!ml-4 md:group-hover:!translate-y-0 md:group-hover:!translate-x-0 md:group-hover:!rotate-0 md:group-hover:!scale-100 md:group-hover:relative md:group-hover:inset-auto
116-
`}
117-
style={{
118-
// Custom properties for the stacked state on desktop
119-
"--stack-transform": `rotate(${(index - 1.5) * 5}deg) translateY(${Math.abs(index - 1.5) * 10}px)`,
120-
"--stack-margin": `${index === 0 ? 0 : -140}px`,
121-
"--stack-z": index,
122-
} as React.CSSProperties}
123-
>
124-
{/* Background Image Preview */}
125-
{cert.image && (
126-
<div className="absolute inset-0 z-0">
127-
<img
128-
src={cert.image}
129-
alt={`${cert.title} preview`}
130-
className="w-full h-full object-cover opacity-20 group-hover/card:opacity-40 transition-opacity grayscale group-hover/card:grayscale-0"
131-
/>
132-
<div className="absolute inset-0 bg-background/80 group-hover/card:bg-background/40 transition-colors" />
133-
</div>
134-
)}
77+
{/* Grid Cards Container */}
78+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-4xl mx-auto py-10">
79+
{certifications.map((cert, index) => (
80+
<motion.a
81+
href={cert.link}
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
key={cert.id}
85+
initial={{ opacity: 0, y: 20 }}
86+
whileInView={{ opacity: 1, y: 0 }}
87+
viewport={{ once: true }}
88+
transition={{ duration: 0.5, delay: index * 0.1 }}
89+
whileHover={{ scale: 1.02 }}
90+
className={`
91+
relative w-full h-[180px]
92+
rounded-lg border overflow-hidden p-6 flex flex-col justify-between
93+
transition-all duration-300 ease-out cursor-pointer group/card
94+
${accentMap[cert.color as keyof typeof accentMap]}
95+
hover:shadow-lg
96+
`}
97+
>
98+
{/* Background Image Preview */}
99+
{cert.image && (
100+
<div className="absolute inset-0 z-0">
101+
<img
102+
src={cert.image}
103+
alt={`${cert.title} preview`}
104+
className="w-full h-full object-cover opacity-20 group-hover/card:opacity-40 transition-opacity grayscale group-hover/card:grayscale-0"
105+
/>
106+
<div className="absolute inset-0 bg-background/80 group-hover/card:bg-background/40 transition-colors" />
107+
</div>
108+
)}
135109

136-
<div className="relative z-10 flex justify-between items-start">
137-
<Award className="h-8 w-8 opacity-80" />
138-
<span className="font-mono text-[10px] opacity-60 border border-current px-1 py-0.5 rounded bg-background/50 backdrop-blur-sm">
139-
{cert.date}
140-
</span>
141-
</div>
142-
143-
<div className="relative z-10">
144-
<h3 className="font-bold text-lg leading-tight mb-1 line-clamp-2 drop-shadow-md">
145-
{cert.title}
146-
</h3>
147-
<div className="flex items-center justify-between">
148-
<span className="text-xs opacity-70 font-mono">
149-
{cert.issuer}
150-
</span>
151-
<ExternalLink className="h-3 w-3 opacity-0 group-hover/card:opacity-100 transition-opacity" />
152-
</div>
153-
</div>
110+
<div className="relative z-10 flex justify-between items-start">
111+
<Award className="h-8 w-8 opacity-80" />
112+
<span className="font-mono text-[10px] opacity-60 border border-current px-1 py-0.5 rounded bg-background/50 backdrop-blur-sm">
113+
{cert.date}
114+
</span>
115+
</div>
116+
117+
<div className="relative z-10">
118+
<h3 className="font-bold text-lg leading-tight mb-1 line-clamp-2 drop-shadow-md">
119+
{cert.title}
120+
</h3>
121+
<div className="flex items-center justify-between">
122+
<span className="text-xs opacity-70 font-mono">
123+
{cert.issuer}
124+
</span>
125+
<ExternalLink className="h-3 w-3 opacity-0 group-hover/card:opacity-100 transition-opacity" />
126+
</div>
127+
</div>
154128

155-
{/* Hover glow effect per card */}
156-
<div className="absolute inset-0 bg-current opacity-0 hover:opacity-5 transition-opacity pointer-events-none z-20" />
157-
</motion.a>
158-
);
159-
})}
160-
</div>
161-
</div>
162-
163-
<div className="text-center mt-8 md:mt-0">
164-
<p className="font-mono text-[10px] text-muted-foreground/50 uppercase tracking-widest">
165-
[ HOVER TO INSPECT CREDENTIALS ]
166-
</p>
129+
{/* Hover glow effect per card */}
130+
<div className="absolute inset-0 bg-current opacity-0 hover:opacity-5 transition-opacity pointer-events-none z-20" />
131+
</motion.a>
132+
))}
167133
</div>
168134
</div>
169135
</section>

‎components/projects-section.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,13 @@ import { ProjectModule } from "@/components/project-module";
66
const projects = [
77
{
88
moduleId: "MODULE_A",
9-
title: "BOUNCE_STREAK_ENGINE",
10-
tags: ["Reddit Devvit", "Phaser", "TypeScript"],
9+
title: "SECURE_ENCLAVE_PROTOCOLS",
10+
tags: ["Intel SGX", "PyTorch", "C++"],
1111
description:
12-
"Engineered a high-performance 2D arcade physics engine optimized for mobile browsers. Implemented 'cushion' collision detection to deliver a smooth 60 FPS experience. Architected a deterministic daily challenge system using seeded randomization, ensuring identical physics conditions for thousands of concurrent users.",
13-
viewportLabel: "PHYSICS_SIMULATION_VIEWPORT",
12+
"Proved the integrity of sensitive training loops in untrusted environments. By leveraging Intel SGX enclaves, this architecture isolates computation from OS-level vulnerabilities, ensuring privacy was maintained even during simulated system compromise scenarios.",
13+
viewportLabel: "ENCRYPTED_TERMINAL_OUTPUT",
1414
accentColor: "amber" as const,
15-
link: "https://www.reddit.com/r/bounce_streak_dev/comments/1r1adpg/bouncestreak/",
16-
image: "/images/gameplay.gif",
15+
pdfUrl: "/docs/secure-deep-learning-sgx.pdf",
1716
},
1817
{
1918
moduleId: "MODULE_B",
@@ -39,13 +38,14 @@ const projects = [
3938
},
4039
{
4140
moduleId: "MODULE_D",
42-
title: "SECURE_ENCLAVE_PROTOCOLS",
43-
tags: ["Intel SGX", "PyTorch", "C++"],
41+
title: "BOUNCE_STREAK_ENGINE",
42+
tags: ["Reddit Devvit", "Phaser", "TypeScript"],
4443
description:
45-
"Proved the integrity of sensitive training loops in untrusted environments. By leveraging Intel SGX enclaves, this architecture isolates computation from OS-level vulnerabilities, ensuring privacy was maintained even during simulated system compromise scenarios.",
46-
viewportLabel: "ENCRYPTED_TERMINAL_OUTPUT",
44+
"Engineered a high-performance 2D arcade physics engine optimized for mobile browsers. Implemented 'cushion' collision detection to deliver a smooth 60 FPS experience. Architected a deterministic daily challenge system using seeded randomization, ensuring identical physics conditions for thousands of concurrent users.",
45+
viewportLabel: "PHYSICS_SIMULATION_VIEWPORT",
4746
accentColor: "amber" as const,
48-
pdfUrl: "/docs/secure-deep-learning-sgx.pdf",
47+
link: "https://www.reddit.com/r/bounce_streak_dev/comments/1r1adpg/bouncestreak/",
48+
image: "/images/gameplay.gif",
4949
},
5050
{
5151
moduleId: "MODULE_E",

0 commit comments

Comments
 (0)