<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alex Rider | Full-Stack & Cloud Systems Developer</title>
<!-- Google Fonts: Inter & JetBrains Mono -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
colors: {
brand: {
50: '#eef2ff',
100: '#e0e7ff',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
900: '#312e81',
},
},
},
},
};
</script>
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 font-sans antialiased transition-colors duration-300 selection:bg-brand-500 selection:text-white">
<!-- Toast Notification Banner (Replaces alert()) -->
<div id="toast" class="fixed bottom-5 right-5 z-50 hidden transform transition-all duration-300 translate-y-4 opacity-0">
<div class="flex items-center gap-3 px-4 py-3 rounded-2xl bg-slate-900 dark:bg-slate-800 text-white shadow-xl border border-slate-700/60">
<span id="toast-icon" class="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/20 text-emerald-400">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</span>
<p id="toast-message" class="text-sm font-medium">Action completed!</p>
</div>
</div>
<!-- Navigation Header -->
<header class="sticky top-0 z-40 w-full backdrop-blur-md bg-white/80 dark:bg-slate-950/80 border-b border-slate-200/70 dark:border-slate-800/80">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<!-- Brand / Logo -->
<a href="#" class="flex items-center gap-2.5 group">
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500 to-indigo-700 flex items-center justify-center text-white font-mono font-bold text-base shadow-md shadow-brand-500/20 group-hover:scale-105 transition-transform">
AR
</div>
<div class="flex flex-col">
<span class="font-bold text-base tracking-tight leading-none">Alex Rider</span>
<span class="text-[11px] font-mono text-slate-500 dark:text-slate-400 mt-0.5">coffeencode.in</span>
</div>
</a>
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600 dark:text-slate-300">
<a href="#about" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">About</a>
<a href="#projects" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">Projects</a>
<a href="#skills" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">Tech Stack</a>
<a href="#education" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">Background</a>
<a href="#contact" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">Contact</a>
</nav>
<!-- Actions: Theme Toggle & Mobile Menu Button -->
<div class="flex items-center gap-2">
<button id="theme-toggle" type="button" aria-label="Toggle Dark Mode" class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-900 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800 border border-slate-200/80 dark:border-slate-800 transition-colors">
<!-- Sun Icon -->
<svg id="icon-sun" class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Moon Icon -->
<svg id="icon-moon" class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
<button id="mobile-menu-btn" type="button" aria-label="Open Navigation Menu" class="md:hidden p-2.5 rounded-xl bg-slate-100 dark:bg-slate-900 text-slate-700 dark:text-slate-300 border border-slate-200/80 dark:border-slate-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
<!-- Mobile Navigation Drawer -->
<div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 px-4 pt-3 pb-5 space-y-2">
<a href="#about" class="mobile-link block px-3 py-2.5 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-900">About</a>
<a href="#projects" class="mobile-link block px-3 py-2.5 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-900">Projects</a>
<a href="#skills" class="mobile-link block px-3 py-2.5 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-900">Tech Stack</a>
<a href="#education" class="mobile-link block px-3 py-2.5 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-900">Background</a>
<a href="#contact" class="mobile-link block px-3 py-2.5 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-900">Contact</a>
</div>
</header>
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Hero Section -->
<section id="about" class="py-16 sm:py-24 lg:py-28">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<div class="lg:col-span-7 space-y-6">
<div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-brand-50 dark:bg-brand-900/30 border border-brand-200/70 dark:border-brand-700/50 text-brand-700 dark:text-brand-300 text-xs font-medium">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</span>
Full-Stack Developer & Distributed Systems Builder
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.12]">
Hi, I’m <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 to-indigo-400">Alex Rider</span>.
<span class="block text-2xl sm:text-3xl lg:text-4xl font-bold text-slate-600 dark:text-slate-300 mt-2">
Building event-driven web apps & cloud-native platforms.
</span>
</h1>
<p class="text-base sm:text-lg text-slate-600 dark:text-slate-400 max-w-2xl leading-relaxed">
Computer Science engineer based in India, passionate about modern web engineering, real-time data streaming with Apache Kafka, Backend-as-a-Service architectures, and practical AI-assisted workflows. Creator of <span class="font-semibold text-slate-800 dark:text-slate-200">Medi-care</span> and <span class="font-mono text-sm text-brand-600 dark:text-brand-400">coffeencode.in</span>.
</p>
<div class="flex flex-wrap items-center gap-3 pt-2">
<a href="#projects" class="px-6 py-3.5 rounded-xl bg-brand-600 hover:bg-brand-700 text-white font-semibold text-sm shadow-lg shadow-brand-600/25 transition-all">
Explore Featured Work
</a>
<button id="copy-email-hero" type="button" class="px-5 py-3.5 rounded-xl bg-white dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-800 dark:text-slate-200 font-medium text-sm border border-slate-200 dark:border-slate-800 flex items-center gap-2 transition-all">
<svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<span>1008alexrider@gmail.com</span>
</button>
</div>
</div>
<!-- Terminal / Profile Card -->
<div class="lg:col-span-5">
<div class="rounded-2xl bg-slate-900 dark:bg-slate-900/90 border border-slate-800 shadow-2xl overflow-hidden">
<div class="flex items-center justify-between px-4 py-3 bg-slate-800/70 border-b border-slate-800">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-rose-500"></span>
<span class="w-3 h-3 rounded-full bg-amber-400"></span>
<span class="w-3 h-3 rounded-full bg-emerald-500"></span>
</div>
<span class="text-xs font-mono text-slate-400">alex@coffeencode:~/profile</span>
</div>
<div class="p-5 sm:p-6 font-mono text-xs sm:text-sm text-slate-300 space-y-3 leading-relaxed">
<div>
<span class="text-emerald-400">$</span> <span class="text-slate-100">whoami</span>
<p class="text-slate-400 mt-1">Alex Rider — Full-Stack & Cloud Engineer</p>
</div>
<div>
<span class="text-emerald-400">$</span> <span class="text-slate-100">cat stack.json</span>
<pre class="text-indigo-300 mt-1 overflow-x-auto">{
"domain": "coffeencode.in",
"flagship": "Medi-care Platform",
"streaming": ["Apache Kafka", "Redpanda"],
"baas": ["Supabase", "Appwrite", "Upstash"],
"focus": ["Computer Vision", "Agentic AI"]
}</pre>
</div>
<div>
<span class="text-emerald-400">$</span> <span class="text-slate-100">echo $LOCATION</span>
<p class="text-slate-400 mt-1">India (IST / UTC+5:30)</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-16 border-t border-slate-200/70 dark:border-slate-800/80">
<div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-10">
<div>
<span class="text-xs font-mono uppercase tracking-wider text-brand-600 dark:text-brand-400 font-semibold">Portfolio</span>
<h2 class="text-2xl sm:text-3xl font-bold tracking-tight mt-1">Featured Engineering Projects</h2>
<p class="text-sm sm:text-base text-slate-600 dark:text-slate-400 mt-2 max-w-2xl">
Production-oriented systems spanning healthcare scheduling, distributed message queues, and developer infrastructure.
</p>
</div>
<!-- Category Filter Buttons -->
<div id="project-filters" class="flex flex-wrap gap-2">
<button data-filter="all" class="filter-btn active px-3.5 py-2 rounded-xl text-xs font-semibold bg-brand-600 text-white transition-colors">All</button>
<button data-filter="fullstack" class="filter-btn px-3.5 py-2 rounded-xl text-xs font-semibold bg-slate-200/70 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-300/70 dark:hover:bg-slate-700 transition-colors">Full-Stack</button>
<button data-filter="distributed" class="filter-btn px-3.5 py-2 rounded-xl text-xs font-semibold bg-slate-200/70 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-300/70 dark:hover:bg-slate-700 transition-colors">Distributed & Cloud</button>
<button data-filter="cv" class="filter-btn px-3.5 py-2 rounded-xl text-xs font-semibold bg-slate-200/70 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-300/70 dark:hover:bg-slate-700 transition-colors">AI & Vision</button>
</div>
</div>
<!-- Projects Grid -->
<div id="projects-grid" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Project 1: Medi-care -->
<article data-category="fullstack distributed" class="project-card group rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-6 sm:p-7 shadow-sm hover:shadow-xl hover:border-brand-500/40 transition-all flex flex-col justify-between">
<div>
<div class="flex items-center justify-between gap-3 mb-4">
<div class="w-11 h-11 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-3-3v6m-7 4h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<span class="px-3 py-1 rounded-full text-xs font-mono bg-emerald-50 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-300 border border-emerald-200/70 dark:border-emerald-800/60">
Active System
</span>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
Medi-care Appointment & Notification Engine
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 mt-2.5 leading-relaxed">
An end-to-end hospital appointment booking, rescheduling, and cancellation platform. Automatically dispatches real-time transactional email confirmations and calendar schedule updates to both patients and doctors.
</p>
</div>
<div class="mt-6 pt-5 border-t border-slate-100 dark:border-slate-800/80">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Supabase</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">PostgreSQL</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Event Notifications</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">REST APIs</span>
</div>
<button type="button" onclick="openProjectModal('medicare')" class="text-sm font-semibold text-brand-600 dark:text-brand-400 hover:underline inline-flex items-center gap-1.5">
<span>Inspect Architecture</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
</article>
<!-- Project 2: Medi-care Kafka Event Pipeline -->
<article data-category="distributed" class="project-card group rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-6 sm:p-7 shadow-sm hover:shadow-xl hover:border-brand-500/40 transition-all flex flex-col justify-between">
<div>
<div class="flex items-center justify-between gap-3 mb-4">
<div class="w-11 h-11 rounded-xl bg-brand-500/10 text-brand-600 dark:text-brand-400 flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<span class="px-3 py-1 rounded-full text-xs font-mono bg-brand-50 dark:bg-brand-950/60 text-brand-700 dark:text-brand-300 border border-brand-200/70 dark:border-brand-800/60">
Data Streaming
</span>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
Medi-care Kafka & Redpanda Event Pipeline
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 mt-2.5 leading-relaxed">
Asynchronous event streaming backbone (<span class="font-mono text-xs">medi-care-kafka</span>) built on managed Apache Kafka (Aiven) and Redpanda Serverless to decouple appointment state mutations, slot availability updates, and audit logs.
</p>
</div>
<div class="mt-6 pt-5 border-t border-slate-100 dark:border-slate-800/80">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Apache Kafka</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Aiven Cloud</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Redpanda</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Upstash Redis</span>
</div>
<button type="button" onclick="openProjectModal('kafka')" class="text-sm font-semibold text-brand-600 dark:text-brand-400 hover:underline inline-flex items-center gap-1.5">
<span>Inspect Architecture</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
</article>
<!-- Project 3: CoffeeNCode.in -->
<article data-category="fullstack distributed" class="project-card group rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-6 sm:p-7 shadow-sm hover:shadow-xl hover:border-brand-500/40 transition-all flex flex-col justify-between">
<div>
<div class="flex items-center justify-between gap-3 mb-4">
<div class="w-11 h-11 rounded-xl bg-amber-500/10 text-amber-600 dark:text-amber-400 flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<span class="px-3 py-1 rounded-full text-xs font-mono bg-amber-50 dark:bg-amber-950/60 text-amber-700 dark:text-amber-300 border border-amber-200/70 dark:border-amber-800/60">
Web & Infrastructure
</span>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
CoffeeNCode.in Developer Hub & Cloud Sandbox
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 mt-2.5 leading-relaxed">
Personal engineering hub and full-stack experimentation lab hosted on <span class="font-mono text-xs">coffeencode.in</span>. Configured with custom DNS routing (CNAME/SRV), Appwrite BaaS environments, and cloud deployment pipelines on Render & Voroa.
</p>
</div>
<div class="mt-6 pt-5 border-t border-slate-100 dark:border-slate-800/80">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Appwrite</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Render</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">DNS / SMTP</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">JavaScript</span>
</div>
<button type="button" onclick="openProjectModal('coffeencode')" class="text-sm font-semibold text-brand-600 dark:text-brand-400 hover:underline inline-flex items-center gap-1.5">
<span>Inspect Architecture</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
</article>
<!-- Project 4: Computer Vision & Image Processing -->
<article data-category="cv" class="project-card group rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-6 sm:p-7 shadow-sm hover:shadow-xl hover:border-brand-500/40 transition-all flex flex-col justify-between">
<div>
<div class="flex items-center justify-between gap-3 mb-4">
<div class="w-11 h-11 rounded-xl bg-purple-500/10 text-purple-600 dark:text-purple-400 flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</div>
<span class="px-3 py-1 rounded-full text-xs font-mono bg-purple-50 dark:bg-purple-950/60 text-purple-700 dark:text-purple-300 border border-purple-200/70 dark:border-purple-800/60">
CS-803A Research
</span>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
Image Processing & Computer Vision Toolkit
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 mt-2.5 leading-relaxed">
Algorithmic implementations exploring spatial filtering, edge detection, morphological transformations, and feature extraction developed alongside advanced Computer Science coursework (CS-803A).
</p>
</div>
<div class="mt-6 pt-5 border-t border-slate-100 dark:border-slate-800/80">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Computer Vision</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Python</span>
<span class="px-2.5 py-1 rounded-lg text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Digital Image Processing</span>
</div>
<button type="button" onclick="openProjectModal('vision')" class="text-sm font-semibold text-brand-600 dark:text-brand-400 hover:underline inline-flex items-center gap-1.5">
<span>Inspect Architecture</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
</article>
</div>
</section>
<!-- Tech Stack Section -->
<section id="skills" class="py-16 border-t border-slate-200/70 dark:border-slate-800/80">
<div class="mb-10">
<span class="text-xs font-mono uppercase tracking-wider text-brand-600 dark:text-brand-400 font-semibold">Capabilities</span>
<h2 class="text-2xl sm:text-3xl font-bold tracking-tight mt-1">Technical Stack & Infrastructure</h2>
<p class="text-sm sm:text-base text-slate-600 dark:text-slate-400 mt-2 max-w-2xl">
Tools, databases, cloud platforms, and protocols I use to ship reliable software.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
<!-- Category 1 -->
<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-5">
<h3 class="text-sm font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-4">Frontend & Web</h3>
<ul class="space-y-2.5 text-sm font-medium">
<li class="flex items-center justify-between"><span>HTML5 / Semantic UI</span><span class="text-xs font-mono text-brand-600 dark:text-brand-400">Core</span></li>
<li class="flex items-center justify-between"><span>Tailwind CSS / Modern CSS</span><span class="text-xs font-mono text-brand-600 dark:text-brand-400">Core</span></li>
<li class="flex items-center justify-between"><span>JavaScript (ES6+) / TypeScript</span><span class="text-xs font-mono text-brand-600 dark:text-brand-400">Core</span></li>
<li class="flex items-center justify-between"><span>React & Next.js</span><span class="text-xs font-mono text-slate-400">UI</span></li>
</ul>
</div>
<!-- Category 2 -->
<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-5">
<h3 class="text-sm font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-4">Backend & BaaS</h3>
<ul class="space-y-2.5 text-sm font-medium">
<li class="flex items-center justify-between"><span>Supabase (Postgres & Auth)</span><span class="text-xs font-mono text-emerald-600 dark:text-emerald-400">Prod</span></li>
<li class="flex items-center justify-between"><span>Appwrite Cloud</span><span class="text-xs font-mono text-emerald-600 dark:text-emerald-400">Prod</span></li>
<li class="flex items-center justify-between"><span>Node.js & Python</span><span class="text-xs font-mono text-slate-400">API</span></li>
<li class="flex items-center justify-between"><span>Transactional SMTP / Email</span><span class="text-xs font-mono text-slate-400">Automation</span></li>
</ul>
</div>
<!-- Category 3 -->
<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-5">
<h3 class="text-sm font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-4">Data & Streaming</h3>
<ul class="space-y-2.5 text-sm font-medium">
<li class="flex items-center justify-between"><span>Apache Kafka (Aiven)</span><span class="text-xs font-mono text-brand-600 dark:text-brand-400">Events</span></li>
<li class="flex items-center justify-between"><span>Redpanda Serverless</span><span class="text-xs font-mono text-brand-600 dark:text-brand-400">Streams</span></li>
<li class="flex items-center justify-between"><span>Upstash Redis & Vector</span><span class="text-xs font-mono text-slate-400">Cache</span></li>
<li class="flex items-center justify-between"><span>PostgreSQL & MySQL</span><span class="text-xs font-mono text-slate-400">SQL</span></li>
</ul>
</div>
<!-- Category 4 -->
<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-5">
<h3 class="text-sm font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-4">Cloud, DevOps & AI</h3>
<ul class="space-y-2.5 text-sm font-medium">
<li class="flex items-center justify-between"><span>Git & GitHub Workflows</span><span class="text-xs font-mono text-slate-400">VCS</span></li>
<li class="flex items-center justify-between"><span>Render & Voroa Deploys</span><span class="text-xs font-mono text-slate-400">PaaS</span></li>
<li class="flex items-center justify-between"><span>DNS Management (GoDaddy)</span><span class="text-xs font-mono text-slate-400">Infra</span></li>
<li class="flex items-center justify-between"><span>Agentic AI & MCP Tools</span><span class="text-xs font-mono text-purple-600 dark:text-purple-400">AI</span></li>
</ul>
</div>
</div>
</section>
<!-- Education & Engineering Focus Section -->
<section id="education" class="py-16 border-t border-slate-200/70 dark:border-slate-800/80">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Academic Background -->
<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-6 sm:p-8">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-brand-500/10 text-brand-600 dark:text-brand-400 flex items-center justify-center">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
</svg>
</div>
<div>
<h2 class="text-xl font-bold">Academic Foundation</h2>
<p class="text-xs text-slate-500 dark:text-slate-400">Computer Science & Engineering</p>
</div>
</div>
<div class="space-y-6 border-l-2 border-slate-200 dark:border-slate-800 pl-5 ml-2">
<div class="relative">
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-brand-600 ring-4 ring-white dark:ring-slate-900"></span>
<span class="text-xs font-mono text-brand-600 dark:text-brand-400">Computer Science Curriculum</span>
<h3 class="text-base font-bold mt-0.5">B.Tech / B.E. in Computer Science & Engineering</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 mt-1.5 leading-relaxed">
Focused on core computer science pillars including Image Processing & Computer Vision (CS-803A), Distributed Systems, Database Management Systems, and Software Engineering.
</p>
</div>
<div class="relative">
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-slate-400 dark:bg-slate-600 ring-4 ring-white dark:ring-slate-900"></span>
<span class="text-xs font-mono text-slate-500 dark:text-slate-400">Continuous Learning</span>
<h3 class="text-base font-bold mt-0.5">Cloud Architecture & AI Engineering</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 mt-1.5 leading-relaxed">
Hands-on exploration of agentic AI workflows, Model Context Protocol (MCP) integrations, serverless streamhouses, and modern cloud deployment platforms.
</p>
</div>
</div>
</div>
<!-- Engineering Principles -->
<div class="rounded-2xl bg-gradient-to-br from-slate-900 to-indigo-950 text-white border border-slate-800 p-6 sm:p-8 flex flex-col justify-between">
<div>
<span class="px-3 py-1 rounded-full text-xs font-mono bg-white/10 text-indigo-200">Engineering Mindset</span>
<h2 class="text-2xl font-bold mt-4">How I Approach Building Software</h2>
<p class="text-sm text-slate-300 mt-3 leading-relaxed">
Rather than just studying theory, I focus on building end-to-end systems—connecting real databases, configuring DNS and email deliverability, streaming events through Kafka, and crafting responsive user interfaces.
</p>
</div>
<div class="grid grid-cols-2 gap-4 mt-8 pt-6 border-t border-white/10">
<div>
<p class="text-2xl font-extrabold text-indigo-300">Event-First</p>
<p class="text-xs text-slate-400 mt-1">Decoupled architectures with Kafka & webhooks</p>
</div>
<div>
<p class="text-2xl font-extrabold text-emerald-300">Full-Cycle</p>
<p class="text-xs text-slate-400 mt-1">From database schema to custom domain DNS</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 border-t border-slate-200/70 dark:border-slate-800/80">
<div class="rounded-3xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 p-6 sm:p-10 lg:p-12 shadow-sm">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
<div class="lg:col-span-5 space-y-5">
<span class="text-xs font-mono uppercase tracking-wider text-brand-600 dark:text-brand-400 font-semibold">Get In Touch</span>
<h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Let’s build something impactful together.</h2>
<p class="text-sm sm:text-base text-slate-600 dark:text-slate-400 leading-relaxed">
Whether you want to collaborate on a full-stack web application, discuss distributed event streaming, or talk about software engineering opportunities, feel free to reach out.
</p>
<div class="space-y-3 pt-2">
<div class="flex items-center gap-3 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200/70 dark:border-slate-800">
<div class="w-9 h-9 rounded-lg bg-brand-500/10 text-brand-600 dark:text-brand-400 flex items-center justify-center shrink-0">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-xs text-slate-500 dark:text-slate-400">Direct Email</p>
<p class="text-sm font-mono font-medium truncate">1008alexrider@gmail.com</p>
</div>
<button type="button" onclick="copyText('1008alexrider@gmail.com', 'Email copied to clipboard!')" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
Copy
</button>
</div>
<div class="flex items-center gap-3 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200/70 dark:border-slate-800">
<div class="w-9 h-9 rounded-lg bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-xs text-slate-500 dark:text-slate-400">Personal Domain</p>
<p class="text-sm font-mono font-medium truncate">coffeencode.in</p>
</div>
<button type="button" onclick="copyText('https://coffeencode.in', 'Domain URL copied!')" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
Copy
</button>
</div>
</div>
</div>
<!-- Interactive Contact Form -->
<div class="lg:col-span-7">
<form id="contact-form" class="space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="sender-name" class="block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">Your Name</label>
<input id="sender-name" type="text" required placeholder="Jane Doe" class="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
</div>
<div>
<label for="sender-email" class="block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">Your Email</label>
<input id="sender-email" type="email" required placeholder="jane@example.com" class="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
</div>
</div>
<div>
<label for="sender-subject" class="block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">Subject</label>
<input id="sender-subject" type="text" required placeholder="Project Collaboration / Opportunity" class="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
</div>
<div>
<label for="sender-message" class="block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">Message</label>
<textarea id="sender-message" rows="4" required placeholder="Tell me about your idea, role, or project..." class="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 resize-none"></textarea>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 pt-1">
<span class="text-xs text-slate-500 dark:text-slate-400">Opens your default mail client or prepares a copyable draft.</span>
<button type="submit" class="px-6 py-3 rounded-xl bg-brand-600 hover:bg-brand-700 text-white font-semibold text-sm shadow-md shadow-brand-600/20 transition-all">
Send Message
</button>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-slate-200/70 dark:border-slate-800/80 py-8 mt-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500 dark:text-slate-400">
<p>© <span id="current-year"></span> Alex Rider (<span class="font-mono">coffeencode.in</span>). Built with HTML, Tailwind CSS & Vanilla JS.</p>
<div class="flex items-center gap-5">
<a href="#about" class="hover:text-slate-900 dark:hover:text-white transition-colors">Top</a>
<a href="#projects" class="hover:text-slate-900 dark:hover:text-white transition-colors">Projects</a>
<a href="#skills" class="hover:text-slate-900 dark:hover:text-white transition-colors">Stack</a>
<a href="#contact" class="hover:text-slate-900 dark:hover:text-white transition-colors">Contact</a>
</div>
</div>
</footer>
<!-- Project Architecture Modal -->
<div id="project-modal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-slate-950/70 backdrop-blur-sm">
<div class="relative w-full max-w-lg rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 sm:p-7 shadow-2xl">
<div class="flex items-start justify-between gap-4">
<div>
<span id="modal-badge" class="px-2.5 py-1 rounded-full text-xs font-mono bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400">Architecture</span>
<h3 id="modal-title" class="text-xl font-bold mt-2">Project Details</h3>
</div>
<button id="close-modal" type="button" aria-label="Close modal" class="p-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:text-slate-900 dark:hover:text-white">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<p id="modal-desc" class="text-sm text-slate-600 dark:text-slate-300 mt-4 leading-relaxed"></p>
<div class="mt-5">
<h4 class="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2">Key Highlights</h4>
<ul id="modal-highlights" class="space-y-2 text-sm text-slate-700 dark:text-slate-300 list-disc pl-5"></ul>
</div>
<div class="mt-6 flex justify-end">
<button id="modal-done-btn" type="button" class="px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-700 text-white text-sm font-semibold transition-colors">
Close Overview
</button>
</div>
</div>
</div>
<script>
// Set current year in footer
document.getElementById('current-year').textContent = new Date().getFullYear();
// Theme management (supports system preference + manual toggle)
const htmlEl = document.documentElement;
const themeToggleBtn = document.getElementById('theme-toggle');
function initTheme() {
try {
const savedTheme = localStorage.getItem('alex_portfolio_theme');
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
htmlEl.classList.add('dark');
} else {
htmlEl.classList.remove('dark');
}
} catch (e) {
// Fallback if localStorage is restricted
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
htmlEl.classList.add('dark');
}
}
}
initTheme();
themeToggleBtn.addEventListener('click', () => {
htmlEl.classList.toggle('dark');
try {
localStorage.setItem('alex_portfolio_theme', htmlEl.classList.contains('dark') ? 'dark' : 'light');
} catch (e) {}
});
// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
document.querySelectorAll('.mobile-link').forEach((link) => {
link.addEventListener('click', () => mobileMenu.classList.add('hidden'));
});
// Toast notification helper (replaces alert)
let toastTimeout;
function showToast(message) {
const toast = document.getElementById('toast');
const toastMsg = document.getElementById('toast-message');
toastMsg.textContent = message;
toast.classList.remove('hidden');
// Trigger reflow for smooth transition
void toast.offsetWidth;
toast.classList.remove('translate-y-4', 'opacity-0');
clearTimeout(toastTimeout);
toastTimeout = setTimeout(() => {
toast.classList.add('translate-y-4', 'opacity-0');
setTimeout(() => toast.classList.add('hidden'), 300);
}, 3000);
}
// Clipboard copy helper using execCommand fallback for iframe compatibility
function copyText(text, successMsg) {
try {
const tempInput = document.createElement('textarea');
tempInput.value = text;
tempInput.style.position = 'fixed';
tempInput.style.opacity = '0';
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
showToast(successMsg || 'Copied to clipboard!');
} catch (err) {
showToast('Could not copy automatically.');
}
}
document.getElementById('copy-email-hero').addEventListener('click', () => {
copyText('1008alexrider@gmail.com', 'Copied 1008alexrider@gmail.com!');
});
// Project Category Filtering
const filterButtons = document.querySelectorAll('.filter-btn');
const projectCards = document.querySelectorAll('.project-card');
filterButtons.forEach((btn) => {
btn.addEventListener('click', () => {
const filter = btn.getAttribute('data-filter');
// Update active button styling
filterButtons.forEach((b) => {
b.classList.remove('bg-brand-600', 'text-white');
b.classList.add('bg-slate-200/70', 'dark:bg-slate-800', 'text-slate-700', 'dark:text-slate-300');
});
btn.classList.remove('bg-slate-200/70', 'dark:bg-slate-800', 'text-slate-700', 'dark:text-slate-300');
btn.classList.add('bg-brand-600', 'text-white');
// Filter cards
projectCards.forEach((card) => {
const categories = card.getAttribute('data-category').split(' ');
if (filter === 'all' || categories.includes(filter)) {
card.classList.remove('hidden');
} else {
card.classList.add('hidden');
}
});
});
});
// Project Architecture Modal Data & Handlers
const projectDetails = {
medicare: {
badge: 'Healthcare Full-Stack',
title: 'Medi-care Appointment & Notification Engine',
desc: 'A hospital scheduling and patient communication system engineered to automate doctor-patient appointment lifecycles.',
highlights: [
'Handles booking, rescheduling, and cancellation workflows with real-time slot release.',
'Dual-recipient automated notifications sent simultaneously to patients and consulting doctors.',
'Backed by Supabase PostgreSQL for persistent appointment records and state tracking.'
]
},
kafka: {
badge: 'Distributed Streaming',
title: 'Medi-care Kafka & Redpanda Pipeline',
desc: 'Event-driven messaging layer designed to decouple core healthcare booking transactions from downstream notification workers.',
highlights: [
'Provisioned managed Apache Kafka service (medi-care-kafka) on Aiven Cloud.',
'Explored serverless streaming architectures with Redpanda and Upstash Redis.',
'Ensures reliable, ordered delivery of booking events and schedule mutations.'
]
},
coffeencode: {
badge: 'Web & Cloud Infra',
title: 'CoffeeNCode.in Developer Hub',
desc: 'Personal developer domain and cloud sandbox used to test full-stack deployments, BaaS integrations, and custom email routing.',
highlights: [
'Configured custom GoDaddy DNS records (CNAME autoconfig & SRV autodiscover) for domain email hosting.',
'Integrated Appwrite backend projects for authentication and database prototyping.',
'Evaluated modern Indian and global PaaS workflows including Render and Voroa.'
]
},
vision: {
badge: 'CS-803A Computer Vision',
title: 'Image Processing & Computer Vision Toolkit',
desc: 'Academic and practical implementations focused on digital image analysis and classical computer vision techniques.',
highlights: [
'Covers spatial domain filtering, frequency transforms, edge detection, and segmentation.',
'Built alongside advanced Computer Science coursework (CS-803A).',
'Focuses on clean algorithmic implementation and visual verification.'
]
}
};
const modal = document.getElementById('project-modal');
function openProjectModal(key) {
const data = projectDetails[key];
if (!data) return;
document.getElementById('modal-badge').textContent = data.badge;
document.getElementById('modal-title').textContent = data.title;
document.getElementById('modal-desc').textContent = data.desc;
const listEl = document.getElementById('modal-highlights');
listEl.innerHTML = '';
data.highlights.forEach((item) => {
const li = document.createElement('li');
li.textContent = item;
listEl.appendChild(li);
});
modal.classList.remove('hidden');
modal.classList.add('flex');
}
function closeProjectModal() {
modal.classList.add('hidden');
modal.classList.remove('flex');
}
document.getElementById('close-modal').addEventListener('click', closeProjectModal);
document.getElementById('modal-done-btn').addEventListener('click', closeProjectModal);
modal.addEventListener('click', (e) => {
if (e.target === modal) closeProjectModal();
});
// Contact Form Submission
document.getElementById('contact-form').addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('sender-name').value.trim();
const email = document.getElementById('sender-email').value.trim();
const subject = document.getElementById('sender-subject').value.trim();
const message = document.getElementById('sender-message').value.trim();
const body = `Hi Alex,\n\n${message}\n\nBest regards,\n${name} (${email})`;
const mailtoUrl = `mailto:1008alexrider@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
showToast('Opening mail client for 1008alexrider@gmail.com...');
window.location.href = mailtoUrl;
e.target.reset();
});
</script>
</body>
</html>