Made a whoopsie
This commit is contained in:
+3
-172
@@ -98,9 +98,11 @@ function grid() {
|
|||||||
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
|
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
|
||||||
<!-- Centered Header -->
|
<!-- Centered Header -->
|
||||||
<div class='text-center max-w-3xl mx-auto mb-16' data-motion='header' style='opacity: 1;'>
|
<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'>
|
<a href='/services'>
|
||||||
|
<h2 class='text-green-700 dark:text-green-500 text-4xl sm:text-5xl font-bold mb-6' style='text-decoration: underline'>
|
||||||
Services
|
Services
|
||||||
</h2>
|
</h2>
|
||||||
|
</a>
|
||||||
<div id='content'>
|
<div id='content'>
|
||||||
<p 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;'>
|
||||||
A list of just SOME of the services that are available on the website FOR FREE (if you want accounts you need to contact me) <a href='/socials'>Contact Page</a>
|
A list of just SOME of the services that are available on the website FOR FREE (if you want accounts you need to contact me) <a href='/socials'>Contact Page</a>
|
||||||
@@ -250,177 +252,6 @@ function grid() {
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-10 p-20'>
|
|
||||||
<!-- Divider -->
|
|
||||||
<div class='h-3 bg-slate-200 dark:bg-neutral-800'></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<div id='content'>
|
|
||||||
<p data-animate='text' class='text-slate-600 dark:text-neutral-400 text-lg' style='opacity: 1;'>
|
|
||||||
A list of just SOME of the services that are available on the website FOR FREE (if you want accounts you need to contact me) <a href='/socials'>Contact Page</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</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-neutral-300 dark:bg-neutral-800 rounded-3xl' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
|
|
||||||
<a href='https://nextcloud.happylizard.me'>
|
|
||||||
<div class='grid sm:grid-cols-2 gap-8'>
|
|
||||||
<div>
|
|
||||||
<div data-motion='icon' class='w-40 h-20 rounded-2xl flex items-center justify-center mb-6'>
|
|
||||||
<img src='/assets/img/nextcloud.png'>
|
|
||||||
</div>
|
|
||||||
<h3 class='text-slate-900 dark:text-white text-2xl font-semibold mb-3'>Nextcloud</h3>
|
|
||||||
<p class='text-slate-600 dark:text-neutral-400 text-base'>
|
|
||||||
A open source collaboration tool with file storage, nextcloud talk, nextcloud office and other suite options
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class='rounded-2xl overflow-hidden'>
|
|
||||||
<img data-motion='image' src='/assets/img/nextcloud_showcase.png' class='w-full object-cover rounded-3xl'>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a data-motion='button' href='https://nextcloud.com/' class='inline-flex items-center gap-2 text-purple-500 font-medium hover:gap-3 transition-all duration-300 w-fit mt-6' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
|
|
||||||
Nextcloud Official Website
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Accent Card -->
|
|
||||||
<div data-motion='card' class='p-8 bg-indigo-600 rounded-3xl flex flex-col justify-between'>
|
|
||||||
<a href='https://navidrome.happylizard.me'>
|
|
||||||
<div>
|
|
||||||
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
|
||||||
<img src='assets/img/navidrome_dark.png'>
|
|
||||||
</div>
|
|
||||||
<h3 class='text-white text-xl font-semibold mb-3'>Navidrome</h3>
|
|
||||||
<p class='text-indigo-100 text-base'>
|
|
||||||
Music streaming service that you can connect to your laptop/phone with compatible subsonic/opensonic clients (5000+ songs)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a data-motion='button' href='https://www.navidrome.org/apps/' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
|
||||||
Navidrome compatible clients
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ROW 2 -->
|
|
||||||
<div data-motion='card' class='p-8 bg-fuchsia-700/40 rounded-3xl flex flex-col justify-between'>
|
|
||||||
<a href='https://navidrome.happylizard.me'>
|
|
||||||
<div>
|
|
||||||
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
|
||||||
<img src='assets/img/gitea.png'>
|
|
||||||
</div>
|
|
||||||
<h3 class='text-white text-xl font-semibold mb-3'>Gitea</h3>
|
|
||||||
<p class='text-indigo-100 text-base'>
|
|
||||||
A self-hosted version of github/gitlab that works pretty well
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-motion='card' class='lg:col-span-2 p-8 bg-neutral-300 dark:bg-neutral-800 rounded-3xl'>
|
|
||||||
<a href='https://jellyfin.happylizard.me'>
|
|
||||||
<div class='grid sm:grid-cols-2 gap-8'>
|
|
||||||
<div>
|
|
||||||
<div data-motion='icon' class='w-25 h-20 rounded-2xl flex items-center justify-center mb-6'>
|
|
||||||
<img src='/assets/img/jellyfin.png'>
|
|
||||||
</div>
|
|
||||||
<h3 class='text-slate-900 dark:text-white text-2xl font-semibold mb-3'>Jellyfin</h3>
|
|
||||||
<p class='text-slate-600 dark:text-neutral-400 text-base'>
|
|
||||||
A media sharing tool that has shows, movies, anime and music that can be streamed and downloaded
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class='rounded-2xl overflow-hidden'>
|
|
||||||
<img data-motion='image' src='/assets/img/jellyfin_showcase2.png' class='w-full object-cover rounded-3xl'>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a data-motion='button' href='https://jellyfin.org/' class='inline-flex items-center gap-2 text-purple-500 font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
|
||||||
Jellyfin Official Website
|
|
||||||
<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-8 bg-orange-500/80 rounded-3xl flex flex-col justify-between'>
|
|
||||||
<a href='https://gameyfin.happylizard.me'>
|
|
||||||
<div>
|
|
||||||
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
|
||||||
<img src='assets/img/gameyfin_small.png'>
|
|
||||||
</div>
|
|
||||||
<h3 class='text-black text-xl font-semibold mb-3'>Gameyfin</h3>
|
|
||||||
<p class='text-black text-base'>
|
|
||||||
A game-sharing site, with many nintendo, steam, and other misc. games
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</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);'>
|
|
||||||
<a href='https://convert.happylizard.me'>
|
|
||||||
<div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
|
|
||||||
<img src='assets/img/portal_runner.png'>
|
|
||||||
</div>
|
|
||||||
<h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Any-File converter</h3>
|
|
||||||
<p class='text-slate-600 dark:text-neutral-400 text-sm'>
|
|
||||||
A ffmpeg converter that attempts to take any file and convert it into another format SYNCRONOUSLY
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
<a data-motion='button' href='https://www.youtube.com/watch?v=btUbcsTbVA8' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
|
||||||
Youtube video explaining it
|
|
||||||
<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>
|
|
||||||
<a data-motion='button' href='https://github.com/p2r3/convert' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
|
||||||
Github to project
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div data-motion='card' class='p-8 bg-blue-800/60 rounded-3xl flex flex-col justify-between'>
|
|
||||||
<a href='https://copyparty.happylizard.me'>
|
|
||||||
<div>
|
|
||||||
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
|
||||||
<img src='assets/img/copyparty.png'>
|
|
||||||
</div>
|
|
||||||
<h3 class='text-white text-xl font-semibold mb-3'>Copyparty</h3>
|
|
||||||
<p class='text-indigo-100 text-base'>
|
|
||||||
A web fileserver that anybody can use, hosts most of the server files and has very good network drive support
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,431 @@
|
|||||||
|
<?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;'>
|
||||||
|
A quick collection of previous/continuing projects and a hub for links to my services
|
||||||
|
</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>
|
||||||
|
";
|
||||||
|
}
|
||||||
|
|
||||||
|
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;'>
|
||||||
|
<h2 class='text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6'>
|
||||||
|
Services
|
||||||
|
</h2>
|
||||||
|
<div id='content'>
|
||||||
|
<p data-animate='text' class='text-slate-600 dark:text-neutral-400 text-lg' style='opacity: 1;'>
|
||||||
|
A list of just SOME of the services that are available on the website FOR FREE (if you want accounts you need to contact me) <a href='/socials'>Contact Page</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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-neutral-300 dark:bg-neutral-800 rounded-3xl' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
|
||||||
|
<a href='https://nextcloud.happylizard.me'>
|
||||||
|
<div class='grid sm:grid-cols-2 gap-8'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-40 h-20 rounded-2xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='/assets/img/nextcloud.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-slate-900 dark:text-white text-2xl font-semibold mb-3'>Nextcloud</h3>
|
||||||
|
<p class='text-slate-600 dark:text-neutral-400 text-base'>
|
||||||
|
A open source collaboration tool with file storage, nextcloud talk, nextcloud office and other suite options
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class='rounded-2xl overflow-hidden'>
|
||||||
|
<img data-motion='image' src='/assets/img/nextcloud_showcase.png' class='w-full object-cover rounded-3xl'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a data-motion='button' href='https://nextcloud.com/' class='inline-flex items-center gap-2 text-purple-500 font-medium hover:gap-3 transition-all duration-300 w-fit mt-6' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
|
||||||
|
Nextcloud Official Website
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Accent Card -->
|
||||||
|
<div data-motion='card' class='p-8 bg-indigo-600 rounded-3xl flex flex-col justify-between'>
|
||||||
|
<a href='https://navidrome.happylizard.me'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='assets/img/navidrome_dark.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-white text-xl font-semibold mb-3'>Navidrome</h3>
|
||||||
|
<p class='text-indigo-100 text-base'>
|
||||||
|
Music streaming service that you can connect to your laptop/phone with compatible subsonic/opensonic clients (5000+ songs)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a data-motion='button' href='https://www.navidrome.org/apps/' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
|
Navidrome compatible clients
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ROW 2 -->
|
||||||
|
<div data-motion='card' class='p-8 bg-fuchsia-800/80 dark:bg-fuchsia-700/40 rounded-3xl flex flex-col justify-between'>
|
||||||
|
<a href='https://gitea.happylizard.me'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-25 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='assets/img/gitea.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-white text-xl font-semibold mb-3'>Gitea</h3>
|
||||||
|
<p class='text-indigo-100 text-base'>
|
||||||
|
A self-hosted version of github/gitlab that works pretty well
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-motion='card' class='lg:col-span-2 p-8 bg-neutral-300 dark:bg-neutral-800 rounded-3xl'>
|
||||||
|
<a href='https://jellyfin.happylizard.me'>
|
||||||
|
<div class='grid sm:grid-cols-2 gap-8'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-25 h-20 rounded-2xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='/assets/img/jellyfin.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-slate-900 dark:text-white text-2xl font-semibold mb-3'>Jellyfin</h3>
|
||||||
|
<p class='text-slate-600 dark:text-neutral-400 text-base'>
|
||||||
|
A media sharing tool that has shows, movies, anime and music that can be streamed and downloaded
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class='rounded-2xl overflow-hidden'>
|
||||||
|
<img data-motion='image' src='/assets/img/jellyfin_showcase2.png' class='w-full object-cover rounded-3xl'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a data-motion='button' href='https://jellyfin.org/' class='inline-flex items-center gap-2 text-purple-500 font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
|
Jellyfin Official Website
|
||||||
|
<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-8 bg-orange-500/80 rounded-3xl flex flex-col justify-between'>
|
||||||
|
<a href='https://gameyfin.happylizard.me'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='assets/img/gameyfin_small.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-black text-xl font-semibold mb-3'>Gameyfin</h3>
|
||||||
|
<p class='text-black text-base'>
|
||||||
|
A game-sharing site, with many nintendo, steam, and other misc. games
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-motion='card' class='p-6 bg-neutral-300 dark:bg-neutral-800 rounded-3xl' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
|
||||||
|
<a href='https://convert.happylizard.me'>
|
||||||
|
<div data-motion='icon' class='w-20 h-20 flex items-center justify-center mb-5'>
|
||||||
|
<img src='assets/img/portal_runner.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Any-File converter</h3>
|
||||||
|
<p class='text-black dark:text-neutral-400 text-sm'>
|
||||||
|
A ffmpeg converter that attempts to take any file and convert it into another format SYNCRONOUSLY
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<a data-motion='button' href='https://www.youtube.com/watch?v=btUbcsTbVA8' class='inline-flex items-center gap-2 text-black dark:text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
|
Youtube video explaining it
|
||||||
|
<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>
|
||||||
|
<a data-motion='button' href='https://github.com/p2r3/convert' class='inline-flex items-center gap-2 text-black dark:text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
|
Github to project
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div data-motion='card' class='p-8 bg-blue-800/80 rounded-3xl flex flex-col justify-between'>
|
||||||
|
<a href='https://copyparty.happylizard.me'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='assets/img/copyparty.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-white text-xl font-semibold mb-3'>Copyparty</h3>
|
||||||
|
<p class='text-indigo-100 text-base'>
|
||||||
|
A web fileserver that anybody can use, hosts most of the server files and has very good network drive support
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-10 p-20'>
|
||||||
|
<!-- Divider -->
|
||||||
|
<div class='h-3 bg-slate-200 dark:bg-neutral-800'></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<div id='content'>
|
||||||
|
<p data-animate='text' class='text-slate-600 dark:text-neutral-400 text-lg' style='opacity: 1;'>
|
||||||
|
A list of just SOME of the services that are available on the website FOR FREE (if you want accounts you need to contact me) <a href='/socials'>Contact Page</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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-neutral-300 dark:bg-neutral-800 rounded-3xl' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
|
||||||
|
<a href='https://nextcloud.happylizard.me'>
|
||||||
|
<div class='grid sm:grid-cols-2 gap-8'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-40 h-20 rounded-2xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='/assets/img/nextcloud.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-slate-900 dark:text-white text-2xl font-semibold mb-3'>Nextcloud</h3>
|
||||||
|
<p class='text-slate-600 dark:text-neutral-400 text-base'>
|
||||||
|
A open source collaboration tool with file storage, nextcloud talk, nextcloud office and other suite options
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class='rounded-2xl overflow-hidden'>
|
||||||
|
<img data-motion='image' src='/assets/img/nextcloud_showcase.png' class='w-full object-cover rounded-3xl'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a data-motion='button' href='https://nextcloud.com/' class='inline-flex items-center gap-2 text-purple-500 font-medium hover:gap-3 transition-all duration-300 w-fit mt-6' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
|
||||||
|
Nextcloud Official Website
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Accent Card -->
|
||||||
|
<div data-motion='card' class='p-8 bg-indigo-600 rounded-3xl flex flex-col justify-between'>
|
||||||
|
<a href='https://navidrome.happylizard.me'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='assets/img/navidrome_dark.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-white text-xl font-semibold mb-3'>Navidrome</h3>
|
||||||
|
<p class='text-indigo-100 text-base'>
|
||||||
|
Music streaming service that you can connect to your laptop/phone with compatible subsonic/opensonic clients (5000+ songs)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a data-motion='button' href='https://www.navidrome.org/apps/' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
|
Navidrome compatible clients
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ROW 2 -->
|
||||||
|
<div data-motion='card' class='p-8 bg-fuchsia-700/40 rounded-3xl flex flex-col justify-between'>
|
||||||
|
<a href='https://navidrome.happylizard.me'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='assets/img/gitea.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-white text-xl font-semibold mb-3'>Gitea</h3>
|
||||||
|
<p class='text-indigo-100 text-base'>
|
||||||
|
A self-hosted version of github/gitlab that works pretty well
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-motion='card' class='lg:col-span-2 p-8 bg-neutral-300 dark:bg-neutral-800 rounded-3xl'>
|
||||||
|
<a href='https://jellyfin.happylizard.me'>
|
||||||
|
<div class='grid sm:grid-cols-2 gap-8'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-25 h-20 rounded-2xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='/assets/img/jellyfin.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-slate-900 dark:text-white text-2xl font-semibold mb-3'>Jellyfin</h3>
|
||||||
|
<p class='text-slate-600 dark:text-neutral-400 text-base'>
|
||||||
|
A media sharing tool that has shows, movies, anime and music that can be streamed and downloaded
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class='rounded-2xl overflow-hidden'>
|
||||||
|
<img data-motion='image' src='/assets/img/jellyfin_showcase2.png' class='w-full object-cover rounded-3xl'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a data-motion='button' href='https://jellyfin.org/' class='inline-flex items-center gap-2 text-purple-500 font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
|
Jellyfin Official Website
|
||||||
|
<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-8 bg-orange-500/80 rounded-3xl flex flex-col justify-between'>
|
||||||
|
<a href='https://gameyfin.happylizard.me'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='assets/img/gameyfin_small.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-black text-xl font-semibold mb-3'>Gameyfin</h3>
|
||||||
|
<p class='text-black text-base'>
|
||||||
|
A game-sharing site, with many nintendo, steam, and other misc. games
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</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);'>
|
||||||
|
<a href='https://convert.happylizard.me'>
|
||||||
|
<div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
|
||||||
|
<img src='assets/img/portal_runner.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Any-File converter</h3>
|
||||||
|
<p class='text-slate-600 dark:text-neutral-400 text-sm'>
|
||||||
|
A ffmpeg converter that attempts to take any file and convert it into another format SYNCRONOUSLY
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<a data-motion='button' href='https://www.youtube.com/watch?v=btUbcsTbVA8' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
|
Youtube video explaining it
|
||||||
|
<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>
|
||||||
|
<a data-motion='button' href='https://github.com/p2r3/convert' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
|
Github to project
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div data-motion='card' class='p-8 bg-blue-800/60 rounded-3xl flex flex-col justify-between'>
|
||||||
|
<a href='https://copyparty.happylizard.me'>
|
||||||
|
<div>
|
||||||
|
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
|
<img src='assets/img/copyparty.png'>
|
||||||
|
</div>
|
||||||
|
<h3 class='text-white text-xl font-semibold mb-3'>Copyparty</h3>
|
||||||
|
<p class='text-indigo-100 text-base'>
|
||||||
|
A web fileserver that anybody can use, hosts most of the server files and has very good network drive support
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
";
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
Reference in New Issue
Block a user