Port3D: Shiva Karthik's AI-Powered Portfolio

An immersive 3D portfolio with AI voice chat, built to tell my story not just show it. Designed to impress, coded to express and Not created by AI it is enhanced with AI

Comment

Inspiration

Whenever we apply for jobs, we often check if our resume matches the job description. But what if recruiters could do the reverse check if a job fits the candidate based on their portfolio? That idea sparked this project.

I wanted to build a smarter portfolio, one that goes beyond design and lists. So, I integrated an AI-powered chatbot that allows recruiters to paste any job description and instantly get a tailored analysis of how well I match, based solely on my actual experience and projects.

What it does

This 3D portfolio, built with React Three Fiber and Next.js, introduces a friendly AI chatbot that helps users explore my background, experience, and projects. Instead of static sections, visitors can now interact naturally and get personalized answers, powered by OpenRouter’s LLMs.

How we built it

React.js, Next.js, Tailwind CSS React Three Fiber, Drei, Three.js Framer Motion for animations OpenRouter (LLM API) for AI integration Vercel for deployment

Challenges we ran into

Keeping the AI responses accurate and grounded in real resume data Avoiding hallucinations while maintaining a conversational tone Mobile responsiveness and aligning 3D visuals across devices

Accomplishments that we're proud of

Successfully integrated a context-aware AI chatbot that responds only using real data from my resume and projects. Replaced boring portfolio scrolling with interactive storytelling powered by 3D visuals and conversational AI. Built a tool that not only showcases my skills but also serves a real-world use case — streamlining the hiring process for recruiters. Maintained high responsiveness across devices, even with a 3D canvas and animations involved.

What we learned

How to fine-tune AI prompts to reduce hallucination and ensure the bot stays grounded in context. Improved my understanding of 3D rendering and how to balance performance with visual quality using React Three Fiber. Gained experience in user-centered design by thinking like a recruiter and building a portfolio that feels useful and interactive, not just pretty. Learned the importance of edge case testing when combining AI logic with frontend components.

What's next for Port3D: Shiva Karthik's AI-Powered Portfolio

Add a voice interface so the AI assistant can support voice interactions for better accessibility. Implement job fit scoring, where the bot can give a percentage or badge for how well a candidate fits the job. Include dashboard analytics to track what sections users interact with the most, helping me improve the portfolio further. Open source parts of the chatbot logic to help others add similar AI layers to their portfolios.

Built With

  • framermotion
  • geminiapi
  • nextjs
  • openrouter
  • react
  • supabase
  • tailwindcss
  • vercel
Share this project:

Updates