Code Folio Tool

A powerful, user-friendly tool that helps developers create stunning portfolio websites in minutes. Fill out a form, preview your portfolio, and deploy it with a single click!

✨ Features

📝 Easy Form-Based Creation: Input your details, projects, and skills through an intuitive form interface 🎨 Multiple Templates: Choose from various professionally designed portfolio templates 👁️ Live Preview: See your changes in real-time as you build 🌓 Theme Customization: Light/dark mode and multiple color schemes 📱 Responsive Design: Looks great on all devices 🚀 One-Click Deployment: Deploy directly to GitHub Pages 💾 Local Storage: Save your progress and come back later 📦 Export Option: Download your portfolio as a static site 🔍 SEO Optimized: Built-in meta tags and social sharing support 🔄 Auto-Save: Never lose your progress 🎯 Custom Domain: Support for custom domain configuration 📊 Analytics: Basic visitor tracking integration 🔗 Social Links: Easy integration of social media profiles 📸 Image Optimization: Automatic image compression and optimization

🛠️ Tech Stack

• Frontend: React + Tailwind CSS
• Templating: Astro/Handlebars for static site generation
• Storage: LocalStorage (MVP) → Firebase/Supabase (Future)
• Build Tools: Vite
• Package Manager: pnpm
• Deployment: GitHub Pages/Vercel
• Testing: Jest + React Testing Library
• CI/CD: GitHub Actions
• Package Manager: npm/yarn
• Version Control: Git
• Code Quality: ESLint + Prettier

🗺️ 30-Day Development Roadmap

Week 1: Foundation

• Day 1: Project setup and documentation
• Day 2: Design wireframes and UI planning
• Day 3: React app structure and Tailwind setup
• Day 4: Homepage and navigation
• Day 5: Form implementation
• Day 6: Project input section
• Day 7: Preview functionality

Week 2: Core Features

• Day 8-9: Portfolio templates
• Day 10: Template rendering
• Day 11: Theme customization
• Day 12: Export functionality
• Day 13: GitHub Pages integration
• Day 14: Local storage implementation

Week 3: Polish & Testing

• Day 15: UI/UX improvements
• Day 16: SEO and metadata
• Day 17: Documentation
• Day 18: Error handling
• Day 19: Code refactoring
• Day 20: Mobile responsiveness
• Day 21: Unit testing

Week 4: Launch Prep

• Day 22: CI/CD setup
• Day 23: Documentation updates
• Day 24: Community features
• Day 25: Social sharing
• Day 26: CLI tool
• Day 27: Blog post
• Day 28: Final QA
• Day 29: Launch preparation
• Day 30: Launch and celebration! 🎉

🚀 Getting Started

Clone the repository:

git clone https://github.com/MykeShale/portfolio-builder.git

Install dependencies:

cd portfolio-builder
pnpm install
npm install

Start the development server:

pnpm dev
npm run dev

Open http://localhost:5173 in your browser

📦 Project Structure

code-folio/
├── public/              # Static assets
├── src/
│   ├── components/      # Reusable React components
│   ├── templates/       # Portfolio templates
│   ├── utils/          # Helper functions
│   ├── data/           # Mock data and constants
│   └── App.jsx         # Main application component
├── cli/                # CLI tool for portfolio generation
├── template-engine/    # Template rendering engine
│   ├── theme1/         # Theme 1 templates
│   └── theme2/         # Theme 2 templates
├── tests/              # Test files
├── docs/               # Documentation
├── README.md
└── package.json

🛠️ Development

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• pnpm
• Git

Available Scripts

pnpm dev          # Start development server
pnpm build        # Build for production
pnpm preview      # Preview production build
pnpm test         # Run tests
pnpm lint         # Run linter
pnpm format       # Format code with Prettier

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run test         # Run tests
npm run lint         # Run linter
npm run format       # Format code with Prettier

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Code Style

• Follow the existing code style
• Use meaningful variable and function names
• Add comments for complex logic
• Write tests for new features

📝 License

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

🙏 Acknowledgments

• Inspired by the need for quick, professional portfolio creation
• Built as part of a 30-day coding challenge
• Thanks to all contributors and supporters!
• Special thanks to the open-source community for their amazing tools and libraries

📞 Support

• Create an issue for bug reports or feature requests
• Follow us on Instagram && Twitter for updates

Made with ❤️ by Mike Ayoti