Nicanor Korir

Posted on Jan 29

From Kenya to Germany - Building an interactive robotics portfolio

#devchallenge #googleaichallenge #portfolio #gemini

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 Nicanor Korir, a techie who grew up in the highlands regions in Kenya, fell in love with computers, and became a software engineer. Looking back, I would say Steve Jobs was right, you can only connect the dots while looking backwards.

My tech journey is actually an interesting one. I first interacted with computers at the age of 18, after high school. With the break after high school, I decided to learn basic computer skills to just be familiarised with things like using a computer(this was actually true). It was interesting, actually, it was so awesome that I spent a lot of hours just trying to figure out different things. That's when I decided to pursue something computer-related in my degree, and this led me to computer science.

Studying computer science in my first and second years was hard since everything was new except maths and physics, but I enjoyed it. In my third year i focused on software more, and I fell in love with software engineering, and the rest is history.

Fast forward to today, I've worked with different clients in different industries, solving human problems through technology. Currently, I am doing my master's studies in AI and robotics, and with the current wave in the tech trend,s there have been a lot of things for me to learn and understand about intelligent and interactive systems for the future.

As a part-time student, I am working as a CTO at Alma, a startup backed by AI Nation at Berliin, Germany. This is where I've put in my skills as a leader, to help build and establish a solution in the social lives of the GBV survivors and help them maneuver their daily lives.

This portfolio is a way for me to share my tech journey in a way that tells more about me and how the end user will associate with me.

My portfolios have been changing with time. This Dev Challenge came at the right time, as I've been thinking of setting myself up for my next transition from a student to a professional.

Portfolio

Note: If the embed doesn't load, visit nicanor-170395639051.europe-west3.run.app directly.

How I Built It

The Tech Stack

Layer	Technology	Why
Framework	Next.js 16 (App Router)	Server components, streaming, edge-ready
AI	Gemini 2.0 Flash	Fast, accurate, cost-effective
3D	React Three Fiber	Cyberpunk vision scanner aesthetic
Animation	Framer Motion	Smooth, physics-based transitions
State	Zustand	Lightweight, persists user preferences
Styling	TailwindCSS 4	Design tokens, responsive by default
Deployment	Google Cloud Run	Great DX

Deployment

I played around with Google Cloud Run, it had been a while since I'd explored the Google Cloud environment.

First, I checked out all the services available with the free $300 credits. Then I dove into the Cloud Run console and CLI. I always love Google Cloud docs, there are both CLI gcloud and console guides. My first deployment through gcloud cli landed in us-central1:

First authentication and setting the project id to and from Google Cloud

# Authenticate with Google Cloud
gcloud auth login

# Set your project
gcloud config set project YOUR_PROJECT_ID

Then deployment on the current portfolio folder:

gcloud run deploy nicanor-portfolio \
  --source . \
  --region us-central1 \
  --allow-unauthenticated \
  --set-env-vars "GEMINI_API_KEY=api_key,NODE_ENV=production,NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXX" \
  --labels dev-tutorial=devnewyear2026 \
  --memory 512Mi \
  --cpu 1

But then I thought, why am I deploying to the US when I'm sitting in Berlin? So I switched to the closest region, Frankfurt (europe-west3):

gcloud run deploy nicanor-portfolio \
  --source . \
  --region europe-west3 \
  --set-env-vars "GEMINI_API_KEY=,NODE_ENV=production,NEXT_PUBLIC_GA_MEASUREMENT_ID=" \ 
  --labels dev-tutorial=devnewyear2026

The latency difference was noticeable.

