mirror of
https://github.com/lukaszraczylo/claude-mnemonic.git
synced 2026-06-11 00:09:28 +00:00
deslopify docs website
This commit is contained in:
Generated
+1424
File diff suppressed because it is too large
Load Diff
+165
-405
@@ -1,398 +1,153 @@
|
||||
<template>
|
||||
<div class="bg-slate-950 text-white min-h-screen relative overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<div class="fixed inset-0 pointer-events-none">
|
||||
<!-- Gradient orbs -->
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-amber-400/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||
<div class="absolute top-1/2 right-0 w-64 h-64 bg-slate-700/20 rounded-full blur-3xl animate-glow"></div>
|
||||
|
||||
<!-- Grid pattern -->
|
||||
<div class="absolute inset-0 bg-[linear-gradient(rgba(148,163,184,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.03)_1px,transparent_1px)] bg-[size:50px_50px]"></div>
|
||||
|
||||
<!-- Floating particles -->
|
||||
<div v-for="i in 12" :key="i"
|
||||
class="particle animate-particle"
|
||||
:style="{
|
||||
left: `${(i * 8.3) % 100}%`,
|
||||
animationDelay: `${i * 1.5}s`,
|
||||
animationDuration: `${15 + (i % 5) * 3}s`
|
||||
}"></div>
|
||||
</div>
|
||||
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<NavBar :mobile-menu-open="mobileMenuOpen" @toggle-menu="mobileMenuOpen = !mobileMenuOpen" />
|
||||
|
||||
<HeroSection
|
||||
badge="The missing piece for Claude Code"
|
||||
title-before="Yesterday's context."
|
||||
title-highlight="Today's session."
|
||||
subtitle="Stop re-explaining your codebase. Claude Mnemonic captures bug fixes, architecture decisions, and coding patterns - then brings them back exactly when you need them."
|
||||
/>
|
||||
<main class="flex-1">
|
||||
<HeroSection />
|
||||
|
||||
<!-- Dashboard Preview -->
|
||||
<section class="py-12 lg:py-16 px-4 sm:px-6 relative">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="relative rounded-xl overflow-hidden border border-slate-700/50 shadow-2xl shadow-amber-500/5">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent pointer-events-none z-10"></div>
|
||||
<img
|
||||
src="/claude-mnemonic.jpg"
|
||||
alt="Claude Mnemonic Dashboard"
|
||||
class="w-full h-auto"
|
||||
/>
|
||||
<section class="py-10 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="rounded-xl overflow-hidden border border-neutral-800">
|
||||
<img src="/claude-mnemonic.jpg" alt="Claude Mnemonic Dashboard" class="w-full h-auto block" loading="lazy" />
|
||||
</div>
|
||||
<p class="text-center text-neutral-600 text-xs mt-3 tracking-wide uppercase">Dashboard — localhost:37777</p>
|
||||
</div>
|
||||
<p class="text-center text-slate-500 text-sm mt-4">The dashboard at localhost:37777 - browse, search, and manage your memories. View graph stats, vector metrics, storage savings, and performance analytics.</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Problem Section -->
|
||||
<section class="py-20 lg:py-28 px-4 sm:px-6 relative">
|
||||
<div class="max-w-6xl mx-auto grid lg:grid-cols-2 gap-8 lg:gap-16 items-center">
|
||||
<div>
|
||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">Sound familiar?</h2>
|
||||
<p class="text-slate-400 text-base sm:text-lg mb-8">Every Claude Code session starts fresh. That bug you fixed last Tuesday? Gone. The auth flow you explained in detail? Forgotten. Your team's naming conventions? You'll explain them again.</p>
|
||||
<ul class="space-y-4 sm:space-y-5">
|
||||
<li class="flex items-start gap-3 sm:gap-4 text-slate-400">
|
||||
<i class="fas fa-times-circle text-red-400 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm sm:text-base">"We fixed this exact race condition last week..."</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3 sm:gap-4 text-slate-400">
|
||||
<i class="fas fa-times-circle text-red-400 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm sm:text-base">"No, we use kebab-case for API routes, not camelCase..."</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3 sm:gap-4 text-slate-400">
|
||||
<i class="fas fa-times-circle text-red-400 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm sm:text-base">"The database is Postgres, not MySQL. I told you yesterday..."</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3 sm:gap-4 text-white">
|
||||
<i class="fas fa-check-circle text-amber-500 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm sm:text-base"><strong>Mnemonic remembers so you don't have to repeat yourself.</strong></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 relative overflow-hidden glow-amber">
|
||||
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-amber-500 to-transparent"></div>
|
||||
<p class="text-slate-500 text-xs sm:text-sm mb-4 font-mono">// What Mnemonic captures automatically:</p>
|
||||
<div class="space-y-3">
|
||||
<FlowItem icon="fas fa-bug" title="Bug fixes & solutions" description='"Fixed N+1 query in user loader by adding .includes(:posts)"' />
|
||||
<FlowItem icon="fas fa-sitemap" title="Architecture decisions" description='"Using event sourcing for audit trail - all mutations go through EventStore"' />
|
||||
<FlowItem icon="fas fa-code-branch" title="Project conventions" description='"API routes use /api/v1/ prefix, kebab-case for endpoints"' />
|
||||
<FlowItem icon="fas fa-shield-alt" title="Security patterns" description='"Always validate JWT on server side, never trust client claims"' />
|
||||
<section id="features" class="py-20 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">What it does</h2>
|
||||
<p class="text-neutral-500 mb-12 max-w-xl">Captures context from your Claude Code sessions and brings it back when you need it. No manual effort.</p>
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<FeatureItem
|
||||
v-for="feature in features"
|
||||
:key="feature.title"
|
||||
:icon="feature.icon"
|
||||
:title="feature.title"
|
||||
:description="feature.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="py-20 lg:py-28 bg-slate-900/30 relative">
|
||||
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-slate-700 to-transparent"></div>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<SectionHeader title="Built for real workflows" subtitle="Not just storage - intelligent context that makes Claude more useful over time" />
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
<FeatureCard
|
||||
v-for="feature in features"
|
||||
:key="feature.title"
|
||||
:icon="feature.icon"
|
||||
:title="feature.title"
|
||||
:description="feature.description"
|
||||
/>
|
||||
<section class="py-10 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="rounded-xl overflow-hidden border border-neutral-800">
|
||||
<img src="/observation-relation-graph.jpg" alt="Knowledge Graph" class="w-full h-auto block" loading="lazy" />
|
||||
</div>
|
||||
<p class="text-center text-neutral-600 text-xs mt-3 tracking-wide uppercase">Observation relationship graph</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Knowledge Graph Preview -->
|
||||
<section class="py-16 lg:py-20 px-4 sm:px-6 relative">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<SectionHeader title="See how knowledge connects" subtitle="The knowledge graph reveals relationships between your memories automatically" />
|
||||
<div class="relative rounded-xl overflow-hidden border border-slate-700/50 shadow-2xl shadow-purple-500/5">
|
||||
<img
|
||||
src="/observation-relation-graph.jpg"
|
||||
alt="Knowledge Graph Visualization"
|
||||
class="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-center text-slate-500 text-sm mt-4">Click any observation to explore its relationships - see what causes what, what fixes what, and how concepts evolve</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="install" class="py-20 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Install</h2>
|
||||
<p class="text-neutral-500 mb-8">One command. No configuration. No account.</p>
|
||||
|
||||
<!-- Before/After Section -->
|
||||
<section class="py-20 lg:py-28 px-4 sm:px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="The difference" subtitle="Same question. Different experience." />
|
||||
<div class="grid md:grid-cols-2 gap-6 sm:gap-8">
|
||||
<!-- Before -->
|
||||
<div class="glass rounded-2xl p-5 sm:p-6 relative border-red-500/20">
|
||||
<div class="absolute top-3 sm:top-4 right-3 sm:right-4 bg-red-500/20 text-red-400 px-2 sm:px-3 py-1 rounded-full text-xs font-medium">Without Mnemonic</div>
|
||||
<div class="space-y-3 sm:space-y-4 mt-8">
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-blue-400">You:</span> Fix the authentication bug in the login flow</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-amber-400">Claude:</span> I'd be happy to help! Can you tell me about your authentication setup? What framework are you using? How is the login flow structured?</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-blue-400">You:</span> We use NextAuth with Postgres. The flow goes through /api/auth/... We talked about this last week...</p>
|
||||
</div>
|
||||
<p class="text-red-400 text-xs sm:text-sm text-center pt-2"><i class="fas fa-clock mr-2"></i>5+ minutes of re-explaining context</p>
|
||||
</div>
|
||||
<div class="flex gap-1 mb-6">
|
||||
<button
|
||||
v-for="tab in installTabs"
|
||||
:key="tab.id"
|
||||
@click="activeTab = tab.id"
|
||||
:class="[
|
||||
'px-4 py-2 text-sm rounded-lg transition-colors',
|
||||
activeTab === tab.id
|
||||
? 'bg-neutral-800 text-white'
|
||||
: 'text-neutral-500 hover:text-neutral-300'
|
||||
]"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- After -->
|
||||
<div class="glass rounded-2xl p-5 sm:p-6 relative border-green-500/20">
|
||||
<div class="absolute top-3 sm:top-4 right-3 sm:right-4 bg-green-500/20 text-green-400 px-2 sm:px-3 py-1 rounded-full text-xs font-medium">With Mnemonic</div>
|
||||
<div class="space-y-3 sm:space-y-4 mt-8">
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-blue-400">You:</span> Fix the authentication bug in the login flow</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-amber-400">Claude:</span> Looking at your NextAuth setup with Postgres, I see the issue is likely in the callback at <code class="text-amber-300 text-xs">/api/auth/[...nextauth].ts</code>. Based on the session validation pattern we established, the fix is...</p>
|
||||
</div>
|
||||
<p class="text-green-400 text-xs sm:text-sm text-center pt-2"><i class="fas fa-bolt mr-2"></i>Instant context. Immediate value.</p>
|
||||
</div>
|
||||
<div v-show="activeTab === 'macos'">
|
||||
<CodeBlock code="curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<section id="how-it-works" class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Zero setup. Zero maintenance." subtitle="Install once, benefit forever. Mnemonic works silently in the background." />
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 relative">
|
||||
<div class="hidden lg:block absolute top-10 left-[60px] right-[60px] h-0.5 bg-gradient-to-r from-amber-500 via-amber-400 to-amber-500 opacity-30"></div>
|
||||
<StepCard
|
||||
v-for="step in steps"
|
||||
:key="step.number"
|
||||
:number="step.number"
|
||||
:title="step.title"
|
||||
:description="step.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div v-show="activeTab === 'windows'">
|
||||
<CodeBlock code="irm https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.ps1 | iex" />
|
||||
</div>
|
||||
|
||||
<!-- Installation Section -->
|
||||
<section id="installation" class="py-20 lg:py-28 px-4 sm:px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Quick install" subtitle="One command. No configuration. No account required." />
|
||||
<div v-show="activeTab === 'source'">
|
||||
<CodeBlock code="git clone https://github.com/lukaszraczylo/claude-mnemonic.git cd claude-mnemonic make build && make install" />
|
||||
<p class="text-neutral-600 text-xs mt-2">Requires: Go 1.24+, Node.js 18+, CGO compiler</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-2 mb-6 sm:mb-8">
|
||||
<button
|
||||
v-for="tab in installTabs"
|
||||
:key="tab.id"
|
||||
@click="activeTab = tab.id"
|
||||
:class="[
|
||||
'px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all',
|
||||
activeTab === tab.id
|
||||
? 'bg-amber-500/15 border border-amber-500 text-amber-500'
|
||||
: 'glass text-slate-400 hover:border-slate-600'
|
||||
]"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'macos'">
|
||||
<CodeBlock :code="installCommands.macos">
|
||||
<span class="text-slate-500"># That's it. Seriously.</span>
|
||||
<br>
|
||||
<span class="text-amber-400">curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash</span>
|
||||
</CodeBlock>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'windows'">
|
||||
<CodeBlock :code="installCommands.windows">
|
||||
<span class="text-slate-500"># PowerShell (as Administrator)</span>
|
||||
<br>
|
||||
<span class="text-amber-400">irm https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.ps1 | iex</span>
|
||||
</CodeBlock>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'source'">
|
||||
<CodeBlock :code="installCommands.source">
|
||||
<span class="text-slate-500"># For contributors and tinkerers</span>
|
||||
<br>
|
||||
<span class="text-amber-400">git clone https://github.com/lukaszraczylo/claude-mnemonic.git</span>
|
||||
<br>
|
||||
<span class="text-amber-400">cd claude-mnemonic</span>
|
||||
<br>
|
||||
<span class="text-amber-400">make build && make install</span>
|
||||
<br><br>
|
||||
<span class="text-slate-500"># Requires: Go 1.24+, Node.js 18+, CGO compiler</span>
|
||||
</CodeBlock>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-slate-500 mt-6 sm:mt-8 text-xs sm:text-sm">
|
||||
After install, open <a href="http://localhost:37777" class="text-amber-400 hover:underline animated-underline">localhost:37777</a> to see the dashboard.
|
||||
Start a new Claude Code CLI session - memory is now active.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Requirements Section -->
|
||||
<section id="requirements" class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Requirements" subtitle="Minimal dependencies. Everything else is built-in." />
|
||||
|
||||
<div class="max-w-xl mx-auto">
|
||||
<div class="glass rounded-2xl p-5 sm:p-6">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<i class="fas fa-check-circle text-green-500"></i>
|
||||
<span class="text-white font-semibold text-sm sm:text-base">That's all you need</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="req in requiredDeps" :key="req.name" class="flex items-start gap-3 p-3 bg-slate-800/50 rounded-lg">
|
||||
<i :class="[req.icon, 'text-amber-500 mt-0.5']"></i>
|
||||
<div>
|
||||
<code class="text-white text-xs sm:text-sm font-semibold">{{ req.name }}</code>
|
||||
<p class="text-slate-400 text-xs mt-1">{{ req.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-slate-500 text-xs mt-4">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
No Python. No external services. Semantic search with local embeddings is built-in.
|
||||
<div class="mt-8 p-4 rounded-lg border border-neutral-800 bg-neutral-900/50 max-w-2xl">
|
||||
<p class="text-neutral-500 text-sm">
|
||||
<i class="fas fa-info-circle text-neutral-600 mr-1"></i>
|
||||
After install, open <a href="http://localhost:37777" class="text-amber-500 hover:text-amber-400">localhost:37777</a> for the dashboard. Start a new Claude Code session — memory is active.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Configuration Section -->
|
||||
<section id="configuration" class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Fully configurable" subtitle="Works out of the box, but adapts to your preferences" />
|
||||
<section id="requirements" class="py-20 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Requirements</h2>
|
||||
<p class="text-neutral-500 mb-8">Minimal dependencies. Everything else is built in.</p>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-6 sm:gap-8">
|
||||
<!-- Config file example -->
|
||||
<div class="glass rounded-2xl p-5 sm:p-6">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<i class="fas fa-cog text-amber-500"></i>
|
||||
<span class="text-white font-semibold text-sm sm:text-base">~/.claude-mnemonic/settings.json</span>
|
||||
<div class="grid sm:grid-cols-2 gap-4 max-w-xl">
|
||||
<div v-for="req in requiredDeps" :key="req.name" class="p-4 rounded-lg border border-neutral-800 bg-neutral-900/50">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<i :class="[req.icon, 'text-amber-500 text-sm']"></i>
|
||||
<code class="text-white text-sm font-semibold">{{ req.name }}</code>
|
||||
</div>
|
||||
<p class="text-neutral-500 text-xs pl-6">{{ req.description }}</p>
|
||||
</div>
|
||||
<pre class="text-xs sm:text-sm font-mono overflow-x-auto"><code><span class="text-slate-500">{</span>
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_WORKER_PORT"</span><span class="text-slate-500">:</span> <span class="text-amber-400">37777</span><span class="text-slate-500">,</span>
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_OBSERVATIONS"</span><span class="text-slate-500">:</span> <span class="text-amber-400">100</span><span class="text-slate-500">,</span>
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_FULL_COUNT"</span><span class="text-slate-500">:</span> <span class="text-amber-400">25</span><span class="text-slate-500">,</span>
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_MODEL"</span><span class="text-slate-500">:</span> <span class="text-sky-400">"haiku"</span>
|
||||
<span class="text-slate-500">}</span></code></pre>
|
||||
</div>
|
||||
<p class="text-neutral-600 text-sm mt-4">No Python. No external services. No API keys — uses your existing Claude Pro/Max subscription.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Config options list -->
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
<div v-for="config in configOptions" :key="config.name" class="glass rounded-xl p-4 hover:border-amber-500/20 transition-colors">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-amber-500/15 rounded-lg flex items-center justify-center text-amber-500 flex-shrink-0 text-sm">
|
||||
<i :class="config.icon"></i>
|
||||
<section id="config" class="py-20 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Configuration</h2>
|
||||
<p class="text-neutral-500 mb-8">Works out of the box. Adjust if you want to.</p>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-8">
|
||||
<div class="rounded-lg border border-neutral-800 bg-neutral-900/50 p-5">
|
||||
<p class="text-neutral-600 text-xs mb-3 font-mono">~/.claude-mnemonic/settings.json</p>
|
||||
<pre class="text-sm overflow-x-auto leading-relaxed"><code>{
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_WORKER_PORT"</span>: <span class="text-amber-400">37777</span>,
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_OBSERVATIONS"</span>: <span class="text-amber-400">100</span>,
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_FULL_COUNT"</span>: <span class="text-amber-400">25</span>,
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_RERANKING_ENABLED"</span>: <span class="text-amber-400">true</span>
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div v-for="config in configOptions" :key="config.name" class="flex items-start gap-3 p-3 rounded-lg border border-neutral-800/50">
|
||||
<div class="w-6 h-6 rounded bg-neutral-800 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<i class="fas fa-sliders text-neutral-500 text-xs"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<code class="text-amber-400 text-xs sm:text-sm">{{ config.name }}</code>
|
||||
<p class="text-slate-400 text-xs sm:text-sm mt-1">{{ config.description }}</p>
|
||||
<div>
|
||||
<code class="text-amber-500 text-xs">{{ config.name }}</code>
|
||||
<p class="text-neutral-500 text-xs mt-0.5">{{ config.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-neutral-600 text-xs mt-6">
|
||||
All settings also work as environment variables. <a href="https://github.com/lukaszraczylo/claude-mnemonic#configuration" target="_blank" class="text-neutral-500 hover:text-neutral-300">Full docs</a>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="text-center text-slate-500 mt-6 sm:mt-8 text-xs sm:text-sm">
|
||||
All settings can also be set via environment variables. See <a href="https://github.com/lukaszraczylo/claude-mnemonic#configuration" target="_blank" class="text-amber-400 hover:underline">full documentation</a> for all options.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Details -->
|
||||
<section class="py-20 lg:py-28 px-4 sm:px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Under the hood" subtitle="Built with simplicity and performance in mind" />
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 text-center">
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
|
||||
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">Go</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Single binary. Fast startup, low memory. Zero runtime dependencies.</p>
|
||||
</div>
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
|
||||
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">SQLite</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">FTS5 full-text search. Single file database. Survives restarts.</p>
|
||||
</div>
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
|
||||
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">sqlite-vec</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Hybrid vector storage with LEANN-inspired selective embeddings. 60-80% storage reduction.</p>
|
||||
</div>
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
|
||||
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">BGE</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Two-stage retrieval: bi-encoder embeddings + cross-encoder reranking for high accuracy.</p>
|
||||
</div>
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
|
||||
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">Tree-sitter</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">AST-aware code chunking respects function boundaries for Go, Python, and TypeScript.</p>
|
||||
</div>
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
|
||||
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">CSR Graph</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Memory-efficient observation relationship graph with edge detection and hub identification.</p>
|
||||
<section id="architecture" class="py-20 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Under the hood</h2>
|
||||
<p class="text-neutral-500 mb-10">No magic. Here's what's running locally on your machine.</p>
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<TechCard v-for="tech in techStack" :key="tech.name" :name="tech.name" :description="tech.description" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Trust Section -->
|
||||
<section class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<SectionHeader title="Open source. Real person." subtitle="Not another anonymous package - built by a developer you can verify" />
|
||||
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 text-center">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-8 mb-6">
|
||||
<a href="https://github.com/lukaszraczylo" target="_blank" class="group">
|
||||
<img
|
||||
src="https://github.com/lukaszraczylo.png"
|
||||
alt="Lukasz Raczylo"
|
||||
class="w-20 h-20 sm:w-24 sm:h-24 rounded-full border-2 border-slate-700 group-hover:border-amber-500 transition-colors"
|
||||
/>
|
||||
</a>
|
||||
<div class="text-center sm:text-left">
|
||||
<h3 class="text-white font-semibold text-lg sm:text-xl mb-1">Lukasz Raczylo</h3>
|
||||
<p class="text-slate-400 text-sm mb-3">Principal Engineer & Open Source Maintainer</p>
|
||||
<div class="flex flex-wrap justify-center sm:justify-start gap-3">
|
||||
<a href="https://github.com/lukaszraczylo" target="_blank" class="text-slate-500 hover:text-white transition-colors text-sm">
|
||||
<i class="fab fa-github mr-1"></i>GitHub
|
||||
</a>
|
||||
<a href="https://linkedin.com/in/lukaszraczylo" target="_blank" class="text-slate-500 hover:text-white transition-colors text-sm">
|
||||
<i class="fab fa-linkedin mr-1"></i>LinkedIn
|
||||
</a>
|
||||
<a href="https://raczylo.com" target="_blank" class="text-slate-500 hover:text-white transition-colors text-sm">
|
||||
<i class="fas fa-globe mr-1"></i>Website
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid sm:grid-cols-3 gap-4 pt-6 border-t border-slate-700/50">
|
||||
<div class="text-center">
|
||||
<div class="text-amber-500 font-bold text-xl sm:text-2xl mb-1">100%</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Open Source</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-amber-500 font-bold text-xl sm:text-2xl mb-1">MIT</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">License</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-amber-500 font-bold text-xl sm:text-2xl mb-1">0</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Data collection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-slate-500 mt-6 sm:mt-8 text-xs sm:text-sm">
|
||||
Unlike anonymous packages, you can verify who built this, read every line of code, and reach out directly with questions.
|
||||
<br class="hidden sm:block">
|
||||
Your security matters - that's why transparency is non-negotiable.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq" class="py-20 lg:py-28 px-4 sm:px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<SectionHeader title="Questions?" />
|
||||
<div class="grid sm:grid-cols-2 gap-4 sm:gap-6">
|
||||
<section id="faq" class="py-20 px-4 sm:px-6">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-10">FAQ</h2>
|
||||
<FaqItem
|
||||
v-for="faq in faqs"
|
||||
:key="faq.question"
|
||||
@@ -400,8 +155,21 @@
|
||||
:answer="faq.answer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="py-20 px-4 sm:px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<p class="text-neutral-600 text-sm mb-2">Open source, built by</p>
|
||||
<a href="https://github.com/lukaszraczylo" target="_blank" class="inline-flex items-center gap-3 text-neutral-400 hover:text-white transition-colors group">
|
||||
<img src="https://github.com/lukaszraczylo.png" alt="Lukasz Raczylo" class="w-10 h-10 rounded-full border border-neutral-700 group-hover:border-neutral-500 transition-colors" />
|
||||
<div class="text-left">
|
||||
<div class="text-sm font-medium">Lukasz Raczylo</div>
|
||||
<div class="text-xs text-neutral-600">MIT License</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<FooterSection />
|
||||
</div>
|
||||
@@ -411,10 +179,8 @@
|
||||
import { ref } from 'vue'
|
||||
import NavBar from './components/NavBar.vue'
|
||||
import HeroSection from './components/HeroSection.vue'
|
||||
import SectionHeader from './components/SectionHeader.vue'
|
||||
import FeatureCard from './components/FeatureCard.vue'
|
||||
import StepCard from './components/StepCard.vue'
|
||||
import FlowItem from './components/FlowItem.vue'
|
||||
import FeatureItem from './components/FeatureItem.vue'
|
||||
import TechCard from './components/TechCard.vue'
|
||||
import CodeBlock from './components/CodeBlock.vue'
|
||||
import FaqItem from './components/FaqItem.vue'
|
||||
import FooterSection from './components/FooterSection.vue'
|
||||
@@ -423,22 +189,15 @@ const mobileMenuOpen = ref(false)
|
||||
const activeTab = ref('macos')
|
||||
|
||||
const features = [
|
||||
{ icon: 'fas fa-brain', title: 'Learns as you work', description: 'Every bug fix, every architecture decision, every "aha moment" - captured automatically without breaking your flow.' },
|
||||
{ icon: 'fas fa-search', title: 'Two-stage retrieval', description: 'Cross-encoder reranking delivers highly relevant results. Finds what you need even with vague queries like "that auth thing".' },
|
||||
{ icon: 'fas fa-project-diagram', title: 'Graph-based search', description: 'LEANN Phase 2: Graph relationships between observations (file overlap, semantic similarity, temporal proximity) for smarter context retrieval.' },
|
||||
{ icon: 'fas fa-microchip', title: 'AST-aware chunking', description: 'Intelligent code splitting respects function boundaries. Go, Python, and TypeScript code is chunked at semantic boundaries, not arbitrary line counts.' },
|
||||
{ icon: 'fas fa-database', title: 'Hybrid vector storage', description: 'LEANN-inspired selective storage: frequently-accessed "hub" observations store embeddings, others recompute on-demand. 60-80% storage savings with <50ms latency.' },
|
||||
{ icon: 'fas fa-folder-tree', title: 'Project-aware context', description: 'Your React knowledge stays in React projects. Your Go patterns stay in Go projects. No context pollution.' },
|
||||
{ icon: 'fas fa-chart-line', title: 'Smart scoring', description: 'Importance decay, pattern detection, and conflict resolution ensure the most valuable memories surface first.' },
|
||||
{ icon: 'fas fa-gauge-high', title: 'Auto-tuning', description: 'Dynamic hub threshold adjustment based on query performance. Automatically balances storage efficiency with search latency for your workload.' },
|
||||
{ icon: 'fas fa-lock', title: '100% private', description: 'Your code context never leaves your machine. No telemetry. No cloud sync. Your memories are yours.' },
|
||||
]
|
||||
|
||||
const steps = [
|
||||
{ number: 1, title: 'Install', description: 'One command. Hooks into Claude Code automatically.' },
|
||||
{ number: 2, title: 'Work normally', description: 'Code with Claude as usual. Mnemonic listens silently in the background.' },
|
||||
{ number: 3, title: 'Knowledge builds', description: 'Every session adds to your knowledge base. Bug fixes. Decisions. Patterns.' },
|
||||
{ number: 4, title: 'Context appears', description: 'Start a new session - relevant memories are already there. No re-explaining.' },
|
||||
{ icon: 'fas fa-brain', title: 'Session memory', description: 'Captures bug fixes, decisions, and patterns automatically from your Claude Code sessions.' },
|
||||
{ icon: 'fas fa-magnifying-glass-chart', title: 'Two-stage retrieval', description: 'Bi-encoder embeddings followed by cross-encoder reranking for accurate results.' },
|
||||
{ icon: 'fas fa-diagram-project', title: 'Knowledge graph', description: 'Automatic relationship detection between observations via file overlap and semantic similarity.' },
|
||||
{ icon: 'fas fa-folder-tree', title: 'Project isolation', description: 'Each project has its own memory. Your React knowledge doesn\'t leak into Go projects.' },
|
||||
{ icon: 'fas fa-code', title: 'AST-aware chunking', description: 'Tree-sitter splits Go, Python, and TypeScript code at semantic boundaries.' },
|
||||
{ icon: 'fas fa-database', title: 'Hybrid vector storage', description: 'Selective embedding caching. 60-80% storage reduction with minimal latency impact.' },
|
||||
{ icon: 'fas fa-lock', title: 'Local embeddings', description: 'ONNX Runtime with all-MiniLM-L6-v2. No external API calls, everything stays on your machine.' },
|
||||
{ icon: 'fas fa-gauge', title: 'Live statusline', description: 'Real-time metrics in Claude Code: [mnemonic] ● served:42 | project:28 memories' },
|
||||
{ icon: 'fas fa-arrows-rotate', title: 'Auto-updates', description: 'Checks for new versions on startup, downloads in the background, applies on restart.' },
|
||||
]
|
||||
|
||||
const installTabs = [
|
||||
@@ -447,36 +206,37 @@ const installTabs = [
|
||||
{ id: 'source', label: 'From Source' },
|
||||
]
|
||||
|
||||
const installCommands = {
|
||||
macos: `curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash`,
|
||||
windows: `irm https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.ps1 | iex`,
|
||||
source: `git clone https://github.com/lukaszraczylo/claude-mnemonic.git\ncd claude-mnemonic\nmake build && make install`,
|
||||
}
|
||||
|
||||
const configOptions = [
|
||||
{ name: 'CLAUDE_MNEMONIC_WORKER_PORT', description: 'HTTP port for the worker service (default: 37777)', icon: 'fas fa-network-wired' },
|
||||
{ name: 'CLAUDE_MNEMONIC_CONTEXT_OBSERVATIONS', description: 'Maximum observations injected per session (default: 100)', icon: 'fas fa-layer-group' },
|
||||
{ name: 'CLAUDE_MNEMONIC_RERANKING_ENABLED', description: 'Enable cross-encoder reranking for improved search relevance (default: true)', icon: 'fas fa-sort-amount-down' },
|
||||
{ name: 'CLAUDE_MNEMONIC_CONTEXT_RELEVANCE_THRESHOLD', description: 'Minimum similarity score for inclusion, 0.0-1.0 (default: 0.3)', icon: 'fas fa-filter' },
|
||||
{ name: 'CLAUDE_MNEMONIC_VECTOR_STORAGE_STRATEGY', description: 'Storage strategy: "hub" (default), "always", or "on_demand"', icon: 'fas fa-database' },
|
||||
{ name: 'CLAUDE_MNEMONIC_GRAPH_ENABLED', description: 'Enable graph-based search with observation relationships (default: true)', icon: 'fas fa-project-diagram' },
|
||||
{ name: 'CLAUDE_MNEMONIC_GRAPH_MAX_HOPS', description: 'Maximum graph traversal depth for search expansion (default: 2)', icon: 'fas fa-route' },
|
||||
{ name: 'CLAUDE_MNEMONIC_GRAPH_REBUILD_INTERVAL_MIN', description: 'How often to rebuild the observation graph in minutes (default: 60)', icon: 'fas fa-clock' },
|
||||
{ name: 'WORKER_PORT', description: 'Dashboard and API port (default: 37777)' },
|
||||
{ name: 'CONTEXT_OBSERVATIONS', description: 'Max memories injected per session (default: 100)' },
|
||||
{ name: 'CONTEXT_FULL_COUNT', description: 'Full-detail memories, rest condensed (default: 25)' },
|
||||
{ name: 'CONTEXT_RELEVANCE_THRESHOLD', description: 'Min similarity score 0.0-1.0 (default: 0.3)' },
|
||||
{ name: 'RERANKING_ENABLED', description: 'Cross-encoder reranking (default: true)' },
|
||||
{ name: 'VECTOR_STORAGE_STRATEGY', description: 'hub (default), always, or on_demand' },
|
||||
{ name: 'GRAPH_ENABLED', description: 'Graph-based search with relationships (default: true)' },
|
||||
{ name: 'EMBEDDING_MODEL', description: 'Embedding model for semantic search (default: bge-v1.5)' },
|
||||
]
|
||||
|
||||
const requiredDeps = [
|
||||
{ name: 'Claude Code CLI', description: 'Host application - this is a plugin for Claude Code. Uses your existing subscription (Pro/Max) instead of API keys.', icon: 'fas fa-terminal' },
|
||||
{ name: 'jq', description: 'JSON processor used during installation. Usually pre-installed on most systems.', icon: 'fas fa-code' },
|
||||
{ name: 'Claude Code CLI', description: 'Host application. Uses your existing subscription.', icon: 'fas fa-terminal' },
|
||||
{ name: 'jq', description: 'JSON processing during install. Usually pre-installed.', icon: 'fas fa-code' },
|
||||
]
|
||||
|
||||
const techStack = [
|
||||
{ name: 'Go', description: 'Single binary, fast startup, low memory, zero runtime dependencies.' },
|
||||
{ name: 'SQLite + FTS5', description: 'Full-text search in a single file. Survives restarts.' },
|
||||
{ name: 'sqlite-vec', description: 'Vector search embedded in SQLite with LEANN-inspired selective embeddings.' },
|
||||
{ name: 'BGE reranker', description: 'Cross-encoder for two-stage retrieval: bi-encoder + reranking.' },
|
||||
{ name: 'Tree-sitter', description: 'AST-aware code chunking for Go, Python, and TypeScript.' },
|
||||
{ name: 'CSR Graph', description: 'Memory-efficient observation relationship graph with edge detection.' },
|
||||
]
|
||||
|
||||
const faqs = [
|
||||
{ question: 'Will it confuse Claude with wrong context?', answer: 'No. Mnemonic uses project isolation and semantic relevance scoring. Only memories from the current project (or global best practices) are injected, and only when they\'re actually relevant to your prompt.' },
|
||||
{ question: 'What exactly gets saved?', answer: 'Bug fixes with context ("Fixed race condition by adding mutex"), architecture decisions ("Using repository pattern for data access"), conventions ("All API routes prefixed with /api/v1"), and learnings you want to preserve.' },
|
||||
{ question: 'How does hybrid vector storage work?', answer: 'LEANN-inspired selective storage: frequently-accessed "hub" observations (identified by access patterns and graph centrality) store embeddings. Infrequently-accessed observations recompute embeddings on-demand during search. This reduces storage by 60-80% with minimal latency impact (<50ms).' },
|
||||
{ question: 'Can I delete or edit memories?', answer: 'Yes. The web dashboard at localhost:37777 lets you browse, search, edit, and delete any memory. You can also view graph relationships, storage metrics, and performance analytics. You\'re always in control.' },
|
||||
{ question: 'Does it work with my existing Claude Code setup?', answer: 'Yes. Mnemonic installs as a Claude Code plugin with hooks. Your existing workflows, settings, and shortcuts remain unchanged.' },
|
||||
{ question: 'What if I switch between projects frequently?', answer: 'That\'s the point. Each project has isolated memories. Switch from your Python ML project to your TypeScript app - context switches automatically.' },
|
||||
{ question: 'Is there a performance impact?', answer: 'Minimal. The Go worker is lightweight (typically under 30MB RAM). Hybrid storage and auto-tuning optimize for your workload. Context injection at session start takes milliseconds for most projects.' },
|
||||
{ question: 'What is AST-aware chunking?', answer: 'When processing code observations, Mnemonic uses Tree-sitter parsers to respect function and class boundaries instead of arbitrary line limits. Go, Python, and TypeScript code is chunked at semantic boundaries for better search accuracy.' },
|
||||
{ question: 'Will it confuse Claude with wrong context?', answer: 'Project isolation and semantic relevance scoring prevent that. Only memories from the current project (or global best practices) are injected, and only when relevant to your prompt.' },
|
||||
{ question: 'What gets stored?', answer: 'Bug fixes with context, architecture decisions, project conventions, security patterns — things you\'d otherwise re-explain each session. No raw conversation dumps.' },
|
||||
{ question: 'Can I delete or edit memories?', answer: 'Yes. The dashboard at localhost:37777 lets you browse, search, edit, and delete anything. You can also view graph relationships and storage metrics.' },
|
||||
{ question: 'Performance impact?', answer: 'The Go worker uses ~30MB RAM. Context injection at session start takes milliseconds for most projects. Hybrid storage auto-tunes for your workload.' },
|
||||
{ question: 'Does it work with my existing setup?', answer: 'Yes. Installs as a Claude Code plugin with hooks. Your workflows, settings, and shortcuts stay the same.' },
|
||||
{ question: 'What if I switch between projects?', answer: 'Each project has isolated memories. Switch from your Python ML project to your TypeScript app — context switches automatically.' },
|
||||
]
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="glass rounded-xl p-4 sm:p-6 relative max-w-4xl mx-auto glow-amber">
|
||||
<button @click="copyCode" class="absolute top-3 sm:top-4 right-3 sm:right-4 bg-slate-800/50 border border-slate-700/50 text-slate-500 hover:text-white hover:border-slate-600 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md text-xs transition-all">
|
||||
{{ copied ? 'Copied!' : 'Copy' }}
|
||||
<div class="rounded-lg border border-neutral-800 bg-neutral-900/30 p-4 relative overflow-hidden">
|
||||
<button @click="copyCode" class="absolute top-3 right-3 text-neutral-600 hover:text-neutral-300 text-xs transition-colors px-2 py-1 rounded border border-neutral-800 hover:border-neutral-600">
|
||||
{{ copied ? 'Copied' : 'Copy' }}
|
||||
</button>
|
||||
<pre class="text-xs sm:text-sm whitespace-pre-wrap break-all font-mono pr-16 sm:pr-20"><slot></slot></pre>
|
||||
<pre class="text-sm whitespace-pre-wrap break-all font-mono text-neutral-300 pr-20 leading-relaxed"><code>{{ code }}</code></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,10 +11,7 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
code: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
code: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const copied = ref(false)
|
||||
|
||||
@@ -1,19 +1,22 @@
|
||||
<template>
|
||||
<div class="glass rounded-xl p-4 sm:p-6 hover:border-amber-500/20 transition-colors">
|
||||
<h3 class="text-white font-semibold text-sm sm:text-base mb-2 sm:mb-3">{{ question }}</h3>
|
||||
<p class="text-slate-400 text-xs sm:text-sm leading-relaxed">{{ answer }}</p>
|
||||
<div class="border-b border-neutral-800 last:border-0">
|
||||
<button @click="open = !open" class="w-full text-left flex items-center justify-between py-4">
|
||||
<span class="text-white text-sm font-medium pr-4">{{ question }}</span>
|
||||
<i :class="open ? 'fas fa-minus' : 'fas fa-plus'" class="text-neutral-600 text-xs flex-shrink-0"></i>
|
||||
</button>
|
||||
<div v-if="open" class="pb-4">
|
||||
<p class="text-neutral-500 text-sm leading-relaxed">{{ answer }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
question: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
answer: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
question: { type: String, required: true },
|
||||
answer: { type: String, required: true },
|
||||
})
|
||||
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div class="glass rounded-2xl p-5 sm:p-8 relative overflow-hidden group hover:border-amber-500/30 hover:-translate-y-1 transition-all duration-300">
|
||||
<div class="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-amber-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-amber-500/15 rounded-xl flex items-center justify-center mb-4 sm:mb-5 text-amber-500 text-lg sm:text-xl">
|
||||
<i :class="icon"></i>
|
||||
</div>
|
||||
<h3 class="text-white font-semibold text-base sm:text-lg mb-2 sm:mb-3">{{ title }}</h3>
|
||||
<p class="text-slate-400 text-xs sm:text-sm leading-relaxed">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="p-5 rounded-lg border border-neutral-800 bg-neutral-900/30">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<i :class="[icon, 'text-amber-500 text-sm']"></i>
|
||||
<h3 class="text-white font-semibold text-sm">{{ title }}</h3>
|
||||
</div>
|
||||
<p class="text-neutral-500 text-xs leading-relaxed pl-7">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
icon: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
})
|
||||
</script>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="flex items-start sm:items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-slate-800/50 rounded-lg border-l-4 border-amber-500">
|
||||
<div class="w-8 h-8 sm:w-10 sm:h-10 bg-amber-500/15 rounded-lg flex items-center justify-center text-amber-500 flex-shrink-0 text-sm sm:text-base">
|
||||
<i :class="icon"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<strong class="block text-white text-sm sm:text-base mb-0.5 sm:mb-1">{{ title }}</strong>
|
||||
<span class="text-slate-500 text-xs sm:text-sm block break-words">{{ description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<footer class="border-t border-slate-800 py-10 sm:py-16 relative">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col md:flex-row justify-between items-center gap-4 sm:gap-6">
|
||||
<div class="flex flex-wrap justify-center gap-4 sm:gap-6">
|
||||
<footer class="border-t border-neutral-800/80 py-8 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<p class="text-neutral-600 text-xs">MIT License</p>
|
||||
<div class="flex gap-5">
|
||||
<a v-for="link in links" :key="link.href" :href="link.href" target="_blank"
|
||||
class="text-slate-500 hover:text-white text-xs sm:text-sm transition-colors animated-underline">
|
||||
class="text-neutral-600 hover:text-neutral-400 text-xs transition-colors">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-slate-600 text-xs sm:text-sm text-center">{{ copyright }}</p>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@@ -20,12 +20,8 @@ defineProps({
|
||||
{ label: 'GitHub', href: 'https://github.com/lukaszraczylo/claude-mnemonic' },
|
||||
{ label: 'Releases', href: 'https://github.com/lukaszraczylo/claude-mnemonic/releases' },
|
||||
{ label: 'Issues', href: 'https://github.com/lukaszraczylo/claude-mnemonic/issues' },
|
||||
{ label: 'MIT License', href: 'https://github.com/lukaszraczylo/claude-mnemonic/blob/main/LICENSE' },
|
||||
{ label: 'License', href: 'https://github.com/lukaszraczylo/claude-mnemonic/blob/main/LICENSE' },
|
||||
]
|
||||
},
|
||||
copyright: {
|
||||
type: String,
|
||||
default: 'Made with care for the Claude Code community'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,44 +1,35 @@
|
||||
<template>
|
||||
<section class="min-h-screen flex items-center relative pt-24 sm:pt-28 pb-16 sm:pb-20">
|
||||
<!-- Background Effects -->
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<div class="absolute top-[-50%] left-1/2 -translate-x-1/2 w-[150%] h-full bg-[radial-gradient(ellipse_at_center,rgba(245,158,11,0.12)_0%,transparent_60%)] opacity-60"></div>
|
||||
</div>
|
||||
<section class="pt-24 pb-8 sm:pt-32 sm:pb-12 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<p class="text-amber-500 text-sm font-medium mb-4 tracking-wide">Persistent memory for Claude Code</p>
|
||||
|
||||
<div class="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 text-center">
|
||||
<div class="inline-flex items-center gap-2 glass px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm text-slate-400 mb-6 sm:mb-8 opacity-0 animate-fade-in-up">
|
||||
<span class="w-2 h-2 bg-amber-500 rounded-full animate-pulse-slow"></span>
|
||||
{{ badge }}
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-white mb-4 sm:mb-6 leading-tight opacity-0 animate-fade-in-up animation-delay-100">
|
||||
{{ titleBefore }}<br class="hidden sm:block">
|
||||
<span class="sm:hidden"> </span>
|
||||
<span class="text-gradient">{{ titleHighlight }}</span>
|
||||
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-[1.1] mb-6 max-w-3xl">
|
||||
Stop re-explaining your codebase every session.
|
||||
</h1>
|
||||
|
||||
<p class="text-base sm:text-lg md:text-xl text-slate-400 max-w-2xl mx-auto mb-8 sm:mb-10 opacity-0 animate-fade-in-up animation-delay-200 px-2">
|
||||
{{ subtitle }}
|
||||
<p class="text-neutral-400 text-lg sm:text-xl max-w-2xl mb-10 leading-relaxed">
|
||||
Claude Code forgets everything when your session ends. Mnemonic captures what you've already explained — bug fixes, architecture decisions, patterns — and brings it back when relevant.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center mb-12 sm:mb-16 opacity-0 animate-fade-in-up animation-delay-300 px-4 sm:px-0">
|
||||
<a :href="primaryCta.href" class="inline-flex items-center justify-center gap-2 bg-gradient-to-br from-amber-500 to-amber-400 text-slate-950 px-6 sm:px-8 py-3 sm:py-3.5 rounded-lg font-semibold hover:scale-105 hover:shadow-lg hover:shadow-amber-500/30 transition-all">
|
||||
<i :class="primaryCta.icon"></i>
|
||||
{{ primaryCta.label }}
|
||||
<div class="flex flex-col sm:flex-row gap-3 mb-12">
|
||||
<a href="#install" class="inline-flex items-center justify-center gap-2 bg-white text-neutral-900 px-6 py-3 rounded-lg font-semibold text-sm hover:bg-neutral-200 transition-colors">
|
||||
Install now
|
||||
</a>
|
||||
<a :href="secondaryCta.href" target="_blank" class="inline-flex items-center justify-center gap-2 glass text-white px-6 sm:px-8 py-3 sm:py-3.5 rounded-lg font-medium hover:border-amber-500/30 hover:bg-amber-500/10 transition-all">
|
||||
<i :class="secondaryCta.icon"></i>
|
||||
{{ secondaryCta.label }}
|
||||
<a href="https://github.com/lukaszraczylo/claude-mnemonic" target="_blank" class="inline-flex items-center justify-center gap-2 border border-neutral-700 text-neutral-400 px-6 py-3 rounded-lg font-medium text-sm hover:border-neutral-500 hover:text-white transition-colors">
|
||||
<i class="fab fa-github"></i> View source
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Install Command -->
|
||||
<div class="opacity-0 animate-fade-in-up animation-delay-400 px-2 sm:px-0">
|
||||
<div class="glass rounded-xl px-4 sm:px-6 py-4 sm:py-5 flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-4 max-w-4xl mx-auto glow-amber">
|
||||
<code class="text-amber-400 text-xs sm:text-sm md:text-base flex-1 text-center sm:text-left break-all font-mono">{{ installCommand }}</code>
|
||||
<button @click="copyCommand" class="text-slate-500 hover:text-white transition-colors p-2 flex-shrink-0 rounded-lg hover:bg-slate-800/50">
|
||||
<i :class="copied ? 'fas fa-check text-amber-500' : 'fas fa-copy'"></i>
|
||||
<span class="ml-2 text-sm sm:hidden">{{ copied ? 'Copied!' : 'Copy' }}</span>
|
||||
<div class="max-w-2xl">
|
||||
<div class="flex items-stretch bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<div class="flex items-center px-3 gap-1.5 border-r border-neutral-800">
|
||||
<span class="w-3 h-3 rounded-full bg-neutral-700"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-neutral-700"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-neutral-700"></span>
|
||||
</div>
|
||||
<code class="flex-1 text-neutral-300 text-xs sm:text-sm px-4 py-3 font-mono overflow-x-auto">{{ installCommand }}</code>
|
||||
<button @click="copyCommand" class="px-4 text-neutral-600 hover:text-neutral-300 transition-colors border-l border-neutral-800 text-sm" title="Copy">
|
||||
<i :class="copied ? 'fas fa-check text-emerald-500' : 'fas fa-copy'"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,41 +40,11 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
badge: {
|
||||
type: String,
|
||||
default: 'Persistent Memory for Claude Code'
|
||||
},
|
||||
titleBefore: {
|
||||
type: String,
|
||||
default: 'Claude forgets.'
|
||||
},
|
||||
titleHighlight: {
|
||||
type: String,
|
||||
default: 'Make it remember.'
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: 'Capture learnings, decisions, and patterns from your coding sessions. Bring that knowledge back in every future conversation.'
|
||||
},
|
||||
primaryCta: {
|
||||
type: Object,
|
||||
default: () => ({ label: 'Install Now', href: '#installation', icon: 'fas fa-download' })
|
||||
},
|
||||
secondaryCta: {
|
||||
type: Object,
|
||||
default: () => ({ label: 'View Source', href: 'https://github.com/lukaszraczylo/claude-mnemonic', icon: 'fab fa-github' })
|
||||
},
|
||||
installCommand: {
|
||||
type: String,
|
||||
default: 'curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash'
|
||||
}
|
||||
})
|
||||
|
||||
const installCommand = 'curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash'
|
||||
const copied = ref(false)
|
||||
|
||||
function copyCommand() {
|
||||
navigator.clipboard.writeText('curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash')
|
||||
navigator.clipboard.writeText(installCommand)
|
||||
copied.value = true
|
||||
setTimeout(() => copied.value = false, 2000)
|
||||
}
|
||||
|
||||
@@ -1,70 +1,45 @@
|
||||
<template>
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-b from-slate-950 via-slate-950/95 to-transparent backdrop-blur-md">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 sm:py-5 flex justify-between items-center">
|
||||
<a href="#" class="flex items-center gap-2 sm:gap-3 text-white font-bold text-xl sm:text-2xl">
|
||||
<div class="w-8 h-8 sm:w-9 sm:h-9 bg-gradient-to-br from-amber-500 to-amber-400 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-brain text-slate-950 text-sm sm:text-base"></i>
|
||||
</div>
|
||||
{{ title }}
|
||||
</a>
|
||||
<nav class="border-b border-neutral-800/80 sticky top-0 z-50 bg-[#09090b]/90 backdrop-blur-sm">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 h-14 flex justify-between items-center">
|
||||
<a href="#" class="text-white font-bold text-base tracking-tight">Claude Mnemonic</a>
|
||||
|
||||
<ul class="hidden md:flex gap-6 lg:gap-8">
|
||||
<ul class="hidden md:flex items-center gap-6">
|
||||
<li v-for="link in links" :key="link.href">
|
||||
<a :href="link.href" class="text-slate-400 hover:text-white text-sm font-medium transition-colors animated-underline">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<a :href="link.href" class="text-neutral-500 hover:text-white text-sm transition-colors">{{ link.label }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<a :href="githubUrl" target="_blank" class="text-slate-400 hover:text-white text-lg sm:text-xl transition-colors">
|
||||
<div class="flex items-center gap-4">
|
||||
<a :href="githubUrl" target="_blank" class="text-neutral-500 hover:text-white transition-colors text-lg">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="#installation" class="hidden sm:inline-flex bg-gradient-to-br from-amber-500 to-amber-400 text-slate-950 px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg font-semibold text-sm hover:scale-105 hover:shadow-lg hover:shadow-amber-500/30 transition-all">
|
||||
Get Started
|
||||
<a href="#install" class="hidden sm:inline-flex items-center gap-2 text-sm font-medium text-amber-500 hover:text-amber-400 transition-colors">
|
||||
Install <i class="fas fa-arrow-right text-xs"></i>
|
||||
</a>
|
||||
<button @click="$emit('toggle-menu')" class="md:hidden text-white text-xl p-2">
|
||||
<button @click="$emit('toggle-menu')" class="md:hidden text-neutral-500 hover:text-white p-1">
|
||||
<i :class="mobileMenuOpen ? 'fas fa-times' : 'fas fa-bars'"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<Transition
|
||||
enter-active-class="transition duration-200 ease-out"
|
||||
enter-from-class="opacity-0 -translate-y-2"
|
||||
enter-to-class="opacity-100 translate-y-0"
|
||||
leave-active-class="transition duration-150 ease-in"
|
||||
leave-from-class="opacity-100 translate-y-0"
|
||||
leave-to-class="opacity-0 -translate-y-2"
|
||||
>
|
||||
<div v-if="mobileMenuOpen" class="md:hidden bg-slate-900/95 backdrop-blur-xl border-t border-slate-800 px-4 sm:px-6 py-4">
|
||||
<a v-for="link in links" :key="link.href" :href="link.href"
|
||||
@click="$emit('toggle-menu')"
|
||||
class="block py-3 text-slate-400 hover:text-white border-b border-slate-800 last:border-0 transition-colors">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<a href="#installation" @click="$emit('toggle-menu')"
|
||||
class="mt-4 block text-center bg-gradient-to-br from-amber-500 to-amber-400 text-slate-950 px-5 py-2.5 rounded-lg font-semibold text-sm">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</Transition>
|
||||
<div v-if="mobileMenuOpen" class="md:hidden border-t border-neutral-800/80 px-6 py-4 space-y-1">
|
||||
<a v-for="link in links" :key="link.href" :href="link.href"
|
||||
@click="$emit('toggle-menu')"
|
||||
class="block py-2 text-neutral-500 hover:text-white text-sm transition-colors">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Mnemonic'
|
||||
},
|
||||
links: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ label: 'Features', href: '#features' },
|
||||
{ label: 'How It Works', href: '#how-it-works' },
|
||||
{ label: 'Install', href: '#installation' },
|
||||
{ label: 'Install', href: '#install' },
|
||||
{ label: 'Config', href: '#config' },
|
||||
{ label: 'FAQ', href: '#faq' },
|
||||
]
|
||||
},
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div class="text-center mb-10 sm:mb-16">
|
||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3 sm:mb-4">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<p v-if="subtitle" class="text-sm sm:text-base md:text-lg text-slate-400 max-w-xl mx-auto px-2">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
subtitle: String
|
||||
})
|
||||
</script>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div class="text-center relative">
|
||||
<div class="w-14 h-14 sm:w-20 sm:h-20 bg-slate-900 border-2 border-amber-500 rounded-full flex items-center justify-center mx-auto mb-4 sm:mb-6 text-amber-500 font-bold text-xl sm:text-3xl relative z-10">
|
||||
{{ number }}
|
||||
</div>
|
||||
<h3 class="text-white font-semibold text-base sm:text-lg mb-2 sm:mb-3">{{ title }}</h3>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
number: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="p-4 rounded-lg border border-neutral-800">
|
||||
<div class="text-white font-semibold text-sm mb-1">{{ name }}</div>
|
||||
<p class="text-neutral-500 text-xs leading-relaxed">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
name: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
})
|
||||
</script>
|
||||
+3
-94
@@ -10,105 +10,14 @@
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans text-slate-300;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-sans font-bold tracking-tight;
|
||||
@apply font-sans text-neutral-300 bg-[#09090b];
|
||||
}
|
||||
|
||||
code, pre {
|
||||
@apply font-mono;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Animated gradient background */
|
||||
.bg-animated-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(245, 158, 11, 0.1) 0%,
|
||||
transparent 50%,
|
||||
rgba(245, 158, 11, 0.05) 100%
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
animation: gradientShift 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Floating particles */
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: rgba(245, 158, 11, 0.4);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Glass effect */
|
||||
.glass {
|
||||
@apply bg-slate-900/60 backdrop-blur-xl border border-slate-700/50;
|
||||
}
|
||||
|
||||
/* Glow effect */
|
||||
.glow-amber {
|
||||
box-shadow: 0 0 40px rgba(245, 158, 11, 0.15);
|
||||
}
|
||||
|
||||
/* Animated underline */
|
||||
.animated-underline {
|
||||
position: relative;
|
||||
}
|
||||
.animated-underline::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.animated-underline:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Animated border */
|
||||
.animated-border {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.animated-border::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #f59e0b, transparent);
|
||||
animation: borderSlide 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes borderSlide {
|
||||
0% { left: -100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.animation-delay-100 { animation-delay: 0.1s; }
|
||||
.animation-delay-200 { animation-delay: 0.2s; }
|
||||
.animation-delay-300 { animation-delay: 0.3s; }
|
||||
.animation-delay-400 { animation-delay: 0.4s; }
|
||||
.animation-delay-500 { animation-delay: 0.5s; }
|
||||
|
||||
/* Text gradient */
|
||||
.text-gradient {
|
||||
@apply bg-gradient-to-r from-amber-400 to-amber-500 bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
/* Opacity starting state for animations */
|
||||
.opacity-0-start {
|
||||
opacity: 0;
|
||||
::selection {
|
||||
@apply bg-amber-500/30 text-white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,59 +4,12 @@ export default {
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
amber: {
|
||||
DEFAULT: '#f59e0b',
|
||||
light: '#fbbf24',
|
||||
glow: 'rgba(245, 158, 11, 0.15)',
|
||||
},
|
||||
slate: {
|
||||
950: '#0a0f1a',
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
||||
mono: ['SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
|
||||
},
|
||||
animation: {
|
||||
'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
|
||||
'pulse-slow': 'pulse 3s ease-in-out infinite',
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'float-delayed': 'float 6s ease-in-out 3s infinite',
|
||||
'glow': 'glow 4s ease-in-out infinite',
|
||||
'gradient-shift': 'gradientShift 8s ease-in-out infinite',
|
||||
'particle': 'particle 20s linear infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeInUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(30px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0px)' },
|
||||
'50%': { transform: 'translateY(-20px)' },
|
||||
},
|
||||
glow: {
|
||||
'0%, 100%': { opacity: '0.5' },
|
||||
'50%': { opacity: '0.8' },
|
||||
},
|
||||
gradientShift: {
|
||||
'0%, 100%': { backgroundPosition: '0% 50%' },
|
||||
'50%': { backgroundPosition: '100% 50%' },
|
||||
},
|
||||
particle: {
|
||||
'0%': { transform: 'translateY(100vh) rotate(0deg)', opacity: '0' },
|
||||
'10%': { opacity: '1' },
|
||||
'90%': { opacity: '1' },
|
||||
'100%': { transform: 'translateY(-100vh) rotate(720deg)', opacity: '0' },
|
||||
},
|
||||
},
|
||||
backgroundSize: {
|
||||
'200%': '200% 200%',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
||||
Reference in New Issue
Block a user