add images

src/app/globals.css

@@ -7,6 +7,17 @@
   --primary: #FFA826;
 }
 
+@keyframes silly-bounce {
+  0%, 100% {
+    transform: translate(0px, 0px) scale(0.9, 1.1);
+    animation-timing-function: linear(0.2, 0.8, 1);
+  }
+  50% {
+    transform: translate(0px, -280px) scale(1.18, 0.9);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+}
+
 h2 {
   @apply text-2xl font-bold
 }

src/app/page.tsx

@@ -2,8 +2,10 @@ import { LandingImage } from "@/components/landing-image";
 import { NolaGlitchClientOnly } from "@/components/nola-glitch";
 import { Sosmed } from "@/components/sosmed";
 import HomeText from "@/components/home-text.mdx"
+import Image from "next/image";
 
 import Link from "next/link";
+import { FloatingLabel } from "@/components/floating-label";
 
 export default function Home() {
   return (
@@ -19,7 +21,7 @@ export default function Home() {
         </noscript>
         <NolaGlitchClientOnly />
         <Sosmed />
-        <article className="space-y-6 leading-relaxed">
+        <article className="space-y-6 leading-relaxed relative">
           <HomeText />
         </article>
         <section className="my-8">

src/components/home-text.mdx

@@ -10,8 +10,8 @@ We've got tools and resources for us but some we provide it for you, stuff that
 
 ## About Me
 
-I'm Nomi Nonsense (Nomi Nonsz or Nonszy whatever, some ppl know my real name).
+Nonszy (Nomi Nonsz or Nonszy whatever, some ppl know my real name).
-I write code and make sure the server doesn't catch on fire 🔥 lol. 
+I write code and make sure the server doesn't catch on fire lol. 
 
 I build sick web apps with modern stacks (and trash).
 Big fan of open-source stuff, CLI life, Arch 💅.
@@ -19,8 +19,7 @@ I only play indie games, and cooking up cursed mods just for fun.
 
 <Image
     className="mb-12 mx-auto"
-    alt="Pat coral"
+    alt="Coral"
-    title="Pat pat pat pat pat"
     src="https://media1.tenor.com/m/CpCvknTOMMwAAAAC/ena-ena-joel-g.gif"
     width={250}
     height={250}
@@ -39,6 +38,20 @@ Developers who brings together web technology, AI, and game development to creat
 
 We aspire to blend creativity and technical mastery to shape products that empower others and reflect our passion for independent, modern technology.
 
+<div className="relative">
+    <Link href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1" target="_blank">
+        <Image
+            className="hidden lg:inline-block absolute -left-72 top-48 animate-silly-bouncing"
+            alt="Nola"
+            src="/images/coral-a1.png"
+            width={200}
+            height={200}
+            quality={10}
+            unoptimized
+        />
+    </Link>
+</div>
+
 ## Mission
 
 - Gain a solid understanding of IT infrastructure, including how systems operate behind the scenes, how to independently manage servers, and how to ensure stability, security, and scalability throughout the development and deployment lifecycle.
@@ -46,6 +59,19 @@ We aspire to blend creativity and technical mastery to shape products that empow
 - Build the ability to design and develop web applications that are responsive, intuitive, fast, and visually compelling, with a strong focus on user experience and modern interface principles.
 - Integrate artificial intelligence into digital products, creating smart, helpful, and engaging features that elevate the overall value and interactivity of applications.
 
+<div className="relative">
+    <FloatingLabel placeholder="This is Nola, my OC :3">
+        <Image
+            className="hidden lg:inline-block absolute -right-72"
+            alt="Nola"
+            src="/images/nola.png"
+            width={250}
+            height={250}
+            unoptimized
+        />
+    </FloatingLabel>
+</div>
+
 ## Why Nonsense
 
 Nomi or Nonsense, it's not that we don't understand the each other or its uses, it's just a word you've chosen to dismiss our existence.

src/components/landing-image.tsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 import { FloatingLabel } from "./floating-label"
 
 export const LandingImage = () => (
-  <FloatingLabel placeholder="Coral Glasses from ENA Dream BBQ">
+  <FloatingLabel placeholder="Coral Glasses ❤️. Warning: not my work, character by JoelG">
     <Image
       className="mb-8 mx-auto"
       alt="Coral <3"

src/components/sosmed.tsx

@@ -27,10 +27,9 @@ const sosmeds =  [
     icon: 'mdi:reddit'
   },
   {
-    name: 'itch.io',
+    name: 'gitea',
-    url: 'https://nomi-nonsense.itch.io/',
+    url: 'https://gitea.nonszy.space/',
-    icon: 'cib:itch-io',
+    icon: 'cib:gitea'
-    size: 'text-[30px]'
   },
 ]
 
@@ -40,7 +39,7 @@ export const Sosmed = () => {
       {sosmeds.map((sosmed) => (
         <FloatingLabel placeholder={sosmed.name}>
           <Link
-            className="grid items-center justify-center border md:border-2 border-primary w-[48px] xs:w-[54px] h-auto aspect-square transition-[transform] duration-75 hover:-translate-y-1 hover:scale-105"
+            className="grid items-center justify-center border border-primary w-[48px] xs:w-[54px] h-auto aspect-square transition-[transform] duration-75 hover:-translate-y-1 hover:scale-105"
             href={sosmed.url}
             target="_blank"
             key={sosmed.name}

tailwind.config.ts

@@ -21,6 +21,9 @@ const config: Config = {
       'lg': '1024px',
       'xl': '1280px',
       '2xl': '1536px',
+    },
+    animation: {
+      "silly-bouncing": 'silly-bounce 0.8s infinite',
     }
   },
   plugins: [],