Skip to content

Commit 84bcd73

Browse files
devendrasaimdevendrasaim
committed
Optimize for mobile
1 parent 43c771e commit 84bcd73

2 files changed

Lines changed: 33 additions & 42 deletions

File tree

‎components/certifications-section.tsx‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -76,59 +76,50 @@ export function CertificationsSection() {
7676

7777
{/* Stacked Cards Container */}
7878
<div className="w-full flex justify-center py-10">
79-
{/* The group class allows us to detect hover on the container */}
80-
<div className="group flex flex-col md:flex-row items-center justify-center relative w-full max-w-4xl h-[400px] md:h-[200px]">
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]">
8184
{certifications.map((cert, index) => {
82-
const offset = index * 40; // Default overlap offset
85+
const offset = index * 40;
8386

8487
return (
8588
<motion.a
8689
href={cert.link}
8790
target="_blank"
8891
rel="noopener noreferrer"
8992
key={cert.id}
90-
// Initial stacked state
93+
// Initial state: Mobile (static) vs Desktop (stacked)
9194
initial={{
92-
x: offset - (certifications.length * 20), // Center the stack roughly
93-
marginLeft: -100, // Negative margin creates overlap
94-
rotate: index % 2 === 0 ? -2 : 2, // Slight rotation for natural feel
95-
zIndex: index
96-
}}
97-
// Animate to spread state on hover of the PARENT container (.group)
98-
variants={{
99-
stacked: {
100-
x: 0,
101-
marginLeft: -120, // Keep overlapping
102-
rotate: (index % 2 === 0 ? -3 : 3) + index, // Fan out slightly
103-
scale: 0.95
104-
},
105-
// When container is hovered, spread them out
106-
expanded: {
107-
x: 0,
108-
marginLeft: 20, // Add gap
109-
rotate: 0,
110-
scale: 1,
111-
transition: { type: "spring", stiffness: 200, damping: 20 }
112-
}
95+
opacity: 1,
96+
y: 0
11397
}}
98+
// We only use variants for Desktop hover effects manually here to avoid complex media query logic in variants
99+
whileHover="hover"
114100

115101
className={`
116-
relative w-[280px] h-[160px] md:h-[180px] flex-shrink-0
102+
relative flex-shrink-0
103+
w-full md:w-[280px] h-[160px] md:h-[180px]
117104
rounded-lg border overflow-hidden p-6 flex flex-col justify-between
118105
transition-all duration-500 ease-out cursor-pointer group/card
119106
${accentMap[cert.color as keyof typeof accentMap]}
120107
121-
/* Default State (Stacked) via CSS transforms to act as backup/base */
122-
md:-ml-[140px] first:ml-0
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)]
123113
124-
/* Hover State (Expanded) */
125-
group-hover:!ml-4 group-hover:rotate-0 group-hover:scale-100 group-hover:!translate-x-0
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
126116
`}
127117
style={{
128-
// Inline styles for the "fan" effect when not hovered
129-
transform: `rotate(${(index - 1.5) * 5}deg) translateY(${Math.abs(index - 1.5) * 10}px)`,
130-
zIndex: index
131-
}}
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}
132123
>
133124
{/* Background Image Preview */}
134125
{cert.image && (

‎components/hero-section.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export function HeroSection() {
6161
</motion.div>
6262

6363
{/* Name */}
64-
<h1 className="font-mono text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 text-foreground">
64+
<h1 className="font-mono text-xl sm:text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 text-foreground break-words">
6565
<Typewriter
6666
text="DEVENDRA SAI MUPPARAJU"
6767
speed={60}
@@ -75,9 +75,9 @@ export function HeroSection() {
7575
initial={{ opacity: 0 }}
7676
animate={{ opacity: 1 }}
7777
transition={{ duration: 0.3 }}
78-
className="mb-10"
78+
className="mb-8 md:mb-10 px-4"
7979
>
80-
<p className="font-mono text-sm md:text-base tracking-[0.15em] text-muted-foreground">
80+
<p className="font-mono text-xs sm:text-sm md:text-base tracking-[0.15em] text-muted-foreground">
8181
<Typewriter
8282
text="Software Engineer | MSCS Graduate | System Architect"
8383
speed={30}
@@ -93,7 +93,7 @@ export function HeroSection() {
9393
initial={{ opacity: 0, y: 10 }}
9494
animate={{ opacity: 1, y: 0 }}
9595
transition={{ duration: 0.8, delay: 0.2 }}
96-
className="font-sans text-base md:text-lg leading-relaxed text-muted-foreground max-w-2xl mx-auto mb-12"
96+
className="font-sans text-sm sm:text-base md:text-lg leading-relaxed text-muted-foreground max-w-2xl mx-auto mb-8 md:mb-12 px-4"
9797
>
9898
I believe in code that feels, not just functions. Built on care and
9999
curiosity, my work explores how deep logic shapes simple experiences.
@@ -109,11 +109,11 @@ export function HeroSection() {
109109
initial={{ opacity: 0, y: 10 }}
110110
animate={{ opacity: 1, y: 0 }}
111111
transition={{ duration: 0.6, delay: 0.6 }}
112-
className="flex flex-col sm:flex-row items-center justify-center gap-4"
112+
className="flex flex-col sm:flex-row items-center justify-center gap-4 w-full px-6 md:px-0"
113113
>
114114
<a
115115
href="mailto:mdevendrasai9@gmail.com"
116-
className="group relative inline-flex items-center gap-3 border border-foreground/20 px-8 py-3 font-mono text-sm tracking-wider text-foreground transition-all hover:border-foreground hover:bg-foreground hover:text-background"
116+
className="w-full sm:w-auto group relative inline-flex items-center justify-center gap-3 border border-foreground/20 px-8 py-3 font-mono text-sm tracking-wider text-foreground transition-all hover:border-foreground hover:bg-foreground hover:text-background"
117117
>
118118
<Mail className="h-4 w-4" />
119119
Contact Me
@@ -122,7 +122,7 @@ export function HeroSection() {
122122
href="https://github.com/devendrasaim"
123123
target="_blank"
124124
rel="noopener noreferrer"
125-
className="group relative inline-flex items-center gap-3 border border-foreground/10 px-8 py-3 font-mono text-sm tracking-wider text-muted-foreground transition-all hover:border-foreground/30 hover:text-foreground"
125+
className="w-full sm:w-auto group relative inline-flex items-center justify-center gap-3 border border-foreground/10 px-8 py-3 font-mono text-sm tracking-wider text-muted-foreground transition-all hover:border-foreground/30 hover:text-foreground"
126126
>
127127
<Github className="h-4 w-4" />
128128
Access Repository
@@ -131,7 +131,7 @@ export function HeroSection() {
131131
href="/docs/Resume.pdf?v=updated"
132132
target="_blank"
133133
rel="noopener noreferrer"
134-
className="group relative inline-flex items-center gap-3 border border-foreground/10 px-8 py-3 font-mono text-sm tracking-wider text-muted-foreground transition-all hover:border-foreground/30 hover:text-foreground"
134+
className="w-full sm:w-auto group relative inline-flex items-center justify-center gap-3 border border-foreground/10 px-8 py-3 font-mono text-sm tracking-wider text-muted-foreground transition-all hover:border-foreground/30 hover:text-foreground"
135135
>
136136
<FileIcon className="h-4 w-4" />
137137
Resume

0 commit comments

Comments
 (0)