ChatFolio - Interactive AI Style 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
Note: This is a static HTML template. It does not require a backend database, making it lightning-fast and easy to host on GitHub Pages, Netlify, or any standard server.
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.