https://github.com/aryanvbw/portfolio-builder
by vivek w and team
https://github.com/aryanvbw/portfolio-builder
Last synced: about 1 year ago
JSON representation
by vivek w and team
- Host: GitHub
- URL: https://github.com/aryanvbw/portfolio-builder
- Owner: AryanVBW
- License: mit
- Created: 2024-12-07T17:30:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-25T14:18:04.000Z (over 1 year ago)
- Last Synced: 2025-04-02T19:22:35.450Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://portfolio-builder.aryanvbw.live/
- Size: 18.5 MB
- Stars: 0
- Watchers: 1
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/AryanVBW/Portfolio-Builder.git
cd Portfolio-Builder
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
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](docs/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](LICENSE) file for details.
## 🤝 Contributing
Contributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) 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](https://github.com/AryanVBW)
- Twitter: [@vivekwagadare](https://twitter.com/vivekwagadare)
- LinkedIn: [Vivek Wagadare](https://www.linkedin.com/in/vivek-wagadare)
## ⭐ Show Your Support
If you find this project useful, please give it a star on GitHub!