The prompt that built this website
Build a personal portfolio website for an AI Automation Specialist with a branded name where part of the name is highlighted in accent color.
### Design System
- **Theme:** Dark-first tech/circuit-board aesthetic with full light/dark mode support and a smooth 3-second transition on background-color, color, border-color, and box-shadow when toggling themes. Monochrome base (near-black backgrounds, gray cards) with a single blue accent color (HSL 210 85% 68%). No gradients, no purple, no generic AI look. Light mode uses a soft off-white background (#eaeaea) with a subtle octagonal grid pattern in dark blue at low opacity. Section containers use semi-opaque off-white backdrops (92% opacity) for readability. Dark mode uses pure black (#060606) with a static square grid in the hero (disabled in light mode). Scroll animations use a 1-second cubic-bezier easing (0.16, 1, 0.3, 1) with 40px vertical translate for a smooth buttery feel.
- **Typography:** Two font families — a bold, wide-tracked heading font (uppercase, letter-spacing 0.12–0.3em) and a clean body font. All section titles are uppercase with wide tracking.
- **Effects:**
- A custom "ScrambleText" component that reveals text with a hex-character scramble animation + blur effect (like a hacker terminal decoding text). This effect should only play once every 24 hours per visitor (stored in localStorage).
- A custom cursor follower (glowing dot that follows the mouse).
- Circuit-board background pattern (subtle grid lines in CSS).
- Cards with hover glow effects and click ripple animations.
- Scroll-triggered fade-in animations on all sections.
- Profile photo with a blue halo/glow effect visible in both light and dark modes.
- Theme toggle plays light switch sound effects (on/off) with graceful error handling for browser autoplay restrictions.
- **Color tokens:** Use CSS custom properties with HSL values for all colors (--background, --foreground, --card, --accent, --muted, etc.) with proper light/dark mode variants.
### Page Structure (Conversion Funnel)
**Single-page layout with sections in this order:**
1. **Fixed Navbar** — Logo, nav links (Projects, Services, About Me, Contact, Savings), Download Resume button, Theme toggle. Mobile hamburger menu.
2. **Hero Section** — Profile photo (left on desktop, top on mobile) with blue glow, name with blinking cursor, subtitle role title, tagline describing what you do, two CTA buttons ("Let's Work Together" → contact, "See What I've Built" → projects). Below: 3 stats (Automations Built, Hours Saved Weekly, Clients Served) in icon circles with a top border separator. Easter egg: small bug icon button (bottom-right) that launches a Space Invaders mini-game overlay.
3. **Projects Section** — Category filter tabs (All + your categories). 3-column card grid. Each card has: workflow screenshot image (with lightbox zoom on click), icon, title, category badge, description, up to 4 tool badges with brand-colored SVG icons, and a "Watch Demo →" button that opens the project modal with the demo video auto-playing. Clicking a card opens a **Project Modal** with: project icon + title + "Watch Demo" button (aligned right of title), case study (Problem/Solution/How It Works), tools used with brand icons, and savings stats (Time Saved, Monthly Equivalent, Cost Savings) in a 3-column grid. Image can be enlarged in a full-screen lightbox. Demo videos are embedded as Loom iframes directly inside the modal — no need to leave the site. Video playback position is persisted in localStorage so users resume where they left off.
4. **Services Section** — Service cards in a 3-column grid. Each card has an icon that inverts colors on hover.
5. **About Me Section** — Bio text about background and experience. Below: "WHY WORK WITH ME" — 4 value proposition cards in a 2-column grid. CTA button "Get in Touch".
6. **Skills & Tools Section** — Core Skills grid (badges in 4 columns) + Tech Stack as an auto-scrolling, draggable horizontal marquee with brand-colored tool icons.
7. **Contact Section** — Contact link buttons (LinkedIn, Upwork, etc.). Below: two-column layout with a Project Requirements Form (left) that sends emails via a backend function, and an embedded Calendly booking widget (right).
8. **Footer** — Section links, Privacy & Terms links, copyright with branded name, scroll-to-top button. Top border with gradient accent line.
### Additional Pages
- **Savings page** (/savings) — "Human Work vs Automation" comparison. Shows task categories with side-by-side human vs automation comparison cards showing hours, costs, and savings. Summary section with totals. Includes disclaimer. CTA navigates to home page contact section.
- **Privacy Policy** and **Terms of Service** pages.
### Tool/Brand Icons
Create custom SVG icon components for all tools you use (e.g., n8n, Zapier, Make.com, Go High Level, ChatGPT, OpenAI API, Google Workspace, Canva, LinkedIn, Slack, Facebook, YouTube, Google Drive, Gmail, Airtable, Smartsheet, Calendly, Google Sheets, OpenRouter AI, JavaScript). Each icon should use the brand's actual colors.
### Projects Data
Include your automation projects, each with: title, category, description, icon, tools used, demo link (e.g., Loom), workflow screenshot, case study (problem/solution/how it works), and estimated savings (time saved, monthly equivalent, cost savings). The AI Email Draft & Meeting Workflow project actively powers this website's contact form and automation request handling (runs on a free n8n instance, so occasional performance delays may occur). Projects without a demo link show a disabled "Demo Coming Soon" button (greyed out with reduced opacity).
### Tech Stack
React + Vite + TypeScript + Tailwind CSS + shadcn/ui. Use react-router-dom for routing, lucide-react for icons, CSS animations for effects.
### Smooth Scrolling
Use Lenis (smooth scroll library) for buttery smooth scroll physics with a 1.2s duration and exponential easing. Remove native scroll-behavior: smooth and let Lenis handle all scroll interpolation. Scroll-triggered section reveals use a 1-second cubic-bezier(0.16, 1, 0.3, 1) easing with 40px vertical translate for elements sliding into view. Add data-lenis-prevent on scrollable modal/popup containers so Lenis doesn't hijack their internal scroll.
### Welcome Intro Overlay
Before the main page loads, display a full-screen black overlay with an interactive two-step conversation:
1. Show "Hi! How are you?" with scramble + per-character blur decode (2 seconds). Two buttons: "Good!" and "Never been better!"
2. After selection, show acknowledgement "That's good to hear!" (scramble + blur, auto-advances after ~2.8s).
3. Then show "So, what are we building?" with two buttons: "See Ed's work" (scrolls to projects) and "Share your ideas" (scrolls to contact).
4. A faint "skip" link at the bottom lets visitors bypass the intro entirely.
The intro uses framer-motion for step transitions (fade + slide) and AnimatePresence for smooth exit. It only triggers once every 72 hours per visitor (localStorage-based cooldown), matching the ScrambleText cooldown.
### ScrambleText Enhancements
- Cooldown changed from 24 hours to 72 hours per visitor.
- Per-character blur: when blur is enabled, each unresolved hex character gets an individual blur filter that clears as the character resolves.
### Floating Action Buttons
Two floating buttons fixed at bottom-right:
1. **Reload with first-time effects** — Clears cooldowns and reloads the page so all first-visit animations replay.
2. **Easter egg bug button** — Launches the Space Invaders mini-game overlay.
### Additional Tech Stack Icons
Added brand-colored SVG icons for GitHub, Render, Lovable, and Supabase to the auto-scrolling tech stack marquee.
### Floating Chat Widget (Ted)
A fixed bottom-right chat widget that acts as a live lead capture assistant. Features:
**Behavior:**
- Ted avatar (robot image) with an animated waving effect that triggers 3 seconds after page load and repeats every 60 seconds while the chat is closed.
- Proactive message bubble appears 10 seconds after page load: "👋 Need help automating something?" — clicking it opens the chat. Has a dismiss (×) button. Shows once per page load.
- Chat opens/closes by clicking the Ted button. Bubble dismisses when chat opens.
**Conversation:**
- 15-turn limit. When reached, input is disabled and a "Book a Call" CTA button appears.
- A "Clear" button in the chat header resets the entire conversation and clears all stored state.
- Typing indicator (3 animated dots) while waiting for a response.
- PROJECT SUMMARY detection: if the assistant reply contains "PROJECT SUMMARY", it renders as a special card with a Copy to Clipboard button instead of a plain message bubble.
**Memory (localStorage):**
- Full conversation history persists across page refreshes and return visits (key: `ted-chat-messages`).
- Turn count persists (key: `ted-turn-count`).
- Booking CTA state persists (key: `ted-show-cta`).
- Visitor name persists (key: `ted-visitor-name`) — passed to backend as `visitor_name` on each request; saved when backend returns it in the response.
- Return visitor greeting: if saved history has more than 1 message, Ted opens with "Welcome back, [Name]! 👋 What can I help you with?" instead of the generic intro. Deduplicates — won't stack multiple welcome-backs.
**Backend integration:**
- Sends POST to a configurable webhook URL with `{ history, turn_count, visitor_name }`.
- Expects JSON response: `{ reply: string, show_booking_cta?: boolean, visitor_name?: string }`.
- Include `"ngrok-skip-browser-warning": "true"` header for ngrok-hosted backends.
- No backend proxy needed — calls the webhook directly from the browser.
- CORS must be enabled on the backend (`Access-Control-Allow-Origin: *`).
- Scroll in the message window is independent of page scroll (`onWheel stopPropagation`).