I'm participating in Google AI's 'New Year, New You Portfolio Challenge'
Project Goal:
Rebuild my existing developer portfolio(./safvan.live) from scratch as a world-class, production-grade portfolio website optimized for performance, SEO, accessibility, and future Gemini AI integration.
- CORE OBJECTIVES
You are tasked with generating a completely new portfolio website for me with the following priorities:
The final output must be:
Blazing fast
SEO optimized (aim for 100/100 Lighthouse scores)
Fully accessible
Mobile-first and responsive
Professionally designed
Easily extendable for Gemini AI features in Phase 2
Deployable to Google Cloud Run
Structured for long-term maintainability
- TECH STACK REQUIREMENTS
You are free to choose the best possible technology stack, but it must follow these rules:
Stack Selection Criteria
Choose a stack that:
Provides server-side rendering (SSR) or static site generation (SSG)
Is highly optimized for SEO
Works well with future AI integrations
Can be containerized easily
Runs efficiently on Google Cloud Run
Supports API routes for Gemini AI integration
Preferred Characteristics
TypeScript-based
Modern framework (e.g., Next.js, Nuxt, Astro, Remix, etc.)
Component-based architecture
Tailwind CSS or equivalent utility-first styling
Clean separation of frontend and backend logic
You are allowed to choose ANY framework as long as you justify that it is the best option for:
Performance
SEO
AI extensibility
Cloud Run deployment
- DESIGN & UX REQUIREMENTS
The portfolio must:
Have a modern, professional, minimal design
Reflect the personality of a senior full-stack developer
Include smooth but lightweight animations
Follow accessibility best practices (WCAG 2.1 AA minimum)
Use semantic HTML5
Be fully keyboard navigable
Support dark and light mode
Load near-instantly
Data Model Requirements:
All content must be stored in structured, machine-readable formats so that Gemini AI can use it later.
For example:
Projects stored as structured JSON/MD files
Skills as categorized data
Experience as structured timeline entries
This is critical for Phase 2 AI integration.
- PERFORMANCE REQUIREMENTS
The final site must aim for:
Lighthouse Performance: 100
Accessibility: 100
Best Practices: 100
SEO: 100
Implement:
Code splitting
Image optimization
Lazy loading
Modern build tools
Minimal JavaScript footprint
Static generation wherever possible
-
SEO REQUIREMENTS
Implement full SEO optimization including:
Semantic HTML
Proper heading hierarchy
Meta tags
OpenGraph tags
Twitter cards
Schema.org structured data
Sitemap generation
Robots.txt
Canonical URLs
Optimized images
Proper URL structure
-
ACCESSIBILITY REQUIREMENTS
Ensure:
ARIA labels where necessary
Screen reader compatibility
Keyboard navigation
Color contrast compliance
Reduced motion support
Accessible forms
-
AI-READY ARCHITECTURE (CRITICAL)
Even though Phase 2 is not implemented yet, the architecture MUST be prepared for:
Gemini API integration
AI chatbot interface
Voice input processing
Context-aware AI assistant
API routes to communicate with Gemini
Therefore include:
A backend API layer
Secure environment variable management
Modular services architecture
Clear separation between UI and AI logic
- DEPLOYMENT REQUIREMENTS
The project must include:
A working Dockerfile
Cloud Run compatible configuration
Environment variable support
CI/CD friendly structure
Production-ready build scripts
Target platform:
Google Cloud Run
- DELIVERABLES
You must generate:
Complete source code
Documentation explaining:
Tech stack choice
Architecture
How to run locally
How to deploy to Cloud Run
Docker configuration
Clear folder structure
- FUTURE PHASE REMINDER
Always keep in mind:
This portfolio will later include:
Gemini-powered AI assistant
Voice interaction
Smart navigation
AI-generated insights
So design the system with that extensibility as a core principle.
FINAL INSTRUCTION
Generate a complete, production-ready portfolio project that meets all the above requirements and represents the best possible implementation you can produce.
——————————-
phase 2 prompt
——————————-
I have completed Phase 1 of my project for Google AI’s
“New Year, New You Portfolio Challenge”.
- Read the project documentation first
Phase 1 Summary:
- A production-grade developer portfolio
- Deployed on Google Cloud Run
- SSR/SSG optimized
- Lighthouse 100/100
- Structured, machine-readable content (projects, skills, experience)
- Backend API layer already present
- AI-ready architecture prepared
You are now tasked with implementing Phase 2:
A Gemini-powered, voice-enabled, context-aware AI assistant that enhances
navigation, discovery, and user interaction within the portfolio.
IMPORTANT CONSTRAINTS:
- DO NOT refactor or redesign Phase 1 UI or architecture unless absolutely required
- DO NOT degrade performance, SEO, or accessibility
- All AI features must be optional and user-initiated
- Maintain Cloud Run compatibility at all times
PHASE 2 OBJECTIVES
- AI ASSISTANT PURPOSE
The AI assistant must:
- Act as an intelligent guide to my portfolio content
- Help users discover projects, skills, and experience
- Enable natural language navigation across the site
- Provide concise, factual responses based ONLY on portfolio data
- Never hallucinate or invent information
Example user intents:
- “Show me your frontend projects”
- “Where can I see your recent work?”
- “What backend technologies do you specialize in?”
- “Take me to your experience section”
- “Summarize your skills in React and Node”
The assistant should:
- Understand intent
- Map intent → portfolio data or route
- Respond clearly
- Navigate when appropriate
- VOICE INTERACTION (PRIMARY FEATURE)
Implement optional voice input with:
- Explicit user consent (button-based opt-in)
- Microphone permission handling
- Speech-to-text in browser (Web Speech API or equivalent)
- Clear visual state:
- Listening
- Processing
- Responding
- Automatic stop listening after response
Voice input must:
- Work entirely client-side for speech recognition
- Send only text to backend Gemini API
- Be fully accessible (keyboard + screen readers)
- GEMINI AI INTEGRATION
Use:
- Google Gemini API (latest stable version)
- Server-side API route ONLY (never expose keys)
Architecture:
- Secure environment variable usage
- Stateless request handling
- Timeout + error handling
Prompting rules:
- Gemini must receive structured portfolio content as context
- Content must be injected as JSON (projects, skills, experience)
- Use system instructions to prevent hallucination
- Responses must be short, factual, and user-friendly
Use Gemini for:
- Intent classification
- Semantic search
- Natural language understanding
- Response generation
NOT for:
- Generating fake experience
- Open-ended chat
- Creative storytelling
- INTENT → ACTION ENGINE (CRITICAL)
Implement a deterministic intent-to-action layer:
- Classify intent categories:
- NAVIGATION
- INFORMATION
- SUMMARY
- Map each intent to:
- A route change
- A filtered view
- A structured response
Example:
Input: “Where are your projects?”
→ Intent: NAVIGATION
→ Action: router.push('/projects') {highlight the project tab link in header then navigate to projects -> kind of smart navigation}
AI must NEVER directly control routing logic.
Gemini outputs intent + parameters.
Your code executes the action.
- UI / UX REQUIREMENTS
Assistant UI must:
- Be lightweight and non-intrusive
- Load only when enabled
- Support dark/light mode
- Be dismissible at all times
- Not block page interaction
Recommended UI pattern:
- Floating assistant button
- Slide-in panel or bottom sheet
- Minimal animations (respect prefers-reduced-motion)
- PERFORMANCE & SAFETY
Performance:
- Lazy-load AI components
- Code split assistant bundle
- No impact on initial page load
Safety:
- Rate-limit assistant API
- Input sanitization
- Clear error states
- Graceful Gemini failures
- ACCESSIBILITY REQUIREMENTS
Ensure:
- Full keyboard navigation
- Screen reader compatibility
- ARIA roles for assistant
- Visible focus states
- Voice feature has text fallback
- OBSERVABILITY & DEBUGGING
Add:
- Structured logging for AI requests
- Development-only debug mode
- Clear error messages (non-technical)
- DOCUMENTATION (MANDATORY)
Generate documentation explaining:
- AI assistant architecture
- Why Gemini was chosen
- Intent classification approach
- Voice interaction design
- Security considerations
- How this enhances user experience
- How it aligns with Google AI best practices
- FINAL DELIVERABLES
You must produce:
- Clean, production-ready code
- No breaking changes to Phase 1
- Well-named, modular components
- Clear separation of:
UI
AI logic
Intent handling
Data context
- Deployment-ready solution for Cloud Run
FINAL PRINCIPLE:
This AI assistant must feel like a natural extension of the portfolio,
not a chatbot bolted on top.
Build it as if it were being reviewed by Google engineers.