Explore my life, education, and career through an AI-driven interactive chat experience!
MattéoGPT is a Next.js application powered by MistralAI that allows users to engage in conversations about my personal and professional journey. With a smooth AI prompting interface, a dynamic discoverable cards gallery, and full light/dark mode support, this project provides an immersive way to explore my story.
- Conversational AI chat interface with Markdown-formatted responses.
- Clickable prompt ideas to guide discussions.
- Keyboard shortcuts (Enter to send messages).
- Optimized API request handling using TanStack Query.
- Clickable cards that reveal AI-generated insights about my life, education, and career.
- Framer Motion animations for smooth interactions.
- Local storage support to save discovered cards.
- Thematic cards on career, education, projects, hobbies, and travels.
- Light & Dark Mode with seamless switching.
- Global State Management via React Context.
- Fully responsive design optimized for all devices.
The development process has been focused on following clean code principles, best practices, and ensuring code quality with tools like Husky, ESLint, and Prettier for linting, formatting, and pre-commit hooks.
| Technology | Description |
|---|---|
| Next.js | React framework for server-side rendering and performance optimization. |
| MistralAI | AI-powered conversational assistant. |
| React Context API | Global state management for chat interactions. |
| Framer Motion | Smooth animations for UI interactions. |
| TanStack Query | Efficient data fetching and caching. |
| Tailwind CSS | Modern styling framework for responsiveness and customization. |
| TypeScript | Strongly typed JavaScript for better maintainability. |
Clone the repository and install dependencies:
git clone https://github.com/lorematteo/gpt-portfolio.git
cd gpt-portfolio
pnpm install Start the development server:
pnpm run dev The app will be available at http://localhost:3000.
Create a .env file and add your MistralAI API key:
MISTRAL_API_KEY=your_api_key_here
- More Thematic Cards (Expanding topics and new visuals).
- Multi-Language Support.
Fueled by curiosity, crafted with care, and driven by the power of AI.