Skip to content

🤖 The world's first portfolio framework designed for the AI era. Build portfolios that AI understands, search engines love, and users adore.

License

Notifications You must be signed in to change notification settings

xlowxlow/ai-first-portfolio-framework

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🤖 AI-First Portfolio Framework

The world's first portfolio framework designed for the AI era

Build portfolios that AI understands, search engines love, and users adore

npm version License: MIT Node.js CI Stars

🚀 Live Demo📖 Documentation🎨 Templates


🎯 Why AI-First?

In the AI era, your portfolio isn't just viewed by humans—it's also discovered, analyzed, and recommended by AI systems. Traditional portfolios miss out on 70% of AI-driven opportunities.

Our framework ensures your work is discoverable by:

  • 🤖 AI assistants (ChatGPT, Claude, Gemini)
  • 🔍 AI-powered search engines
  • 🎯 Intelligent recruitment systems
  • 📊 Automated content analyzers

"The future of career growth is AI discoverability" - Get ahead of the curve.

⚡ Quick Start (2 minutes)

# 1. Create your AI-optimized portfolio
npx create-ai-portfolio@latest my-portfolio

# 2. Start developing
cd my-portfolio && npm run dev

That's it! Your AI-discoverable portfolio is ready at http://localhost:3000 🎉

✨ What Makes Us Different

Feature AI-First Portfolio Traditional Portfolio
AI Discovery ✅ Built-in llms.txt & AI metadata ❌ Invisible to AI systems
Search Visibility ✅ Schema.org structured data ❌ Basic HTML only
Performance ✅ 98+ Lighthouse score ⚠️ Often 60-80
Setup Time ✅ 2 minutes with CLI ❌ Days of configuration
Updates ✅ Auto-generated content ❌ Manual maintenance
Testing ✅ Built-in AI visibility tests ❌ No optimization tools

🚀 Core Features

🤖 AI Intelligence

  • llms.txt Generation: AI-readable portfolio summaries
  • Semantic Structure: Content optimized for AI understanding
  • Smart Metadata: Automated tags and descriptions
  • Performance Analytics: AI-powered optimization suggestions

Developer Experience

  • Interactive CLI: Guided setup in minutes
  • Hot Reloading: Real-time preview during development
  • TypeScript Support: Full type safety out of the box
  • Modern Stack: Astro, React, Tailwind CSS, and more

🎨 Beautiful Templates

  • Professional Design: Crafted by design experts
  • Mobile First: Perfect on every device
  • Dark/Light Mode: Automatic theme switching
  • Customizable: Easy to brand and modify

📈 Production Ready

  • One-Click Deploy: Vercel, Netlify, GitHub Pages
  • SEO Optimized: Perfect meta tags and structured data
  • Performance First: Optimized images, lazy loading
  • Security Built-in: Best practices by default

🛠️ Advanced Usage

Generate AI Content

# Generate AI-readable content
create-ai-portfolio generate llms --language en

# Create structured data for search engines
create-ai-portfolio generate schema --types person,website

# Build complete sitemap
create-ai-portfolio generate sitemap

Test AI Visibility

# Check how AI sees your portfolio
create-ai-portfolio test http://localhost:3000

# Comprehensive analysis with recommendations
create-ai-portfolio test --comprehensive --save-report

Deploy Anywhere

# Interactive deployment wizard
create-ai-portfolio deploy

# One-command deployment
create-ai-portfolio deploy vercel
create-ai-portfolio deploy netlify

CLI Commands

Initialize a New Project

create-ai-portfolio init [project-name]

Interactive wizard to create a new AI-optimized portfolio project.

Generate AI Content

# Generate llms.txt for AI discoverability
create-ai-portfolio generate llms

# Generate structured data (Schema.org)
create-ai-portfolio generate schema

# Generate sitemap.xml
create-ai-portfolio generate sitemap

# Generate robots.txt with AI crawler support
create-ai-portfolio generate robots

Test AI Visibility

# Run basic AI visibility tests
create-ai-portfolio test [url]

# Run comprehensive tests with detailed report
create-ai-portfolio test --comprehensive --save-report

Deploy Your Portfolio

# Interactive deployment wizard
create-ai-portfolio deploy

# Deploy to specific platform
create-ai-portfolio deploy vercel
create-ai-portfolio deploy netlify
create-ai-portfolio deploy github-pages

System Requirements

  • Node.js 16.0.0 or higher
  • npm 8.0.0 or higher
  • Git (recommended)

Templates

