DEV Community

Cover image for Beyond Simple Showcases: An Accessible, AI-Powered Portfolio
Muhammed Safvan
Muhammed Safvan

Posted on

Beyond Simple Showcases: An Accessible, AI-Powered Portfolio

New Year, New You Portfolio Challenge Submission

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.

Top comments (5)

Collapse
 
btc_2829ba6504799d6802 profile image
syed Amjad

It's refreshing to see someone focus on keyboard navigation and semantic HTML instead of just flashy 3D effects that break on mobile. This is what professional engineering looks like.

Collapse
 
safvantsy profile image
Muhammed Safvan

Thanks

Collapse
 
hello_aura_02a4b07231b30f profile image
Hello Aura

This is a great example of how to use Google AI tools responsibly—no hallucinations, no fake experience, just structured data + intelligence. Clean work.

Collapse
 
sreehari_r_ec362845f5c3d4 profile image
Sreehari R

This is what professional-grade portfolios should look like in 2026. Accessibility + performance + AI that actually does something 👏 Massive respect.

Collapse
 
aniruddhaadak profile image
ANIRUDDHA ADAK

Perfect!