mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-08-14 12:12:48 +03:30
186 lines
5.4 KiB
Markdown
186 lines
5.4 KiB
Markdown
[](https://aliarghyani.vercel.app)
|
|
|
|
# Nuxt UI Portfolio · Ali Arghyani
|
|
|
|
A modern, bilingual portfolio built with Nuxt 4, Nuxt UI, Tailwind CSS 4, and TypeScript. Features English and Persian (RTL) support with dark mode as default.
|
|
|
|
🔗 **Live Demo**: [aliarghyani.vercel.app](https://aliarghyani.vercel.app)
|
|
|
|
## ✨ Features
|
|
|
|
- **Nuxt 4** - Latest framework with `app/` directory structure
|
|
- **Nuxt UI 4** - Modern component library with custom theming
|
|
- **Tailwind CSS 4** - Utility-first styling with custom variants
|
|
- **TypeScript** - Full type safety
|
|
- **i18n** - English & Persian with automatic RTL switching
|
|
- **Dark Mode** - Default theme with light mode option
|
|
- **Responsive Images** - Optimized with `@nuxt/image`
|
|
- **Performance** - Lazy loading, font preloading, reduced motion support
|
|
|
|
## � Quick Start
|
|
|
|
```bash
|
|
# Install dependencies
|
|
pnpm install
|
|
|
|
# Start development server
|
|
pnpm dev
|
|
```
|
|
|
|
Visit: http://localhost:3000
|
|
|
|
### Requirements
|
|
- Node.js 18.20.0 or newer (up to 22.x)
|
|
- pnpm (recommended) or npm
|
|
|
|
### Available Scripts
|
|
|
|
```bash
|
|
pnpm dev # Start dev server
|
|
pnpm build # Build for production
|
|
pnpm preview # Preview production build
|
|
pnpm generate # Generate static site
|
|
pnpm typecheck # Run TypeScript checks
|
|
pnpm format # Check code formatting
|
|
pnpm format:write # Fix code formatting
|
|
```
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
app/ # Source directory (srcDir)
|
|
├── app.vue # Root component
|
|
├── app.config.ts # Nuxt UI theme tokens
|
|
├── error.vue # Error page (404, 500)
|
|
├── assets/css/ # Tailwind & global styles
|
|
├── components/ # Auto-imported components
|
|
│ ├── common/ # Shared UI (TopNav, Footer)
|
|
│ └── portfolio/ # Portfolio components
|
|
├── composables/ # Auto-imported composables
|
|
├── data/ # Static content (EN/FA)
|
|
├── layouts/ # Layout components
|
|
├── middleware/ # Route middleware
|
|
├── pages/ # File-based routing
|
|
├── plugins/ # Nuxt plugins
|
|
├── types/ # TypeScript definitions
|
|
└── utils/ # Helper functions
|
|
|
|
server/ # Server-side code
|
|
└── api/ # API endpoints
|
|
└── health.get.ts # Health check (/api/health)
|
|
|
|
public/ # Static assets
|
|
├── favicon/ # Favicon files
|
|
├── fonts/ # Local fonts (Roobert, Vazirmatn)
|
|
└── img/ # Images
|
|
|
|
i18n/ # Internationalization
|
|
└── locales/ # Translation files (en.json, fa.json)
|
|
```
|
|
|
|
## 🌐 Internationalization
|
|
|
|
- **Strategy**: `prefix_except_default` (English is default, Persian uses `/fa` prefix)
|
|
- **Locales**: English (`en`) and Persian (`fa`) with RTL support
|
|
- **Content**: Separate data files for each language in `app/data/`
|
|
- **Switching**: Automatic `lang` and `dir` attributes update on locale change
|
|
|
|
## 🎨 Styling & Theming
|
|
|
|
- **Tailwind CSS 4** with custom utilities and variants
|
|
- **Nuxt UI tokens** in `app.config.ts` for consistent theming
|
|
- **Dark mode** as default with `@nuxtjs/color-mode`
|
|
- **Local fonts**: Roobert (EN) and Vazirmatn (FA) preloaded for performance
|
|
- **Custom chip utility** for tags and badges
|
|
|
|
## 🚀 Deployment
|
|
|
|
### Static Site Generation (SSG)
|
|
|
|
This project is configured for full Static Site Generation with automatic blog post pre-rendering:
|
|
|
|
```bash
|
|
# Generate static files with pre-rendered blog posts
|
|
pnpm generate
|
|
```
|
|
|
|
The build process will:
|
|
- Pre-render all blog posts (English & Persian)
|
|
- Generate sitemap.xml automatically
|
|
- Create RSS feeds for both languages
|
|
- Output static files to `.output/public`
|
|
|
|
### Vercel (Recommended)
|
|
```bash
|
|
# Install Vercel CLI
|
|
npm i -g vercel
|
|
|
|
# Deploy
|
|
vercel
|
|
```
|
|
|
|
Or connect your GitHub repository to Vercel for automatic deployments.
|
|
|
|
### Other Static Hosting Platforms
|
|
|
|
Compatible with any static hosting service:
|
|
- **Netlify**: Deploy `.output/public` directory
|
|
- **Cloudflare Pages**: Connect GitHub repo or upload `.output/public`
|
|
- **GitHub Pages**: Deploy `.output/public` contents
|
|
- **AWS S3 + CloudFront**: Upload `.output/public` to S3 bucket
|
|
|
|
**Build Command**: `pnpm generate`
|
|
**Output Directory**: `.output/public`
|
|
|
|
### Environment Variables
|
|
- `NUXT_PUBLIC_LOAD_PLAUSIBLE` - Enable/disable Plausible analytics (optional)
|
|
- `NUXT_PUBLIC_SITE_URL` - Site URL for sitemap and RSS (default: https://aliarghyani.vercel.app)
|
|
|
|
## 🧪 Testing the Structure
|
|
|
|
```bash
|
|
# Homepage
|
|
http://localhost:3000
|
|
|
|
# Persian version
|
|
http://localhost:3000/fa
|
|
|
|
# Health check API
|
|
http://localhost:3000/api/health
|
|
|
|
# 404 error page
|
|
http://localhost:3000/non-existent-page
|
|
```
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
- **Framework**: Nuxt 4 (Vue 3 + Vite)
|
|
- **UI Library**: Nuxt UI 4
|
|
- **Styling**: Tailwind CSS 4
|
|
- **Language**: TypeScript
|
|
- **i18n**: @nuxtjs/i18n
|
|
- **Theme**: @nuxtjs/color-mode
|
|
- **Images**: @nuxt/image
|
|
- **Utilities**: VueUse
|
|
|
|
## 📝 Auto-imports
|
|
|
|
Nuxt automatically imports:
|
|
- Components from `app/components/`
|
|
- Composables from `app/composables/`
|
|
- Utils from `app/utils/`
|
|
|
|
No explicit imports needed!
|
|
|
|
## 🤝 Contributing
|
|
|
|
Issues and pull requests are welcome. Please run `pnpm typecheck` and `pnpm format` before submitting changes.
|
|
|
|
## 📄 License
|
|
|
|
MIT License - See [LICENSE](./LICENSE) for details.
|
|
|
|
---
|
|
|
|
**Made with ❤️ by Ali Arghyani**
|