Beyond Simple Showcases: An Accessible, AI-Powered Portfolio

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

About Me

Hi! I'm Safvan, a Full Stack Developer who believes that "flashy" shouldn't mean "inaccessible." While exploring ideas for this challenge, I saw many incredible 3D worlds and game-like portfolios. They are amazing, but I wanted to take a different approach.

I built a portfolio that marries premium aesthetics with rigorous web standards aiming for 100/100 Lighthouse scores, full keyboard accessibility, and a seamless mobile-first experience. But I didn't stop there. I integrated Google's Gemini AI to create a truly helpful assistant, not just a chatbot, that helps visitors navigate my work naturally.

Portfolio

Try It: https://portfolio-i5s2dnekhq-uc.a.run.app/

View Source Code: https://github.com/Safvan-tsy/portfolio-a

How I Built It

I leveraged the full power of the modern web ecosystem, orchestrated by Google's Antigravity environment. This wasn't just code generation; Antigravity acted as my technical co-founder. Using advanced models like Gemini 3 Pro and Claude Opus 4.5, it handled the entire architectural process - from selecting the optimal tech stack to writing the production-ready Cloud Run deployment scripts.

Tech Stack

• Core: Astro (for blazing fast static content + SSR for API)
• Styling: Tailwind CSS v4 (utility-first, premium glassmorphism design)
• Deployment: Google Cloud Run (containerized via Docker)
• AI: Google Gemini API via Node.js adapter

The AI Implementation

I didn't want a generic chatbot. I built a Context-Aware AI Guide.

• Intent Engine: The AI analyzes user queries ("Show me your React work") and deterministically navigates the user to the relevant section (Projects) while highlighting the specific tech stack. It acts, it doesn't just talk.
• Voice Interaction: Fully implemented voice input using the Web Speech API, allowing users to navigate the site hands-free. (Note: This feature is currently supported in Chrome, Edge, and Safari).
• Safety: The prompt engineering ensures the AI never hallucinates experience I don't have. It sticks strictly to the structured data provided in my portfolio.

Curious about the Prompts? I've documented the prompts used to generate this project here: View Prompts on Notion

What I'm Most Proud Of

While many portfolios strive for "cool," mine strives for Professional Grade Quality.

1. Accessibility & Standards (The "Invisible" Work)

I focused heavily on the things that often get skipped especially in this vibe coding era:

• Semantic HTML: Proper heading hierarchies and landmarks.
• Keyboard Navigation: The entire site, including the AI Assistant, is fully focus-manageable.
• Reduced Motion: The premium animations respect user preferences for reduced motion (prefers-reduced-motion media queries).
• SEO: Optimization with Sitemap, OpenGraph tags, and structured data.

2. The "New Year, New You" AI Experience

Top-tier portfolios in 2026 shouldn't just be static pages to read. They should be interactive.
My Gemini integration turns the portfolio into a conversation:

Context-Aware Q&A:

User: "Do you have experience with Vue.js?"
Portfolio: "Yes, Muhammed Safvan has experience with Vue.js. He is currently building complex UI components using Vue.js and TailwindCSS at Armino Technologies."

Smart Navigation & Action:

User: "How can I contact him?"
Portfolio: "Sure! Here's how you can reach Muhammed Safvan:

📧 safvanmanikulath@gmail.com
📍 Kozhikode, India
✅ Available for work

Taking you to Contact in 2s... [Cancel]"

This project represents the "New Me" as a developer: one who builds beautiful things that work for everyone, powered by the next generation of AI tools.