Building My AI-Powered Portfolio: A Journey Through Modern Web Development

Welcome to my portfolio! I'm excited to share the story behind gokulakrishnan.dev - a modern, AI-powered portfolio that showcases my work as an AI Engineer and Researcher.

The Vision

When I set out to build my portfolio, I wanted to create something that truly represents who I am: an AI Engineer passionate about Machine Learning, Large Language Models, and creating exceptional user experiences. The goal was to build a portfolio that's not just a showcase of my work, but an interactive experience that demonstrates my technical skills.

Key Features

🤖 AI-Powered Chatbot (Tessa)

One of the standout features of this portfolio is Tessa, my AI assistant powered by Google Gemini. Tessa helps visitors learn about my background, projects, skills, and achievements in a conversational way. Built with:

• Google Gemini API for intelligent responses
• React for smooth, interactive UI
• Real-time conversation handling with proper context management
• Error handling and timeout protection for reliability

Tessa can answer questions about my education at Hindustan University Chennai, my role as Technical Lead of Blue Screen Programming Club, my projects, awards, and more.

🎨 Modern Tech Stack

This portfolio is built with cutting-edge technologies:

• Next.js 16 (App Router) - For server-side rendering and optimal performance
• TypeScript - For type-safe, maintainable code
• Tailwind CSS v4 - For modern, responsive styling
• React 19 - For the latest React features
• shadcn/ui - For beautiful, accessible components

📦 Component Registry

I've created a custom component registry system that allows developers to easily install and use my components via the shadcn CLI. This includes:

• Reusable UI components
• Custom React hooks
• Pre-built blocks and sections
• Utility functions

All components are compatible with Tailwind CSS v4 and React 19, ensuring they work seamlessly in modern projects.

📝 Blog System

The portfolio includes a full-featured blog system with:

• MDX support - Write blog posts with Markdown and React components
• Syntax highlighting - Beautiful code blocks
• Dynamic OG images - Auto-generated social media previews
• RSS feed - For subscribers
• Search functionality - Easy content discovery

🎯 Portfolio Sections

The portfolio is organized into clear sections:

• Overview - Quick access to contact information and key details
• About - My background and journey
• GitHub Contributions - Visual representation of my coding activity
• Tech Stack - Technologies I work with
• Blog - My thoughts and articles
• Experiences - Work history and education
• Projects - Featured projects with detailed descriptions
• Awards - Achievements and recognition
• Certifications - Professional credentials

Featured Projects

Gokulakrishnan.dev Portfolio

This very portfolio! Built with Next.js, TypeScript, and Tailwind CSS, featuring:

• AI-powered chatbot integration
• Component registry system
• Blog with MDX support
• Responsive design
• SEO optimization

Penguin JokeBot Custom Voice

A fun AI project built with Python and NLP libraries:

• Joke-based interactions with dynamic responses
• Custom-recorded voice for replies
• Penguin persona for extra charm
• Great blend of AI, humor, and creativity

Built in collaboration with Priyadarsni JK.

Design Philosophy

The design follows a minimalist, pixel-perfect approach:

• Clean & Modern - Minimalist interface with attention to detail
• Light/Dark Themes - Seamless theme switching with system preference support
• Accessibility - Built with accessibility in mind
• Performance - Optimized for speed and efficiency
• Mobile-First - Responsive design that works on all devices

Technical Highlights

Performance Optimizations

• Image Optimization - Using Next.js Image component
• Code Splitting - React.lazy() for optimal bundle sizes
• Static Generation - Pre-rendered pages for fast loading
• API Route Optimization - Efficient chatbot API handling

Developer Experience

• TypeScript - Full type safety
• ESLint & Prettier - Code quality and formatting
• Component Registry - Reusable component system
• Hot Reload - Fast development experience

My Journey

As a Final Year Student pursuing a Bachelor's of Technology in Computer Science and Engineering, specialized in Artificial Intelligence and Data Science at Hindustan University Chennai, I've been:

• Freelancing for 3 years - Delivering 40+ projects in web and full-stack development
• Building AI Solutions - Focused on AI agents, chatbots, and voicebots for the past two years
• Leading Technical Teams - Currently Technical Lead of Blue Screen Programming Club (2024-2025)
• Organizing Events - Hosted Innothon 2025 Codearena with 1000+ participants
• Research & Publications - Published research at IEEE International Conference in Singapore, receiving the Best Paper Award

Awards & Recognition

• Best Paper Award - IEEE International Conference, Singapore (2025)
• 4th Place - OpenAI Academy X NxtWave Buildathon (1000 participants)
• Second Runner-Up - IBM Mindscape Hackathon

What's Next?

I'm always working on new projects and exploring the latest in AI and web development. Some areas I'm excited about:

• Advanced AI Agents - More sophisticated conversational AI
• LLM Integrations - Exploring new ways to leverage Large Language Models
• Component Library - Expanding my component registry
• Open Source - Contributing to the developer community

Connect With Me

I'm always excited to collaborate on innovative AI projects! You can:

• Visit my portfolio
• Check out my GitHub
• Connect on LinkedIn
• Download my CV/Resume

Conclusion

Building this portfolio has been an incredible learning experience. It combines my passion for AI, modern web development, and creating exceptional user experiences. Every feature, from the AI chatbot to the component registry, represents my commitment to quality and innovation.

If you're interested in building something similar or want to collaborate on a project, feel free to reach out. I'm always open to discussing new ideas and opportunities!