DEV Community

Cover image for A Portfolio You Query, Not Scroll
Shivam Gawali
Shivam Gawali

Posted on

A Portfolio You Query, Not Scroll

New Year, New You Portfolio Challenge Submission

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

The Problem

Most developer portfolios create friction.
You scroll. You skim. You guess what matters.

Under time pressure, reviewers miss important details not because they are absent, but because they are buried inside presentation choices. The reader is forced to adapt to the portfolio.

That is backwards.

Information systems should adapt to the user, not the other way around.

The Portfolio

This project treats a portfolio as an information system, not a webpage.

It is a search-first developer portfolio.

There is:

  • No navigation menu
  • No “About / Projects / Skills” tabs
  • No fixed narrative to scroll through

You do not browse it. You query it.

Examples:

“What projects has Shivam built?”
“Tell me about Still (his hackathon-winning forum project)”
“What skills does he have?”
“How can I contact him?”

The portfolio retrieves only the information relevant to the question and presents it as a clear, grounded answer.

The result is immediate clarity.
No scanning.
No guessing.
No interpretation of layout decisions.

Live Interactive Demo:

(If the embed above does not load, view the full site here: https://ai-portfolio-1005735332019.us-central1.run.app)

--labels dev-tutorial=devnewyear2026

How It Works

This portfolio is implemented as a Retrieval Augmented Generation (RAG) system.

It is not a chatbot.
It does not paste a résumé into a prompt.

All portfolio content is prepared and indexed ahead of time. At runtime, the system retrieves only what is relevant to the query and generates a response strictly from that retrieved context.

In practice:

  1. The user asks a question
  2. The system identifies intent (projects, skills, contact, background)
  3. Relevant portfolio content is retrieved using semantic similarity
  4. Only that content is sent to the model
  5. The response includes direct citations pointing back to real sources

This keeps answers predictable, inspectable, and grounded in real data.

Architecture

Portfolio Architecture

The Flow:
Query → Intent Classification → Query Embedding (text-embedding-004) → Cosine Similarity Search (threshold ≥ 0.25) → Top Relevant Chunks with Source Metadata → Gemini 3 Flash → Structured Response with citations.

Key Design Decisions

  • Retrieval before generation: The AI never sees the entire portfolio. It only sees the content relevant to the question being asked.
  • Intent-aware filtering: Project questions prioritize project data. Contact questions do not pull unrelated background information.
  • Inspectable answers: Every answer is grounded in a specific source. Readers can see exactly where information comes from instead of trusting opaque output.
  • Precomputed embeddings: Embeddings are generated at build time. Runtime work is limited to retrieval and generation, keeping latency and cost predictable.
  • Graceful limits: The demo runs on Gemini’s free tier. If usage limits are reached, the system transparently falls back to retrieved portfolio data and clearly indicates the change in behavior.

Tech Stack

  • Frontend: Next.js 16, TypeScript, Tailwind CSS
  • AI: Gemini 3 Flash (Google AI Studio)
  • Embeddings: text-embedding-004
  • Search: Custom cosine similarity retrieval
  • Animations: Framer Motion, Three.js, Unicorn Studio WebGL
  • UI built using open-source React components (including 21st.dev). *
  • Deployment: Google Cloud Run

The system is intentionally small.
Every component exists for a reason.

About Me

Hi, I’m Shivam Gawali.

I’m a student of Artificial Intelligence and Data Science with a strong interest in software engineering fundamentals and backend systems. I enjoy building small, complete systems and understanding how they behave under real constraints.

I care about correctness, clarity, and making reasoning visible more than surface-level polish.

This portfolio reflects how I think:
focus on the question, reduce noise, and answer precisely.

Why This Matters

Portfolios are usually reviewed under severe time pressure.
Scrolling rewards presentation.
Search rewards understanding.

If we can search documentation to understand a system,
we should be able to search a person’s work to understand how they think.

Top comments (0)