added animations and formated the code

src/app/page.tsx

@@ -1,28 +1,64 @@
 import Background from "@/components/Background";
 import PinnedRepos from "@/components/PinnedRepos";
 import Skill from "@/components/Skill";
-import { faGithub, faGolang, faInstagram, faJs, faLinkedin, faPython, faReact, faRust } from "@fortawesome/free-brands-svg-icons";
+import {
+  faGithub,
+  faGolang,
+  faInstagram,
+  faJs,
+  faLinkedin,
+  faPython,
+  faReact,
+  faRust,
+} from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function App() {
   return (
     <div>
-      <Background/>
+      <Background />
-      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0">
+      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0 animate-fadeIn">
         <div className="w-full max-w-screen-lg mx-auto">
           <div className="px-8 md:px-10 lg:px-15 xl:px-24">
             <h1 className="py-2 text-gray-300">Hey, I'm Leo 👋🏻</h1>
-            <p className="font-semibold text-gray-300">A passionate software engineer and freelancer from Tirane, Albania, specializing in full-stack web development, desktop applications, and TUI apps. I have a deep interest in low-level programming, often building projects like CPU emulators from scratch.</p>
+            <p className="font-semibold text-gray-300">
+              A passionate software engineer and freelancer from Tirane,
+              Albania, specializing in full-stack web development, desktop
+              applications, and TUI apps. I have a deep interest in low-level
+              programming, often building projects like CPU emulators from
+              scratch.
+            </p>
             <div className="pt-5 flex flex-row gap-5 w-max">
-              <a href="https://github.com/kleo-dev/" target="blank_"><FontAwesomeIcon icon={faGithub} width={36} className="text-red" /></a>
+              <a href="https://github.com/kleo-dev/" target="blank_">
-              <a href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/" target="blank_"><FontAwesomeIcon icon={faLinkedin} width={36} className="text-red" /></a>
+                <FontAwesomeIcon
-              <a href="https://www.instagram.com/kleo.dev/" target="blank_"><FontAwesomeIcon icon={faInstagram} width={36} className="text-red" /></a>
+                  icon={faGithub}
-              </div>
+                  width={36}
+                  className="text-red"
+                />
+              </a>
+              <a
+                href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
+                target="blank_"
+              >
+                <FontAwesomeIcon
+                  icon={faLinkedin}
+                  width={36}
+                  className="text-red"
+                />
+              </a>
+              <a href="https://www.instagram.com/kleo.dev/" target="blank_">
+                <FontAwesomeIcon
+                  icon={faInstagram}
+                  width={36}
+                  className="text-red"
+                />
+              </a>
+            </div>
             <h1 className="pt-5 text-red-400">Pinned Projects</h1>
             <section className="">
               <PinnedRepos />
             </section>
-            
+
             {/* Experience and skill */}
             <div className="pt-10 grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
               {/* skill */}
@@ -30,22 +66,20 @@ export default function App() {
                 <h1 className="pb-3 text-red-400 w-max">My Skills</h1>
                 <div className="p-3 bg-transparent-ish rounded-xl">
                   <div className="mx-auto w-max flex flex-row gap-5">
-                    <Skill skill="Rust" icon={faRust}/>
+                    <Skill skill="Rust" icon={faRust} />
-                    <Skill skill="Python" icon={faPython}/>
+                    <Skill skill="Python" icon={faPython} />
-                    <Skill skill="Go" icon={faGolang} mt="mt-2"/>
+                    <Skill skill="Go" icon={faGolang} mt="mt-2" />
-                    <Skill skill="JavaScript" icon={faJs}/>
+                    <Skill skill="JavaScript" icon={faJs} />
-                    <Skill skill="React" icon={faReact}/>
+                    <Skill skill="React" icon={faReact} />
                   </div>
                 </div>
               </div>
 
-            {/* Experience */}
+              {/* Experience */}
-            <div>
+              <div>
                 <h1 className="pb-3 text-red-400 w-max">My Experience</h1>
                 <div className="p-3 bg-transparent-ish rounded-xl">
-                  <div className="mx-auto w-max">
+                  <div className="mx-auto w-max">Soon</div>
-                    Soon
-                  </div>
                 </div>
               </div>
             </div>

src/app/pricing/page.tsx

@@ -1,61 +1,101 @@
 import Background from "@/components/Background";
-import { faCheck, faCode, faDatabase, faRocket } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCheck,
+  faCode,
+  faRocket,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function Pricing() {
-    return (
+  return (
-        <div>
+    <div>
-            <Background/>
+      <Background />
-            <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0">
+      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0 animate-fadeIn">
-                <div className="w-full max-w-screen-lg mx-auto px-4 md:px-10">
+        <div className="w-full max-w-screen-lg mx-auto px-4 md:px-10">
-                    <h1 className="pt-10 w-max mx-auto text-red-400">Choose a plan</h1>
+          <h1 className="pt-10 w-max mx-auto text-red-400">Choose a plan</h1>
-                    <div className="pt-10 h-full grid grid-cols-1 lg:grid-cols-2 grid-rows-2 gap-8">
+          <div className="pt-10 h-full grid grid-cols-1 lg:grid-cols-2 grid-rows-2 gap-8">
-                        <div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
+            <div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
-                            <FontAwesomeIcon className="w-max mx-auto text-red-600" icon={faCode} width={35}/>
+              <FontAwesomeIcon
-                            <h1 className="w-max mx-auto text-red-400">Standard</h1>
+                className="w-max mx-auto text-red-600"
-                            <h2 className="text-2xl w-max mx-auto text-red">$25</h2>
+                icon={faCode}
-                            <ul className="pt-4 list-none space-y-2">
+                width={35}
-                                <li className="flex items-center">
+              />
-                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+              <h1 className="w-max mx-auto text-red-400">Standard</h1>
-                                    Up to a day
+              <h2 className="text-2xl w-max mx-auto text-red">$25</h2>
-                                </li>
+              <ul className="pt-4 list-none space-y-2">
-                                <li className="flex items-center">
+                <li className="flex items-center">
-                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                  <FontAwesomeIcon
-                                    Simple projects or tasks (e.g., bug fixes)
+                    className="text-green-500 mr-2"
-                                </li>
+                    icon={faCheck}
-                                <li className="flex items-center">
+                    width={14}
-                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                  />
-                                    Response via Email or Discord
+                  Up to a day
-                                </li>
+                </li>
-                            </ul>
+                <li className="flex items-center">
-                        </div>
+                  <FontAwesomeIcon
-                        
+                    className="text-green-500 mr-2"
-                        <div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
+                    icon={faCheck}
-                            <FontAwesomeIcon className="w-max mx-auto text-red-600" icon={faRocket} width={35}/>
+                    width={14}
-                            <h1 className="w-max mx-auto text-red-400">Premium</h1>
+                  />
-                            <h2 className="text-2xl w-max mx-auto text-red">$50</h2>
+                  Simple projects or tasks (e.g., bug fixes)
-                            <ul className="pt-4 list-none space-y-2">
+                </li>
-                                <li className="flex items-center">
+                <li className="flex items-center">
-                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                  <FontAwesomeIcon
-                                    Up to a week
+                    className="text-green-500 mr-2"
-                                </li>
+                    icon={faCheck}
-                                <li className="flex items-center">
+                    width={14}
-                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
+                  />
-                                    Complex projects
+                  Response via Email or Discord
-                                </li>
+                </li>
-                                <li className="flex items-center">
+              </ul>
-                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
-                                    Large tasks (e.g., refractoring, bug hunting)
-                                </li>
-                                <li className="flex items-center">
-                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
-                                    Documenting
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
             </div>
+
+            <div className="h-full rounded-xl bg-transparent-ish border border-red p-9">
+              <FontAwesomeIcon
+                className="w-max mx-auto text-red-600"
+                icon={faRocket}
+                width={35}
+              />
+              <h1 className="w-max mx-auto text-red-400">Premium</h1>
+              <h2 className="text-2xl w-max mx-auto text-red">$50</h2>
+              <ul className="pt-4 list-none space-y-2">
+                <li className="flex items-center">
+                  <FontAwesomeIcon
+                    className="text-green-500 mr-2"
+                    icon={faCheck}
+                    width={14}
+                  />
+                  Up to a week
+                </li>
+                <li className="flex items-center">
+                  <FontAwesomeIcon
+                    className="text-green-500 mr-2"
+                    icon={faCheck}
+                    width={14}
+                  />
+                  Complex projects
+                </li>
+                <li className="flex items-center">
+                  <FontAwesomeIcon
+                    className="text-green-500 mr-2"
+                    icon={faCheck}
+                    width={14}
+                  />
+                  Large tasks (e.g., refractoring, bug hunting)
+                </li>
+                <li className="flex items-center">
+                  <FontAwesomeIcon
+                    className="text-green-500 mr-2"
+                    icon={faCheck}
+                    width={14}
+                  />
+                  Documenting
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
-    )
+      </div>
-}
+    </div>
+  );
+}

src/components/Background.css

@@ -1,6 +1,6 @@
 @keyframes move {
   100% {
-      transform: translate3d(0, 0, 1px) rotate(360deg);
+    transform: translate3d(0, 0, 1px) rotate(360deg);
   }
 }
 
@@ -27,7 +27,6 @@
   animation-iteration-count: infinite;
 }
 
-
 .background span:nth-child(0) {
   color: #f5304c;
   top: 24%;

src/components/Background.tsx

@@ -1,4 +1,4 @@
-import './Background.css';
+import "./Background.css";
 
 const Background = () => {
   return (
@@ -32,7 +32,7 @@ const Background = () => {
       <span></span>
       <span></span>
       <span></span>
-      </div>
+    </div>
   );
 };
 

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client";
 
-import { usePathname } from 'next/navigation';
+import { usePathname } from "next/navigation";
 
 export default function Navbar() {
   const pathname = usePathname();
@@ -9,17 +9,35 @@ export default function Navbar() {
     <nav className="py-4 flex">
       <div className="mx-auto flex">
         <div className="space-x-4 text-white block font-bold">
-          <a href="/" className={"hover:text-red transition-colors duration-300" + (pathname === '/' ? ' text-red' : '')}>
+          <a
+            href="/"
+            className={
+              "hover:text-red transition-colors duration-300" +
+              (pathname === "/" ? " text-red" : "")
+            }
+          >
             Home
           </a>
-          <a href="/pricing" className={"hover:text-red transition-colors duration-300" + (pathname === '/pricing' ? ' text-red' : '')}>
+          <a
+            href="/pricing"
+            className={
+              "hover:text-red transition-colors duration-300" +
+              (pathname === "/pricing" ? " text-red" : "")
+            }
+          >
             Pricing
           </a>
-          <a href="/blog" className={"hover:text-red transition-colors duration-300" + (pathname === '/blog' ? ' text-red' : '')}>
+          <a
+            href="/blog"
+            className={
+              "hover:text-red transition-colors duration-300" +
+              (pathname === "/blog" ? " text-red" : "")
+            }
+          >
             Blog
           </a>
         </div>
       </div>
     </nav>
   );
-};
+}

src/components/PinnedRepos.tsx

@@ -1,14 +1,21 @@
 type PinnedRepo = {
-  author: string,
+  author: string;
-  name: string,
+  name: string;
-  description: string,
+  description: string;
-  language: string,
+  language: string;
-  stars: number,
+  stars: number;
-  forks: number,
+  forks: number;
-  href?: string,
+  href?: string;
 };
 
-export function Repo({name, description: desc, language: lang, stars, forks, href}: PinnedRepo) {
+export function Repo({
+  name,
+  description: desc,
+  language: lang,
+  stars,
+  forks,
+  href,
+}: PinnedRepo) {
   return (
     <div
       className={`
@@ -37,7 +44,7 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
                 target="_blank"
                 rel="noreferrer"
                 className="hover:underline"
-                style={{ cursor: 'pointer' }}
+                style={{ cursor: "pointer" }}
               >
                 {name}
               </a>
@@ -49,7 +56,10 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
           <div className="p-6 pt-0 mt-auto">
             <div className="flex flex-wrap justify-between items-center gap-2">
               <div className="flex items-center gap-2 sm:gap-4">
-                <div className="flex items-center gap-1 text-xs sm:text-sm" data-state="closed">
+                <div
+                  className="flex items-center gap-1 text-xs sm:text-sm"
+                  data-state="closed"
+                >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -66,7 +76,10 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
                   </svg>
                   <span className="text-gray-300">{stars}</span>
                 </div>
-                <div className="flex items-center gap-1 text-xs sm:text-sm" data-state="closed">
+                <div
+                  className="flex items-center gap-1 text-xs sm:text-sm"
+                  data-state="closed"
+                >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -88,7 +101,11 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
                   <span className="text-gray-300">{forks}</span>
                 </div>
               </div>
-              <div className="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs bg-red-600/10 border-red-600" data-sentry-component="Badge" data-sentry-source-file="badge.tsx">
+              <div
+                className="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs bg-red-600/10 border-red-600"
+                data-sentry-component="Badge"
+                data-sentry-source-file="badge.tsx"
+              >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="24"
@@ -112,11 +129,13 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export default async function PinnedRepos() {
-  const pinned: PinnedRepo[] = await (await fetch('https://pinned.berrysauce.dev/get/kleo-dev')).json();
+  const pinned: PinnedRepo[] = await (
+    await fetch("https://pinned.berrysauce.dev/get/kleo-dev")
+  ).json();
 
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
@@ -129,8 +148,9 @@ export default async function PinnedRepos() {
           language={repo.language}
           stars={repo.stars}
           forks={repo.forks}
-          href={`https://github.com/${repo.author}/${repo.name}`}/>
+          href={`https://github.com/${repo.author}/${repo.name}`}
+        />
       ))}
     </div>
-  )
+  );
-}
+}

src/components/Skill.tsx

@@ -1,13 +1,19 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-export default function Skill({skill, icon, mt}: {skill: string, icon: IconProp, mt?: string}) {
+export default function Skill({
+  skill,
+  icon,
+  mt,
+}: {
+  skill: string;
+  icon: IconProp;
+  mt?: string;
+}) {
   return (
     <div className="skill">
       <FontAwesomeIcon icon={icon} width={40} className={`text-red ${mt}`} />
-      <span className="tooltip absolute bg-transparent-ish">
+      <span className="tooltip absolute bg-transparent-ish">{skill}</span>
-        {skill}
-      </span>
     </div>
   );
-}
+}

tailwind.config.ts

@@ -14,7 +14,16 @@ export default {
         red: '#f5304c',
         'red-400': '#fa5770',
         'red-600': '#eb2642',
-        'transparent-ish': '#0000006F'
+        'transparent-ish': '#0000006F',
+      },
+      animation: {
+        fadeIn: "fadeIn 1s ease-in-out",
+      },
+      keyframes: {
+        fadeIn: {
+          "0%": { opacity: "0", transform: "translateY(10px)" },
+          "100%": { opacity: "1", transform: "translateY(0px)" },
+        },
       },
     },
   },