Beyond Simple Showcases: An Accessible, AI-Powered Portfolio

Source: Dev.to

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. I also integrated Google’s Gemini AI to create a truly helpful assistant that helps visitors navigate my work naturally.

Portfolio

Try It:

View Source Code:

How I Built It

I leveraged the full power of the modern web ecosystem, orchestrated by Google’s Antigravity environment. Antigravity acted as my technical co‑founder, using advanced models like Gemini 3 Pro and Claude Opus 4.5 to handle the entire architectural process—from selecting the optimal tech stack to writing production‑ready Cloud Run deployment scripts.

Tech Stack

• Core: Astro – 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 (e.g., “Show me your React work”) and deterministically navigates the user to the relevant section 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 hands‑free navigation. (Supported in Chrome, Edge, and Safari.)

Safety

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? See the documentation on Notion: View Prompts on Notion

What I’m Most Proud Of

1. Accessibility & Standards (The “Invisible” Work)

• Semantic HTML: Proper heading hierarchies and landmarks.
• Keyboard Navigation: The entire site, including the AI Assistant, is fully focus‑manageable.
• Reduced Motion: Animations respect user preferences via prefers-reduced-motion media queries.
• SEO: Optimized with sitemap, OpenGraph tags, and structured data.

2. The “New Year, New You” AI Experience

Top‑tier portfolios in 2026 should be interactive, not just static pages. 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:

📧 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.