Sakura Portfolio - React

A beautiful, modern portfolio website with an anime-inspired aesthetic featuring falling sakura petals animation. Built with React, Vite, and Tailwind CSS.

✨ Features

• 🌸 Animated Sakura Petals: Custom canvas animation with falling cherry blossom petals
• 🎨 Glassmorphism Design: Modern glass card effects with backdrop blur
• 📱 Fully Responsive: Mobile-first design that works on all devices
• ⚡ Fast Performance: Built with Vite for lightning-fast development and builds
• 🎯 SEO Optimized: Includes react-helmet for dynamic meta tags
• 🎨 Customizable: Easy to edit content and styling
• 🧩 Component-Based: Modular React components for easy maintenance

🚀 Installation

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Setup Instructions

1. Clone or download the project

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

   The app will be available at http://localhost:5173

4. Build for production

   npm run build

   The optimized build will be in the dist/ folder

5. Preview production build

   npm run preview

📁 Project Structure

sakura-portfolio-react/
├── src/
│   ├── assets/
│   │   └── images/           # Project images
│   │       ├── aboutme.png
│   │       ├── cafeproject.png
│   │       ├── garden.png
│   │       ├── homepagebg.png
│   │       └── study.png
│   ├── components/
│   │   ├── About.jsx         # About section component
│   │   ├── Footer.jsx        # Footer with social links
│   │   ├── Hero.jsx          # Hero/landing section
│   │   ├── Navbar.jsx        # Navigation bar
│   │   ├── ProjectCard.jsx   # Reusable project card
│   │   ├── Projects.jsx      # Projects grid section
│   │   ├── SakuraCanvas.jsx  # Animated sakura canvas
│   │   └── SEOHead.jsx       # SEO meta tags
│   ├── hooks/
│   │   └── useSakuraAnimation.js  # Custom hook for petal animation
│   ├── pages/
│   │   └── Home.jsx          # Main home page
│   ├── styles/
│   │   ├── index.css         # Global styles
│   │   └── sakura.css        # Sakura-specific styles
│   ├── App.jsx               # Main app component
│   └── main.jsx              # App entry point
├── index.html
├── package.json
├── tailwind.config.js
├── vite.config.js
└── README.md

🎨 Customization Guide

Update Personal Information

1. Navigation Logo - Edit src/components/Navbar.jsx
2. Hero Section - Edit src/components/Hero.jsx
3. About Me Bio - Edit src/components/About.jsx
4. Projects - Edit src/components/Projects.jsx
5. Social Links - Edit src/components/Footer.jsx

Change Images

Replace the images in src/assets/images/ with your own:

• homepagebg.png - Hero background
• aboutme.png - Profile picture
• cafeproject.png, study.png, garden.png - Project images

Modify Colors

Edit the Tailwind config in tailwind.config.js:

colors: {
  sakura: {
    light: '#fff0f3',
    pink: '#ffccd5',
    dark: '#ff8fab',
    text: '#595b83',
  },
}

Adjust Sakura Animation

Modify petal count and behavior in src/hooks/useSakuraAnimation.js:

const petalCount = 80; // Change number of petals

📦 Technologies Used

• React 18 - UI library
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Helmet - Document head management for SEO
• HTML5 Canvas - For sakura petal animation

🎯 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📝 License

This project is free to use for personal and commercial purposes.

👨‍💻 Credits

Template Created By: Saiyed Salimuddin

Acknowledgments

This template was built with love and dedication using:

• Design & Development: Saiyed Salimuddin
• UI Framework: React - A JavaScript library for building user interfaces
• Build Tool: Vite - Next Generation Frontend Tooling
• Styling: Tailwind CSS - A utility-first CSS framework
• SEO Management: React Helmet - Document head manager for React
• Animation: Custom Canvas API implementation for sakura petals
• Fonts: System fonts with carefully selected fallbacks
• Icons & Design Inspiration: Anime and Japanese aesthetic culture

Special Thanks

• The React community for excellent documentation and support
• Tailwind CSS team for the amazing utility-first framework
• All open-source contributors who make modern web development possible
• The anime and Japanese culture that inspired this beautiful sakura theme

Usage & Attribution

If you use this template for your portfolio:

• ⭐ A star on GitHub would be appreciated
• 💬 Attribution is welcomed but not required
• 🔗 Feel free to keep the "Template by Saiyed Salimuddin" credit in your footer

🤝 Contributing

Feel free to fork this project and customize it for your own portfolio!

📧 Contact

For questions or feedback, please reach out through the contact form on the portfolio.

---

Crafted with 💖 and falling sakura petals by Saiyed Salimuddin