1<!DOCTYPE html><!--cqR2hOTy6gHbxv92Qe_yS--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/22a5144ee8d83bca-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/4c9affa5bc8f420e-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/e4af272ccee01ff0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/22c42468c5f6e8f6.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-865f743ed8e46548.js"/>
1<script src="/_next/static/chunks/4bd1b696-c023c6e3521b1417.js" async=""></script>
1<script src="/_next/static/chunks/255-4f84124391a7dac4.js" async=""></script>
1<script src="/_next/static/chunks/main-app-f9b5d20365cb8be2.js" async=""></script>
1<script src="/_next/static/chunks/619-ba102abea3e3d0e4.js" async=""></script>
1<script src="/_next/static/chunks/109-dd692ca47450d9e8.js" async=""></script>
1<script src="/_next/static/chunks/119-b7ca902621c50977.js" async=""></script>
1<script src="/_next/static/chunks/677-40d652d6b9274bdf.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-cd5b9e3ef8eaace0.js" async=""></script>
1<script src="/_next/static/chunks/916-1f91fb0cd76feb75.js" async=""></script>
1<script src="/_next/static/chunks/app/about/page-a31b790575008d00.js" async=""></script>
1<meta name="next-size-adjust" content=""/><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f172a"/><title>Portfolio | Full Stack Developer (Laravel + Next.js)</title><meta name="description" content="Experienced Full Stack Developer specializing in Laravel and Next.js. Building scalable web applications with modern technologies."/><meta name="author" content="Your Name"/><link rel="manifest" href="/site.webmanifest"/><meta name="keywords" content="Full Stack Developer,Laravel,Next.js,React,PHP,JavaScript,Web Development,Portfolio"/><meta name="creator" content="Your Name"/><meta name="publisher" content="Your Name"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://yourdomain.com"/><meta property="og:title" content="Portfolio | Full Stack Developer (Laravel + Next.js)"/><meta property="og:description" content="Experienced Full Stack Developer specializing in Laravel and Next.js. Building scalable web applications with modern technologies."/><meta property="og:url" content="https://yourdomain.com"/><meta property="og:site_name" content="Portfolio | Full Stack Developer"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://yourdomain.com/og-image.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Portfolio Preview"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@yourhandle"/><meta name="twitter:title" content="Portfolio | Full Stack Developer (Laravel + Next.js)"/><meta name="twitter:description" content="Experienced Full Stack Developer specializing in Laravel and Next.js. Building scalable web applications with modern technologies."/><meta name="twitter:image" content="https://yourdomain.com/og-image.jpg"/><link rel="icon" href="/favicon.ico" sizes="any"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"/>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body class="__variable_f367f3 __variable_246ccd __variable_73ee6c antialiased"><div hidden=""><!--$--><!--/$--></div>
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","dark",null,["light","dark"],null,false,true)</script>
1<div class="min-h-screen animate-fade-in"><div class="flex min-h-screen flex-col bg-background text-foreground"><header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-transparent" style="opacity:0;transform:translateY(-100px)"><nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><a href="/"><span class="text-xl font-bold text-gradient cursor-pointer" tabindex="0">ALEX</span></a><div class="hidden md:flex items-center gap-1" style="opacity:0"><a href="/"><span class="relative px-4 py-2 text-sm font-medium transition-colors rounded-lg cursor-pointer text-muted-foreground hover:text-foreground" style="opacity:0;transform:translateX(-30px)">Home</span></a><a href="/about"><span class="relative px-4 py-2 text-sm font-medium transition-colors rounded-lg cursor-pointer text-foreground" style="opacity:0;transform:translateX(-30px)">About<span class="absolute inset-0 bg-muted rounded-lg -z-10"></span></span></a><a href="/projects"><span class="relative px-4 py-2 text-sm font-medium transition-colors rounded-lg cursor-pointer text-muted-foreground hover:text-foreground" style="opacity:0;transform:translateX(-30px)">Projects</span></a><a href="/blog"><span class="relative px-4 py-2 text-sm font-medium transition-colors rounded-lg cursor-pointer text-muted-foreground hover:text-foreground" style="opacity:0;transform:translateX(-30px)">Blog</span></a><a href="/contact"><span class="relative px-4 py-2 text-sm font-medium transition-colors rounded-lg cursor-pointer text-muted-foreground hover:text-foreground" style="opacity:0;transform:translateX(-30px)">Contact</span></a></div><div class="md:hidden flex items-center gap-2"><button class="p-2 rounded-lg bg-muted hover:bg-muted/80 transition-colors" aria-label="Toggle theme" tabindex="0"><div class="w-5 h-5"></div></button><button class="p-2 rounded-lg hover:bg-muted transition-colors" aria-label="Toggle menu" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></button></div></div></nav></header><main class="flex-1"><div style="opacity:0"><section class="pt-32 pb-16 lg:pt-40 lg:pb-20"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="text-center max-w-3xl mx-auto" style="opacity:0;transform:translateY(20px)"><span class="inline-block px-4 py-2 rounded-full bg-muted text-sm font-medium text-muted-foreground mb-4">Get to Know Me</span><h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">About <span class="text-gradient">Me</span></h1><p class="text-lg text-muted-foreground">Passionate developer with a love for creating impactful digital experiences. Here's my story, skills, and journey so far.</p></div></div></section><section id="about" class="py-20 lg:py-25"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="text-center mb-16" style="opacity:0;transform:translateY(20px)"><span class="inline-block px-4 py-2 rounded-full bg-muted text-sm font-medium text-muted-foreground mb-4">About Me</span><h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">Know Who <span class="text-gradient">I Am</span></h2><p class="text-muted-foreground text-lg max-w-2xl mx-auto">A passionate developer dedicated to creating impactful digital experiences</p></div><div class="grid lg:grid-cols-2 gap-12 lg:gap-16"><div style="opacity:0"><div class="bg-card border border-border rounded-2xl p-8 h-full" style="opacity:0;transform:translateY(40px)"><h3 class="text-2xl font-bold mb-6">Short Bio</h3><div class="space-y-4 text-muted-foreground leading-relaxed"><p>Hello! I'm Alex Reed, a Full Stack Developer with a passion for building robust and scalable web applications. I specialize in Laravel and Next.js, combining backend power with modern frontend experiences.</p><p>My journey in web development started 5 years ago, and since then, I've had the privilege of working with diverse clients from startups to established enterprises, helping them bring their digital visions to life.</p><p>I believe in writing clean, maintainable code and staying up-to-date with the latest te
1chnologies. When I'm not coding, you'll find me exploring new frameworks, contributing to open-source projects, or mentoring aspiring developers.</p></div><div class="mt-8 pt-8 border-t border-border"><h4 class="font-semibold mb-4">Highlights</h4><div class="flex flex-wrap gap-3"><span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full" style="background-color:hsl(var(--muted));color:hsl(var(--muted-foreground))"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big" style="color:hsl(var(--secondary))"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>Problem Solver</span><span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full" style="background-color:hsl(var(--muted));color:hsl(var(--muted-foreground))"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big" style="color:hsl(var(--secondary))"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>Team Player</span><span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full" style="background-color:hsl(var(--muted));color:hsl(var(--muted-foreground))"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big" style="color:hsl(var(--secondary))"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>Fast Learner</span><span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full" style="background-color:hsl(var(--muted));color:hsl(var(--muted-foreground))"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big" style="color:hsl(var(--secondary))"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>Detail Oriented</span></div></div></div></div><div class="space-y-6" style="opacity:0"><div class="bg-card border border-border rounded-2xl p-8 hover-lift" style="opacity:0;transform:translateY(40px)"><h3 class="text-xl font-bold mb-6">Personal Info</h3><div class="grid sm:grid-cols-2 gap-6"><div class="flex items-start gap-4"><div class="p-3 rounded-xl" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user" style="color:hsl(var(--primary))"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div><div><p class="text-sm text-muted-foreground">Name</p><p class="font-medium">Alex Reed</p></div></div><div class="flex items-start gap-4"><div class="p-3 rounded-xl" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" style="color:hsl(var(--primary))"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></div><div><p class="text-sm text-muted-foreground">Email</p><p class="font-medium">[email protected]</p></div></div><div class="flex items-start gap-4"><div class="p-3 rounded-xl" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin" style="color:hsl(var(--primary))"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg></div><div><p class="text-sm text-muted-foreground">Location</p><p class="font-medium"> London, UK</p></div></div><div class="flex items-start gap-4"><div class="p-3 rounded-xl" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar" style="color:hsl(var(--primary))"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg></div><div><p class="text-sm text-muted-foreground">Experience</p><p class="font-medium">5+ Years</p></div></div></div></div><div class="grid sm:grid-cols-3 gap-4"><div class="bg-card border border-border rounded-2xl p-6 text-center hover:border-primary/30 transition-colors" style="opacity:0;transform:translateY(40px)"><div class="inline-flex items-center justify-center w-12 h-12 rounded-xl mb-4" style="background-color:hsl(var(--primary) / 0.1)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml" style="color:hsl(var(--primary))"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg></div><div class="text-3xl font-bold text-gradient mb-1">50+</div><div class="text-sm text-muted-foreground">Projects Completed</div></div><div class="bg-card border border-border rounded-2xl p-6 text-center hover:border-primary/30 transition-colors" style="opacity:0;transform:translateY(40px)"><div class="inline-flex items-center justify-center w-12 h-12 rounded-xl mb-4" style="background-color:hsl(var(--primary) / 0.1)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase" style="color:hsl(var(--primary))"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path><rect width="20" height="14" x="2" y="6" rx="2"></rect></svg></div><div class="text-3xl font-bold text-gradient mb-1">5+</div><div class="text-sm text-muted-foreground">Years Experience</div></div><div class="bg-card border border-border rounded-2xl p-6 text-center hover:border-primary/30 transition-colors" style="opacity:0;transform:translateY(40px)"><div class="inline-flex items-center justify-center w-12 h-12 rounded-xl mb-4" style="background-color:hsl(var(--primary) / 0.1)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users" style="color:hsl(var(--primary))"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div><div class="text-3xl font-bold text-gradient mb-1">30+</div><div class="text-sm text-muted-foreground">Happy Clients</div></div></div></div></div></div></section><section id="experience" class="py-20 lg:py-25"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="text-center mb-16" style="opacity:0;transform:translateY(20px)"><span class="inline-block px-4 py-2 rounded-full bg-muted text-sm font-medium text-muted-foreground mb-4">My Journey</span><h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">Experience & <span class="text-[#f59e0b]">Education</span></h2><p class="text-muted-foreground text-lg max-w-2xl mx-auto">
1A timeline of my professional growth and academic foundation</p></div><div class="relative max-w-3xl mx-auto" style="opacity:0"><div class="absolute left-4 sm:left-1/2 top-0 bottom-0 w-px sm:-translate-x-1/2" style="background:linear-gradient(to bottom, hsl(var(--primary) / 0.5), hsl(var(--border)), hsl(var(--primary) / 0.3))"></div><div class="space-y-8"><div class="relative flex items-start gap-4 sm:gap-8 sm:flex-row" style="opacity:0;transform:translateY(40px)"><div class="absolute left-4 sm:left-1/2 w-3 h-3 rounded-full border-2 border-background sm:-translate-x-1/2 z-10 mt-6" style="background-color:hsl(var(--primary))"></div><div class="ml-12 sm:ml-0 sm:w-[calc(50%-2rem)] sm:pr-8 sm:text-right"><div class="bg-card border border-border rounded-xl p-5 transition-colors group"><div class="flex items-center gap-3 mb-3 sm:flex-row-reverse"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--primary) / 0.1)"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building2 lucide-building-2" style="color:hsl(var(--primary))"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg></div><div class="sm:text-right"><h3 class="font-semibold text-foreground">Senior Full Stack Developer</h3><p class="text-sm text-muted-foreground">TechCorp Solutions</p></div></div><p class="text-xs text-muted-foreground mb-3 flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2022 - Present</p><p class="text-sm text-muted-foreground line-clamp-2">Leading development of enterprise web applications using Laravel and Next.js.</p></div></div></div><div class="relative flex items-start gap-4 sm:gap-8 sm:flex-row-reverse" style="opacity:0;transform:translateY(40px)"><div class="absolute left-4 sm:left-1/2 w-3 h-3 rounded-full border-2 border-background sm:-translate-x-1/2 z-10 mt-6" style="background-color:hsl(var(--primary))"></div><div class="ml-12 sm:ml-0 sm:w-[calc(50%-2rem)] sm:pl-8"><div class="bg-card border border-border rounded-xl p-5 transition-colors group"><div class="flex items-center gap-3 mb-3 "><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--primary) / 0.1)"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml" style="color:hsl(var(--primary))"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg></div><div class=""><h3 class="font-semibold text-foreground">Full Stack Developer</h3><p class="text-sm text-muted-foreground">Digital Innovations Ltd</p></div></div><p class="text-xs text-muted-foreground mb-3 flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2020 - 2022</p><p class="text-sm text-muted-foreground line-clamp-2">Developed custom e-commerce solutions and integrated payment systems.</p></div></div></div><div class="relative flex items-start gap-4 sm:gap-8 sm:flex-row" style="opacity:0;transform:translateY(40px)"><div class="absolute left-4 sm:left-1/2 w-3 h-3 rounded-full border-2 border-background sm:-translate-x-1/2 z-10 mt-6" style="background-color:hsl(var(--primary))"></div><div class="ml-12 sm:ml-0 sm:w-[calc(50%-2rem)] sm:pr-8 sm:text-right"><div class="bg-card border border-border rounded-xl p-5 transition-colors group"><div class="flex items-center gap-3 mb-3 sm:flex-row-reverse"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--primary) / 0.1)"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users" style="color:hsl(var(--primary))"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div><div class="sm:text-right"><h3 class="font-semibold text-foreground">Junior Web Developer</h3><p class="text-sm text-muted-foreground">StartUp Hub</p></div></div><p class="text-xs text-muted-foreground mb-3 flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2019 - 2020</p><p class="text-sm text-muted-foreground line-clamp-2">Started my professional journey building MVPs for early-stage startups.</p></div></div></div><div class="relative flex items-start gap-4 sm:gap-8 sm:flex-row-reverse" style="opacity:0;transform:translateY(40px)"><div class="absolute left-4 sm:left-1/2 w-3 h-3 rounded-full border-2 border-background sm:-translate-x-1/2 z-10 mt-6" style="background-color:hsl(var(--primary))"></div><div class="ml-12 sm:ml-0 sm:w-[calc(50%-2rem)] sm:pl-8"><div class="bg-card border border-border rounded-xl p-5 transition-colors group"><div class="flex items-center gap-3 mb-3 "><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--primary) / 0.1)"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-graduation-cap" style="color:hsl(var(--primary))"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"></path><path d="M22 10v6"></path><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path></svg></div><div class=""><h3 class="font-semibold text-foreground">BS in Computer Science</h3><p class="text-sm text-muted-foreground">University of Technology</p></div></div><p class="text-xs text-muted-foreground mb-3 flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2015 - 2019</p><p class="text-sm text-muted-foreground line-clamp-2">Graduated with honors, specializing in Software Engineering.</p></div></div></div></div><div class="text-center mt-12" style="opacity:0;transform:translateY(20px)"><button class="inline-flex items-center gap-2 px-6 py-3 rounded-xl font-semibold transition-colors" tabindex="0" style="background-color:hsl(var(--primary));color:hsl(var(--primary-foreground))">View Full Details<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"></path></svg></button></div></div></div></section><section id="skills" class="py-20 lg:py-32 bg-muted/30"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="text-center mb-16" style="opacity:0;transform:translateY(20px)"><span class="inline-block px-4 py-2 rounded-full bg-muted text-sm font-medium text-muted-foreground mb-4">My Expertise</span><h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">Skills & <span class="text-gradient">Technologies</span></h2><p class="text-muted-foreground text-lg max-w-2xl mx-auto">Technologies I work with to bring ideas to life</p></div><div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8"><div class="bg-card border border-border rounded-2xl p-6 lg:p-8 hover:border-primary/20 transition-all duration-300" style="opacity:0;transform:translateY(30px)"><div class="flex items-center gap-4 mb-8"><div class="p-3 rounded-xl bg-gradient-to-r from-primary to-orange-400 shadow-lg"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml text-white"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg></div><div><h3 class="text-xl font-bold">Frontend</h3><p class="text-sm text-muted-foreground">5<!-- --> technologies</p></div></div><div class="space-y-6"><div class="group" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-3 mb-2"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-code transition-colors" style="color:hsl(var(--muted-foreground))"><path d="M10 12.5 8 15l2 2.5"></path><path d="m14 12.5 2 2.5-2 2.5"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"></path></svg></div><span class="font-medium">HTML5</span><span class="ml-auto text-sm text-muted-foreground font-semibold">95<!-- -->%</span></div><div class="h-2 bg-muted rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-primary to-orange-400 relative" style="width:0px"><div class="absolute inset-0 w-1/3 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12"></div></div></div></div><div class="group" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-3 mb-2"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette transition-colors" style="color:hsl(var(--muted-foreground))"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg></div><span class="font-medium">CSS3</span><span class="ml-auto text-sm text-muted-foreground font-semibold">90<!-- -->%</span></div><div class="h-2 bg-muted rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-primary to-orange-400 relative" style="width:0px"><div class="absolute inset-0 w-1/3 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12"></div></div></div></div><div class="group" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-3 mb-2"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-braces transition-colors" style="color:hsl(var(--muted-foreground))"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"></path><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"></path></svg></div><span class="font-medium">JavaScript</span><span class="ml-auto text-sm text-muted-foreground font-semibold">92<!-- -->%</span></div><div class="h-2 bg-muted rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-primary to-orange-400 relative" style="width:0px"><div class="absolute inset-0 w-1/3 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12"></div></div></div></div><div class="group" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-3 mb-2"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-atom transition-colors" style="color:hsl(var(--muted-foreground))"><circle cx="12" cy="12" r="1"></circle><path d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z"></path><path d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z"></path></svg></div><span class="font-medium">React</span><span class="ml-auto text-sm text-muted-foreground font-semibold">88<!-- -->%</span></div><div class="h-2 bg-muted rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-primary to-orange-400 relative" style="width:0px"><div class="absolute inset-0 w-1/3 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12"></div></div></div></div><div class="group" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-3 mb-2"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket transition-colors" style="color:hsl(var(--muted-foreground))"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg></div><span class="font-medium">Next.js</span><span class="ml-auto text-sm text-muted-foreground font-semibold">85<!-- -->%</span></div><div class="h-2 bg-muted rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-primary to-orange-400 relative" style="width:0px"><div class="absolute inset-0 w-1/3 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12"></div></div></div></div></div></div><div class="bg-card border border-border rounded-2xl p-6 lg:p-8 hover:border-primary/20 transition-all duration-300" style="opacity:0;transform:translateY(30px)"><div class="flex items-center gap-4 mb-8"><div class="p-3 rounded-xl bg-gradient-to-r from-secondary to-emerald-400 shadow-lg"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database text-white"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg></div><div><h3 class="text-xl font-bold">
1Backend</h3><p class="text-sm text-muted-foreground">2<!-- --> technologies</p></div></div><div class="space-y-6"><div class="group" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-3 mb-2"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot transition-colors" style="color:hsl(var(--muted-foreground))"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="1"></circle></svg></div><span class="font-medium">PHP</span><span class="ml-auto text-sm text-muted-foreground font-semibold">90<!-- -->%</span></div><div class="h-2 bg-muted rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-secondary to-emerald-400 relative" style="width:0px"><div class="absolute inset-0 w-1/3 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12"></div></div></div></div><div class="group" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-3 mb-2"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server transition-colors" style="color:hsl(var(--muted-foreground))"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect><line x1="6" x2="6.01" y1="6" y2="6"></line><line x1="6" x2="6.01" y1="18" y2="18"></line></svg></div><span class="font-medium">Laravel</span><span class="ml-auto text-sm text-muted-foreground font-semibold">88<!-- -->%</span></div><div class="h-2 bg-muted rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-secondary to-emerald-400 relative" style="width:0px"><div class="absolute inset-0 w-1/3 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12"></div></div></div></div></div></div><div class="bg-card border border-border rounded-2xl p-6 lg:p-8 hover:border-primary/20 transition-all duration-300" style="opacity:0;transform:translateY(30px)"><div class="flex items-center gap-4 mb-8"><div class="p-3 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-400 shadow-lg"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench text-white"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg></div><div><h3 class="text-xl font-bold">Tools</h3><p class="text-sm text-muted-foreground">2<!-- --> technologies</p></div></div><div class="space-y-6"><div class="group" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-3 mb-2"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-branch transition-colors" style="color:hsl(var(--muted-foreground))"><line x1="6" x2="6" y1="3" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg></div><span class="font-medium">Git</span><span class="ml-auto text-sm text-muted-foreground font-semibold">85<!-- -->%</span></div><div class="h-2 bg-muted rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 relative" style="width:0px"><div class="absolute inset-0 w-1/3 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12"></div></div></div></div><div class="group" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-3 mb-2"><div class="p-2 rounded-lg transition-colors" style="background-color:hsl(var(--muted))"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table2 lucide-table-2 transition-colors" style="color:hsl(var(--muted-foreground))"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"></path></svg></div><span class="font-medium">MySQL</span><span class="ml-auto text-sm text-muted-foreground font-semibold">82<!-- -->%</span></div><div class="h-2 bg-muted rounded-full overflow-hidden"><div class="h-full rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 relative" style="width:0px"><div class="absolute inset-0 w-1/3 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12"></div></div></div></div></div></div></div><div class="mt-16 text-center" style="opacity:0;transform:translateY(20px)"><h3 class="text-lg font-semibold mb-6">Also familiar with</h3><div class="flex flex-wrap justify-center gap-3"><span class="px-4 py-2 text-sm rounded-full bg-card border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors cursor-default">TypeScript</span><span class="px-4 py-2 text-sm rounded-full bg-card border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors cursor-default">Tailwind CSS</span><span class="px-4 py-2 text-sm rounded-full bg-card border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors cursor-default">REST APIs</span><span class="px-4 py-2 text-sm rounded-full bg-card border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors cursor-default">GraphQL</span><span class="px-4 py-2 text-sm rounded-full bg-card border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors cursor-default">
1Docker</span><span class="px-4 py-2 text-sm rounded-full bg-card border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors cursor-default">AWS</span><span class="px-4 py-2 text-sm rounded-full bg-card border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors cursor-default">Linux</span><span class="px-4 py-2 text-sm rounded-full bg-card border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors cursor-default">Figma</span></div></div></div></section></div><!--$--><!--/$--></main><footer class="border-t border-muted/30 bg-muted/30"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"><div class="flex flex-col md:flex-row items-center justify-between gap-6"><div class="text-center md:text-left"><a href="#home" class="text-xl font-bold text-gradient">ALEX REED</a><p class="mt-2 text-sm text-muted-foreground">© <!-- -->2026<!-- --> All rights reserved.</p></div><div class="flex items-center gap-4"><a href="https://github.com" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-muted hover:bg-primary hover:text-background transition-all duration-300" aria-label="GitHub" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></a><a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-muted hover:bg-primary hover:text-background transition-all duration-300" aria-label="LinkedIn" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg></a><a href="https://twitter.com" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-muted hover:bg-primary hover:text-background transition-all duration-300" aria-label="Twitter" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a><a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-muted hover:bg-primary hover:text-background transition-all duration-300" aria-label="Email" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></a></div></div></div></footer><button class="fixed bottom-24 right-6 z-50 p-3 rounded-full hover:scale-110 transition-all duration-300" aria-label="Open theme settings" style="background-color:hsl(var(--primary));color:hsl(var(--primary-foreground));box-shadow:0 10px 15px -3px hsl(var(--primary) / 0.25), 0 4px 6px -2px hsl(var(--primary) / 0.25);opacity:0;transform:scale(0.8)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings animate-spin-slow" style="animation-duration:8s"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg></button><button class="fixed bottom-44 right-6 z-40 p-3 rounded-full bg-card border border-border shadow-lg hover:scale-110 hover:shadow-xl transition-all duration-300" aria-label="Switch demo" style="opacity:0;transform:translateY(20px)"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers text-primary"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg></button>
1<section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section></div></div>
1<script src="/_next/static/chunks/webpack-865f743ed8e46548.js" id="_R_" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[6174,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"default\"]\n3:I[9294,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"ThemeProvider\"]\n4:I[8276,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"DemoProvider\"]\n5:I[9814,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"default\"]\n6:I[200,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"default\"]\n7:I[2289,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"default\"]\n8:I[3464,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"default\"]\n9:I[9766,[],\"\"]\na:I[8924,[],\"\"]\nb:I[8743,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677"])</script>
1<script>self.__next_f.push([1,"-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"default\"]\nc:I[8305,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"default\"]\nd:I[4820,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"default\"]\ne:I[8510,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"default\"]\nf:I[8720,[\"619\",\"static/chunks/619-ba102abea3e3d0e4.js\",\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"119\",\"static/chunks/119-b7ca902621c50977.js\",\"677\",\"static/chunks/677-40d652d6b9274bdf.js\",\"177\",\"static/chunks/app/layout-cd5b9e3ef8eaace0.js\"],\"Toaster\"]\n10:I[1959,[],\"ClientPageRoot\"]\n11:I[5722,[\"109\",\"static/chunks/109-dd692ca47450d9e8.js\",\"916\",\"static/chunks/916-1f91fb0cd76feb75.js\",\"220\",\"static/chunks/app/about/page-a31b790575008d00.js\"],\"default\"]\n14:I[4431,[],\"OutletBoundary\"]\n16:I[5278,[],\"AsyncMetadataOutlet\"]\n18:I[4431,[],\"ViewportBoundary\"]\n1a:I[4431,[],\"MetadataBoundary\"]\n1b:\"$Sreact.suspense\"\n1d:I[7150,[],\"\"]\n:HL[\"/_next/static/media/22a5144ee8d83bca-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/4c9affa5bc8f420e-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/22c42468c5f6e8f6.css\",\"style\"]\n"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"cqR2hOTy6gHbxv92Qe-yS\",\"p\":\"\",\"c\":[\"\",\"about\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"about\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/22c42468c5f6e8f6.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_f367f3 __variable_246ccd __variable_73ee6c antialiased\",\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L5\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"flex min-h-screen flex-col bg-background text-foreground\",\"children\":[[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$Lb\",null,{}],[\"$\",\"$Lc\",null,{}],[\"$\",\"$Ld\",null,{}],[\"$\",\"$Le\",null,{}],[\"$\",\"$Lf\",null,{\"position\":\"bottom-right\",\"richColors\":true}]]}]}]}]}]}]}]}]]}],{\"children\":[\"about\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L10\",null,{\"Component\":\"$11\",\"searchParams\":{},\"params\":{},\"promises\":[\"$@12\",\"$@13\"]}],null,[\"$\",\"$L14\",null,{\"children\":[\"$L15\",[\"$\",\"$L16\",null,{\"promise\":\"$@17\"}]]}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L18\",null,{\"children\":\"$L19\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$L1a\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$1b\",null,{\"fallback\":null,\"children\":\"$L1c\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$1d\",[]],\"s\":false,\"S\":true}\n"])</script>
1<script>self.__next_f.push([1,"12:{}\n13:\"$0:f:0:1:2:children:2:children:1:props:children:0:props:params\"\n"])</script>
1<script>self.__next_f.push([1,"19:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: light)\",\"content\":\"#ffffff\"}],[\"$\",\"meta\",\"3\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"#0f172a\"}]]\n15:null\n"])</script>
1<script>self.__next_f.push([1,"1e:I[622,[],\"IconMark\"]\n"])</script>
1<script>self.__next_f.push([1,"17:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Portfolio | Full Stack Developer (Laravel + Next.js)\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Experienced Full Stack Developer specializing in Laravel and Next.js. Building scalable web applications with modern technologies.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Your Name\"}],[\"$\",\"link\",\"3\",{\"rel\":\"manifest\",\"href\":\"/site.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"Full Stack Developer,Laravel,Next.js,React,PHP,JavaScript,Web Development,Portfolio\"}],[\"$\",\"meta\",\"5\",{\"name\":\"creator\",\"content\":\"Your Name\"}],[\"$\",\"meta\",\"6\",{\"name\":\"publisher\",\"content\":\"Your Name\"}],[\"$\",\"meta\",\"7\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"8\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"9\",{\"rel\":\"canonical\",\"href\":\"https://yourdomain.com\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:title\",\"content\":\"Portfolio | Full Stack Developer (Laravel + Next.js)\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:description\",\"content\":\"Experienced Full Stack Developer specializing in Laravel and Next.js. Building scalable web applications with modern technologies.\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:url\",\"content\":\"https://yourdomain.com\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:site_name\",\"content\":\"Portfolio | Full Stack Developer\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image\",\"content\":\"https://yourdomain.com/og-image.jpg\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image:alt\",\"content\":\"Portfolio Preview\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:creator\",\"content\":\"@yourhandle\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:title\",\"content\":\"Portfolio | Full Stack Developer (Laravel + Next.js)\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:description\",\"content\":\"Experienced Full Stack Developer specializing in Laravel and Next.js. Building scalable web applications with modern technologies.\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:image\",\"content\":\"https://yourdomain.com/og-image.jpg\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"sizes\":\"any\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"27\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\",\"sizes\":\"180x180\"}],[\"$\",\"$L1e\",\"28\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>
1<script>self.__next_f.push([1,"1c:\"$17:metadata\"\n"])</script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.