364 lines
30 KiB
Plaintext
364 lines
30 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<title>Home</title>
|
|
</head>
|
|
<body>
|
|
<header id="_header_icon_nav_h10_001" class="relative bg-white dark:bg-neutral-950 border-b border-slate-100 dark:border-neutral-900">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-20">
|
|
<!-- Logo -->
|
|
<a data-motion="logo" href="/" class="flex items-center" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-8" alt="Logo">
|
|
</a>
|
|
|
|
<!-- Icon Navigation -->
|
|
<nav data-motion="nav" class="hidden lg:flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<a href="/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
|
|
<div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
|
|
Home
|
|
</span>
|
|
</a>
|
|
|
|
<a href="/projects/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
|
|
<div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
|
|
Projects
|
|
</span>
|
|
</a>
|
|
|
|
<a href="/services/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
|
|
<div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
|
|
Services
|
|
</span>
|
|
</a>
|
|
|
|
<a href="/certificates/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
|
|
<div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
|
|
Certificates
|
|
</span>
|
|
</a>
|
|
|
|
<a href="/socials/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
|
|
<div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
|
|
Socials
|
|
</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Right Actions -->
|
|
<div data-motion="actions" class="flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
|
|
<a href="/login.html" class="h-10 px-5 bg-linear-to-r from-indigo-500 to-indigo-600 text-white text-sm font-semibold rounded-xl hover:shadow-lg hover:shadow-indigo-500/25 transition-all flex items-center gap-2">
|
|
Login
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section id="_hero_creative_journey_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Centered Header -->
|
|
<div class="text-center max-w-3xl mx-auto mb-16" data-motion="hero" style="opacity: 1;">
|
|
<h1 class="text-3xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6">Pizza2d1's Project Showcase</h1>
|
|
<p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text" style="opacity: 1;">
|
|
We suck big dick because we can
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<a href="https://pizza2d1.github.io/server_links" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
Links to services
|
|
</a>
|
|
<a href="https://github.com/pizza2d1" data-motion="button" class="px-6 py-3 bg-orange-100 dark:bg-orange-900/20 hover:bg-orange-200 dark:hover:bg-orange-900/30 transition-colors rounded-full text-orange-700 dark:text-orange-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
Github
|
|
</a>
|
|
<a href="https://gitea.happylizard.me" data-motion="button" class="px-6 py-3 bg-green-600 hover:bg-green-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
Gitea
|
|
</a>
|
|
<a href="/socials/" data-motion="button" class="px-6 py-3 bg-indigo-100 dark:bg-indigo-900/30 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-colors rounded-full text-indigo-700 dark:text-indigo-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
Contact Me!
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Asymmetric Image Grid -->
|
|
<div class="grid lg:grid-cols-12 gap-2">
|
|
<!-- Left Column - 2 stacked images -->
|
|
<div class="lg:col-span-3 flex flex-col gap-5">
|
|
<div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<a href="/projects/operating_system/">
|
|
<img data-motion="image" src="/assets/img/projects/os_making/qemu1.png" alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6 right-6">
|
|
<h3 class="text-white text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">Building an OS</h3>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<a href="/projects/python_website/">
|
|
<img data-motion="image" src="/assets/img/projects/python_website/python_website.png" alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6 right-6">
|
|
<h3 style="color: rgb(0, 191, 10)" class="text-black text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,0,1)]">Python framework from scratch</h3>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center - Large featured image -->
|
|
<div class="lg:col-span-6" data-motion="card" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<div class="relative rounded-3xl overflow-hidden h-80 lg:h-full group">
|
|
<img data-motion="image" src="/assets/img/projects/laptop_server/laptop_setup.jpg" alt="Creative brainstorming session" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6 right-6">
|
|
<h3 class="text-white text-xl font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">My server setup</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center - Large featured image -->
|
|
<!-- <div class="lg:col-span-6" data-motion="card" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<div class="relative rounded-3xl overflow-hidden h-80 lg:h-full group">
|
|
<img data-motion="image" src="/assets/img/projects/laptop_server/laptop_setup.jpg" alt="Creative brainstorming session" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6 right-6">
|
|
<span data-motion="badge" class="text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1 block" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">Featured</span>
|
|
<h3 class="text-white text-xl font-bold">The Creative Process</h3>
|
|
<p class="text-slate-300 text-sm mt-1">Where ideas come to life</p>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- Right Column - 2 stacked images -->
|
|
<div class="lg:col-span-3 flex flex-col gap-5">
|
|
<div data-motion="card" class="rounded-3xl overflow-hidden h-72" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<a href="/projects/arch_chromebook/">
|
|
<img data-motion="image" src="/assets/img/projects/arch_chromebook/arch_chromebook.jpg" alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6 right-6">
|
|
<h3 class="text-white text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">Arch on chromebook</h3>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div data-motion="card" class="rounded-3xl overflow-hidden h-40" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<a href="/projects/pifetch/">
|
|
<img data-motion="image" src="/assets/img/projects/pifetch/pifetch_showcase.gif" alt="Creative workshop" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6 right-6">
|
|
<h3 class="text-white text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">Pifetch (neofetch alternative)</h3>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
<section id="_features_minimal_icons_v6_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Centered Header -->
|
|
<div class="text-center max-w-3xl mx-auto mb-16" data-motion="header" style="opacity: 1;">
|
|
<!-- <h1 class="text-indigo-400 text-l font-bold">Balls</h1> -->
|
|
<h2 class="text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6">
|
|
Services
|
|
</h2>
|
|
<p data-animate="text" class="text-slate-600 dark:text-neutral-400 text-lg" style="opacity: 1;">
|
|
<span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">A</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">complete</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">developer</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">toolkit</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">with</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">powerful</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">APIs,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">comprehensive</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">documentation,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">and</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">enterprise-grade</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">infrastructure.</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bento Grid Features -->
|
|
<div class="grid lg:grid-cols-3 gap-5">
|
|
<!-- Large Feature Card -->
|
|
<div data-motion="card" class="lg:col-span-2 p-8 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<div class="grid sm:grid-cols-2 gap-8">
|
|
<div>
|
|
<div data-motion="icon" class="w-14 h-14 bg-indigo-100 dark:bg-indigo-900/40 rounded-2xl flex items-center justify-center mb-6" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-7 h-7 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-slate-900 dark:text-white text-xl font-semibold mb-3">Modular Architecture</h3>
|
|
<p class="text-slate-600 dark:text-neutral-400 text-base">
|
|
Build with composable modules that scale independently and integrate seamlessly with your existing stack.
|
|
</p>
|
|
</div>
|
|
<div class="rounded-2xl overflow-hidden">
|
|
<img data-motion="image" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&auto=format&fit=crop&q=80" alt="Code on screen" class="w-full h-48 object-cover" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accent Card -->
|
|
<div data-motion="card" class="p-8 bg-indigo-600 rounded-3xl flex flex-col justify-between" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<div>
|
|
<div data-motion="icon" class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-6" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-white text-xl font-semibold mb-3">Type Safety</h3>
|
|
<p class="text-indigo-100 text-base">
|
|
Full TypeScript support with auto-generated types for bulletproof development.
|
|
</p>
|
|
</div>
|
|
<a data-motion="button" href="#" class="inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
Learn More
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Small Feature Cards -->
|
|
<div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">REST & GraphQL</h3>
|
|
<p class="text-slate-600 dark:text-neutral-400 text-sm">
|
|
Choose your preferred API style with full support for both endpoints.
|
|
</p>
|
|
</div>
|
|
|
|
<div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">Rich Documentation</h3>
|
|
<p class="text-slate-600 dark:text-neutral-400 text-sm">
|
|
Comprehensive guides and tutorials to get you started quickly.
|
|
</p>
|
|
</div>
|
|
|
|
<div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">Plugin System</h3>
|
|
<p class="text-slate-600 dark:text-neutral-400 text-sm">
|
|
Extend functionality with community and official plugins.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- CTA Card -->
|
|
<div data-motion="card" class="lg:col-span-2 p-8 bg-slate-900 dark:bg-neutral-800 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<div>
|
|
<h3 class="text-white text-xl font-semibold mb-2">24/7 Enterprise Support</h3>
|
|
<p class="text-slate-400 text-base">Dedicated engineers with guaranteed response times for your team.</p>
|
|
</div>
|
|
<a data-motion="button" href="#" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold whitespace-nowrap" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
Contact Sales
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<style>
|
|
.carousel-container { overflow: hidden; }
|
|
.carousel-track { display: flex; transition: transform 0.5s ease-out; }
|
|
</style>
|
|
<footer id="_footer_nav_contact_button_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Main Content Grid -->
|
|
<div class="grid lg:grid-cols-12 gap-12 pb-16">
|
|
<!-- Logo & Contact Info -->
|
|
<div class="lg:col-span-5 flex flex-col gap-8">
|
|
<!-- <a data-motion="logo" href="#" class="flex items-center w-fit" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
|
<img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-10" alt="Logo">
|
|
</a> -->
|
|
|
|
<p data-motion="description" class="text-slate-600 dark:text-neutral-400 text-lg leading-relaxed max-w-sm" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
Taking inspiration from transgender CS students since 2022
|
|
</p>
|
|
|
|
<!-- Contact Card -->
|
|
<div data-motion="contact-card" class="p-6 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<h4 class="text-sm font-semibold text-indigo-700 dark:text-indigo-400 uppercase tracking-wide mb-4">Get in Touch</h4>
|
|
<div class="flex flex-col gap-3">
|
|
<a href="https://discordapp.com/users/714918826831118436" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
|
|
<svg class="w-5 h-5 text-indigo-500" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z" fill="#000000"/>
|
|
</svg>
|
|
Discord
|
|
</a>
|
|
<a href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
|
|
<svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
Signal
|
|
</a>
|
|
<a href="mailto:pizza2d1@proton.me" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
|
|
<svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
|
|
</svg>
|
|
pizza2d1@proton.me
|
|
</a>
|
|
<a href="tel:+3852780007" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
|
|
<svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
+1 (385) 287-0007
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Links -->
|
|
<div class="lg:col-span-4">
|
|
<nav data-motion="nav" class="grid grid-cols-2 gap-8" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Extras</h4>
|
|
<ul class="flex flex-col gap-3">
|
|
<li><a href="/extras/about_me.html" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About Me</a></li>
|
|
<li><a href="/extras/privacy_policy.html" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
|
|
<li><a href="https://pizza2d1.github.io/server_news" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Server News</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Services</h4>
|
|
<ul class="flex flex-col gap-3">
|
|
<li><a href="https://jellyfin.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Jellyfin</a></li>
|
|
<li><a href="https://copyparty.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Copyparty</a></li>
|
|
<li><a href="https://gitea.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Gitea</a></li>
|
|
<li><a href="https://convert.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Any file conversion tool (Portal Runner)</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |