The latest articles on DEV Community by knight_dragon_x (@knigh_dragon_x). https://dev.to/knigh_dragon_x 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%2F3934336%2Fae6171b0-7e90-463d-aebf-2ab1c750cb56.jpg https://dev.to/knigh_dragon_x en knight_dragon_x Sat, 16 May 2026 07:08:57 +0000 https://dev.to/knigh_dragon_x/imagine-wild-ill-compile-i-built-a-self-hosted-portfolio-system-with-built-in-uiux-audit-4h55 https://dev.to/knigh_dragon_x/imagine-wild-ill-compile-i-built-a-self-hosted-portfolio-system-with-built-in-uiux-audit-4h55 <p>I’m Kaludurage Sithara Nimsara, aka <strong>knight_dragon_x</strong> — 19 y/o Vibe Coder + Vibe Hacker from Sri Lanka.</p> <p>My slogan is simple: <strong>Imagine wild. I'll compile.</strong></p> <p>Instead of shipping another static portfolio, I built a <strong>self-hosted portfolio SYSTEM</strong>. One HTML file you own. Edit mode, local persistence, export/import, and a built-in audit that reviews itself.</p> <h3> Why self-host? </h3> <p>I wanted:</p> <ul> <li>No CMS lock-in</li> <li>Edit in browser, save to localStorage</li> <li>Ship to GitHub Pages / Vercel in 10 seconds</li> <li>Audit my own UI/UX without external tools</li> </ul> <h3> What it does </h3> <p><strong>Edit Mode</strong><br> Toggle Edit in the top bar. Everything is inline editable — alias, slogan, bio, services, projects. Add/remove projects via modal. No build step.</p> <p><strong>Persistence</strong><br> Data lives in <code>localStorage</code> under <code>kdx_portfolio_v1</code>. Export JSON for backup, import on any host.</p> <p><strong>Built-in Audit Panel</strong><br> Click Run Audit. It checks:</p> <ul> <li>CTA presence — is “Start a Project” visible?</li> <li>Hero completeness — alias + slogan present</li> <li>Projects count ≥3</li> <li>Images have alt text</li> <li>Red-on-black contrast</li> <li>Mobile menu exists</li> <li>Email link valid</li> <li>Font count performance hint</li> </ul> <p>Results show Pass / Warn / Fail with fix suggestions. It runs on demand and on data change.</p> <h3> Stack </h3> <ul> <li>Single HTML file</li> <li>Red #E50914 + Black #050507 theme</li> <li>Syne + Space Grotesk</li> <li>Vanilla JS, no dependencies</li> <li>Glassmorphism + brutalist grid</li> </ul> <h3> Design decisions </h3> <p><strong>Red discipline.</strong> Red is used for primary actions and slogan only. Rest is grayscale for readability.</p> <p><strong>Company-ready.</strong> Services, Process, and UI/UX Audit sections make it hireable, not just pretty.</p> <p><strong>Performance first.</strong> No framework, <code>prefers-reduced-motion</code> support, <code>will-change</code> on interactive elements, custom cursor disabled on touch.</p> <h3> Try it </h3> <p>The system is fully self-contained. Host the file anywhere. Open Edit mode, make it yours, export JSON, and you’re done.</p> <p>I’m opening 2 project slots for Aug–Sep 2026. If you have a wild idea, I’ll compile it.</p> <p><strong>Email:</strong> <a href="mailto:kdsitharanimsara@gmail.com">kdsitharanimsara@gmail.com</a></p> <p>Built with obsession by knight_dragon_x. What would you add to a self-hosted portfolio system?</p> webdev portfolio javascript showdev