{"slug": "i-built-an-ai-powered-portfolio-template-and-you-can-use-it", "title": "I Built an AI-Powered Portfolio Template (and You Can Use It)", "summary": "A CS student built an AI-powered portfolio template featuring a terminal-style chat agent that answers visitor questions via Groq API. The template uses pure HTML, CSS, and JavaScript with no frameworks, and includes a Dev Mode toggle that switches navigation to REST-style API routes. It is available for other developers to customize and deploy on Vercel.", "body_md": "As a CS student learning backend development, I got tired of the same boring portfolio templates everywhere. You know the ones — hero section, projects, contact form, done. Nothing that actually shows how you think or work.\n\nSo I built my own. And I added something most portfolios don't have — a terminal-style AI chat agent that lets visitors actually talk to my portfolio.\n\n**What it does**\n\nInstead of reading through your about section, visitors can just ask:\n\n\"What stack do you use?\"\n\n\"Are you available for freelance?\"\n\n\"Tell me about your projects\"\n\nAnd the AI answers — instantly, in a terminal UI that sits right in the hero section.\n\nIt also has a Dev Mode toggle that switches the navigation from normal buttons to REST-style API routes:\n\nGET /projects 200 OK\n\nGET /skills 200 OK\n\nPOST /contact 201 CREATED\n\nSmall detail. But if you're a developer looking to hire another developer, it lands differently than a generic \"See My Work\" button.\n\n**The tech**\n\nKept it dead simple on purpose:\n\nPure HTML, CSS, JavaScript — no React, no npm, no build step\n\nGroq API for the AI chat (free tier, fast inference)\n\nDeployed on Vercel in under 2 minutes\n\nAnyone can open the folder and understand it. No framework overhead. Just files.\n\nI chose Groq over OpenAI because the free tier is genuinely free and the response speed is noticeably faster for a chat widget — no loading spinner killing the UX.\n\n**What's inside**\n\nTerminal AI chat widget (Groq powered)\n\nDev Mode toggle with REST-style nav\n\nProject cards with stack tags and live/GitHub links\n\nSkills section with categories\n\nContact form\n\nFully responsive\n\nClean, commented code — easy to customize\n\n**Why I'm sharing it**\n\nI packaged it as a template so other developers can skip the build time and just personalize it. Change your name, projects, drop in your Groq API key, deploy.\n\nIt takes about 5 minutes to set up.\n\n**Live Demo**: [https://portfolio-two-amber-6tr3dimpay.vercel.app/](https://portfolio-two-amber-6tr3dimpay.vercel.app/)\n\n**Get the template**: [https://payhip.com/b/0zJEc](https://payhip.com/b/0zJEc)\n\n**\n\nWho it's for**\n\nCS students who want a portfolio that stands out\n\nDevelopers tired of the same Tailwind + React portfolio everyone has\n\nAnyone who wants an AI feature without building a backend\n\nIf you use it, I'd love to see what you build with it. Drop your portfolio link in the comments.", "url": "https://wpnews.pro/news/i-built-an-ai-powered-portfolio-template-and-you-can-use-it", "canonical_source": "https://dev.to/electronic_boi_d77e22f9e5/i-built-an-ai-powered-portfolio-template-and-you-can-use-it-21f4", "published_at": "2026-06-13 08:49:20+00:00", "updated_at": "2026-06-13 09:17:52.121978+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "generative-ai"], "entities": ["Groq", "Vercel", "OpenAI"], "alternates": {"html": "https://wpnews.pro/news/i-built-an-ai-powered-portfolio-template-and-you-can-use-it", "markdown": "https://wpnews.pro/news/i-built-an-ai-powered-portfolio-template-and-you-can-use-it.md", "text": "https://wpnews.pro/news/i-built-an-ai-powered-portfolio-template-and-you-can-use-it.txt", "jsonld": "https://wpnews.pro/news/i-built-an-ai-powered-portfolio-template-and-you-can-use-it.jsonld"}}