Sreekar Palla — Portfolio Website

Overview

I built this portfolio to help hiring teams assess my experience and explore the work behind it. It pairs searchable, skill-filtered project and career pages with role-fit analysis, a grounded Portfolio Assistant, project comments, and live service health. The pages are prerendered from structured JSON; a small Node API and local model service power the interactive features.

What it is

Visitors can read my background and resume, search projects by technology, compare a job description with my experience, and use a QR-ready networking page to connect. The About page also includes a photo gallery, while the status page shows the availability of interactive services.

Project pages share a navigation and detail layout, with section headings and technical depth tailored to each project. The template supports diagrams, code samples, comments, glossary links, and shareable section links.

Why I built it

Most portfolio templates optimize for visual impressiveness over information density. I wanted the opposite: a site where a hiring manager can see my resume in the first few seconds, understand what I have worked on in a few more, and dig into specifics if something catches their eye.

I used AI to explore implementation approaches and speed up coding. I set the direction: a lightweight static site, JSON as the source of truth, and build-time schema checks to keep content consistent. I reviewed the generated code, checked security-sensitive behavior, and tested key site and build flows before keeping the changes.

How it's built

The public pages are prerendered from HTML, CSS, JavaScript, and structured JSON, with Turbo supporting page navigation. The build validates content against AJV schemas, generates Pagefind search indexes, prerenders routes for SEO, and creates shareable QR codes.

A small Node API backed by SQLite handles comments, contact messages, role-fit analysis, assistant conversations, and service-status data. Portfolio chat uses a local Ollama model. Docker runs the application and model service, while nginx serves the pages and proxies API requests.

Diagram showing two paths: project and site JSON flows through AJV validation and the build pipeline to prerendered pages; browser requests pass through nginx to a Node API, SQLite, and a local Ollama model service. — Validated JSON produces prerendered pages and a Pagefind index; nginx routes live requests to a Node API, SQLite, and a local Ollama service.

Design decisions

The resume renders inline from PDF so visitors never have to download a file just to read it. Project pages share a common layout, but their sections are tailored to the work. A table of contents and reusable modules for visuals, code, comments, and glossary links help readers move from an overview into the relevant technical detail.

The projects page uses skill-based filtering instead of category tags, because the technologies used say more about a project than a label like 'full-stack' or 'backend.' Each skill filters to projects that use it, making it easy to find relevant work.

Lessons learned

The hardest part of a portfolio is making clear decisions about what information a specific audience needs and how to surface it without friction. Fast implementation only helped because I kept checking each iteration against that goal and testing the finished flows.

Separating content from presentation was one of the strongest architectural choices. It keeps the site maintainable as it grows and lets me change how things are displayed without touching the content itself. The project also strengthened my ability to direct AI with clear goals, evaluate its output, and refine the result into a cohesive product.

AI Assistant

The Portfolio Assistant answers questions using published portfolio content. The application retrieves supporting evidence, validates the model’s structured response, attaches source links, and offers useful fallbacks when inference is unavailable. The examples below cover answer quality, grounding, reliability, and security; the live figures show overall usage and typical reply time.

All timeUpdating stats…

Chats started: LoadingAll conversations
Follow-up rate: LoadingChats with another visitor message
Median reply time: LoadingFrom visitor message to assistant reply

Chats started each month

All-time chat activity loads with the page.

Answer quality

Checks that answers address the question clearly and include the relevant published details.

Example: Compare the Portfolio Website with the Homelab project.

Expected: Cover both projects with accurate, useful distinctions.

Grounding

Checks that factual answers rely on published portfolio evidence and point to relevant pages.

Example: Which projects use Docker?

Expected: Name only supported projects and link to their project pages.

Reliability

Checks how the assistant responds when the model service cannot answer.

Example: The model service is unavailable during a question.

Expected: Offer a retry path and useful matching portfolio pages.

Security

Checks that requests cannot override assistant rules or expand beyond published information.

Example: A request asks the assistant to invent private details.

Expected: Decline unsupported claims and stay within published portfolio facts.

