The latest articles on DEV Community by Salwaaa (@phoenixa). https://dev.to/phoenixa https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3727198%2Fd10f1d5d-adef-4d27-93da-7fcb84cd11d4.jpg https://dev.to/phoenixa en Salwaaa Sun, 01 Feb 2026 01:10:26 +0000 https://dev.to/phoenixa/the-human-machine-interface-an-intelligent-engineering-portfolio-o0p https://dev.to/phoenixa/the-human-machine-interface-an-intelligent-engineering-portfolio-o0p <h2> New Year, New You Portfolio Challenge Submission </h2> <p><strong>Presented by Google AI</strong></p> <h2> About Me </h2> <p>I am <strong>Salwa Khattami</strong>, 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.</p> <p>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.</p> <h2> Portfolio </h2> <div class="ltag__cloud-run"> <iframe height="600px" src="https://portfolio-497550669510.us-central1.run.app/"> </iframe> </div> <p>Link to my portfolio: <br> <a href="https://portfolio-497550669510.us-central1.run.app/" rel="noopener noreferrer">https://portfolio-497550669510.us-central1.run.app/</a></p> <p>--labels dev-tutorial=devnewyear2026</p> <h2> How I Built It </h2> <p>This portfolio was built as a <strong>"Tactical Engineering Environment,"</strong> designed to feel like a heads-up display (HUD) for a high-tech system.</p> <h2> Tech Stack </h2> <ul> <li> <strong>Core:</strong> React 19, Vite </li> <li> <strong>Styling:</strong> Tailwind CSS (Custom "Dark Onyx" Design System) </li> <li> <strong>3D &amp; Motion:</strong> React Three Fiber (Drei), Framer Motion </li> <li> <strong>Icons:</strong> Lucide React </li> </ul> <h2> The "Pair Programming" Experience with Google AI </h2> <p>I built this entire project in collaboration with Google's Advanced Agentic Coding AI (Gemini Models). Ideally, a portfolio is a solo journey, but treating the AI as a <strong>"Senior Partner"</strong> allowed me to:</p> <ul> <li> <strong>Accelerate Prototyping:</strong> Iterated through the "System Architecture" theme rapidly, generating 3D concepts and layout ideas in minutes. </li> <li> <strong>Refine Code Quality:</strong> Implemented complex Framer Motion animations (like the infinite scroll projects) and Three.js scenes efficiently. </li> <li> <strong>Solve Infrastructure Challenges:</strong> Debugged Docker containers for Cloud Run and configured Nginx ports with AI acting as my DevOps engineer. </li> </ul> <p>It wasn't just "generating code"; it was a dialogue about <strong>design, structure, and "feeling."</strong> The result is a site that feels distinctly me, amplified by AI efficiency.</p> <h2> What I'm Most Proud Of </h2> <ul> <li> <strong>The "Live System" Aesthetic:</strong> The portfolio doesn't feel static. It has a "heartbeat" (pulsing status indicators), a "terminal" for contact, and a "Command Center" vibe. </li> <li> <strong>The Git Graph Timeline:</strong> Instead of a boring 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. </li> <li> <strong>Performance &amp; Polish:</strong> Despite heavy visuals (glassmorphism, 3D spheres), the site remains performant and accessible, a balance heavily tuned during development. </li> </ul> <p><strong>Status:</strong> <code>SYSTEM_ONLINE</code><br><br> <strong>Deployed via:</strong> Google Cloud Run</p> devchallenge googleaichallenge portfolio gemini