I got excited and tried to set up a custom subdomain (nicanor.mydomain.com - this is just an example, I can't reveal the unfinished configuration yet). Unfortunately, Frankfurt doesn't support Cloud Run domain mapping 🙃

So I had two options:

Switch back to a different region that supports domain mapping
Update my DNS configurations manually

Eventually, I decided to roll with the Cloud Run URL directly. I'll configure the subdomain later

How I Used Gemini

Backstory, my initial coding agent was Claude, especially the ui and getting the first parts. I had more issues, especially with integrating gemini3 since claude doesn't have much context on gemini3 but gemini2.0-flash, so I had to switch to using gemini as my coding agent on the terminal

Instead of dumping information and hoping visitors find what they need, I decided to go for an interactive and surprise format. The first thing you see is a question:

"What brings you here?"

Check my work → I'll show you metrics, experience, and achievements
Building something? → Let me show you my technical leadership
Fellow engineer? → Let's dive into the architecture
Just curious? → Welcome! Here's my story from Kenya to Berlin
Something else? → Tell me, and Gemini will figure out what's relevant

Once a user chooses a path, then Gemini generates the nodes and a summary of my journey so that the user gets a summary about me. Also, I had a list of common pre-generated questions that I had compiled, and Gemini uses this for the nodes(summary road map) and for the intelligent chatbot.

The AI Architecture

For my llm(Gemini) usage, I didn't want the traditional roadmap, like the server-client architecture

User asks a question → Call Gemini → Return response

Simple, but expensive. Every visitor burns API credits

I built a hybrid chat system that gives a better response to the user. Once a user opens a chatbot, they get greeted with a message from gemini and then the user can use the pre-generated questions or type their own questions. The response will either be fetched from the pre-generated JSON data or from Gemini. This is the user flow for the chatbot interaction

I initially started with gemini-2.0-flash, which worked so well, and then I later decided to switch to gemini-3.0-flash-preview to try out gemini3, especially the Intelligence and intelligence. It worked well, actually, and I am happy with my progress

Intent Analysis

When someone types "something else" and enters their own context, like "I'm researching trauma-informed AI" or "need a keynote speaker", Gemini does something clever like this in the code:

// Actual code from my intent analyzer
const systemPrompt = `Analyze this visitor's intent and:
1. Classify their primary interest
2. Suggest which portfolio sections are relevant
3. Recommend a visual theme (robotics/research/business)
4. Generate a personalized welcome message`;

Here, someone researching AI ethics gets routed to my Alma project (trauma-informed AI for GBV survivors), and someone looking for a speaker sees my events calendar and media kit.

Same portfolio. Personalized experience for different users

The Vision System: Because Why Not?

I'll be honest, the 3D robot-eye scanner thing that greets you? It started as a joke. I was working on face look detections and tracking for a specific robotic solution, and I got hooked on how the image analysis happens. That's when I decided to also experiment with almost the idea on the ui website, and my portfolio was the best.

I built a cyberpunk-inspired "vision system" that:

Scans my current image (not really, but it looks like it does)
Shows "HUMAN DETECTED" with confidence scores
Adapts its detection labels based on your chosen path

Is it necessary? No.
Is it memorable? I hope so

Hallucination Prevention

AI portfolios have a problem: they lie. Ask any LLM about a random developer, and it might confidently describe projects that don't exist.

I implemented multiple safeguards:

Grounded System Prompt: 170+ lines of verified facts about my career, with explicit "NEVER claim" instructions
Pre-flight Checks: Before returning any response, I scan for:
- Placeholder text ([insert link])
- Email addresses (privacy)
- False company claims ("worked at Google/Meta/etc")
Exact Link Enforcement: Every URL in the system prompt is real. Gemini is instructed to use them verbatim or not at all.

What I'm Most Proud Of

1. Near-Perfect Lighthouse Scores

I'm genuinely proud of the performance optimization. Here are the actual Lighthouse results:

Metric	Desktop Score	Mobile Score
Performance	99	93
Accessibility	96	96
Best Practices	96	96
SEO	100	100

And the Core Web Vitals:

First Contentful Paint: 0.3s
Largest Contentful Paint: 0.6s
Total Blocking Time: 10ms
Cumulative Layout Shift: 0
Speed Index: 1.0s

2. The Personalization Actually Works

With the pre-generated JSON data, I restructured the prompt as per my story and aligned the ui/ux for storytelling. I tested the personalization with a friend of mine, and she was happy that it was personalized to tell more about me. I am happy about the integration of Gemini and how it intelligently works to give personalised information to the users

3. The API Efficiency

Running Gemini for every interaction would cost a fortune, so I simulated a temporary AI memory through JSON data. My hybrid approach means:

Common questions: 0ms latency, 0 API cost
Complex questions: Full Gemini intelligence
Estimated: 0.2 API calls per visitor(tested by tests and manual tests)

4. The Story It Tells

The goal of this portfolio is to tell my Story about my career and my background. The theme tells what I am currently working in and someone can relate to that. Right from when the user enters the site to the end, it tells my story

It's like the latest chapter in a book I could be writing that might end in suspense.

5. It's Actually Useful

I started as a challenge, but now I am going to be using it fully as my portfolio and to tell my stories and relate with any of my audience.

6. UI/UX

I am happy about the robotic(computer vision) theme in general. Right from the mouse, vision scanner, the 3D on the hero section, and the map nodes to tell different story paths for those who want to explore different routes of my journey

Try It Yourself

The code is open source. Feel free to fork it and build your own intent-aware portfolio(you might want to remove most of my data, I'll structure it better for open-source):

GitHub: github.com/nicanor-korir/portfolio

Live Demo: nicanor-170395639051.europe-west3.run.app

Key files to explore: