Pranav Shah

Posted on Feb 1

New Year, New You Portfolio Challenge - Pranay Gajbhiye

#devchallenge #googleaichallenge #portfolio #gemini

New Year, New You Portfolio Challenge Submission

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hey everyone! My name is Pranay Gajbhiye. I'm 20 years old from Nagpur, India, and I'm currently pursuing a B.Tech in CSE 2nd Year. I like finance and quant trading, and since I'm from a CSE background, I choose to make a mix-and-match of "Design x Trade" and make my portfolio in the theme of my startup (BlackObsidian). We Are Looking For Investors and VCs. If Any Reading This, Please Do Consider BlackObdiain

About Black Obsidian

Yes, I'm also promoting my startup, BlackObsidian, which is an AMC. Earlier it was a quant firm; The BlackObsidian is currently having a CAGR of ~11% and $42K AUM. We are going to move to the UAE for global investors and markets soon this year.

Honestly

I know the Site is bit fancy; since This should be a Portfolio, I somehow used AI 100% to make this site. Also, If any One Of you knows of any startup events, do let me know. In comments

Portfolio

I didn't want to build just another static portfolio; I wanted to create a journey. Black Obsidian invites you to explore interactive 3D scenes, play with real-time data visualizations, and have intelligent conversations with an AI assistant powered by Google's Gemini AI. It's a reflection of my passion for pushing the boundaries of what web experiences can be.

Try these features:

🎮 Innovation: Explore the interactive 3D crystal scene (drag to rotate!)
💬 AI Integration: Chat with the AI assistant about my projects (powered by Gemini Pro)
📊 Real-time Data: View live Bitcoin market data and quantitative order books
🎨 UX: Experience smooth GSAP animations and responsive design

🚀 Live Demo

How I Built It

The core of my submission is the fusion of 3D WebGL graphics with Generative AI. I built this project with a focus on performance, scalability, and modern best practices.

Tech Stack:

Frontend: Next.js 15, React 19, TypeScript
3D Graphics: Three.js, React Three Fiber, @react-three/drei
AI: Google Gemini API (gemini-pro)
Data & Backend: PostgreSQL (Neon), Binance API, D3.js, Recharts
Styling & Animation: Tailwind CSS, GSAP, Framer Motion
Deployment: Google Cloud Run, Docker

Gemini AI Integration

The AI Chat Assistant isn't just a chatbot; it's an integrated guide. By using Google's Gemini API with custom system instructions, I created a persona that understands my specific skills, project history, and professional background.

I used the gemini-pro model for its superior context handling. Here’s the core API route that manages multi-turn conversations:

// app/api/gemini/chat/route.ts
import { GoogleGenerativeAI } from '@google/generative-ai';

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY || '');

export async function POST(req: Request) {
  const { message, conversationHistory } = await req.json();

  // Initialize the model with specific system instructions
  const model = genAI.getGenerativeModel({
    model: 'gemini-pro',
    systemInstruction: `You are an AI assistant for Pusparaj's portfolio. You are helpful, professional, and knowledgeable about his projects...`
  });

  const chat = model.startChat({
    history: conversationHistory,
    generationConfig: {
      maxOutputTokens: 1000,
      temperature: 0.7,
    },
  });

  const result = await chat.sendMessage(message);
  const response = await result.response;

  return NextResponse.json({
    reply: response.text(),
    timestamp: new Date().toISOString()
  });
}

3D & Data Visualization

The Quantitative Trading Dashboard demonstrates real-time data handling. I connect to the Binance WebSocket API to fetch live price updates and visualize the order book using D3.js. This required careful state management to ensure the UI remains responsive (60fps) while processing high-frequency data updates.

Challenges & Learnings

3D Performance: Loading complex 3D models can kill TTI (Time to Interactive). I solved this by using GLTFLoader with Draco compression and lazy-loading the canvas.
Serverless Cold Starts: Connecting to PostgreSQL from Cloud Run can be slow initially. Connection pooling was essential to fix this.
Gemini Rate Limits: To ensure reliability, I implemented robust error handling on the frontend to gracefully manage API limits.

What I'm Most Proud Of

I'm incredibly proud of the integration between the 3D environment and the AI. Having a floating, interactive obsidian crystal that you can explore while chatting with a smart assistant feels really unique.

I also prioritized a premium ("Black Obsidian") aesthetic with Smooth Scrollytelling using GSAP and keeping Accessibility in mind.

This challenge pushed me to combine three distinct disciplines: 3D Graphics, Full-stack Engineering, and AI. I'm proud of the result—a portfolio that feels alive.

If you enjoyed this demo or found the code helpful, please leave a reaction ❤️ and a comment! I'd love to hear your feedback or answer any questions about the implementation.

Open source under the MIT License. Check out the code on GitHub!

Tags : #devchallenge #googleaichallenge #portfolio #gemini

DEV Community