<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex Rivera - Full-Stack Software Engineer</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' };
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Inter:wght@400;500;700&display=swap");
body { font-family: "Inter", sans-serif; }
.font-outfit { font-family: "Outfit", sans-serif; }
</style>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen transition-colors duration-300">
<nav class="max-w-6xl mx-auto px-6 py-8 flex items-center justify-between">
<span class="font-outfit font-extrabold text-2xl tracking-tight text-slate-900 dark:text-white">Alex<span class="text-cyan-500 font-extrabold">.dev</span></span>
<div class="flex items-center gap-6 text-sm font-semibold text-slate-600 dark:text-slate-400">
<a href="#about" class="hover:text-cyan-500 transition">About</a>
<a href="#projects" class="hover:text-cyan-500 transition">Projects</a>
<a href="#skills" class="hover:text-cyan-500 transition">Skills</a>
<button class="px-4 py-2 rounded-xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-bold transition">Hire Me</button>
</div>
</nav>
<main class="max-w-6xl mx-auto px-6 py-16 space-y-24">
<!-- Hero Section -->
<section class="space-y-6 max-w-3xl">
<span class="px-3.5 py-1.5 rounded-full bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 text-xs font-bold uppercase tracking-wider border border-cyan-500/20">
Available for Freelance & Full-time Roles
</span>
<h1 class="font-outfit font-extrabold text-4xl sm:text-6xl text-slate-900 dark:text-white leading-tight">
Building Scalable <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-blue-600">Web Applications</span> & Digital Products
</h1>
<p class="text-slate-600 dark:text-slate-400 text-base sm:text-lg leading-relaxed">
Hi! I am Alex Rivera, a senior full-stack developer specializing in modern PHP, Laravel, Tailwind CSS, Vue.js, and cloud architecture.
</p>
</section>
<!-- Projects Grid -->
<section id="projects" class="space-y-8">
<h2 class="font-outfit font-extrabold text-3xl text-slate-900 dark:text-white">Featured Work</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-4 hover:border-cyan-500/40 transition shadow-sm">
<div class="h-44 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/10 border border-cyan-500/20 flex items-center justify-center text-4xl">⚡</div>
<h3 class="font-outfit font-bold text-xl text-slate-900 dark:text-white">Real-Time SaaS Analytics Dashboard</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">High performance analytics dashboard with custom HTML5 Canvas charting and real-time WebSocket metric updates.</p>
</div>
<div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-4 hover:border-cyan-500/40 transition shadow-sm">
<div class="h-44 rounded-2xl bg-gradient-to-br from-purple-500/20 to-indigo-500/10 border border-purple-500/20 flex items-center justify-center text-4xl">🎨</div>
<h3 class="font-outfit font-bold text-xl text-slate-900 dark:text-white">AI Content Generation Platform</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">Full-stack web application powered by OpenAI API for automated SEO content creation and blog publishing.</p>
</div>
</div>
</section>
</main>
</body>
</html>
/* Supports both Dark and Light mode via Tailwind class variant */
// Interactive scripts included inside demo view file
