Modern Developer Portfolio & Resume Template

<!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