DEV Community

Ajith joseph
Ajith joseph

Posted on

Beyond Static Portfolios: Building an AI-Powered Portfolio using Gemini 3, n8n Agents, Vector Search & .NET on Cloud Run

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

I'm Ajith Joseph, an AI Lead Engineer and Full Stack Developer based in Bengaluru with over 13 years of experience transforming enterprise software through innovative AI integration. My journey spans healthcare technology, mortgage software solutions, and cutting-edge AI/ML implementations. I specialize in bridging the gap between traditional enterprise systems and modern AI capabilities, with deep expertise in .NET Core, React, Angular, and AI-powered automation.

This portfolio represents my evolution from a full-stack developer to an AI solutions architect—showcasing projects that demonstrate my passion for building intelligent, scalable systems. As an active participant in AI challenges (Google Built-in AI Challenge 2025, Chrome AI Challenge 2024 - Top 100, IBM TechXchange Watsonx Hackathon - Top 100 Finalist), I wanted to create a portfolio that not only displays my work but also serves as a living example of AI integration in modern web development.

Portfolio


Direct Link

How I Built It

Tech Stack & Architecture

Frontend: React application designed with assistance from Google Gemini 3.0, featuring modern hooks, component architecture, and responsive design principles for seamless mobile and desktop experiences

Backend: .NET Core API providing robust, high-performance endpoints for portfolio data, contact forms, and integration with the AI chatbot infrastructure. Built with ASP.NET Core for production-grade scalability and security

Deployment: Google Cloud Run hosting both the React frontend and .NET Core backend in the asia-south1 region. Containerized using Docker for consistent deployment, with automatic scaling and cost-efficiency within Google's generous free tier (240,000 vCPU-seconds and 450,000 GiB-seconds per month)

AI Integration & Chatbot: The portfolio features an intelligent AI assistant built with n8n workflow automation and powered by Google Gemini Chat Model. This sophisticated chatbot serves as my AI representative, capable of:

  • Scheduling consultations with automatic Google Calendar integration
  • Answering questions about my technical expertise, projects, and experience
  • Collecting and sending contact inquiries via Brevo API integration
  • Providing personalized responses using Qdrant vector database for knowledge retrieval
  • Managing conversation context with a 30-message window buffer memory

Workflow Automation: n8n orchestrates the entire chatbot workflow with:

  • Chat Trigger webhook for real-time messaging between React frontend and backend
  • Google Gemini Embeddings for semantic search across my portfolio data
  • Qdrant Vector Store for efficient retrieval of detailed information about my skills and projects
  • Google Calendar Tools for availability checking and event creation
  • Google Sheets integration for appointment tracking and management
  • Custom HTTP Request tools for email notifications via .NET Core API endpoints

Development Tools: Visual Studio Code, Docker for containerization, Google Cloud SDK, and modern CI/CD practices

Design Decisions

I leveraged Google Gemini 3.0 extensively during the design and development process, using AI-assisted code generation for the React frontend components and layout design. This allowed me to rapidly prototype and iterate on the UI while maintaining clean, professional aesthetics:

  • AI-Designed Frontend: Used Google Gemini 3.0 prompts to generate React components, styling patterns, and responsive layouts. The AI helped create a modern, visually appealing portfolio structure that highlights my projects effectively while maintaining accessibility and performance.

  • Full-Stack Architecture: The .NET Core backend provides RESTful APIs that serve portfolio data, handle contact form submissions, and act as a proxy for secure API integrations. This separation of concerns ensures maintainable, scalable architecture following enterprise best practices.

  • Interactive AI Personal Assistant: The standout feature is a fully automated chatbot that greets visitors, asks for their name, and provides personalized assistance throughout the conversation. It can schedule consultations, answer technical questions, and send direct messages to me—all powered by Google Gemini and n8n's LangChain integration, communicating with the .NET Core backend.

  • Project Showcase: Detailed sections highlighting 14+ enterprise and personal projects spanning backend APIs, full-stack applications, and AI/ML implementations across healthcare, e-commerce, government, and retail sectors.

  • Intelligent Knowledge Retrieval: Using Qdrant vector database with Google Gemini embeddings, the chatbot can retrieve relevant information from my entire portfolio, work experience, certifications, and technical expertise to answer visitor queries accurately.

  • Real-Time Appointment Scheduling: The AI assistant checks my Google Calendar availability in real-time, books appointments (Monday-Friday, 9 AM - 7 PM IST with 48-hour advance notice), and automatically stores details in Google Sheets for tracking.

  • Performance Optimization: Cloud Run's automatic scaling, container optimization, and global CDN distribution ensure fast load times and high availability worldwide.

  • SEO and AI Search Optimization: Implemented strategies to ensure discoverability across traditional search engines (Google, Bing) and AI platforms (ChatGPT, Claude, Gemini, Perplexity).

Development Process

Frontend Development with Gemini 3.0:
I used Google Gemini 3.0 as my AI pair programmer throughout the React development process. Key prompts included:

  • "Generate a responsive React portfolio hero section with modern design"
  • "Create a projects showcase component with filtering and search"
  • "Design a professional about section highlighting technical skills and experience"
  • "Build a contact form component with validation and API integration"

This AI-assisted approach accelerated development while maintaining code quality and modern React best practices.

Backend Development:
Built a .NET Core 8.0 Web API with:

  • RESTful endpoints for AI chatbot using Gemini(GET /api/AI, GET api/AICharacter/chat routed via cloudflare workers)
  • Secure authentication and CORS configuration for frontend integration
  • Integration middleware for n8n webhook communication
  • Logging and error handling for production reliability
  • Dapper for data persistence

