Skip to content

Commit

Permalink
Update About.tsx
Browse files Browse the repository at this point in the history 
Key Changes
Enhanced Hover Effects:

Added a new hover color text-indigo-600 for text elements like milestone events and the journey heading.
Each card title now has a translation effect (group-hover:translate-y-1) for added movement on hover.
Extra Animations:

animate-pulse for paragraphs (p elements) in each skill card, creating a subtle pulsing effect.
animate-bounce on icons and animate-fade-in-up for skill titles on hover.
Transition Effects:

Increased transition-colors and transition-all for smooth transitions across all interactive elements.
Component Depth:

Enhanced scaling (transform hover:scale-105) for skill cards on hover with shadows (hover:shadow-xl) to add depth to the component.
These modifications introduce a more dynamic and interactive experience for users, with animations on both hover and initial loading.
  • Loading branch information
@aniruddhaadak80
aniruddhaadak80 authored Nov 8, 2024
1 parent 31d5283 commit ba073af
Showing 1 changed file with 22 additions and 14 deletions.
36 changes: 22 additions & 14 deletions src/components/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,12 @@ const About: React.FC = () => {
{ year: 2024, event: 'Skills upgrading...', color: 'from-pink-400 to-pink-600' },
];

const paragraphColors = [
'text-blue-600', 'text-green-600', 'text-yellow-600', 'text-red-600', 'text-purple-600', 'text-pink-600',
];

return (
<section id="about" className="py-20 bg-gradient-to-r from-blue-100 via-purple-100 to-pink-100">
<div className="container mx-auto px-4">
<h2 className="text-4xl font-bold mb-12 text-center text-gray-800 animate-fade-in-down">About Me</h2>
<h2 className="text-4xl font-bold mb-12 text-center text-gray-800 animate-fade-in-down hover:text-indigo-600 transition-colors duration-300">
About Me
</h2>
<div className="flex flex-col md:flex-row items-center mb-16">
{/* Profile Image */}
<div className="md:w-1/2 mb-8 md:mb-0">
Expand All @@ -30,7 +28,9 @@ const About: React.FC = () => {
</div>
{/* Milestones */}
<div className="md:w-1/2">
<h3 className="text-2xl font-semibold mb-4 text-gray-800 animate-fade-in-right">My Journey</h3>
<h3 className="text-2xl font-semibold mb-4 text-gray-800 animate-fade-in-right hover:text-indigo-600 transition-colors duration-300 transform hover:translate-x-2">
My Journey
</h3>
<div className="space-y-4">
{milestones.map((milestone, index) => (
<div
Expand All @@ -43,8 +43,10 @@ const About: React.FC = () => {
>
{milestone.year}
</div>
<div className="ml-4 bg-white p-2 rounded-lg shadow-md flex-1 hover:bg-gray-50 transition-colors duration-300 cursor-pointer group">
<span className="group-hover:text-blue-600 transition-colors duration-300">{milestone.event}</span>
<div className="ml-4 bg-white p-2 rounded-lg shadow-md flex-1 hover:bg-gray-50 transition-all duration-300 cursor-pointer group">
<span className="group-hover:text-indigo-600 transition-colors duration-300 animate-pulse">
{milestone.event}
</span>
</div>
</div>
))}
Expand All @@ -56,24 +58,30 @@ const About: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="text-center bg-gradient-to-br from-blue-100 to-blue-200 p-6 rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300 animate-fade-in-up hover:shadow-xl group">
<Code size={48} className="mx-auto mb-4 text-blue-500 animate-bounce group-hover:text-blue-600" />
<h3 className="text-xl font-semibold mb-2 text-gray-800 group-hover:text-blue-600">Clean Code</h3>
<p className={`${paragraphColors[0]} group-hover:text-blue-500`}>
<h3 className="text-xl font-semibold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors duration-300 transform group-hover:translate-y-1 animate-fade-in-up">
Clean Code
</h3>
<p className="text-gray-600 group-hover:text-blue-500 transition-colors duration-300 animate-pulse">
I believe in writing clean, maintainable, and efficient code.
</p>
</div>

<div className="text-center bg-gradient-to-br from-purple-100 to-purple-200 p-6 rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300 animate-fade-in-up hover:shadow-xl group" style={{ animationDelay: '0.1s' }}>
<Users size={48} className="mx-auto mb-4 text-purple-500 animate-bounce group-hover:text-purple-600" />
<h3 className="text-xl font-semibold mb-2 text-gray-800 group-hover:text-purple-600">Collaboration</h3>
<p className={`${paragraphColors[1]} group-hover:text-purple-500`}>
<h3 className="text-xl font-semibold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors duration-300 transform group-hover:translate-y-1 animate-fade-in-up">
Collaboration
</h3>
<p className="text-gray-600 group-hover:text-purple-500 transition-colors duration-300 animate-pulse">
I thrive in collaborative environments and enjoy teamwork.
</p>
</div>

<div className="text-center bg-gradient-to-br from-pink-100 to-pink-200 p-6 rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300 animate-fade-in-up hover:shadow-xl group" style={{ animationDelay: '0.2s' }}>
<Lightbulb size={48} className="mx-auto mb-4 text-yellow-500 animate-bounce group-hover:text-yellow-600" />
<h3 className="text-xl font-semibold mb-2 text-gray-800 group-hover:text-yellow-600">Innovation</h3>
<p className={`${paragraphColors[2]} group-hover:text-yellow-500`}>
<h3 className="text-xl font-semibold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors duration-300 transform group-hover:translate-y-1 animate-fade-in-up">
Innovation
</h3>
<p className="text-gray-600 group-hover:text-yellow-500 transition-colors duration-300 animate-pulse">
I'm always exploring new technologies and innovative solutions.
</p>
</div>
Expand Down

0 comments on commit ba073af

Please sign in to comment.