DEV Community

Beyond Simple Showcases: An Accessible, AI-Powered Portfolio

Muhammed Safvan on February 02, 2026

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

Read full post

ANIRUDDHA ADAK • Feb 2

Perfect!

syed Amjad • Feb 2

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.

Muhammed Safvan • Feb 2

Thanks

mani • Feb 2 • Edited

Most AI-gen sites I see skip SEO, semantic HTML, and accessibility entirely. This is how you use AI responsibly to enhance quality, not skip learning/fundamentals.

Muhammed Safvan • Feb 2

💯 valid point

mani • Feb 3 • Edited

i checked lighthouse metrics for your website. it has 100/100 in SEO and best practices and >95 for accessibility . which is impressive for a vibecoded site. most people forget/ignore the fundamentals when they vibecode, its good that you sticked to basics that made you standout from crowd.

Muhammed Safvan • Feb 3

Thanks

Raneem K • Feb 2

crazy to see how much Antigravity handled - from stack selection to deployment scripts

Hello Aura • Feb 2

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

Sreehari R • Feb 2

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

Anjala Binth Rafeeq K • Feb 2

Smart navigation was a good one, nice try 👍🏼

Muhammed Safvan • Feb 2

Thanks

Pranav S • Feb 2

The Best!

Pranav • Feb 2

Great Work!

Comment hidden by post author - thread only accessible via permalink

Larissa Cristina • Feb 3

Hi Muhammed! Congrats on the portfolio, it looks great. I did a quick keyboard navigation test and noticed a few accessibility barriers you might want to adjust:

Static elements: The Skills Cards (and Recent Projects) seem to be plain divs with hover effects, so they don’t receive keyboard focus. Because of that, screen readers skip them entirely.
Ambiguous links: In the “Recent Projects” section, the links only say “View Details”. Unlike the Articles section (where the title itself is clickable), I lose context here, like the details of what? A more descriptive label or an aria-label would help a lot.
Project pages: On these pages, navigation jumps straight to the footer links and skips the main descriptive content. It might be worth checking the semantics or DOM order so screen readers encounter the text first. As a quick tip: I often use the WAVE Web Accessibility browser extension. It’s really helpful for quickly spotting structure, contrast, and semantic issues. I really appreciate your effort to prioritize accessibility in your project, something many developers unfortunately overlook. It’s refreshing to see someone building with inclusion in mind. Keep it up! 🙌

Muhammed Safvan • Feb 4

Thanks, your review is addressed.

Some comments have been hidden by the post's author - find out more