Artifex - Website Builder 🌐

Transform your ideas into beautiful web pages instantly with AI

✨ Features

• 🤖 AI-Powered Code Generation - Describe your vision and watch AI create HTML, CSS, and JavaScript
• 🎨 Modern UI/UX - Claude/Cursor-inspired design with smooth animations
• 🌗 Dark/Light Theme - Beautiful themes that adapt to your preference
• ⚡ Live Preview - Instant preview of generated code in an isolated iframe
• 📝 Syntax Highlighting - Clean code display with copy-to-clipboard functionality
• 🕐 Dynamic Greetings - Time-aware welcome messages based on your timezone
• 📱 Responsive Design - Works seamlessly across desktop, tablet, and mobile
• 🔙 Browser Navigation - Full support for browser back/forward buttons
• 🚀 Fast & Lightweight - Built with Vite for optimal performance

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Google Gemini API Key

Installation

1. Clone the repository

   git clone https://github.com/LikhithSP/artifex.git
   cd artifex

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   GEMINI_API_KEY=your_gemini_api_key_here

   Get your API key from Google AI Studio

4. Start the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:5173

🛠️ Built With

• React - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Google Gemini API - AI code generation
• Lucide Icons - Beautiful icon set

📁 Project Structure

artifex/
├── components/          # React components
│   ├── CodeDisplay.tsx  # Code editor style
│   ├── Header.tsx       # Navigation header with theme toggle
│   ├── Preview.tsx      # Live preview iframe
│   ├── PromptInput.tsx  # User input component
│   ├── WelcomeScreen.tsx # Landing page with examples
│   └── LoadingIndicator.tsx
├── contexts/
│   └── ThemeContext.tsx # Theme management
├── services/
│   └── geminiService.ts # AI API integration
├── public/
│   └── favicon.svg      # App icon
├── App.tsx              # Main application
├── index.html           # HTML entry point
├── types.ts             # TypeScript types
└── vite.config.ts       # Vite configuration

🎨 Theme

Artifex features a modern, professionally designed interface inspired by Claude and Cursor:

• Light Mode: Clean white backgrounds with purple accents
• Dark Mode: Deep dark backgrounds (#1C1C1C) with vibrant purple highlights
• Accent Color: Violet gradient (#8B5CF6 to #9333EA)

💡 Usage

1. Enter a prompt describing the web page you want to create

   • Example: "A modern portfolio website with smooth animations"

2. Click Generate or press Enter

3. View your code in three tabs (HTML, CSS, JavaScript)

4. Preview live in the built-in browser

5. Copy code with one click using the copy button

6. Start a new project using the "New Project" button or "Back" button

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a 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

📝 License

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

🙏 Acknowledgments

• Icons by Lucide
• AI powered by Google Gemini