Finished main page

includes/all.php

@@ -121,10 +121,12 @@ function grid() {
           <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;'>
-            Not done yet, come back later after I'm finished with this template
+            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'>
@@ -138,7 +140,7 @@ function grid() {
                 </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'>
-                  Build with composable modules that scale independently and integrate seamlessly with your existing stack.
+                    A open source collaboration tool with file storage, nextcloud talk, nextcloud office and other suite options
                 </p>
               </div>
               <div class='rounded-2xl overflow-hidden'>
@@ -146,23 +148,29 @@ function grid() {
               </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' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
+          <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-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-6'>
+              <div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
-                <svg class='w-6 h-6 text-white' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                <img src='assets/img/navidrome_dark.png'>
-                  <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>
+              <h3 class='text-white text-xl font-semibold mb-3'>Navidrome</h3>
               <p class='text-indigo-100 text-base'>
-                Full TypeScript support with auto-generated types for bulletproof development.
+                Music streaming service that you can connect to your laptop/phone with compatible subsonic/opensonic clients (5000+ songs)
               </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);'>
+            </a>
-              Learn More
+            <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>
@@ -170,50 +178,51 @@ function grid() {
           </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='card' class='p-6 bg-white dark:bg-neutral-800 rounded-3xl'>
-            <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);'>
+            <a href='https://nextcloud.happylizard.me'>
-              <svg class='w-6 h-6 text-indigo-600 dark:text-indigo-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
-                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'></path>
+              <img src='assets/img/gitea.png'>
-              </svg>
             </div>
-            <h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>REST &amp; GraphQL</h3>
+            <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'>
-              Choose your preferred API style with full support for both endpoints.
+              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);'>
-            <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);'>
+            <a href='https://nextcloud.happylizard.me'>
-              <svg class='w-6 h-6 text-indigo-600 dark:text-indigo-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
-                <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>
+              <img src='assets/img/portal_runner.png'>
-              </svg>
             </div>
-            <h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Rich Documentation</h3>
+            <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'>
-              Comprehensive guides and tutorials to get you started quickly.
+              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' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
+          <div data-motion='card' class='p-6 bg-white dark:bg-neutral-800 rounded-3xl'>
-            <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);'>
+            <a href='https://copyparty.happylizard.me'>
-              <svg class='w-6 h-6 text-indigo-600 dark:text-indigo-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
-                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6v6m0 0v6m0-6h6m-6 0H6'></path>
+              <img src='assets/img/copyparty.png'>
-              </svg>
             </div>
-            <h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Plugin System</h3>
+            <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'>
-              Extend functionality with community and official plugins.
+              A web fileserver that anybody can use, hosts most of the server files and has very good network drive support
             </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>

index.php

@@ -3,7 +3,7 @@
 
 <!DOCTYPE html>
 <html>
-    <?php echo head("Home"); ?>
+    <?php echo head_css("Home", ["projects.css"], ""); ?>
     <body>
     <?php echo navbar("1"); ?>
     <?php echo title(); ?>