mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-02-02 23:31:31 +01:00
docs: significantly improve README with comprehensive documentation
Co-authored-by: ArthurDanjou <29738535+ArthurDanjou@users.noreply.github.com>
This commit is contained in:
217
README.md
217
README.md
@@ -8,6 +8,9 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro
|
|||||||
[](https://vuejs.org/)
|
[](https://vuejs.org/)
|
||||||
[](https://www.typescriptlang.org/)
|
[](https://www.typescriptlang.org/)
|
||||||
[](https://tailwindcss.com/)
|
[](https://tailwindcss.com/)
|
||||||
|
[](https://cloudflare.com/)
|
||||||
|
|
||||||
|
[🌐 Live Demo](https://arthurdanjou.fr/) | [📖 Documentation](https://nuxt.com/) | [🐛 Report Bug](https://github.com/ArthurDanjou/artsite/issues)
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -15,8 +18,14 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro
|
|||||||
|
|
||||||
- [Features](#-features)
|
- [Features](#-features)
|
||||||
- [Tech Stack](#️-tech-stack)
|
- [Tech Stack](#️-tech-stack)
|
||||||
|
- [Prerequisites](#-prerequisites)
|
||||||
|
- [Getting Started](#-getting-started)
|
||||||
|
- [Development](#-development)
|
||||||
|
- [Environment Variables](#-environment-variables)
|
||||||
- [Project Structure](#-project-structure)
|
- [Project Structure](#-project-structure)
|
||||||
- [Integrations](#-integrations)
|
- [Integrations](#-integrations)
|
||||||
|
- [Deployment](#-deployment)
|
||||||
|
- [Contributing](#-contributing)
|
||||||
- [License](#-license)
|
- [License](#-license)
|
||||||
- [Contact](#-contact)
|
- [Contact](#-contact)
|
||||||
|
|
||||||
@@ -39,29 +48,156 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro
|
|||||||
- **Design System** → [NuxtUI](https://ui.nuxt.com/)
|
- **Design System** → [NuxtUI](https://ui.nuxt.com/)
|
||||||
- **CMS & Editing** → [Nuxt Studio](https://nuxt.studio)
|
- **CMS & Editing** → [Nuxt Studio](https://nuxt.studio)
|
||||||
- **Language** → [TypeScript](https://www.typescriptlang.org/)
|
- **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/)
|
- **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/)
|
- **Internationalization** → [Nuxt i18n](https://i18n.nuxtjs.org/)
|
||||||
|
- **Database** → [Cloudflare D1](https://developers.cloudflare.com/d1/) (SQLite)
|
||||||
- **Database ORM** → [Drizzle](https://orm.drizzle.team/)
|
- **Database ORM** → [Drizzle](https://orm.drizzle.team/)
|
||||||
- **Composables** → [VueUse](https://vueuse.org/)
|
- **Composables** → [VueUse](https://vueuse.org/)
|
||||||
- **Validation** → [Zod](https://zod.dev/)
|
- **Validation** → [Zod](https://zod.dev/)
|
||||||
- **Globe Visualization** → [Cobe](https://github.com/shuding/cobe)
|
- **Globe Visualization** → [Cobe](https://github.com/shuding/cobe)
|
||||||
- **Icons** → [Iconify](https://iconify.design/)
|
- **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
|
## 📂 Project Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
├── assets/ # Static assets like global styles
|
artsite/
|
||||||
├── components/ # Vue components
|
├── app/ # Application source code
|
||||||
├── layouts/ # Page layouts
|
│ ├── assets/ # Static assets (CSS, images)
|
||||||
├── pages/ # Application pages
|
│ ├── components/ # Vue components
|
||||||
├── public/ # Public static files
|
│ │ ├── content/ # Content-specific components
|
||||||
├── server/ # Server API routes
|
│ │ └── home/ # Home page components
|
||||||
├── .env.example # Example environment variables
|
│ ├── composables/ # Vue composables
|
||||||
├── nuxt.config.ts # Nuxt configuration
|
│ ├── layouts/ # Page layouts
|
||||||
├── package.json # Dependencies and scripts
|
│ ├── pages/ # Application pages (file-based routing)
|
||||||
└── README.md # Project documentation
|
│ │ ├── 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
|
## 🔌 Integrations
|
||||||
@@ -70,7 +206,62 @@ My professional portfolio built with modern Nuxt.js technologies, showcasing pro
|
|||||||
- **Discord** - Display real-time Discord status
|
- **Discord** - Display real-time Discord status
|
||||||
- **Nuxt Studio** - Headless CMS for content management
|
- **Nuxt Studio** - Headless CMS for content management
|
||||||
- **Nuxt i18n** - Internationalization support
|
- **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
|
## 📄 License
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user