description: An interactive developer portfolio featuring an AI career assistant that answers questions, generates tailored CV summaries, and recommends relevant projects using Google Gemini AI.
This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Hi! I'm *Asmae *, an Innovation & AMOA Engineering student , specializing in helping organizations transform through emerging technologies.
My tagline says it all: "Code, compete, deploy — then coffee ☕" — I'm passionate about building innovative solutions at the intersection of DevOps, Data Science, and AI.
With this portfolio, I wanted to showcase not just my technical skills, but also demonstrate how AI can make career exploration more interactive and personal. Instead of static text, visitors can actually talk to an AI that knows my background and can provide tailored insights.
Portfolio
💻 Source Code: https://github.com/AsamaeS/asmae-portfolio
How I Built It
🛠️ Tech Stack
Frontend Framework:
- Next.js 14+ with App Router and TypeScript
- Tailwind CSS for responsive, utility-first styling
- Framer Motion for smooth animations and transitions
AI Integration:
-
Google Gemini API (
gemini-2.0-flash-expmodel) - Custom AI context with my full professional profile
- Streaming responses for real-time interaction
Deployment:
- Google Cloud Run with Docker containerization
- Standalone Next.js build for optimal performance
- Multi-stage Docker build for minimal image size
UI/UX Libraries:
- Lucide React & React Icons for consistent iconography
- React Type Animation for typing effects
- Custom glassmorphism components
🎨 Design Decisions
1. Glassmorphism Aesthetic
I chose a modern glassmorphism design with backdrop blur effects, creating depth and visual hierarchy. The violet-to-cyan gradient palette represents the fusion of creativity (purple) and technology (cyan).
2. Dark Mode First
With a dark slate background (#0f172a), the portfolio is easy on the eyes during long browsing sessions while making accent colors pop.
3. Story-Driven Sections
Instead of dumping information, I organized content into a narrative flow:
- Hero → About → Experience → Education → Projects → Skills → Certifications → Activities → Contact
4. Mobile-First Responsive
Every component was designed mobile-first, ensuring a seamless experience across devices.
🤖 Google AI Tools Used
Primary Tool: Google AI Studio & Gemini API
I built an AI Career Assistant that serves as an intelligent proxy for recruiters and visitors. Here's what makes it special:
1. Contextual Intelligence
export const ASMAE_CONTEXT = `
Tu es un assistant AI représentant Asmae SERJI...
[Full professional profile, experiences, projects, skills]
`;
The AI has complete knowledge of my:
- 4 internships (Kyntus Morocco, VNB-IT, AXA, Brainwave Matrix)
- 6 featured projects (AsMind, Energy Recovery System, etc.)
- 7 certifications (BCG, DataCamp, Google, IBM)
- Technical skills across ML, DevOps, and AMOA
2. Dynamic CV Generation
Ask it: "Generate a CV summary for a Data Engineer role"
→ It tailors my experience to highlight relevant skills like Python, MySQL, ML models
3. Project Recommendations
Ask it: "Which projects demonstrate AMOA capabilities?"
→ It intelligently recommends my AXA internship and ERP UI project
4. Conversational Career Exploration
Instead of reading static text, recruiters can ask:
- "What's her strongest technical skill?"
- "Has she worked with React?"
- "Tell me about her machine learning experience"
Implementation:
// API Route: app/api/chat/route.ts
const chat = model.startChat({
history: [
{ role: 'user', parts: [{ text: ASMAE_CONTEXT }] },
{ role: 'model', parts: [{ text: "Ready to represent Asmae." }] },
...conversationHistory,
],
});
const result = await chat.sendMessage(message);
🔧 Development Process
*Phase 1: Planning *
- Defined 10 core sections
- Sketched component hierarchy
- Chose color palette and typography
*Phase 2: Component Development *
- Built 12 reusable components
- Implemented responsive layouts
- Added animations and hover effects
*Phase 3: AI Integration *
- Configured Gemini API
- Created chat endpoint
- Built interactive ChatBot component
- Tested example prompts
**Phase 4: Deployment Setup *
- Created optimized Dockerfile
- Configured Cloud Run settings
- Set up environment variables
- Deployed with
dev-tutorial=devnewyear2026label
What I'm Most Proud Of
🌟 1. The AI Career Assistant
This is the crown jewel of the portfolio. Instead of forcing visitors to read walls of text, they can have a natural conversation:
🎨 2. Premium Visual Design
The glassmorphism effects, gradient animations, and smooth transitions create a premium feel that stands out from typical portfolios:
- Floating particles in the hero section
- Typing animation that grabs attention
- Hover effects on project cards
- Animated statistics counters
- Timeline with connecting lines
🚀 3. Technical Implementation Quality
Performance Optimizations:
- Next.js standalone build reduces Docker image size
- Lazy loading for images
- Optimized animations (60fps)
- Fast initial load (<2s)
Code Quality:
- TypeScript for type safety
- Component modularity
- Clean separation of concerns
- Comprehensive error handling
💡 4. Innovation in Storytelling
Rather than a static resume, this portfolio tells a story:
- "From tennis player to algorithm chief"
- "From reading competitions to writing code"
- "From AMOA intern to AI innovator"
The Activities & Interests section humanizes the technical content, showing that I'm not just a developer, but a well-rounded individual with diverse passions.
🎯 5. Production-Ready Features
-
Health Check Endpoint:
/api/healthfor Cloud Run monitoring - Environment Variable Management: Secure API key handling
- Responsive Design: Works seamlessly on mobile, tablet, desktop
- Accessible UI: Semantic HTML, ARIA labels
- SEO Optimized: Metadata, Open Graph tags
Key Features at a Glance
✨ 10 Comprehensive Sections: Hero, About, Experience, Education, Projects, Skills, Certifications, Activities, Contact, Footer
🤖 AI Career Assistant: Powered by Gemini 2.0 Flash with full context awareness
🎨 Modern Design: Glassmorphism, gradient effects, smooth animations
📱 Fully Responsive: Mobile-first approach with breakpoints at 640px, 768px, 1024px
🚀 Deployed on Cloud Run: Containerized with Docker, auto-scaling ready
💬 Interactive Elements: Chatbot, contact form, smooth scroll navigation
📊 Dynamic Content: Animated statistics, typing effects, hover transitions
Challenges Overcome
1. Context Window Management
Fitting my entire professional profile into Gemini's context required careful summarization while maintaining enough detail for accurate responses.
2. Real-Time Streaming
Implementing streaming responses for a smooth chat experience required proper state management and error handling.
3. Docker Optimization
Getting the Docker image size down while maintaining all functionality took multiple iterations of the multi-stage build process.
What I Learned
🧠 Gemini API is incredibly versatile - The context-aware responses feel genuinely intelligent
🎨 Glassmorphism requires careful balance - Too much blur overwhelms, too little looks flat
⚡ Cloud Run is powerful - Auto-scaling and pay-per-use make it perfect for portfolios
🛠️ TypeScript catches bugs early - Type safety saved hours of debugging
Future Enhancements
- Add analytics to track visitor engagement
- Implement email functionality for the contact form
- Create a blog section for technical articles
- Add testimonials from internship supervisors
Try It Yourself!
Ask the AI Assistant:
- "What are Asmae's strongest skills?"
- "Generate a CV summary for a Front-End Developer role"
- "Tell me about the AsMind project"
- "Which certifications does she have in AI?"
Explore the Sections:
- Check out the animated timeline of my internships
- Hover over project cards to see interactive effects
- View my GitHub contribution graph
- Download my CV
Acknowledgments
Special thanks to:
- Google AI for the amazing Gemini API
- DEV.to for hosting this inspiring challenge
- INPT for fostering innovation in engineering education
- My mentors at Kyntus, VNB-IT, AXA, and Brainwave Matrix
💬 Have questions? The AI assistant is ready to chat!
🔗 Connect with me:
- GitHub: @AsamaeS
Top comments (0)