Arthur Danjou | Portfolio 2024

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

🌐 Live Demo | 🐛 Report Bug

</div>

📋 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)
Composables → VueUse
Validation → Zod
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

Clone the repository

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

Install dependencies
```
bun install
```
Set up environment variables
```
cp .env.example .env
```
Then edit .env and fill in your configuration values (see Environment Variables section).
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.config.ts        # App configuration
│   ├── app.vue              # Root app component
│   └── error.vue            # Error page
├── content/                 # Content files (Markdown & JSON)
│   ├── education/           # Education content
│   │   ├── bachelor.md      # Bachelor's degree information
│   │   ├── m1.md            # Master's 1st year information
│   │   └── m2.md            # Master's 2nd year information
│   ├── experiences/         # Professional experience content
│   │   ├── artdanjproduction.md
│   │   ├── erisium.md
│   │   ├── hackathon-cnd.md
│   │   ├── picard.md
│   │   └── sevetys.md
│   ├── projects/            # Project portfolio content
│   │   ├── artchat.md
│   │   ├── arthome.md
│   │   ├── artlab.md
│   │   ├── artstudies.md
│   │   ├── bikes-glm.md
│   │   ├── breast-cancer.md
│   │   ├── dropout-reduces-underfitting.md
│   │   ├── loan-ml.md
│   │   ├── monte-carlo-project.md
│   │   ├── schelling-segregation-model.md
│   │   └── sevetys.md
│   ├── contact.json         # Contact information data
│   ├── hobbies.md           # Hobbies page content
│   ├── index.md             # Home page content
│   ├── languages.json       # Programming languages data
│   ├── skills.json          # Skills and expertise data
│   └── uses.md              # Tools and software used
├── public/                  # Public static files
├── server/                  # Server API routes and middleware
│   ├── api/                 # API endpoints
│   └── routes/              # Server routes
├── types/                   # TypeScript type definitions
├── .env.example             # Example environment variables
├── 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

Prerequisites
- Cloudflare account
- Wrangler CLI configured (wrangler login)
- NuxtHub project created
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:

Fork the repository

Create a feature branch

git checkout -b feature/amazing-feature

Make your changes

Commit your changes

git commit -m 'Add some amazing feature'

Push to the branch

git push origin feature/amazing-feature

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

📬 Contact

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

Artsite

Install / Use

README