Portfolio Builder

A modern, interactive portfolio builder that helps you create stunning developer portfolios with ease. Built with React, TypeScript, and Tailwind CSS.

🌟 Features

• Multiple Templates: Choose from various professionally designed templates
• Real-time Preview: See your changes instantly as you edit
• Dark Mode Support: All templates support system-based dark mode
• Responsive Design: Looks perfect on all devices
• Logo Upload: Add your personal or company logo
• Custom Styling: Easy customization with Tailwind CSS
• Export to ZIP: Download your portfolio as a ready-to-deploy package
• SEO Friendly: Generated portfolios follow SEO best practices

🚀 Quick Start

1. Clone the repository:

   git clone https://github.com/AryanVBW/Portfolio-Builder.git
   cd Portfolio-Builder

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:5173 in your browser

📦 Building Your Portfolio

1. Fill Your Information:

   • Add your personal details
   • Upload profile picture and logo
   • Add your skills and experience
   • Include your projects and education

2. Choose a Template:

   • Browse available templates
   • Preview how your portfolio looks
   • Switch between templates in real-time

3. Download Your Portfolio:

   • Click the "Download Portfolio" button
   • Get a ZIP file with your complete portfolio
   • Ready to deploy to any web hosting service

🎨 Available Templates

• Minimal: Clean and simple design
• Modern: Contemporary layout with smooth animations
• Creative: Unique design for creative professionals
• Cyber: Tech-inspired futuristic design
• Future: Modern and bold layout
• HKPatel: A template closely resembling the original HK_Patel site

🎨 New Template: HKPatel

The HKPatel template closely resembles the original HK_Patel site, featuring:

• Header: Navigation links for easy access to sections.
• Hero Section: A welcoming greeting with a dynamic typing effect.
• Skills Section: Showcases user skills with icons and animations.
• Projects Section: Displays projects with descriptions and technologies used.
• Education Section: Lists educational background with descriptions.

How to Use the HKPatel Template

1. Select the HKPatel template from the available options in the portfolio builder.
2. Fill in your personal information, skills, projects, and education.
3. Preview your portfolio in real-time and make adjustments as needed.
4. Download your portfolio as a ZIP file when you're ready to deploy.

🛠️ Technical Details

Technology Stack

• Frontend: React 18 with TypeScript
• Styling: Tailwind CSS
• State Management: React Context
• Build Tool: Vite
• File Generation: JSZip
• Icons: Lucide React

Project Structure

See STRUCTURE.md for detailed project structure documentation.

📱 Responsive Design

All generated portfolios are fully responsive and tested on:

• Desktop (1920px and above)
• Laptop (1024px to 1919px)
• Tablet (768px to 1023px)
• Mobile (320px to 767px)

🌙 Dark Mode

Dark mode is automatically enabled based on system preferences. The implementation:

• Uses CSS variables for theming
• Supports system preference detection
• Maintains consistent design in both modes

🔒 Security

• No server-side storage of personal information
• All processing done client-side
• Image handling via base64 encoding
• No external API dependencies

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guidelines for details.

🐛 Bug Reports

If you find a bug, please open an issue with:

1. Description of the bug
2. Steps to reproduce
3. Expected behavior
4. Screenshots (if applicable)

📞 Contact

• GitHub: @AryanVBW
• Twitter: @vivekwagadare
• LinkedIn: Vivek Wagadare

⭐ Show Your Support

If you find this project useful, please give it a star on GitHub!