n8n Chatbot Workflow:
The sophisticated agent architecture includes:

  1. Chat Trigger Node: Webhook-based trigger that initiates conversations with a friendly welcome message
  2. Conditional Logic: IF node checks for user input before routing to the AI agent
  3. AI Agent with Tools: The core agent uses Google Gemini model with multiple specialized tools:
    • About Me Tool: Vector store retrieval from Qdrant for answering questions about my background
    • Check Availability Tool: Google Calendar API integration for real-time availability checking
    • Create Event Tool: Google Calendar API for booking confirmed appointments
    • Append Appointment Details Tool: Google Sheets API for storing appointment records
    • Get Booking Details Tool: Retrieves existing appointment information for rescheduling
    • Reschedule Appointment Tool: Updates both Google Sheets and Google Calendar events
    • Update Event Tool: Modifies calendar events with new timings
    • Contact Me Tool: HTTP request tool that sends formatted emails via Brevo SMTP API
  4. Memory Management: Window Buffer Memory maintains conversation context across 30 messages
  5. Response Handler: Webhook responder that delivers AI agent's responses to the React frontend

Docker Containerization:
Created a multi-stage Dockerfile for the .NET Core application:

# Build React frontend
FROM node:18 AS frontend-build
WORKDIR /app/client
COPY client/package*.json ./
RUN npm install
COPY client/ ./
RUN npm run build

# Build .NET Core backend
FROM mcr.microsoft.com/dotnet/sdk:8.0 AS backend-build
WORKDIR /app
COPY *.csproj ./
RUN dotnet restore
COPY . ./
RUN dotnet publish -c Release -o out

# Final runtime image
FROM mcr.microsoft.com/dotnet/aspnet:8.0
WORKDIR /app
COPY --from=backend-build /app/out .
COPY --from=frontend-build /app/client/build ./wwwroot
EXPOSE 8080
ENV ASPNETCORE_URLS=http://+:8080
ENTRYPOINT ["dotnet", "AjithJosephPortfolio.dll"]
Enter fullscreen mode Exit fullscreen mode

Cloud Run Deployment:
Deployed using Google Cloud SDK with the required challenge label:

# Build and push container to Google Container Registry
gcloud builds submit --tag gcr.io/[PROJECT-ID]/ajith-joseph-portfolio

# Deploy to Cloud Run with challenge label
gcloud run deploy ajith-joseph-portfolio \
  --image gcr.io/[PROJECT-ID]/ajith-joseph-portfolio \
  --region asia-south1 \
  --platform managed \
  --allow-unauthenticated \
  --labels dev-tutorial=devnewyear2026 \
  --port 8080 \
  --memory 512Mi \
  --cpu 1
Enter fullscreen mode Exit fullscreen mode

The n8n workflow was developed locally and deployed to my self-hosted n8n instance, exposing webhook endpoints that the React frontend (served by .NET Core) consumes for chatbot interactions.

What I'm Most Proud Of

AI-Assisted Development with Gemini 3.0: Using Google Gemini 3.0 as my development partner exemplifies the future of software engineering. The AI helped generate clean, modern React components while I focused on architecture, business logic, and integration—demonstrating how AI tools augment (not replace) developer expertise. This submission truly embodies "built with Google AI."

Production-Grade Full-Stack Architecture: Combining React frontend with .NET Core backend on Google Cloud Run showcases enterprise-level technical depth. The containerized deployment, RESTful API design, and scalable infrastructure reflect 13+ years of professional experience building mission-critical systems for healthcare, government, and e-commerce clients.

Sophisticated AI Personal Assistant: The n8n-powered chatbot doesn't just answer questions—it's a complete personal assistant handling scheduling, knowledge retrieval, and contact management. Using Google Gemini with LangChain tools and Qdrant vector database integration, it provides contextually relevant responses while maintaining conversation memory. The personalization layer creates an engaging, human-like experience that showcases practical AI integration beyond simple demos.

Intelligent Tool Orchestration: The AI agent seamlessly coordinates multiple tools—checking calendar availability, creating events, storing data in sheets, sending emails, and retrieving vectorized knowledge—all through natural conversation. This demonstrates real-world agentic AI capabilities, proving how AI can augment personal productivity and client engagement.

Comprehensive Technical Showcase: The portfolio highlights over a decade of diverse achievements—from healthcare workflow automation to mortgage software integrations. Recent wins in competitive AI challenges (Google Chrome Built-in AI Challenge 2024: TabMaster AI, TextFlow Dev, PDF Chat Assistant; IBM TechXchange Watsonx Hackathon - Top 100) demonstrate cutting-edge AI innovation capabilities alongside proven enterprise delivery.

Knowledge Management Innovation: Using Qdrant vector database with Google Gemini embeddings creates a powerful semantic search system. The chatbot instantly finds relevant information from my entire professional history, technical skills, project portfolio, and expertise areas—providing accurate, contextual responses to visitor queries in real-time.

Seamless Integration Ecosystem: This portfolio demonstrates expertise in connecting multiple platforms—Google Cloud Run, .NET Core APIs, React frontend, n8n workflows, Google Calendar API, Google Sheets API, Qdrant vector database, Brevo email service, and Google Gemini AI—into a cohesive, production-ready experience.

This portfolio represents more than just a collection of projects—it's a testament to my commitment to leveraging cutting-edge technologies like Google AI, modern cloud infrastructure, and enterprise-grade architecture to create meaningful, user-centric experiences. The journey from Gemini 3.0-assisted design to Cloud Run deployment with intelligent workflow automation exemplifies the modern AI-first, full-stack development approach I bring to every project.

The AI assistant itself becomes a conversation starter, demonstrating to potential clients and collaborators not just what I've built, but how I think about solving problems with AI—making intelligent systems accessible, practical, and genuinely helpful.

Top comments (0)