arrow_backBack to Portfolio

Rakesh
Rajan Portfolio.

A freelance portfolio case study built with custom page transitions, GSAP-driven motion, and a secure contact flow with SMTP + OTP verification.

1 MonthTimeline
100%Client Satisfaction
SoloTeam Size
FreelanceRole
Visit PortfolioLearn More

Overview

A freelance portfolio case study built with custom page transitions, GSAP-driven motion, and a secure contact flow with SMTP + OTP verification.

Key Focus:Features an interactive AI assistant powered by Vercel SDK and Gemini API to assist visitors.

Delivered a premium, highly interactive portfolio website with modern AI capabilities and secure inbound lead generation.

The Setup Bottleneck

Balancing a cinematic experience with reliable inbound lead generation.

Current Challenge

The portfolio needed to feel cinematic while keeping interactions fast and secure enough to trust inbound lead submissions.

  • ✗ Clunky animations
  • ✗ Spam submissions
  • ✗ Boring static interactions

The Solution

Implemented a transition-first Next.js frontend with GSAP animation choreography and a contact system backed by SMTP delivery plus OTP verification.

  • ✓ GSAP choreography
  • ✓ Resend Mailing + OTP security
  • ✓ Context-aware AI Assistant
AI Integration

Intelligent Conversational Agent

Integrated an advanced AI assistant using Vercel SDK and the Gemini API, enabling real-time, context-aware conversations for portfolio visitors.

  • ✓Vercel AI SDK for robust streaming and state management
  • ✓Google Gemini API for intelligent, natural language responses
  • ✓Context-aware memory and portfolio-specific knowledge
  • ✓Agentic tool calling with complete website navigation and contact access
Intelligent Conversational Agent

Client Testimonial

"I had Shiv work on my personal portfolio website, and it was a good experience seeing him take ownership of the project from implementation to refinement. I initially shared the overall requirements and later gave him feedback on some of the UI and interaction details. He was receptive to the feedback and made the necessary changes rather than simply sticking to the first version. There were some delays along the way as he was balancing the work with other tasks, but he ultimately followed through and delivered the website to a good standard. What I appreciate about Shiv is that he is willing to take feedback, learn from it, and improve his work. He also showed good hands-on knowledge of modern frontend technologies and was able to turn the requirements into a functional and polished portfolio. For someone early in his career, I think his willingness to learn, take ownership, and iterate based on feedback are some of his strongest qualities. I'm happy to recommend him as a developer who has the potential to grow quickly with the right opportunities and mentorship."
Rakesh Rajan

Product Gallery

Rakesh Rajan Portfolio View 1
Rakesh Rajan Portfolio View 2
Rakesh Rajan Portfolio View 3
Rakesh Rajan Portfolio View 4

Technical Implementation

Engineering approach and architecture decisions.

Page Transitions

Implemented Barba.js style page transitions in Next.js using a custom layout router orchestrator and GSAP timelines.

GSAP Motion System

Choreographed animations leveraging GSAP ScrollTrigger and React context for a unified, cinematic scrolling experience.

Secure OTP Contact

Ensured lead validity by wrapping the contact flow in a custom OTP verification step before forwarding via SMTP.

AI SDK Integration

Built a resilient streaming conversational interface using the Vercel AI SDK to gracefully handle network interruptions.

Gemini API Engine

Tapped into Google's Gemini models for rapid, highly-contextual responses regarding Rakesh's portfolio history.

Next.js Architecture

Employed the App Router for maximum performance, edge-caching API routes, and strict Server/Client component boundaries.

Technology Stack

Frontend

Next.js, React, Tailwind

Animation

GSAP

AI

Vercel SDK, Gemini API

Security

Resend + OTP