Formatted all pages, added a wip page, make db objects, made all links work
This commit is contained in:
+201
-89
@@ -8,6 +8,204 @@ function head($title) {
|
||||
<title>" . $title . "</title>
|
||||
</head>";
|
||||
}
|
||||
|
||||
function navbar($highlighted_box) {
|
||||
|
||||
$selected = "
|
||||
<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'>
|
||||
";
|
||||
$unselected = "
|
||||
<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'>
|
||||
";
|
||||
|
||||
return "
|
||||
<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='/pizza-man2.png' ln-logo='' class='h-18' 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'>
|
||||
" . ($highlighted_box == 1 ? $selected : $unselected) . "
|
||||
<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'>
|
||||
" . ($highlighted_box == 2 ? $selected : $unselected) . "
|
||||
<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='https://pizza2d1.github.io/server_links' 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'>
|
||||
" . ($highlighted_box == 3 ? $selected : $unselected) . "
|
||||
<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='/wip' 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'>
|
||||
" . ($highlighted_box == 4 ? $selected : $unselected) . "
|
||||
<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'>
|
||||
" . ($highlighted_box == 5 ? $selected : $unselected) . "
|
||||
<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>
|
||||
";
|
||||
}
|
||||
|
||||
function grid() {
|
||||
return "
|
||||
<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>
|
||||
";
|
||||
}
|
||||
|
||||
function footer() {
|
||||
return "
|
||||
<footer id='_footer_nav_contact_button_v6_001' class='py-20 sm:py-24 bg-white dark:bg-neutral-950'>
|
||||
@@ -62,8 +260,8 @@ function footer() {
|
||||
<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='/extras/about_me' 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' 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>
|
||||
@@ -83,92 +281,6 @@ function footer() {
|
||||
</footer>";
|
||||
}
|
||||
|
||||
function navbar($highlighted_box) {
|
||||
|
||||
$selected = "
|
||||
<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'>
|
||||
";
|
||||
$unselected = "
|
||||
<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'>
|
||||
";
|
||||
|
||||
return "
|
||||
<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'>
|
||||
" . ($highlighted_box == 1 ? $selected : $unselected) . "
|
||||
<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'>
|
||||
" . ($highlighted_box == 2 ? $selected : $unselected) . "
|
||||
<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'>
|
||||
" . ($highlighted_box == 3 ? $selected : $unselected) . "
|
||||
<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'>
|
||||
" . ($highlighted_box == 4 ? $selected : $unselected) . "
|
||||
<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'>
|
||||
" . ($highlighted_box == 5 ? $selected : $unselected) . "
|
||||
<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>
|
||||
";
|
||||
}
|
||||
|
||||
function winamp() {
|
||||
return "
|
||||
<div id='winamp-container'></div>
|
||||
@@ -179,4 +291,4 @@ function winamp() {
|
||||
function create_profile_dirs() {
|
||||
if (!is_dir("/account_uploads/".$_SESSION['username']."_uploads/")) mkdir("/account_uploads/".$_SESSION['username']."_uploads/", 0766);
|
||||
}
|
||||
?>
|
||||
?>
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
<?php
|
||||
include_once("vars.php");
|
||||
function title() {
|
||||
return "
|
||||
<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' 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>
|
||||
</section>
|
||||
";
|
||||
}
|
||||
function main_images() {
|
||||
$project_object_list = get_project_data();
|
||||
return "
|
||||
<section id='_hero_creative_journey_v6_001' class='pu-12 pb-12 bg-white dark:bg-neutral-950'>
|
||||
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
|
||||
<!-- Asymmetric Image Grid -->
|
||||
<div class='grid lg:grid-cols-12 gap-2'>
|
||||
<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='". $project_object_list[2]->link ."'>
|
||||
<img data-motion='image' src='" . $project_object_list[2]->image . "' 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)]'>". $project_object_list[2]->text ."</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='". $project_object_list[3]->link ."'>
|
||||
<img data-motion='image' src='" . $project_object_list[3]->image . "' 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 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)]'>". $project_object_list[3]->text ."</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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'>
|
||||
<a href='". $project_object_list[0]->link ."'><img data-motion='image' src='" . $project_object_list[0]->image . "' 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)]'>". $project_object_list[0]->text ."</h3>
|
||||
</div>
|
||||
</a>
|
||||
</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='". $project_object_list[5]->link ."'>
|
||||
<img data-motion='image' src='". $project_object_list[5]->image ."' 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)]'>". $project_object_list[5]->text ."</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='". $project_object_list[6]->link ."'>
|
||||
<img data-motion='image' src='". $project_object_list[6]->image ."' 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)]'>". $project_object_list[6]->text ."</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
";
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,122 @@
|
||||
<?php
|
||||
include_once("vars.php");
|
||||
function main_title() {
|
||||
return "
|
||||
<section id='_hero_creative_journey_v6_001' class='py-5 sm:py-6 bg-white dark:bg-neutral-950'>
|
||||
<!-- Centered Header -->
|
||||
<div class='text-center max-w-3xl mx-auto' 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'>Project Showcase</h1>
|
||||
<div class='flex flex-wrap justify-center gap-4'>
|
||||
<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>
|
||||
</section>";
|
||||
}
|
||||
|
||||
function title($title) {
|
||||
return "
|
||||
<section id='_hero_creative_journey_v6_001' class='py-5 sm:py-6 bg-white dark:bg-neutral-950'>
|
||||
<div class='text-center max-w-3xl mx-auto' 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'>". $title ."</h1>
|
||||
</div>
|
||||
</section>";
|
||||
}
|
||||
|
||||
function image_project_list() {
|
||||
$project_object_list = get_project_data();
|
||||
return "
|
||||
<section id='_hero_creative_journey_v6_001' class='py-10 pb-12 bg-white dark:bg-neutral-950'>
|
||||
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
|
||||
<!-- Asymmetric Image Grid -->
|
||||
<div class='grid lg:grid-cols-12 gap-2'>
|
||||
|
||||
<!-- 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'>
|
||||
<a href='". $project_object_list[0]->link ."'><img data-motion='image' src='" . $project_object_list[0]->image . "' 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)]'>". $project_object_list[0]->text ."</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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'>
|
||||
<a href='". $project_object_list[1]->link ."'><img data-motion='image' src='" . $project_object_list[1]->image . "' 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)]'>". $project_object_list[1]->text ."</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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='". $project_object_list[2]->link ."'>
|
||||
<img data-motion='image' src='" . $project_object_list[2]->image . "' 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)]'>". $project_object_list[2]->text ."</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='". $project_object_list[3]->link ."'>
|
||||
<img data-motion='image' src='" . $project_object_list[3]->image . "' 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 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)]'>". $project_object_list[3]->text ."</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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'>
|
||||
<a href='". $project_object_list[4]->link ."'><img data-motion='image' src='" . $project_object_list[4]->image . "' 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)]'>". $project_object_list[4]->text ."</h3>
|
||||
</div>
|
||||
</a>
|
||||
</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='". $project_object_list[5]->link ."'>
|
||||
<img data-motion='image' src='". $project_object_list[5]->image ."' 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)]'>". $project_object_list[5]->text ."</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='". $project_object_list[6]->link ."'>
|
||||
<img data-motion='image' src='". $project_object_list[6]->image ."' 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)]'>". $project_object_list[6]->text ."</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
";
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,60 @@
|
||||
<?php
|
||||
class project_info {
|
||||
public $image;
|
||||
public $link;
|
||||
public $text;
|
||||
|
||||
function __construct($image, $link, $text) {
|
||||
$this->image = $image;
|
||||
$this->link = $link;
|
||||
$this->text = $text;
|
||||
}
|
||||
}
|
||||
|
||||
function get_project_data() {
|
||||
$project_object_list = [
|
||||
new project_info(
|
||||
# Image
|
||||
"/assets/img/projects/laptop_server/laptop_setup.jpg",
|
||||
# Href link
|
||||
"/projects/server_setup",
|
||||
# Text Description
|
||||
"Server Setup"
|
||||
),
|
||||
new project_info(
|
||||
"",
|
||||
"/projects/radmod",
|
||||
"Radio Modem"
|
||||
),
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
new project_info(
|
||||
"/assets/img/projects/os_making/qemu1.png",
|
||||
"/projects/operating_system",
|
||||
"OS making"
|
||||
),
|
||||
new project_info(
|
||||
"/assets/img/projects/python_website/python_website.png",
|
||||
"/projects/python_website",
|
||||
"Python HTML framework from scratch"
|
||||
),
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
new project_info(
|
||||
"",
|
||||
"/wip",
|
||||
"Idk what to put here"
|
||||
),
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
new project_info(
|
||||
"/assets/img/projects/arch_chromebook/arch_chromebook.jpg",
|
||||
"/projects/arch_chromebook",
|
||||
"Arch on a Chromebook"
|
||||
),
|
||||
new project_info(
|
||||
"/assets/img/projects/pifetch/pifetch_showcase.gif",
|
||||
"/projects/pifetch",
|
||||
"Pifetch (neofetch alternative)"
|
||||
)
|
||||
];
|
||||
return $project_object_list;
|
||||
}
|
||||
?>
|
||||
Reference in New Issue
Block a user