ChatFolio - Personal Portfolio HTML Template

ChatFolio – The Interactive AI-Driven Portfolio Template

Tired of the same static landing pages? ChatFolio is a revolutionary, conversational-first portfolio template designed for the modern era. Instead of scrolling through a traditional site, your visitors “chat” with an AI-powered version of you.

Built with a focus on Innovation, User Experience, and Simplicity, ChatFolio allows you to showcase your projects, skills, and experience through a sleek, interactive chat interface that feels like a premium app.

Why Choose ChatFolio?

• Innovative Conversational UX: Stand out from the competition with a ChatGPT-inspired interface that engages visitors instantly.
• “HTML-Only” Customization: No complex databases or deep JS knowledge required. Manage all bot dialogues, responses, and project data directly within the HTML “Data Vault.”
• Smart Keyword Triggers: The bot is programmed to respond to specific keywords (e.g., “skills”, “contact”, “projects”) while providing a helpful “Error Flow” for unrecognized inputs.
• Fuzzy Matching: The system includes built-in typo protection. If a user types “aboot” instead of “about,” the bot will still trigger the correct flow.
• Media-Rich Project Gallery: Showcase your work using a Master Modal system that supports multi-image sliders, YouTube embeds, and local MP4 videos.

Aesthetic & Customization

• 13+ Premium Skins: Includes 10 single-color themes, 2 modern gradients, and a sophisticated monochrome mode.
• Dark & Light Support: Carefully crafted UI that looks stunning in any lighting condition.
• Fully Responsive: Optimized for a flawless “mobile-first” chat experience on iOS and Android.
• Clean & Documented Code: Built by a developer, for developers. Easy to read, easy to modify.

Core Features

• Interactive Typewriter Effects (TypewriterJS)
• Dynamic Progress Stars for Skills
• Filterable Project Categories
• SMTP-Ready Contact Form (PHPMailer)
• FontAwesome 7 Icon Support
• Google Fonts Integration
• Cross-Browser Compatibility

What’s in the Box?

• Full HTML, CSS, and JS source files
• PHP Mailer script for the Contact Form
• Comprehensive Documentation
• Clean folder structure

Sources and Credits

Javascript Files

• Typewriter

Php Files

• PHPMailer

Images

• https://unsplash.com/fr/photos/homme-portant-des-lunettes-et-un-pull-a-motifs-VzTiWoL0z5I
• https://www.pexels.com/fr-fr/photo/homme-portrait-sourire-keffieh-5416860/
• https://www.pexels.com/ca-es/foto/932261/
• https://unsplash.com/fr/photos/mug-en-ceramique-blanche-nDd3dIkkOLo
• https://www.pexels.com/photo/close-up-photo-of-cute-pink-piggy-bank-4146005/
• https://unsplash.com/fr/photos/rouleau-de-papier-blanc-sur-table-blanche-6W8H4puOJB0
• Logos from https://logoipsum.com/
• Icons for Light/Dark Toggle from https://iconoir.com/

Videos

• https://www.pexels.com/video/person-using-her-laptop-4146195/
• https://www.youtube.com/watch?v=SjJhuZQlkbA

Fonts

• Unbounded Google Font
• Geist Google Font
• Rubik Google Font
• Font Awesome Icons

*Images used in the preview are for demonstration purposes and are not included in the main download package.