<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Designer former AI eingeer displaying his portfolio of works he've done in the past"><link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="stylesheet" href="/article.css"><title>Mike&#39;s design portfolio</title><link rel="stylesheet" href="/_astro/Layout.Dl8bmVVr.css"></head><body class="bg-white text-primary"><header class="sticky top-0 z-50 bg-white border-b border-gray-200"><div class="max-w-7xl mx-auto px-6 py-4"><div class="flex items-center justify-between"><!-- Logo and Brand --><a href="/" class="flex items-center gap-3 flex-shrink-0"><img src="/logo.png" alt="Mike's design portfolio" class="h-8 w-auto"><span class="hidden sm:inline text-lg font-semibold text-ink">Mike's design portfolio</span></a><!-- Desktop Navigation --><nav class="hidden md:flex items-center gap-8"><a href="/" class="text-ink hover:text-primary-readable transition-colors duration-200">Home</a><a href="/about/" class="text-ink hover:text-primary-readable transition-colors duration-200">About</a><a href="/projects/" class="text-ink hover:text-primary-readable transition-colors duration-200">Projects</a></nav><!-- Mobile Menu Button --><button id="mobile-menu-btn" class="md:hidden p-2 text-ink hover:text-primary-readable transition-colors duration-200" aria-label="Toggle navigation menu" aria-expanded="false"><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" aria-hidden="true" class="lucide lucide-menu"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button></div><!-- Mobile Navigation --><nav id="mobile-menu" class="hidden md:hidden mt-4 pb-4 border-t border-gray-200 pt-4" aria-hidden="true"><div class="flex flex-col gap-4"><a href="/" class="text-ink hover:text-primary-readable transition-colors duration-200">Home</a><a href="/about/" class="text-ink hover:text-primary-readable transition-colors duration-200">About</a><a href="/projects/" class="text-ink hover:text-primary-readable transition-colors duration-200">Projects</a></div></nav></div></header><script type="module">var e=document.getElementById(`mobile-menu-btn`),t=document.getElementById(`mobile-menu`);e&&t&&(e.addEventListener(`click`,()=>{let n=e.getAttribute(`aria-expanded`)===`true`;e.setAttribute(`aria-expanded`,String(!n)),t.classList.toggle(`hidden`)}),t.querySelectorAll(`a`).forEach(n=>{n.addEventListener(`click`,()=>{e.setAttribute(`aria-expanded`,`false`),t.classList.add(`hidden`)})}));</script><main><!-- Hero Section --><section id="hero" class="py-20 px-6 md:px-12 lg:px-16"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center"><!-- Left: Text Content --><div class="flex flex-col justify-center"><h1 class="text-5xl md:text-6xl font-bold text-ink mb-6">Designer & Former AI Engineer</h1><p class="text-xl text-ink mb-8 leading-relaxed">Crafting intuitive digital experiences backed by technical depth. Specializing in SaaS and fintech design.</p><div><a href="/projects/" class="inline-block px-8 py-4 bg-primary text-on-primary font-semibold rounded-none hover:bg-secondary transition-colors duration-200">View My Work</a></div></div><!-- Right: Image Placeholder --><div class="bg-gradient-to-br from-primary to-secondary rounded-none h-96 md:h-full min-h-96 flex items-center justify-center"><div class="text-center text-on-primary"><p class="text-lg font-semibold">Mike's Professional Portrait</p></div></div></div></section><!-- Featured Projects Section --><section id="featuredprojects" class="py-20 px-6 md:px-12 lg:px-16 bg-gray-50"><div class="max-w-7xl mx-auto"><h2 class="text-4xl md:text-5xl font-bold text-ink mb-16">Featured Projects</h2><div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"><a href="/projects/1270036f-0c29-4309-8abe-f8cc290470b3/" class="group"><div class="bg-white rounded-none shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden h-full flex flex-col"><div class="h-48 bg-gradient-to-br from-secondary to-accent overflow-hidden"><img src="https://media.kantan-cms.dev/images/f9bb4e37-c46d-4d01-8e8d-5293512c3572/ac20d012-d8cf-412a-97da-15f960f84e57/40d69e45-8d7f-40d0-bb4f-74925682f420/Screenshot 2024-08-28 at 5.03.10.png" alt="Creative" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"></div><div class="p-6 flex flex-col flex-grow"><h3 class="text-xl font-bold text-ink mb-3 group-hover:text-primary-readable transition-colors duration-200 line-clamp-2">Creative</h3><div class="flex flex-wrap gap-2 mb-4"><span class="text-xs px-3 py-1 bg-gray-100 text-ink rounded-none">Creative</span><span class="text-xs px-3 py-1 bg-gray-100 text-ink rounded-none">DX/APP</span></div><div class="flex items-center text-primary-readable font-semibold mt-auto group-hover:gap-2 transition-all duration-200">Learn More<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" aria-hidden="true" class="lucide lucide-arrow-right w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-200"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div></a><a href="/projects/3fd5986d-2458-4f42-9c9c-ac39a13d9752/" class="group"><div class="bg-white rounded-none shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden h-full flex flex-col"><div class="h-48 bg-gradient-to-br from-secondary to-accent overflow-hidden"><img src="https://media.kantan-cms.dev/images/f9bb4e37-c46d-4d01-8e8d-5293512c3572/ac20d012-d8cf-412a-97da-15f960f84e57/7aaf1718-dcbb-4ddd-9038-589fe944173a/Untitled-1.jpg" alt="test" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"></div><div class="p-6 flex flex-col flex-grow"><h3 class="text-xl font-bold text-ink mb-3 group-hover:text-primary-readable transition-colors duration-200 line-clamp-2">test</h3><div class="flex flex-wrap gap-2 mb-4"><span class="text-xs px-3 py-1 bg-gray-100 text-ink rounded-none">Website</span><span class="text-xs px-3 py-1 bg-gray-100 text-ink rounded-none">Creative</span></div><div class="flex items-center text-primary-readable font-semibold mt-auto group-hover:gap-2 transition-all duration-200">Learn More<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" aria-hidden="true" class="lucide lucide-arrow-right w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-200"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div></a><a href="/projects/990e57c7-09dd-41e9-97ba-1a7ee6fead71/" class="group"><div class="bg-white rounded-none shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden h-full flex flex-col"><div class="h-48 bg-gradient-to-br from-secondary to-accent overflow-hidden"><img src="https://media.kantan-cms.dev/images/f9bb4e37-c46d-4d01-8e8d-5293512c3572/ac20d012-d8cf-412a-97da-15f960f84e57/7e66ba69-c519-4209-8377-5c3b1157be10/ai-generated-1773040163159.jpg" alt="埋め立ての基礎" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"></div><div class="p-6 flex flex-col flex-grow"><h3 class="text-xl font-bold text-ink mb-3 group-hover:text-primary-readable transition-colors duration-200 line-clamp-2">埋め立ての基礎</h3><div class="flex items-center text-primary-readable font-semibold mt-auto group-hover:gap-2 transition-all duration-200">Learn More<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" aria-hidden="true" class="lucide lucide-arrow-right w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-200"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div></div></a></div><div class="text-center"><a href="/projects/" class="inline-block px-8 py-4 bg-primary text-on-primary font-semibold rounded-none hover:bg-secondary transition-colors duration-200">See All Projects</a></div></div></section><!-- Why Work With Me Section --><section class="py-16 px-6 md:px-12 lg:px-16"><div class="max-w-7xl mx-auto"><h2 class="text-4xl md:text-5xl font-bold text-ink mb-12">Why Work With Me</h2><div class="grid grid-cols-2 md:grid-cols-4 gap-8"><div class="text-center"><p class="text-5xl font-bold text-primary-readable mb-2">8+</p><p class="text-ink font-semibold">Years Design Experience</p></div><div class="text-center"><p class="text-5xl font-bold text-primary-readable mb-2">5+</p><p class="text-ink font-semibold">Years AI Engineering</p></div><div class="text-center"><p class="text-5xl font-bold text-primary-readable mb-2">40+</p><p class="text-ink font-semibold">Projects Shipped</p></div><div class="text-center"><p class="text-5xl font-bold text-primary-readable mb-2">500K+</p><p class="text-ink font-semibold">Users Impacted</p></div></div></div></section><!-- Professional Summary Section --><section id="professionalsummary" class="py-20 px-6 md:px-12 lg:px-16 bg-primary"><div class="max-w-4xl mx-auto"><h2 class="text-4xl md:text-5xl font-bold text-on-primary mb-8">Professional Summary</h2><p class="text-lg text-on-primary leading-relaxed mb-8">I bridge design and engineering. My background in AI gives me unique insight into complex systems—I design interfaces that make the unintuitive feel natural. I've led design at early-stage startups and enterprise SaaS companies, always focusing on measurable outcomes: user retention, task completion, and business impact. I believe great design is invisible—it solves problems so elegantly users don't notice the craft.</p><a href="/about/" class="inline-block px-8 py-4 bg-on-primary text-primary font-semibold rounded-none hover:bg-accent hover:text-primary transition-colors duration-200">Learn More About Me</a></div></section><!-- Call to Action Section --><section id="calltoaction" class="py-20 px-6 md:px-12 lg:px-16 bg-gray-50"><div class="max-w-3xl mx-auto text-center"><h2 class="text-4xl md:text-5xl font-bold text-ink mb-6">Let's Talk</h2><p class="text-xl text-ink mb-8 leading-relaxed">Whether you're building a new product, redesigning an existing platform, or need design leadership, I'd love to discuss how I can help.</p><a href="/contact_us/" class="inline-block px-8 py-4 bg-primary text-on-primary font-semibold rounded-none hover:bg-secondary transition-colors duration-200">Get in Touch</a></div></section></main><footer class="bg-primary text-on-primary"><div class="max-w-7xl mx-auto px-6 py-12 lg:py-16"><!-- Footer Grid --><div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"><!-- Brand Section --><div class="space-y-4"><h3 class="text-lg font-semibold">Portfolio</h3><p class="text-sm opacity-90">Crafting digital experiences with precision and purpose.</p></div><!-- Navigation Links --><div class="space-y-4"><h4 class="text-sm font-semibold uppercase tracking-wide">Navigation</h4><ul class="space-y-2"><li><a href="/" class="text-sm opacity-90 hover:opacity-100 transition-opacity duration-200">Home</a></li><li><a href="/about/" class="text-sm opacity-90 hover:opacity-100 transition-opacity duration-200">About</a></li><li><a href="/projects/" class="text-sm opacity-90 hover:opacity-100 transition-opacity duration-200">Projects</a></li></ul></div><!-- Contact Info --><div class="space-y-4"><h4 class="text-sm font-semibold uppercase tracking-wide">Contact</h4><ul class="space-y-3"><li class="flex items-start gap-2"><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" aria-hidden="true" class="lucide lucide-mail w-4 h-4 mt-0.5 flex-shrink-0"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg><a href="mailto:hello@example.com" class="text-sm opacity-90 hover:opacity-100 transition-opacity duration-200">hello@example.com</a></li><li class="flex items-start gap-2"><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" aria-hidden="true" class="lucide lucide-phone w-4 h-4 mt-0.5 flex-shrink-0"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg><a href="tel:+1234567890" class="text-sm opacity-90 hover:opacity-100 transition-opacity duration-200">+1 (234) 567-890</a></li><li class="flex items-start gap-2"><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" aria-hidden="true" class="lucide lucide-map-pin w-4 h-4 mt-0.5 flex-shrink-0"><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><span class="text-sm opacity-90">San Francisco, CA</span></li></ul></div><!-- Social Links --><div class="space-y-4"><h4 class="text-sm font-semibold uppercase tracking-wide">Follow</h4><ul class="space-y-2"><li><a href="#" class="text-sm opacity-90 hover:opacity-100 transition-opacity duration-200 inline-flex items-center gap-2"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.39v-1.2h-2.66v8.5h2.66v-4.34c0-.84.63-1.63 1.67-1.63.98 0 1.55.7 1.55 1.63v4.34h2.66M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69-.93 0-1.69.76-1.69 1.69 0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.5H5.5v8.5h2.77z"></path></svg>LinkedIn</a></li><li><a href="#" class="text-sm opacity-90 hover:opacity-100 transition-opacity duration-200 inline-flex items-center gap-2"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>GitHub</a></li><li><a href="#" class="text-sm opacity-90 hover:opacity-100 transition-opacity duration-200 inline-flex items-center gap-2"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2s9 5 20 5a9.5 9.5 0 00-9-5.5c4.75 2.25 7-7 7-7a4.5 4.5 0 00-4.5-4.5z"></path></svg>Twitter</a></li></ul></div></div><!-- Divider --><div class="border-t border-white border-opacity-20 my-8"></div><!-- Footer Bottom --><div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm opacity-75"><p>&copy; 2024 Portfolio. All rights reserved.</p><div class="flex gap-6"><a href="#" class="hover:opacity-100 transition-opacity duration-200">Privacy Policy</a><a href="#" class="hover:opacity-100 transition-opacity duration-200">Terms of Service</a></div></div></div></footer></body></html>