Formatted all pages, added a wip page, make db objects, made all links work
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<?php echo head("Privacy Policy"); ?>
|
||||
<body>
|
||||
<?php echo navbar("0"); ?>
|
||||
<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;">
|
||||
<h2 class="text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6">
|
||||
About Me
|
||||
</h2>
|
||||
</div>
|
||||
<div class="text-white">
|
||||
<h1 class="text-4xl mb-10">Balls:</h1>
|
||||
<h1 class="text-2xl mb-10">
|
||||
Tugged
|
||||
</h1>
|
||||
<h1 class="text-4xl mb-10 mt-10">Cookie?</h1>
|
||||
<h1 class="text-2xl mb-10">
|
||||
Sure
|
||||
</h1>
|
||||
<h1 class="text-4xl mb-10 mt-10">Who? Where? Why? When?</h1>
|
||||
<h1 class="text-2xl mb-10">
|
||||
What?
|
||||
</h1>
|
||||
<h1 class="text-4xl mb-10 mt-10">Why are you named Pizza?</h1>
|
||||
<h1 class="text-2xl mb-10">
|
||||
When I was a young boy I ate the equivalent of a whole pizza at dinner, at that point my family called me "pizza-boy", so a couple days later I made my first online account on Poptropica with the username "pizza2d1" because I thought it would be funny and it stuck with with me until now. That's usually how the story goes until I make up a new one, sometimes with roblox, other times with minecraft
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,198 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Privacy Policy</title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!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>
|
||||
</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-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="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="_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;">
|
||||
<h2 class="text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6">
|
||||
Privacy Policy
|
||||
</h2>
|
||||
|
||||
<h4 data-animate="text" class="text-slate-600 dark:text-neutral-400 text-lg" style="opacity: 1;">
|
||||
|
||||
<p data-animate="text" class="text-slate-600 dark:text-neutral-400 text-lg" style="opacity: 1;">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-white">
|
||||
<h1 class="text-4xl mb-10">Logging</h1>
|
||||
<h1>
|
||||
I do not log any IP's or login credentials that are linked on this website, this website does use porkbun which depends on cloudflare which may log your IP for the purpose of preventing bots
|
||||
</h1>
|
||||
<h1 class="text-4xl mb-10 mt-10">Cookies</h1>
|
||||
<h1>
|
||||
I do not use cookies that are generated on this website or third-party cookies
|
||||
</h1>
|
||||
<h3 class="mt-20">In short, I don't need your stinky data</h3>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,35 @@
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<?php echo head("Privacy Policy"); ?>
|
||||
<body>
|
||||
<?php echo navbar("0"); ?>
|
||||
<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;">
|
||||
<h2 class="text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6">
|
||||
Privacy Policy
|
||||
</h2>
|
||||
</div>
|
||||
<div class="text-white">
|
||||
<h1 class="text-4xl mb-10">Logging</h1>
|
||||
<h1>
|
||||
I do not log any IP's or login credentials that are linked on this website, this website does use porkbun which depends on cloudflare which may log your IP for the purpose of preventing bots
|
||||
</h1>
|
||||
<h1 class="text-4xl mb-10 mt-10">Cookies</h1>
|
||||
<h1>
|
||||
I do not use cookies that are generated on this website or third-party cookies
|
||||
</h1>
|
||||
<h3 class="mt-20">In short, I don't need your stinky data</h3>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
+200
-88
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
?>
|
||||
@@ -1,216 +1,16 @@
|
||||
<?php include_once("includes/all.php"); ?>
|
||||
<?php include_once("includes/main.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 title(); ?>
|
||||
<?php echo main_images(); ?>
|
||||
<?php echo grid(); ?>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- Fuck my chungus life -->
|
||||
+26
@@ -1 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login?</title>
|
||||
</head>
|
||||
<body class="bg-slate-900">
|
||||
<h1>
|
||||
There is no login page, why would you need one?
|
||||
</h1>
|
||||
<br>
|
||||
<h2>
|
||||
"I need to give personal information to this website because there was a colorful button"
|
||||
</h2>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<h3>
|
||||
Why can't we just have a free internet where we don't need to login to anything and just provide services for the sake of it?
|
||||
</h3>
|
||||
<h4>Just the ABILITY to share data from one mile over in just a couple milliseconds is amazing in-of-itself</h4>
|
||||
<h5>Surely enjoying just being able to connect in such a "magical" way would be enough, but instead we have to profit off of it</h5>
|
||||
<h6>Not even profit off when people CHOOSE to pay for the different services that you give them, no, it also has to be getting their data and selling it for pennies</h6>
|
||||
<h6>We truly have lost the whimsy</h6>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
header('Location: /wip');
|
||||
exit();
|
||||
?>
|
||||
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<?php include_once("$dots/includes/projects.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<?php echo head("test"); ?>
|
||||
<body>
|
||||
<?php echo title("Python Website"); ?>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
+6
-156
@@ -3,165 +3,15 @@ $slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<?php include_once("$dots/includes/projects.php"); ?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<?php echo head("Home"); ?>
|
||||
<?php echo head("Projects"); ?>
|
||||
<body class="dark:bg-neutral-950">
|
||||
<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>
|
||||
<div class="relative dark:bg-neutral-950 text-justify px-130 content-center mt-20">
|
||||
<h1 class="text-4xl text-slate-600 dark:text-neutral-400 mb-8" data-animate="text" style="opacity: 1;">
|
||||
{PROJECT}
|
||||
</h1>
|
||||
<h1 class="text-lg text-slate-600 dark:text-neutral-400 mb-12" data-animate="text" style="opacity: 1;">
|
||||
{CONTENT}
|
||||
</h1>
|
||||
<img src="/assets/img/projects/pifetch/pifetch_showcase.gif" class="h-120">
|
||||
</div>
|
||||
<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>
|
||||
<?php echo navbar("2"); ?>
|
||||
<?php echo main_title(); ?>
|
||||
<?php echo image_project_list(); ?>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
header('Location: /wip');
|
||||
exit();
|
||||
?>
|
||||
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<?php include_once("$dots/includes/projects.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<?php echo head("test"); ?>
|
||||
<body>
|
||||
<?php echo title("Python Website"); ?>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
header('Location: /wip');
|
||||
exit();
|
||||
?>
|
||||
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<?php include_once("$dots/includes/projects.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<?php echo head("test"); ?>
|
||||
<body>
|
||||
<?php echo title("Python Website"); ?>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,12 +1,19 @@
|
||||
<?php
|
||||
header('Location: /wip');
|
||||
exit();
|
||||
?>
|
||||
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<?php include_once("$dots/includes/projects.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<?php echo head("test"); ?>
|
||||
<body>
|
||||
<?php echo title("Python Website"); ?>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
header('Location: /wip');
|
||||
exit();
|
||||
?>
|
||||
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<?php include_once("$dots/includes/projects.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<?php echo head("test"); ?>
|
||||
<body>
|
||||
<?php echo title("Python Website"); ?>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
header('Location: /wip');
|
||||
exit();
|
||||
?>
|
||||
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<?php include_once("$dots/includes/projects.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<?php echo head("test"); ?>
|
||||
<body>
|
||||
<?php echo title("Python Website"); ?>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,537 +0,0 @@
|
||||
<!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>
|
||||
</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);">
|
||||
<button data-motion="button" onclick="document.documentElement.classList.toggle('dark')" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<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;">
|
||||
<span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Embrace</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">challenges,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">find</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">inspiration</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">in</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">everyday</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">moments,</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);">transform</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">vision</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">into</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">reality.</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Discover</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">unique</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">creative</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">voice.</span>
|
||||
</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="https://www.happylizard.me/contact.html" 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-5">
|
||||
<!-- 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);">
|
||||
<img data-motion="image" src="https://images.unsplash.com/photo-1760071744047-5542cbfda184?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
||||
</div>
|
||||
<div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<img data-motion="image" src="https://images.unsplash.com/photo-1758613654472-7d0f611c1b82?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Design workspace" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
||||
</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="https://images.unsplash.com/photo-1758613654800-26e7f2706fbf?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" 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-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="https://www.happylizard.me/project_page/projects/?project_number=1">
|
||||
<img data-motion="image" src="/assets/img/projects/laptop_server/laptop_setup.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);">
|
||||
</a>
|
||||
</div>
|
||||
<div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<img data-motion="image" src="https://images.unsplash.com/photo-1758613653231-bae4e1131dde?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw1fHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12 pt-10 border-t border-slate-200 dark:border-neutral-800">
|
||||
<div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">10K+</span>
|
||||
<span class="text-slate-500 dark:text-neutral-400 text-sm">Creators</span>
|
||||
</div>
|
||||
<div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<span class="text-3xl font-bold text-slate-900 dark:text-white block">500+</span>
|
||||
<span class="text-slate-500 dark:text-neutral-400 text-sm">Workshops</span>
|
||||
</div>
|
||||
<div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<span class="text-3xl font-bold text-slate-900 dark:text-white block">95%</span>
|
||||
<span class="text-slate-500 dark:text-neutral-400 text-sm">Satisfaction</span>
|
||||
</div>
|
||||
<div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">24/7</span>
|
||||
<span class="text-slate-500 dark:text-neutral-400 text-sm">Support</span>
|
||||
</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;">
|
||||
<span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase mb-4 block" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">Developer Tools</span>
|
||||
<h2 class="text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6">
|
||||
<span data-animate="heading" style="opacity: 1;"><span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Everything</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">You</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Need</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">to</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Build</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Faster</span></span>
|
||||
</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>
|
||||
<section id="_testimonial_centered_quote_avatars_v6_t27_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
|
||||
<style>
|
||||
.carousel-container { overflow: hidden; }
|
||||
.carousel-track { display: flex; transition: transform 0.5s ease-out; }
|
||||
</style>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<!-- Carousel -->
|
||||
<div class="relative">
|
||||
<div class="carousel-container">
|
||||
<div data-carousel="track" class="carousel-track">
|
||||
<!-- Slide 1 -->
|
||||
<div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
||||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
|
||||
</svg>
|
||||
<p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
|
||||
"The platform transformed how we approach customer feedback. Within weeks, we saw a 40% improvement in response times and our NPS score jumped significantly."
|
||||
</p>
|
||||
<!-- Avatar Row -->
|
||||
<div class="flex items-center justify-center gap-6">
|
||||
<img data-motion="image" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&auto=format&fit=crop&q=80" alt="Thomas Wright" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
||||
<div class="text-left">
|
||||
<h5 class="text-lg font-semibold text-slate-900 dark:text-white">Thomas Wright</h5>
|
||||
<p class="text-indigo-600 dark:text-indigo-400 text-sm">VP of Operations, TechFlow</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2 -->
|
||||
<div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
||||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
|
||||
</svg>
|
||||
<p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
|
||||
"We've tried many solutions before, but nothing comes close to this level of integration and ease of use. Our team adopted it instantly and productivity soared."
|
||||
</p>
|
||||
<div class="flex items-center justify-center gap-6">
|
||||
<img data-motion="image" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&auto=format&fit=crop&q=80" alt="Rachel Kim" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
||||
<div class="text-left">
|
||||
<h5 class="text-lg font-semibold text-slate-900 dark:text-white">Rachel Kim</h5>
|
||||
<p class="text-indigo-600 dark:text-indigo-400 text-sm">Head of Product, Innovate Labs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3 -->
|
||||
<div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
||||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
|
||||
</svg>
|
||||
<p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
|
||||
"The analytics dashboard alone is worth the investment. We now have real-time insights that help us make data-driven decisions every single day."
|
||||
</p>
|
||||
<div class="flex items-center justify-center gap-6">
|
||||
<img data-motion="image" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&auto=format&fit=crop&q=80" alt="David Chen" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
|
||||
<div class="text-left">
|
||||
<h5 class="text-lg font-semibold text-slate-900 dark:text-white">David Chen</h5>
|
||||
<p class="text-indigo-600 dark:text-indigo-400 text-sm">CTO, DataStream Inc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Dots & Arrows -->
|
||||
<div class="flex items-center justify-center gap-6 mt-12">
|
||||
<button data-motion="button" data-carousel="prev" type="button" aria-label="Previous testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex gap-2">
|
||||
<button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-indigo-500" aria-label="Go to slide 1" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
|
||||
<button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
|
||||
<button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
|
||||
</div>
|
||||
<button data-motion="button" data-carousel="next" type="button" aria-label="Next testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Carousel Script -->
|
||||
<script>
|
||||
(function() {
|
||||
function initCarousel() {
|
||||
const section = document.getElementById('_testimonial_centered_quote_avatars_v6_t27_001');
|
||||
if (!section) return;
|
||||
|
||||
const container = section.querySelector('[data-carousel="container"]') || section.querySelector('.carousel-container');
|
||||
const prevBtn = section.querySelector('[data-carousel="prev"]') || section.querySelector('.carousel-prev');
|
||||
const nextBtn = section.querySelector('[data-carousel="next"]') || section.querySelector('.carousel-next');
|
||||
|
||||
if (!container || !prevBtn || !nextBtn) return;
|
||||
|
||||
// Clone buttons to remove existing listeners
|
||||
const newPrevBtn = prevBtn.cloneNode(true);
|
||||
const newNextBtn = nextBtn.cloneNode(true);
|
||||
prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
|
||||
nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
|
||||
|
||||
let currentIndex = 0;
|
||||
const scrollAmount = 320;
|
||||
|
||||
function updateCarousel(direction) {
|
||||
const maxScroll = container.scrollWidth - container.parentElement.offsetWidth;
|
||||
|
||||
if (direction === 'next') {
|
||||
currentIndex = Math.min(currentIndex + scrollAmount, maxScroll);
|
||||
} else {
|
||||
currentIndex = Math.max(currentIndex - scrollAmount, 0);
|
||||
}
|
||||
|
||||
container.style.transform = 'translateX(-' + currentIndex + 'px)';
|
||||
}
|
||||
|
||||
newPrevBtn.addEventListener('click', () => updateCarousel('prev'));
|
||||
newNextBtn.addEventListener('click', () => updateCarousel('next'));
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initCarousel);
|
||||
} else {
|
||||
initCarousel();
|
||||
}
|
||||
window.addEventListener('load', initCarousel);
|
||||
})();
|
||||
</script>
|
||||
</section>
|
||||
<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);">
|
||||
Award-winning architecture studio creating spaces that inspire and endure for generations.
|
||||
</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="mailto:hello@archway.studio" 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>
|
||||
hello@archway.studio
|
||||
</a>
|
||||
<a href="tel:+1234567890" 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 (234) 567-890
|
||||
</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">Company</h4>
|
||||
<ul class="flex flex-col gap-3">
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About Us</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Our Team</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Careers</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Press</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="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Residential</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Commercial</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Interior Design</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Consulting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="lg:col-span-3">
|
||||
<div data-motion="cta" class="flex flex-col gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<h4 class="text-lg font-semibold text-slate-900 dark:text-white">Ready to start your project?</h4>
|
||||
<p class="text-slate-600 dark:text-neutral-400">Let's discuss how we can bring your vision to life.</p>
|
||||
<a data-motion="button" href="#" class="inline-flex items-center justify-center gap-2 px-6 py-4 bg-indigo-500 hover:bg-indigo-600 text-white font-semibold rounded-xl transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
Schedule Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="h-px bg-slate-200 dark:bg-neutral-800"></div>
|
||||
|
||||
<!-- Bottom Section -->
|
||||
<div class="pt-10 flex flex-col lg:flex-row items-center justify-between gap-6">
|
||||
<!-- Copyright -->
|
||||
<p data-motion="copyright" class="text-sm text-slate-500 dark:text-neutral-400" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
© 2026 Archway Studio. All rights reserved.
|
||||
</p>
|
||||
|
||||
<!-- Legal Links -->
|
||||
<ul data-motion="legal" class="flex flex-wrap items-center gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
|
||||
<li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Terms of Service</a></li>
|
||||
<li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Cookie Policy</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Social Icons -->
|
||||
<div data-motion="social" class="flex items-center gap-3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="#" aria-label="Instagram" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="Pinterest" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="LinkedIn" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
header('Location: https://pizza2d1.github.io/server_links');
|
||||
exit();
|
||||
?>
|
||||
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<?php include_once("$dots/includes/projects.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<?php echo head("test"); ?>
|
||||
<body>
|
||||
<?php echo title("Python Website"); ?>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,238 +0,0 @@
|
||||
<!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>
|
||||
</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-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="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-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="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);">
|
||||
<button data-motion="button" onclick="document.documentElement.classList.toggle('dark')" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<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">Contact Page</h1>
|
||||
<p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text" style="opacity: 1;">
|
||||
Ask me about anything, I might not answer, but thats even more reason to not be nervous to send a message
|
||||
</p>
|
||||
|
||||
<!-- Asymmetric Image Grid -->
|
||||
<div class="grid lg:grid-cols-6 gap-5">
|
||||
<!-- 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-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS"><img data-motion="image" src="/assets/img/contact_page/signal.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
|
||||
</div>
|
||||
<div data-motion="card" class="rounded-3xl overflow-hidden h-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="https://discordapp.com/users/714918826831118436"><img data-motion="image" src="/assets/img/contact_page/discord.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></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-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="mailto:pizza2d1@proton.me"><img data-motion="image" src="/assets/img/contact_page/proton.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
|
||||
</div>
|
||||
<div data-motion="card" class="rounded-3xl overflow-hidden h-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="tel:+3852780007"><img data-motion="image" src="/assets/img/contact_page/firefox_relay.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<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);">
|
||||
Award-winning architecture studio creating spaces that inspire and endure for generations.
|
||||
</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="mailto:hello@archway.studio" 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>
|
||||
hello@archway.studio
|
||||
</a>
|
||||
<a href="tel:+1234567890" 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 (234) 567-890
|
||||
</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">Company</h4>
|
||||
<ul class="flex flex-col gap-3">
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About Us</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Our Team</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Careers</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Press</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="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Residential</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Commercial</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Interior Design</a></li>
|
||||
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Consulting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="lg:col-span-3">
|
||||
<div data-motion="cta" class="flex flex-col gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<h4 class="text-lg font-semibold text-slate-900 dark:text-white">Ready to start your project?</h4>
|
||||
<p class="text-slate-600 dark:text-neutral-400">Let's discuss how we can bring your vision to life.</p>
|
||||
<a data-motion="button" href="#" class="inline-flex items-center justify-center gap-2 px-6 py-4 bg-indigo-500 hover:bg-indigo-600 text-white font-semibold rounded-xl transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
Schedule Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="h-px bg-slate-200 dark:bg-neutral-800"></div>
|
||||
|
||||
<!-- Bottom Section -->
|
||||
<div class="pt-10 flex flex-col lg:flex-row items-center justify-between gap-6">
|
||||
<!-- Copyright -->
|
||||
<p data-motion="copyright" class="text-sm text-slate-500 dark:text-neutral-400" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
© 2026 Archway Studio. All rights reserved.
|
||||
</p>
|
||||
|
||||
<!-- Legal Links -->
|
||||
<ul data-motion="legal" class="flex flex-wrap items-center gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
|
||||
<li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Terms of Service</a></li>
|
||||
<li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Cookie Policy</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Social Icons -->
|
||||
<div data-motion="social" class="flex items-center gap-3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="#" aria-label="Instagram" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="Pinterest" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="LinkedIn" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<?php $srv_root = __DIR__; $dots = "";
|
||||
$slash_count = substr_count($srv_root, '/');
|
||||
for ($i = 1; $i < $slash_count; $i++) {$dots .= "../";};?>
|
||||
|
||||
<?php include_once("$dots/includes/all.php"); ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<?php echo head("Socials") ?>
|
||||
<body>
|
||||
<?php echo navbar("5"); ?>
|
||||
<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">Contact Page</h1>
|
||||
<p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text" style="opacity: 1;">
|
||||
Ask me about anything, I might not answer, but thats even more reason to not be nervous to send a message
|
||||
</p>
|
||||
|
||||
<!-- Asymmetric Image Grid -->
|
||||
<div class="grid lg:grid-cols-6 gap-5">
|
||||
<!-- 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-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS"><img data-motion="image" src="/assets/img/contact_page/signal.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
|
||||
</div>
|
||||
<div data-motion="card" class="rounded-3xl overflow-hidden h-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="https://discordapp.com/users/714918826831118436"><img data-motion="image" src="/assets/img/contact_page/discord.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></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-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="mailto:pizza2d1@proton.me"><img data-motion="image" src="/assets/img/contact_page/proton.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
|
||||
</div>
|
||||
<div data-motion="card" class="rounded-3xl overflow-hidden h-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
|
||||
<a href="tel:+3852780007"><img data-motion="image" src="/assets/img/contact_page/firefox_relay.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<?php include_once("../includes/all.php"); ?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<?php echo head("W.I.P. Redirect"); ?>
|
||||
<body>
|
||||
<?php echo navbar("0"); ?>
|
||||
|
||||
<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'>Sorry!</h1>
|
||||
<p class='text-2xl text-slate-600 dark:text-neutral-400 mb-8' data-animate='text' style='opacity: 1;'>
|
||||
The page you were trying to access is currently a work in progress because Pizza is a big dumb dumb and decided to host a website before it was fully up
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<?php echo footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- Fuck my chungus life -->
|
||||
<!-- -->
|
||||
<!-- Why is webdev so hard, why are there so many standards and ways that people want things to be done -->
|
||||
<!-- The hard part isn't even USING the frameworks, it's setting them up -->
|
||||
<!-- -->
|
||||
<!-- I understand why people stick with what they know how to use now, the pain of switching to a new way of setting things up is so annoying -->
|
||||
Reference in New Issue
Block a user