The latest articles on DEV Community by Lília lp _ (@lp_microbiana). https://dev.to/lp_microbiana 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%2F3738560%2F825d8bf4-6620-45f3-a3fc-4e88d3eb9ac0.jpg https://dev.to/lp_microbiana en Lília lp _ Sat, 31 Jan 2026 19:19:02 +0000 https://dev.to/lp_microbiana/almost-futuristic-portfolio-jjk https://dev.to/lp_microbiana/almost-futuristic-portfolio-jjk <p><em>This is a submission for the <a href="https://dev.to/challenges/new-year-new-you-google-ai-2025-12-31">New Year, New You Portfolio Challenge Presented by Google AI</a></em></p> <h2> About Me </h2> <p>I'm a Developer passionate about creating immersive web experiences that blend cutting-edge technology with beautiful design.<br> My goal is to continuously improve as an engineer while creating solutions that are scalable, maintainable, and easy to use.</p> <h2> Portfolio </h2> <p> </p> <div class="ltag__cloud-run"> <iframe height="600px" src="https://portfolio-23959360757.us-central1.run.app"> </iframe> </div> <p><strong>Live URL:</strong> <a href="https://portfolio-23959360757.us-central1.run.app" rel="noopener noreferrer">https://portfolio-23959360757.us-central1.run.app</a></p> <h2> How I Built It </h2> <h3> Tech Stack </h3> <p><strong>Core Technologies:</strong></p> <ul> <li> <strong>React</strong> - Component-based UI architecture</li> <li> <strong>Vite</strong> - Lightning-fast build tool with optimized chunking</li> <li> <strong>Three.js</strong> (@react-three/fiber + @react-three/drei) - Immersive 3D graphics</li> <li> <strong>i18next</strong> - Internationalization (PT/EN support)</li> <li> <strong>GSAP</strong> - Animations</li> </ul> <p><strong>Deployment:</strong></p> <ul> <li> <strong>Google Cloud Run</strong> - Containerized deployment with Docker</li> <li> <strong>Cloud Build</strong> - CI/CD pipeline</li> <li> <strong>Nginx</strong> - Production-grade web server with optimized MIME types</li> </ul> <h3> Design Decisions </h3> <ol> <li> <strong>Cyberpunk Aesthetic</strong> - Neon colors, grid backgrounds, HUD elements</li> <li> <strong>GPU-Accelerated Animations</strong> - All animations use <code>transform</code> and <code>opacity</code> </li> <li> <strong>Responsive Design</strong> - Mobile-first approach with fluid typography</li> <li> <strong>Accessibility</strong> - Semantic HTML, ARIA labels, proper heading hierarchy</li> </ol> <h3> Development Process </h3> <p><strong>Initial Build:</strong></p> <ul> <li>Started with basic React + Vite setup</li> <li>Implemented Hero section with Three.js 3D scene (Synthwave Grid, Neon Sun)</li> <li>Added lazy-loaded sections (About, Skills, Projects, Contact)</li> </ul> <h3> Google AI Tools Used </h3> <p>While I didn't directly use Google AI tools for code generation, I leveraged:</p> <ul> <li> <strong>Google Cloud Run</strong> - Serverless deployment platform</li> <li> <strong>Google Cloud Build</strong> - Automated build and deployment</li> <li> <strong>Google Antigravity</strong> - Development platform, evolving the IDE into the agent-first era. </li> </ul> <p>The iterative optimization process was data-driven, using PageSpeed's detailed metrics to identify and eliminate performance bottlenecks.</p> <h2> What I'm Most Proud Of </h2> <p><strong>Performance Metrics:</strong></p> <ul> <li> <strong>FCP (First Contentful Paint):</strong> ~1.5s (60% faster)</li> <li> <strong>TBT (Total Blocking Time):</strong> Reduced from 15,350ms to minimal</li> <li> <strong>Forced Reflows:</strong> Eliminated 29ms by removing Framer Motion</li> <li> <strong>Bundle Size:</strong> Optimized to 324KB gzipped critical JS <strong>Three.js Optimization</strong> - <code>frameloop="demand"</code>, <code>dpr={[1, 1.5]}</code>, <code>antialias: false</code>, Intersection Observer pausing</li> <li> <strong>Memoized Components</strong> - <code>HUDElement</code> and <code>DecorativeLine</code> wrapped in <code>React.memo()</code> </li> </ul> <blockquote> <p><strong>Busquem conhecimento" — ET Bilu</strong></p> </blockquote> devchallenge googleaichallenge portfolio gemini