PageSourceSearch

https://justpres.vercel.app/

html justpres.vercel.app collected 2026-10-03 07:10:00 UTC 165,682 bytes, 9 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="inter_c15e96cb-module__0bjUvq__variable"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/chunks/0.07gosdbi7mp.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/04d954afkz.es.js"/>
1<script src="/_next/static/chunks/0pqt~8bl3ukh4.js" async=""></script>
1<script src="/_next/static/chunks/0c7h~x4_chf35.js" async=""></script>
1<script src="/_next/static/chunks/07lhk_q6pmm3r.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-10qc6v.5m46r_.js" async=""></script>
1<script src="/_next/static/chunks/0iwz~d34oj_si.js" async=""></script>
1<script src="/_next/static/chunks/0d3shmwh5_nmn.js" async=""></script>
1<script src="/_next/static/chunks/0475rrv0rm6ul.js" async=""></script>
1<script src="/_next/static/chunks/15~2-xqkwfxiz.js" async=""></script>
1<script src="/_next/static/chunks/15xbsbb7i3q5l.js" async=""></script>
1<script src="/_next/static/chunks/0l~luigxxwz8b.js" async=""></script>
1<script src="/_next/static/chunks/0p2f_ommqh-0o.js" async=""></script>
1<meta name="theme-color" content="#09090B"/><meta name="color-scheme" content="dark"/><meta name="next-size-adjust" content=""/><title>Justine Lopez — Full-Stack Developer &amp; IoT Systems Engineer</title><meta name="description" content="Full-Stack Web Developer &amp; IoT Systems Engineer based in Bacoor City, Cavite, Philippines. Building Next.js web applications, smart IoT hardware systems, and automated workflows."/><link rel="author" href="https://github.com/JustPres"/><meta name="author" content="Justine Lopez"/><meta name="keywords" content="Justine Lopez,JustPres,Full-Stack Developer Philippines,IoT Hardware Systems Developer Cavite,Next.js Developer Bacoor,React Web App Developer Philippines,IoT Systems Engineer Philippines,n8n Automation Developer"/><meta name="creator" content="Justine Lopez"/><meta name="publisher" content="JustPres Dev Labs"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://justpres.dev"/><meta name="google-site-verification" content="google75063e0db5b584db"/><meta property="og:title" content="Justine Lopez — Full-Stack Developer &amp; IoT Systems Specialist"/><meta property="og:description" content="Custom Next.js web applications &amp; IoT hardware systems engineered in Bacoor, Cavite, Philippines."/><meta property="og:url" content="https://justpres.dev"/><meta property="og:site_name" content="Justine Lopez Developer Portfolio"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://justpres.dev/avatar.png"/><meta property="og:image:width" content="800"/><meta property="og:image:height" content="800"/><meta property="og:image:alt" content="Justine Lopez — Full-Stack Developer &amp; IoT Specialist"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@JustPres"/><meta name="twitter:title" content="Justine Lopez — Full-Stack &amp; IoT Systems Engineer"/><meta name="twitter:description" content="Next.js web apps and IoT hardware engineering from Cavite, Philippines."/><meta name="twitter:image" content="https://justpres.dev/avatar.png"/><link rel="icon" href="/icon.svg"/><link rel="apple-touch-icon" href="/icon.svg"/>
1<script id="theme-script">
2              try {
3                if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
4                  document.documentElement.classList.add('dark');
5                } else {
6                  document.documentElement.classList.remove('dark');
7                }
8              } catch (_) {}
9            </script>
9<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"ProfilePage","@id":"https://justpres.dev/#webpage","url":"https://justpres.dev","name":"Justine Lopez — Full-Stack Developer & IoT Specialist Portfolio","mainEntity":{"@id":"https://justpres.dev/#person"}},{"@type":"Person","@id":"https://justpres.dev/#person","name":"Justine Lopez","alternateName":"JustPres","gender":"Male","image":"https://justpres.dev/avatar.png","jobTitle":"Full-Stack Web Developer & IoT Systems Engineer","email":"[email protected]","url":"https://justpres.dev","address":{"@type":"PostalAddress","addressLocality":"Bacoor City","addressRegion":"Cavite","addressCountry":"PH"},"sameAs":["https://github.com/JustPres","https://www.linkedin.com/in/justpres/","https://www.instagram.com/juspresx/","https://x.com/justpresx","https://lu.ma/user/justpres","https://dev.to/justpres","https://hashnode.com/@justpres"],"knowsAbout":["Web Development","Next.js","React.js","IoT Hardware Engineering","Arduino & ESP32 Integration","Node.js","n8n Workflow Automation","C++ Embedded Firmware"]},{"@type":"LocalBusiness","@id":"https://justpres.dev/#business","name":"JustPres Dev Labs","image":"https://justpres.dev/avatar.png","priceRange":"$$","address":{"@type":"PostalAddress","addressLocality":"Bacoor City","addressRegion":"Cavite","addressCountry":"PH"},"url":"https://justpres.dev"},{"@type":"SoftwareApplication","@id":"https://justpres.dev/#smart-flush","name":"Smart-Flush-Hardware","description":"IoT Smart Flush Sanitation Firmware — ESP8266 microcontroller automated toilet sanitation system firmware.","applicationCategory":"HardwareController","operatingSystem":"Embedded C++","author":{"@id":"https://justpres.dev/#person"}},{"@type":"SoftwareApplication","@id":"https://justpres.dev/#bantayproyekto","name":"Bantay Proyekto Infrastructure Budget Tracker","description":"Civic technology platform and data visualization web application tracking local Philippine government infrastru
9cture budget allocation maps.","applicationCategory":"BusinessApplication","operatingSystem":"Web","url":"https://bantayproyekto.vercel.app/","author":{"@id":"https://justpres.dev/#person"}},{"@type":"SoftwareApplication","@id":"https://justpres.dev/#dominifunds","name":"DominiFunds Treasury Tracker","description":"Organization treasury tracking and financial metrics ledger accountability web application.","applicationCategory":"BusinessApplication","operatingSystem":"Web","url":"https://dominifunds.vercel.app/","author":{"@id":"https://justpres.dev/#person"}},{"@type":"EducationalOccupationalCredential","name":"Microsoft Certified: Azure AI Fundamentals","credentialCategory":"Certification","recognizedBy":{"@type":"Organization","name":"Microsoft"},"about":{"@id":"https://justpres.dev/#person"}},{"@type":"EducationalOccupationalCredential","name":"Introduction to AI Agents","credentialCategory":"Certification","recognizedBy":{"@type":"Organization","name":"Google"},"about":{"@id":"https://justpres.dev/#person"}},{"@type":"EducationalOccupationalCredential","name":"Introduction to IoT","credentialCategory":"Certification","recognizedBy":{"@type":"Organization","name":"Cisco"},"about":{"@id":"https://justpres.dev/#person"}},{"@type":"FAQPage","@id":"https://justpres.dev/#faq","mainEntity":[{"@type":"Question","name":"What services does Justine Lopez (JustPres) provide?","acceptedA
9nswer":{"@type":"Answer","text":"Justine Lopez offers Full-Stack Web Application Development (Next.js, React, Node.js), IoT Hardware Assembly & Sensor Integration (ESP32, Arduino, ESP8266), and Technical Workflow Automation using n8n."}},{"@type":"Question","name":"Where is Justine Lopez located?","acceptedAnswer":{"@type":"Answer","text":"Justine Lopez is located in Bacoor City, Cavite, Philippines, and provides both local technical consultations and remote developer services globally."}},{"@type":"Question","name":"Can I hire Justine Lopez for IoT hardware & prototyping?","acceptedAnswer":{"@type":"Answer","text":"Yes! Justine Lopez specializes in hardware integrations, component selection, circuit assembly, and C++ firmware programming for microcontrollers like ESP8266 and Arduino sensors."}},{"@type":"Question","name":"What certifications does Justine Lopez hold?","acceptedAnswer":{"@type":"Answer","text":"Justine Lopez holds several professional certifications, including Microsoft Certified: Azure AI Fundamentals, Google Agent Fundamentals, Cisco Introduction to IoT, and n8n Workflow Automation Essentials."}},{"@type":"Question","name":"How can I contact Justine Lopez for project quotes?","acceptedA
9nswer":{"@type":"Answer","text":"You can contact Justine Lopez via email at [email protected], browse his open-source work at github.com/JustPres, or request a quote directly through the Services page on his portfolio website."}},{"@type":"Question","name":"Does Justine Lopez build Next.js and React web applications?","acceptedAnswer":{"@type":"Answer","text":"Yes, Justine Lopez builds modern, responsive, and performance-optimized full-stack web applications using Next.js, React.js, Node.js, Express.js, TypeScript, and MongoDB."}},{"@type":"Question","name":"What is Justine Lopez's flagship IoT hardware project?","acceptedAnswer":{"@type":"Answer","text":"His flagship hardware project is 'An IoT-Based Toilet Sanitation, Analytics, and Predictive Maintenance Management System' (Smart-Flush-Hardware), which uses ESP8266 microcontrollers, ultrasonic distance sensors, and automated flush mechanisms."}},{"@type":"Question","name":"What database technologies does Justine Lopez use?","acceptedAnswer":{"@type":"Answer","text":"Justine Lopez primarily works with MongoDB for NoSQL database requirements, integrating it into Next.js and Node.js backend architectures."}},{"@type":"Question","name":"What workflow automation tools does Justine Lopez specialize in?","acceptedA
9nswer":{"@type":"Answer","text":"He specializes in n8n for building automated workflow pipelines, connecting various software APIs, databases, large language models, and AI agent endpoints."}}]}]}</script>
9<script src="/_next/static/chunks/03~yq9q893hmn.js" noModule=""></script>
9</head><body class="antialiased font-sans"><div hidden=""><!--$--><!--/$--></div><div class="min-h-screen bg-background text-foreground relative transition-colors duration-300"><a href="#main-portfolio-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:shadow-xl focus:outline-none focus:ring-2 focus:ring-primary font-medium text-xs transition-transform">Skip to content</a><div class="fixed inset-0 z-0 pointer-events-none overflow-hidden opacity-60 dark:opacity-45 will-change-transform contain-strict" aria-hidden="true"><div class="relative w-full h-full overflow-hidden w-full h-full" aria-hidden="true"><canvas aria-hidden="true" tabindex="-1" style="position:absolute;inset:0;width:100%;height:100%"></canvas></div></div><div class="absolute top-6 right-6 z-50"><button class="w-9 h-9 rounded-lg border border-border bg-card/60 hover:bg-secondary flex items-center justify-center text-muted-foreground hover:text-foreground hover:border-primary/40 transition-all cursor-pointer relative overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary" aria-label="Switch to dark theme"><div style="opacity:1;transform:none"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun text-amber-500" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></div></button></div><div class="max-w-6xl mx-auto px-4 sm:px-6 py-6 sm:py-8 relative z-10"><div class="lg:hidden rounded-xl border border-border bg-card/75 backdrop-blur-xs p-4 sm:p-5 mb-6 shadow-sm space-y-3.5"><div class="flex items-start gap-3.5"><img src="/avatar.png" alt="Justine Lopez" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-border bg-card object-cover flex-shrink-0 shadow-sm"/><div class="min-w-0 flex-1"><div class="flex items-center justify-between gap-1 flex-wrap"><h1 class="text-lg font-bold text-foreground truncate">Justine Lopez<!-- --> <span class="text-xs font-normal text-muted-foreground">(he/him)</span></h1><span class="text-[10px] text-muted-foreground font-mono bg-secondary/60 px-1.5 py-0.5 rounded">GMT+8</span></div><p class="text-xs text-muted-foreground truncate">JustPres</p><div class="mt-1"><span class="text-[11px] font-semibold text-primary inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
9ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml" aria-hidden="true"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg><span>Full-Stack Developer &amp; IoT Specialist</span></span></div></div></div><div class="flex items-center gap-2 pt-1 flex-wrap sm:flex-nowrap"><a class="flex-1 py-2 px-3 rounded-md bg-primary text-primary-foreground text-xs font-semibold hover:bg-primary/90 transition-colors flex items-center justify-center gap-1.5 text-center shadow-xs" href="/services"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles flex-shrink-0" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg><span>Work With Me ↗</span></a><a href="/resume.pdf" target="_blank" rel="noopener noreferrer" class="py-2 px-3 rounded-md border border-border bg-card/60 hover:bg-secondary text-xs font-semibold text-foreground transition-colors flex items-center justify-center gap-1 text-center" aria-label="View Resume PDF"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text text-primary" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg><span>Resume</span></a><div class="flex items-center gap-1"><a href="https://github.com/JustPres" target="_blank" rel="noopener noreferrer" title="GitHub Profile" class="w-8 h-8 rounded-md border border-border bg-card/60 hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors flex items-center justify-center" aria-label="GitHub Profile"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></a><a href="https://www.linkedin.com/in/justpres/" target="_blank" rel="noopener noreferrer" title="LinkedIn" class="w-8 h-8 rounded-md border border-border bg-card/60 hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors flex items-center justify-center" aria-label="LinkedIn Profile"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg></a><a href="mailto:[email protected]" title="Email Justine" class="w-8 h-8 rounded-md border border-border bg-card/60 hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors flex items-center justify-center" aria-label="Direct Email"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></a><a href="https://t.me/JustPres" target="_blank" rel="noopener noreferrer" title="Telegram" class="w-8 h-8 rounded-md border border-border bg-card/60 hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors flex items-center justify-center" aria-label="Telegram"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="" aria-hidden="true"><path d="m15 10-4 4 6 6 4-16-18 7 4 2 2 6 3-4"></path></svg></a></div></div><button aria-expanded="false" class="w-full text-center text-xs text-muted-foreground hover:text-foreground pt-1 flex items-center justify-center gap-1 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded"><span>View Full Bio &amp; Channels</span><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="flex flex-col lg:flex-row gap-8"><aside class="hidden lg:block lg:w-[296px] flex-shrink-0" style="opacity:0;transform:translateX(-20px)"><div class="mb-4"><img src="/avatar.png" alt="Justine Lopez" class="w-[296px] h-[296px] max-w-full rounded-full border-2 border-border bg-card object-cover shadow-md"/></div><div class="mb-3"><h1 class="text-2xl font-bold text-foreground leading-tight">Justine Lopez<!-- --> <span class="text-xs font-normal text-muted-foreground ml-1.5">(he/him)</span></h1><p class="text-lg font-light text-muted-foreground">JustPres</p></div><p class="text-xs text-muted-foreground mb-4 leading-relaxed">Building clean, fast websites, smart hardware systems, and automated tools that help people get work done.</p><div class="mb-4"><span class="w-full py-1.5 px-3 rounded-full border border-primary/20 bg-primary/5 text-primary text-xs font-semibold flex items-center justify-center gap-1.5 text-center shadow-xs"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml flex-shrink-0" aria-hidden="true"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg><span>Full-Stack Developer &amp; IoT Specialist</span></span></div><div class="space-y-2 mb-5"><a class="w-full py-2.5 px-3 rounded-md bg-primary text-primary-foreground text-xs font-semibold hover:bg-primary/90 transition-colors flex items-center justify-center gap-2 text-center shadow-sm" href="/services"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles text-primary-foreground flex-shrink-0 animate-pulse" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg><span class="inline-block select-none ">Work With Me / Request Quote ↗</span></a><a href="/resume.pdf" target="_blank" rel="noopener noreferrer" class="w-full py-2.5 px-3 rounded-md border border-border bg-card/60 hover:bg-secondary text-xs font-semibold text-foreground transition-colors flex items-center justify-center gap-2 text-center"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text text-primary" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg><span>View Resume PDF ↗</span></a></div><div class="space-y-2 text-xs mb-5"><div class="flex items-center gap-2 text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin flex-shrink-0 text-primary" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><span>Bacoor City, Cavite, Philippines</span></div><div class="flex items-center gap-2 text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail flex-shrink-0 text-primary" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg><a href="mailto:[email protected]" class="hover:text-primary transition-colors truncate">[email protected]</a><button class="ml-1.5 p-1 text-muted-foreground hover:text-foreground transition-colors rounded hover:bg-secondary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary curs
9or-pointer" aria-label="Copy email: [email protected]"><span style="transform:scale(0)"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></span></button></div><div class="flex items-center gap-2 text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone flex-shrink-0 text-primary" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg><span>Available upon request</span></div></div><div class="border-t border-border pt-4 mb-4"><h3 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2.5 flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square text-primary" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>Primary Channels</h3><div class="grid grid-cols-4 gap-2"><a href="https://github.com/JustPres" target="_blank" rel="noopener noreferrer" title="GitHub Profile" class="h-10 rounded-lg border border-border bg-card/60 hover:bg-secondary hover:border-primary/50 text-foreground transition-all flex flex-col items-center justify-center gap-0.5 shadow-2xs group" aria-label="GitHub Profile"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="group-hover:scale-110 transition-transform" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg><span class="text-[10px] text-muted-foreground font-mono">GitHub</span></a><a href="https://www.linkedin.com/in/justpres/" target="_blank" rel="noopener noreferrer" title="LinkedIn Profile" class="h-10 rounded-lg border border-border bg-card/60 hover:bg-secondary hover:border-blue-500/50 text-foreground transition-all flex flex-col items-center justify-center gap-0.5 shadow-2xs group" aria-label="LinkedIn Profile"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-500 group-hover:scale-110 transition-transform" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg><span class="text-[10px] text-muted-foreground font-mono">LinkedIn</span></a><a href="mailto:[email protected]" title="Email Justine" class="h-10 rounded-lg border border-border bg-card/60 hover:bg-secondary hover:border-primary/50 text-foreground transition-all flex flex-col items-center justify-center gap-0.5 shadow-2xs group" aria-label="Direct Email"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail text-primary group-hover:scale-110 transition-transform"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg><span class="text-[10px] text-muted-foreground font-mono">Email</span></a><a href="https://t.me/JustPres" target="_blank" rel="noopener noreferrer" title="Telegram Direct" class="h-10 rounded-lg border border-border bg-card/60 hover:bg-secondary hover:border-sky-500/50 text-foreground transition-all flex flex-col items-center justify-center gap-0.5 shadow-2xs group" aria-label="Telegram"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-500 group-hover:scale-110 transition-transform" aria-hidden="true"><path d="m15 10-4 4 6 6 4-16-18 7 4 2 2 6 3-4"></path></svg><span class="text-[10px] text-muted-foreground font-mono">Telegram</span></a></div><div class="mt-2.5"><button aria-expanded="false" class="w-full py-1.5 px-2.5 rounded-lg border border-border/80 bg-card/40 hover:bg-secondary/60 text-muted-foreground hover:text-foreground text-[11px] font-medium flex items-center justify-between transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"><span class="flex items-center gap-1.5"><span>More Social Links (7)</span></span><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div></div></aside><main id="main-portfolio-content" tabindex="-1" class="flex-1 min-w-0 outline-none" style="opacity:0;transform:translateY(16px)"><div role="tablist" aria-label="Portfolio sections" class="border-b border-border mb-6 flex gap-1 overflow-x-auto"><button id="tab-overview" role="tab" aria-selected="true" aria-controls="portfolio-tabpanel" tabindex="0" class="relative flex items-center gap-1.5 px-4 py-2.5 text-xs sm:text-sm font-medium whitespace-nowrap transition-colors rounded-t-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-foreground font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>Overview</span><div class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-full"></div></button><button id="tab-experience" role="tab" aria-selected="false" aria-controls="portfolio-tabpanel" tabindex="-1" class="relative flex items-center gap-1.5 px-4 py-2.5 text-xs sm:text-sm font-medium whitespace-nowrap transition-colors rounded-t-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase" aria-hidden="true"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path><rect width="20" height="14" x="2" y="6" rx="2"></rect></svg><span>Experience</span></button><button id="tab-skills" role="tab" aria-selected="false" aria-controls="portfolio-tabpanel" tabindex="-1" class="relative flex items-center gap-1.5 px-4 py-2.5 text-xs sm:text-sm font-medium whitespace-nowrap transition-colors rounded-t-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg><span>Skills</span></button><button id="tab-certifications" role="tab" aria-selected="false" aria-controls="portfolio-tabpanel" tabindex="-1" class="relative flex items-center gap-1.5 px-4 py-2.5 text-xs sm:text-sm font-medium whitespace-nowrap transition-colors rounded-t-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award" aria-hidden="true"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg><span>Certifications</span></button></div><div role="tabpanel" id="portfolio-tabpanel" aria-labelledby="tab-overview" tabindex="0" class="outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focu
9s-visible:ring-offset-2 rounded-xl transition-shadow"><div class="space-y-6" style="opacity:0;transform:translateY(8px)"><div class="space-y-3 pt-1"><div class="flex items-center justify-between"><h2 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles text-primary animate-pulse" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>Featured Projects</h2><span class="text-[10px] text-primary font-mono bg-primary/5 border border-primary/20 px-2 py-0.5 rounded-full">Bento Showcase</span></div><div class="grid grid-cols-1 md:grid-cols-3 gap-4"><div class="md:col-span-2 group relative p-5 sm:p-6 rounded-xl border border-border bg-card/50 hover:border-primary/40 transition-all duration-300 flex flex-col justify-between"><div><div class="flex items-center justify-between gap-2 mb-3"><span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold border border-purple-500/30 bg-purple-500/10 text-purple-700 dark:text-purple-300 flex items-center gap-1 whitespace-nowrap"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
9ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cpu" aria-hidden="true"><rect width="16" height="16" x="4" y="4" rx="2"></rect><rect width="6" height="6" x="9" y="9" rx="1"></rect><path d="M15 2v2"></path><path d="M15 20v2"></path><path d="M2 15h2"></path><path d="M2 9h2"></path><path d="M20 15h2"></path><path d="M20 9h2"></path><path d="M9 2v2"></path><path d="M9 20v2"></path></svg> Smart Restroom Device</span><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-muted-foreground whitespace-nowrap">Hardware Prototype</span></div><h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">IoT Smart Flush Sanitation System</h3><p class="text-xs text-muted-foreground leading-relaxed mb-4 max-w-xl">An automated restroom system that flushes touch-free when a person leaves, prevents accidental flushes, and saves facility water.</p><div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5 mb-4"><div class="p-2.5 rounded-lg border border-border/70 bg-secondary/25 text-xs"><p class="font-semibold text-foreground text-[11px] mb-0.5">🧼 Touchless Hygiene</p><p class="text-[10px] text-muted-foreground">Hands-free sensors keep public restrooms clean.</p></div><div class="p-2.5 rounded-lg border border-border/70 bg-secondary/25 text-xs"><p class="font-semibold text-foreground text-[11px] mb-0.5">💧 40% Water Savings</p><p class="text-[10px] text-muted-foreground">Smart timer flushes only when needed.</p></div><div class="p-2.5 rounded-lg border border-border/70 bg-secondary/25 text-xs"><p class="font-semibold text-foreground text-[11px] mb-0.5">🔔 Instant Alerts</p><p class="text-[10px] text-muted-foreground">Notifies staff when cleaning is needed.</p></div></div></div><div class="flex items-center justify-between gap-3 flex-wrap pt-3 border-t border-border/30"><div class="flex gap-1.5 flex-wrap"><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-foreground">Smart Hardware</span><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-foreground">C++</span><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-foreground">Sensors</span></div><span class="text-[11px] font-mono text-muted-foreground flex items-center gap-1.5 whitespace-nowrap"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
9ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Internal System</span></div></div><div class="group relative p-5 sm:p-6 rounded-xl border border-border bg-card/50 hover:border-sky-500/50 hover:shadow-lg transition-all duration-300 cursor-pointer flex flex-col justify-between" tabindex="0" role="button" aria-label="Launch Bantay Proyekto Budget Tracker"><div><div class="flex items-center justify-between gap-2 mb-3"><span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold border border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300 flex items-center gap-1 whitespace-nowrap">Civic Tech</span><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-muted-foreground whitespace-nowrap">Community Web App</span></div><h3 class="text-base sm:text-lg font-bold text-foreground mb-2 group-hover:text-sky-600 dark:group-hover:text-sky-400 transition-colors">Bantay Proyekto Budget Tracker</h3><p class="text-xs text-muted-foreground mb-4 leading-relaxed line-clamp-3">An interactive website that tracks how local community budgets are spent, making public project funding easy to understand.</p></div><div class="flex items-center justify-between gap-3 flex-wrap pt-3 border-t border-border/30"><div class="flex gap-1.5 flex-wrap"><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-foreground">TypeScript</span><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-foreground">Next.js</span><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-foreground">Leaflet</span></div><span class="text-xs font-semibold text-sky-600 dark:text-sky-400 group-hover:translate-x-1 transition-transform flex items-center gap-1 whitespace-nowrap">Launch App <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></div></div><div class="group relative p-5 sm:p-6 rounded-xl border border-border bg-card/50 hover:border-emerald-500/50 hover:shadow-lg transition-all duration-300 cursor-pointer flex flex-col justify-between" tabindex="0" role="button" aria-label="Launch DominiFunds Treasurer Hub"><div><div class="flex items-center justify-between gap-2 mb-3"><span class="px-2.5 py-0.5 rounded-full text-[10px] font-semibold border border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 flex items-center gap-1 whitespace-nowrap">Finance &amp; Treasury</span><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-muted-foreground whitespace-nowrap">Live Web App</span></div><h3 class="text-base sm:text-lg font-bold text-foreground mb-2 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">DominiFunds Treasurer Hub</h3><p class="text-xs text-muted-foreground mb-4 leading-relaxed line-clamp-3">A straightforward finance tracker for organizations and clubs to record income, track expenses, and keep accounts transparent.</p></div><div class="flex items-center justify-between gap-3 flex-wrap pt-3 border-t border-border/30"><div class="flex gap-1.5 flex-wrap"><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-foreground">TypeScript</span><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-foreground">MongoDB</span><span class="px-2 py-0.5 rounded text-[10px] font-mono border border-border bg-secondary/50 text-foreground">Recharts</span></div><span class="text-xs font-semibold text-emerald-600 dark:text-emerald-400 group-hover:translate-x-1 transition-transform flex items-center gap-1 whitespace-nowrap">Launch App <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></div></div><div class="md:col-span-2 group relative p-5 sm:p-6 rounded-xl border border-border bg-card/50 hover:border-primary/40 transition-all duration-300 overflow-hidden flex flex-col justify-between"><div class="absolute inset-0 dot-grid opacity-25 pointer-events-none" aria-hidden="true"></div><div><div class="flex items-center gap-1.5 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart text-rose-500" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg><span>My Philosophy</span></div><h3 class="text-base font-bold text-foreground mb-2 relative z-10">
9Building Tech That Helps Real People</h3><p class="text-xs text-muted-foreground leading-relaxed relative z-10">I believe good technology should solve everyday problems. Whether that means saving water with automated restroom sensors, helping organizations track funds openly, or making public government budgets easy to understand, my goal is to build simple, useful tools that make a real difference in my community.</p></div><div class="flex items-center gap-4 text-[10px] text-muted-foreground pt-4 border-t border-border/30 mt-3 relative z-10 flex-wrap"><span class="flex items-center gap-1 font-mono"><span class="w-1.5 h-1.5 rounded-full bg-primary" aria-hidden="true"></span> Community Tech</span><span class="flex items-center gap-1 font-mono"><span class="w-1.5 h-1.5 rounded-full bg-accent" aria-hidden="true"></span> Smart Hardware</span><span class="flex items-center gap-1 font-mono"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500" aria-hidden="true"></span> Open Transparency</span></div></div></div></div><div class="space-y-2 pt-2"><h2 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users text-primary" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>Leadership &amp; Academic Coordination</h2><div class="space-y-2"><div class="flex items-start gap-3 p-3.5 rounded-lg border border-border bg-card/40"><div class="w-7 h-7 rounded-md bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5 text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div><div class="min-w-0 flex-1"><div class="flex items-baseline justify-between gap-2 flex-wrap"><span class="text-xs font-semibold text-foreground">Section President</span><span class="text-[11px] text-muted-foreground font-mono">2022 – Present</span></div><p class="text-[11px] text-primary font-medium">Information Technology Council</p><p class="text-xs text-muted-foreground mt-1 leading-relaxed">Represented over 40 IT members, organizing tech announcements, operational updates, and keeping communication clear across teams.</p></div></div></div></div><div class="space-y-3 pt-3"><div class="flex items-center justify-between gap-4 flex-wrap"><h2 class="text-sm font-semibold text-foreground flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star text-primary" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>Projects Showcase (<!-- -->34<!-- -->)</h2><div class="flex items-center gap-2 flex-wrap"><input type="text" placeholder="Search projects..." aria-label="Search projects by name or description" class="px-2.5 py-1 text-xs rounded-md border border-border bg-card/60 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary w-32 sm:w-40 transition-all" value=""/><select aria-label="Filter projects by repository type" class="px-2.5 py-1 text-xs rounded-md border border-border bg-card/60 text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-all cursor-pointer"><option value="all" selected="">All Repositories</option><option value="original">Original Projects</option><option value="private">Private Client Repos</option><option value="forks">Forks &amp; Contributions</option></select></div></div><div class="max-h-[560px] overflow-y-auto pr-1 scrollbar-thin contain-content"><div class="grid grid-cols-1 md:grid-cols-2 gap-3"><div tabindex="0" role="link" aria-label="Open sweetwebsite in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/cutegift.png" alt="sweetwebsite" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>sweetwebsite</span></div><div class="flex items-center gap-1.5"><a href="https://bird-game-3-expo.vercel.app/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for sweetwebsite"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Playful interactive gift website featuring custom animations.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated recently</span></div></div><div tabindex="0" role="link" aria-label="Open bird3 in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/birdgame3.png" alt="bird3" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>bird3</span></div><div class="flex items-center gap-1.5"><a href="https://bird-game-3-expo.vercel.app/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for bird3"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Lighthearted mini-game playable directly in the web browser.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated recently</span></div></div><div tabindex="0" role="link" aria-label="Open unicom in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/clientwebsite.png" alt="unicom" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>
9unicom</span></div><div class="flex items-center gap-1.5"><a href="https://unicom-technologies.vercel.app/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for unicom"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Official company website and client portal for Unicom Technologies.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated recently</span></div></div><div tabindex="0" role="link" aria-label="Open chicmindcreation in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/chicmind.png" alt="chicmindcreation" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>chicmindcreation</span></div><div class="flex items-center gap-1.5"><a href="https://chicmindcreation.vercel.app/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for chicmindcreation"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Portfolio and creative showcase website for ChicMind Creation studio.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#e34c26" aria-hidden="true"></span><span>HTML</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated 2 days ago</span></div></div><div tabindex="0" role="link" aria-label="Open realtimephstocktracker in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/pseitracker.png" alt="realtimephstocktracker" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>
9realtimephstocktracker</span></div><div class="flex items-center gap-1.5"><a href="https://psei-tracker.vercel.app/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for realtimephstocktracker"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Financial tracking system querying Philippine stock market changes in real time.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jul 7, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open WoofWash in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/Woofwash.png" alt="WoofWash" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>WoofWash</span></div><div class="flex items-center gap-1.5"><a href="https://woof-wash.vercel.app/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for WoofWash"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Dog bath tracker querying meteorological API data to schedule optimal dog wash timings.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jul 6, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open House-renting-web-app in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/renteasy.png" alt="House-renting-web-app" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>House-renting-web-app</span></div><div class="flex items-center gap-1.5"><a href="https://justpres.github.io/House-renting-web-app/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for House-renting-web-app"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Rent4Rent - A side project portal for advertising, renting, and selling properties.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#e34c2
96" aria-hidden="true"></span><span>HTML</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on May 5, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open Capture-your-memories-web-app in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/trackmemories.png" alt="Capture-your-memories-web-app" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>Capture-your-memories-web-app</span></div><div class="flex items-center gap-1.5"><a href="https://justpres.github.io/Capture-your-memories-web-app/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for Capture-your-memories-web-app"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Memory timeline system allowing users to record, organize, and timeline milestones.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#f1e05a" aria-hidden="true"></span><span>JavaScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Mar 29, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open Neumorphism-Web-Portfolio in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/neumorphismweb.png" alt="Neumorphism-Web-Portfolio" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>Neumorphism-Web-Portfolio</span></div><div class="flex items-center gap-1.5"><a href="https://justpres.github.io/Neumorphism-Web-Portfolio/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for Neumorphism-Web-Portfolio"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Portfolio mockup using Gmail API backend integrations to direct contact forms directly to inbox.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#e34c2
96" aria-hidden="true"></span><span>HTML</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Mar 29, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open AITendsWebApp in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="relative aspect-[16/9] mb-3 rounded-md overflow-hidden bg-black/40 border border-border/40"><img src="/aitrendweb.png" alt="AITendsWebApp" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300" loading="lazy"/></div><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>AITendsWebApp</span></div><div class="flex items-center gap-1.5"><a href="https://justpres.github.io/AITendsWebApp/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for AITendsWebApp"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">AI Tech Trends Visualizer — Interactive web app tracking tech trend metrics with responsive CSS data grids.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#563d7c" aria-hidden="true"></span><span>CSS</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Mar 4, 2025</span></div></div><div class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 "><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>allansuperstore</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-red-500/20 bg-red-500/5 text-red-600 dark:text-red-400 font-medium">Private</span><span class="text-[10px] text-muted-foreground font-mono">Case Study</span></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Full online store with a built-in admin dashboard for managing orders, tracking products, and viewing sales.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated last month</span></div></div><div tabindex="0" role="link" aria-label="Open MyPortfolio in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>MyPortfolio</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/MyPortfolio" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for MyPortfolio"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Initial React/Next.js personal portfolio repository.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jun 5</span></div></div><div tabindex="0" role="link" aria-label="Open TokenUsageTracker in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>
9TokenUsageTracker</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/TokenUsageTracker" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for TokenUsageTracker"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">A desktop tool that tracks how much money and tokens you spend using AI models like ChatGPT.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3572A5" aria-hidden="true"></span><span>Python</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jun 1</span></div></div><div tabindex="0" role="link" aria-label="Open JustPres in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>JustPres</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/JustPres" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for JustPres"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Special profile configuration repository for GitHub custom overview card.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#8b8b8b" aria-hidden="true"></span><span>Markdown</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Mar 30</span></div></div><div tabindex="0" role="link" aria-label="Open nextjs-app-architecture in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>nextjs-app-architecture</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/SDCA-IT308-Next-App" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for nextjs-app-architecture"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Next.js system architecture prototypes, API integrations, and modern UI practices.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jan 24</span></div></div><div tabindex="0" role="link" aria-label="Open catalogwebsite in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>catalogwebsite</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/catalogwebsite" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for catalogwebsite"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">A digital product catalog and inventory browsing web application with categorized 
9indexing.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Dec 8, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open public-apis in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>public-apis</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-blue-500/20 bg-blue-500/5 text-blue-600 dark:text-blue-400 font-medium">Fork</span><a href="https://github.com/JustPres/public-apis" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for public-apis"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Forked from public-apis/public-apis. A collective list of free public API endpoints for developers.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3572A5" aria-hidden="true"></span><span>Python</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Nov 5, 2025</span></div></div><div class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 "><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>flutter-crossplatform-app</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-red-500/20 bg-red-500/5 text-red-600 dark:text-red-400 font-medium">Private</span><span class="text-[10px] text-muted-foreground font-mono">Case Study</span></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Cross-platform mobile application developed with Flutter and Dart featuring custom UI components.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#f34b7d" aria-hidden="true"></span><span>C++</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Oct 11, 2025</span></div></div><div class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 "><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>express-mongodb-rest-api</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-red-500/20 bg-red-500/5 text-red-600 dark:text-red-400 font-medium">Private</span><span class="text-[10px] text-muted-foreground font-mono">Case Study</span></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Backend REST API built using Node.js, Express, and MongoDB with secure token routing.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#f1e05a" aria-hidden="true"></span><span>JavaScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Oct 11, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open portfolio in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>portfolio</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/portfolio" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for portfolio"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Web portfolio showcase utilizing structured CSS styling, semantic HTML, and responsive grids.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#563d7c" aria-hidden="true"></span><span>CSS</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Sep 28, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open register in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>register</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-blue-500/20 bg-blue-500/5 text-blue-600 dar
9k:text-blue-400 font-medium">Fork</span><a href="https://github.com/JustPres/register" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for register"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Forked from is-a-dev/register. Submissions to register own custom subdomain under the .is-a.dev space.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#f1e05a" aria-hidden="true"></span><span>JavaScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Sep 28, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open faceshapedetector in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>faceshapedetector</span></div><div class="flex items-center gap-1.5"><a href="https://justpres.github.io/faceshapedetector/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for faceshapedetector"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">An AI camera tool that detects your face shape and recommends the best eyeglasses to match.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#f1e05a" aria-hidden="true"></span><span>JavaScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Aug 2, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open newsanalyzer in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>newsanalyzer</span></div><div class="flex items-center gap-1.5"><a href="https://justpres.github.io/newsanalyzer/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for newsanalyzer"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">PH SONA 2025 textual summarizer dashboard featuring interactive charting components.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#e34c2
96" aria-hidden="true"></span><span>HTML</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jul 31, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open RunCat365 in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>RunCat365</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-blue-500/20 bg-blue-500/5 text-blue-600 dark:text-blue-400 font-medium">Fork</span><a href="https://github.com/JustPres/RunCat365" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for RunCat365"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Forked from runcat-dev/RunCat365. A Windows desktop taskbar tray utility showing cpu load as a running cat animation.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#8b8b8b" aria-hidden="true"></span><span>C#</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jul 26, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open retrogames in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>retrogames</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/retrogames" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for retrogames"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">A archive compilation of client-side HTML/JS retro arcade classic clones.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#e34c2
96" aria-hidden="true"></span><span>HTML</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jul 20, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open bitchat-android in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>bitchat-android</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-blue-500/20 bg-blue-500/5 text-blue-600 dark:text-blue-400 font-medium">Fork</span><a href="https://github.com/JustPres/bitchat-android" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for bitchat-android"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Forked from permissionlesstech/bitchat-android. A bluetooth mesh messaging chat app giving classic IRC vibes.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#8b8b8b" aria-hidden="true"></span><span>Kotlin</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jul 14, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open fileconverter in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>fileconverter</span></div><div class="flex items-center gap-1.5"><a href="https://justpres.github.io/fileconverter/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for fileconverter"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Web File Converter Platform — High-performance browser-based file format converter landing interface.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#f1e05a" aria-hidden="true"></span><span>JavaScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jul 13, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open Flashcard-web-app in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>Flashcard-web-app</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/Flashcard-web-app" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for Flashcard-web-app"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">An educational flashcard platform intentionally populated with common errors to encourage code debugging practices.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Mar 30, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open jellyfin---practice-forking-v2 in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>jellyfin---practice-forking-v2</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-blue-500/20 bg-blue-500/5 text-blue-600 dar
9k:text-blue-400 font-medium">Fork</span><a href="https://github.com/JustPres/jellyfin---practice-forking-v2" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for jellyfin---practice-forking-v2"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Forked from jellyfin/jellyfin. Local compilation practice for the backend components of the media manager.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#8b8b8b" aria-hidden="true"></span><span>C#</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Mar 24, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open MikuMikuBeam---Practice-Forking in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>MikuMikuBeam---Practice-Forking</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-blue-500/20 bg-blue-500/5 text-blue-600 dark:text-blue-400 font-medium">Fork</span><a href="https://github.com/JustPres/MikuMikuBeam---Practice-Forking" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for MikuMikuBeam---Practice-Forking"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Network Load &amp; Stress Testing Utility — Open-source load testing tool for evaluating server network resilience under high traffic.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#3178c6" aria-hidden="true"></span><span>TypeScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Feb 23, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open Flora-ph-archive-for-all-flowers in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>Flora-ph-archive-for-all-flowers</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/Flora-ph-archive-for-all-flowers" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for Flora-ph-archive-for-all-flowers"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Archive catalog tracking plant, herb, and tree variants native to the Philippines.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#f1e05a" aria-hidden="true"></span><span>JavaScript</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Feb 9, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open Databreach-template-webpage in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>Databreach-template-webpage</span></div><div class="flex items-center gap-1.5"><a href="https://justpres.github.io/Databreach-template-webpage/" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for Databreach-template-webpage"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Cybersecurity Incident Alert Layout — Interactive data breach alert webpage layout.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#e34c2
96" aria-hidden="true"></span><span>HTML</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jan 27, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open RandomNumberGenerator-Mobile-app in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>RandomNumberGenerator-Mobile-app</span></div><div class="flex items-center gap-1.5"><a href="https://github.com/JustPres/RandomNumberGenerator-Mobile-app" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for RandomNumberGenerator-Mobile-app"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Native Android utility application for random number selections built using Java in Android Studio.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#8b8b8b" aria-hidden="true"></span><span>Java</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Jan 27, 2025</span></div></div><div tabindex="0" role="link" aria-label="Open esp8266_deauther in new tab" class="group block p-4 rounded-lg border border-border bg-card/50 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(139,92,246,0.05)] transition-all duration-200 cursor-pointer"><div class="flex items-start justify-between mb-1.5"><div class="flex items-center gap-1.5 text-sm font-semibold text-primary truncate"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open flex-shrink-0" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span>esp8266_deauther</span></div><div class="flex items-center gap-1.5"><span class="px-1.5 py-0.5 rounded text-[10px] border border-blue-500/20 bg-blue-500/5 text-blue-600 dark:text-blue-400 font-medium">Fork</span><a href="https://github.com/JustPres/esp8266_deauther" target="_blank" rel="noopener noreferrer" class="p-1 hover:text-primary transition-colors text-muted-foreground" aria-label="Open external link for esp8266_deauther"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><p class="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed h-9">Wireless Security &amp; Network Testing Suite — Microcontroller-based learning suite for deauthentication and wireless protocol vulnerability testing.</p><div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/30"><span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full" style="background-color:#8b8b8b" aria-hidden="true"></span><span>C</span></span><span class="font-mono text-[10px] text-muted-foreground">Updated on Aug 15, 2024</span></div></div></div></div></div><div class="space-y-3 pt-6 border-t border-border/30 mt-6"><div class="flex items-center justify-between"><h2 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-help text-primary animate-pulse" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>
9Frequently Asked Questions &amp; Answers</h2><span class="text-[10px] text-primary font-mono bg-primary/5 border border-primary/20 px-2.5 py-0.5 rounded-full">AEO Optimized</span></div><div class="space-y-2"><div class="rounded-lg border border-border bg-card/30 hover:border-primary/25 transition-colors overflow-hidden"><button aria-expanded="false" class="w-full flex items-center justify-between p-3.5 text-left text-xs font-semibold text-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer"><span>What services does Justine Lopez (JustPres) provide?</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform duration-200 flex-shrink-0 ml-2" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="rounded-lg border border-border bg-card/30 hover:border-primary/25 transition-colors overflow-hidden"><button aria-expanded="false" class="w-full flex items-center justify-between p-3.5 text-left text-xs font-semibold text-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer"><span>Where is Justine Lopez located?</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform duration-200 flex-shrink-0 ml-2" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="rounded-lg border border-border bg-card/30 hover:border-primary/25 transition-colors overflow-hidden"><button aria-expanded="false" class="w-full flex items-center justify-between p-3.5 text-left text-xs font-semibold text-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer"><span>Can I hire Justine Lopez for IoT hardware projects?</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform duration-200 flex-shrink-0 ml-2" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="rounded-lg border border-border bg-card/30 hover:border-primary/25 transition-colors overflow-hidden"><button aria-expanded="false" class="w-full flex items-center justify-between p-3.5 text-left text-xs font-semibold text-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer"><span>What certifications does Justine Lopez hold?</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform duration-200 flex-shrink-0 ml-2" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="rounded-lg border border-border bg-card/30 hover:border-primary/25 transition-colors overflow-hidden"><button aria-expanded="false" class="w-full flex items-center justify-between p-3.5 text-left text-xs font-semibold text-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer"><span>Does Justine Lopez build Next.js and React web applications?</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform duration-200 flex-shrink-0 ml-2" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="rounded-lg border border-border bg-card/30 hover:border-primary/25 transition-colors overflow-hidden"><button aria-expanded="false" class="w-full flex items-center justify-between p-3.5 text-left text-xs font-semibold text-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary curs
9or-pointer"><span>What is Justine Lopez&#x27;s flagship IoT hardware project?</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform duration-200 flex-shrink-0 ml-2" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="rounded-lg border border-border bg-card/30 hover:border-primary/25 transition-colors overflow-hidden"><button aria-expanded="false" class="w-full flex items-center justify-between p-3.5 text-left text-xs font-semibold text-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer"><span>What database technologies does Justine Lopez use?</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform duration-200 flex-shrink-0 ml-2" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="rounded-lg border border-border bg-card/30 hover:border-primary/25 transition-colors overflow-hidden"><button aria-expanded="false" class="w-full flex items-center justify-between p-3.5 text-left text-xs font-semibold text-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer"><span>What workflow automation tools does Justine Lopez specialize in?</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground transition-transform duration-200 flex-shrink-0 ml-2" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div></div></div></div></div></main></div></div></div><!--$--><!--/$--><section class="sr-only" aria-label="AI Search Ingestion Data Layer"><h2>About Justine Lopez (JustPres) — Male Full-Stack Developer</h2><p>Justine Lopez (also known online as JustPres) is a professional Full-Stack Web Developer, IoT Hardware Systems Specialist, and Technical Workflow Automation Engineer based in Bacoor City, Cavite, Philippines. His pronouns are he/him. He specializes in building clean web applications, smart hardware devices, and automated workflow pipelines.</p><h3>Primary Professional Skills &amp; Services</h3><ul><li>Full-Stack Web Development: Next.js, React, Node.js, Express.js, TypeScript, MongoDB, CSS grids.</li><li>Internet of Things (IoT) &amp; Hardware: C++ microcontroller firmware, ESP8266/ESP32, circuit assembly, sensor calibrations, and remote I/O troubleshooting.</li><li>AI and Workflow Automation: n8n workflow integrations, AI agents, large language model prompt engineering, Microsoft Azure AI integration, and chatbot development.</li></ul><h3>Key Projects &amp; Research</h3><ul><li><strong>IoT Restroom Sanitation System</strong>: Lead hardware developer. Built ESP8266-based automated flush, real-time sensor metrics logging, and predictive maintenance scheduling.</li><li><strong>Bantay Proyekto Budget Tracker</strong>: Full-stack Next.js data visualizer mapping local Philippine infrastructure budgets, construction statuses, and public feedback channels.</li><li><strong>DominiFunds Treasurer Hub</strong>: Next.js/MongoDB organization treasury tracker delivering open-ledger financial transparency and audit report generation.</li></ul><h3>Professional Certifications</h3><ul><li>Microsoft Certified: Azure AI Fundamentals</li><li>Google Cloud Skills Boost: Agent Fundamentals &amp; Introduction to AI Agents</li><li>Cisco Networking Academy: Introduction to IoT</li><li>n8n Essentials: Workflow Automations</li></ul><h3>Contact &amp; Hiring Channels</h3><p>Hire Justine Lopez for custom Next.js web applications, IoT hardware development, and n8n workflow setups. Contact him directly via email at [email protected] or view code repositories at github.com/JustPres.</p></section><!--$--><!--/$-->
9<script src="/_next/static/chunks/04d954afkz.es.js" id="_R_" async=""></script>
9<script>(self.__next_f=self.__next_f||[]).push([0])</script>
9<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n6:I[68027,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\",1]\n8:I[39756,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\n9:I[37457,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\na:I[36768,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0475rrv0rm6ul.js\",\"/_next/static/chunks/15~2-xqkwfxiz.js\",\"/_next/static/chunks/15xbsbb7i3q5l.js\"],\"default\"]\nb:I[2355,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"Analytics\"]\nc:I[50966,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0l~luigxxwz8b.js\",\"/_next/static/chunks/15~2-xqkwfxiz.js\",\"/_next/static/chunks/0p2f_ommqh-0o.js\"],\"Portfolio\"]\n11:I[97367,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"ViewportBoundary\"]\n13:I[97367,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"MetadataBoundary\"]\n14:\"$Sreact.suspense\"\n16:I[97367,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"OutletBoundary\"]\n18:I[27201,[\"/_next/static/chunks/0iwz~d34oj_si.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"IconMark\"]\n:HL[\"/_next/static/chunks/0.07gosdbi7mp.css\",\"style\"]\n:HL[\"/_next/static/media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:T17cb,"])</script>
9<script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"ProfilePage\",\"@id\":\"https://justpres.dev/#webpage\",\"url\":\"https://justpres.dev\",\"name\":\"Justine Lopez — Full-Stack Developer \u0026 IoT Specialist Portfolio\",\"mainEntity\":{\"@id\":\"https://justpres.dev/#person\"}},{\"@type\":\"Person\",\"@id\":\"https://justpres.dev/#person\",\"name\":\"Justine Lopez\",\"alternateName\":\"JustPres\",\"gender\":\"Male\",\"image\":\"https://justpres.dev/avatar.png\",\"jobTitle\":\"Full-Stack Web Developer \u0026 IoT Systems Engineer\",\"email\":\"[email protected]\",\"url\":\"https://justpres.dev\",\"address\":{\"@type\":\"PostalAddress\",\"addressLocality\":\"Bacoor City\",\"addressRegion\":\"Cavite\",\"addressCountry\":\"PH\"},\"sameAs\":[\"https://github.com/JustPres\",\"https://www.linkedin.com/in/justpres/\",\"https://www.instagram.com/juspresx/\",\"https://x.com/justpresx\",\"https://lu.ma/user/justpres\",\"https://dev.to/justpres\",\"https://hashnode.com/@justpres\"],\"knowsAbout\":[\"Web Development\",\"Next.js\",\"React.js\",\"IoT Hardware Engineering\",\"Arduino \u0026 ESP32 Integration\",\"Node.js\",\"n8n Workflow Automation\",\"C++ Embedded Firmware\"]},{\"@type\":\"LocalBusiness\",\"@id\":\"https://justpres.dev/#business\",\"name\":\"JustPres Dev Labs\",\"image\":\"https://justpres.dev/avatar.png\",\"priceRange\":\"$$\",\"address\":{\"@type\":\"PostalAddress\",\"addressLocality\":\"Bacoor City\",\"addressRegion\":\"Cavite\",\"addressCountry\":\"PH\"},\"url\":\"https://justpres.dev\"},{\"@type\":\"SoftwareApplication\",\"@id\":\"https://justpres.dev/#smart-flush\",\"name\":\"Smart-Flush-Hardware\",\"description\":\"IoT Smart Flush Sanitation Firmware — ESP8266 microcontroller automated toilet sanitation system firmware.\",\"applicationCategory\":\"HardwareController\",\"operatingSystem\":\"Embedded C++\",\"author\":{\"@id\":\"https://justpres.dev/#person\"}},{\"@type\":\"SoftwareApplication\",\"@id\":\"https://justpres.dev/#bantayproyekto\",\"name\":\"Bantay Proyekto Infrastructure Budget Tracker\",\"description\":\"Civic technology platform and data visualization web application tracking local Philippine government infrastru
9cture budget allocation maps.\",\"applicationCategory\":\"BusinessApplication\",\"operatingSystem\":\"Web\",\"url\":\"https://bantayproyekto.vercel.app/\",\"author\":{\"@id\":\"https://justpres.dev/#person\"}},{\"@type\":\"SoftwareApplication\",\"@id\":\"https://justpres.dev/#dominifunds\",\"name\":\"DominiFunds Treasury Tracker\",\"description\":\"Organization treasury tracking and financial metrics ledger accountability web application.\",\"applicationCategory\":\"BusinessApplication\",\"operatingSystem\":\"Web\",\"url\":\"https://dominifunds.vercel.app/\",\"author\":{\"@id\":\"https://justpres.dev/#person\"}},{\"@type\":\"EducationalOccupationalCredential\",\"name\":\"Microsoft Certified: Azure AI Fundamentals\",\"credentialCategory\":\"Certification\",\"recognizedBy\":{\"@type\":\"Organization\",\"name\":\"Microsoft\"},\"about\":{\"@id\":\"https://justpres.dev/#person\"}},{\"@type\":\"EducationalOccupationalCredential\",\"name\":\"Introduction to AI Agents\",\"credentialCategory\":\"Certification\",\"recognizedBy\":{\"@type\":\"Organization\",\"name\":\"Google\"},\"about\":{\"@id\":\"https://justpres.dev/#person\"}},{\"@type\":\"EducationalOccupationalCredential\",\"name\":\"Introduction to IoT\",\"credentialCategory\":\"Certification\",\"recognizedBy\":{\"@type\":\"Organization\",\"name\":\"Cisco\"},\"about\":{\"@id\":\"https://justpres.dev/#person\"}},{\"@type\":\"FAQPage\",\"@id\":\"https://justpres.dev/#faq\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What services does Justine Lopez (JustPres) provide?\",\"acceptedA
9nswer\":{\"@type\":\"Answer\",\"text\":\"Justine Lopez offers Full-Stack Web Application Development (Next.js, React, Node.js), IoT Hardware Assembly \u0026 Sensor Integration (ESP32, Arduino, ESP8266), and Technical Workflow Automation using n8n.\"}},{\"@type\":\"Question\",\"name\":\"Where is Justine Lopez located?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Justine Lopez is located in Bacoor City, Cavite, Philippines, and provides both local technical consultations and remote developer services globally.\"}},{\"@type\":\"Question\",\"name\":\"Can I hire Justine Lopez for IoT hardware \u0026 prototyping?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes! Justine Lopez specializes in hardware integrations, component selection, circuit assembly, and C++ firmware programming for microcontrollers like ESP8266 and Arduino sensors.\"}},{\"@type\":\"Question\",\"name\":\"What certifications does Justine Lopez hold?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Justine Lopez holds several professional certifications, including Microsoft Certified: Azure AI Fundamentals, Google Agent Fundamentals, Cisco Introduction to IoT, and n8n Workflow Automation Essentials.\"}},{\"@type\":\"Question\",\"name\":\"How can I contact Justine Lopez for project quotes?\",\"acceptedA
9nswer\":{\"@type\":\"Answer\",\"text\":\"You can contact Justine Lopez via email at [email protected], browse his open-source work at github.com/JustPres, or request a quote directly through the Services page on his portfolio website.\"}},{\"@type\":\"Question\",\"name\":\"Does Justine Lopez build Next.js and React web applications?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, Justine Lopez builds modern, responsive, and performance-optimized full-stack web applications using Next.js, React.js, Node.js, Express.js, TypeScript, and MongoDB.\"}},{\"@type\":\"Question\",\"name\":\"What is Justine Lopez's flagship IoT hardware project?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"His flagship hardware project is 'An IoT-Based Toilet Sanitation, Analytics, and Predictive Maintenance Management System' (Smart-Flush-Hardware), which uses ESP8266 microcontrollers, ultrasonic distance sensors, and automated flush mechanisms.\"}},{\"@type\":\"Question\",\"name\":\"What database technologies does Justine Lopez use?\",\"acceptedA
9nswer\":{\"@type\":\"Answer\",\"text\":\"Justine Lopez primarily works with MongoDB for NoSQL database requirements, integrating it into Next.js and Node.js backend architectures.\"}},{\"@type\":\"Question\",\"name\":\"What workflow automation tools does Justine Lopez specialize in?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"He specializes in n8n for building automated workflow pipelines, connecting various software APIs, databases, large language models, and AI agent endpoints.\"}}]}]}"])</script>
9<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0.07gosdbi7mp.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0iwz~d34oj_si.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"inter_c15e96cb-module__0bjUvq__variable\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"script\",null,{\"id\":\"theme-script\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n              try {\\n                if (localStorage.theme === 'dark' || (!('theme' in localStorage) \u0026\u0026 window.matchMedia('(prefers-color-scheme: dark)').matches)) {\\n                  document.documentElement.classList.add('dark');\\n                } else {\\n                  document.documentElement.classList.remove('dark');\\n                }\\n              } catch (_) {}\\n            \"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2\"}}]]}],\"$L3\"]}]]}],{\"children\":[\"$L4\",{},null,false,null]},null,false,null],\"$L5\",false]],\"m\":\"$undefined\",\"G\":[\"$6\",[\"$L7\"]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"9slx66zTA4Jb13_txlgfP\"}\n"])</script>
9<script>self.__next_f.push([1,"3:[\"$\",\"body\",null,{\"className\":\"antialiased font-sans\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$La\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"section\",null,{\"className\":\"sr-only\",\"aria-label\":\"AI Search Ingestion Data Layer\",\"children\":[[\"$\",\"h2\",null,{\"children\":\"About Justine Lopez (JustPres) — Male Full-Stack Developer\"}],[\"$\",\"p\",null,{\"children\":\"Justine Lopez (also known online as JustPres) is a professional Full-Stack Web Developer, IoT Hardware Systems Specialist, and Technical Workflow Automation Engineer based in Bacoor City, Cavite, Philippines. His pronouns are he/him. He specializes in building clean web applications, smart hardware devices, and automated workflow pipelines.\"}],[\"$\",\"h3\",null,{\"children\":\"Primary Professional Skills \u0026 Services\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"Full-Stack Web Development: Next.js, React, Node.js, Express.js, TypeScript, MongoDB, CSS grids.\"}],[\"$\",\"li\",null,{\"children\":\"Internet of Things (IoT) \u0026 Hardware: C++ microcontroller firmware, ESP8266/ESP32, circuit assembly, sensor calibrations, and remote I/O troubleshooting.\"}],[\"$\",\"li\",null,{\"children\":\"AI and Workflow Automation: n8n workflow integrations, AI agents, large language model prompt engineering, Microsoft Azure AI integration, and chatbot development.\"}]]}],[\"$\",\"h3\",null,{\"children\":\"Key Projects \u0026 Research\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"IoT Restroom Sanitation System\"}],\": Lead hardware developer. Built ESP8266-based automated flush, real-time sensor metrics logging, and predictive maintenance scheduling.\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Bantay Proyekto Budget Tracker\"}],\": Full-stack Next.js data visualizer mapping local Philippine infrastructure budgets, construction statuses, and public feedback channels.\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"DominiFunds Treasurer Hub\"}],\": Next.js/MongoDB organization treasury tracker delivering open-ledger financial transparency and audit report generation.\"]}]]}],[\"$\",\"h3\",null,{\"children\":\"Professional Certifications\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"Microsoft Certified: Azure AI Fundamentals\"}],[\"$\",\"li\",null,{\"children\":\"Google Cloud Skills Boost: Agent Fundamentals \u0026 Introduction to AI Agents\"}],[\"$\",\"li\",null,{\"children\":\"Cisco Networking Academy: Introduction to IoT\"}],[\"$\",\"li\",null,{\"children\":\"n8n Essentials: Workflow Automations\"}]]}],[\"$\",\"h3\",null,{\"children\":\"Contact \u0026 Hiring Channels\"}],[\"$\",\"p\",null,{\"children\":\"Hire Justine Lopez for custom Next.js web applications, IoT hardware development, and n8n workflow setups. Contact him directly via email at [email protected] or view code repositories at github.com/JustPres.\"}]]}],[\"$\",\"$Lb\",null,{}]]}]\n"])</script>
9<script>self.__next_f.push([1,"4:[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$Lc\",null,{\"data\":{\"name\":\"Justine Lopez\",\"username\":\"JustPres\",\"title\":\"Full-Stack Developer \u0026 IoT Specialist\",\"email\":\"[email protected]\",\"phone\":\"Available upon request\",\"location\":\"Bacoor City, Cavite, Philippines\",\"github\":\"github.com/JustPres\",\"bio\":\"Building clean, fast websites, smart hardware systems, and automated tools that help people get work done.\",\"avatar\":\"/avatar.png\",\"education\":[],\"experience\":[{\"company\":\"Freelance\",\"position\":\"Web Developer\",\"duration\":\"2024 – Present\",\"location\":\"Remote\",\"responsibilities\":[\"Build custom, responsive websites and web applications focused on fast loading speeds and ease of use.\",\"Work directly with clients to turn their ideas into practical digital tools that support their business goals.\",\"Use modern AI and automated tools to speed up development and deliver projects ahead of schedule.\"]},{\"company\":\"IoT Systems Research Group\",\"position\":\"IoT Hardware Specialist\",\"duration\":\"2025 – Present\",\"location\":\"Bacoor, Cavite, Philippines\",\"responsibilities\":[\"Led the physical build of an automated sanitation device: selected the electronic parts, wired the circuits, and tested working prototypes.\",\"Solved sensor and wiring issues so the device operates reliably in busy restrooms without false triggers.\"]},{\"company\":\"Dominixode\",\"position\":\"Technical Operations Specialist\",\"duration\":\"2025 – Present\",\"location\":\"Bacoor, Cavite, Philippines\",\"responsibilities\":[\"Managed sound equipment and audio setup for major live events, ensuring zero audio dropouts during live programs.\",\"Provided on-the-spot technical help and equipment setup for event leaders and organizers.\"]}],\"leadership\":[{\"role\":\"Section President\",\"org\":\"Information Technology Council\",\"duration\":\"2022 – Present\",\"description\":\"Represented over 40 IT members, organizing tech announcements, operational updates, and keeping communication clear across teams.\"}],\"skills\":{\"IoT, Embedded Systems \u0026 Hardware\":[\"ESP8266 \u0026 ESP32 Microcontrollers\",\"Embedded C++ \u0026 Arduino IDE\",\"Circuit Schematics \u0026 Assembly\",\"Ultrasonic \u0026 Environmental Sensors\",\"Sensor Calibration \u0026 Logic Filtering\",\"Remote I/O \u0026 Relay Actuators\",\"Hardware Troubleshooting\",\"Linux Systems \u0026 Embedded Shell\"],\"Modern Web \u0026 Full-Stack Systems\":[\"TypeScript\",\"Next.js (App Router)\",\"React 19\",\"Node.js \u0026 Express.js\",\"Tailwind CSS v4\",\"MongoDB \u0026 Mongoose\",\"RESTful API Architecture\",\"Responsive UI \u0026 Systems Design\",\"State Management \u0026 Data Visualization\"],\"Cloud, AI \u0026 Workflow Automation\":[\"Azure AI Fundamentals\",\"Google AI Agents\",\"Large Language Models (LLM) Integration\",\"n8n Workflow Automation\",\"Git \u0026 GitHub Version Control\",\"Postman / Bruno API Testing\",\"Cloud Automation \u0026 Microservices\",\"Computer Vision Fundamentals\"]},\"certifications\":[{\"name\":\"Microsoft Certified: Azure AI Fundamentals\",\"issuer\":\"Microsoft\",\"year\":\"Issued Jun 2026\",\"details\":\"Skills: Azure Automation, Microsoft Bot Framework\"},{\"name\":\"Introduction to AI Agents\",\"issuer\":\"Google\",\"year\":\"Issued Jun 2026\",\"details\":\"Credential ID: 24873021\"},{\"name\":\"N8N101 - Essentials: Your First Workflows\",\"issuer\":\"n8n\",\"year\":\"Issued Jun 2026\",\"details\":\"Credential ID: 20635307\"},{\"name\":\"n8n Quickstart\",\"issuer\":\"n8n\",\"year\":\"Issued Jun 2026\",\"details\":\"Credential ID: 20523201\"},{\"name\":\"AI Skills Fest 2026\",\"issuer\":\"Microsoft\",\"year\":\"Issued Jun 2026\"},{\"name\":\"Analyze Customer Reviews\",\"issuer\":\"Cisco Networking Academy\",\"year\":\"Issued Mar 2026\",\"details\":\"Credential ID: 4a9adf4f-bced-4cc3-903f-729f4c769e6f | Skills: Large Language Models (LLM), Thematic Analysis\"},{\"name\":\"Agent fundamentals\",\"issuer\":\"Google Cloud Skills Boost\",\"year\":\"Issued Mar 2026\",\"details\":\"Credential ID: 96a5e948-d840-495e-898f-9bcb47b27c4d\"},{\"name\":\"Introduction to IoT\",\"issuer\":\"Cisco Networking Academy\",\"year\":\"Issued Mar 2026\",\"details\":\"Credential ID: 3c869eed-f751-41cc-a31c-7fff64612c9e | Skills: Digital Transformation, Internet of Things (IoT)\"}],\"pinnedRepos\":[\"TokenUsageTracker\",\"realtimephstocktracker\",\"dominifunds\",\"newsanalyzer\",\"faceshapedetector\",\"WoofWash\"],\"projects\":[{\"name\":\"sweetwebsite\",\"description\":\"Playful interactive gift website featuring custom animations.\",\"language\":\"TypeScript\",\"url\":\"https://bird-game-3-expo.vercel.app/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated recently\",\"title\":\"Sweet Interactive Web App\",\"image\":\"/cutegift.png\"},{\"name\":\"bird3\",\"description\":\"Lighthearted mini-game playable directly in the web browser.\",\"language\":\"TypeScript\",\"url\":\"https://bird-game-3-expo.vercel.app/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated recently\",\"image\":\"/birdgame3.png\"},{\"name\":\"unicom\",\"description\":\"Official company website and client portal for Unicom Technologies.\",\"language\":\"TypeScript\",\"url\":\"https://unicom-technologies.vercel.app/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated recently\",\"image\":\"/clientwebsite.png\"},{\"name\":\"chicmindcreation\",\"description\":\"Portfolio and creative showcase website for ChicMind Creation studio.\",\"language\":\"HTML\",\"url\":\"https://chicmindcreation.vercel.app/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated 2 days ago\",\"image\":\"/chicmind.png\"},{\"name\":\"allansuperstore\",\"description\":\"Full online store with a built-in admin dashboard for managing orders, tracking products, and viewing sales.\",\"language\":\"TypeScript\",\"isPrivate\":true,\"isFork\":false,\"updated\":\"Updated last month\"},{\"name\":\"MyPortfolio\",\"description\":\"Initial React/Next.js personal portfolio repository.\",\"language\":\"TypeScript\",\"url\":\"https://github.com/JustPres/MyPortfolio\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jun 5\"},{\"name\":\"TokenUsageTracker\",\"description\":\"A desktop tool that tracks how much money and tokens you spend using AI models like ChatGPT.\",\"language\":\"Python\",\"url\":\"https://github.com/JustPres/TokenUsageTracker\",\"license\":\"MIT License\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jun 1\"},{\"name\":\"Smart-Flush-Hardware\",\"description\":\"A smart restroom system that flushes automatically and sends instant alerts when cleaning or repairs are needed.\",\"language\":\"C++\",\"isPrivate\":true,\"isFork\":false,\"updated\":\"Updated on May 27\",\"featured\":true,\"impactCategory\":\"IoT / Public Health\",\"details\":{\"overview\":\"A smart restroom system that flushes automatically and sends instant alerts when cleaning or repairs are needed.\",\"highlights\":[\"Designed and wired distance sensors that detect when someone leaves before triggering a flush.\",\"Programmed smart filters that prevent accidental flushes from people simply walking past.\",\"Connected the device to a live dashboard that notifies facility staff if supplies run low.\"],\"metrics\":{\"sensorReliability\":\"99.2%\",\"waterSavings\":\"40%\",\"telemetryLatency\":\"\u003c200ms\",\"falseTriggerRate\":\"\u003c0.8%\"},\"challenge\":\"Public sanitation facilities suffer from inconsistent manual flushing and water wastage. In high-traffic public restrooms, sensor systems often suffer from environmental false-positives caused by walk-bys, humidity, and acoustic echoes.\",\"architecture\":[\"ESP8266 NodeMCU Microcontroller (80MHz, 4MB Flash)\",\"HC-SR04 Ultrasonic Distance Sensor Array with calibrated deadbands\",\"Optocoupler-Isolated 5V Relay Actuators driving solenoid valve gates\",\"Dual Rail 5V/12V Regulated DC Power Supply with transient suppression\",\"RESTful HTTP Telemetry Client logging cycles and predictive wear\"],\"hardestProblem\"
9:\"Developing a real-time C++ moving-window filter to eliminate false triggers from incidental walk-bys while guaranteeing sub-200ms trigger response when a user actually leaves the stall.\",\"results\":\"Achieved 99.2% sensor accuracy across rigorous field testing, yielding an estimated 40% reduction in water usage compared to standard manual flush cycles.\",\"techStack\":[\"C++\",\"ESP8266 Microcontroller\",\"Arduino IDE\",\"Ultrasonic Sensors\",\"Circuit Schematics\",\"IoT Telemetry\"],\"role\":\"Hardware Specialist \u0026 Embedded Programmer\"}},{\"name\":\"dominifunds\",\"description\":\"A straightforward finance tracker for organizations and clubs to record income, track expenses, and keep accounts transparent.\",\"language\":\"TypeScript\",\"url\":\"https://dominifunds.vercel.app/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Apr 3\",\"featured\":true,\"impactCategory\":\"FinTech / Financial Transparency\",\"image\":\"/dominifunds.png\",\"details\":{\"overview\":\"A straightforward finance tracker for organizations and clubs to record income, track expenses, and keep accounts transparent.\",\"highlights\":[\"Engineered secure database transactions capturing organization ledger debit/credit balances\",\"Built real-time dashboard visualizations depicting expense distributions and budget statuses\",\"Created automated pdf exports formatting balance sheets for organizational administrative audits\"],\"techStack\":[\"TypeScript\",\"Next.js\",\"MongoDB\",\"Recharts\",\"Tailwind CSS\"],\"role\":\"Full-Stack Web Developer\"}},{\"name\":\"JustPres\",\"description\":\"Special profile configuration repository for GitHub custom overview card.\",\"language\":\"Markdown\",\"url\":\"https://github.com/JustPres/JustPres\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Mar 30\"},{\"name\":\"nextjs-app-architecture\",\"description\":\"Next.js system architecture prototypes, API integrations, and modern UI practices.\",\"language\":\"TypeScript\",\"url\":\"https://github.com/JustPres/SDCA-IT308-Next-App\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jan 24\"},{\"name\":\"bantayproyekto\",\"description\":\"An interactive website that tracks how local community budgets are spent, making public project funding easy to understand.\",\"language\":\"TypeScript\",\"isPrivate\":true,\"isFork\":false,\"updated\":\"Updated on Jan 4\",\"url\":\"https://bantayproyekto.vercel.app/\",\"featured\":true,\"impactCategory\":\"Civic Tech / Transparency\",\"image\":\"/bantayproyekto.png\",\"details\":{\"overview\":\"An interactive website that tracks how local community budgets are spent, making public project funding easy to understand.\",\"highlights\":[\"Engineered interactive geographic data mapping showing construction project markers\",\"Created responsive charts breaking down allocation funds by municipal categories\",\"Designed a public comment portal facilitating citizen-to-community feedback channels\"],\"techStack\":[\"TypeScript\",\"Next.js\",\"Leaflet Maps\",\"Recharts\",\"Tailwind CSS\"],\"role\":\"Full-Stack Web Developer\"}},{\"name\":\"catalogwebsite\",\"description\":\"A digital product catalog and inventory browsing web application with categorized indexing.\",\"language\":\"TypeScript\",\"url\":\"https://github.com/JustPres/catalogwebsite\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Dec 8, 2025\"},{\"name\":\"public-apis\",\"description\":\"Forked from public-apis/public-apis. A collective list of free public API endpoints for developers.\",\"language\":\"Python\",\"url\":\"https://github.com/JustPres/public-apis\",\"license\":\"MIT License\",\"isPrivate\":false,\"isFork\":true,\"updated\":\"Updated on Nov 5, 2025\"},{\"name\":\"flutter-crossplatform-app\",\"description\":\"Cross-platform mobile application developed with Flutter and Dart featuring custom UI components.\",\"language\":\"C++\",\"isPrivate\":true,\"isFork\":false,\"updated\":\"Updated on Oct 11, 2025\"},{\"name\":\"express-mongodb-rest-api\",\"description\":\"Backend REST API built using Node.js, Express, and MongoDB with secure token routing.\",\"language\":\"JavaScript\",\"isPrivate\":true,\"isFork\":false,\"updated\":\"Updated on Oct 11, 2025\"},{\"name\":\"portfolio\",\"description\":\"Web portfolio showcase utilizing structured CSS styling, semantic HTML, and responsive grids.\",\"language\":\"CSS\",\"url\":\"https://github.com/JustPres/portfolio\",\"license\":\"The Unlicense\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Sep 28, 2025\"},{\"name\":\"register\",\"description\":\"Forked from is-a-dev/register. Submissions to register own custom subdomain under the .is-a.dev space.\",\"language\":\"JavaScript\",\"url\":\"https://github.com/JustPres/register\",\"license\":\"GPL-3.0 License\",\"isPrivate\":false,\"isFork\":true,\"updated\":\"Updated on Sep 28, 2025\"},{\"name\":\"faceshapedetector\",\"description\":\"An AI camera tool that detects your face shape and recommends the best eyeglasses to match.\",\"language\":\"JavaScript\",\"url\":\"https://justpres.github.io/faceshapedetector/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Aug 2, 2025\"},{\"name\":\"newsanalyzer\",\"description\":\"PH SONA 2025 textual summarizer dashboard featuring interactive charting components.\",\"language\":\"HTML\",\"url\":\"https://justpres.github.io/newsanalyzer/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jul 31, 2025\"},{\"name\":\"RunCat365\",\"description\":\"Forked from runcat-dev/RunCat365. A Windows desktop taskbar tray utility showing cpu load as a running cat animation.\",\"language\":\"C#\",\"url\":\"https://github.com/JustPres/RunCat365\",\"license\":\"Apache License 2.0\",\"isPrivate\":false,\"isFork\":true,\"updated\":\"Updated on Jul 26, 2025\"}
9,{\"name\":\"retrogames\",\"description\":\"A archive compilation of client-side HTML/JS retro arcade classic clones.\",\"language\":\"HTML\",\"url\":\"https://github.com/JustPres/retrogames\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jul 20, 2025\"},{\"name\":\"bitchat-android\",\"description\":\"Forked from permissionlesstech/bitchat-android. A bluetooth mesh messaging chat app giving classic IRC vibes.\",\"language\":\"Kotlin\",\"url\":\"https://github.com/JustPres/bitchat-android\",\"license\":\"MIT License\",\"isPrivate\":false,\"isFork\":true,\"updated\":\"Updated on Jul 14, 2025\"},{\"name\":\"fileconverter\",\"description\":\"Web File Converter Platform — High-performance browser-based file format converter landing interface.\",\"language\":\"JavaScript\",\"url\":\"https://justpres.github.io/fileconverter/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jul 13, 2025\"},{\"name\":\"realtimephstocktracker\",\"description\":\"Financial tracking system querying Philippine stock market changes in real time.\",\"language\":\"TypeScript\",\"url\":\"https://psei-tracker.vercel.app/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jul 7, 2025\",\"image\":\"/pseitracker.png\"},{\"name\":\"WoofWash\",\"description\":\"Dog bath tracker querying meteorological API data to schedule optimal dog wash timings.\",\"language\":\"TypeScript\",\"url\":\"https://woof-wash.vercel.app/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jul 6, 2025\",\"image\":\"/Woofwash.png\"},{\"name\":\"House-renting-web-app\",\"description\":\"Rent4Rent - A side project portal for advertising, renting, and selling properties.\",\"language\":\"HTML\",\"url\":\"https://justpres.github.io/House-renting-web-app/\",\"license\":\"MIT License\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on May 5, 2025\",\"image\":\"/renteasy.png\"},{\"name\":\"Flashcard-web-app\",\"description\":\"An educational flashcard platform intentionally populated with common errors to encourage code debugging practices.\",\"language\":\"TypeScript\",\"url\":\"https://github.com/JustPres/Flashcard-web-app\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Mar 30, 2025\"},{\"name\":\"Capture-your-memories-web-app\",\"description\":\"Memory timeline system allowing users to record, organize, and timeline milestones.\",\"language\":\"JavaScript\",\"url\":\"https://justpres.github.io/Capture-your-memories-web-app/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Mar 29, 2025\",\"image\":\"/trackmemories.png\"},{\"name\":\"Neumorphism-Web-Portfolio\",\"description\":\"Portfolio mockup using Gmail API backend integrations to direct contact forms directly to inbox.\",\"language\":\"HTML\",\"url\":\"https://justpres.github.io/Neumorphism-Web-Portfolio/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Mar 29, 2025\",\"image\":\"/neumorphismweb.png\"},{\"name\":\"jellyfin---practice-forking-v2\",\"description\":\"Forked from jellyfin/jellyfin. Local compilation practice for the backend components of the media manager.\",\"language\":\"C#\",\"url\":\"https://github.com/JustPres/jellyfin---practice-forking-v2\",\"license\":\"GPL-2.0 License\",\"isPrivate\":false,\"isFork\":true,\"updated\":\"Updated on Mar 24, 2025\"},{\"name\":\"AITendsWebApp\",\"description\":\"AI Tech Trends Visualizer — Interactive web app tracking tech trend metrics with responsive CSS data grids.\",\"language\":\"CSS\",\"url\":\"https://justpres.github.io/AITendsWebApp/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Mar 4, 2025\",\"image\":\"/aitrendweb.png\"},{\"name\":\"MikuMikuBeam---Practice-Forking\",\"description\":\"Network Load \u0026 Stress Testing Utility — Open-source load testing tool for evaluating server network resilience under high traffic.\",\"language\":\"TypeScript\",\"url\":\"https://github.com/JustPres/MikuMikuBeam---Practice-Forking\",\"license\":\"MIT License\",\"isPrivate\":false,\"isFork\":true,\"updated\":\"Updated on Feb 23, 2025\"},{\"name\":\"Flora-ph-archive-for-all-flowers\",\"description\":\"Archive catalog tracking plant, herb, and tree variants native to the Philippines.\",\"language\":\"JavaScript\",\"url\":\"https://github.com/JustPres/Flora-ph-archive-for-all-flowers\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Feb 9, 2025\"},{\"name\":\"Databreach-template-webpage\",\"description\":\"Cybersecurity Incident Alert Layout — Interactive data breach alert webpage layout.\",\"language\":\"HTML\",\"url\":\"https://justpres.github.io/Databreach-template-webpage/\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jan 27, 2025\"},{\"name\":\"RandomNumberGenerator-Mobile-app\",\"description\":\"Native Android utility application for random number selections built using Java in Android Studio.\",\"language\":\"Java\",\"url\":\"https://github.com/JustPres/RandomNumberGenerator-Mobile-app\",\"isPrivate\":false,\"isFork\":false,\"updated\":\"Updated on Jan 27, 2025\"}
9,{\"name\":\"esp8266_deauther\",\"description\":\"Wireless Security \u0026 Network Testing Suite — Microcontroller-based learning suite for deauthentication and wireless protocol vulnerability testing.\",\"language\":\"C\",\"url\":\"https://github.com/JustPres/esp8266_deauther\",\"isPrivate\":false,\"isFork\":true,\"updated\":\"Updated on Aug 15, 2024\"}]}}],[\"$Ld\",\"$Le\",\"$Lf\"],\"$L10\"]}]\n"])</script>
9<script>self.__next_f.push([1,"5:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L11\",null,{\"children\":\"$L12\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L13\",null,{\"children\":[\"$\",\"$14\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n7:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0.07gosdbi7mp.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\nd:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0l~luigxxwz8b.js\",\"async\":true,\"nonce\":\"$undefined\"}]\ne:[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/15~2-xqkwfxiz.js\",\"async\":true,\"nonce\":\"$undefined\"}]\nf:[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0p2f_ommqh-0o.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n10:[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$14\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@17\"}]}]\n12:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#09090B\"}],[\"$\",\"meta\",\"3\",{\"name\":\"color-scheme\",\"content\":\"dark\"}]]\n"])</script>
9<script>self.__next_f.push([1,"15:[[\"$\",\"title\",\"0\",{\"children\":\"Justine Lopez — Full-Stack Developer \u0026 IoT Systems Engineer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Full-Stack Web Developer \u0026 IoT Systems Engineer based in Bacoor City, Cavite, Philippines. Building Next.js web applications, smart IoT hardware systems, and automated workflows.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://github.com/JustPres\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Justine Lopez\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"Justine Lopez,JustPres,Full-Stack Developer Philippines,IoT Hardware Systems Developer Cavite,Next.js Developer Bacoor,React Web App Developer Philippines,IoT Systems Engineer Philippines,n8n Automation Developer\"}],[\"$\",\"meta\",\"5\",{\"name\":\"creator\",\"content\":\"Justine Lopez\"}],[\"$\",\"meta\",\"6\",{\"name\":\"publisher\",\"content\":\"JustPres Dev Labs\"}],[\"$\",\"meta\",\"7\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"8\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"9\",{\"rel\":\"canonical\",\"href\":\"https://justpres.dev\"}],[\"$\",\"meta\",\"10\",{\"name\":\"google-site-verification\",\"content\":\"google75063e0db5b584db\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:title\",\"content\":\"Justine Lopez — Full-Stack Developer \u0026 IoT Systems Specialist\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:description\",\"content\":\"Custom Next.js web applications \u0026 IoT hardware systems engineered in Bacoor, Cavite, Philippines.\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:url\",\"content\":\"https://justpres.dev\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:site_name\",\"content\":\"Justine Lopez Developer Portfolio\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image\",\"content\":\"https://justpres.dev/avatar.png\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:width\",\"content\":\"800\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image:height\",\"content\":\"800\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image:alt\",\"content\":\"Justine Lopez — Full-Stack Developer \u0026 IoT Specialist\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:creator\",\"content\":\"@JustPres\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:title\",\"content\":\"Justine Lopez — Full-Stack \u0026 IoT Systems Engineer\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:description\",\"content\":\"Next.js web apps and IoT hardware engineering from Cavite, Philippines.\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:image\",\"content\":\"https://justpres.dev/avatar.png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/icon.svg\"}],[\"$\",\"link\",\"27\",{\"rel\":\"apple-touch-icon\",\"href\":\"/icon.svg\"}],[\"$\",\"$L18\",\"28\",{}]]\n"])</script>
9<script>self.__next_f.push([1,"17:null\n"])</script>
9</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.