Interactive Portfolio Timeline

A state-of-the-art, quirky, interactive portfolio website built with Next.js 15, featuring a vertical scrolling timeline adventure with smooth animations, easter eggs, and mobile-friendly interactions.

🚀 Features

• Next.js 15 App Router with TypeScript and TailwindCSS
• Smooth Scroll Timeline with snap-scrolling full-screen sections
• GSAP + ScrollTrigger for advanced scroll-triggered animations
• Framer Motion for component transitions and entrance effects
• Interactive Easter Eggs including the famous Konami Code
• Mobile Responsive with touch-friendly interactions
• Accessibility Features with proper alt text and keyboard navigation
• 9 Life Story Scenes from 1999 to present day

🎨 Timeline Scenes

1. 1999 - Birth 👶 - The beginning of world domination plans
2. 2001 - Car Obsession 🚗 - Career path decided at age 2
3. 2011-2012 - Abacus Champion 🧮 - Mental math superpowers activated
4. 2017-2021 - College 🎓 - Engineering degree with zero backlogs
5. 2021 - Amazon Risk Ops 📦 - Self-taught coding journey begins
6. 2022 - Frontend Awakening 🎨 - Designer friends' "joke" backfires
7. 2023 - Web3 Adventure 🚀 - Blockchain exploration and break time
8. 2024 - Farcaster & Base 🔗 - Decentralized social building
9. 2025 - Present 🌟 - Ready for the next adventure

🎮 Easter Eggs

• Konami Code: Type ↑↑↓↓←→←→BA to activate "Quirky Mode" with rainbow backgrounds
• Clickable Elements: Hidden interactive objects throughout the timeline
• Hover Surprises: Unexpected animations on various elements
• Birthday Cake: Click the cake in the first section for a surprise

📱 Mobile Optimization

• Touch-friendly scroll interactions
• Responsive design for all screen sizes
• Optimized animations for mobile performance
• Reduced motion support for accessibility

🛠️ Customization Checklist

Content Updates Needed:

• Replace placeholder contact information in ScenePresent.tsx
• Update personal details and timeline events to match your story
• Add your actual social media links and portfolio URLs
• Replace friend names and avatars in SceneFrontend.tsx

Assets & Styling:

• Add personal photos or illustrations to each scene
• Update color schemes to match your brand
• Customize gradient backgrounds for each section
• Add your own brand logos or icons

Advanced Enhancements:

• Implement horizontal scroll sections for detailed project showcases
• Add more easter eggs and interactive elements
• Integrate with a CMS for easy content updates
• Add analytics tracking for user interactions

SEO & Meta:

• Update meta descriptions and titles in layout.tsx
• Add Open Graph images for social sharing
• Implement structured data for better search visibility

🚀 Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser: Navigate to http://localhost:3000 to see your timeline

🎯 Performance Features

• Optimized animations with GSAP and Framer Motion
• Smooth scroll with CSS snap-scrolling
• Lazy loading for better performance
• Mobile-first responsive design
• Accessibility with keyboard navigation and screen reader support

📦 Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: TailwindCSS
• Animations: GSAP, ScrollTrigger, Framer Motion
• Icons: Emojis (for universal compatibility)
• Fonts: Inter (Google Fonts)

🔧 Development Notes

• Each scene is a separate React component in /components/
• Animation utilities are centralized in /lib/animations.ts
• Easter egg logic is managed in /lib/easterEggs.ts
• Mobile optimizations use CSS media queries and touch detection

📄 License

This project is open source and available under the MIT License.

---

Ready to tell your story in the most interactive way possible? Let's make your timeline legendary! 🌟