commit 27cdba1cacab9a6afbdad5009c3f7438e4592cbb Author: khondokartowsif171 Date: Mon Apr 27 18:02:25 2026 +0600 Phase 3: Aura Agentic AI public site — rebrand, services, bilingual, n8n contact form, Dockerfile diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..08e7dfc --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +Thumbs.db +*.log +node_modules/ diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..d5d1ee7 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,14 @@ +FROM nginx:1.27-alpine + +# Remove default config +RUN rm /etc/nginx/conf.d/default.conf + +# Copy our nginx config +COPY nginx.conf /etc/nginx/conf.d/default.conf + +# Copy all site files +COPY . /usr/share/nginx/html/ + +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"] diff --git a/Portfolio.html b/Portfolio.html new file mode 100644 index 0000000..3f142c5 --- /dev/null +++ b/Portfolio.html @@ -0,0 +1,201 @@ + + + + + + Aura — Agentic AI & Full-Stack Engineer + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..d9420ec --- /dev/null +++ b/index.html @@ -0,0 +1,209 @@ + + + + + + Aura Agentic AI — AI Agents, Automation & Full-Stack Dev + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..98a33f5 --- /dev/null +++ b/nginx.conf @@ -0,0 +1,31 @@ +server { + listen 80; + server_name _; + + root /usr/share/nginx/html; + index index.html; + + # Security headers + add_header X-Frame-Options "SAMEORIGIN" always; + add_header X-Content-Type-Options "nosniff" always; + add_header Referrer-Policy "strict-origin-when-cross-origin" always; + + # Gzip + gzip on; + gzip_vary on; + gzip_types text/plain text/css text/javascript application/javascript application/json image/svg+xml; + gzip_min_length 1024; + gzip_comp_level 6; + + # Cache static assets + location ~* \.(css|js|jsx|woff2?|ttf|svg|png|jpg|jpeg|ico|gif|webp)$ { + expires 7d; + add_header Cache-Control "public, immutable"; + try_files $uri =404; + } + + # All routes → index.html (SPA / static) + location / { + try_files $uri $uri/ /index.html; + } +} diff --git a/src/agent-showcase.jsx b/src/agent-showcase.jsx new file mode 100644 index 0000000..9bfbf9b --- /dev/null +++ b/src/agent-showcase.jsx @@ -0,0 +1,235 @@ +// AI agent showcase — animated terminal "console replay" of an agent run + +const AgentShowcase = () => { + const D = PORTFOLIO_DATA; + const run = D.agentRun; + const totalDuration = run[run.length - 1].t + 1500; + + const [playing, setPlaying] = React.useState(true); + const [elapsed, setElapsed] = React.useState(0); + const [resetKey, setResetKey] = React.useState(0); + + React.useEffect(() => { + if (!playing) return; + let raf, start = performance.now() - elapsed; + const tick = (now) => { + const e = now - start; + if (e >= totalDuration) { + setElapsed(totalDuration); + setPlaying(false); + return; + } + setElapsed(e); + raf = requestAnimationFrame(tick); + }; + raf = requestAnimationFrame(tick); + return () => cancelAnimationFrame(raf); + }, [playing, resetKey]); + + const visible = run.filter(r => r.t <= elapsed); + const progress = Math.min(elapsed / totalDuration, 1); + + const restart = () => { + setElapsed(0); + setPlaying(true); + setResetKey(k => k + 1); + }; + + const lineFor = (line, i) => { + const styles = { + system: { prefix: "▸", color: "var(--text-faint)" }, + user: { prefix: "❯", color: "var(--accent)" }, + thought: { prefix: "↪", color: "var(--text-dim)" }, + tool: { prefix: "⌁", color: "var(--accent-2)" }, + output: { prefix: "✓", color: "var(--good)" }, + }; + const s = styles[line.kind]; + return ( +
+ {s.prefix} +
+ {line.kind === "tool" ? ( +
+
+ {line.tool} + + + {line.status} + + {line.meta} +
+
{line.text}
+
+ ) : ( + {line.text} + )} +
+
+ ); + }; + + return ( +
+ {/* faint accent wash */} +
+ +
+ What it actually looks like when an agent does the work.} + sub="Below is a real session replay — model decomposes a task, calls tools, and writes back. This is the surface every agent I ship gets out of the box: trace, evals, audit trail." + /> + +
+ {/* Terminal */} +
+ {/* chrome */} +
+
+ + + +
+ aura ▸ runtime ▸ run_8af3e2.replay + {(elapsed/1000).toFixed(1)}s / {(totalDuration/1000).toFixed(1)}s +
+ + {/* scanline progress */} +
+
+
+ + {/* body */} +
+ {visible.map((l, i) => lineFor(l, i))} + {playing && ( +
+ )} +
+ + {/* controls */} +
+ + + + {visible.length} / {run.length} steps + +
+
+ + {/* Sidebar: capabilities */} +
+ {[ + { i: Icons.Layers, t: "Orchestration", d: "Durable graphs with retries, timeouts, and human-in-the-loop checkpoints." }, + { i: Icons.Cube, t: "Tool registry", d: "Typed tool catalog — Postgres, Stripe, Slack, custom HTTP, on-chain calls." }, + { i: Icons.Bolt, t: "Eval harness", d: "Golden datasets, regression suites, drift detection on every model swap." }, + { i: Icons.Database, t: "Audit trail", d: "Every step, prompt, and token logged. Replayable. Court-admissible." }, + ].map(({ i: I, t, d }) => ( +
+
+
+ {t} +
+

{d}

+
+ ))} +
+
+ + +
+
+ ); +}; + +window.AgentShowcase = AgentShowcase; diff --git a/src/app.jsx b/src/app.jsx new file mode 100644 index 0000000..21925c9 --- /dev/null +++ b/src/app.jsx @@ -0,0 +1,138 @@ +// Root app: theme + ⌘K + Tweaks + scroll reveal + +const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ + "accent": "#7c5cff", + "accent2": "#00d4ff", + "density": "spacious", + "heroHeadlinePrefix": "Agentic AI &", + "heroHeadlineSuffix": "automation engineer" +}/*EDITMODE-END*/; + +function App() { + const [theme, setTheme] = React.useState(() => { + return localStorage.getItem("aura-theme") || "dark"; + }); + const [paletteOpen, setPaletteOpen] = React.useState(false); + const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS); + const [lang, setLang] = React.useState(() => localStorage.getItem("aura-lang") || "en"); + + React.useEffect(() => { localStorage.setItem("aura-lang", lang); }, [lang]); + const toggleLang = () => setLang(l => l === "en" ? "bn" : "en"); + + // theme + React.useEffect(() => { + document.documentElement.dataset.theme = theme; + localStorage.setItem("aura-theme", theme); + }, [theme]); + + const toggleTheme = () => setTheme(t => t === "dark" ? "light" : "dark"); + + React.useEffect(() => { + const onToggle = () => toggleTheme(); + window.addEventListener("aura:toggle-theme", onToggle); + return () => window.removeEventListener("aura:toggle-theme", onToggle); + }, []); + + // ⌘K + React.useEffect(() => { + const onKey = (e) => { + if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { + e.preventDefault(); + setPaletteOpen(o => !o); + } + }; + window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, []); + + // tweaks accent vars — apply to :root + React.useEffect(() => { + document.documentElement.style.setProperty("--accent", tweaks.accent); + document.documentElement.style.setProperty("--accent-2", tweaks.accent2); + document.documentElement.style.setProperty("--accent-glow", tweaks.accent + "59"); // ~35% alpha + }, [tweaks.accent, tweaks.accent2]); + + // density + const density = tweaks.density; + + // scroll reveal + React.useEffect(() => { + const els = document.querySelectorAll(".reveal"); + const io = new IntersectionObserver(entries => { + entries.forEach(en => { if (en.isIntersecting) en.target.classList.add("in"); }); + }, { threshold: 0.1 }); + els.forEach(el => io.observe(el)); + return () => io.disconnect(); + }, []); + + const T = window; + + return ( + <> + setPaletteOpen(true)} theme={theme} onToggleTheme={toggleTheme} lang={lang} onToggleLang={toggleLang} /> +
+ + + + + + + +
+ + + setPaletteOpen(false)} /> + + + + setTheme(v)} + options={["dark", "light"]} + /> + + + setTweak("accent", v)} /> + setTweak("accent2", v)} /> +
+ {[ + ["Violet", "#7c5cff", "#00d4ff"], + ["Cyan", "#00d4ff", "#7c5cff"], + ["Emerald", "#22c55e", "#7c5cff"], + ["Sunset", "#ff6b35", "#fbbf24"], + ["Mono", "#ffffff", "#a4a8b3"], + ].map(([name, a, b]) => ( + + ))} +
+ + + setTweak("density", v)} + options={["compact", "spacious"]} + /> + + + setTweak("heroHeadlinePrefix", v)} /> + setTweak("heroHeadlineSuffix", v)} /> + + + ); +} + +ReactDOM.createRoot(document.getElementById("root")).render(); diff --git a/src/command-palette.jsx b/src/command-palette.jsx new file mode 100644 index 0000000..a00738f --- /dev/null +++ b/src/command-palette.jsx @@ -0,0 +1,178 @@ +// Command palette — ⌘K + +const CommandPalette = ({ open, onClose }) => { + const D = PORTFOLIO_DATA; + const [q, setQ] = React.useState(""); + const [active, setActive] = React.useState(0); + const inputRef = React.useRef(null); + + React.useEffect(() => { + if (open) { + setQ(""); + setActive(0); + setTimeout(() => inputRef.current?.focus(), 50); + } + }, [open]); + + const items = React.useMemo(() => { + const base = [ + { group: "Navigate", label: "Go to Work", icon: Icons.Cube, action: () => location.hash = "#work" }, + { group: "Navigate", label: "Go to Stack", icon: Icons.Code, action: () => location.hash = "#stack" }, + { group: "Navigate", label: "Go to Agent showcase", icon: Icons.Sparkles, action: () => location.hash = "#agents" }, + { group: "Navigate", label: "Go to Timeline", icon: Icons.Bolt, action: () => location.hash = "#timeline" }, + { group: "Navigate", label: "Go to Contact", icon: Icons.Mail, action: () => location.hash = "#contact" }, + ...D.projects.map(p => ({ + group: "Projects", + label: p.name, + sub: p.kind, + icon: Icons.Cube, + action: () => location.hash = "#work", + })), + { group: "Action", label: "Email me directly", icon: Icons.Mail, action: () => window.location.href = `mailto:${D.brand.email}` }, + { group: "Action", label: "Open GitHub", icon: Icons.Github, action: () => window.open(D.brand.socials.github) }, + { group: "Action", label: "Open LinkedIn", icon: Icons.LinkedIn, action: () => window.open(D.brand.socials.linkedin) }, + { group: "Action", label: "Toggle theme", icon: Icons.Sun, action: () => window.dispatchEvent(new CustomEvent("aura:toggle-theme")) }, + ]; + if (!q) return base; + const Q = q.toLowerCase(); + return base.filter(i => i.label.toLowerCase().includes(Q) || (i.sub && i.sub.toLowerCase().includes(Q))); + }, [q]); + + React.useEffect(() => { setActive(0); }, [q]); + + const onKey = (e) => { + if (e.key === "ArrowDown") { e.preventDefault(); setActive(a => Math.min(a + 1, items.length - 1)); } + else if (e.key === "ArrowUp") { e.preventDefault(); setActive(a => Math.max(a - 1, 0)); } + else if (e.key === "Enter") { e.preventDefault(); if (items[active]) { items[active].action(); onClose(); } } + else if (e.key === "Escape") { onClose(); } + }; + + if (!open) return null; + + // group items + const groups = items.reduce((acc, it, idx) => { + (acc[it.group] = acc[it.group] || []).push({ ...it, idx }); + return acc; + }, {}); + + return ( +
+
e.stopPropagation()} style={{ + width: "min(640px, 92vw)", + background: "var(--bg-card)", + border: "1px solid var(--line-strong)", + borderRadius: 14, + boxShadow: "var(--shadow-lg)", + overflow: "hidden", + }}> +
+ + setQ(e.target.value)} + onKeyDown={onKey} + placeholder="Search projects, sections, actions…" + style={{ + flex: 1, + background: "transparent", + border: "none", + outline: "none", + color: "var(--text)", + fontSize: 15, + fontFamily: "inherit", + }} + /> + esc +
+ +
+ {items.length === 0 && ( +
+ No matches for "{q}" +
+ )} + {Object.entries(groups).map(([group, gitems]) => ( +
+
{group}
+ {gitems.map(it => { + const I = it.icon; + const on = it.idx === active; + return ( + + ); + })} +
+ ))} +
+ +
+ ↑↓ navigate + ↵ select + esc dismiss +
+
+
+ ); +}; + +window.CommandPalette = CommandPalette; diff --git a/src/data.jsx b/src/data.jsx new file mode 100644 index 0000000..fa9a97d --- /dev/null +++ b/src/data.jsx @@ -0,0 +1,195 @@ +// Content for the portfolio +const PORTFOLIO_DATA = { + brand: { + name: "Aura Agentic AI", + handle: "@aura", + title: "Agentic AI & Full-Stack Development", + titleBn: "এজেন্টিক এআই ও ফুল-স্ট্যাক ডেভেলপমেন্ট", + tagline: "We build AI agents, automation & enterprise systems that work 24/7.", + taglineBn: "আমরা AI এজেন্ট, অটোমেশন ও এন্টারপ্রাইজ সিস্টেম তৈরি করি যা ২৪/৭ কাজ করে।", + location: "Dhaka, Bangladesh · Remote", + yearsExp: 7, + email: "hello@auraajenticai.cloud", + domain: "auraajenticai.cloud", + socials: { + github: "https://github.com", + linkedin: "https://linkedin.com", + twitter: "https://twitter.com", + }, + }, + + metrics: [ + { label: "Years shipping", value: "7+" }, + { label: "Agents in production", value: "40+" }, + { label: "Enterprise clients", value: "12" }, + { label: "Uptime maintained", value: "99.98%" }, + ], + + about: { + pitch: "I build the systems that act on behalf of teams — agents that triage, route, decide, and execute. The work spans the full stack: model orchestration, eval harnesses, queue infrastructure, dashboards, on-chain settlement, and the tedious connective tissue that turns a clever demo into something a CFO will sign off on.", + bullets: [ + "Designed agent runtimes for fintech & MLM platforms moving 8-figure GMV", + "Built orchestration layers across OpenAI, Anthropic, vLLM, and self-hosted models", + "Shipped Web3 settlement rails — wallets, signers, on-chain audit trails", + "Lead architect on three SaaS dashboards now serving 50k+ daily users", + ], + }, + + stack: { + Frontend: [ + { name: "React", level: 98 }, + { name: "Next.js", level: 96 }, + { name: "TypeScript", level: 95 }, + { name: "Tailwind", level: 94 }, + { name: "Framer Motion", level: 88 }, + ], + Backend: [ + { name: "Node.js", level: 96 }, + { name: "Python · FastAPI", level: 92 }, + { name: "PostgreSQL", level: 94 }, + { name: "Supabase", level: 90 }, + { name: "Redis · BullMQ", level: 88 }, + ], + "AI / Agents": [ + { name: "LangGraph", level: 95 }, + { name: "OpenAI · Anthropic", level: 96 }, + { name: "Vector DBs", level: 90 }, + { name: "Eval harnesses", level: 86 }, + { name: "Tool routing", level: 92 }, + ], + "Web3": [ + { name: "Solidity", level: 84 }, + { name: "ethers · viem", level: 90 }, + { name: "Wallet integrations", level: 92 }, + { name: "On-chain indexing", level: 80 }, + ], + DevOps: [ + { name: "Docker", level: 92 }, + { name: "AWS · GCP", level: 88 }, + { name: "Vercel · Fly.io", level: 94 }, + { name: "GitHub Actions", level: 90 }, + { name: "Observability", level: 86 }, + ], + }, + + services: [ + { + id: "web-app-dev", + name: "Website & Webapp Development", + nameBn: "ওয়েবসাইট ও ওয়েবঅ্যাপ ডেভেলপমেন্ট", + kind: "Core Service", + description: + "From landing pages to full SaaS dashboards — pixel-perfect, fast, and built to scale. SvelteKit, Next.js, React, Tailwind.", + stack: ["SvelteKit", "Next.js", "React", "Tailwind", "PostgreSQL"], + impact: { primary: "50k+", secondary: "daily users served" }, + color: "violet", + }, + { + id: "ai-agent-automation", + name: "AI Agent & Automation", + nameBn: "এআই এজেন্ট ও অটোমেশন", + kind: "Core Service", + description: + "Custom AI agents that triage, decide, and execute — integrated with your tools via n8n, Anthropic, and OpenAI.", + stack: ["Anthropic Claude", "n8n", "LangGraph", "Node.js", "Hono"], + impact: { primary: "1.2M+", secondary: "agent runs / month" }, + color: "cyan", + }, + { + id: "web3-blockchain", + name: "Web3 & Blockchain", + nameBn: "ওয়েব৩ ও ব্লকচেইন", + kind: "Specialist Service", + description: + "Wallets, smart contracts, multi-chain bridges, and on-chain audit trails. Gasless UX that hides complexity from end users.", + stack: ["Solidity", "viem", "wagmi", "Cloudflare Workers"], + impact: { primary: "12 chains", secondary: "EVM + Solana" }, + color: "green", + }, + { + id: "mt5-ea-trading", + name: "MT5 EA & Trading Automation", + nameBn: "MT5 EA ও ট্রেডিং অটোমেশন", + kind: "Specialist Service", + description: + "Expert Advisors, real-time P&L dashboards, risk envelopes, and one-click kill switches for MetaTrader 5 platforms.", + stack: ["MQL5", "Go", "ClickHouse", "WebSockets", "React"], + impact: { primary: "<80ms", secondary: "tick-to-render latency" }, + color: "amber", + }, + { + id: "scraping-data-pipeline", + name: "Browser Scraping & Data Pipeline", + nameBn: "ব্রাউজার স্ক্র্যাপিং ও ডেটা পাইপলাইন", + kind: "Specialist Service", + description: + "Playwright/Puppeteer scrapers, proxy rotation, structured data extraction, and ETL pipelines into your DB or warehouse.", + stack: ["Playwright", "Puppeteer", "Python", "Airflow", "PostgreSQL"], + impact: { primary: "10M+", secondary: "records extracted / month" }, + color: "violet", + }, + { + id: "infra-devops", + name: "Infrastructure & DevOps", + nameBn: "ইনফ্রাস্ট্রাকচার ও ডেভঅপস", + kind: "Specialist Service", + description: + "VPS setup, Docker, Coolify, Traefik, CI/CD pipelines, SSL, monitoring, and zero-downtime deploys on your own cloud.", + stack: ["Docker", "Coolify", "Traefik", "GitHub Actions", "PostgreSQL"], + impact: { primary: "99.98%", secondary: "uptime maintained" }, + color: "cyan", + }, + ], + + agentRun: [ + { t: 0, kind: "system", text: "agent.session :: id=run_8af3e2 model=claude-sonnet-4.5" }, + { t: 350, kind: "user", text: 'task: "Reconcile yesterday\'s payouts. Flag anything > $5k or > 3σ from the cohort baseline."' }, + { t: 1200, kind: "thought", text: "Decompose → fetch payouts, compute cohort baseline (μ, σ), filter, draft reconciliation note." }, + { t: 1900, kind: "tool", tool: "postgres.query", text: "SELECT id, member_id, amount, created_at FROM payouts WHERE day = $1", status: "ok", meta: "1,284 rows · 42ms" }, + { t: 2700, kind: "tool", tool: "math.stats", text: "compute(μ=412.30, σ=187.40, n=1284)", status: "ok", meta: "8ms" }, + { t: 3400, kind: "tool", tool: "slack.notify", text: '#finance-ops · "12 outliers flagged for review"', status: "ok", meta: "delivered" }, + { t: 4100, kind: "thought", text: "All checks passed. Drafting reconciliation summary for the CFO digest." }, + { t: 4900, kind: "output", text: "Reconciliation complete. 12 outliers flagged · 1 above-threshold (member_4419 · $7,420). Audit trail written." }, + { t: 5400, kind: "system", text: "session.end :: tokens=8,412 · cost=$0.083 · duration=5.4s" }, + ], + + experience: [ + { + year: "2024 — Present", + role: "Founder & Principal Engineer", + company: "Aura Agentic Cloud", + kind: "Product", + detail: "Building the agent runtime layer — orchestration, evals, observability — used by 12 enterprise teams.", + }, + { + year: "2022 — 2024", + role: "Staff Full-Stack Engineer", + company: "Confidential · Fintech", + kind: "Contract", + detail: "Led the rebuild of an MLM compensation engine, ran the migration from monolith to multi-tenant.", + }, + { + year: "2021 — 2022", + role: "Senior Engineer · Web3", + company: "Stealth DeFi protocol", + kind: "Contract", + detail: "Wallet UX, signer abstraction, on-chain settlement rails. Shipped before the protocol announced.", + }, + { + year: "2019 — 2021", + role: "Full-Stack Engineer", + company: "Series-B SaaS", + kind: "Full-time", + detail: "Owned the dashboard surface area — billing, RBAC, integrations. Pushed app from 4k to 28k DAU.", + }, + { + year: "2018 — 2019", + role: "Software Engineer", + company: "Agency · Remote", + kind: "Full-time", + detail: "Cut my teeth shipping React + Node products across e-commerce, logistics, and edtech.", + }, + ], +}; + +window.PORTFOLIO_DATA = PORTFOLIO_DATA; diff --git a/src/hero.jsx b/src/hero.jsx new file mode 100644 index 0000000..410ff9c --- /dev/null +++ b/src/hero.jsx @@ -0,0 +1,304 @@ +// Hero — flowing terminal/code background + bold headline +const TerminalRain = () => { + // A column of streaming code lines that drift upward forever. + // Two columns offset so the loop is seamless. + const lines = React.useMemo(() => { + const samples = [ + "import { Agent } from '@aura/runtime'", + "export const triage = new Agent({", + " model: 'claude-sonnet-4.5',", + " tools: [postgres, slack, stripe],", + " policy: 'tier-1-support',", + "})", + "", + "// orchestrator.ts", + "const run = await graph.invoke({", + " task: 'reconcile payouts',", + " context: { day: '2026-04-26' },", + "})", + "", + "→ tool.call postgres.query ok 42ms", + "→ tool.call math.stats ok 8ms", + "→ tool.call slack.notify ok 120ms", + "✓ run completed tokens=8412 $0.083", + "", + "contract Settlement {", + " function release(address to, uint256 amt)", + " external onlyOwner returns (bool) {", + " require(escrow[to] >= amt, 'insufficient');", + " escrow[to] -= amt;", + " payable(to).transfer(amt);", + " emit Released(to, amt, block.timestamp);", + " return true;", + " }", + "}", + "", + "[runtime] cold-start agent pool …", + "[runtime] 24 agents warmed in 312ms", + "[runtime] queue depth=0 p50=84ms p99=410ms", + "", + "POST /v1/runs 201 Created", + "GET /v1/runs/run_8af3e2 200 OK", + "POST /v1/tools/register 201 Created", + ]; + return [...samples, ...samples]; + }, []); + + const colorFor = (line) => { + if (line.startsWith("//")) return "var(--text-faint)"; + if (line.startsWith("→")) return "var(--accent-2)"; + if (line.startsWith("✓")) return "var(--good)"; + if (line.startsWith("[runtime]")) return "var(--text-faint)"; + if (line.match(/^(POST|GET|PUT|DELETE)/)) return "var(--accent)"; + if (line.match(/^(import|export|const|function|return|contract|require|emit)/)) return "var(--accent)"; + return "var(--text-dim)"; + }; + + return ( +