https://dazzling-galileo-470027.netlify.app/tags/data/ Recent content in Data on Blog bazar of a frenchy Hugo en-US Sat, 09 May 2026 17:24:16 +0200 https://dazzling-galileo-470027.netlify.app/blog/portfolio-atlas/ Fri, 08 May 2026 00:00:00 +0000 https://dazzling-galileo-470027.netlify.app/blog/portfolio-atlas/ <div class="pa-wrap"> <div class="pa-embed"> <iframe id="pa-iframe" src="https://dazzling-galileo-470027.netlify.app/portfolio-atlas.html" title="Portfolio Atlas — Famous Investment Strategies" loading="lazy" scrolling="no" ></iframe> <button class="pa-expand" onclick="paOpen()" aria-label="View fullscreen"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5"/> </svg> Expand </button> </div> </div> <div class="pa-overlay" id="pa-overlay" onclick="paClose()"> <div class="pa-modal" onclick="event.stopPropagation()"> <button class="pa-close" onclick="paClose()" aria-label="Close"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.8"> <line x1="1" y1="1" x2="13" y2="13"/><line x1="13" y1="1" x2="1" y2="13"/> </svg> </button> <iframe id="pa-iframe-full" title="Portfolio Atlas — Famous Investment Strategies" ></iframe> </div> </div> <style> .pa-wrap { margin: 2rem 0; } .pa-embed { position: relative; border-radius: 4px; overflow: hidden; } .pa-embed iframe { width: 100%; height: 900px; border: none; display: block; overflow: hidden; } @media (max-width: 600px) { .pa-embed iframe { height: 600px; } } .pa-expand { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: #428bca; border: none; border-radius: 3px; color: #fff; font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.45); transition: background .15s, box-shadow .15s; } .pa-expand:hover { background: #2a6496; box-shadow: 0 4px 14px rgba(0,0,0,.55); } .pa-overlay { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(9,9,11,.75); backdrop-filter: blur(4px); animation: pa-fade-in .2s ease; } .pa-overlay.open { display: flex; align-items: center; justify-content: center; } .pa-modal { position: relative; width: calc(100vw - 80px); height: calc(100vh - 80px); max-width: 1400px; border-radius: 6px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.6); animation: pa-scale-in .2s cubic-bezier(.2,.8,.3,1); } .pa-modal iframe { width: 100%; height: 100%; border: none; display: block; } .pa-close { position: absolute; top: 12px; right: 12px; z-index: 10; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(9,9,11,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); border-radius: 3px; color: #eeeef4; cursor: pointer; transition: background .15s, border-color .15s; } .pa-close:hover { background: rgba(191,64,64,.55); border-color: #bf4040; } @keyframes pa-fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes pa-scale-in { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } } @media (max-width: 600px) { .pa-modal { width: calc(100vw - 24px); height: calc(100vh - 24px); } } </style> <script> (function () { var loaded = false; function paOpen() { var overlay = document.getElementById('pa-overlay'); var iframe = document.getElementById('pa-iframe-full'); if (!loaded) { iframe.src = '/portfolio-atlas.html'; loaded = true; } overlay.classList.add('open'); document.body.style.overflow = 'hidden'; } function paClose() { document.getElementById('pa-overlay').classList.remove('open'); document.body.style.overflow = ''; } document.addEventListener('keydown', function(e) { if (e.key === 'Escape') paClose(); }); window.paOpen = paOpen; window.paClose = paClose; })(); </script> <h2 id="a-note-on-how-this-was-built">A note on how this was built</h2> <p>This portfolio explorer was my first ever project built with Claude Code — Anthropic&rsquo;s agentic coding tool that runs in the terminal. The experience is worth writing about.</p>