added more services to service section

includes/all.php

@@ -111,126 +111,6 @@ function navbar($highlighted_box) {
     ";
 }
 
-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>
-          <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>
-
-          <!-- Small Feature Cards -->
-          <div data-motion='card' class='p-6 bg-white dark:bg-neutral-800 rounded-3xl'>
-            <a href='https://nextcloud.happylizard.me'>
-            <div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
-              <img src='assets/img/gitea.png'>
-            </div>
-            <h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Gitea</h3>
-            <p class='text-slate-600 dark:text-neutral-400 text-sm'>
-              A self-hosted version of github/gitlab that works pretty well
-            </p>
-            </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://nextcloud.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-6 bg-white dark:bg-neutral-800 rounded-3xl'>
-            <a href='https://copyparty.happylizard.me'>
-            <div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
-              <img src='assets/img/copyparty.png'>
-            </div>
-            <h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Copyparty</h3>
-            <p class='text-slate-600 dark:text-neutral-400 text-sm'>
-              A web fileserver that anybody can use, hosts most of the server files and has very good network drive support
-            </p>
-            </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'>

includes/main.php

@@ -8,7 +8,7 @@ function title() {
         <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
+            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);'>
@@ -91,4 +91,167 @@ function main_images() {
     </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;'>
+          <!-- <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-6 bg-white dark:bg-neutral-800 rounded-3xl'>
+            <a href='https://gitea.happylizard.me'>
+            <div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
+              <img src='assets/img/gitea.png'>
+            </div>
+            <h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Gitea</h3>
+            <p class='text-slate-600 dark:text-neutral-400 text-sm'>
+              A self-hosted version of github/gitlab that works pretty well
+            </p>
+            </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-6 bg-white dark:bg-neutral-800 rounded-3xl'>
+            <a href='https://gitea.happylizard.me'>
+            <div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
+              <img src='assets/img/gitea.png'>
+            </div>
+            <h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Gitea</h3>
+            <p class='text-slate-600 dark:text-neutral-400 text-sm'>
+              A self-hosted version of github/gitlab that works pretty well
+            </p>
+            </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-6 bg-white dark:bg-neutral-800 rounded-3xl'>
+            <a href='https://copyparty.happylizard.me'>
+            <div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
+              <img src='assets/img/copyparty.png'>
+            </div>
+            <h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Copyparty</h3>
+            <p class='text-slate-600 dark:text-neutral-400 text-sm'>
+              A web fileserver that anybody can use, hosts most of the server files and has very good network drive support
+            </p>
+            </a>
+          </div>
+
+
+
+        </div>
+      </div>
+    </section>
+    ";
+}
+
 ?>