The Human-Machine Interface: An Intelligent Engineering Portfolio

Source: Dev.to

New Year, New You Portfolio Challenge Submission

Presented by Google AI

About Me

I am Salwa Khattami, an AI Engineer and Systems Architect who views code not just as instructions, but as a living architecture. My work bridges the gap between rigorous engineering (Math, Physics, AI Pipelines) and immersive digital experiences.

I specialize in building intelligent systems—from RAG pipelines to Computer Vision models—and I wanted my portfolio to reflect that “System Level” depth. I don’t just build websites; I build environments.

Portfolio

Link to my portfolio:
https://portfolio-497550669510.us-central1.run.app/

How I Built It

This portfolio was built as a “Tactical Engineering Environment,” designed to feel like a heads‑up display (HUD) for a high‑tech system.

Tech Stack

• Core: React 19, Vite
• Styling: Tailwind CSS (Custom “Dark Onyx” Design System)
• 3D & Motion: React Three Fiber (Drei), Framer Motion
• Icons: Lucide React

The “Pair Programming” Experience with Google AI

I built this entire project in collaboration with Google’s Advanced Agentic Coding AI (Gemini Models). Treating the AI as a “Senior Partner” allowed me to:

• Accelerate Prototyping: Iterated through the “System Architecture” theme rapidly, generating 3D concepts and layout ideas in minutes.
• Refine Code Quality: Implemented complex Framer Motion animations (like the infinite scroll projects) and Three.js scenes efficiently.
• Solve Infrastructure Challenges: Debugged Docker containers for Cloud Run and configured Nginx ports with AI acting as my DevOps engineer.

It wasn’t just “generating code”; it was a dialogue about design, structure, and “feeling.” The result is a site that feels distinctly me, amplified by AI efficiency.

What I’m Most Proud Of

• The “Live System” Aesthetic: The portfolio doesn’t feel static. It has a “heartbeat” (pulsing status indicators), a “terminal” for contact, and a “Command Center” vibe.
• The Git Graph Timeline: Instead of a generic resume list, I visualized my career path (Education, Internships, Hackathons) as a Git Commit Graph. Each node is a “commit” to my personal repository, branching and merging as I grow.
• Performance & Polish: Despite heavy visuals (glassmorphism, 3D spheres), the site remains performant and accessible—a balance heavily tuned during development.

Status: SYSTEM_ONLINE
Deployed via: Google Cloud Run