Table of Contents

Complete About.js Component

import React, { useState, useEffect, useRef } from "react";
import "./About.css";
function About() {
const [activeChief, setActiveChief] = useState(null);
const [isVisible, setIsVisible] = useState({});
const [activeMilestone, setActiveMilestone] = useState(null);
const [timelineProgress, setTimelineProgress] = useState(0);
const [selectedDecade, setSelectedDecade] = useState("all");
const [hoveredMilestone, setHoveredMilestone] = useState(null);
const [animatedNumbers, setAnimatedNumbers] = useState({});
const timelineRef = useRef(null);
const statsRef = useRef(null);
// Animation for numbers
useEffect(() => {
const animateNumber = (target, setter, duration = 2000) => {
let start = 0;
const increment = target / (duration / 16);
const timer = setInterval(() => {
start += increment;
if (start >= target) {
setter(target);
clearInterval(timer);
} else {
setter(Math.floor(start));
}
}, 16);
};
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !animatedNumbers[entry.target.id]) {
setAnimatedNumbers(prev => ({ ...prev, [entry.target.id]: true }));
// Animate numbers based on target
}
});
},
{ threshold: 0.5 }
);
if (statsRef.current) {
observer.observe(statsRef.current);
}
return () => observer.disconnect();
}, []);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setIsVisible((prev) => ({
...prev,
[entry.target.id]: true,
}));
}
});
},
{ threshold: 0.1 }
);
document.querySelectorAll(".animate-section").forEach((section) => {
observer.observe(section);
});
return () => observer.disconnect();
}, []);
// Timeline scroll progress
useEffect(() => {
const handleTimelineScroll = () => {
if (timelineRef.current) {
const rect = timelineRef.current.getBoundingClientRect();
const windowHeight = window.innerHeight;
const timelineHeight = rect.height;
const scrolled = windowHeight - rect.top;
const progress = Math.min(Math.max((scrolled / (timelineHeight + windowHeight)) * 100, 0), 100);
setTimelineProgress(progress);
}
};
window.addEventListener("scroll", handleTimelineScroll);
handleTimelineScroll();
return () => window.removeEventListener("scroll", handleTimelineScroll);
}, []);
const stats = [
{ 
number: 28, 
label: "Years of Excellence", 
icon: "🏛️",
description: "Shaping future leaders since 1994",
color: "#3b82f6",
suffix: "+"
},
{ 
number: 25, 
label: "Expert Faculties", 
icon: "👨‍🏫",
description: "Dedicated academic professionals",
color: "#8b5cf6",
suffix: "+"
},
{ 
number: 10, 
label: "Alumni Network", 
icon: "🎓",
description: "Successful graduates worldwide",
color: "#06b6d4",
suffix: "K+"
},
{ 
number: 1, 
label: "Top Ranked", 
icon: "🏆",
description: "Leading management institution",
color: "#f59e0b",
suffix: ""
},
];
const milestones = [
{
year: "1994",
title: "University Established",
description: "Purbanchal University founded under the Purbanchal University Act 1994, laying the foundation for quality management education in Eastern Nepal.",
icon: "🏛️",
category: "Foundation",
color: "#3b82f6",
image: "https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=600&h=400&fit=crop",
details: "The university was established with a vision to provide accessible, high-quality higher education to students across Nepal, particularly in the eastern region. This landmark legislation created the framework for what would become one of Nepal's premier management institutions.",
achievements: ["Act passed by Parliament", "Initial campus established", "First administrative team formed"],
impact: "Laid the foundation for management education in Eastern Nepal"
},
{
year: "1997",
title: "First Campus Chief",
description: "Mr. Dev Raj Shrestha appointed as the first Campus Chief, establishing the foundational leadership structure.",
icon: "👔",
category: "Leadership",
color: "#8b5cf6",
image: "https://images.unsplash.com/photo-1566492031773-4f4e44671857?w=600&h=400&fit=crop",
details: "Under his visionary leadership, the initial academic programs were developed and the first batch of students was enrolled. His pioneering efforts set the standard for academic excellence that continues today.",
achievements: ["First batch of students enrolled", "Academic programs structured", "Faculty recruitment initiated"],
impact: "Established first academic and administrative framework"
},
{
year: "2001",
title: "Expansion Phase Begins",
description: "New programs and infrastructure development initiated to meet growing demand for management education.",
icon: "🚀",
category: "Growth",
color: "#06b6d4",
image: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop",
details: "This period saw significant expansion in academic offerings and campus facilities, including new classrooms, library resources, and faculty recruitment. Student enrollment grew by 200% during this phase.",
achievements: ["New classrooms constructed", "Library expanded", "Faculty strength doubled"],
impact: "200% growth in student enrollment"
},
{
year: "2007",
title: "BBA Program Launch",
description: "Mr. Dinesh Raj Subedi takes charge, building the foundation for modern management education.",
icon: "📚",
category: "Academic",
color: "#f59e0b",
image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&h=400&fit=crop",
details: "The BBA program was launched during this tenure, along with significant campus modernization efforts. Modern teaching methodologies were introduced, and industry connections were strengthened.",
achievements: ["BBA program launched", "Campus modernization", "Industry partnerships established"],
impact: "First undergraduate management program"
},
{
year: "2010",
title: "MBA Program Enhancement",
description: "Significant increase in student enrollment and expansion of academic programs under new leadership.",
icon: "📈",
category: "Growth",
color: "#10b981",
image: "https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=600&h=400&fit=crop",
details: "Student enrollment doubled during this period. New specializations were introduced, and industry partnerships were strengthened. The MBA program saw its highest enrollment numbers to date.",
achievements: ["Student enrollment doubled", "New specializations added", "Corporate partnerships expanded"],
impact: "Became top choice for MBA in Eastern Nepal"
},
{
year: "2014",
title: "PhD Program Launch",
description: "Dr. Uttam Kr. Regmi leads a four-year period of transformative growth and academic innovation.",
icon: "🔬",
category: "Innovation",
color: "#ef4444",
image: "https://images.unsplash.com/photo-1532619187608-e5375cab36aa?w=600&h=400&fit=crop",
details: "Infrastructure expanded significantly, and the PhD program was launched, marking PUSOM's entry into doctoral education. Research output increased by 300% during this period.",
achievements: ["PhD program launched", "Infrastructure expansion", "Research grants established"],
impact: "300% increase in research output"
},
{
year: "2018",
title: "Top Ranking Achieved",
description: "PUSOM achieves top ranking status among management institutions in Nepal.",
icon: "🏆",
category: "Achievement",
color: "#3b82f6",
image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=600&h=400&fit=crop",
details: "Recognition came through rigorous accreditation processes and consistent academic performance, placing PUSOM among the top management schools in Nepal. International collaborations were established.",
achievements: ["Top ranking achieved", "International partnerships", "Accreditation secured"],
impact: "Recognized as #1 management institution"
},
{
year: "2019",
title: "Curriculum Modernization",
description: "Mr. Prashant Kumar Lal and Ms. Sonila Shakya lead curriculum modernization and student development.",
icon: "🔄",
category: "Innovation",
color: "#8b5cf6",
image: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=600&h=400&fit=crop",
details: "This period saw the introduction of modern teaching methodologies, research grants for faculty, and international student exchange programs. The curriculum was completely overhauled to meet global standards.",
achievements: ["Curriculum modernization", "Student exchange programs", "Faculty research grants"],
impact: "Internationally aligned curriculum"
},
{
year: "2025",
title: "Digital Transformation Era",
description: "Dr. Ramakant Das appointed as Campus Chief, ushering in digital transformation and global partnerships.",
icon: "🌟",
category: "Innovation",
color: "#06b6d4",
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop",
details: "Current leadership focuses on digital transformation, international collaborations, and preparing students for the global business environment. New programs and initiatives are being launched to meet future demands.",
achievements: ["Digital transformation", "Global partnerships", "Smart campus initiative"],
impact: "Preparing students for global careers"
}
];
const decades = [
{ id: "all", label: "All Years", icon: "📅", color: "#64748b" },
{ id: "1990s", label: "1990s", icon: "📜", color: "#3b82f6" },
{ id: "2000s", label: "2000s", icon: "📖", color: "#8b5cf6" },
{ id: "2010s", label: "2010s", icon: "📊", color: "#10b981" },
{ id: "2020s", label: "2020s", icon: "🚀", color: "#06b6d4" },
];
const getDecade = (year) => {
const y = parseInt(year);
if (y >= 1990 && y < 2000) return "1990s";
if (y >= 2000 && y < 2010) return "2000s";
if (y >= 2010 && y < 2020) return "2010s";
return "2020s";
};
const filteredMilestones = selectedDecade === "all" 
? milestones 
: milestones.filter(m => getDecade(m.year) === selectedDecade);
const chiefs = [
{
name: "Dr. Ramakant Das",
period: "12 May 2025 – Present",
description: "Leading PUSOM into a new era of academic excellence and innovation",
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop",
current: true,
achievements: ["Digital Transformation Initiative", "New MBA Specializations", "International Collaborations", "Smart Campus Project"],
quote: "Education is the most powerful weapon which you can use to change the world."
},
{
name: "Mr. Prashant Kumar Lal",
period: "03 Oct 2019 – 03 Jan 2021",
description: "Strengthened academic programs and industry partnerships",
image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&h=300&fit=crop",
achievements: ["Curriculum Modernization", "Industry-Academia Bridge Program", "Corporate Advisory Board"]
},
{
name: "Ms. Sonila Shakya",
period: "03 Oct 2019 – 03 Jan 2021",
description: "Focused on student development and research initiatives",
image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&h=300&fit=crop",
achievements: ["Research Grant Program", "Student Exchange Initiative", "Women in Leadership Program"]
},
{
name: "Prof. Dr. Biju Kr. Thapalia",
period: "26 Sep 2018 – 17 Sep 2019",
description: "Advanced academic standards and faculty development",
image: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=300&h=300&fit=crop",
achievements: ["Faculty Development Program", "Accreditation Achievement", "International Conference"]
},
{
name: "Dr. Uttam Kr. Regmi",
period: "17 Sep 2014 – 16 Sep 2018",
description: "Four years of transformative leadership and growth",
image: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=300&h=300&fit=crop",
achievements: ["Infrastructure Expansion", "PhD Program Launch", "Research Center Established"]
},
{
name: "Mr. Sudhir Kumar Kafle",
period: "23 May 2010 – 13 Aug 2014",
description: "Expanded programs and strengthened institutional framework",
image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=300&fit=crop",
achievements: ["MBA Program Enhancement", "Corporate Partnerships", "Alumni Network Growth"]
},
{
name: "Mr. Dinesh Raj Subedi",
period: "27 Nov 2007 – 26 Feb 2010",
description: "Built foundation for modern management education",
image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop",
achievements: ["BBA Program Launch", "Campus Modernization", "Library Automation"]
},
{
name: "Late Mr. Sanjesh Prasad Koirala",
period: "30 Sep 2001 – 05 Jul 2007",
description: "Nearly six years of dedicated service and vision",
image: "https://images.unsplash.com/photo-1556157382-97eda2d62296?w=300&h=300&fit=crop",
achievements: ["Institutional Growth", "Community Outreach", "Student Scholarship Program"]
},
{
name: "Mr. Dev Raj Shrestha",
period: "30 Sep 1997 – 29 Sep 2001",
description: "Pioneering leadership that shaped PUSOM's foundation",
image: "https://images.unsplash.com/photo-1566492031773-4f4e44671857?w=300&h=300&fit=crop",
achievements: ["Foundational Programs", "Initial Accreditation", "First Batch Graduation"]
}
];
const values = [
{
icon: "🎯",
title: "Excellence",
description: "Committed to the highest standards in management education and research",
gradient: "linear-gradient(135deg, #3b82f6, #2563eb)"
},
{
icon: "💡",
title: "Innovation",
description: "Embracing modern teaching methods and cutting-edge business practices",
gradient: "linear-gradient(135deg, #8b5cf6, #7c3aed)"
},
{
icon: "🤝",
title: "Integrity",
description: "Building ethical leaders with strong moral and professional values",
gradient: "linear-gradient(135deg, #10b981, #059669)"
},
{
icon: "🌍",
title: "Global Perspective",
description: "Preparing students for success in the international business arena",
gradient: "linear-gradient(135deg, #06b6d4, #0891b2)"
}
];
return (
<div className="about-container">
{/* Hero Section */}
<section className="about-hero">
<div className="about-hero-bg"></div>
<div className="about-hero-overlay"></div>
<div className="particle-container">
{[...Array(20)].map((_, i) => (
<div key={i} className="particle" style={{ '--i': i, '--duration': `${15 + Math.random() * 20}s`, '--delay': `${Math.random() * 5}s` }}></div>
))}
</div>
<div className="about-hero-content">
<div className="hero-badge">
<span className="badge-dot"></span>
Established 1994
<span className="badge-line"></span>
</div>
<h1 className="hero-title">
About <span className="gradient-text">PUSOM</span>
</h1>
<div className="hero-description-wrapper">
<p className="hero-description">
Purbanchal University, School of Management (PUSOM) stands as a beacon of academic excellence, 
established under the Purbanchal University Act 1994. Our mission is to develop visionary leaders 
who drive positive change in business, government, and society.
</p>
<p className="hero-description">
The Faculty of Management (FOM) delivers professional, practical programs designed to create 
efficient and capable professionals. Currently, we offer Ph.D., M.Phil, MBA & BBA programs 
that blend theoretical knowledge with real-world application.
</p>
</div>
<div className="hero-actions">
<button className="btn-primary">
<span>Explore Programs</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
<button className="btn-glass">
<span>Download Brochure</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
</div>
</div>
<div className="hero-scroll-indicator">
<span>Scroll to explore</span>
<div className="scroll-mouse">
<div className="scroll-wheel"></div>
</div>
</div>
</section>
{/* Stats Section */}
<section id="stats" className="stats-section animate-section" ref={statsRef}>
<div className="container">
<div className="stats-grid">
{stats.map((stat, index) => (
<div 
key={index} 
className="stat-card"
style={{animationDelay: `${index * 0.1}s`, "--stat-color": stat.color}}
>
<div className="stat-icon-wrapper">
<span className="stat-icon">{stat.icon}</span>
</div>
<div className="stat-content">
<h2 className="stat-number">
{stat.number}{stat.suffix}
</h2>
<p className="stat-label">{stat.label}</p>
<p className="stat-description">{stat.description}</p>
</div>
<div className="stat-decoration"></div>
</div>
))}
</div>
</div>
</section>
{/* Mission & Values Section */}
<section id="values" className="values-section animate-section">
<div className="container">
<div className="section-header">
<span className="section-badge">
<span className="badge-icon">✨</span>
Our Core Values
</span>
<h2 className="section-title">
What <span className="gradient-text">Drives Us</span>
</h2>
<p className="section-description">
Discover the principles that guide our commitment to educational excellence
</p>
</div>
<div className="values-grid">
{values.map((value, index) => (
<div key={index} className="value-card" style={{animationDelay: `${index * 0.15}s`, "--value-gradient": value.gradient}}>
<div className="value-icon-wrapper">
<span className="value-icon">{value.icon}</span>
</div>
<h3 className="value-title">{value.title}</h3>
<p className="value-description">{value.description}</p>
<div className="value-glow"></div>
</div>
))}
</div>
</div>
</section>
{/* Enhanced Interactive Timeline Section */}
<section id="timeline" className="timeline-section animate-section" ref={timelineRef}>
<div className="container">
<div className="section-header">
<span className="section-badge">
<span className="badge-icon">📅</span>
Our Journey
</span>
<h2 className="section-title">
PUSOM <span className="gradient-text">Through the Years</span>
</h2>
<p className="section-description">
A legacy of excellence spanning three decades — explore our remarkable journey
</p>
</div>
{/* Decade Filter */}
<div className="timeline-decades-filter">
{decades.map((decade) => (
<button
key={decade.id}
className={`decade-btn ${selectedDecade === decade.id ? 'active' : ''}`}
onClick={() => setSelectedDecade(decade.id)}
style={{ "--decade-color": decade.color }}
>
<span className="decade-icon">{decade.icon}</span>
<span>{decade.label}</span>
</button>
))}
</div>
{/* Timeline Progress Bar */}
<div className="timeline-progress-wrapper">
<div className="timeline-progress-bar">
<div className="timeline-progress-fill" style={{ width: `${timelineProgress}%` }}>
<div className="progress-glow"></div>
</div>
</div>
<div className="timeline-progress-label">
Journey Progress: {Math.floor(timelineProgress)}%
</div>
</div>
{/* Vertical Timeline */}
<div className="timeline-vertical">
{filteredMilestones.map((milestone, index) => (
<div
key={index}
className={`timeline-item-wrapper ${index % 2 === 0 ? 'left' : 'right'} ${activeMilestone === index ? 'active' : ''} ${hoveredMilestone === index ? 'hovered' : ''}`}
style={{ animationDelay: `${index * 0.15}s` }}
onClick={() => setActiveMilestone(activeMilestone === index ? null : index)}
onMouseEnter={() => setHoveredMilestone(index)}
onMouseLeave={() => setHoveredMilestone(null)}
>
{/* Timeline Card */}
<div className="timeline-card" style={{ "--card-color": milestone.color }}>
<div className="timeline-card-inner">
{/* Card Image */}
<div className="timeline-card-image">
<img src={milestone.image} alt={milestone.title} loading="lazy" />
<div className="timeline-card-overlay" style={{ background: `linear-gradient(135deg, ${milestone.color}dd, ${milestone.color}99)` }}>
<div className="timeline-card-year-badge">
<span className="year-number">{milestone.year}</span>
<span className="year-label">Year</span>
</div>
</div>
</div>
{/* Card Content */}
<div className="timeline-card-content">
<div className="timeline-card-category" style={{ backgroundColor: `${milestone.color}15`, color: milestone.color }}>
<span className="category-icon">{milestone.icon}</span>
<span>{milestone.category}</span>
</div>
<h3 className="timeline-card-title">{milestone.title}</h3>
<p className="timeline-card-description">{milestone.description}</p>
{/* Impact Badge */}
<div className="timeline-impact-badge" style={{ backgroundColor: `${milestone.color}10`, borderLeftColor: milestone.color }}>
<span className="impact-icon">📊</span>
<span className="impact-text">{milestone.impact}</span>
</div>
{/* Achievements Tags */}
<div className="timeline-achievements-tags">
{milestone.achievements.map((achievement, i) => (
<span key={i} className="achievement-tag" style={{ backgroundColor: `${milestone.color}10`, color: milestone.color }}>
{achievement}
</span>
))}
</div>
{/* Expanded Details */}
<div className={`timeline-card-expanded ${activeMilestone === index ? 'expanded' : ''}`}>
<div className="expanded-details-wrapper">
<svg className="expanded-quote" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={milestone.color} strokeWidth="2">
<path d="M10 11h-4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4-4 4" />
<path d="M19 11h-4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4-4 4" />
</svg>
<p className="expanded-details">{milestone.details}</p>
</div>
<div className="expanded-achievements">
<h4>Key Achievements:</h4>
<ul>
{milestone.achievements.map((achievement, i) => (
<li key={i}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={milestone.color} strokeWidth="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
{achievement}
</li>
))}
</ul>
</div>
</div>
<button className="btn-read-more" style={{ color: milestone.color }}>
{activeMilestone === index ? 'Show Less' : 'Read More'}
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<polyline points={activeMilestone === index ? "18 15 12 9 6 15" : "6 9 12 15 18 9"} />
</svg>
</button>
</div>
</div>
</div>
{/* Timeline Node */}
<div className="timeline-node-wrapper">
<div className="timeline-node" style={{ background: milestone.color }}>
<div className="node-pulse" style={{ background: milestone.color }}></div>
<div className="node-inner">
<span className="node-icon">{milestone.icon}</span>
<span className="node-year">{milestone.year}</span>
</div>
</div>
{index < filteredMilestones.length - 1 && (
<div className="timeline-connector">
<div className="connector-line" style={{ background: `linear-gradient(to bottom, ${milestone.color}, ${filteredMilestones[index + 1]?.color || milestone.color})` }}></div>
<div className="connector-dot"></div>
</div>
)}
</div>
</div>
))}
</div>
{/* Quick Stats Below Timeline */}
<div className="timeline-stats-row">
<div className="timeline-stat-item">
<div className="timeline-stat-icon">📅</div>
<div className="timeline-stat-info">
<span className="timeline-stat-number">{filteredMilestones.length}</span>
<span className="timeline-stat-label">Key Milestones</span>
</div>
</div>
<div className="timeline-stat-item">
<div className="timeline-stat-icon">⏰</div>
<div className="timeline-stat-info">
<span className="timeline-stat-number">30+</span>
<span className="timeline-stat-label">Years of History</span>
</div>
</div>
<div className="timeline-stat-item">
<div className="timeline-stat-icon">👑</div>
<div className="timeline-stat-info">
<span className="timeline-stat-number">9</span>
<span className="timeline-stat-label">Campus Chiefs</span>
</div>
</div>
<div className="timeline-stat-item">
<div className="timeline-stat-icon">🎓</div>
<div className="timeline-stat-info">
<span className="timeline-stat-number">5000+</span>
<span className="timeline-stat-label">Graduates</span>
</div>
</div>
</div>
</div>
</section>
{/* Leadership Section */}
<section id="leadership" className="leadership-section animate-section">
<div className="container">
<div className="section-header">
<span className="section-badge">
<span className="badge-icon">👑</span>
Leadership Legacy
</span>
<h2 className="section-title">
Our <span className="gradient-text">Campus Chiefs</span>
</h2>
<p className="section-description">
Visionary leaders who have shaped PUSOM's journey to excellence
</p>
</div>
{/* Current Chief Highlight */}
{chiefs.filter(chief => chief.current).map((currentChief, index) => (
<div key={index} className="current-chief-card">
<div className="current-chief-badge">
<span>Current Campus Chief</span>
<div className="badge-glow"></div>
</div>
<div className="current-chief-content">
<div className="current-chief-image-wrapper">
<img src={currentChief.image} alt={currentChief.name} className="current-chief-image" />
<div className="current-chief-glow"></div>
<div className="current-chief-quote-icon">“</div>
</div>
<div className="current-chief-info">
<h3 className="current-chief-name">{currentChief.name}</h3>
<p className="current-chief-period">{currentChief.period}</p>
<p className="current-chief-description">{currentChief.description}</p>
{currentChief.quote && (
<div className="current-chief-quote">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M10 11h-4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4-4 4" />
<path d="M19 11h-4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4-4 4" />
</svg>
<p>"{currentChief.quote}"</p>
</div>
)}
<div className="current-chief-achievements">
<h4>Key Initiatives</h4>
<ul>
{currentChief.achievements.map((achievement, i) => (
<li key={i}>
<span className="achievement-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
</span>
{achievement}
</li>
))}
</ul>
</div>
</div>
</div>
</div>
))}
{/* All Chiefs Grid */}
<div className="chiefs-grid">
{chiefs.filter(chief => !chief.current).map((chief, index) => (
<div 
key={index} 
className={`chief-card ${activeChief === index ? 'active' : ''}`}
onMouseEnter={() => setActiveChief(index)}
onMouseLeave={() => setActiveChief(null)}
style={{animationDelay: `${index * 0.1}s`}}
>
<div className="chief-card-image">
<img src={chief.image} alt={chief.name} />
<div className="chief-card-overlay"></div>
<div className="chief-card-period-badge">{chief.period.split(' – ')[0]}</div>
</div>
<div className="chief-card-content">
<h3 className="chief-name">{chief.name}</h3>
<p className="chief-period">{chief.period}</p>
<p className="chief-description">{chief.description}</p>
</div>
<div className="chief-card-expanded">
<h4>Achievements</h4>
<ul>
{chief.achievements.map((achievement, i) => (
<li key={i}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
{achievement}
</li>
))}
</ul>
</div>
</div>
))}
</div>
</div>
</section>
{/* CTA Section */}
<section className="cta-section">
<div className="container">
<div className="cta-card">
<div className="cta-content">
<h2 className="cta-title">Become Part of Our Legacy</h2>
<p className="cta-description">
Join thousands of successful alumni who have transformed their careers with PUSOM. 
Your journey to excellence starts here.
</p>
<div className="cta-actions">
<button className="btn-primary">
<span>Apply for 2026</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
<button className="btn-glass-dark">
<span>Contact Admissions</span>
</button>
</div>
</div>
<div className="cta-decoration">
<div className="cta-shape shape-1"></div>
<div className="cta-shape shape-2"></div>
<div className="cta-shape shape-3"></div>
</div>
</div>
</div>
</section>
</div>
);
}
export default About;

