diff --git a/.github/workflows/auto_release.yml b/.github/workflows/auto_release.yml
new file mode 100644
index 0000000..18d083b
--- /dev/null
+++ b/.github/workflows/auto_release.yml
@@ -0,0 +1,52 @@
+name: Auto Release on Push
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Generate version tag
+        id: tag
+        run: |
+          LATEST=""
+          while IFS= read -r TAG; do
+            if [[ "$TAG" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+              LATEST="$TAG"
+              break
+            fi
+          done < <(git for-each-ref --sort=-version:refname --format='%(refname:strip=2)' refs/tags)
+          if [ -z "$LATEST" ]; then
+            VERSION="v0.1.0"
+            TITLE="v0.1.0 — First production release"
+          else
+            IFS=. read -r MAJOR MINOR PATCH <<< "${LATEST#v}"
+            VERSION="v$MAJOR.$MINOR.$((PATCH + 1))"
+            TITLE="$VERSION"
+          fi
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+          echo "title=$TITLE" >> "$GITHUB_OUTPUT"
+          echo "Tagging as $VERSION"
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: ${{ steps.tag.outputs.version }}
+          name: ${{ steps.tag.outputs.title }}
+          body: |
+            Automated release from push to main.
+            Commit: ${{ github.sha }}
+            Message: ${{ github.event.head_commit.message }}
+          draft: false
+          prerelease: false
\ No newline at end of file
diff --git a/core/views.py b/core/views.py
index ce11e6d..4311a0b 100644
--- a/core/views.py
+++ b/core/views.py
@@ -13,7 +13,13 @@ def home(request):
 
     skills_by_category = {}
     for skill in Skill.objects.all():
-        cat_label = skill.get_category_display()
+        # Django generates this method dynamically, so access it defensively for
+        # static type checkers that cannot see generated model methods.
+        get_category_display = getattr(skill, 'get_category_display', None)
+        cat_label = (
+            get_category_display() if callable(get_category_display)
+            else str(skill.category)
+        )
         if cat_label not in skills_by_category:
             skills_by_category[cat_label] = []
         skills_by_category[cat_label].append(skill)
diff --git a/static/css/style.css b/static/css/style.css
index a66d503..21960a3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,236 +1,215 @@
-/* ── Theme transition ── */
-*, *::before, *::after {
-  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease, box-shadow 0.3s ease, opacity 0.3s ease;
-}
-
-/* ── Decorative page background ── */
-html {
-  background-color: #0A0A0A;
+/* ── CSS Variables ── */
+:root {
+  --bg: #0A0A0A;
+  --surface: #141414;
+  --surface-hover: #1c1c1c;
+  --border: #2A2A2A;
+  --text-primary: #F0EDE8;
+  --text-secondary: #999490;
+  --text-muted: #66625e;
+  --brand: #FF5C00;
+  --brand-hover: #ff7526;
 }
 
 html.light {
-  background-color: #F5F3EF;
+  --bg: #F9F8F6;
+  --surface: #FFFFFF;
+  --surface-hover: #F2EFEA;
+  --border: #E2DDD6;
+  --text-primary: #191816;
+  --text-secondary: #5E5A55;
+  --text-muted: #8F8A83;
+  --brand: #E64E00;
+  --brand-hover: #d14600;
+}
+
+/* ── Base ── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-  position: relative;
-  background-color: transparent;
-  min-height: 100vh;
-}
-
-.page-bg {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.page-bg-glow {
-  position: absolute;
-  inset: 0;
-  background-color: #0A0A0A;
-  background-image:
-    radial-gradient(ellipse 90% 55% at 15% -5%, rgba(255, 92, 0, 0.18) 0%, transparent 55%),
-    radial-gradient(ellipse 65% 45% at 85% 105%, rgba(255, 92, 0, 0.12) 0%, transparent 50%),
-    radial-gradient(ellipse 45% 35% at 60% 45%, rgba(255, 120, 40, 0.08) 0%, transparent 60%);
-}
-
-.page-bg-pattern {
-  position: absolute;
-  inset: 0;
-  background-image:
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
-  background-size: 64px 64px;
-  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 20%, transparent 75%);
-}
-
-html.light body {
-  background-color: transparent;
-}
-
-html.light .page-bg-glow {
-  background-color: #F5F3EF;
-  background-image:
-    linear-gradient(165deg, rgba(250, 247, 242, 0.9) 0%, rgba(240, 232, 220, 0.9) 45%, rgba(248, 244, 238, 0.9) 100%),
-    radial-gradient(ellipse 80% 55% at 5% -5%, rgba(255, 92, 0, 0.22) 0%, transparent 55%),
-    radial-gradient(ellipse 60% 45% at 95% 95%, rgba(255, 140, 60, 0.16) 0%, transparent 52%),
-    radial-gradient(ellipse 40% 30% at 55% 50%, rgba(255, 180, 120, 0.12) 0%, transparent 65%);
-}
-
-html.light .page-bg-pattern {
-  background-image: radial-gradient(circle, rgba(255, 92, 0, 0.18) 1px, transparent 1px);
-  background-size: 24px 24px;
-  mask-image: none;
-  opacity: 0.7;
-}
-
-/* ── Light mode ── */
-html.light body { color: #1A1A1A !important; }
-html.light nav { background-color: rgba(250, 247, 242, 0.82) !important; backdrop-filter: blur(12px); }
-html.light .bg-ink { background-color: transparent !important; }
-html.light .bg-surface { background-color: rgba(236, 234, 229, 0.85) !important; backdrop-filter: blur(8px); }
-html.light .border-border { border-color: #D5D0C8 !important; }
-html.light .text-text-primary { color: #1A1A1A !important; }
-html.light .text-text-secondary { color: #555047 !important; }
-html.light .text-text-muted { color: #999490 !important; }
-html.light .project-card {
-  background-color: rgba(236, 234, 229, 0.88) !important;
-  border-color: #D5D0C8 !important;
-  backdrop-filter: blur(8px);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(255, 92, 0, 0.04);
-}
-html.light .skill-tag {
-  background-color: rgba(236, 234, 229, 0.75);
-  backdrop-filter: blur(4px);
-  border-color: #D5D0C8 !important;
-  color: #555047 !important;
-}
-html.light .skill-tag:hover { border-color: #FF5C00 !important; color: #FF5C00 !important; }
-html.light .form-input { background: #ECEAE5; border-color: #D5D0C8; color: #1A1A1A; }
-html.light .form-input::placeholder { color: #999490; }
-html.light footer { border-color: #D5D0C8 !important; }
-html.light .border-t { border-color: #D5D0C8 !important; }
-html.light ::-webkit-scrollbar-track { background: #EDE9E2; }
-html.light ::-webkit-scrollbar-thumb { background: #C8C0B4; }
-html.light ::-webkit-scrollbar-thumb:hover { background: #FF5C00; }
-html.light ::selection { background: rgba(255, 92, 0, 0.18); color: #1A1A1A; }
-
-/* ── Theme toggle switch ── */
-.theme-toggle {
-  position: relative;
-  width: 3.25rem;
-  height: 1.75rem;
-  padding: 0;
-  border: 1px solid #2A2A2A;
-  border-radius: 9999px;
-  background: #141414;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
+  background-color: var(--bg);
+  color: var(--text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
+  overflow-x: hidden;
 }
 
-.theme-toggle:hover {
-  border-color: rgba(255, 92, 0, 0.45);
-  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.08);
+/* ── Nav blur ── */
+.nav-blur {
+  background: color-mix(in srgb, var(--bg) 90%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
-.theme-toggle:focus-visible {
-  outline: none;
-  border-color: #FF5C00;
-  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.2);
+/* ── Nav links ── */
+.nav-link {
+  color: var(--text-secondary);
+  transition: color 0.2s;
 }
+.nav-link:hover { color: var(--text-primary); }
 
-.theme-toggle-track {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 100%;
+/* ── Scroll reveal ── */
+.reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
 }
-
-.theme-toggle-thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  background: linear-gradient(145deg, #FF5C00, #E05200);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-  transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.3s ease;
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
 }
 
-.theme-toggle-icon {
-  position: absolute;
-  top: 50%;
-  width: 0.75rem;
-  height: 0.75rem;
-  transform: translateY(-50%);
-  transition: opacity 0.25s ease, color 0.25s ease;
+/* ── Orbital animations ── */
+@keyframes spin-slow {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+@keyframes spin-slow-reverse {
+  from { transform: rotate(360deg); }
+  to { transform: rotate(0deg); }
+}
+@keyframes float-gentle {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-8px); }
+}
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
 }
 
-.theme-toggle-sun {
-  left: 0.45rem;
-  color: #999490;
-  opacity: 0.55;
+.animate-spin-slow { animation: spin-slow 35s linear infinite; }
+.animate-spin-slow-reverse { animation: spin-slow-reverse 45s linear infinite; }
+.animate-float { animation: float-gentle 5s ease-in-out infinite; }
+
+/* ── Typed cursor ── */
+.typed-cursor {
+  color: #FF5C00;
+  animation: blink 1s step-end infinite;
 }
+html.light .typed-cursor { color: #E64E00; }
 
-.theme-toggle-moon {
-  right: 0.45rem;
-  color: #F0EDE8;
-  opacity: 0.9;
+/* ── Stat cards ── */
+.stat-card {
+  transition: border-color 0.2s, transform 0.2s;
+}
+.stat-card:hover {
+  border-color: var(--brand) !important;
+  transform: translateY(-2px);
 }
 
-html.light .theme-toggle {
-  background: #ECEAE5;
-  border-color: #D5D0C8;
+/* ── Journey cards ── */
+.journey-card {
+  transition: background-color 0.2s;
 }
+.journey-card:hover { background-color: var(--surface-hover) !important; }
 
-html.light .theme-toggle:hover {
-  border-color: rgba(255, 92, 0, 0.35);
-  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.06);
+/* ── Skill filter buttons ── */
+.skill-filter-btn {
+  background: var(--surface);
+  border-color: var(--border);
+  color: var(--text-secondary);
+  transition: all 0.2s;
+}
+.skill-filter-btn:hover {
+  border-color: var(--brand);
+  color: var(--text-primary);
+}
+.skill-filter-btn.active {
+  background: var(--brand);
+  border-color: var(--brand);
+  color: #0A0A0A;
 }
 
-html.light .theme-toggle-thumb {
-  transform: translateX(1.5rem);
-  background: linear-gradient(145deg, #FFF8F0, #F5EDE4);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+/* ── Skill items ── */
+.skill-item:hover {
+  border-color: var(--brand) !important;
 }
 
-html.light .theme-toggle-sun {
-  color: #FF5C00;
-  opacity: 1;
+/* ── Project cards ── */
+.project-card:hover {
+  border-color: rgba(255, 92, 0, 0.4) !important;
+  transform: translateY(-3px);
+  box-shadow: 0 12px 40px rgba(255, 92, 0, 0.08);
 }
 
-html.light .theme-toggle-moon {
-  color: #999490;
-  opacity: 0.4;
+/* ── Contact links ── */
+.contact-link:hover {
+  border-color: rgba(255, 92, 0, 0.4) !important;
+  background-color: var(--surface-hover) !important;
 }
 
-/* ── Nav glass effect ── */
-nav {
-  background-color: rgba(10, 10, 10, 0.82) !important;
-  backdrop-filter: blur(12px);
+/* ── Footer icons ── */
+.footer-icon:hover {
+  color: var(--brand) !important;
+  border-color: rgba(255, 92, 0, 0.4) !important;
 }
 
 /* ── Form inputs ── */
 .form-input {
   display: block;
   width: 100%;
-  background: #141414;
-  border: 1px solid #2A2A2A;
-  color: #F0EDE8;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
   font-family: 'Inter', system-ui, sans-serif;
   font-size: 0.875rem;
-  padding: 0.6rem 0.875rem;
+  padding: 0.625rem 0.875rem;
   outline: none;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   transition: border-color 0.2s ease;
 }
-.form-input::placeholder { color: #555250; }
-.form-input:focus { border-color: #FF5C00; }
-.form-textarea { resize: vertical; min-height: 120px; }
-
-/* ── Scroll reveal ── */
-.reveal {
-  opacity: 0;
-  transform: translateY(16px);
-  transition: opacity 0.5s ease, transform 0.5s ease;
-}
-.reveal.visible { opacity: 1; transform: translateY(0); }
-
-/* ── Project card ── */
-.project-card { position: relative; }
-
-/* ── Skill tag ── */
-.skill-tag { cursor: default; }
+.form-input::placeholder { color: var(--text-muted); }
+.form-input:focus { border-color: var(--brand); }
+.form-textarea { resize: vertical; min-height: 110px; }
 
 /* ── Scrollbar ── */
 ::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: #0A0A0A; }
-::-webkit-scrollbar-thumb { background: #2A2A2A; }
-::-webkit-scrollbar-thumb:hover { background: #FF5C00; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
+::-webkit-scrollbar-thumb:hover { background: var(--brand); }
 
 /* ── Selection ── */
-::selection { background: rgba(255,92,0,0.25); color: #F0EDE8; }
\ No newline at end of file
+::selection { background: rgba(255, 92, 0, 0.25); }
+
+/* ── Photo grayscale effect ── */
+.photo-img {
+  filter: grayscale(100%);
+  transition: filter 0.4s ease;
+}
+.photo-ring:hover .photo-img {
+  filter: grayscale(0%);
+}
+
+/* ── Floating tag animations ── */
+@keyframes float-gentle {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-8px); }
+}
+@keyframes float-delayed {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-8px); }
+}
+.animate-float { animation: float-gentle 4s ease-in-out infinite; }
+.animate-float-delayed { animation: float-delayed 4s ease-in-out 2s infinite; }
+
+/* ── Theme toggle pill ── */
+.theme-toggle-pill { cursor: pointer; }
+.theme-sun, .theme-moon {
+  transition: background 0.2s, opacity 0.2s;
+  opacity: 0.5;
+}
+/* Dark mode: sun is active */
+html:not(.light) .theme-sun {
+  background: var(--surface-hover, #1c1c1c);
+  opacity: 1;
+}
+/* Light mode: moon is active */
+html.light .theme-moon {
+  background: var(--surface-hover, #F2EFEA);
+  opacity: 1;
+}
+html.light .theme-sun { opacity: 0.4; }
+html:not(.light) .theme-moon { opacity: 0.4; }
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
index 35cfdc9..7e8845e 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,147 +1,62 @@
-/* ── Theme toggle ── */
-(function () {
-  const html = document.documentElement;
-  const toggle = document.getElementById('theme-toggle');
-  if (!toggle) return;
-
-  function setTheme(isLight) {
-    html.classList.toggle('light', isLight);
-    localStorage.setItem('theme', isLight ? 'light' : 'dark');
-    toggle.setAttribute('aria-pressed', String(isLight));
-    toggle.setAttribute('aria-label', isLight ? 'Switch to dark mode' : 'Switch to light mode');
-  }
-
-  setTheme(localStorage.getItem('theme') === 'light');
-
-  toggle.addEventListener('click', () => {
-    setTheme(!html.classList.contains('light'));
-  });
-})();
-
-
 /* ── Typed hero text ── */
 (function () {
   const phrases = [
-    'building with Python & Django.',
-    'learning something new every day.',
-    'turning ideas into working software.',
-    'open to junior roles & opportunities.',
+    'I build with Python and Django.',
+    'I am learning to engineer with LLMs.',
+    'I care about clean, tested software.',
+    'I build tools for real problems.',
   ];
-
   const el = document.getElementById('typed-text');
   if (!el) return;
-
-  let phraseIndex = 0;
-  let charIndex = 0;
-  let deleting = false;
-
-  function type() {
-    const current = phrases[phraseIndex];
-
-    if (!deleting) {
-      el.textContent = current.slice(0, charIndex + 1);
-      charIndex++;
-      if (charIndex === current.length) {
-        deleting = true;
-        setTimeout(type, 2200);
-        return;
-      }
+  let pi = 0, ci = 0, del = false;
+  function tick() {
+    const cur = phrases[pi];
+    if (!del) {
+      el.textContent = cur.slice(0, ++ci);
+      if (ci === cur.length) { del = true; setTimeout(tick, 2000); return; }
     } else {
-      el.textContent = current.slice(0, charIndex - 1);
-      charIndex--;
-      if (charIndex === 0) {
-        deleting = false;
-        phraseIndex = (phraseIndex + 1) % phrases.length;
-      }
+      el.textContent = cur.slice(0, --ci);
+      if (ci === 0) { del = false; pi = (pi + 1) % phrases.length; }
     }
-    setTimeout(type, deleting ? 45 : 70);
+    setTimeout(tick, del ? 40 : 65);
   }
-
-  setTimeout(type, 900);
+  setTimeout(tick, 800);
 })();
 
-
 /* ── Scroll reveal ── */
 (function () {
   const targets = document.querySelectorAll('.reveal');
-
   const observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          entry.target.classList.add('visible');
-        }
-      });
-    },
-    { threshold: 0.12 }
+    (entries) => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }),
+    { threshold: 0.1 }
   );
-
-  targets.forEach((el) => observer.observe(el));
+  targets.forEach(el => observer.observe(el));
 })();
 
-
-/* ── Skill bar animations (triggered when in view) ── */
+/* ── Active nav on scroll ── */
 (function () {
-  const bars = document.querySelectorAll('.skill-bar');
-  if (!bars.length) return;
-
-  const observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          const target = entry.target;
-          const width = target.getAttribute('data-width');
-          setTimeout(() => {
-            target.style.width = width + '%';
-          }, 150);
-          observer.unobserve(target);
-        }
-      });
-    },
-    { threshold: 0.3 }
-  );
-
-  bars.forEach((bar) => observer.observe(bar));
-})();
-
-
-/* ── Active nav link highlight on scroll ── */
-(function () {
-  const sections = document.querySelectorAll('section[id]');
-  const navLinks = document.querySelectorAll('nav a[href^="#"]');
-
+  const sections = document.querySelectorAll('section[id], div[id]');
+  const navLinks = document.querySelectorAll('.nav-link');
   function onScroll() {
     let current = '';
-    sections.forEach((section) => {
-      const top = section.offsetTop - 80;
-      if (window.scrollY >= top) {
-        current = section.getAttribute('id');
-      }
+    sections.forEach(s => {
+      if (window.scrollY >= s.offsetTop - 100) current = s.getAttribute('id');
     });
-
-    navLinks.forEach((link) => {
-      link.classList.remove('text-brand');
-      link.classList.add('text-text-secondary');
-      if (link.getAttribute('href') === '#' + current) {
-        link.classList.add('text-brand');
-        link.classList.remove('text-text-secondary');
-      }
+    navLinks.forEach(link => {
+      link.style.color = link.getAttribute('href') === '#' + current
+        ? 'var(--text-primary)'
+        : 'var(--text-secondary)';
     });
   }
-
   window.addEventListener('scroll', onScroll, { passive: true });
 })();
 
-
-/* ── Smooth scroll for anchor links ── */
-document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+/* ── Smooth scroll ── */
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
   anchor.addEventListener('click', function (e) {
     const href = this.getAttribute('href');
     if (href === '#') return;
     const target = document.querySelector(href);
-    if (target) {
-      e.preventDefault();
-      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
+    if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
   });
-});
+});
\ No newline at end of file
diff --git a/templates/core/home.html b/templates/core/home.html
index b5ba616..a52d6f1 100644
--- a/templates/core/home.html
+++ b/templates/core/home.html
@@ -4,8 +4,8 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Tisha Patience Malongo — Software Engineer</title>
-  <meta name="description" content="Junior software and AI engineer building with Python and Django." />
+  <title>Tisha Patience Malongo — Software & AI Engineer</title>
+  <meta name="description" content="Junior software and AI engineer based in Entebbe, Uganda. Building with Python, Django, and LLMs." />
 
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
@@ -13,34 +13,14 @@
       theme: {
         extend: {
           colors: {
-            'brand': '#FF5C00',
-            'brand-dim': '#CC4900',
-            'ink': '#0A0A0A',
-            'surface': '#141414',
-            'surface-2': '#1C1C1C',
-            'border': '#2A2A2A',
-            'text-primary': '#F0EDE8',
-            'text-secondary': '#999490',
-            'text-muted': '#555250',
+            brand: '#FF5C00',
+            'brand-hover': '#ff7526',
+            'brand-dim': '#d94e00',
           },
           fontFamily: {
-            sans: ['"Inter"', 'system-ui', 'sans-serif'],
+            sans: ['Inter', 'system-ui', 'sans-serif'],
             mono: ['"JetBrains Mono"', 'monospace'],
           },
-          animation: {
-            'fade-up': 'fadeUp 0.5s ease forwards',
-            'blink': 'blink 1s step-end infinite',
-          },
-          keyframes: {
-            fadeUp: {
-              '0%': { opacity: '0', transform: 'translateY(16px)' },
-              '100%': { opacity: '1', transform: 'translateY(0)' },
-            },
-            blink: {
-              '0%, 100%': { opacity: '1' },
-              '50%': { opacity: '0' },
-            },
-          },
         },
       },
     }
@@ -48,103 +28,159 @@
 
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="{% static 'css/style.css' %}" />
 
   <script>
-    if (localStorage.getItem('theme') === 'light') {
-      document.getElementById('html-root').classList.add('light');
-    }
+    // Apply theme before render to avoid flash
+    (function() {
+      if (localStorage.getItem('theme') === 'light') {
+        document.getElementById('html-root').classList.add('light');
+      }
+    })();
   </script>
 </head>
 
-<body class="text-text-primary font-sans antialiased">
-
-  <div class="page-bg" aria-hidden="true">
-    <div class="page-bg-glow"></div>
-    <div class="page-bg-pattern"></div>
-  </div>
+<body class="font-sans antialiased overflow-x-hidden">
 
   <!-- ── NAV ── -->
-  <nav class="fixed top-0 left-0 right-0 z-50 backdrop-blur-md">
-    <div class="max-w-5xl mx-auto px-6 h-12 flex items-center justify-between">
-      <a href="#" class="font-semibold text-text-primary tracking-tight text-sm hover:text-brand transition-colors">Tisha Patience Malongo</a>
-      <div class="hidden md:flex items-center gap-6 text-sm text-text-secondary">
-        <a href="#about" class="hover:text-text-primary transition-colors">About</a>
-        <a href="#skills" class="hover:text-text-primary transition-colors">Skills</a>
-        <a href="#projects" class="hover:text-text-primary transition-colors">Projects</a>
-        <a href="#contact" class="hover:text-text-primary transition-colors">Contact</a>
+  <header class="fixed top-0 left-0 right-0 z-50 nav-blur border-b" style="border-color:var(--border)">
+    <div class="max-w-6xl mx-auto px-5 sm:px-6 h-14 flex items-center justify-between gap-4">
+
+      <!-- Logo + available badge -->
+      <div class="flex items-center gap-3 shrink-0">
+        <a href="#" class="flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full bg-brand"></span>
+          <span class="font-bold text-sm" style="color:var(--text-primary)">Tisha Patience Malongo</span>
+        </a>
+        <span class="hidden sm:inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full border"
+              style="border-color:var(--border); background:var(--surface); color:var(--text-secondary)">
+          <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
+          Available for work
+        </span>
       </div>
-      <div class="flex items-center gap-3">
-        <button id="theme-toggle" type="button" class="theme-toggle"
-          aria-label="Toggle light/dark mode" aria-pressed="false">
-          <span class="theme-toggle-track">
-            <span class="theme-toggle-thumb" aria-hidden="true"></span>
-            <svg class="theme-toggle-icon theme-toggle-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-              <circle cx="12" cy="12" r="4"/>
-              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
-            </svg>
-            <svg class="theme-toggle-icon theme-toggle-moon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-            </svg>
-          </span>
+
+      <!-- Nav links -->
+      <nav class="hidden md:flex items-center gap-6 text-sm font-medium" style="color:var(--text-secondary)">
+        <a href="#about" class="nav-link">About</a>
+        <a href="#journey" class="nav-link">Journey</a>
+        <a href="#skills" class="nav-link">Skills</a>
+        <a href="#projects" class="nav-link">Projects</a>
+        <a href="#vision" class="nav-link">Vision</a>
+        <a href="#contact" class="nav-link">Contact</a>
+      </nav>
+
+      <!-- Right side -->
+      <div class="flex items-center gap-2 shrink-0">
+        <!-- Theme toggle — sun/moon pill style -->
+        <button id="theme-toggle" onclick="toggleTheme()"
+          class="theme-toggle-pill flex items-center gap-0.5 p-1 rounded-full border transition-all"
+          style="border-color:var(--border); background:var(--surface)"
+          title="Toggle theme">
+          <span class="theme-sun w-6 h-6 rounded-full flex items-center justify-center text-xs transition-all">☀️</span>
+          <span class="theme-moon w-6 h-6 rounded-full flex items-center justify-center text-xs transition-all">🌙</span>
         </button>
-        <a href="https://github.com/Tisha-patience" target="_blank" rel="noopener"
-           class="text-xs font-medium bg-brand text-ink px-3 py-1.5 rounded hover:bg-brand-dim transition-colors">
-          GitHub ↗
+        <a href="#contact"
+           class="text-xs font-bold bg-brand text-[#0A0A0A] px-4 py-2 rounded-lg hover:bg-brand-hover transition-colors flex items-center gap-1.5">
+          Get in touch <span>↗</span>
         </a>
       </div>
     </div>
-  </nav>
+  </header>
 
-  <main class="relative z-10">
+  <main>
 
     <!-- ── HERO ── -->
-    <section id="about" class="min-h-screen flex flex-col justify-center pt-12 px-6">
-      <div class="max-w-5xl mx-auto w-full">
+    <section id="about" class="min-h-screen flex flex-col justify-center pt-14 px-5 sm:px-6">
+      <div class="max-w-6xl mx-auto w-full py-16">
+
+        <!-- Availability badge -->
+        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-mono font-semibold mb-8 reveal"
+             style="border-color:rgba(255,92,0,0.3); background:rgba(255,92,0,0.08); color:#FF5C00">
+          <span class="w-1.5 h-1.5 rounded-full bg-brand animate-pulse"></span>
+          AVAILABLE FOR ROLES & COLLABORATIONS
+        </div>
 
-        <div class="flex flex-col md:flex-row md:items-center gap-10">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 
           <!-- Left: text -->
-          <div class="flex-1">
-            <p class="text-brand text-sm font-medium mb-3 opacity-0 animate-fade-up" style="animation-delay:0.1s;animation-fill-mode:forwards;">
-              Software & AI Engineer
-            </p>
-
-            <h1 class="font-bold leading-tight mb-4 opacity-0 animate-fade-up" style="animation-delay:0.2s;animation-fill-mode:forwards;">
-              <span class="block text-[clamp(2.2rem,5vw,4.5rem)] text-text-primary">Tisha Patience</span>
-              <span class="block text-[clamp(2.2rem,5vw,4.5rem)] text-brand">Malongo.</span>
+          <div class="reveal">
+            <h1 class="font-extrabold leading-none tracking-tight mb-4" style="color:var(--text-primary)">
+              <span class="block text-[clamp(2.8rem,7vw,5.5rem)]">Tisha Patience</span>
+              <span class="block text-[clamp(2.8rem,7vw,5.5rem)]">Malongo.</span>
             </h1>
 
-            <div class="text-text-secondary text-base mb-5 opacity-0 animate-fade-up font-mono" style="animation-delay:0.3s;animation-fill-mode:forwards;">
-              <span id="typed-text"></span><span class="animate-blink text-brand">|</span>
+            <div class="font-mono text-brand text-lg mb-6 h-7">
+              <span id="typed-text"></span><span class="typed-cursor">|</span>
             </div>
 
-            <p class="text-text-secondary leading-relaxed mb-8 opacity-0 animate-fade-up text-[15px] max-w-lg" style="animation-delay:0.4s;animation-fill-mode:forwards;">
-              Junior software and AI engineer based in Entebbe, Uganda. I build web applications with Python and Django, and I'm currently studying Software and AI Engineering at Turing College. Passionate about clean code, practical AI, and building tools that solve real problems. Open to junior roles and internships.
+            <p class="text-base leading-relaxed mb-8 max-w-lg" style="color:var(--text-secondary)">
+              Junior software and AI engineer based in Entebbe, Uganda. I build web applications with Python and Django, integrate LLMs using the OpenAI API, and write clean, tested code with tools like pytest, mypy, and Ruff. Currently studying Software and AI Engineering at Turing College. Open to junior roles and internships.
             </p>
 
-            <div class="flex flex-wrap gap-3 opacity-0 animate-fade-up" style="animation-delay:0.5s;animation-fill-mode:forwards;">
+            <div class="flex flex-wrap gap-3 mb-10">
               <a href="#projects"
-                 class="text-sm font-medium bg-brand text-ink px-5 py-2.5 rounded hover:bg-brand-dim transition-colors">
-                View my work
+                 class="inline-flex items-center gap-2 bg-brand text-[#0A0A0A] font-bold text-sm px-5 py-2.5 rounded-lg hover:bg-brand-hover transition-colors">
+                Explore my work <span>↓</span>
               </a>
-              <a href="#contact"
-                 class="text-sm font-medium border border-border text-text-secondary px-5 py-2.5 rounded hover:border-brand hover:text-brand transition-all">
-                Get in touch
-              </a>
-              <a href="{% static 'cv.pdf' %}" download
-                 class="text-sm font-medium border border-border text-text-secondary px-5 py-2.5 rounded hover:border-brand hover:text-brand transition-all">
-                Download CV
+              <a href="https://github.com/Tisha-patience" target="_blank" rel="noopener"
+                 class="inline-flex items-center gap-2 font-semibold text-sm px-5 py-2.5 rounded-lg border transition-colors"
+                 style="border-color:var(--border); color:var(--text-secondary); background:var(--surface)">
+                ⌥ GitHub Profile
               </a>
             </div>
+
+            <!-- Stats row -->
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+              <div class="stat-card p-4 rounded-xl border" style="background:var(--surface); border-color:var(--border)">
+                <div class="font-mono font-bold text-xl" style="color:var(--text-primary)">04+</div>
+                <div class="font-mono text-xs uppercase tracking-wider mt-1" style="color:var(--text-muted)">Projects Built</div>
+              </div>
+              <div class="stat-card p-4 rounded-xl border" style="background:var(--surface); border-color:var(--border)">
+                <div class="font-mono font-bold text-xl" style="color:var(--text-primary)">14+</div>
+                <div class="font-mono text-xs uppercase tracking-wider mt-1" style="color:var(--text-muted)">Tech Stack Tools</div>
+              </div>
+              <div class="stat-card p-4 rounded-xl border" style="background:var(--surface); border-color:var(--border)">
+                <div class="font-mono font-bold text-xl" style="color:var(--text-primary)">100%</div>
+                <div class="font-mono text-xs uppercase tracking-wider mt-1" style="color:var(--text-muted)">Test Commitment</div>
+              </div>
+              <div class="stat-card p-4 rounded-xl border" style="background:var(--surface); border-color:var(--border)">
+                <div class="font-mono font-bold text-xl text-brand">AI Eng</div>
+                <div class="font-mono text-xs uppercase tracking-wider mt-1" style="color:var(--text-muted)">Next Focus</div>
+              </div>
+            </div>
           </div>
 
-          <!-- Right: photo -->
-          <div class="flex-shrink-0 opacity-0 animate-fade-up" style="animation-delay:0.3s;animation-fill-mode:forwards;">
-            <div class="w-52 h-52 md:w-72 md:h-72 rounded-2xl overflow-hidden border border-border">
+          <!-- Right: photo with floating tags -->
+          <div class="relative flex items-center justify-center reveal">
+            <!-- Orbital rings -->
+            <div class="absolute w-72 h-72 md:w-80 md:h-80 rounded-full border border-dashed border-brand/20 animate-spin-slow"></div>
+            <div class="absolute w-64 h-64 md:w-72 md:h-72 rounded-full border border-brand/10 animate-spin-slow-reverse"></div>
+
+            <!-- Photo — grayscale by default, color on hover -->
+            <div class="photo-ring relative w-56 h-56 md:w-64 md:h-64 rounded-full overflow-hidden border-2 border-brand/50 z-10">
               <img src="{% static 'images/profile.jpg' %}" alt="Tisha Patience Malongo"
-                   class="w-full h-full object-cover object-top" />
+                   class="photo-img w-full h-full object-cover object-top" />
+            </div>
+
+            <!-- Floating tag: top right — floats up/down -->
+            <div class="absolute top-4 right-0 md:-right-6 z-20 flex items-center gap-2 px-3 py-2 rounded-xl border text-xs font-mono animate-float"
+                 style="background:var(--surface); border-color:var(--border); color:var(--text-secondary); box-shadow: 0 8px 24px rgba(0,0,0,0.3)">
+              <span class="text-brand text-base">⚙</span>
+              <div>
+                <div class="font-bold" style="color:var(--text-primary)">AI Engineer</div>
+                <div style="color:var(--text-muted)">Full-Stack Dev</div>
+              </div>
+            </div>
+
+            <!-- Floating tag: bottom left — floats delayed -->
+            <div class="absolute bottom-8 left-0 md:-left-6 z-20 flex items-center gap-2 px-3 py-2 rounded-xl border text-xs font-mono animate-float-delayed"
+                 style="background:var(--surface); border-color:var(--border); color:var(--text-secondary); box-shadow: 0 8px 24px rgba(0,0,0,0.3)">
+              <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+              <div>
+                <div class="font-bold" style="color:var(--text-primary)">Open to Roles</div>
+                <div style="color:var(--text-muted)">Junior Software Eng</div>
+              </div>
             </div>
           </div>
 
@@ -152,87 +188,265 @@ <h1 class="font-bold leading-tight mb-4 opacity-0 animate-fade-up" style="animat
       </div>
     </section>
 
+    <!-- ── JOURNEY ── -->
+    <section id="journey" class="py-20 px-5 sm:px-6 border-t" style="border-color:var(--border)">
+      <div class="max-w-6xl mx-auto space-y-12">
+
+        <div class="max-w-2xl reveal">
+          <p class="text-xs font-mono font-semibold uppercase tracking-widest text-brand mb-2 flex items-center gap-2">
+            <span class="w-1.5 h-1.5 rounded-full bg-brand"></span>
+            How I got here
+          </p>
+          <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight" style="color:var(--text-primary)">
+            A continuous progression.
+          </h2>
+          <p class="mt-3 text-base" style="color:var(--text-secondary)">
+            From computer science fundamentals to building end-to-end Python web systems and exploring modern AI engineering.
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px rounded-2xl overflow-hidden border reveal"
+             style="background:var(--border); border-color:var(--border)">
+
+          <!-- Card 1 -->
+          <article class="journey-card p-6 sm:p-7 flex flex-col justify-between" style="background:var(--surface)">
+            <div class="space-y-4">
+              <span class="font-mono text-xs font-bold" style="color:var(--text-muted)">01</span>
+              <h3 class="text-lg font-bold" style="color:var(--text-primary)">Foundations</h3>
+              <p class="text-sm leading-relaxed" style="color:var(--text-secondary)">
+                Computer science core, algorithms, problem solving, discrete math concepts and modern web basics.
+              </p>
+            </div>
+            <div class="mt-8 pt-4 border-t" style="border-color:var(--border)">
+              <p class="font-mono text-xs font-semibold text-brand">CS Fundamentals • Problem Solving • Git</p>
+            </div>
+          </article>
+
+          <!-- Card 2 -->
+          <article class="journey-card p-6 sm:p-7 flex flex-col justify-between" style="background:var(--surface)">
+            <div class="space-y-4">
+              <span class="font-mono text-xs font-bold" style="color:var(--text-muted)">02</span>
+              <h3 class="text-lg font-bold" style="color:var(--text-primary)">Full-stack Python</h3>
+              <p class="text-sm leading-relaxed" style="color:var(--text-secondary)">
+                Deep dive into backend web engineering with Django, APIs, authentication, CRUD systems and clean application structure.
+              </p>
+            </div>
+            <div class="mt-8 pt-4 border-t" style="border-color:var(--border)">
+              <p class="font-mono text-xs font-semibold text-brand">Python • Django • SQL • Git</p>
+            </div>
+          </article>
+
+          <!-- Card 3 -->
+          <article class="journey-card p-6 sm:p-7 flex flex-col justify-between" style="background:var(--surface)">
+            <div class="space-y-4">
+              <span class="font-mono text-xs font-bold" style="color:var(--text-muted)">03</span>
+              <h3 class="text-lg font-bold" style="color:var(--text-primary)">Software engineering</h3>
+              <p class="text-sm leading-relaxed" style="color:var(--text-secondary)">
+                Focused on testing, OOP, maintainable architecture, CI, linting and writing code that is easier to change.
+              </p>
+            </div>
+            <div class="mt-8 pt-4 border-t" style="border-color:var(--border)">
+              <p class="font-mono text-xs font-semibold text-brand">pytest • Ruff • uv • CI</p>
+            </div>
+          </article>
+
+          <!-- Card 4 — Active -->
+          <article class="journey-card-active p-6 sm:p-7 flex flex-col justify-between border-t-2 border-t-brand"
+                   style="background: linear-gradient(to bottom, rgba(255,92,0,0.12), var(--surface))">
+            <div class="space-y-4">
+              <div class="flex items-center justify-between">
+                <span class="font-mono text-xs font-bold" style="color:var(--text-muted)">04</span>
+                <span class="inline-flex items-center gap-1 text-[10px] font-mono font-bold uppercase tracking-wider text-brand bg-brand/10 px-2 py-0.5 rounded-full border border-brand/30">
+                  ✦ Active Focus
+                </span>
+              </div>
+              <h3 class="text-lg font-bold" style="color:var(--text-primary)">AI engineering</h3>
+              <p class="text-sm leading-relaxed" style="color:var(--text-secondary)">
+                Now learning how to build reliable AI applications around LLMs, APIs, prompts, validation and evaluation.
+              </p>
+            </div>
+            <div class="mt-8 pt-4 border-t" style="border-color:var(--border)">
+              <p class="font-mono text-xs font-semibold text-brand">OpenAI • LLMs • Prompting • Evaluation</p>
+            </div>
+          </article>
+
+        </div>
+      </div>
+    </section>
+
     <!-- ── SKILLS ── -->
-    <section id="skills" class="py-16 px-6 border-t border-border">
-      <div class="max-w-5xl mx-auto">
+    <section id="skills" class="py-20 px-5 sm:px-6 border-t" style="border-color:var(--border)">
+      <div class="max-w-6xl mx-auto space-y-10">
+
+        <div class="max-w-2xl reveal">
+          <p class="text-xs font-mono font-semibold uppercase tracking-widest text-brand mb-2 flex items-center gap-2">
+            <span class="w-1.5 h-1.5 rounded-full bg-brand"></span>
+            My Toolkit
+          </p>
+          <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight" style="color:var(--text-primary)">
+            Skills I use to build.
+          </h2>
+          <p class="mt-3 text-base" style="color:var(--text-secondary)">
+            My stack is growing from backend Python & full-stack development into AI application engineering.
+          </p>
+        </div>
 
-        <div class="mb-10">
-          <p class="text-brand text-xs font-semibold uppercase tracking-widest mb-1">What I work with</p>
-          <h2 class="text-2xl font-bold text-text-primary">Skills</h2>
+        <!-- Filter tabs -->
+        <div class="flex flex-wrap gap-2 reveal" id="skill-filters">
+          <button onclick="filterSkills('all')" class="skill-filter-btn active font-mono text-xs font-semibold px-4 py-2 rounded-full border transition-all" data-filter="all">
+            ⚡ All Skills
+          </button>
+          <button onclick="filterSkills('languages')" class="skill-filter-btn font-mono text-xs font-semibold px-4 py-2 rounded-full border transition-all" data-filter="languages">
+            &lt;/&gt; Languages
+          </button>
+          <button onclick="filterSkills('frameworks')" class="skill-filter-btn font-mono text-xs font-semibold px-4 py-2 rounded-full border transition-all" data-filter="frameworks">
+            ▷ Frameworks
+          </button>
+          <button onclick="filterSkills('tools')" class="skill-filter-btn font-mono text-xs font-semibold px-4 py-2 rounded-full border transition-all" data-filter="tools">
+            ⚙ Tools & DevOps
+          </button>
+          <button onclick="filterSkills('databases')" class="skill-filter-btn font-mono text-xs font-semibold px-4 py-2 rounded-full border transition-all" data-filter="databases">
+            ▤ Databases
+          </button>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-          {% for category, skills in skills_by_category.items %}
-          <div class="reveal">
-            <h3 class="text-xs font-semibold uppercase tracking-widest text-text-muted mb-4">{{ category }}</h3>
-            <div class="flex flex-wrap gap-2">
-              {% for skill in skills %}
-              <span class="skill-tag text-sm font-medium px-3 py-1.5 rounded-full border border-border text-text-secondary hover:border-brand hover:text-brand transition-all duration-200">
-                {{ skill.name }}
-              </span>
-              {% endfor %}
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 reveal">
+
+          <!-- Skills list -->
+          <div class="lg:col-span-2 rounded-2xl border p-6 space-y-6" style="background:var(--surface); border-color:var(--border)">
+            {% for category, skills in skills_by_category.items %}
+            <div class="skill-group" data-category="{{ skills.0.category }}">
+              <div class="flex items-center gap-2 mb-4">
+                <div class="w-1 h-4 rounded-full bg-brand"></div>
+                <h3 class="font-mono text-xs font-bold uppercase tracking-widest" style="color:var(--text-muted)">{{ category }}</h3>
+              </div>
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                {% for skill in skills %}
+                <div class="skill-item flex items-center justify-between px-3.5 py-2.5 rounded-lg border transition-all"
+                     style="background:var(--bg); border-color:var(--border)">
+                  <span class="text-sm font-semibold" style="color:var(--text-primary)">{{ skill.name }}</span>
+                </div>
+                {% endfor %}
+              </div>
             </div>
+            {% empty %}
+            <p class="text-sm" style="color:var(--text-muted)">
+              No skills yet — add them via <a href="/admin" class="text-brand hover:underline">admin panel</a>.
+            </p>
+            {% endfor %}
           </div>
-          {% empty %}
-          <p class="text-text-muted col-span-2 text-sm">
-            No skills yet — add them via the <a href="/admin" class="text-brand hover:underline">admin panel</a>.
-          </p>
-          {% endfor %}
+
+          <!-- Currently sharpening sidebar -->
+          <div class="rounded-2xl border p-6" style="background: linear-gradient(to bottom, rgba(255,92,0,0.08), var(--surface)); border-color:var(--border)">
+            <div class="flex items-center gap-2 mb-1">
+              <span class="text-brand text-xs">✦</span>
+              <span class="font-mono text-xs font-bold uppercase tracking-widest text-brand">Active Focus</span>
+            </div>
+            <h3 class="text-xl font-extrabold mb-6" style="color:var(--text-primary)">Currently Sharpening</h3>
+            <div class="space-y-4">
+              <div class="flex items-start gap-3">
+                <span class="flex-shrink-0 w-6 h-6 rounded flex items-center justify-center text-xs font-mono font-bold text-brand border border-brand/30 bg-brand/10">01</span>
+                <span class="text-sm font-medium pt-0.5" style="color:var(--text-primary)">LLM application design</span>
+              </div>
+              <div class="flex items-start gap-3">
+                <span class="flex-shrink-0 w-6 h-6 rounded flex items-center justify-center text-xs font-mono font-bold text-brand border border-brand/30 bg-brand/10">02</span>
+                <span class="text-sm font-medium pt-0.5" style="color:var(--text-primary)">Prompt engineering & evaluation</span>
+              </div>
+              <div class="flex items-start gap-3">
+                <span class="flex-shrink-0 w-6 h-6 rounded flex items-center justify-center text-xs font-mono font-bold text-brand border border-brand/30 bg-brand/10">03</span>
+                <span class="text-sm font-medium pt-0.5" style="color:var(--text-primary)">AI testing & reliability</span>
+              </div>
+              <div class="flex items-start gap-3">
+                <span class="flex-shrink-0 w-6 h-6 rounded flex items-center justify-center text-xs font-mono font-bold text-brand border border-brand/30 bg-brand/10">04</span>
+                <span class="text-sm font-medium pt-0.5" style="color:var(--text-primary)">Production-ready Python</span>
+              </div>
+            </div>
+            <div class="mt-6 pt-4 border-t" style="border-color:var(--border)">
+              <p class="font-mono text-xs leading-relaxed text-brand">
+                Building test-driven tools and evaluating generative agent patterns with Python and modern APIs.
+              </p>
+            </div>
+          </div>
+
         </div>
       </div>
     </section>
 
     <!-- ── PROJECTS ── -->
-    <section id="projects" class="py-16 px-6 border-t border-border">
-      <div class="max-w-5xl mx-auto">
-
-        <div class="mb-10">
-          <p class="text-brand text-xs font-semibold uppercase tracking-widest mb-1">What I've built</p>
-          <h2 class="text-2xl font-bold text-text-primary">Projects</h2>
+    <section id="projects" class="py-20 px-5 sm:px-6 border-t" style="border-color:var(--border)">
+      <div class="max-w-6xl mx-auto space-y-10">
+
+        <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-6 reveal">
+          <div class="max-w-2xl">
+            <p class="text-xs font-mono font-semibold uppercase tracking-widest text-brand mb-2 flex items-center gap-2">
+              <span class="w-1.5 h-1.5 rounded-full bg-brand"></span>
+              Selected Work
+            </p>
+            <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight" style="color:var(--text-primary)">
+              Things I've actually built.
+            </h2>
+            <p class="mt-3 text-base" style="color:var(--text-secondary)">
+              Projects are where I turn learning into working software — from Django backends to AI-powered tools.
+            </p>
+          </div>
         </div>
 
+        <!-- Featured project cards -->
         {% if featured_projects %}
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-10">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
           {% for project in featured_projects %}
-          <article class="project-card reveal border border-border bg-surface rounded-xl overflow-hidden hover:border-brand/50 transition-all duration-300 group flex flex-col">
+          <article class="project-card reveal rounded-2xl border overflow-hidden flex flex-col transition-all duration-300 group"
+                   style="background:var(--surface); border-color:var(--border)">
 
-            {% if project.image %}
-            <div class="w-full h-40 overflow-hidden">
+            <!-- Image area -->
+            <div class="w-full h-44 overflow-hidden relative" style="background:var(--bg)">
+              {% if project.image %}
               <img src="{{ project.image.url }}" alt="{{ project.title }}"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+              {% else %}
+              <div class="w-full h-full flex items-center justify-center">
+                <span class="font-mono font-bold text-5xl" style="color:var(--border)">
+                  {{ project.title|slice:":1" }}
+                </span>
+              </div>
+              {% endif %}
+              <div class="absolute top-3 right-3 font-mono text-xs font-bold px-2 py-0.5 rounded border"
+                   style="background:var(--surface); border-color:var(--border); color:var(--text-muted)">
+                {{ forloop.counter|stringformat:"02d" }}
+              </div>
             </div>
-            {% endif %}
 
             <div class="p-5 flex flex-col flex-1">
-              <h3 class="font-semibold text-text-primary text-base mb-2 group-hover:text-brand transition-colors duration-200">
+              <h3 class="font-bold text-base mb-2 group-hover:text-brand transition-colors" style="color:var(--text-primary)">
                 {{ project.title }}
               </h3>
-
-              <p class="text-text-secondary text-sm leading-relaxed mb-4 flex-1">
+              <p class="text-sm leading-relaxed mb-4 flex-1" style="color:var(--text-secondary)">
                 {{ project.description }}
               </p>
 
               <div class="flex flex-wrap gap-1.5 mb-4">
                 {% for tech in project.get_tech_list %}
-                <span class="text-xs border border-border text-text-muted px-2 py-0.5 rounded">
+                <span class="font-mono text-xs px-2 py-0.5 rounded border" style="background:var(--bg); border-color:var(--border); color:var(--text-muted)">
                   {{ tech }}
                 </span>
                 {% endfor %}
               </div>
 
-              <div class="flex gap-4 text-xs font-medium">
-                {% if project.github_url %}
-                <a href="{{ project.github_url }}" target="_blank" rel="noopener"
-                   class="text-text-secondary hover:text-brand transition-colors">
-                  GitHub ↗
-                </a>
-                {% endif %}
-                {% if project.live_url %}
-                <a href="{{ project.live_url }}" target="_blank" rel="noopener"
-                   class="text-brand hover:text-brand-dim transition-colors">
-                  Live demo ↗
-                </a>
-                {% endif %}
+              <div class="flex items-center justify-between pt-3 border-t" style="border-color:var(--border)">
+                <div class="flex gap-4 text-xs font-semibold">
+                  {% if project.github_url %}
+                  <a href="{{ project.github_url }}" target="_blank" rel="noopener"
+                     class="flex items-center gap-1 transition-colors hover:text-brand" style="color:var(--text-secondary)">
+                    ⌥ Code
+                  </a>
+                  {% endif %}
+                  {% if project.live_url %}
+                  <a href="{{ project.live_url }}" target="_blank" rel="noopener"
+                     class="flex items-center gap-1 text-brand hover:text-brand-hover transition-colors">
+                    ↗ Live demo
+                  </a>
+                  {% endif %}
+                </div>
               </div>
             </div>
           </article>
@@ -240,24 +454,34 @@ <h3 class="font-semibold text-text-primary text-base mb-2 group-hover:text-brand
         </div>
         {% endif %}
 
+        <!-- Other projects compact list -->
         {% with other_projects=all_projects %}
         {% if other_projects|length > 3 %}
-        <div class="border-t border-border pt-8">
-          <h3 class="text-xs font-semibold uppercase tracking-widest text-text-muted mb-5">Other projects</h3>
+        <div class="reveal">
+          <p class="font-mono text-xs font-semibold uppercase tracking-widest mb-5" style="color:var(--text-muted)">
+            More Experiments & CLI Tools
+          </p>
           <div class="space-y-3">
             {% for project in other_projects %}
             {% if not project.featured %}
-            <div class="flex flex-col sm:flex-row sm:items-center justify-between py-3 border-b border-border/50 hover:border-brand/30 transition-colors group">
-              <div>
-                <span class="font-medium text-text-primary group-hover:text-brand transition-colors text-sm">{{ project.title }}</span>
-                <span class="text-text-muted text-xs ml-3">{{ project.tech_stack }}</span>
+            <div class="flex items-center justify-between p-4 rounded-xl border transition-all hover:border-brand/40 group"
+                 style="background:var(--surface); border-color:var(--border)">
+              <div class="flex items-center gap-3 flex-1 min-w-0">
+                <span class="font-mono text-xs text-brand">▷</span>
+                <div class="min-w-0">
+                  <div class="flex items-center gap-2 flex-wrap">
+                    <span class="font-semibold text-sm group-hover:text-brand transition-colors truncate" style="color:var(--text-primary)">{{ project.title }}</span>
+                    <span class="font-mono text-[10px] px-1.5 py-0.5 rounded border" style="background:var(--bg); border-color:var(--border); color:var(--text-muted)">tool</span>
+                  </div>
+                  <p class="text-xs mt-0.5 truncate" style="color:var(--text-secondary)">{{ project.description|truncatechars:80 }}</p>
+                </div>
               </div>
-              <div class="flex gap-4 mt-1 sm:mt-0 text-xs font-medium">
+              <div class="flex gap-3 ml-4 text-xs font-semibold shrink-0">
                 {% if project.github_url %}
-                <a href="{{ project.github_url }}" target="_blank" rel="noopener" class="text-text-secondary hover:text-brand transition-colors">GitHub ↗</a>
+                <a href="{{ project.github_url }}" target="_blank" rel="noopener" class="text-brand hover:text-brand-hover transition-colors">GitHub ↗</a>
                 {% endif %}
                 {% if project.live_url %}
-                <a href="{{ project.live_url }}" target="_blank" rel="noopener" class="text-brand hover:text-brand-dim transition-colors">Live ↗</a>
+                <a href="{{ project.live_url }}" target="_blank" rel="noopener" class="hover:text-brand transition-colors" style="color:var(--text-secondary)">Live ↗</a>
                 {% endif %}
               </div>
             </div>
@@ -269,7 +493,7 @@ <h3 class="text-xs font-semibold uppercase tracking-widest text-text-muted mb-5"
         {% endwith %}
 
         {% if not all_projects %}
-        <div class="text-text-muted text-center py-16 border border-dashed border-border rounded-xl text-sm">
+        <div class="text-center py-16 rounded-2xl border border-dashed text-sm reveal" style="border-color:var(--border); color:var(--text-muted)">
           <p class="mb-2">No projects yet.</p>
           <a href="/admin/core/project/add/" class="text-brand hover:underline">Add your first project →</a>
         </div>
@@ -278,76 +502,148 @@ <h3 class="text-xs font-semibold uppercase tracking-widest text-text-muted mb-5"
       </div>
     </section>
 
+    <!-- ── VISION ── -->
+    <section id="vision" class="py-20 px-5 sm:px-6 border-t" style="border-color:var(--border)">
+      <div class="max-w-6xl mx-auto">
+        <div class="rounded-2xl border p-8 sm:p-12 reveal" style="background: linear-gradient(135deg, rgba(255,92,0,0.08) 0%, var(--surface) 60%); border-color:var(--border)">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
+            <div>
+              <p class="text-xs font-mono font-semibold uppercase tracking-widest text-brand mb-3 flex items-center gap-2">
+                <span>✦</span> What I'm building next
+              </p>
+              <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight mb-4" style="color:var(--text-primary)">
+                AI that helps people learn.
+              </h2>
+              <p class="text-base leading-relaxed mb-6" style="color:var(--text-secondary)">
+                I'm exploring ideas around accessible learning and AI-assisted education, including a project inspired by the experience of students with dyslexia — focusing on tailored text restructuring, comprehension assistance, and adaptive cognitive pacing.
+              </p>
+              <div class="flex flex-wrap gap-2">
+                <span class="inline-flex items-center gap-1.5 font-mono text-xs font-semibold px-3 py-1.5 rounded-lg border"
+                      style="background:var(--bg); border-color:var(--border); color:var(--text-secondary)">
+                  ✦ LLM Context Adaptation
+                </span>
+                <span class="inline-flex items-center gap-1.5 font-mono text-xs font-semibold px-3 py-1.5 rounded-lg border"
+                      style="background:var(--bg); border-color:var(--border); color:var(--text-secondary)">
+                  📖 Dyslexia-friendly Typography & Spacing
+                </span>
+              </div>
+            </div>
+
+            <div class="flex justify-center lg:justify-end">
+              <div class="rounded-xl border p-5 w-full max-w-xs" style="background:var(--bg); border-color:var(--border)">
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="text-xs font-mono font-bold px-2 py-0.5 rounded bg-brand text-[#0A0A0A]">NOW</span>
+                  <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+                </div>
+                <h4 class="font-bold text-base mb-2" style="color:var(--text-primary)">AI Engineering</h4>
+                <p class="font-mono text-xs" style="color:var(--text-muted)">Learning • Building • Testing</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- ── CONTACT ── -->
-    <section id="contact" class="py-16 px-6 border-t border-border">
-      <div class="max-w-5xl mx-auto">
+    <section id="contact" class="py-20 px-5 sm:px-6 border-t" style="border-color:var(--border)">
+      <div class="max-w-6xl mx-auto space-y-12">
 
-        <div class="mb-10">
-          <p class="text-brand text-xs font-semibold uppercase tracking-widest mb-1">Say hello</p>
-          <h2 class="text-2xl font-bold text-text-primary">Contact</h2>
+        <div class="max-w-2xl reveal">
+          <p class="text-xs font-mono font-semibold uppercase tracking-widest text-brand mb-2 flex items-center gap-2">
+            <span class="w-1.5 h-1.5 rounded-full bg-brand"></span>
+            Let's talk
+          </p>
+          <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight" style="color:var(--text-primary)">
+            Have an opportunity or an idea?
+          </h2>
+          <p class="mt-3 text-base" style="color:var(--text-secondary)">
+            I'm open to junior software roles, internships, collaborations and conversations about building useful technology.
+          </p>
         </div>
 
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
 
-          <div class="reveal">
-            <p class="text-text-secondary leading-relaxed mb-6 text-[15px]">
-              Got a project, opportunity, or just want to connect? I'd love to hear from you.
-            </p>
-            <div class="space-y-3 text-sm">
-              <div class="flex items-center gap-3 text-text-secondary">
-                <span class="text-brand text-xs">✉</span>
-                <a href="mailto:tishapatiencemalongo@gmail.com" class="hover:text-brand transition-colors">tishapatiencemalongo@gmail.com</a>
+          <!-- Left: contact links -->
+          <div class="lg:col-span-5 space-y-3 reveal">
+            <a href="mailto:tishapatiencemalongo@gmail.com"
+               class="contact-link group flex items-center gap-3.5 p-4 rounded-xl border transition-all"
+               style="background:var(--surface); border-color:var(--border)">
+              <div class="p-2.5 rounded-lg border text-brand" style="background:var(--bg); border-color:var(--border)">✉</div>
+              <div>
+                <span class="block text-[11px] font-mono uppercase" style="color:var(--text-muted)">Email</span>
+                <span class="text-sm font-semibold group-hover:text-brand transition-colors break-all" style="color:var(--text-primary)">tishapatiencemalongo@gmail.com</span>
               </div>
-              <div class="flex items-center gap-3 text-text-secondary">
-                <span class="text-brand text-xs">⌥</span>
-                <a href="https://github.com/Tisha-patience" target="_blank" rel="noopener" class="hover:text-brand transition-colors">github.com/Tisha-patience</a>
+            </a>
+
+            <a href="https://github.com/Tisha-patience" target="_blank" rel="noopener"
+               class="contact-link group flex items-center gap-3.5 p-4 rounded-xl border transition-all"
+               style="background:var(--surface); border-color:var(--border)">
+              <div class="p-2.5 rounded-lg border text-brand" style="background:var(--bg); border-color:var(--border)">⌥</div>
+              <div>
+                <span class="block text-[11px] font-mono uppercase" style="color:var(--text-muted)">GitHub</span>
+                <span class="text-sm font-semibold group-hover:text-brand transition-colors" style="color:var(--text-primary)">github.com/Tisha-patience</span>
               </div>
-              <div class="flex items-center gap-3 text-text-secondary">
-                <span class="text-brand text-xs">in</span>
-                <a href="https://www.linkedin.com/in/tisha-patience-malongo/" target="_blank" rel="noopener" class="hover:text-brand transition-colors">linkedin.com/in/tisha-patience-malongo</a>
+            </a>
+
+            <a href="https://www.linkedin.com/in/tisha-patience-malongo/" target="_blank" rel="noopener"
+               class="contact-link group flex items-center gap-3.5 p-4 rounded-xl border transition-all"
+               style="background:var(--surface); border-color:var(--border)">
+              <div class="p-2.5 rounded-lg border text-brand" style="background:var(--bg); border-color:var(--border)">in</div>
+              <div>
+                <span class="block text-[11px] font-mono uppercase" style="color:var(--text-muted)">LinkedIn</span>
+                <span class="text-sm font-semibold group-hover:text-brand transition-colors" style="color:var(--text-primary)">linkedin.com/in/tisha-patience-malongo</span>
               </div>
-            </div>
+            </a>
+
+            <a href="https://x.com/Tisha_patience" target="_blank" rel="noopener"
+               class="contact-link group flex items-center gap-3.5 p-4 rounded-xl border transition-all"
+               style="background:var(--surface); border-color:var(--border)">
+              <div class="p-2.5 rounded-lg border text-brand" style="background:var(--bg); border-color:var(--border)">x</div>
+              <div>
+                <span class="block text-[11px] font-mono uppercase" style="color:var(--text-muted)">Twitter</span>
+                <span class="text-sm font-semibold group-hover:text-brand transition-colors" style="color:var(--text-primary)">x.com/Tisha_patience</span>
+              </div>
+            </a>
           </div>
 
-          <div class="reveal">
+          <!-- Right: form -->
+          <div class="lg:col-span-7 rounded-2xl border p-6 sm:p-8 reveal"
+               style="background:var(--surface); border-color:var(--border)">
+
             {% for message in messages %}
-            <div class="text-sm mb-4 px-4 py-3 rounded border
-              {% if message.tags == 'success' %}border-brand/40 text-brand bg-brand/5{% else %}border-red-500/40 text-red-400 bg-red-500/5{% endif %}">
+            <div class="mb-5 p-4 rounded-xl border text-sm flex items-start gap-3
+              {% if message.tags == 'success' %}border-emerald-500/40 text-emerald-400 bg-emerald-950/30{% else %}border-red-500/40 text-red-400 bg-red-950/30{% endif %}">
               {{ message }}
             </div>
             {% endfor %}
 
             <form method="POST" action="#contact" class="space-y-4">
               {% csrf_token %}
-              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div>
+              <div class="grid sm:grid-cols-2 gap-4">
+                <div class="space-y-1.5">
+                  <label class="block text-xs font-mono font-semibold uppercase" style="color:var(--text-muted)">Name</label>
                   {{ contact_form.name }}
-                  {% if contact_form.name.errors %}
-                    <p class="text-red-400 text-xs mt-1">{{ contact_form.name.errors.0 }}</p>
-                  {% endif %}
+                  {% if contact_form.name.errors %}<p class="text-[11px] text-red-400 mt-1">{{ contact_form.name.errors.0 }}</p>{% endif %}
                 </div>
-                <div>
+                <div class="space-y-1.5">
+                  <label class="block text-xs font-mono font-semibold uppercase" style="color:var(--text-muted)">Email</label>
                   {{ contact_form.email }}
-                  {% if contact_form.email.errors %}
-                    <p class="text-red-400 text-xs mt-1">{{ contact_form.email.errors.0 }}</p>
-                  {% endif %}
+                  {% if contact_form.email.errors %}<p class="text-[11px] text-red-400 mt-1">{{ contact_form.email.errors.0 }}</p>{% endif %}
                 </div>
               </div>
-              <div>
+              <div class="space-y-1.5">
+                <label class="block text-xs font-mono font-semibold uppercase" style="color:var(--text-muted)">Subject</label>
                 {{ contact_form.subject }}
-                {% if contact_form.subject.errors %}
-                  <p class="text-red-400 text-xs mt-1">{{ contact_form.subject.errors.0 }}</p>
-                {% endif %}
+                {% if contact_form.subject.errors %}<p class="text-[11px] text-red-400 mt-1">{{ contact_form.subject.errors.0 }}</p>{% endif %}
               </div>
-              <div>
+              <div class="space-y-1.5">
+                <label class="block text-xs font-mono font-semibold uppercase" style="color:var(--text-muted)">Message</label>
                 {{ contact_form.message }}
-                {% if contact_form.message.errors %}
-                  <p class="text-red-400 text-xs mt-1">{{ contact_form.message.errors.0 }}</p>
-                {% endif %}
+                {% if contact_form.message.errors %}<p class="text-[11px] text-red-400 mt-1">{{ contact_form.message.errors.0 }}</p>{% endif %}
               </div>
               <button type="submit"
-                class="text-sm font-semibold bg-brand text-ink px-6 py-2.5 rounded w-full hover:bg-brand-dim transition-colors">
-                Send message →
+                class="inline-flex items-center gap-2 bg-brand text-[#0A0A0A] font-bold text-sm px-6 py-3 rounded-lg hover:bg-brand-hover transition-colors w-full sm:w-auto justify-center">
+                Send message ✈
               </button>
             </form>
           </div>
@@ -358,19 +654,74 @@ <h2 class="text-2xl font-bold text-text-primary">Contact</h2>
   </main>
 
   <!-- ── FOOTER ── -->
-  <footer class="relative z-10 border-t border-border py-6 px-6">
-    <div class="max-w-5xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-3">
-      <div class="flex items-center gap-4 text-xs text-text-muted">
-        <a href="https://github.com/Tisha-patience" target="_blank" rel="noopener" class="hover:text-brand transition-colors">GitHub</a>
-        <span>·</span>
-        <a href="https://www.linkedin.com/in/tisha-patience-malongo/" target="_blank" rel="noopener" class="hover:text-brand transition-colors">LinkedIn</a>
-        <span>·</span>
-        <a href="mailto:tishapatiencemalongo@gmail.com" class="hover:text-brand transition-colors">Email</a>
+  <footer class="border-t px-5 sm:px-6 py-8" style="border-color:var(--border); background:var(--bg)">
+    <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
+      <div>
+        <div class="flex items-center gap-2 mb-1">
+          <span class="w-2 h-2 rounded-full bg-brand"></span>
+          <strong class="text-sm font-bold" style="color:var(--text-primary)">Tisha Patience Malongo</strong>
+        </div>
+        <p class="text-xs" style="color:var(--text-muted)">
+          © 2026 Tisha Patience Malongo. Built with clean architecture, modern web technologies & curiosity.
+        </p>
+      </div>
+      <div class="flex items-center gap-3">
+        <a href="mailto:tishapatiencemalongo@gmail.com"
+           class="footer-icon p-2 rounded-lg border transition-colors"
+           style="border-color:var(--border); background:var(--surface); color:var(--text-secondary)"
+           title="Email">✉</a>
+        <a href="https://github.com/Tisha-patience" target="_blank" rel="noopener"
+           class="footer-icon p-2 rounded-lg border transition-colors"
+           style="border-color:var(--border); background:var(--surface); color:var(--text-secondary)"
+           title="GitHub">⌥</a>
+        <a href="https://www.linkedin.com/in/tisha-patience-malongo/" target="_blank" rel="noopener"
+           class="footer-icon p-2 rounded-lg border transition-colors"
+           style="border-color:var(--border); background:var(--surface); color:var(--text-secondary)"
+           title="LinkedIn">in</a>
+        <a href="https://x.com/Tisha_patience" target="_blank" rel="noopener"
+           class="footer-icon p-2 rounded-lg border transition-colors"
+           style="border-color:var(--border); background:var(--surface); color:var(--text-secondary)"
+           title="X">x</a>
+        <button onclick="window.scrollTo({top:0,behavior:'smooth'})"
+           class="footer-icon p-2 rounded-lg border transition-colors"
+           style="border-color:var(--border); background:var(--surface); color:var(--text-secondary)"
+           title="Back to top">↑</button>
       </div>
-      <p class="text-xs text-text-muted">Built by Tisha Patience Malongo · 2026</p>
     </div>
   </footer>
 
   <script src="{% static 'js/main.js' %}"></script>
+  <script>
+    function toggleTheme() {
+      const html = document.getElementById('html-root');
+      const icon = document.getElementById('theme-icon');
+      if (html.classList.contains('light')) {
+        html.classList.remove('light');
+        localStorage.setItem('theme', 'dark');
+        icon.textContent = '☀️';
+      } else {
+        html.classList.add('light');
+        localStorage.setItem('theme', 'light');
+        icon.textContent = '🌙';
+      }
+    }
+    if (localStorage.getItem('theme') === 'light') {
+      document.getElementById('theme-icon').textContent = '🌙';
+    }
+
+    function filterSkills(category) {
+      const groups = document.querySelectorAll('.skill-group');
+      const btns = document.querySelectorAll('.skill-filter-btn');
+      btns.forEach(b => b.classList.remove('active'));
+      document.querySelector(`[data-filter="${category}"]`).classList.add('active');
+      groups.forEach(g => {
+        if (category === 'all' || g.dataset.category === category) {
+          g.style.display = 'block';
+        } else {
+          g.style.display = 'none';
+        }
+      });
+    }
+  </script>
 </body>
 </html>
\ No newline at end of file