Arthur Danjou | Portfolio 2024

My professional portfolio built with modern Nuxt.js technologies, showcasing projects, skills, and experience.

🌐 Live Demo | 🐛 Report Bug

📋 Table of Contents

• Features
• Tech Stack
• Prerequisites
• Getting Started
• Development
• Environment Variables
• Project Structure
• Integrations
• Deployment
• Contributing
• License
• Contact

✨ Features

• Responsive Design - Fully responsive layout that works on all devices
• i18n Support - Multilanguage content with Nuxt i18n
• Content Management - Easy content editing with Nuxt Content and Nuxt Studio
• Modern Styling - Beautiful UI built with Tailwind CSS and SASS
• Performance Optimized - Fast loading times and SEO optimized
• Analytics - WakaTime integration to track coding statistics
• Discord Integration - Real-time Discord status display
• CI/CD - Automated deployment with NuxtHub

⚒️ Tech Stack

• UI Framework → Vue.js 3
• Framework → Nuxt 3
• Content Management → Nuxt Content
• Design System → NuxtUI
• CMS & Editing → Nuxt Studio
• Language → TypeScript
• Deployment → NuxtHub on Cloudflare
• Styling → Sass & Tailwind CSS
• Package Manager → Bun
• Internationalization → Nuxt i18n
• Database → Cloudflare D1 (SQLite)
• Database ORM → Drizzle
• Composables → VueUse
• Validation → Zod
• Globe Visualization → Cobe
• Icons → Iconify

📦 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher recommended)
• Bun (latest version) - Install Bun
• Git for version control
• Cloudflare Account (for deployment)

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/ArthurDanjou/artsite.git
   cd artsite
   

2. Install dependencies

   bun install
   

3. Set up environment variables

   cp .env.example .env
   

   Then edit .env and fill in your configuration values (see Environment Variables section).

4. Start the development server

   bun run dev
   

   The application will be available at http://localhost:3000 🎉

💻 Development

Available Scripts

# 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:

# GitHub Studio Integration (for content management)
STUDIO_GITHUB_CLIENT_ID=your_github_client_id
STUDIO_GITHUB_CLIENT_SECRET=your_github_client_secret  # Keep this secret! Never commit to version control

# Discord Integration (runtime config - keep private)
NUXT_DISCORD_USER_ID=your_discord_user_id  # Private

# WakaTime Integration (for coding statistics - keep private)
NUXT_WAKATIME_USER_ID=your_wakatime_user_id  # Private
NUXT_WAKATIME_CODING=your_coding_stats_api  # Private
NUXT_WAKATIME_EDITORS=your_editors_stats_api  # Private
NUXT_WAKATIME_LANGUAGES=your_languages_stats_api  # Private
NUXT_WAKATIME_OS=your_os_stats_api  # Private

# 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.

Security: Never commit your .env file or expose sensitive credentials like STUDIO_GITHUB_CLIENT_SECRET. Keep all API keys and secrets secure.

📂 Project Structure

artsite/
├── app/                     # Application source code
│   ├── assets/              # Static assets (CSS, images)
│   ├── components/          # Vue components
│   │   ├── content/         # Content-specific components
│   │   └── home/            # Home page components
│   ├── composables/         # Vue composables
│   ├── 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
├── 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

• WakaTime - Track coding time and statistics
• Discord - Display real-time Discord status
• Nuxt Studio - Headless CMS for content management
• Nuxt i18n - Internationalization support
• 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

   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

   git checkout -b feature/amazing-feature
   

3. Make your changes
4. Commit your changes

   git commit -m 'Add some amazing feature'
   

5. Push to the branch

   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

MIT © Arthur Danjou

📬 Contact

• Website: arthurdanjou.fr
• GitHub: @ArthurDanjou
• LinkedIn: Arthur Danjou