Next.jsTypeScriptTailwind

Portfolio Flyrank

A personal brand website with Home, Work, About, Contact pages and an embedded AI chat widget.

Project Overview

Portfolio Flyrank is a capstone portfolio website built with Next.js, TypeScript, and Tailwind. It features a home hero, work case study page, bio-focused about page, contact links, and a floating AI chat widget powered by a Gemini-backed /api/chat route.

Problem

Many portfolios lack a way for visitors to ask questions directly or explore the developer’s work through a conversational experience.

Solution

A polished personal site with a strong brand narrative, case study showcase, and an AI chat widget that answers visitor questions on every page.

Key Features

Home hero with role, pitch, and CTA

Work page case study for Weather Dashboard

About page with bio, tech stack, and availability

Contact page with email, GitHub, and LinkedIn links

Floating AI chat widget across all pages

Technology Stack

Next.jsTypeScriptTailwind CSSNode.jsGemini API

Challenges

Building a cohesive personal brand voice across four site sections
Embedding an AI chat experience without disrupting the portfolio flow

Lessons Learned

AI chat can enhance engagement when it’s integrated naturally
A strong landing page makes project case studies more compelling

Need something similar?

I design and build systems like this — from web and mobile apps to IoT dashboards. Let's talk about your project.

Start a Project