Portfolio Website 🚀

A modern, interactive portfolio website built with React and TypeScript, featuring a unique blend of aesthetics and functionality.

✨ Unique Features

1. Interactive Background

• Custom parallax scrolling effect with a circuit board pattern
• Dynamic background that responds to user scroll
• Smooth transitions between light and dark modes

2. Modern UI Components

• Custom-designed glass morphism effects
• Animated section transitions with scroll-based reveals
• Interactive project cards with hover effects and image overlays
• Pill-style tags for tech stack display
• Custom-styled buttons with icon integration

3. Smart Navigation

• Context-aware top bar that shows/hides based on scroll position
• Smooth scrolling between sections
• Quick navigation buttons for important links
• Blog section with dedicated navigation

4. Project Showcase

• Dynamic project cards with:
  • Blurred image reflections
  • Tech stack tags
  • Multiple link options (GitHub, Blog, Live Demo)
  • Responsive layout that adapts to screen size
  • Reverse layout option for visual variety

5. Skills Section

• Interactive skills filtering system
• Category-based organization
• Animated visibility transitions
• Custom select component for category filtering

🛠️ Tech Stack

• Frontend Framework: React with TypeScript
• Styling: Tailwind CSS with custom configurations
• State Management: Custom stores for dark mode and navigation
• Icons: FontAwesome integration
• UI Components: Custom-built components with shadcn/ui
• Build Tool: Vite

📱 Responsive Design

The website is fully responsive with:

• Mobile-first approach
• Tailored layouts for different screen sizes
• Touch-friendly interactions
• Optimized performance across devices

🎨 Design Philosophy

• Clean, modern aesthetic
• Focus on user experience
• Smooth animations and transitions
• Consistent visual language
• Dark mode support for comfortable viewing

🚀 Featured Projects

1. Plant Together - The Google Docs of Software Design
2. Music Circle - Social music taste analysis
3. ML Content Pipeline - Automated TikTok content creation
4. Explore NASA - NASA image and video explorer

🔧 Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

📝 License

MIT License - feel free to use this code for your own portfolio!

---

Built with 💻 by Noureldeen Ahmed