AI Portfolio Template

A modern, full-stack portfolio website template for AI Engineers, featuring an interactive chatbot, stunning animations, and a comprehensive showcase of skills, projects, and experience.

🚀 Features

• Modern UI/UX: Beautiful, responsive design with dark mode support
• AI Chatbot: Built-in portfolio assistant powered by AI
• Interactive Animations: Smooth Framer Motion animations throughout
• Project Showcase: Filter and search through your projects
• Skills Display: Interactive skill cards with tooltips
• Experience Timeline: Parallax timeline for work history
• Contact Form: Functional contact form with email integration
• SEO Optimized: Meta tags, sitemap, and LLM-friendly files

📁 Project Structure

Portfolio-Outsource/
├── backend/                 # FastAPI backend
│   ├── agents/             # AI agent logic
│   ├── configurations/     # Config and database
│   ├── data/              # Data files (customize data.txt)
│   ├── models/            # Data models
│   ├── routes/            # API routes
│   ├── utils/             # Utilities
│   └── main.py            # Entry point
│
├── frontend/               # Next.js frontend
│   ├── app/               # Next.js app router pages
│   ├── components/        # React components
│   ├── public/            # Static assets
│   └── ...

🛠️ Setup Instructions

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Create a virtual environment:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies:

   pip install -r requirements.txt
   # Or using uv:
   uv sync

4. Copy .env.example to .env and fill in your values:

   cp .env.example .env

5. Customize data/data.txt with your personal information

6. Run the backend:

   uvicorn main:app --reload

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install
   # Or using pnpm:
   pnpm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000

✏️ Customization

Personal Information

Update the following files with your information:

1. Backend: backend/data/data.txt - Your bio, skills, experience, etc.

2. Frontend:

   • app/page.tsx - Main page content
   • app/portfolio/page.tsx - Portfolio page
   • app/ai-solutions/page.tsx - Services page
   • app/layout.tsx - SEO metadata
   • app/sitemap.ts - Sitemap URLs
   • public/llm.txt & public/llms.txt - LLM-friendly content

3. Images: Add your images to frontend/public/images/

   • Profile photo
   • Project screenshots
   • Certificates (in certificates/ folder)

4. Social Links: Update all social media URLs throughout the pages

Styling

• Global styles: frontend/app/globals.css
• Tailwind config: frontend/tailwind.config.ts
• Component styles: Individual component files

🔧 Environment Variables

Backend (.env)

OPENAI_API_KEY=your_key
GOOGLE_API_KEY=your_key
MONGODB_URI=your_mongodb_uri
HOST=0.0.0.0
PORT=8000
JWT_SECRET_KEY=your_secret
JWT_ALGORITHM=HS256
SOURCE_FILENAME=data.txt
GMAIL_SENDER_EMAIL=your_email
GMAIL_APP_PASSWORD=your_app_password

📦 Deployment

Frontend (Vercel)

1. Push to GitHub
2. Import project on Vercel
3. Deploy automatically

Backend (Various options)

• Hugging Face Spaces: Docker deployment
• Railway/Render: Automatic deployments
• AWS/GCP/Azure: Container or VM deployments

🤝 Contributing

Feel free to fork this repository and customize it for your own portfolio!

📄 License

MIT License - feel free to use this template for your own portfolio.