216 lines
17 KiB
PHP
216 lines
17 KiB
PHP
<?php include_once("includes/all.php"); ?>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<?php echo head("Home"); ?>
|
|
<body>
|
|
<?php echo navbar("1"); ?>
|
|
<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 html 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>
|
|
<?php echo footer(); ?>
|
|
</body>
|
|
</html>
|