Small R Portfolio

A modern, responsive portfolio website built with Next.js 15 and Tailwind CSS, featuring smooth animations and a polished UI/UX design

Live Demo

繁體中文 | English

✨ Features

🌐 Internationalization

• Built-in English and Traditional Chinese support
• URL-based language switching
• Automatic language detection
• Complete translation system
• Language-aware navigation

🎨 Modern Design

• Fully responsive layout
• Dark/Light theme support
• Smooth animations with Framer Motion
• Clean and intuitive UI
• Interactive project cards with zoom preview
• Custom 404 page
• Polished image modals with backdrop blur

⚡ Performance

• Built with Next.js 15 App Router
• Static Site Generation (SSG)
• Automatic image optimization
• Route prefetching
• Client-side navigation
• Optimized image loading

🔍 SEO Optimization

• Meta tags optimization
• Sitemap generation
• Robots.txt configuration
• Structured data
• Multi-language SEO

🛠️ Tech Stack

• Framework: Next.js 15
• Styling: Tailwind CSS
• Animation: Framer Motion
• Icons: Lucide Icons
• Deployment: Vercel
• Forms: Formspree

📦 Project Structure

├── app/                # Next.js app directory
│   ├── [locale]/      # Locale-specific routes
│   │   ├── cv/        # CV page
│   │   ├── layout.tsx # Language layout
│   │   └── page.tsx   # Home page
│   └── layout.tsx     # Root layout
├── components/        # React components
│   ├── sections/     # Page section components
│   └── ui/           # UI components
├── config/           # Configuration files
├── constants/        # Constants and translations
│   └── sections/     # Page section constants
├── hooks/           # Custom React hooks
├── lib/            # Utility functions
├── public/         # Static assets
└── types/          # TypeScript type definitions

🚀 Getting Started

1. Clone the repository

git clone https://github.com/Ynoob87/smallr-portfolio-2024

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open http://localhost:3000

📝 Environment Variables

Create a .env file in the root directory:

NEXT_PUBLIC_FORMSPREE_ID=your_formspree_form_id

👤 Author

• Email: hhgg12661@gmail.com
• GitHub: https://github.com/Ynoob87
• LinkedIn: https://www.linkedin.com/in/alaner652/

📄 License

This project is licensed under the MIT License - see the LICENSE file for details

💖 Support

If you find this project helpful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs or suggesting features
• 🔀 Submitting pull requests
• 📢 Sharing with others