The latest articles on DEV Community by chiheb nouri (@chih3b). https://dev.to/chih3b https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1376446%2F334e51ab-052c-46d6-88e3-bc477c23cc83.png https://dev.to/chih3b en chiheb nouri Sun, 11 Jan 2026 15:24:03 +0000 https://dev.to/chih3b/i-built-an-ai-powered-portfolio-with-nextjs-supabase-groq-heres-how-mm0 https://dev.to/chih3b/i-built-an-ai-powered-portfolio-with-nextjs-supabase-groq-heres-how-mm0 <p>Hey dev community! 👋</p> <p>I just finished building my portfolio as an AI Engineer, and I wanted to share the tech stack and some cool features I implemented.</p> <h2> 🔗 Live Site: <a href="https://www.chihebnouri.live" rel="noopener noreferrer">www.chihebnouri.live</a> </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk0ne3o68zih2ch83oxb9.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk0ne3o68zih2ch83oxb9.png" alt=" " width="800" height="445"></a></p> <h2> The Stack </h2> <ul> <li> <strong>Framework:</strong> Next.js 15 (App Router)</li> <li> <strong>Database:</strong> Supabase (PostgreSQL)</li> <li> <strong>Styling:</strong> Tailwind CSS 4</li> <li> <strong>AI Features:</strong> Groq API (Llama 3.3)</li> <li> <strong>Hosting:</strong> Vercel</li> <li> <strong>Diagrams:</strong> Mermaid.js</li> </ul> <h2> Features I'm Most Proud Of </h2> <h3> 1. AI Chatbot That Knows My Work </h3> <p>There's a chatbot that can answer questions about my projects, experience, and skills. It pulls context from my database so it always has accurate info.</p> <h3> 2. Deep Dive Project Chat </h3> <p>Each project has its own AI assistant. Click "Deep Dive" on any project and you can ask technical questions about the architecture, challenges, and implementation.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvm3rcljvzq7unck3tygf.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvm3rcljvzq7unck3tygf.png" alt=" " width="800" height="401"></a></p> <h3> 3. Interactive Terminal Mode </h3> <p>Press the terminal icon and you get a CLI-style interface to explore my portfolio. Type <code>help</code> to see commands.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqel0jktkfx9qua6qr0m6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqel0jktkfx9qua6qr0m6.png" alt=" " width="800" height="394"></a></p> <h3> 4. Smart Project Creator (Admin) </h3> <p>In the admin panel, I can paste a LinkedIn post or project description, and AI generates the full project structure - title, tags, highlights, tech stack, everything.</p> <h3> 5. Mermaid Diagrams </h3> <p>Each project has an auto-generated data flow diagram showing the architecture visually.</p> <h2> Tech Highlights </h2> <ul> <li> <strong>Real-time data:</strong> Everything comes from Supabase, so I can update content without redeploying</li> <li> <strong>Voice input:</strong> The chatbot supports speech-to-text</li> <li> <strong>Text-to-speech:</strong> AI responses can be read aloud</li> <li> <strong>Scroll animations:</strong> Smooth reveal animations as you scroll</li> <li> <strong>Dark mode:</strong> Full dark theme support</li> </ul> <h2> What I Learned </h2> <p>Building this taught me a lot about:</p> <ul> <li>Integrating LLMs into web apps</li> <li>Structuring data for AI context</li> <li>Making AI responses feel natural and conversational</li> <li>Optimizing for both SEO and user experience</li> </ul> <h2> About Me </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8wcghi8iqpeh3yer1buo.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8wcghi8iqpeh3yer1buo.png" alt=" " width="800" height="401"></a></p> <p>I'm an AI Engineer from Tunisia specializing in computer vision. I've built production systems for shoplifting detection, violence monitoring, facial recognition, and automated retail checkout. Featured at HANNOVER MESSE 2025.</p> <p>Check out the portfolio and let me know what you think! Happy to answer any questions about the implementation.</p> <p>🌐 <strong>Portfolio:</strong> <a href="https://www.chihebnouri.live" rel="noopener noreferrer">www.chihebnouri.live</a><br> 💼 <strong>LinkedIn:</strong> <a href="https://linkedin.com/in/chiheb-nouri" rel="noopener noreferrer">linkedin.com/in/chiheb-nouri</a><br> 🐙 <strong>GitHub:</strong> <a href="https://github.com/chih3b" rel="noopener noreferrer">github.com/chih3b</a></p> ai nextjs portfolio showdev