Interactive Portfolio with Profile-Grounded Gemini Chat

sandromirr — Mon, 02 Feb 2026 05:24:59 +0000

--labels dev-tutorial=devnewyear2026

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

About Me

I’m Sandro, a Senior Software Engineer based in Tbilisi, Georgia. I specialise in backend-heavy systems with clean architecture, search, and messaging. Over 6+ years, I’ve shipped scalable .NET services, built search-heavy platforms, and taught programming fundamentals, algorithms, and data structures.

Portfolio

My portfolio runs on Cloud Run and pairs a React single-page layout with a Gemini-powered “Career Chat” that answers questions using my own profile data.

Embed your Cloud Run deployment here: https://portfolio-app-707441303278.europe-west1.run.app/

How I Built It

Stack: React 18 + Vite on the client; Node.js (ESM) + Express on the server; CSS for theming; Google Generative AI (Gemini) for the chat.
UX: Light/dark theme toggle with localStorage persistence; split layout with a chat panel and a resume panel; cards for About, Experience, Projects, Skills, and Contact.
Gemini “Career Chat”: The client posts messages and chat history to /api/career-gemini; the server injects my profile (from profile.json) into a system prompt so answers stay grounded in my data.
API: Express with CORS and JSON parsing; uses @google/generative-ai and the gemini-3-flash-preview model. In production, the server also serves the built React app from dist when present.
Config: .env expects GOOGLE_API_KEY and optional PORT (defaults to 8080). Profile content is editable in profile.json, so updating the portfolio data does not require code changes.

What I'm Most Proud Of

A grounded Gemini chat that only answers from my curated profile data—no fluff, just my real skills and projects.
A split layout that keeps the chat visible beside the resume cards, so you can explore and converse at the same time.
Light/dark theming that persists and stays legible, making the portfolio comfortable in any setting.
A single-container, Cloud Run–ready setup where Express serves both the API and the built client.
Data-only updates: I can change my story by editing profile.json without touching code.

Kendo React Crypto Tracker

sandromirr — Mon, 29 Sep 2025 02:30:14 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

I've built a comprehensive Cryptocurrency Tracker application that helps users monitor cryptocurrency prices, track their portfolio, and stay educated about the crypto market. The application provides real-time market data, price charts, portfolio management, and educational resources - all wrapped in a beautiful, responsive UI built with KendoReact components.

Key features include:

Real-time cryptocurrency price tracking
Interactive price charts with different timeframes
Portfolio management with profit/loss tracking
Educational resources for crypto beginners
Customizable theme and currency preferences
Responsive design that works on all devices

Demo

Live Demo

Screenshots

Home dashboard showing market overview and top cryptocurrencies

Portfolio tracking with profit/loss visualization

Educational resources section

GitHub Repository

KendoReact Components Used

Layout & Navigation

AppBar - Main navigation header
Card - Content containers throughout the app
PanelBar - For collapsible content sections
Dialog - Modal dialogs for user interactions

Data Display

Grid - For displaying cryptocurrency data tables
Chart - For price and market data visualization
Skeleton - Loading placeholders

Form Components

Button - All interactive actions
Input - Text input fields
NumericTextBox - Number input fields
Switch - Toggle switches in settings
DropDownList - Selection dropdowns
Form - Form handling and validation

Feedback & Utilities

Notification - User alerts and messages
SvgIcon - Consistent iconography
Fade - Smooth animations

Data Visualization

ChartSeries - Price trend visualization
ChartCategoryAxis - Time-based axis for charts
ChartValueAxis - Price/value axis for charts

Code Smarter, Not Harder prize category] AI Coding Assistant Usage

I used the AI Coding Assistant to help with:

Setting up the initial project structure with Vite + React + TypeScript
Implementing complex chart configurations for the price visualization
Optimizing performance for the cryptocurrency data grid
Creating responsive layouts that work across different screen sizes
Debugging TypeScript type issues with the KendoReact components

DEV Community: sandromirr