diff --git a/README.md b/README.md
index 33de92b..0b19958 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,40 @@
-# SP-Digital-LLC
-This repository holds links and details for SP Digital LLC apps, sites, software, I.P. etc...
+# SP Digital LLC โ Project Hub
+
+A centralised portfolio for all SP Digital LLC projects: ideas, works in progress, and shipped apps.
+
+## ๐ Live Site
+
+Hosted on **GitHub Pages** โ `https://driver727-pixel.github.io/SP-Digital-LLC/`
+
+## ๐ Structure
+
+| File | Purpose |
+|------|---------|
+| `index.html` | Main portfolio page |
+| `styles.css` | Dark-themed stylesheet |
+| `projects.js` | Project data (edit to add permanent entries) |
+| `app.js` | Rendering logic + password-protected admin panel |
+
+## โ
Current Projects
+
+| Project | Status | URL |
+|---------|--------|-----|
+| SeePrice | Finished | https://seeprice.replit.app |
+| Mad Food Loop | Finished | https://www.madfoodloop.com |
+| CraftLingua | Finished | https://craftlingua.app |
+| LibraryScout | Finished | https://libraryscout.info |
+
+## โ Adding a New Project
+
+**Via the UI (temporary โ saved to browser localStorage):**
+1. Click the **+** button in the bottom-right corner of the site.
+2. Enter the admin password when prompted.
+3. Fill in the project form and click **Save Project**.
+
+**Permanently (recommended):**
+Open `projects.js` and add a new entry to the `SP_PROJECTS` array following the existing format.
+
+## ๐ Admin Password
+
+The admin password for the **+** button is `spdigital2024`.
+To change it, generate a SHA-256 hash of your new password and update `ADMIN_HASH` in `app.js`.
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..7654448
--- /dev/null
+++ b/app.js
@@ -0,0 +1,236 @@
+/* ============================================================
+ SP Digital LLC โ App Logic
+ ============================================================
+ SECURITY NOTE: This is a lightweight, client-side guard designed
+ to prevent casual unauthorised use of the Add Project form on a
+ personal static site. The password is hashed with SHA-256 so it
+ is never stored or transmitted in plain text; however, because
+ this runs entirely in the browser, a determined attacker who
+ obtains the hash could attempt an offline dictionary attack.
+ For a fully secure admin panel, use a backend authentication
+ system. For a personal portfolio this tradeoff is acceptable.
+
+ Admin password: spdigital2024
+
+ To change the password, run in a browser console:
+ crypto.subtle.digest('SHA-256', new TextEncoder().encode('yourNewPassword'))
+ .then(b => console.log([...new Uint8Array(b)].map(x=>x.toString(16).padStart(2,'0')).join('')))
+ Then paste the result into ADMIN_HASH below.
+ ============================================================ */
+
+const ADMIN_HASH =
+ "0839c27dfda3d9fda3b8ea5ce6eed2a27befaa57b9f2450014c5e21cce762518";
+
+const STORAGE_KEY = "sp_projects_extra";
+
+/* โโ Helpers โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+
+async function sha256(text) {
+ const buf = await crypto.subtle.digest(
+ "SHA-256",
+ new TextEncoder().encode(text)
+ );
+ return [...new Uint8Array(buf)]
+ .map((x) => x.toString(16).padStart(2, "0"))
+ .join("");
+}
+
+function loadExtra() {
+ try {
+ return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
+ } catch {
+ return [];
+ }
+}
+
+function saveExtra(projects) {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
+}
+
+function allProjects() {
+ return [...SP_PROJECTS, ...loadExtra()];
+}
+
+function byStatus(status) {
+ return allProjects().filter((p) => p.status === status);
+}
+
+/* โโ Rendering โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+
+function renderCard(project) {
+ const hasLink = project.url && project.url.trim() !== "";
+ const tagsHtml = (project.tags || [])
+ .map((t) => `${escHtml(t)}`)
+ .join("");
+
+ const footerHtml = hasLink
+ ? `
+ Visit โ
+ `
+ : "";
+
+ return `
+
+ ${escHtml(project.icon || "๐ท")}
+
+
${escHtml(project.name)}
+
${escHtml(project.tagline || "")}
+
${escHtml(project.description || "")}
+ ${tagsHtml}
+ ${footerHtml ? `` : ""}
+ `;
+}
+
+function renderSection(status) {
+ const projects = byStatus(status);
+ const containerId = `grid-${status}`;
+ const el = document.getElementById(containerId);
+ if (!el) return;
+ if (projects.length === 0) {
+ el.innerHTML = `No projects in this category yet.
`;
+ } else {
+ el.innerHTML = projects.map(renderCard).join("");
+ }
+}
+
+function renderAll() {
+ renderSection("finished");
+ renderSection("ongoing");
+ renderSection("idea");
+}
+
+/* โโ Escape helpers โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+
+function escHtml(str) {
+ return String(str)
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+}
+
+function escAttr(str) {
+ // Only allow http/https URLs
+ const s = String(str).trim();
+ if (!/^https?:\/\//i.test(s)) return "#";
+ return escHtml(s);
+}
+
+/* โโ Modal helpers โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+
+function openModal(id) {
+ document.getElementById(id).classList.add("open");
+}
+
+function closeModal(id) {
+ document.getElementById(id).classList.remove("open");
+}
+
+/* โโ Auth flow โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+
+async function handleAuth(e) {
+ e.preventDefault();
+ const pw = document.getElementById("auth-password").value;
+ const hash = await sha256(pw);
+ if (hash === ADMIN_HASH) {
+ closeModal("auth-modal");
+ document.getElementById("auth-password").value = "";
+ document.getElementById("auth-error").textContent = "";
+ openModal("add-modal");
+ } else {
+ document.getElementById("auth-error").textContent =
+ "Incorrect password. Try again.";
+ }
+}
+
+/* โโ Add-project flow โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+
+function handleAdd(e) {
+ e.preventDefault();
+ const name = document.getElementById("add-name").value.trim();
+ const tagline = document.getElementById("add-tagline").value.trim();
+ const description = document.getElementById("add-desc").value.trim();
+ const url = document.getElementById("add-url").value.trim();
+ const status = document.getElementById("add-status").value;
+ const tagsRaw = document.getElementById("add-tags").value.trim();
+ const icon = document.getElementById("add-icon").value.trim() || "๐ท";
+
+ const tags = tagsRaw
+ ? tagsRaw.split(",").map((t) => t.trim()).filter(Boolean)
+ : [];
+
+ const project = {
+ id: `custom-${Date.now()}`,
+ status,
+ name,
+ tagline,
+ description,
+ url: url || null,
+ tags,
+ icon,
+ };
+
+ const extras = loadExtra();
+ extras.push(project);
+ saveExtra(extras);
+
+ renderAll();
+ closeModal("add-modal");
+ e.target.reset();
+
+ // Scroll to the relevant section
+ const section = document.getElementById(`section-${status}`);
+ if (section) section.scrollIntoView({ behavior: "smooth" });
+}
+
+/* โโ Sticky nav active state โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+
+function updateActiveNav() {
+ const sections = ["finished", "ongoing", "idea"];
+ let current = sections[0];
+ sections.forEach((id) => {
+ const el = document.getElementById(`section-${id}`);
+ if (el && window.scrollY >= el.offsetTop - 120) current = id;
+ });
+ document.querySelectorAll("nav a").forEach((a) => {
+ a.classList.toggle("active", a.getAttribute("href") === `#section-${current}`);
+ });
+}
+
+/* โโ Bootstrap โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+
+document.addEventListener("DOMContentLoaded", () => {
+ // Initial render
+ renderAll();
+
+ // FAB โ open auth modal
+ document.getElementById("fab").addEventListener("click", () => {
+ document.getElementById("auth-password").value = "";
+ document.getElementById("auth-error").textContent = "";
+ openModal("auth-modal");
+ });
+
+ // Auth form submit
+ document.getElementById("auth-form").addEventListener("submit", handleAuth);
+
+ // Add-project form submit
+ document.getElementById("add-form").addEventListener("submit", handleAdd);
+
+ // Close buttons
+ document.querySelectorAll("[data-close]").forEach((btn) => {
+ btn.addEventListener("click", () => closeModal(btn.dataset.close));
+ });
+
+ // Close on backdrop click
+ document.querySelectorAll(".modal-overlay").forEach((overlay) => {
+ overlay.addEventListener("click", (e) => {
+ if (e.target === overlay) closeModal(overlay.id);
+ });
+ });
+
+ // Nav active state
+ window.addEventListener("scroll", updateActiveNav, { passive: true });
+ updateActiveNav();
+});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e689974
--- /dev/null
+++ b/index.html
@@ -0,0 +1,149 @@
+
+
+
+
+
+ SP Digital LLC โ Projects
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
๐ Admin Login
+
+
+
+
+
+
โ Add Project
+
+
+