Chatfolio

Chatfolio - A portfolio that talks to you.

Comment

Inspiration

As a student developer preparing for internships and freelance gigs, I wanted a dynamic, AI-powered portfolio that truly represented me—not just a static list of projects. I envisioned a platform where visitors could interact with my portfolio like a conversation, ask questions about my experience, and even receive tailored responses. Thus, Chatfolio was born—an intelligent portfolio assistant that blends resume showcasing, voice input, chat history, and smart media handling in one seamless interface.

What it does

Chatfolio is an interactive portfolio chatbot built to simulate a personalized conversation with the developer. It can:

  • Answer questions about my experience, projects, and skills.
  • Send a resume file when requested.
  • Handle voice input for accessibility and faster queries.
  • Share dynamic images and descriptions related to projects.
  • Maintain chat history for more natural interactions. (Also stop and play background music, try telling it)

It's like having an AI version of myself pitching my strengths 24/7.

How we built it

Chatfolio is built using:

  • Frontend: HTML, CSS, JavaScript (Vanilla)
  • Backend: Node.js with Express
  • AI Integration: Gemini API (via backend for security)
  • Voice Input: Web Speech API
  • Hosting: Netlify (Frontend), Render (Backend)
  • Resume/File Serving: Dynamically handled via API endpoints

All content is generated or served in real-time, making the site extremely responsive and interactive.

Challenges we ran into

  • Ensuring API keys stayed secure while integrating Gemini.
  • Creating a natural conversation flow using structured prompts.
  • Keeping the voice input intuitive and non-disruptive.
  • Handling different content types dynamically in a single thread of chat.
  • Ensuring cross-platform compatibility and a polished UI.

Accomplishments that we're proud of

  • Successfully implemented voice-enabled AI chat in a portfolio.
  • Clean and minimal UI that adapts to different user intents.
  • Fully functional AI integration with rich multimedia response capability.
  • Real-time resume and image handling without compromising performance.

What we learned

  • Working with large language models (LLMs) to simulate personal context.
  • Practical backend deployment with Render and environment variable management.
  • Enhanced frontend design and UX for real-time applications.
  • Importance of making personal tools accessible and user-friendly.

What's next for Chatfolio

  • Domain migration to chatfolio.xyz for a more professional presence.
  • Login system for customizable guest interactions or feedback collection.
  • Analytics integration to understand visitor behavior.
  • Multi-theme support and language localization.
  • Possibly turning Chatfolio into a template or product for other devs!
Share this project:

Updates