cd /news/ai-tools/i-built-an-ai-powered-portfolio-temp… · home topics ai-tools article
[ARTICLE · art-26036] src=dev.to pub= topic=ai-tools verified=true sentiment=↑ positive

I Built an AI-Powered Portfolio Template (and You Can Use It)

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.

read2 min publishedJun 13, 2026

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.

So 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.

What it does

Instead of reading through your about section, visitors can just ask:

"What stack do you use?"

"Are you available for freelance?"

"Tell me about your projects"

And the AI answers — instantly, in a terminal UI that sits right in the hero section.

It also has a Dev Mode toggle that switches the navigation from normal buttons to REST-style API routes:

GET /projects 200 OK

GET /skills 200 OK

POST /contact 201 CREATED

Small detail. But if you're a developer looking to hire another developer, it lands differently than a generic "See My Work" button.

The tech

Kept it dead simple on purpose:

Pure HTML, CSS, JavaScript — no React, no npm, no build step

Groq API for the AI chat (free tier, fast inference)

Deployed on Vercel in under 2 minutes

Anyone can open the folder and understand it. No framework overhead. Just files.

I chose Groq over OpenAI because the free tier is genuinely free and the response speed is noticeably faster for a chat widget — no spinner killing the UX.

What's inside

Terminal AI chat widget (Groq powered) Dev Mode toggle with REST-style nav

Project cards with stack tags and live/GitHub links

Skills section with categories

Contact form

Fully responsive

Clean, commented code — easy to customize

Why I'm sharing it

I 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.

It takes about 5 minutes to set up.

**Live Demo**: [https://portfolio-two-amber-6tr3dimpay.vercel.app/](https://portfolio-two-amber-6tr3dimpay.vercel.app/)

**Get the template**: [https://payhip.com/b/0zJEc](https://payhip.com/b/0zJEc)

**

Who it's for**

CS students who want a portfolio that stands out

Developers tired of the same Tailwind + React portfolio everyone has

Anyone who wants an AI feature without building a backend

If you use it, I'd love to see what you build with it. Drop your portfolio link in the comments.

── more in #ai-tools 4 stories · sorted by recency
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/i-built-an-ai-powere…] indexed:0 read:2min 2026-06-13 ·