diff --git a/README.md b/README.md new file mode 100644 index 0000000000000000000000000000000000000000..3e2f4a9e5e8056444e4de9b2ef9c535263b344f1 --- /dev/null +++ b/README.md @@ -0,0 +1,71 @@ + + +# Code Frame Generator + +A web-based tool for generating beautifully framed code snippets with customizable themes, backgrounds, and export options. + +![Screenshot](.github/screenshot.png) + +## Features + +- Live code editing with Markdown and HTML preview +- Customizable color themes and window styles +- Social media icon integration +- Export to PNG with high quality +- Preset management for quick reuse +- Particle background effects + +## Technologies Used + +- Vue 3 with Nuxt 3 +- Tailwind CSS +- Shiki - for syntax highlighting +- Drizzle ORM for data handling +- TypeScript for type safety + +## Installation & Setup + +```bash +# Clone the repository +git clone +cd + +# Install dependencies +pnpm install + +# Start development server +pnpm dev + +# Build for production +pnpm build +``` + +> Ensure you have [Node.js](https://nodejs.org) and [pnpm](https://pnpm.io) installed before proceeding. + +## Usage + +1. Open the app in your browser +2. Paste or write your code in the editor +3. Choose a theme, background, and customize window settings +4. Adjust text and color settings as desired +5. Click "Export to PNG" to download your framed code image + +## Contributing + +Contributions are welcome! To contribute: + +1. Fork the repository +2. Create a new branch (`git checkout -b feature/new-feature`) +3. Commit your changes (`git commit -m 'Add new feature'`) +4. Push to the branch (`git push origin feature/new-feature`) +5. Open a Pull Request + +## License + +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. + +## Credits + +- Icons powered by [Iconify](https://icon-sets.iconify.design/) +- Font: Geist Mono & JetBrains Mono +- Powered by Vercel & Nuxt 3 \ No newline at end of file