The latest articles on DEV Community by Izayoii (@mannanyrakhis). https://dev.to/mannanyrakhis 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%2F3947788%2Fb7a79427-fa3d-4fcd-8e3a-47a175b45875.jpeg https://dev.to/mannanyrakhis en Izayoii Sat, 23 May 2026 14:26:13 +0000 https://dev.to/mannanyrakhis/i-built-a-portfolio-template-with-a-built-in-admin-panel-heres-why-and-how-5bn8 https://dev.to/mannanyrakhis/i-built-a-portfolio-template-with-a-built-in-admin-panel-heres-why-and-how-5bn8 <p>The problem<br> Every time I wanted to update my portfolio, I had to go through the same painful loop:</p> <p>-Open VSCode<br> -Hunt down the right file<br> -Edit the data manually<br> -Push to GitHub<br> -Wait for the deploy</p> <p>For a simple text change. That's insane.<br> I wanted a portfolio I could update in 10 seconds from anywhere — without touching a single line of code.</p> <p>What I built</p> <p><strong>PortfolioKit</strong> is a 3-file template (HTML/CSS/JS) with a full admin panel built right into the page.</p> <p>Press <code>Ctrl+Shift+A</code>, enter a password, and a sidebar opens where you can edit everything live:</p> <ul> <li>Name, bio, title, email</li> <li>Projects (title, description, tags, image, link, year)</li> <li>Skills and social links</li> <li>Color theme</li> <li>Dark/light mode</li> </ul> <p>Every change auto-saves to <code>localStorage</code>. Nothing gets lost, nothing gets sent to a server.</p> <p>Technical choices</p> <p><strong>No framework.</strong> Pure HTML/CSS/JS. I wanted something anyone could open in a browser and deploy anywhere — Netlify Drop, GitHub Pages, or even just locally.</p> <p><strong>Images stored as Base64.</strong> No server, no cloud storage. You upload a photo, it gets encoded and saved directly in localStorage with the rest of your data.</p> <p><strong>Export/import as JSON.</strong> Want to move to a new computer? Export your data as a JSON file, import it on the other device. Done in 5 seconds.</p> <p><strong>Password protection.</strong> The admin panel is hidden behind a password stored in localStorage. Not bulletproof security, but enough to keep random visitors from editing your portfolio.</p> <h2> The result </h2> <p>Deploy in 60 seconds with Netlify Drop (free). Update your portfolio from any browser. No subscriptions, no backend, no dependencies.</p> <p>👉 Live demo: <a href="https://fascinating-fudge-709aa2.netlify.app/" rel="noopener noreferrer">https://fascinating-fudge-709aa2.netlify.app/</a></p> <h2> What's next </h2> <p>I'm thinking about adding:</p> <ul> <li>Custom domain setup guide</li> <li>More layout options</li> <li>A contact form (maybe via Formspree to stay serverless)</li> </ul> <p>Would love feedback from the dev.to community — what would you add to make this genuinely useful for you?</p> webdev javascript html portfolio