diff --git a/docs/Advance/profile-customization.md b/docs/Advance/profile-customization.md new file mode 100644 index 0000000..709d592 --- /dev/null +++ b/docs/Advance/profile-customization.md @@ -0,0 +1,305 @@ +# Profile Customization Guide + +Learn how to personalize your SkateHive profile with custom images, information, and your own magazine cover. + +## Table of Contents + +- [Accessing Profile Settings](#accessing-profile-settings) +- [Basic Profile Information](#basic-profile-information) +- [Custom Magazine Cover](#custom-magazine-cover) +- [Profile Images](#profile-images) +- [Connecting Wallets](#connecting-wallets) +- [Troubleshooting](#troubleshooting) + +--- + +## Accessing Profile Settings + +1. **Navigate to your profile** + - Click on your avatar in the top navigation bar + - Or visit `https://skatehive.app/user/[your-username]` + +2. **Open Edit Profile Modal** + - Click the **"Edit Profile"** button on your profile page + - The edit modal will appear with all customization options + +--- + +## Basic Profile Information + +### Name (Display Name) +Your public display name shown throughout SkateHive. + +**To update:** +- Find the **"Name"** field in the edit modal +- Enter your preferred display name +- This appears on your magazine cover and profile + +### About / Bio +A short description about yourself or your motto. + +**To update:** +- Find **"Words to live by? (optional)"** +- Enter a personal bio or skateboarding motto +- Maximum recommended length: 200 characters + +### Location +Select your country to connect with local skaters. + +**To update:** +- Click the **"Location"** dropdown +- Search or scroll to find your country +- Format: `US - United States`, `BR - Brazil`, etc. + +### Website +Link to your personal website, Instagram, or portfolio. + +**To update:** +- Enter your website URL in the **"Website"** field +- Must include `https://` or `http://` +- Example: `https://instagram.com/yourname` + +--- + +## Custom Magazine Cover + +Create a personalized magazine cover for your profile's flipbook magazine view! This feature gives you a unique, professional-looking magazine with your own cover image. + +### What is the Magazine Cover? + +When viewers visit your profile and click the **"Magazine"** view, they'll see your posts displayed in an interactive flipbook format. The cover page features: + +- **Your custom cover image** (full-page background) +- **Your display name** (horizontal text at top left) +- **Vertical "ZINE" text** (left side, skateboarding magazine style) +- **Your profile picture** (bottom left corner) +- **3D page effect** with realistic shadows + +### Setting Your Magazine Cover + +#### Method 1: Upload and Crop (Recommended) + +1. **Open Edit Profile modal** +2. Scroll to **"Mag Cover (optional)"** +3. Click the green **"Upload"** button +4. Select an image from your device + - Recommended: High-resolution photos (1000x1300px or larger) + - Supported formats: JPG, PNG, GIF, WEBP + - Best results: Action skateboarding photos, skatepark shots, or lifestyle images + +5. **Crop your image** + - The cropper modal will appear + - Adjust the crop area by dragging + - Use the **"Zoom"** slider to fine-tune (1x to 3x) + - The aspect ratio is locked to magazine dimensions (1000x1300px) + - Preview shows exactly how your cover will look + +6. **Upload to IPFS** + - Click **"Crop & Upload"** + - Wait for upload (shows "Uploading to IPFS...") + - Success notification appears + - The cropper closes automatically + - Your IPFS URL appears in the input field + +7. **Save your changes** + - Click the **"Save Changes"** button at the top + - Confirm the transaction in Keychain + - Your magazine cover is now live! + +#### Method 2: Paste Image URL + +If you already have an image hosted online: + +1. Copy the direct image URL (must end in .jpg, .png, etc.) +2. Paste it into the **"Mag Cover"** input field +3. Click **"Save Changes"** + +**Recommended image specs:** +- **Dimensions:** 1000px × 1300px (portrait orientation) +- **Aspect ratio:** 0.77:1 (magazine cover ratio) +- **File size:** Under 5MB for faster loading +- **Format:** JPEG (best for photos), PNG (for graphics/text) + +### Design Tips for Great Magazine Covers + +**Photography:** +- Use high-quality, well-lit photos +- Action shots work great (skating, tricks, parks) +- Lifestyle photos showing personality +- Street photography with urban vibes + +**Composition:** +- Leave space at top left for your name +- Leave space on left side for "ZINE" text +- Avoid important content in the bottom left (profile picture area) +- High contrast images work best with the green text overlay + +**Style inspiration:** +- Classic skateboarding magazines (Thrasher, Transworld) +- Skateboarder magazine covers (vintage style) +- Modern skate zines and independent publications + +### Viewing Your Magazine + +1. Go to your profile +2. Click the **"Magazine"** view tab +3. Your custom cover displays on the first page +4. Flip through to see your posts in magazine format +5. Share your magazine link: `https://skatehive.app/user/[username]?view=magazine` + +### Updating Your Cover + +You can change your magazine cover anytime: + +1. Open Edit Profile +2. Upload a new image or paste a new URL +3. The cropper remembers your preferences +4. Save changes to update + +**Pro tip:** Match your cover to seasons, events, or your latest skate video! + +--- + +## Profile Images + +### Profile Picture + +Your avatar shown across SkateHive. + +**To update:** +1. Find **"Profile Picture"** section +2. Click **"Upload"** button or paste image URL +3. Recommended size: 400x400px (square) +4. Auto-displays in navigation, posts, and comments + +### Profile Background + +Header image on your profile page. + +**To update:** +1. Find **"Profile Background"** section +2. Click **"Upload"** button or paste image URL +3. Recommended size: 1500x500px (wide banner) +4. Appears at the top of your profile + +**Upload options for all images:** +- **Direct Upload:** Click "Upload" → Select file → Auto-uploads to IPFS +- **URL Method:** Paste direct image URL from any source + +--- + +## Connecting Wallets + +### Ethereum Wallet + +Link your Ethereum address for Web3 features and rewards. + +**To connect:** +1. Find **"Ethereum Wallet"** section +2. Click **"Connect Ethereum Wallet"** +3. Click the RainbowKit "Connect Wallet" button +4. Select your wallet provider (MetaMask, Coinbase, etc.) +5. Approve the connection +6. Click **"Link Address"** to save +7. Click **"Save Changes"** + +**Features enabled:** +- $SKATEHIVE token rewards +- NFT integration +- Web3 authentication +- Cross-chain identity + +--- + +## Troubleshooting + +### Magazine Cover Issues + +**❌ "Cropping failed"** +- Check image file size (max 10MB) +- Try a different image format +- Ensure stable internet connection +- Close and reopen the cropper + +**❌ "Upload failed"** +- IPFS network might be slow, try again +- Check browser console for errors +- Use a different image file +- Try the URL paste method instead + +**❌ Cover not showing** +- Clear browser cache +- Ensure you clicked "Save Changes" +- Check that the IPFS URL is valid +- Wait a few minutes for IPFS propagation + +**❌ Text not visible on cover** +- Choose images with good contrast +- Avoid very light or very green backgrounds +- The text has black shadows for readability +- Test different zoom levels in the cropper + +### General Profile Issues + +**❌ Changes not saving** +- Ensure you're logged in with Keychain +- Check your Hive Resource Credits (RC) +- Approve the transaction popup +- Don't close the page during save + +**❌ Images not loading** +- Wait 30-60 seconds for IPFS upload +- Check image URL is valid +- Try a different image host +- Use IPFS-hosted images for permanence + + + + +## Best Practices + + + +## FAQ + +**Q: How much does it cost to update my profile?** +A: It uses Hive Resource Credits (RC), which regenerate over time. No monetary cost. + +**Q: Can I change my magazine cover multiple times?** +A: Yes! Update it as often as you want (respecting RC limits). + +**Q: Are my images stored forever?** +A: Images uploaded to IPFS are permanent and decentralized. + +**Q: Can others see my magazine?** +A: Yes! Anyone can view your personalized magazine by visiting your profile. + +**Q: What if I don't set a custom cover?** +A: Your magazine will use the default SkateHive cover with Matrix effect. + +**Q: Can I remove my magazine cover?** +A: Yes, clear the URL field and save changes to revert to default. + + +--- + +## Video Tutorial + +🎥 **Coming Soon:** Watch our step-by-step video guide on YouTube! + +--- + +## Next Steps + +Now that your profile is customized: + +1. **Create content** - Share your skate videos and photos +2. **Connect with skaters** - Follow and engage with the community +3. **Explore features** - Try the magazine view, spot map, and DAO + +**Happy skating!** 🛹 + +--- + +*Last updated: December 2025* +*SkateHive Team* \ No newline at end of file