A Portfolio You Query, Not Scroll

Published: (January 31, 2026 at 10:48 AM EST)
3 min read
Source: Dev.to

Source: Dev.to

Introduction

Most developer portfolios create friction. 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, which is backwards. Information systems should adapt to the user, not the other way around.

This project treats a portfolio as an information system, not a traditional webpage. It is a search‑first developer portfolio:

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

You don’t browse it—you query it.

Example query: “What projects has Shivam built?”
Answer: “Still (his hackathon‑winning forum project).”

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

Live Interactive Demo

If the embed below does not load, view the full site here:

(embed placeholder)

Implementation Details

Retrieval‑Augmented Generation (RAG) System

  • The portfolio is not a chatbot.
  • All content is prepared and indexed ahead of time.
  • At runtime, the system retrieves only the relevant snippets 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.

Flow

  • Gemini 3 Flash → Structured response with citations.
  • Retrieval before generation: The AI never sees the entire portfolio, only the content relevant to the current query.
  • 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, allowing readers to verify the information.
  • Precomputed embeddings: 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

ComponentTechnology
FrontendNext.js 16, TypeScript, Tailwind CSS
AI ModelGemini 3 Flash (Google AI Studio)
Embeddingstext-embedding-004
SearchCustom cosine similarity retrieval
AnimationsFramer Motion, Three.js, Unicorn Studio WebGL
DeploymentGoogle Cloud Run

The system is intentionally small.

About the Author

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. Portfolios are usually reviewed under severe time pressure. 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.

Back to Blog

Related posts

Read more »

Phoenix LiveComponent Provider Pattern

!Cover image for Phoenix LiveComponent Provider Patternhttps://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%...

CSS Selectors 101

CSS Selectors – How to Target Elements You've written some HTML. Now you want to make it look good with CSS. But how do you tell CSS which elements to style? T...