DEV Community

Cover image for Building a 3D Interactive Portfolio with React 19, Three.js, and a Gemini AI Agent
José Gabriel
José Gabriel

Posted on

Building a 3D Interactive Portfolio with React 19, Three.js, and a Gemini AI Agent

#googleaichallenge #dev #devchallenge #portfolio

About Me
I am a Computer Engineering student at the Federal University of Alagoas (UFAL) in Brazil, with a unique background transitioning from Chemical Engineering. This shift gave me a rigorous analytical mindset that I now apply to software development and Data Science.

I specialize in Computer Vision and Machine Learning, having recently won 1st place at the Microsoft AI Challenge II (2025). My goal with this portfolio was to move away from static templates and create an immersive experience that reflects my passion for high-performance visuals and intelligent systems.

Portfolio

How I Built It
I wanted my portfolio to be more than just a list of links; I wanted it to be an interactive playground.

  1. The Tech Stack I built the application using the latest web technologies to ensure performance and scalability:

Frontend: React 19.2, TypeScript, and Tailwind CSS for styling.

3D Visuals: I used Three.js and React Three Fiber to create the "Liquid Background" effect found in the Contact section. This involves custom GLSL shaders that react to mouse movement, creating a fluid, organic feel.

Infrastructure: The app is containerized using Docker (serving static files via Nginx) and deployed effortlessly on Google Cloud Run.

  1. Google AI Integration (The Gemini Agent) Instead of just writing about myself, I wanted visitors to interact with my professional persona. I integrated the Google Gemini API directly into the application using the @google/genai SDK.

I built a ChatOverlay component that acts as a virtual assistant. It is prompted with a system instruction containing my resume, skills (Python, C, SQL), and background.

How it works: When a user asks "What is José's experience with Python?", the request is sent to Gemini, which acts as my agent and answers based on the context I provided in the code.

Why Gemini? It provided the speed and context retention needed to make the chat feel natural and instant.

// Snippet of how I initialize the agent
const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
const response = await ai.models.generateContent({
  model: 'gemini-1.5-flash', // Example model
  config: {
    systemInstruction: `You are José Gabriel's virtual assistant...`
  }
});
Enter fullscreen mode Exit fullscreen mode
  1. Design Decisions I adopted a "dark mode" aesthetic with a grainy noise overlay to give it a cinematic texture. The custom cursor and spotlight effects were implemented to guide the user's attention dynamically across the page.

What I'm Most Proud Of
I am particularly proud of the GLSL Shader integration. Writing raw shader code to handle the liquid distortion effect and bridging it with React state for mouse interaction was a challenging but rewarding engineering problem.

Running this on Cloud Run was the cherry on top—seeing a heavy graphical application load instantly due to containerization makes the user experience seamless.

Top comments (0)