mirror of
https://github.com/mmahdium/portfolio.git
synced 2025-12-20 09:23:54 +01:00
Improved README.md
This commit is contained in:
186
README.md
186
README.md
@@ -1,184 +1,4 @@
|
||||
[](https://aliarghyani.vercel.app)
|
||||
# Nuxt UI Portfolio · mahdium.ir
|
||||
|
||||
# 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
|
||||
|
||||
## <20> 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_SITE_URL` - Site URL for sitemap and RSS (default: https://mahdium.ir)
|
||||
|
||||
## 🧪 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**
|
||||
This is my personal portfolio for [mahdium.ir](https://mahdium.ir), built with Nuxt 4, Nuxt UI, Tailwind CSS, and TypeScript.
|
||||
The original project and repository are by [Ali Arghyani](https://github.com/aliarghyani/nuxt-portfolio).
|
||||
|
||||
Reference in New Issue
Block a user