AI Skills - AI Skills Profile Platform

An interactive platform to help users discover the core skills needed in the AI era.

Features

✨ Completed

• Top Navigation Bar: Includes Prompt Studio, Use Case Gallery, and login module
• SVG Animated Background: Cool gradient circles and path animation effects
• Career Selection: 6 common career types (Developer, Designer, Product Manager, Marketing, Data Analyst, Content Creator)
• Career Profile Pages: Display core AI skills and recommended tools for each profession
• Responsive Design: Adapted for mobile and desktop
• Multi-language Support: English (default) and Chinese with language switcher

🚧 To Be Developed

• Prompt Studio functionality
• Use Case Gallery functionality

🔐 Authentication

• Google OAuth Login: Integrated with NextAuth.js for secure authentication
• See QUICK_START.md for setup instructions

📧 Contact Form

• Email Integration: Contact form with nodemailer integration
• Gmail Support: Sends emails through Gmail SMTP
• Form Validation: Client and server-side validation
• See EMAIL_SETUP.md for configuration instructions

Tech Stack

• Framework: Next.js 15+ (App Router)
• Styling: Tailwind CSS 4
• Icons: Lucide React
• Language: TypeScript
• Authentication: NextAuth.js (Auth.js) with Google OAuth
• Email: Nodemailer with Gmail SMTP
• i18n: Custom lightweight internationalization system

Quick Start

# Install dependencies
npm install

# Configure Google OAuth (see QUICK_START.md for details)
# 1. Get credentials from Google Cloud Console
# 2. Fill in .env.local with your credentials

# Configure Email (see EMAIL_SETUP.md for details)
# 1. Set up Gmail app password
# 2. Add EMAIL_USER and EMAIL_PASSWORD to .env.local

# Test email functionality (optional)
node scripts/test-email.js

# Start development server
npm run dev

# Build for production
npm run build

Visit http://localhost:3000 to view the application.

Google Login Setup

For detailed instructions on setting up Google OAuth authentication, see:

• Quick Setup: QUICK_START.md - Get started in 3 steps
• Detailed Guide: GOOGLE_AUTH_SETUP.md - Complete setup documentation
• Usage Examples: USAGE_EXAMPLES.md - Code examples and patterns

Email Setup

For detailed instructions on setting up the contact form email functionality, see:

• Email Configuration: EMAIL_SETUP.md - Complete email setup guide
• Test Script: Run node scripts/test-email.js to verify email configuration

Project Structure

├── app/
│   ├── page.tsx                    # Home page
│   ├── layout.tsx                  # Root layout (with SessionProvider)
│   ├── globals.css                 # Global styles
│   ├── api/
│   │   ├── auth/[...nextauth]/     # NextAuth API routes
│   │   └── contact/                # Contact form API
│   ├── contact/                    # Contact page
│   ├── prompt-studio/              # Prompt Studio
│   ├── use-case-gallery/           # Use Case Gallery
│   └── career-profile/[profession]/ # Career profile dynamic route
├── components/
│   ├── Header.tsx                  # Top navigation bar (with Google login)
│   ├── HeroBanner.tsx              # Home banner (with SVG animation)
│   ├── LanguageSwitcher.tsx        # Language switcher component
│   ├── GoogleSignIn.tsx            # Google OAuth login button
│   ├── SessionProvider.tsx         # NextAuth session provider
│   └── ProtectedRoute.tsx          # Route protection component
├── lib/
│   ├── auth.ts                     # NextAuth configuration
│   ├── utils.ts                    # Utility functions
│   └── i18n/                       # Internationalization
│       ├── context.tsx             # i18n context provider
│       ├── index.ts                # i18n exports
│       └── locales/                # Translation files
│           ├── en.ts               # English translations
│           ├── zh.ts               # Chinese translations
│           └── index.ts            # Locale configuration
├── types/
│   └── next-auth.d.ts              # NextAuth TypeScript definitions
├── .env.local                      # Environment variables (not in git)
├── .env.example                    # Environment variables template
└── public/                         # Static assets

Page Routes

• / - Home page (career selection)
• /contact - Contact form page
• /prompt-studio - Prompt Studio
• /use-case-gallery - Use Case Gallery
• /career-profile/[profession] - Career profile detail page

Supported profession IDs: developer, designer, product, marketing, data, writer

Internationalization

The application supports multiple languages with English as the default. Users can switch languages using the language switcher in the header.

Supported Languages

• English (en) - Default
• 中文 (zh) - Chinese

Adding New Languages

1. Create a new translation file in lib/i18n/locales/[locale].ts
2. Import and add it to lib/i18n/locales/index.ts
3. Add the locale name to localeNames object

The language preference is automatically saved to localStorage.