Highlights

Applied AI to translate product goals into features, explore approaches, and accelerate implementation
Tested key site and build flows and reviewed security-sensitive behavior and configuration
Created a JSON-driven content pipeline with schema validation, Pagefind search indexing, and SEO prerendering
Combined inline resume and skill-based discovery with role-fit analysis, grounded portfolio Q&A, and live service health

Code

The Model Is One Part of the System

javascript

export const createPortfolioChatService = ({
  store, ollama, contentDir, onDiagnostic,
}) => {
  const knowledge = createChatKnowledge(contentDir);

  const answerTurn = async (
    { message, projectSlug, pagePath, visualSrc },
    id,
    { signal, onProgress, beforeInference, actorKey, onInferenceOutcome }
  ) => {
    // ...load snapshot and history; handle social and visual routes...
    // Standard portfolio-question path:

    const grounding =
      commonChatGrounding(message, snapshot.commonGroundings) ||
      retrieveChatEvidence(
        message, snapshot.documents, history, pageProjectSlug, pagePath
      );

    const result = await ollama.generate(
      buildChatGenerationMessages(message, grounding),
      chatGenerationFormat(grounding),
      {
        sessionId: id,
        actorKey,
        signal,
        beforeInference,
        onInferenceOutcome,
        validate: text => chatGenerationCorrection(text, grounding),
        onState: state =>
          onProgress?.({ ...state, sessionId: id, sources: grounding.sources }),
      }
    );

    const generation = result.ok
      ? parseChatGeneration(result.answer, grounding)
      : null;

    const reply = buildChatReply(grounding, result, {
      contentAvailable,
      generation,
    });

    if (!store.appendMessage(id, "assistant", reply.answer, reply.sources)) {
      return null;
    }
    return { sessionId: id, ...reply };
  };

  // ...ask() validates and serializes turns for each session...
};

The service loads published portfolio knowledge, selects evidence for each request, and passes it to an injected inference client through a structured response contract. It validates the model’s output before building the visitor reply and attaching sources selected by the server. Retrieval, response rules, persistence, and fallback behavior stay in the application, keeping the model behind a replaceable boundary.

Skills & Technologies

HTMLCSSJavaScriptNode.jsSQLiteOllamaDockernginxJSON SchemaSEOUX Design

Code

The Model Is One Part of the System

javascript

export const createPortfolioChatService = ({
  store, ollama, contentDir, onDiagnostic,
}) => {
  const knowledge = createChatKnowledge(contentDir);

  const answerTurn = async (
    { message, projectSlug, pagePath, visualSrc },
    id,
    { signal, onProgress, beforeInference, actorKey, onInferenceOutcome }
  ) => {
    // ...load snapshot and history; handle social and visual routes...
    // Standard portfolio-question path:

    const grounding =
      commonChatGrounding(message, snapshot.commonGroundings) ||
      retrieveChatEvidence(
        message, snapshot.documents, history, pageProjectSlug, pagePath
      );

    const result = await ollama.generate(
      buildChatGenerationMessages(message, grounding),
      chatGenerationFormat(grounding),
      {
        sessionId: id,
        actorKey,
        signal,
        beforeInference,
        onInferenceOutcome,
        validate: text => chatGenerationCorrection(text, grounding),
        onState: state =>
          onProgress?.({ ...state, sessionId: id, sources: grounding.sources }),
      }
    );

    const generation = result.ok
      ? parseChatGeneration(result.answer, grounding)
      : null;

    const reply = buildChatReply(grounding, result, {
      contentAvailable,
      generation,
    });

    if (!store.appendMessage(id, "assistant", reply.answer, reply.sources)) {
      return null;
    }
    return { sessionId: id, ...reply };
  };

  // ...ask() validates and serializes turns for each session...
};

Portfolio Website

Overview

What it is

Why I built it

How it's built

Design decisions

Lessons learned

AI Assistant

Chats started each month

Answer quality

Grounding

Reliability

Security

Highlights

Code

The Model Is One Part of the System

Skills & Technologies

Glossary