My submission to Google Cloud Run Portfolio Challenge

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

About Me

Hello! I'm Vimal Kumar, a dedicated Software Developer with a passion for building digital solutions that make a difference. With a bachelor's degree in computer science and years of hands-on experience, I specialize in creating robust web applications using modern technologies like React, Next.js, and Node.js.

In this portfolio i am trying to make it interactive and Playful,

• I have added a Robot which follow you in each section of Portfolio and narrate you some detail about that.
• A terminal mode is added which can be enable by clicking on robot or setting
• I have added Guide Mode which can be enable through setting icon or terminal (if Guide mode is active then Robot will Show each section of Portfolio by scrolling like a Guide.)
• I have added mini game (in 404 page and also in home page which can be enable through setting icon or terminal)

Portfolio

Live link

How I Built It

I am using Next.Js to build my Portfolio Website with help of antigravity

Framework: Next.js
Styling: Custom CSS
Icons: Lucide React
Animations: customized HTML5 Canvas
Language: JavaScript
Robot - SVG generated by Gemini and Customize in Figma to achieve different emotion of Robot

Here are GitHub Repo-

vimal-verma / vimalverma.in

Vimal's Interactive Portfolio

Welcome to my interactive portfolio built with Next.js! This project features a unique user experience with an interactive Robot Guide and a fully functional Terminal interface.

Features

🤖 Interactive Robot Guide

• Personal Assistant: A friendly robot that guides you through the portfolio.
• Voice Interaction: Uses Web Speech API to speak to visitors.
• Expressions: Dynamic facial expressions (happy, excited, sleepy, confused, love).
• Mini-Game: Catch falling energy bolts to charge the robot!
• Interactive: Follows mouse movement, reacts to clicks, and dances.

💻 System Terminal

• Command Line Interface: Access portfolio sections via commands.
• Commands:
  • help: List available commands.
  • about, projects, skills, experience: Navigate to sections.
  • game: Start the mini-game.
  • robot <expression>: Change robot expressions.
  • theme: Toggle dark/light mode.
  • message: Send a contact message.
  • joke: Hear a programming joke.

Getting Started

First, run the…

View on GitHub

What I'm Most Proud Of

• Robot expression and emotion, which I am managed to pull
• Clicking on Robot will open Terminal (you can type help to list all command)
• emit ❤️ emoji when cursor move around robot
• Robot get confusion if you move cursor too Fast
• Robot eyes follow Cursor
• Robot eyes and mouth change color in each section of portfolio
• Robot dance command in terminal - have fun

🤖 Interactive Robot Guide

• Personal Assistant: A friendly robot that guides you through the portfolio.
• Voice Interaction: Uses Web Speech API to speak to visitors.
• Expressions: Dynamic facial expressions (happy, excited, sleepy, confused, love).
• Mini-Game: Catch falling energy bolts to charge the robot!
• Interactive: Follows mouse movement, reacts to clicks, and dances.

💻 System Terminal (click on robot to activate)

• Command Line Interface: Access portfolio sections via commands.
• Commands:
  • help: List available commands.
  • about, projects, skills, experience:
    • Navigate to sections. (If terminal is not in full screen).
    • Show details within terminal in full screen mode
  • game: Start the mini-game.
  • robot <expression>: Change robot expressions.
  • theme: Toggle dark/light mode.
  • message: Send a contact message from terminal.
  • joke: Hear a programming joke.

Here are screenshot of some part of portfolio

Here is terminal example

Here is Lighthouse score

Thanks Dev and Google AI team.