New Year, New You Portfolio Challenge - Pranay Gajbhiye

Source: Dev.to

Introduction

This submission for the New Year, New You Portfolio Challenge showcases a portfolio built with a blend of design, quantitative trading, and AI. The project reflects a focus on interactive 3D experiences, real‑time data visualizations, and an AI assistant powered by Google’s Gemini API.

Features

• Interactive 3D crystal scene – drag to rotate the model.
• AI Integration – chat with an assistant about the projects (Gemini Pro).
• Real‑time Data – live Bitcoin market data and quantitative order books.
• Smooth UX – GSAP animations, responsive design, and Framer Motion.

How I Built It

The core of the submission fuses 3D WebGL graphics with generative AI, emphasizing performance, scalability, and modern best practices.

Tech Stack

AI Chat Assistant

The assistant is implemented with Gemini’s gemini-pro model and custom system instructions to provide context‑aware answers about the portfolio’s projects.

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

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

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

  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(),
  });
}

Quantitative Trading Dashboard

Live price updates are fetched via the Binance WebSocket API and visualized with D3.js. Careful state management ensures the UI remains responsive at 60 fps despite high‑frequency data streams.

Performance Considerations

• 3D Loading – Utilized GLTFLoader with Draco compression and lazy‑loaded the canvas to reduce Time to Interactive (TTI).
• Serverless Cold Starts – Implemented connection pooling for PostgreSQL on Cloud Run to mitigate initial latency.
• Gemini Rate Limits – Added robust frontend error handling to gracefully manage API throttling.

Aesthetic & Accessibility

The portfolio adopts a premium “Black Obsidian” visual theme, featuring smooth scrollytelling with GSAP while keeping accessibility best practices in mind.

Conclusion

This project combines three distinct disciplines—3D graphics, full‑stack engineering, and AI—to create a dynamic, interactive portfolio. The integration of a floating obsidian crystal with a conversational AI assistant offers a unique user experience.

If you found the demo or code helpful, feel free to leave a reaction or comment. The source code is open‑source under the MIT License and available on GitHub.

Tags: #devchallenge #googleaichallenge #portfolio #gemini