Complete About.css File

/* ===== CSS Variables ===== */
:root {
--primary: #3b82f6;
--primary-dark: #1d4ed8;
--secondary: #8b5cf6;
--accent: #06b6d4;
--success: #10b981;
--warning: #f59e0b;
--dark: #0f172a;
--dark-2: #1e293b;
--gray: #64748b;
--gray-light: #94a3b8;
--light: #f8fafc;
--white: #ffffff;
--gradient-1: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
--gradient-2: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
--gradient-3: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
--shadow-2xl: 0 25px 50px rgba(0,0,0,0.25);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 24px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===== Global Styles ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about-container {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--dark);
overflow-x: hidden;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* ===== Animations ===== */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.6); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes slideInLine {
from { width: 0; opacity: 0; }
to { width: 100%; opacity: 1; }
}
@keyframes nodePop {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes progressGlow {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes particleFloat {
0% { transform: translateY(0) translateX(0); opacity: 0; }
50% { opacity: 0.5; }
100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
}
.animate-section {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-section[id] {
opacity: 1;
transform: translateY(0);
}
/* ===== Particle Background ===== */
.particle-container {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
bottom: -20px;
width: 4px;
height: 4px;
background: rgba(59, 130, 246, 0.3);
border-radius: 50%;
animation: particleFloat var(--duration) linear infinite;
animation-delay: var(--delay);
left: calc(var(--i) * 5%);
}
/* ===== Gradient Text ===== */
.gradient-text {
background: linear-gradient(135deg, #60a5fa, #a78bfa, #60a5fa);
background-size: 200% 200%;
animation: gradientShift 3s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===== Section Headers ===== */
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background: rgba(59, 130, 246, 0.1);
color: var(--primary);
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.badge-icon {
font-size: 1.1rem;
}
.section-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
margin-bottom: 16px;
line-height: 1.2;
color: var(--dark);
}
.section-description {
font-size: 1.15rem;
color: var(--gray);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* ===== Hero Section ===== */
.about-hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 120px 24px 80px;
overflow: hidden;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.about-hero-bg {
position: absolute;
inset: 0;
background-image: 
radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
}
.about-hero-overlay {
position: absolute;
inset: 0;
background: 
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(255, 255, 255, 0.02) 10px,
rgba(255, 255, 255, 0.02) 20px
);
}
.about-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
text-align: center;
animation: fadeInUp 1s ease-out;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 24px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
color: var(--white);
font-size: 0.95rem;
font-weight: 500;
margin-bottom: 32px;
position: relative;
}
.badge-dot {
width: 8px;
height: 8px;
background: var(--success);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.badge-line {
position: absolute;
bottom: -2px;
left: 10%;
width: 80%;
height: 2px;
background: var(--gradient-1);
animation: slideInLine 1s ease-out;
}
.hero-title {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 800;
color: var(--white);
margin-bottom: 32px;
letter-spacing: -1px;
line-height: 1.1;
}
.hero-description-wrapper {
margin-bottom: 48px;
}
.hero-description {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.8;
margin-bottom: 16px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.hero-actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.hero-scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.8rem;
}
.scroll-mouse {
width: 26px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 20px;
position: relative;
}
.scroll-wheel {
width: 4px;
height: 8px;
background: var(--white);
border-radius: 2px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: pulse 1.5s ease-in-out infinite;
}
/* ===== Buttons ===== */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 36px;
background: var(--gradient-1);
color: var(--white);
border: none;
border-radius: 50px;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5);
}
.btn-glass {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 36px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: var(--white);
border-radius: 50px;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.4);
}
.btn-glass-dark {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 36px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--white);
border-radius: 50px;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.btn-glass-dark:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
/* ===== Stats Section ===== */
.stats-section {
padding: 80px 0;
margin-top: -60px;
position: relative;
z-index: 10;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.stat-card {
background: var(--white);
padding: 40px 30px;
border-radius: var(--radius-xl);
text-align: center;
box-shadow: var(--shadow-lg);
transition: var(--transition);
animation: fadeInUp 0.6s ease backwards;
position: relative;
overflow: hidden;
cursor: pointer;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--stat-color, var(--gradient-1));
transform: scaleX(0);
transition: transform 0.4s ease;
}
.stat-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-2xl);
}
.stat-card:hover::before {
transform: scaleX(1);
}
.stat-card:hover .stat-icon-wrapper {
animation: float 2s ease-in-out infinite;
}
.stat-icon-wrapper {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: var(--transition);
}
.stat-icon {
font-size: 2rem;
}
.stat-number {
font-size: 2.8rem;
font-weight: 800;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
line-height: 1;
}
.stat-label {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 8px;
}
.stat-description {
color: var(--gray);
font-size: 0.9rem;
line-height: 1.5;
}
.stat-decoration {
position: absolute;
bottom: -20px;
right: -20px;
width: 100px;
height: 100px;
background: var(--stat-color, var(--primary));
opacity: 0.05;
border-radius: 50%;
transition: var(--transition);
}
.stat-card:hover .stat-decoration {
transform: scale(1.5);
opacity: 0.1;
}
/* ===== Values Section ===== */
.values-section {
padding: 100px 0;
background: var(--light);
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.value-card {
background: var(--white);
padding: 40px 30px;
border-radius: var(--radius-xl);
text-align: center;
box-shadow: var(--shadow-md);
transition: var(--transition);
animation: fadeInUp 0.6s ease backwards;
border: 1px solid #e2e8f0;
position: relative;
overflow: hidden;
}
.value-card::after {
content: '';
position: absolute;
inset: 0;
background: var(--value-gradient, var(--gradient-1));
opacity: 0;
transition: var(--transition);
z-index: 1;
}
.value-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: transparent;
}
.value-card:hover::after {
opacity: 0.95;
}
.value-card:hover .value-icon-wrapper,
.value-card:hover .value-title,
.value-card:hover .value-description {
color: var(--white);
position: relative;
z-index: 2;
}
.value-card:hover .value-icon-wrapper {
background: rgba(255, 255, 255, 0.2);
}
.value-icon-wrapper {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: var(--transition);
}
.value-icon {
font-size: 2rem;
}
.value-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 12px;
color: var(--dark);
transition: var(--transition);
}
.value-description {
color: var(--gray);
line-height: 1.7;
font-size: 0.95rem;
transition: var(--transition);
}
.value-glow {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background: var(--value-gradient, var(--gradient-1));
transition: width 0.4s ease;
}
.value-card:hover .value-glow {
width: 60%;
}
/* ===== ENHANCED TIMELINE SECTION ===== */
.timeline-section {
padding: 100px 0;
background: linear-gradient(180deg, var(--white) 0%, var(--light) 100%);
position: relative;
}
/* Decade Filter */
.timeline-decades-filter {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 60px;
}
.decade-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: var(--white);
border: 2px solid #e2e8f0;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
color: var(--gray);
cursor: pointer;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.decade-btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--decade-color, var(--primary));
opacity: 0;
transition: opacity 0.3s ease;
}
.decade-btn:hover {
transform: translateY(-3px);
border-color: var(--decade-color);
color: var(--decade-color);
}
.decade-btn.active {
background: var(--decade-color);
border-color: var(--decade-color);
color: var(--white);
}
.decade-icon {
font-size: 1.2rem;
position: relative;
z-index: 1;
}
/* Timeline Progress Bar */
.timeline-progress-wrapper {
max-width: 800px;
margin: 0 auto 60px;
text-align: center;
}
.timeline-progress-bar {
height: 4px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 8px;
}
.timeline-progress-fill {
height: 100%;
background: var(--gradient-1);
border-radius: 4px;
position: relative;
transition: width 0.1s linear;
}
.progress-glow {
position: absolute;
right: 0;
top: -2px;
width: 6px;
height: 8px;
background: var(--primary);
border-radius: 50%;
animation: progressGlow 1s ease-in-out infinite;
}
.timeline-progress-label {
font-size: 0.85rem;
color: var(--gray);
font-weight: 500;
}
/* Vertical Timeline */
.timeline-vertical {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline-item-wrapper {
display: flex;
margin-bottom: 80px;
position: relative;
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.timeline-item-wrapper.left {
flex-direction: row;
}
.timeline-item-wrapper.right {
flex-direction: row-reverse;
}
/* Timeline Card */
.timeline-card {
flex: 1;
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
transition: var(--transition);
cursor: pointer;
position: relative;
}
.timeline-item-wrapper:hover .timeline-card {
transform: translateY(-5px);
box-shadow: var(--shadow-2xl);
}
.timeline-card-inner {
display: flex;
flex-direction: column;
}
.timeline-card-image {
position: relative;
height: 220px;
overflow: hidden;
}
.timeline-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.timeline-item-wrapper:hover .timeline-card-image img {
transform: scale(1.05);
}
.timeline-card-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding: 20px;
}
.timeline-card-year-badge {
background: rgba(255, 255, 255, 0.95);
padding: 12px 20px;
border-radius: var(--radius-lg);
text-align: center;
backdrop-filter: blur(10px);
box-shadow: var(--shadow-md);
}
.year-number {
display: block;
font-size: 1.5rem;
font-weight: 800;
color: var(--dark);
line-height: 1;
}
.year-label {
display: block;
font-size: 0.7rem;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 1px;
}
.timeline-card-content {
padding: 24px;
}
.timeline-card-category {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 16px;
}
.category-icon {
font-size: 0.9rem;
}
.timeline-card-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 12px;
}
.timeline-card-description {
color: var(--gray);
line-height: 1.6;
margin-bottom: 16px;
}
/* Impact Badge */
.timeline-impact-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
border-left: 3px solid;
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 16px;
}
.impact-icon {
font-size: 1rem;
}
.impact-text {
color: var(--dark-2);
}
/* Achievements Tags */
.timeline-achievements-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.achievement-tag {
padding: 4px 12px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 500;
}
/* Expanded Details */
.timeline-card-expanded {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.timeline-card-expanded.expanded {
max-height: 500px;
}
.expanded-details-wrapper {
position: relative;
padding: 16px;
background: var(--light);
border-radius: var(--radius-md);
margin-bottom: 16px;
}
.expanded-quote {
position: absolute;
top: 10px;
left: 10px;
opacity: 0.3;
}
.expanded-details {
padding-left: 30px;
color: var(--dark-2);
line-height: 1.7;
font-size: 0.9rem;
}
.expanded-achievements h4 {
font-size: 0.9rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 10px;
}
.expanded-achievements ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.expanded-achievements li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--gray);
}
/* Read More Button */
.btn-read-more {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 16px;
}
.btn-read-more:hover {
gap: 12px;
}
/* Timeline Node */
.timeline-node-wrapper {
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.timeline-node {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
transition: var(--transition);
animation: nodePop 0.5s ease;
}
.timeline-item-wrapper:hover .timeline-node {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(0,0,0,0.2);
}
.node-pulse {
position: absolute;
inset: -10px;
border-radius: 50%;
opacity: 0.4;
animation: pulse 2s ease-in-out infinite;
}
.node-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.node-icon {
font-size: 1.2rem;
filter: brightness(0) invert(1);
}
.node-year {
font-size: 0.7rem;
font-weight: 700;
color: var(--white);
}
.timeline-connector {
position: absolute;
top: 70px;
width: 2px;
height: calc(100% + 40px);
display: flex;
flex-direction: column;
align-items: center;
}
.connector-line {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, var(--primary), var(--secondary));
}
.connector-dot {
width: 8px;
height: 8px;
background: var(--primary);
border-radius: 50%;
margin-top: auto;
margin-bottom: -4px;
}
/* Timeline Stats Row */
.timeline-stats-row {
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
margin-top: 60px;
padding: 40px;
background: var(--white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
}
.timeline-stat-item {
display: flex;
align-items: center;
gap: 16px;
}
.timeline-stat-icon {
width: 50px;
height: 50px;
background: var(--gradient-1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
animation: float 3s ease-in-out infinite;
}
.timeline-stat-info {
display: flex;
flex-direction: column;
}
.timeline-stat-number {
font-size: 1.8rem;
font-weight: 800;
color: var(--dark);
line-height: 1;
}
.timeline-stat-label {
font-size: 0.85rem;
color: var(--gray);
}
/* ===== Leadership Section ===== */
.leadership-section {
padding: 100px 0;
background: var(--light);
}
/* Current Chief Card */
.current-chief-card {
background: var(--white);
border-radius: var(--radius-2xl);
padding: 60px;
margin-bottom: 60px;
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
animation: scaleIn 0.8s ease;
}
.current-chief-badge {
position: absolute;
top: 30px;
right: -35px;
background: var(--gradient-1);
color: var(--white);
padding: 10px 50px;
font-size: 0.9rem;
font-weight: 700;
transform: rotate(45deg);
box-shadow: 0 5px 20px rgba(59, 130, 246, 0.3);
z-index: 2;
}
.badge-glow {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: shimmer 2s infinite;
}
.current-chief-content {
display: flex;
gap: 60px;
align-items: center;
}
.current-chief-image-wrapper {
position: relative;
flex-shrink: 0;
}
.current-chief-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--primary);
position: relative;
z-index: 2;
}
.current-chief-glow {
position: absolute;
inset: -10px;
border-radius: 50%;
background: var(--gradient-1);
opacity: 0.2;
filter: blur(20px);
animation: glow 2s ease-in-out infinite;
}
.current-chief-quote-icon {
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--white);
z-index: 3;
}
.current-chief-info {
flex: 1;
}
.current-chief-name {
font-size: 2rem;
font-weight: 800;
color: var(--dark);
margin-bottom: 8px;
}
.current-chief-period {
color: var(--primary);
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 16px;
display: inline-block;
padding: 6px 16px;
background: rgba(59, 130, 246, 0.1);
border-radius: 50px;
}
.current-chief-description {
color: var(--gray);
line-height: 1.7;
font-size: 1.05rem;
margin-bottom: 16px;
}
.current-chief-quote {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: var(--light);
border-radius: var(--radius-md);
margin-bottom: 24px;
border-left: 3px solid var(--primary);
}
.current-chief-quote p {
color: var(--dark-2);
font-style: italic;
font-size: 0.95rem;
line-height: 1.6;
}
.current-chief-achievements h4 {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 12px;
}
.current-chief-achievements ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.current-chief-achievements li {
display: flex;
align-items: center;
gap: 10px;
color: var(--gray);
font-size: 0.95rem;
}
.achievement-icon {
width: 24px;
height: 24px;
background: var(--success);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Chiefs Grid */
.chiefs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.chief-card {
background: var(--white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: var(--transition);
animation: fadeInUp 0.6s ease backwards;
cursor: pointer;
position: relative;
}
.chief-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-2xl);
}
.chief-card-image {
position: relative;
height: 220px;
overflow: hidden;
}
.chief-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.chief-card:hover .chief-card-image img {
transform: scale(1.1);
}
.chief-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 23, 42, 0.8), transparent);
opacity: 0;
transition: var(--transition);
}
.chief-card:hover .chief-card-overlay {
opacity: 1;
}
.chief-card-period-badge {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(5px);
padding: 4px 12px;
border-radius: 50px;
font-size: 0.75rem;
color: var(--white);
font-weight: 500;
}
.chief-card-content {
padding: 20px;
}
.chief-name {
font-size: 1.2rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 6px;
}
.chief-period {
color: var(--primary);
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 8px;
}
.chief-description {
color: var(--gray);
font-size: 0.9rem;
line-height: 1.5;
}
.chief-card-expanded {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--white);
padding: 20px;
transform: translateY(100%);
transition: transform 0.4s ease;
border-top: 2px solid var(--primary);
}
.chief-card.active .chief-card-expanded {
transform: translateY(0);
}
.chief-card-expanded h4 {
font-size: 0.9rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 10px;
}
.chief-card-expanded ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.chief-card-expanded li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--gray);
}
/* ===== CTA Section ===== */
.cta-section {
padding: 100px 0;
background: var(--white);
}
.cta-card {
background: var(--gradient-1);
border-radius: var(--radius-2xl);
padding: 80px 60px;
position: relative;
overflow: hidden;
animation: scaleIn 0.8s ease;
}
.cta-content {
position: relative;
z-index: 2;
max-width: 600px;
}
.cta-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--white);
margin-bottom: 16px;
}
.cta-description {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 32px;
}
.cta-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.cta-actions .btn-primary {
background: var(--white);
color: var(--primary);
}
.cta-actions .btn-primary:hover {
background: var(--light);
color: var(--primary-dark);
}
.cta-decoration {
position: absolute;
right: -50px;
top: -50px;
width: 400px;
height: 400px;
}
.cta-shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.shape-1 {
width: 300px;
height: 300px;
right: 0;
top: 0;
animation: float 6s ease-in-out infinite;
}
.shape-2 {
width: 200px;
height: 200px;
right: 150px;
top: 150px;
animation: float 8s ease-in-out infinite reverse;
}
.shape-3 {
width: 100px;
height: 100px;
right: 50px;
top: 250px;
animation: float 4s ease-in-out infinite;
}
/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
.timeline-item-wrapper.left,
.timeline-item-wrapper.right {
flex-direction: column;
align-items: center;
}
.timeline-card {
width: 100%;
margin-bottom: 20px;
}
.timeline-node-wrapper {
order: -1;
margin-bottom: 20px;
}
.timeline-connector {
display: none;
}
.current-chief-content {
flex-direction: column;
text-align: center;
gap: 30px;
}
.current-chief-achievements ul {
align-items: center;
}
.current-chief-badge {
font-size: 0.75rem;
padding: 8px 40px;
}
.timeline-stats-row {
gap: 30px;
padding: 30px;
}
}
@media (max-width: 768px) {
.about-hero {
min-height: 80vh;
padding: 100px 24px 60px;
}
.hero-title {
font-size: 2.5rem;
}
.hero-description {
font-size: 1rem;
}
.stats-grid,
.values-grid,
.chiefs-grid {
grid-template-columns: 1fr;
}
.current-chief-card {
padding: 40px 24px;
}
.current-chief-badge {
top: 20px;
right: -40px;
font-size: 0.7rem;
padding: 6px 35px;
}
.section-header {
margin-bottom: 40px;
}
.cta-actions {
flex-direction: column;
}
.cta-card {
padding: 60px 30px;
}
.timeline-stats-row {
flex-direction: column;
align-items: center;
gap: 20px;
}
.timeline-stat-item {
width: 100%;
justify-content: center;
}
.timeline-decades-filter {
gap: 10px;
}
.decade-btn {
padding: 8px 16px;
font-size: 0.85rem;
}
.decade-icon {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.hero-actions {
flex-direction: column;
align-items: center;
}
.btn-primary,
.btn-glass,
.btn-glass-dark {
width: 100%;
justify-content: center;
}
.current-chief-image {
width: 150px;
height: 150px;
}
.current-chief-name {
font-size: 1.5rem;
}
.timeline-card-title {
font-size: 1.2rem;
}
.timeline-card-category {
font-size: 0.7rem;
}
.achievement-tag {
font-size: 0.7rem;
}
.timeline-progress-wrapper {
margin-bottom: 40px;
}
}

This complete implementation includes:

Features:

Interactive Timeline:

Decade Filter - Filter milestones by 1990s, 2000s, 2010s, 2020s
Scroll Progress Bar - Shows how far you've scrolled through the timeline
Expandable Cards - Click on any milestone to see detailed information
Hover Effects - Cards lift and images zoom on hover
Impact Badges - Each milestone shows its key impact
Achievement Tags - Color-coded tags for quick scanning
Visual Timeline Nodes - Color-coded circular nodes with icons and years
Connecting Lines - Gradient lines connecting milestones
Animation on Scroll - Elements fade in as they enter viewport

Visual Enhancements:

Gradient animations throughout
Particle background in hero section
Glow effects on hover
Floating animations for decorative elements
Pulse animations for live indicators
Shimmer effect on buttons
Responsive design for all screen sizes

Leadership Section:

Current Chief Highlight with quote and achievements
Grid of Past Chiefs with expandable achievement sections
Hover-to-expand functionality
Period badges on images

Stats and Values:

Animated stat cards with icons
Hover effects that reveal gradients
Value cards with color-coded gradients

Complete C Programming Guide + Compilers Collection

1. C srand() Function – Understanding Seed Initialization

https://macronepal.com/understanding-the-c-srand-function
Explains how srand() initializes the pseudo-random number generator in C by setting a seed value. Using the same seed produces the same sequence, while time(NULL) gives different results each run.

2. C rand() Function Mechanics and Limitations

https://macronepal.com/c-rand-function-mechanics-and-limitations
Explains how rand() generates pseudo-random numbers between 0 and RAND_MAX, its deterministic nature, and limitations for security use cases.

3. C log() Function

https://macronepal.com/c-log-function-2
Covers natural logarithm calculation using <math.h> and its applications.

4. Mastering Date and Time in C

https://macronepal.com/mastering-date-and-time-in-c
Explains <time.h> functions like time(), clock(), difftime(), and struct tm.

5. Mastering time_t Type in C

https://macronepal.com/mastering-the-c-time_t-type-for-time-management
Explains time representation as seconds since Unix epoch and conversion functions.

6. C exp() Function

https://macronepal.com/c-exp-function-mechanics-and-implementation
Explains exponential function exp(x) and its scientific applications.

7. C log() Function (Alternate Guide)

https://macronepal.com/c-log-function
Comparison of log() and log10() with usage examples.

8. C log10() Function

https://macronepal.com/mastering-the-log10-function-in-c
Explains base-10 logarithm for engineering and scientific applications.

9. C tan() Function

https://macronepal.com/understanding-the-c-tan-function
Explains tangent function and radian-based calculations.

10. Random Numbers in C (Secure vs Predictable)

https://macronepal.com/mastering-c-random-numbers-for-secure-and-predictable-applications
Explains difference between rand() and secure randomness methods.

11. Free Online C Compiler

https://macronepal.com/free-online-c-code-compiler-2
Browser-based compiler for testing C programs instantly.

C Functions, Arguments, Parameters & Flow

Mastering Functions in C – Complete Guide

https://macronepal.com/c/mastering-functions-in-c-a-complete-guide/
Covers function structure, modular programming, and real-world usage.

Function Arguments in C

https://macronepal.com/c-function-arguments/
Explains how arguments are passed and used in function calls.

Function Parameters in C

https://macronepal.com/c-function-parameters/
Explains defining inputs for functions and matching them with arguments.

Function Declarations in C

https://macronepal.com/c-function-declarations-syntax-rules-and-best-practices/
Covers prototypes, syntax rules, and best practices.

Function Calls in C

https://macronepal.com/understanding-function-calls-in-c-syntax-mechanics-and-best-practices/
Explains execution flow and parameter handling during function calls.

Void Functions in C

https://macronepal.com/understanding-void-functions-in-c-syntax-patterns-and-best-practices/
Explains functions that do not return values.

Return Values in C

https://macronepal.com/c-return-values-mechanics-types-and-best-practices/
Explains different return types and how functions return results.

Pass-by-Value in C

https://macronepal.com/aws/understanding-pass-by-value-in-c-mechanics-implications-and-best-practices/
Explains how copies of variables are passed into functions.

Pass-by-Reference in C

https://macronepal.com/c/understanding-pass-by-reference-in-c-pointers-semantics-and-safe-practices/
Explains using pointers to modify original variables.

C strstr() Function

https://macronepal.com/aws/c-strstr-function/
Explains substring search inside strings in C.

C Preprocessor & Macros

C Structures, Memory, Scope & Linkage

C Scope, Storage Classes & Typedef

Extra Articles

https://macronepal.com/13757-2/
https://macronepal.com/13748-2/
https://macronepal.com/13747-2/
https://macronepal.com/13746-2/
https://macronepal.com/13745-2/
https://macronepal.com/13708-2/
https://macronepal.com/13707-2/
https://macronepal.com/13702-2/

Online Compilers