Developer Portfolio (Default)

  • Clean, professional design
  • Project showcase with filtering
  • Skills matrix with proficiency levels
  • Blog integration
  • Contact form with validation
  • Dark/light mode toggle
  • Mobile-responsive design

Coming Soon

  • Designer Portfolio
  • Writer Portfolio
  • Academic Portfolio
  • Startup Landing Page

AI Optimization Features

LLMs.txt Generation

Automatically creates AI-readable summaries of your portfolio:

  • Personal information and professional background
  • Technical skills and expertise areas
  • Project descriptions with key achievements
  • Contact information and availability
  • API endpoints (if applicable)

Structured Data (Schema.org)

Generates rich snippets for better search visibility:

  • Person schema with professional details
  • WebSite schema with navigation structure
  • CreativeWork schemas for projects
  • Organization schema (if applicable)
  • BreadcrumbList for navigation

AI Visibility Testing

Comprehensive testing suite to ensure optimal AI discoverability:

  • Content structure analysis
  • Semantic HTML validation
  • Meta tags optimization
  • Performance metrics
  • Accessibility compliance
  • AI crawler compatibility

Examples

Basic Usage

# Create a new portfolio
npx create-ai-portfolio@latest my-awesome-portfolio

# Generate AI content
cd my-awesome-portfolio
create-ai-portfolio generate llms --language en --format markdown
create-ai-portfolio generate schema --types person,website,creative-work

# Test AI visibility
create-ai-portfolio test http://localhost:3000 --comprehensive

# Deploy to Vercel
create-ai-portfolio deploy vercel

Advanced Configuration

# Generate Chinese llms.txt with custom length
create-ai-portfolio generate llms \
  --language zh-CN \
  --format structured \
  --max-length 5000 \
  --base-url https://myportfolio.dev

# Deploy with custom build settings
create-ai-portfolio deploy netlify \
  --build-command "npm run build:prod" \
  --output-directory "dist" \
  --env "NODE_ENV=production,API_URL=https://api.example.com"

Development

Building from Source

# Clone the repository
git clone https://github.com/ai-portfolio/create-ai-portfolio.git
cd create-ai-portfolio

# Install dependencies
npm install

# Build the CLI
npm run build:cli

# Test locally
npm run cli -- init test-project

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

Troubleshooting

Common Issues

Node.js Version: Ensure you're using Node.js 16.0.0 or higher:

node --version

Permission Issues: On Unix systems, you might need to use sudo for global installations:

sudo npm install -g create-ai-portfolio

Build Failures: Clear node_modules and reinstall:

rm -rf node_modules package-lock.json
npm install

🎨 Templates & Examples

Template Description Demo Source
Developer Full-stack developer portfolio View Demo Source
Designer UI/UX designer showcase View Demo Coming Soon
Writer Content creator portfolio View Demo Coming Soon
Academic Research & publications View Demo Coming Soon

🌟 Showcase

Real portfolios built with our framework

Want to be featured? Submit your portfolio!

📖 Documentation

Quick Links

API Reference

💬 Community & Support

📖 Documentation

Comprehensive guides and API docs

Read the Docs

💬 Discord

Join our community chat

Join Discord

🐛 Issues

Report bugs & request features

GitHub Issues

🤝 Contributing

We love contributions from the community! Here's how you can help:

🐛 Found a Bug?

  1. Check existing issues
  2. Create a new issue with reproduction steps
  3. Include your OS, Node.js version, and error details

💡 Have an Idea?

  1. Start a discussion to share your idea
  2. Get community feedback before creating a PR
  3. Check our roadmap for planned features

🔧 Want to Code?

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Make your changes and add tests
  4. Run npm test to ensure everything works
  5. Commit with a clear message: git commit -m 'Add amazing feature'
  6. Push to your fork and create a Pull Request

📖 Improve Docs?

  1. Documentation lives in docs/ folder
  2. Use clear, simple language
  3. Include code examples where helpful
  4. Test all code snippets before submitting

🎨 Create Templates?

  1. Templates go in templates/ folder
  2. Follow our template guidelines
  3. Include comprehensive documentation
  4. Add to the templates showcase

Read our full Contributing Guide for detailed instructions.

📊 Project Stats

GitHub stars GitHub forks GitHub watchers

NPM Downloads GitHub issues GitHub pull requests

License

MIT License - see the LICENSE file for details.


Built with ❤️ by the AI Portfolio Team

WebsiteDocumentationGitHub

About

🤖 The world's first portfolio framework designed for the AI era. Build portfolios that AI understands, search engines love, and users adore.

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published