ChatFolio AI v1.0.0

Pre-built Themes

ChatFolio AI comes with 4 beautiful pre-built themes located in /public/theme/:

Using Pre-built Themes

To use a pre-built theme, simply copy the theme configuration:

// Example: Using the Blue Theme
// Copy content from /public/theme/blue.ts to app.config.ts

export const THEME_CONFIG = {
  CHAT_BUBBLES: {
    USER: {
      BACKGROUND: '221.2 83.2% 53.3%', // Blue theme colors
      FOREGROUND: '210 40% 98%',
    },
    ASSISTANT: {
      BACKGROUND: '0 0% 96%',
      FOREGROUND: '0 0% 20%',
    },
  },
  // ... complete theme configuration
}

Custom Theme Configuration

Create your own theme by modifying colors and styling in app.config.ts:

export const THEME_CONFIG = {
  CHAT_BUBBLES: {
    USER: {
      BACKGROUND: 'your-custom-hsl-color', // HSL color values
      FOREGROUND: 'your-text-color',
    },
    ASSISTANT: {
      BACKGROUND: 'your-assistant-bg-color',
      FOREGROUND: 'your-assistant-text-color',
    },
  },
  
  // Customize other elements
  CHIP_SUGGESTIONS: {
    BACKGROUND: 'your-chip-bg-color',
    FOREGROUND: 'your-chip-text-color',
    HOVER_BACKGROUND: 'your-chip-hover-color',
    // ... more options
  },
  
  // Sidebar, Header, Chat Input, Dark Mode, etc.
  // ... complete customization options
}

Theme Structure

Each theme includes comprehensive styling for:

• Chat Bubbles: User and assistant message styling
• Suggestion Chips: Interactive suggestion button styling
• Pills: Conversation starter pill styling
• Sidebar: Navigation sidebar styling
• Header Buttons: Top navigation button styling
• Chat Input: Message input area styling
• Dark Mode: Complete dark mode variations for all components

Color Format

All colors use HSL (Hue, Saturation, Lightness) format:

BACKGROUND: '221.2 83.2% 53.3%' // H S L (no hsl() wrapper needed)

Chat Configuration

Adjust chat behavior in app.config.ts:

export const CHAT_CONFIG = {
  MAX_USER_MSG_LENGTH: 100,
  MAX_MESSAGE_ARR_LENGTH: 5,
  MODEL_NAME: 'gpt-4o-mini', // or 'gpt-4o', 'gpt-3.5-turbo'
  RESPONSE_LANGUAGE: 'English',
  RESPONSE_TONE: 'professional, knowledgeable, and confident',
}

SEO Configuration

Update SEO settings in app.config.ts:

export const SEO_CONFIG = {
  TITLE: `${PERSONAL_INFO.FULL_NAME} - ${PERSONAL_INFO.PROFESSIONAL_TITLE}`,
  DESCRIPTION: `Professional portfolio of ${PERSONAL_INFO.FULL_NAME}...`,
  KEYWORDS: [
    PERSONAL_INFO.FULL_NAME,
    PERSONAL_INFO.PROFESSIONAL_TITLE,
    // Add relevant keywords
  ],
}

Dynamic OpenGraph Image

ChatFolio AI automatically generates a professional OpenGraph image that displays when your portfolio is shared on social media platforms like LinkedIn, Twitter, Facebook, etc.

Features

• Professional Design: Visiting card-style layout with gradient background
• Dynamic Content: Automatically includes your name, title, tagline, and contact info
• Profile Image: Uses your actual profile photo from /public/johndoe.jpg
• Responsive Layout: Optimized for social media sharing (1200x630px)
• Error Handling: Fallback design if profile image fails to load

Technical Details

• Location: src/app/opengraph-image.tsx
• Technology: Next.js ImageResponse API with Satori
• Format: PNG (1200x630px)
• Caching: Statically optimized and cached by Next.js

Customization

The OG image automatically updates when you modify:

• Personal information in app.config.ts
• Profile image in /public/johndoe.jpg
• App domain or branding details

Feature Flags

Control optional features in app.config.ts:

export const FEATURE_FLAGS = {
  ENABLE_OPEN_TO_WORK: true, // Show "Open to Work" badge
  IS_DEMO: true, // Show floating theme switcher for demo purposes
}

Demo Mode

The IS_DEMO flag controls the floating theme switcher button:

• true (default): Shows the floating theme switcher with 5 color options for demo purposes
• false: Hides the theme switcher for production use

Font Configuration

Customize the application font by modifying src/app/layout.tsx and tailwind.config.ts:

Changing the Font

import { Inter } from 'next/font/google' // Replace Space_Mono with your preferred font

const inter = Inter({
  variable: '--font-inter',
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'], // Adjust weights as needed
})

<body className={`h-full overflow-x-hidden ${inter.variable} antialiased`}>

fontFamily: { 
  sans: ['var(--font-inter)', 'Inter', 'sans-serif'], // Update font family
  mono: ['var(--font-inter)', 'Inter', 'sans-serif'], // Update mono font if needed
},

Popular Font Options

• Inter: Modern, clean sans-serif
• Roboto: Google's signature font
• Poppins: Rounded, friendly appearance
• Montserrat: Elegant, professional
• Source Sans Pro: Adobe's open-source font