SpecWeave
Change agents. Keep the thread.
Plan work as small specs, hand it between Claude, Codex, Grok and any other tool in two words, and close it with evidence.
Install
npm install -g specweave # Node.js 20.12.0+
cd your-project
specweave init .
init writes AGENTS.md (read by Codex, Grok, Cursor, Gemini and Copilot), a two-line CLAUDE.md that imports it, and the skills for Claude Code and Codex. Nothing else runs in the background.
Out of tokens? Say "hand off"
you (in Claude, account 1): hand off
you (in Codex, or account 2): pick up
That is the whole handoff. "Hand off" runs specweave handoff: it releases your task claims, records why you stopped, and pushes your branch plus a snapshot of your uncommitted edits. "Pick up" runs specweave pickup in any other tool, account, machine or cloud session (a Claude Code Projects thread, a Codex cloud task): it brings that work into the checkout and prints the next task with its acceptance criteria. Nothing to copy, no paths to paste.
Running out mid-task? specweave auto-handoff on, once per machine, makes it automatic: when a session reaches 90% of your plan's 5-hour or weekly limit, it hands off by itself and tells you to say "pick up" elsewhere. Claude Code reads the limit through its status line (your own status line keeps working) and Codex through a Stop hook. Under the threshold it costs no tokens. --at 85 changes the threshold and off undoes every change.
specweave report writes an HTML timeline of who did what on an increment (tools, sessions, handoffs, pickups, test evidence), straight from the ledger.
The loop
| # | Say or run | What happens |
|---|---|---|
| 1 | "pick up" · specweave pickup | The open increment, the next task with its acceptance criteria, claims held by others, branch state, notes and project memory, in one read. |
| 2 | /sw:increment · specweave create-increment ""</code> | One <code>spec.md</code>: Problem, Scope, Acceptance Criteria, Approach and the Tasks. |
| 3 | <code>/sw:do</code> · <code>specweave task claim T-01</code> → <code>task done T-01 --run "<test>"</code> | Work a task. <code>done</code> refuses a failing test and stores the evidence in the ledger. |
| 4 | <code>specweave verify</code> · <code>/sw:review</code> | Runs your test, lint and build; a fresh-context review cites <code>path:line</code>. |
| 5 | <code>/sw:done</code> · <code>specweave complete <id></code> | Closes on a green verify. Acceptance criteria are met when their tasks are done; nobody ticks boxes. |
| 6 | "hand off" · <code>specweave handoff</code> | Stop anywhere; the next tool picks up. |</p>
<p>An increment is one folder, <code>.specweave/increments/NNNN-slug/</code>, with one file you read (<code>spec.md</code>) and one the CLI appends to (<code>ledger.jsonl</code>). Increments from 2.x with a <code>tasks.md</code> keep working unchanged.</p>
<h2>Works the way Claude Code Projects work</h2>
<p>| Claude Code Projects | SpecWeave |
|---|---|
| A thread: one session, one branch, one PR | One increment |
| The thread's checklist | The <code>## Tasks</code> of that increment's <code>spec.md</code>, state in <code>ledger.jsonl</code> |
| Project memory (<code>MEMORY.md</code> + one file per fact) | <code>.specweave/memory/</code>, same format, committed, so every tool and account sees it |
| Threads passing notes | <code>specweave note "<text>"</code> on another increment |</p>
<p>Project memory in claude.ai stays with one account. <code>.specweave/memory/</code> travels with the code, so Codex, Grok and a second Claude subscription start from the same decisions.</p>
<h2>The eleven skills</h2>
<p>The CLI is the product and runs in any tool or in CI. The skills expose it to coding agents: <code>/sw:<name></code> in Claude Code, <code>sw-<name></code> in <code>.claude/skills/</code> (for Projects threads, where plugins do not load) and <code>.agents/skills/</code> (Codex, Grok).</p>
<p>| Skill | Use it for |
|-------|------------|
| <code>increment</code> | Plan the work as one <code>spec.md</code>. |
| <code>do</code> | Claim a task, implement it, close it with evidence. |
| <code>auto</code> | The same loop, unattended, until the tasks run out. |
| <code>team</code> | A worktree per agent, claims arbitrated by the ledger. |
| <code>review</code> | Fresh-context adversarial review; findings cite <code>path:line</code>. |
| <code>done</code> | Verify, review check, <code>specweave complete</code>. |
| <code>handoff</code> | "Hand off" and "pick up". |
| <code>sync</code> | GitHub, Jira and Azure DevOps, only when you run it. |
| <code>project</code> | Shared goals, artifacts and briefs across tools. |
| <code>brainstorm</code> | Framed alternatives, ending in a pick. |
| <code>jev</code> | Closed-set decisions in about 250 ms via Jev. |</p>
<h2>Upgrade to 3.0</h2>
<pre><code class="bash">npm i -g specweave@3
specweave update</code></pre>
<p><code>specweave update</code> rewrites <code>AGENTS.md</code> into the lean form, turns <code>CLAUDE.md</code> into an import of it, keeps your own sections, and backs up the old files under <code>.specweave/backups/</code>. Existing increments need no migration. The <strong><a href="https://github.com/anton-abyzov/specweave/blob/develop/CHANGELOG.md#300---2026-09-25" target="_blank" rel="noopener">3.0.0 changelog</a></strong> lists what changed and what was removed. To have sessions hand off by themselves near the usage limit, run <code>specweave auto-handoff on</code> once.</p>
<p><br/></p>
<h2>Built With SpecWeave</h2>
<p>Examples from the maintainer's portfolio. These are usage examples, not controlled productivity measurements.</p>
<p>| App | Platform | What It Does |
|-----|----------|-------------|
| <a href="https://easychamp.com" target="_blank" rel="noopener"><strong>EasyChamp</strong></a> | Web (GCP) | Enterprise sports league management. 20+ microservices, ML video analytics. 4 years in production. |
| <a href="https://apps.apple.com/app/sketchmate-ai-draw-game/id6760250072" target="_blank" rel="noopener"><strong>SketchMate</strong></a> | App Store | AI drawing game — multi-model evaluation judges player art semantically. |
| <a href="https://apps.apple.com/app/lulla-calm-baby-anywhere/id6756977992" target="_blank" rel="noopener"><strong>Lulla</strong></a> | App Store | Baby sleep app with Apple Watch. ML cry classification (tired/hungry/pain). |
| <a href="https://apps.apple.com/app/football-2026-travel/id6757258711" target="_blank" rel="noopener"><strong>Football 2026</strong></a> | App Store + Web | World Cup 2026 companion. AI travel planner, live tickets, team stats. |
| <a href="https://apps.apple.com/app/skillup-football/id6756978002" target="_blank" rel="noopener"><strong>SkillUp Football</strong></a> | App Store | Coaches monetize training via Stripe. Instagram-like feed, scheduling. |
| <a href="https://apps.apple.com/app/business-zone/id6756091030" target="_blank" rel="noopener"><strong>BizZone</strong></a> | App Store | Student & business events with AI-powered news generation. |
| <a href="https://edufeed-jet.vercel.app/" target="_blank" rel="noopener"><strong>EduFeed</strong></a> | Web | NotebookLM meets Zoom. Upload videos, get quizzes, flashcards, live rooms. |
| <a href="https://jobweave.ai" target="_blank" rel="noopener"><strong>JobWeave</strong></a> | Web | AI-powered job search. Smart matching, resume optimization. |
| <a href="https://github.com/anton-abyzov/specweave" target="_blank" rel="noopener"><strong>SpecWeave</strong></a> | npm | The framework itself. 600+ increments, 538+ releases. |
| <a href="https://github.com/anton-abyzov/specweave-umb" target="_blank" rel="noopener"><strong>SpecWeave Umbrella</strong></a> | GitHub | Multi-repo orchestration workspace for all repositories. |
| <a href="https://github.com/anton-abyzov/vskill" target="_blank" rel="noopener"><strong>vskill</strong></a> | npm | Package manager for AI skills. Security scanning, 49 platforms. |
| <a href="https://verified-skill.com" target="_blank" rel="noopener"><strong>verified-skill.com</strong></a> | Web | Skill marketplace & studio. 105K+ verified skills, eval system. |</p>
<p><a href="https://github.com/anton-abyzov/specweave/tree/develop/.specweave/increments" target="_blank" rel="noopener">Browse increments on GitHub</a> — full transparency.</p>
<p><br/></p>
<h2>How It Compares</h2>
<p>| Capability | Cursor Rules | Copilot Instructions | Windsurf | Cline | Vibe Coding | <strong>SpecWeave</strong> |
|------------|:---:|:---:|:---:|:---:|:---:|:---:|
| Structured specs (Problem, ACs, Approach) | — | — | — | — | — | <strong>Yes</strong> |
| One closure gate you can actually see (<code>verify.json</code>) | — | — | — | — | — | <strong>Yes</strong> |
| Autonomous execution (hours, unattended) | — | — | — | — | — | <strong>Yes</strong> |
| Multi-agent teams (parallel, contract-first) | — | — | — | — | — | <strong>Yes</strong> |
| External sync (GitHub / JIRA / ADO) | — | — | — | — | — | <strong>Yes</strong> |
| Append-only ledger (claims, evidence, no lost work) | — | — | — | — | — | <strong>Yes</strong> |
| LSP code intelligence (198x faster) | — | — | — | — | — | <strong>Yes</strong> |
| Cross-tool handoff (any vendor, any subscription) | — | — | — | — | — | <strong>Yes</strong> |</p>
<p>Cursor tells AI "use Tailwind." SpecWeave tells AI "build a checkout flow against these five acceptance criteria, prove the tests pass, review the diff, then close."</p>
<p><br/></p>
<h2>Key Features</h2>
<p><strong>Spec-First Planning</strong> — Every feature starts as one <code>spec.md</code>: Problem, Scope, ACs, Approach and Tasks.</p>
<p><strong>Evidence, not vibes</strong> — <code>specweave task done --run "<test>"</code> refuses a failing command and stores the exit code and output tail in the ledger.</p>
<p><strong>Multi-agent, any vendor</strong> — A worktree per agent, claims through <code>ledger.jsonl</code>, one closure. Coordination happens only through committed files.</p>
<pre><code class="">┌──────────────────┬──────────────────┬──────────────────┐
│ Agent 1 (auth) │ Agent 2 (payments)│ Agent 3 (catalog)│
│ T-01..T-04 │ T-05..T-08 │ T-09..T-12 │
│ ████████░░ 80% │ ██████░░░░ 60% │ ████░░░░░░ 40% │
└──────────────────┴──────────────────┴──────────────────┘</code></pre>
<p><strong>LSP Code Intelligence</strong> — 198x faster than grep, 0 false positives. Semantic references, definitions, and types.</p>
<p><strong>11 skills, one source</strong> — the same skills for Claude Code, Codex and Grok; see <a href="#the-eleven-skills" target="_blank" rel="noopener">The eleven skills</a>.</p>
<p><strong>External Sync</strong> — <code>specweave sync push|pull|status|setup</code>. GitHub is first-class; Jira and Azure DevOps are opt-in. Nothing calls a tracker unless you run sync.</p>
<p><strong>Enterprise Ready</strong> — Compliance audit trails. Brownfield analysis. Multi-repo workspaces.</p>
<p><strong>Dashboard</strong> — <code>specweave dashboard</code> shows intents, increments and evidence from local files, with no model calls.</p>
<p><br/></p>
<h2>Skills Ecosystem</h2>
<p>SpecWeave skills are published and verified at <strong><a href="https://verified-skill.com" target="_blank" rel="noopener">verified-skill.com</a></strong>. The <a href="https://www.npmjs.com/package/vskill" target="_blank" rel="noopener">vskill</a> package manager provides:</p>
<ul><li><strong>Security scanning</strong> — 52 attack patterns, SHA-256 pinning, blocklist API</li>
<li><strong>49 agent platforms</strong> — one install deploys to Claude Code, Cursor, Copilot, Windsurf, and 45 more</li>
<li><strong>Skill evals</strong> — unit tests, A/B comparisons, cross-model testing. Skills tested like programs.</li>
<li><strong>Visual Skill Studio</strong> — <code>vskill eval serve</code> for benchmarks, comparisons, and history</li></ul>
<pre><code class="bash">npx vskill install remotion-best-practices # Install from registry
npx vskill eval run my-skill # Run eval suite</code></pre>
<p><br/></p>
<h2>Documentation</h2>
<p><strong><a href="https://spec-weave.com" target="_blank" rel="noopener">spec-weave.com</a></strong> — <a href="https://spec-weave.com/docs/guides/specweave-3" target="_blank" rel="noopener">SpecWeave 3.0</a> · <a href="https://spec-weave.com/docs/guides/cross-tool-handoff" target="_blank" rel="noopener">handoff</a> · <a href="https://spec-weave.com/docs/reference/commands" target="_blank" rel="noopener">commands</a> · <a href="https://spec-weave.com/docs/reference/skills" target="_blank" rel="noopener">skills</a> · <a href="https://spec-weave.com/docs/reference/configuration" target="_blank" rel="noopener">configuration</a></p>
<h2>Contributing</h2>
<p>Inside this repo dependency install scripts are disabled (<code>.npmrc</code>): run <code>npm ci</code>, then <code>npm run setup</code> (rebuilds the allowlisted native deps), and <code>npm run security:scan</code> before pushing — see <a href="https://github.com/anton-abyzov/specweave/blob/develop/SECURITY.md" target="_blank" rel="noopener">SECURITY.md</a>.</p>
<h2>Community</h2>
<p><a href="https://discord.gg/UYg4BGJ65V" target="_blank" rel="noopener">Discord</a> · <a href="https://www.youtube.com/@antonabyzov" target="_blank" rel="noopener">YouTube</a> · <a href="https://github.com/anton-abyzov/specweave/issues" target="_blank" rel="noopener">GitHub Issues</a></p>
<h2>License</h2>
<p>MIT — <a href="https://github.com/anton-abyzov/specweave" target="_blank" rel="noopener">github.com/anton-abyzov/specweave</a></p>
</article>
<!-- Article Completion Section -->
<div class="reader-footer mt-5 pt-5">
<div class="reader-completion-box rounded-3 p-4 text-center">
<div class="reader-completion-icon mb-3">
<i class="fas fa-check-circle"></i>
</div>
<p class="reader-completion-text fw-semibold mb-1" style="font-size: 1rem;">You finished the article!</p>
<p class="reader-completion-subtext small mb-4">Want to go deeper or explore more stories?</p>
<div class="d-flex justify-content-center gap-3 flex-wrap">
<a href="https://github.com/anton-abyzov/specweave" target="_blank" rel="noopener noreferrer" class="btn btn-primary-custom btn-sm rounded-pill px-4">
<i class="fas fa-external-link-alt me-2"></i>Full Article on GitHub Trending
</a>
<a href="https://neshdevtech.com/news" class="reader-back-btn btn btn-sm rounded-pill px-4">
<i class="fas fa-newspaper me-2"></i>More Tech News
</a>
</div>
</div>
</div>
<!-- Internal Linking CTA -->
</div>
</div>
</div>
<!-- Sidebar (desktop only) -->
<div class="col-lg-4 col-xl-3 d-none d-lg-block">
<div class="sticky-top" style="top: 80px;">
<!-- Mini Controller Widget -->
<div class="card border-0 shadow-sm mb-4 bg-surface">
<div class="card-body p-4">
<h6 class="fw-bold mb-3"><i class="fas fa-glasses me-2 text-primary-custom"></i>Reading Mode</h6>
<p class="text-secondary-custom small mb-4">Adjust typography and theme to your preference.</p>
<div class="mb-3">
<label class="text-muted-custom small d-block mb-2">Typography</label>
<div class="d-flex gap-2">
<button class="btn btn-light btn-sm flex-grow-1 border-custom" id="sidebar-font-serif">Serif</button>
<button class="btn btn-light btn-sm flex-grow-1 border-custom" id="sidebar-font-sans">Sans</button>
</div>
</div>
<div class="mb-4">
<label class="text-muted-custom small d-block mb-2">Text Scale</label>
<div class="d-flex gap-2">
<button class="btn btn-light btn-sm flex-grow-1 border-custom" id="sidebar-size-dec"><i class="fas fa-minus small"></i></button>
<button class="btn btn-light btn-sm flex-grow-1 border-custom" id="sidebar-size-inc"><i class="fas fa-plus small"></i></button>
</div>
</div>
<div class="border-top border-light-custom pt-3">
<a href="https://github.com/anton-abyzov/specweave" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary btn-sm w-100 rounded-pill">
View Original <i class="fas fa-external-link-alt ms-1"></i>
</a>
</div>
</div>
</div>
<!-- Sidebar Related News -->
<div class="card border-0 shadow-sm bg-surface">
<div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
<h5 class="card-title fw-bold mb-0" style="font-size: 1.05rem;">
<i class="fas fa-newspaper me-2 text-primary-custom"></i>Related Stories
</h5>
</div>
<div class="card-body p-0">
<div class="list-group list-group-flush rounded-0 bg-transparent">
<a href="https://neshdevtech.com/news/ai-agent-cost-per-month-the-token-maths-worked-out-TwRQU"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
AI Agent Cost per Month: The Token Maths, Worked Out
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Dev.to</span>
<span>13 hours ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/how-to-route-llm-requests-by-cost-vs-latency-ViqmR"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
How to route LLM requests by cost vs. latency
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Dev.to</span>
<span>1 day ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/rentdera-is-live-on-google-play-the-rent-notebook-now-on-your-phone-WRNNB"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
RentDera Is Live on Google Play — The Rent Notebook, Now on Your Phone
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Dev.to</span>
<span>1 day ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/project-management-without-us-providers-european-alternatives-for-greater-digital-sovereignty-1cpuW"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
Project Management Without US Providers: European Alternatives for Greater Digital Sovereignty
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Dev.to</span>
<span>3 days ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/i-asked-for-a-brutal-enterprise-stress-test-of-my-ai-the-audit-came-back-and-i-realized-the-craziest-plot-twist-of-launch-day-Q0Lld"
class="list-group-item list-group-item-action border-0 px-4 py-3 bg-transparent border-bottom border-light-custom hover-bg-light">
<h6 class="mb-1 fw-semibold text-truncate-2" style="font-size: 0.875rem; line-height: 1.4;">
I asked for a brutal enterprise stress-test of my AI. The audit came back, and I realized the craziest plot twist of launch day.
</h6>
<div class="d-flex align-items-center justify-content-between text-muted-custom mt-1" style="font-size: 0.72rem;">
<span>Dev.to</span>
<span>4 days ago</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile: Related News horizontal scroll strip -->
<div class="d-block d-lg-none mt-4">
<h6 class="fw-bold mb-3 px-1">
<i class="fas fa-newspaper me-2 text-primary-custom"></i>Related Stories
</h6>
<div class="related-scroll-strip">
<a href="https://neshdevtech.com/news/ai-agent-cost-per-month-the-token-maths-worked-out-TwRQU" class="related-scroll-card">
<p class="related-scroll-title">AI Agent Cost per Month: The Token Maths, Worked Out</p>
<div class="related-scroll-meta">
<span>Dev.to</span>
<span>13 hours ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/how-to-route-llm-requests-by-cost-vs-latency-ViqmR" class="related-scroll-card">
<p class="related-scroll-title">How to route LLM requests by cost vs. latency</p>
<div class="related-scroll-meta">
<span>Dev.to</span>
<span>1 day ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/rentdera-is-live-on-google-play-the-rent-notebook-now-on-your-phone-WRNNB" class="related-scroll-card">
<p class="related-scroll-title">RentDera Is Live on Google Play — The Rent Notebook, Now on Your Phone</p>
<div class="related-scroll-meta">
<span>Dev.to</span>
<span>1 day ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/project-management-without-us-providers-european-alternatives-for-greater-digital-sovereignty-1cpuW" class="related-scroll-card">
<p class="related-scroll-title">Project Management Without US Providers: European Alternatives for Gre...</p>
<div class="related-scroll-meta">
<span>Dev.to</span>
<span>3 days ago</span>
</div>
</a>
<a href="https://neshdevtech.com/news/i-asked-for-a-brutal-enterprise-stress-test-of-my-ai-the-audit-came-back-and-i-realized-the-craziest-plot-twist-of-launch-day-Q0Lld" class="related-scroll-card">
<p class="related-scroll-title">I asked for a brutal enterprise stress-test of my AI. The audit came b...</p>
<div class="related-scroll-meta">
<span>Dev.to</span>
<span>4 days ago</span>
</div>
</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<!-- Footer -->
<footer class="py-5 mt-5 position-relative overflow-hidden" style="background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);">
<!-- Decorative subtle background gradients -->
<div class="position-absolute" style="top: -200px; right: -200px; width: 400px; height: 400px; background: rgba(var(--primary-rgb), 0.03); filter: blur(100px); border-radius: 50%; pointer-events: none;"></div>
<div class="position-absolute" style="bottom: -200px; left: -200px; width: 400px; height: 400px; background: rgba(var(--accent-rgb), 0.03); filter: blur(100px); border-radius: 50%; pointer-events: none;"></div>
<div class="container position-relative z-3">
<div class="row g-4">
<!-- Column 1: Brand & About -->
<div class="col-lg-4 col-md-6">
<div class="d-flex align-items-center mb-3">
<span class="brand-mark me-2" style="width: 42px; height: 42px;" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
</span>
<span class="fs-4 fw-extrabold text-primary-custom" style="letter-spacing: -0.05em; font-family: 'JetBrains Mono', monospace;">NeshDevTech</span>
</div>
<p class="text-secondary-custom mb-4 pe-lg-4" style="font-size: 0.95rem; line-height: 1.6;">NeshDevTech is a professional technology firm passionate about creating innovative, high-performance web and mobile solutions.</p>
<div class="d-flex gap-2">
</div>
</div>
<!-- Column 2: Navigation Links -->
<div class="col-lg-2 col-md-6 col-6">
<h6 class="text-primary-custom fw-bold text-uppercase mb-3" style="font-size: 0.85rem; letter-spacing: 0.05em;">Quick Navigation</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><a href="https://neshdevtech.com" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Home</a></li> <li class="mb-2"><a href="https://neshdevtech.com/projects" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Projects</a></li> <li class="mb-2"><a href="https://neshdevtech.com/blog" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Tech Blog</a></li> <li class="mb-2"><a href="https://neshdevtech.com/pricing" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Get Quote</a></li> <li class="mb-2"><a href="https://neshdevtech.com/contact" class="footer-link text-secondary-custom text-decoration-none d-inline-block">Contact Me</a></li> </ul>
</div>
<!-- Column 3: Tech Stack & Services -->
<div class="col-lg-3 col-md-6 col-6">
<h6 class="text-primary-custom fw-bold text-uppercase mb-3" style="font-size: 0.85rem; letter-spacing: 0.05em;">Core Services</h6>
<ul class="list-unstyled mb-0">
<li class="text-secondary-custom mb-2 small"><i class="bi bi-rocket-takeoff text-primary-custom me-2"></i>Custom Laravel Apps</li>
<li class="text-secondary-custom mb-2 small"><i class="bi bi-laptop text-primary-custom me-2"></i>SPA (React & Vue.js)</li>
<li class="text-secondary-custom mb-2 small"><i class="bi bi-phone-vibrate text-primary-custom me-2"></i>Flutter Mobile Apps</li>
<li class="text-secondary-custom mb-2 small"><i class="bi bi-search text-primary-custom me-2"></i>SEO & Performance Opt</li>
</ul>
</div>
<!-- Column 4: Contact & Availability -->
<div class="col-lg-3 col-md-6">
<h6 class="text-primary-custom fw-bold text-uppercase mb-3" style="font-size: 0.85rem; letter-spacing: 0.05em;">Get in Touch</h6>
<ul class="list-unstyled mb-3">
<li class="text-secondary-custom mb-2 small d-flex align-items-center">
<i class="bi bi-geo-alt text-primary-custom me-2 fs-6"></i>Nairobi, Kenya
</li>
<li class="text-secondary-custom mb-2 small d-flex align-items-center">
<i class="bi bi-envelope-at text-primary-custom me-2 fs-6"></i>
<a href="mailto:info@neshdevtech.com" class="text-secondary-custom text-decoration-none footer-link">info@neshdevtech.com</a>
</li>
</ul>
<div class="bg-primary-custom-light border border-primary-custom border-opacity-10 p-3 rounded-3" style="border-radius: 12px !important;">
<small class="d-block fw-semibold text-primary-custom mb-1"><i class="bi bi-patch-check-fill me-1"></i>Available for Projects</small>
<p class="mb-0 text-secondary-custom small" style="font-size: 0.8rem; line-height: 1.4;">Need a high-performing system? Let's discuss your project.</p>
</div>
</div>
</div>
<hr style="border-color: var(--border); opacity: 0.8; margin: 2.5rem 0 2rem;">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start mb-2 mb-md-0">
<p class="mb-0 text-secondary-custom small">© 2026 NeshDevTech. All rights reserved.</p>
</div>
<div class="col-md-6 text-center text-md-end">
<p class="mb-0 text-secondary-custom small">Built with <i class="bi bi-heart-fill text-danger"></i></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JavaScript -->
<script>
// Theme Management System
class ThemeManager {
constructor() {
this.themeToggle = document.getElementById('themeToggle');
this.themeIcon = document.getElementById('theme-icon');
this.mobileThemeToggle = document.getElementById('mobileThemeToggle');
this.mobileThemeIcon = document.getElementById('mobile-theme-icon');
this.init();
}
init() {
// Get current theme (already applied in head)
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
// Update icons to match current theme
this.updateIcon(currentTheme);
// Listen for desktop theme toggle clicks
if (this.themeToggle) {
this.themeToggle.addEventListener('click', (e) => {
e.preventDefault();
this.toggleTheme();
});
}
// Listen for mobile theme toggle clicks
if (this.mobileThemeToggle) {
this.mobileThemeToggle.addEventListener('click', (e) => {
e.preventDefault();
this.toggleTheme();
});
}
// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
this.setTheme(e.matches ? 'dark' : 'light');
}
});
}
setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
document.documentElement.setAttribute('data-bs-theme', theme);
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.setItem('theme', theme);
this.updateThemeColor(theme);
this.updateIcon(theme);
}
updateThemeColor(theme) {
document.querySelectorAll('meta[name="theme-color"]').forEach((meta) => {
meta.setAttribute('content', theme === 'dark' ? '#1c2028' : '#e4e8f0');
});
}
toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
this.setTheme(newTheme);
// Close mobile menu if open
const navbarCollapse = document.querySelector('.navbar-collapse');
if (navbarCollapse && navbarCollapse.classList.contains('show') && window.innerWidth < 992) {
setTimeout(() => {
const bsCollapse = new bootstrap.Collapse(navbarCollapse, { toggle: false });
bsCollapse.hide();
}, 150);
}
}
updateIcon(theme) {
const iconClass = theme === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-fill';
// Update desktop icon
if (this.themeIcon) {
this.themeIcon.className = iconClass;
}
// Update mobile icon
if (this.mobileThemeIcon) {
this.mobileThemeIcon.className = iconClass;
}
}
}
// Initialize theme manager when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
new ThemeManager();
// Initialize navbar live clock
(function initNavClock(){
const clockEls = Array.from(document.querySelectorAll('[data-clock]'));
if (!clockEls.length) return;
const locale = navigator.language || 'en-US';
// Detect 12/24h by locale: use resolvedOptions hourCycle when available
const dtf = new Intl.DateTimeFormat(locale, { hour: 'numeric' });
const uses12h = (dtf.resolvedOptions().hour12 === true);
const fmt = new Intl.DateTimeFormat(locale, {
hour: '2-digit', minute: '2-digit', second: '2-digit',
hour12: uses12h
});
const update = () => {
const now = new Date();
const text = fmt.format(now);
clockEls.forEach(el => { el.textContent = text; });
};
update();
setInterval(update, 1000);
})();
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Navbar background on scroll
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.backdropFilter = 'blur(20px)';
navbar.style.backgroundColor = 'rgba(var(--background-rgb), 0.8)';
} else {
navbar.style.backdropFilter = 'blur(10px)';
navbar.style.backgroundColor = 'var(--background)';
}
});
// Add fade-in animation to elements when they come into view
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in-up');
}
});
}, observerOptions);
// Observe elements with animation class
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
});
// Enhanced mobile menu functionality
document.addEventListener('DOMContentLoaded', function() {
const navbarToggler = document.querySelector('.navbar-toggler');
const navbarCollapse = document.querySelector('.navbar-collapse');
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
const socialLinks = document.querySelectorAll('.navbar-nav .d-flex a');
let isToggling = false; // Prevent rapid clicking
// Enhanced menu close function
function closeMenu() {
if (navbarCollapse && navbarCollapse.classList.contains('show')) {
// Use Bootstrap's collapse API for smooth transition
const bsCollapse = new bootstrap.Collapse(navbarCollapse, {
toggle: false
});
bsCollapse.hide();
}
// Reset hamburger animation and aria-expanded
if (navbarToggler) {
navbarToggler.classList.remove('active');
navbarToggler.setAttribute('aria-expanded', 'false');
}
}
// Enhanced hamburger toggle functionality
if (navbarToggler) {
navbarToggler.addEventListener('click', function(e) {
e.preventDefault();
// Prevent rapid clicking
if (isToggling) return;
isToggling = true;
const isMenuOpen = navbarCollapse.classList.contains('show');
if (isMenuOpen) {
closeMenu();
} else {
// Open menu
const bsCollapse = new bootstrap.Collapse(navbarCollapse, {
toggle: false
});
bsCollapse.show();
navbarToggler.setAttribute('aria-expanded', 'true');
}
// Reset toggle flag after animation
setTimeout(() => {
isToggling = false;
}, 350);
});
}
// Close menu when clicking outside
document.addEventListener('click', function(event) {
const isClickInsideNav = navbarCollapse.contains(event.target);
const isToggler = navbarToggler.contains(event.target);
const isMenuOpen = navbarCollapse.classList.contains('show');
if (!isClickInsideNav && !isToggler && isMenuOpen && window.innerWidth < 992) {
closeMenu();
}
});
// Close menu when clicking on navigation links (mobile)
navLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
const isMenuOpen = navbarCollapse.classList.contains('show');
if (isMenuOpen && window.innerWidth < 992 && !this.classList.contains('dropdown-toggle')) {
// Add a small delay to let the link navigation start
setTimeout(() => {
closeMenu();
}, 100);
}
});
});
// Close menu when clicking on social links (mobile)
socialLinks.forEach(function(link) {
link.addEventListener('click', function() {
if (window.innerWidth < 992) {
setTimeout(() => {
closeMenu();
}, 100);
}
});
});
// Escape key closes menu
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && window.innerWidth < 992) {
closeMenu();
}
});
// Handle window resize to close menu when switching to desktop
window.addEventListener('resize', function() {
if (window.innerWidth >= 992) {
closeMenu();
}
});
// Theme toggle functionality is handled by ThemeManager class
// No separate event listener needed here
// Prevent menu items from being too small on touch devices
if ('ontouchstart' in window) {
navLinks.forEach(function(link) {
link.style.minHeight = '44px';
link.style.display = 'flex';
link.style.alignItems = 'center';
});
}
// Add smooth scrolling for anchor links within pages
navLinks.forEach(function(link) {
const href = link.getAttribute('href');
if (href && href.startsWith('#')) {
link.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
closeMenu();
});
}
});
});
</script>
<script>
// Sticky navbar scroll enhancement (desktop only)
(function () {
const navbar = document.querySelector('.navbar');
if (!navbar) return;
let ticking = false;
const SCROLL_THRESHOLD = 20; // px
function updateNavbar() {
if (window.innerWidth >= 992) {
if (window.scrollY > SCROLL_THRESHOLD) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
} else {
// Always remove on mobile so it doesn't affect mobile look
navbar.classList.remove('scrolled');
}
ticking = false;
}
window.addEventListener('scroll', function () {
if (!ticking) {
requestAnimationFrame(updateNavbar);
ticking = true;
}
}, { passive: true });
window.addEventListener('resize', updateNavbar, { passive: true });
// Run once on page load in case page is already scrolled (e.g. back-navigation)
updateNavbar();
})();
</script>
<script>
// Lightweight toast badge notifications
(function(){
function ensureContainer(){
let c = document.getElementById('toast-badge-container');
if(!c){
c = document.createElement('div');
c.id = 'toast-badge-container';
c.setAttribute('aria-live','polite');
c.setAttribute('aria-atomic','true');
document.body.appendChild(c);
}
return c;
}
function iconFor(type){
switch(type){
case 'success': return '<i class="bi bi-check-circle"></i>';
case 'warning': return '<i class="bi bi-exclamation-triangle"></i>';
case 'error': return '<i class="bi bi-x-circle"></i>';
default: return '<i class="bi bi-info-circle"></i>';
}
}
window.notifyBadge = function(message, opts={}){
const { type = 'success', timeout = 2500 } = opts;
const container = ensureContainer();
const el = document.createElement('div');
el.className = 'toast-badge ' + type;
el.setAttribute('role','status');
el.innerHTML = '<span class="icon">'+iconFor(type)+'</span><span>'+message+'</span>';
container.appendChild(el);
requestAnimationFrame(()=>{
el.classList.add('show');
});
const remove = () => {
el.classList.remove('show');
setTimeout(()=> el.remove(), 200);
};
setTimeout(remove, timeout);
return { remove };
};
// Global copy helper used by inline buttons
window.copyToClipboard = function(url){
try {
navigator.clipboard.writeText(url).then(()=>{
// Update the clicked button, if available
let btn = document.activeElement && document.activeElement.tagName === 'BUTTON'
? document.activeElement
: (window.event && window.event.target && window.event.target.closest ? window.event.target.closest('button') : null);
if (btn){
const original = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-check me-1"></i> Copied!';
btn.classList.remove('btn-outline-secondary');
btn.classList.add('btn-success');
setTimeout(()=>{
btn.innerHTML = original;
btn.classList.remove('btn-success');
btn.classList.add('btn-outline-secondary');
}, 2000);
}
notifyBadge('Link copied to clipboard', { type: 'success' });
}).catch((err)=>{
console.error('Clipboard error:', err);
notifyBadge('Could not copy link', { type: 'error' });
});
} catch (e) {
console.error(e);
notifyBadge('Copy not supported', { type: 'error' });
}
};
})();
</script>
<a href="https://wa.me/254768033943?text=Hi%2C+I+visited+your+website+and+would+like+to+inquire+about+your+services."
class="whatsapp-btn-float"
target="_blank"
rel="noopener noreferrer"
aria-label="Chat on WhatsApp">
<i class="fab fa-whatsapp"></i>
<span class="whatsapp-tooltip">Chat with me</span>
</a>
<style>
.whatsapp-btn-float {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
background-color: #25d366;
color: #fff !important;
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.whatsapp-btn-float i {
font-size: 32px;
transition: transform 0.3s ease;
}
.whatsapp-btn-float:hover {
background-color: #128c7e;
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(18, 140, 126, 0.6);
}
.whatsapp-btn-float:hover i {
transform: rotate(10deg);
}
/* Pulsing ring animation */
.whatsapp-btn-float::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #25d366;
opacity: 0.7;
z-index: -1;
animation: whatsapp-pulse 2s infinite;
}
@keyframes whatsapp-pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
/* Tooltip style utilizing site-wide theme colors */
.whatsapp-btn-float .whatsapp-tooltip {
position: absolute;
right: 76px;
background-color: var(--surface);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 8px 14px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: translateX(10px);
transition: all 0.3s ease;
box-shadow: var(--shadow);
pointer-events: none;
}
.whatsapp-btn-float:hover .whatsapp-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
/* Responsive Design */
@media (max-width: 768px) {
.whatsapp-btn-float {
bottom: 16px;
right: 16px;
width: 50px;
height: 50px;
}
.whatsapp-btn-float i {
font-size: 26px;
}
.whatsapp-btn-float .whatsapp-tooltip {
display: none; /* Hide tooltip on small screens to prevent overlap issues */
}
}
</style>
<!-- Mobile More Menu (Offcanvas Bottom Sheet) - Auth actions only -->
<style>
/* ══════════════════════════════════════════════════════════════
NEUMORPHISM REVAMP (front-end only)
Soft-extruded UI: same-tone surfaces with dual light/dark
shadows. This block sits at the end of the body so it layers
over every page's own styles without touching page markup.
══════════════════════════════════════════════════════════════ */
/* ── Buttons: extruded, press-in on click ─────────────────────── */
.btn {
box-shadow: var(--shadow) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
.btn:active:not(.btn-link), .btn.show {
transform: translateY(1px) scale(0.99) !important;
box-shadow: var(--shadow-inset) !important;
}
.btn-primary-custom, .btn-primary, .btn-success {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #fff !important;
box-shadow: var(--shadow) !important;
}
.btn-primary-custom:hover, .btn-primary:hover, .btn-success:hover {
background: var(--primary-dark) !important;
border-color: var(--primary-dark) !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-primary-custom, .btn-outline-primary, .btn-outline-success,
.btn-outline-secondary, .btn-outline-danger, .btn-outline-dark, .btn-light {
background-color: var(--surface) !important;
border-color: transparent !important;
color: var(--text-primary) !important;
box-shadow: var(--shadow) !important;
}
.btn-outline-primary-custom:hover, .btn-outline-primary:hover {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-success:hover {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-secondary:hover {
background-color: var(--text-secondary) !important;
border-color: var(--text-secondary) !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-danger:hover {
background-color: #ef4444 !important;
border-color: #ef4444 !important;
color: #fff !important;
box-shadow: var(--shadow-md) !important;
}
.btn-outline-dark:hover, .btn-light:hover {
background-color: var(--text-secondary) !important;
border-color: var(--text-secondary) !important;
color: var(--background) !important;
box-shadow: var(--shadow-md) !important;
}
.btn-dark {
background-color: var(--text-primary) !important;
border-color: var(--text-primary) !important;
color: var(--background) !important;
box-shadow: var(--shadow) !important;
}
/* ── Forms: pressed-in surfaces ────────────────────────────────── */
.form-control, .form-select {
background-color: var(--surface) !important;
border: 1px solid transparent !important;
color: var(--text-primary) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-inset) !important;
transition: box-shadow 0.3s ease, background-color 0.25s ease !important;
}
.form-control:focus, .form-select:focus {
background-color: var(--surface) !important;
border-color: transparent !important;
color: var(--text-primary) !important;
box-shadow: var(--shadow-inset), 0 0 0 4px rgba(var(--primary-rgb), 0.15) !important;
}
.form-control::placeholder {
color: var(--text-muted) !important;
}
.input-group-text {
background-color: var(--surface-alt) !important;
border: 1px solid transparent !important;
color: var(--text-secondary) !important;
box-shadow: var(--shadow-inset-sm) !important;
}
/* ── Navbar: floating neumorphic pill (tablet & desktop) ──────── */
.navbar {
background-color: rgba(var(--background-rgb), 0.9) !important;
border-bottom: 1px solid transparent !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .navbar {
box-shadow: var(--shadow-md) !important;
}
@media (min-width: 768px) {
.navbar {
top: 14px !important;
left: 18px !important;
right: 18px !important;
width: auto !important;
border-radius: 20px !important;
padding: 0.6rem 0 !important;
box-shadow: var(--shadow-lg) !important;
}
[data-theme="dark"] .navbar {
box-shadow: var(--shadow-lg) !important;
}
.navbar.scrolled {
background-color: rgba(var(--background-rgb), 0.95) !important;
border-bottom-color: transparent !important;
padding: 0.5rem 0 !important;
box-shadow: var(--shadow-lg) !important;
}
[data-theme="dark"] .navbar.scrolled {
background-color: rgba(28, 32, 40, 0.95) !important;
box-shadow: var(--shadow-lg) !important;
}
body {
padding-top: 96px !important;
}
.reading-progress-container {
top: 88px !important;
}
}
/* ── Tablet refinements (768px - 991.98px) ────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
/* Hamburger dropdown panel blends with the floating pill */
.navbar-collapse {
border-radius: 20px !important;
border-color: transparent !important;
}
body {
padding-bottom: 0 !important;
}
.whatsapp-btn-float {
bottom: 24px !important;
}
/* Hero: tighten the inline 80px top padding that assumed a
full-height bar, so tablets don't get excessive empty space */
.hero-section-bg {
padding-top: 40px !important;
}
}
/* ── Neumorphic brand icon mark ────────────────────────────────── */
.brand-mark {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 13px;
background-color: var(--surface) !important;
color: var(--primary-color) !important;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow) !important;
transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-mark svg {
width: 21px;
height: 21px;
}
a:hover .brand-mark {
box-shadow: var(--shadow-inset-sm) !important;
transform: translateY(1px);
}
.mobile-logo .brand-mark {
width: 34px;
height: 34px;
border-radius: 11px;
}
.mobile-logo .brand-mark svg {
width: 17px;
height: 17px;
}
/* ── Uploaded brand logo image ─────────────────────────────────── */
.brand-img {
height: 38px;
width: auto;
max-width: 160px;
object-fit: contain;
flex-shrink: 0;
}
.brand-img-sm {
height: 28px;
max-width: 120px;
}
.brand-img-footer {
height: 44px;
max-width: 180px;
}
/* ── Mobile bars: floating neumorphic pills (phones) ──────────── */
@media (max-width: 767.98px) {
.mobile-top-bar {
top: 8px !important;
left: 12px !important;
right: 12px !important;
height: 52px !important;
border-radius: 16px !important;
border-bottom: none !important;
background-color: rgba(var(--surface-rgb), 0.92) !important;
box-shadow: var(--shadow-md) !important;
}
.mobile-bottom-bar {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
height: 58px !important;
border-radius: 18px !important;
border-top: none !important;
background-color: rgba(var(--surface-rgb), 0.92) !important;
box-shadow: var(--shadow-md) !important;
}
body {
padding-top: 74px !important;
padding-bottom: 86px !important;
}
.whatsapp-btn-float {
bottom: 88px !important;
}
.reading-progress-container {
top: 70px !important;
}
}
/* ── Nav pill widgets: pressed-in ──────────────────────────────── */
.theme-toggle, .mobile-theme-toggle, .nav-clock {
background-color: var(--surface) !important;
border-color: transparent !important;
box-shadow: var(--shadow-inset-sm) !important;
}
/* ── Icon chips, markers & circles: extruded ───────────────────── */
.icon-wrap, .icon-wrapper, .expertise-card-icon, .timeline-marker,
.mobile-more-icon-wrapper, .social-circle, .value-icon, .skill-icon-box {
box-shadow: var(--shadow) !important;
border-color: transparent !important;
}
/* ── Panels: extruded ──────────────────────────────────────────── */
.accordion-item {
border-color: transparent !important;
box-shadow: var(--shadow) !important;
}
.timeline-content {
background: var(--surface) !important;
border-radius: 12px !important;
padding: 1rem 1.25rem !important;
box-shadow: var(--shadow) !important;
}
.feature-item {
background: var(--surface) !important;
border-color: transparent !important;
box-shadow: var(--shadow) !important;
}
.feature-item:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
.progress {
background-color: var(--surface-alt) !important;
box-shadow: var(--shadow-inset-sm) !important;
}
/* Card hover: consistent soft neu shadow */
.card-hover:hover, .project-card:hover, .blog-card:hover, .post-card:hover,
.news-card:hover, .testimonial-card:hover, .hover-lift:hover, .stats-item:hover {
box-shadow: var(--shadow-lg) !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const readerCard = document.getElementById('reader-card');
if (!readerCard) return;
// Settings Key constants
const THEME_KEY = 'reader_mode_theme';
const FONT_KEY = 'reader_mode_font';
const SIZE_KEY = 'reader_mode_size';
// Available Options
const themes = ['light', 'sepia', 'dark', 'oled'];
const fonts = ['serif', 'sans'];
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
// Default Configs
const siteTheme = document.documentElement.getAttribute('data-theme') || 'light';
const defaultTheme = siteTheme === 'dark' ? 'dark' : 'light';
let currentTheme = localStorage.getItem(THEME_KEY) || defaultTheme;
let currentFont = localStorage.getItem(FONT_KEY) || 'serif';
let currentSize = localStorage.getItem(SIZE_KEY) || 'md';
// Apply initial config
applySettings();
// Register Action Listeners (Toolbar)
document.getElementById('btn-font-serif').addEventListener('click', () => setFont('serif'));
document.getElementById('btn-font-sans').addEventListener('click', () => setFont('sans'));
document.getElementById('btn-size-decrease').addEventListener('click', () => adjustSize(-1));
document.getElementById('btn-size-increase').addEventListener('click', () => adjustSize(1));
document.getElementById('theme-light').addEventListener('click', () => setTheme('light'));
document.getElementById('theme-sepia').addEventListener('click', () => setTheme('sepia'));
document.getElementById('theme-dark').addEventListener('click', () => setTheme('dark'));
document.getElementById('theme-oled').addEventListener('click', () => setTheme('oled'));
// Register Action Listeners (Sidebar widgets, if present)
const sidebarSerif = document.getElementById('sidebar-font-serif');
const sidebarSans = document.getElementById('sidebar-font-sans');
const sidebarSizeDec = document.getElementById('sidebar-size-dec');
const sidebarSizeInc = document.getElementById('sidebar-size-inc');
if (sidebarSerif) sidebarSerif.addEventListener('click', () => setFont('serif'));
if (sidebarSans) sidebarSans.addEventListener('click', () => setFont('sans'));
if (sidebarSizeDec) sidebarSizeDec.addEventListener('click', () => adjustSize(-1));
if (sidebarSizeInc) sidebarSizeInc.addEventListener('click', () => adjustSize(1));
// Action Core Functions
function setTheme(theme) {
currentTheme = theme;
localStorage.setItem(THEME_KEY, theme);
applySettings();
}
function setFont(font) {
currentFont = font;
localStorage.setItem(FONT_KEY, font);
applySettings();
}
function adjustSize(delta) {
let index = sizes.indexOf(currentSize);
index = Math.max(0, Math.min(sizes.length - 1, index + delta));
currentSize = sizes[index];
localStorage.setItem(SIZE_KEY, currentSize);
applySettings();
}
function applySettings() {
// 1. Reset theme classes and apply selected
themes.forEach(t => readerCard.classList.remove('reader-theme-' + t));
readerCard.classList.add('reader-theme-' + currentTheme);
// Update Theme circles highlight
themes.forEach(t => {
const circle = document.getElementById('theme-' + t);
if (circle) {
if (t === currentTheme) {
circle.classList.add('active');
} else {
circle.classList.remove('active');
}
}
});
// 2. Reset Font classes and apply selected
fonts.forEach(f => readerCard.classList.remove('reader-font-' + f));
readerCard.classList.add('reader-font-' + currentFont);
// Highlight Font buttons
const serifBtns = [document.getElementById('btn-font-serif'), document.getElementById('sidebar-font-serif')];
const sansBtns = [document.getElementById('btn-font-sans'), document.getElementById('sidebar-font-sans')];
serifBtns.forEach(btn => {
if (btn) {
if (currentFont === 'serif') {
btn.classList.add('btn-primary-custom');
btn.classList.remove('btn-light');
} else {
btn.classList.add('btn-light');
btn.classList.remove('btn-primary-custom');
}
}
});
sansBtns.forEach(btn => {
if (btn) {
if (currentFont === 'sans') {
btn.classList.add('btn-primary-custom');
btn.classList.remove('btn-light');
} else {
btn.classList.add('btn-light');
btn.classList.remove('btn-primary-custom');
}
}
});
// 3. Reset Sizing classes and apply selected
sizes.forEach(s => readerCard.classList.remove('reader-size-' + s));
readerCard.classList.add('reader-size-' + currentSize);
}
// Reading Scroll progress calculation
const progressBar = document.getElementById('reading-progress-bar');
window.addEventListener('scroll', () => {
const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
if (documentHeight > 0) {
const scrollProgress = (window.pageYOffset / documentHeight) * 100;
progressBar.style.width = scrollProgress + '%';
}
});
});
</script>
<script>
// ══════════════════════════════════════════════════════════════
// PWA: Service Worker registration + install prompt
// ══════════════════════════════════════════════════════════════
(function () {
const PWA_VERSION = '20260805-1';
// ---- Service worker ------------------------------------
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js?v=' + PWA_VERSION).then((reg) => {
// Apply updates (new deploy) on the next load without disruption
reg.addEventListener('updatefound', () => {
const newWorker = reg.installing;
if (!newWorker) return;
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
newWorker.postMessage({ type: 'SKIP_WAITING' });
}
});
});
}).catch(() => {});
});
}
// ---- Install prompt --------------------------------------
let deferredPrompt = null;
const bannerId = 'pwa-install-banner';
const DISMISS_KEY = 'nesh-install-dismissed';
function showInstallBanner() {
if (localStorage.getItem(DISMISS_KEY) || document.getElementById(bannerId)) return;
const banner = document.createElement('div');
banner.id = bannerId;
banner.setAttribute('role', 'dialog');
banner.setAttribute('aria-label', 'Install app');
banner.innerHTML =
'<div class="pwa-install-content">' +
'<span class="pwa-install-icon">' +
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>' +
'</span>' +
'<div class="pwa-install-text">' +
'<strong>Install NeshDevTech</strong>' +
'<span>Get the app on your device</span>' +
'</div>' +
'<button type="button" class="pwa-install-btn" id="pwa-install-btn">Install</button>' +
'<button type="button" class="pwa-install-close" id="pwa-install-close" aria-label="Dismiss">×</button>' +
'</div>';
document.body.appendChild(banner);
document.getElementById('pwa-install-btn').addEventListener('click', () => {
if (!deferredPrompt) return;
deferredPrompt.prompt();
deferredPrompt.userChoice.finally(() => {
deferredPrompt = null;
hideInstallBanner();
});
});
document.getElementById('pwa-install-close').addEventListener('click', () => {
localStorage.setItem(DISMISS_KEY, '1');
hideInstallBanner();
});
requestAnimationFrame(() => banner.classList.add('show'));
}
function hideInstallBanner() {
const banner = document.getElementById(bannerId);
if (banner) {
banner.classList.remove('show');
setTimeout(() => banner.remove(), 250);
}
}
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallBanner();
});
window.addEventListener('appinstalled', () => {
deferredPrompt = null;
hideInstallBanner();
localStorage.setItem(DISMISS_KEY, '1');
});
})();
</script>
<style>
.pwa-install-content {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
}
#pwa-install-banner {
position: fixed;
left: 50%;
transform: translate(-50%, 20px);
bottom: 84px;
z-index: 1070;
background: var(--surface);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: var(--shadow-lg);
opacity: 0;
transition: opacity .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1);
width: min(420px, calc(100vw - 32px));
}
#pwa-install-banner.show {
opacity: 1;
transform: translate(-50%, 0);
}
.pwa-install-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 40px;
border-radius: 12px;
background: rgba(var(--primary-rgb), 0.1);
border: 1px solid rgba(var(--primary-rgb), 0.2);
color: var(--primary-color);
}
.pwa-install-icon svg {
width: 20px;
height: 20px;
}
.pwa-install-text {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.pwa-install-text strong {
font-size: 0.92rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pwa-install-text span {
font-size: 0.78rem;
color: var(--text-secondary);
}
.pwa-install-btn {
background: var(--primary-color);
border: none;
color: #fff;
font-weight: 600;
font-size: 0.85rem;
padding: 8px 18px;
border-radius: 9999px;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
transition: all .2s ease;
}
.pwa-install-btn:hover {
background: var(--primary-dark);
transform: translateY(-1px);
}
.pwa-install-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
border-radius: 50%;
transition: background-color .2s ease, color .2s ease;
}
.pwa-install-close:hover {
background: var(--surface-alt);
color: var(--text-primary);
}
@media (min-width: 992px) {
#pwa-install-banner {
bottom: 24px;
}
}
</style>
</div><!-- /.page-wrapper -->
</body>
</html>
