From cd69b346fe3db9293e338f36bb49e5f03821e7b9 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 23 Dec 2025 23:13:42 +0000 Subject: [PATCH] docs: significantly improve README with comprehensive documentation Co-authored-by: ArthurDanjou <29738535+ArthurDanjou@users.noreply.github.com> --- README.md | 217 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 204 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 8ae0ff5..360ff6e 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,9 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro [![Vue.js](https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white)](https://vuejs.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/) +[![Cloudflare](https://img.shields.io/badge/Cloudflare-F38020?style=for-the-badge&logo=cloudflare&logoColor=white)](https://cloudflare.com/) + +[🌐 Live Demo](https://arthurdanjou.fr/) | [📖 Documentation](https://nuxt.com/) | [🐛 Report Bug](https://github.com/ArthurDanjou/artsite/issues) @@ -15,8 +18,14 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro - [Features](#-features) - [Tech Stack](#️-tech-stack) +- [Prerequisites](#-prerequisites) +- [Getting Started](#-getting-started) +- [Development](#-development) +- [Environment Variables](#-environment-variables) - [Project Structure](#-project-structure) - [Integrations](#-integrations) +- [Deployment](#-deployment) +- [Contributing](#-contributing) - [License](#-license) - [Contact](#-contact) @@ -39,29 +48,156 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro - **Design System** → [NuxtUI](https://ui.nuxt.com/) - **CMS & Editing** → [Nuxt Studio](https://nuxt.studio) - **Language** → [TypeScript](https://www.typescriptlang.org/) -- **Deployment** → [NuxtHub](https://hub.nuxt.com/) +- **Deployment** → [NuxtHub](https://hub.nuxt.com/) on [Cloudflare](https://cloudflare.com/) - **Styling** → [Sass](https://sass-lang.com/) & [Tailwind CSS](https://tailwindcss.com/) -- **Package Manager** → [pnpm](https://pnpm.io/) +- **Package Manager** → [Bun](https://bun.sh/) - **Internationalization** → [Nuxt i18n](https://i18n.nuxtjs.org/) +- **Database** → [Cloudflare D1](https://developers.cloudflare.com/d1/) (SQLite) - **Database ORM** → [Drizzle](https://orm.drizzle.team/) - **Composables** → [VueUse](https://vueuse.org/) - **Validation** → [Zod](https://zod.dev/) - **Globe Visualization** → [Cobe](https://github.com/shuding/cobe) - **Icons** → [Iconify](https://iconify.design/) +## 📦 Prerequisites + +Before you begin, ensure you have the following installed: + +- **Node.js** (v18 or higher recommended) +- **Bun** (latest version) - [Install Bun](https://bun.sh/docs/installation) +- **Git** for version control +- **Cloudflare Account** (for deployment) + +## 🚀 Getting Started + +1. **Clone the repository** + + ```bash + git clone https://github.com/ArthurDanjou/artsite.git + cd artsite + ``` + +2. **Install dependencies** + + ```bash + bun install + ``` + +3. **Set up environment variables** + + ```bash + cp .env.example .env + ``` + + Then edit `.env` and fill in your configuration values (see [Environment Variables](#-environment-variables) section). + +4. **Start the development server** + + ```bash + bun run dev + ``` + + The application will be available at `http://localhost:3000` 🎉 + +## 💻 Development + +### Available Scripts + +```bash +# Start development server +bun run dev + +# Build for production +bun run build + +# Preview production build locally +bun run preview + +# Lint code +bun run lint + +# Deploy to Cloudflare +bun run deploy + +# Generate Cloudflare types +bun run cf-typegen +``` + +### Project Configuration + +The project uses: +- **ESLint** for code linting with stylistic rules (single quotes, no trailing commas) +- **TypeScript** for type safety +- **Nuxt DevTools** enabled for enhanced development experience + +## 🔐 Environment Variables + +Create a `.env` file in the root directory with the following variables: + +```env +# Base URL for internationalization +NUXT_PUBLIC_I18N_BASE_URL=https://arthurdanjou.fr + +# API URL (if applicable) +NUXT_API_URL= + +# GitHub Studio Integration (for content management) +STUDIO_GITHUB_CLIENT_ID=your_github_client_id +STUDIO_GITHUB_CLIENT_SECRET=your_github_client_secret + +# Discord Integration (runtime config) +NUXT_DISCORD_USER_ID=your_discord_user_id +NUXT_DISCORD_ID=your_discord_app_id + +# WakaTime Integration (for coding statistics) +NUXT_WAKATIME_USER_ID=your_wakatime_user_id +NUXT_WAKATIME_CODING=your_coding_stats_api +NUXT_WAKATIME_EDITORS=your_editors_stats_api +NUXT_WAKATIME_LANGUAGES=your_languages_stats_api +NUXT_WAKATIME_OS=your_os_stats_api + +# Status Page URL +NUXT_STATUS_PAGE=your_status_page_url +``` + +> **Note:** Not all variables are required for basic development. The site will work without integrations, but some features may be disabled. + ## 📂 Project Structure ``` -├── assets/ # Static assets like global styles -├── components/ # Vue components -├── layouts/ # Page layouts -├── pages/ # Application pages -├── public/ # Public static files -├── server/ # Server API routes -├── .env.example # Example environment variables -├── nuxt.config.ts # Nuxt configuration -├── package.json # Dependencies and scripts -└── README.md # Project documentation +artsite/ +├── app/ # Application source code +│ ├── assets/ # Static assets (CSS, images) +│ ├── components/ # Vue components +│ │ ├── content/ # Content-specific components +│ │ └── home/ # Home page components +│ ├── composables/ # Vue composables +│ ├── layouts/ # Page layouts +│ ├── pages/ # Application pages (file-based routing) +│ │ ├── index.vue # Home page +│ │ ├── projects/ # Projects section +│ │ ├── hobbies.vue # Hobbies page +│ │ ├── uses.vue # Uses page +│ │ └── ecosystem.vue # Ecosystem page +│ ├── app.vue # Root app component +│ └── error.vue # Error page +├── content/ # Content files (Markdown) +│ ├── education/ # Education content +│ ├── experiences/ # Experience content +│ └── projects/ # Project content +├── public/ # Public static files +├── server/ # Server API routes and middleware +│ ├── api/ # API endpoints +│ └── database/ # Database schemas and migrations +├── types/ # TypeScript type definitions +├── .env.example # Example environment variables +├── app.config.ts # App configuration +├── content.config.ts # Content module configuration +├── nuxt.config.ts # Nuxt configuration +├── package.json # Dependencies and scripts +├── tsconfig.json # TypeScript configuration +├── wrangler.jsonc # Cloudflare Workers configuration +└── README.md # Project documentation ``` ## 🔌 Integrations @@ -70,7 +206,62 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro - **Discord** - Display real-time Discord status - **Nuxt Studio** - Headless CMS for content management - **Nuxt i18n** - Internationalization support -- **NuxtHub** - CI/CD and deployment +- **NuxtHub** - CI/CD and deployment platform +- **Cloudflare D1** - Serverless SQL database + +## 🚢 Deployment + +This project is configured to deploy on Cloudflare using NuxtHub. + +### Deploy to Production + +1. **Prerequisites** + - Cloudflare account + - Wrangler CLI configured (`wrangler login`) + - NuxtHub project created + +2. **Deploy** + + ```bash + bun run deploy + ``` + + This will: + - Generate Cloudflare types + - Build the application + - Deploy to Cloudflare Workers + +### Automatic Deployments + +The project is set up with NuxtHub for automatic deployments on push to the main branch. + +## 🤝 Contributing + +Contributions are welcome! Here's how you can help: + +1. **Fork the repository** +2. **Create a feature branch** + ```bash + git checkout -b feature/amazing-feature + ``` +3. **Make your changes** +4. **Commit your changes** + ```bash + git commit -m 'Add some amazing feature' + ``` +5. **Push to the branch** + ```bash + git push origin feature/amazing-feature + ``` +6. **Open a Pull Request** + +### Development Guidelines + +- Follow the existing code style (enforced by ESLint) +- Use TypeScript for type safety +- Write descriptive commit messages +- Test your changes locally before submitting +- Update documentation if needed ## 📄 License