Skip to content

Achievement Page mobile design fix #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
swaindhruti merged 1 commit into from
Aug 18, 2025
Merged

Achievement Page mobile design fix #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/components/AchievementCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,16 @@ const AchievementCard = ({ title, description, year, isLeft, index }) => {
const [isHovered, setIsHovered] = useState(false);

useEffect(() => {
// Check if it's mobile
const isMobile = window.innerWidth < 768;

if (isMobile) {
// On mobile, make cards visible immediately without animations
setIsVisible(true);
return;
}

// Desktop animations
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
Expand Down
44 changes: 22 additions & 22 deletions src/components/Timeline.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,19 @@ const Timeline = () => {
const [scrollProgress, setScrollProgress] = useState(0);

useEffect(() => {
// Scroll progress for timeline line animation
// Check if it's mobile
const isMobile = window.innerWidth < 768;

if (isMobile) {
// On mobile, make everything visible immediately without animations
const allIndices = achievementsData.map((_, index) => index);
setVisibleDots(new Set(allIndices));
setVisibleLines(new Set(allIndices));
setScrollProgress(1);
return; // Exit early for mobile
}

// Desktop scroll animations
const handleScroll = () => {
if (containerRef.current) {
const container = containerRef.current;
Expand Down Expand Up @@ -47,11 +59,11 @@ const Timeline = () => {
entry.target.getAttribute("data-timeline-index") || "0",
);

// Add staggered effect
// Add minimal staggered effect
setTimeout(() => {
setVisibleDots((prev) => new Set([...prev, index]));
setVisibleLines((prev) => new Set([...prev, index]));
}, index * 200);
}, index * 50);
}
});
},
Expand Down Expand Up @@ -147,6 +159,9 @@ const Timeline = () => {
}}
/>

{/* Mobile Timeline Line - Continuous */}
<div className="md:hidden absolute left-6 top-0 w-0.5 h-full bg-gradient-to-b from-[#0B2044] to-[#51B8F2] rounded-full z-0" />

{/* Timeline Items */}
<div className="space-y-16 md:space-y-20">
{achievementsData
Expand Down Expand Up @@ -218,7 +233,7 @@ const Timeline = () => {

{/* Year Badge */}
<div
className={`absolute -bottom-10 left-1/2 transform -translate-x-1/2 bg-white text-[#0B2044] text-xs font-bold px-3 py-1 rounded-full shadow-md border border-gray-100 transition-all duration-500 ${
className={`absolute -bottom-10 left-1/2 transform -translate-x-1/2 bg-white text-[#0B2044] text-xs font-bold px-3 py-1 rounded-full shadow-md border border-gray-100 transition-all duration-200 ${
visibleDots.has(index)
? "opacity-100 translate-y-0"
: "opacity-0 translate-y-4"
Expand Down Expand Up @@ -248,24 +263,9 @@ const Timeline = () => {

{/* Mobile Layout */}
<div className="md:hidden relative pl-8">
{/* Mobile Timeline Line */}
<div className="absolute left-4 top-0 w-0.5 h-full bg-gray-200 rounded-full" />
<div
className="absolute left-4 top-0 w-0.5 bg-gradient-to-b from-[#0B2044] to-[#51B8F2] rounded-full transition-all duration-1000"
style={{
height: visibleDots.has(index) ? "100%" : "0%",
}}
/>

{/* Mobile Dot */}
<div className="absolute left-2 top-6 z-20">
<div
className={`w-4 h-4 rounded-full border-2 border-white shadow-md transition-all duration-500 ${
visibleDots.has(index)
? "bg-gradient-to-br from-[#0B2044] to-[#51B8F2] scale-110"
: "bg-gray-300 scale-75"
}`}
/>
{/* Mobile Dot - Static, no animation */}
<div className="absolute left-6 top-6 z-20 transform -translate-x-1/2">
<div className="w-4 h-4 rounded-full border-2 border-white shadow-md bg-gradient-to-br from-[#0B2044] to-[#51B8F2]" />
</div>

{/* Mobile Card */}
Expand Down
Loading