added animations and formated the code

2025-01-04 21:19:52 +01:00
parent c8d7b6b17c
commit c085964c85
8 changed files with 233 additions and 107 deletions
@@ -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/>
-      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0">
+      <Background />
+      <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://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>
+              <a href="https://github.com/kleo-dev/" target="blank_">
+                <FontAwesomeIcon
+                  icon={faGithub}
+                  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="Python" icon={faPython}/>
-                    <Skill skill="Go" icon={faGolang} mt="mt-2"/>
-                    <Skill skill="JavaScript" icon={faJs}/>
-                    <Skill skill="React" icon={faReact}/>
+                    <Skill skill="Rust" icon={faRust} />
+                    <Skill skill="Python" icon={faPython} />
+                    <Skill skill="Go" icon={faGolang} mt="mt-2" />
+                    <Skill skill="JavaScript" icon={faJs} />
+                    <Skill skill="React" icon={faReact} />
                  </div>
                </div>
              </div>

-            {/* Experience */}
-            <div>
+              {/* Experience */}
+              <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">
-                    Soon
-                  </div>
+                  <div className="mx-auto w-max">Soon</div>
                </div>
              </div>
            </div>
@@ -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 (
-        <div>
-            <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="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>
-                    <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">
-                            <FontAwesomeIcon className="w-max mx-auto text-red-600" icon={faCode} width={35}/>
-                            <h1 className="w-max mx-auto text-red-400">Standard</h1>
-                            <h2 className="text-2xl w-max mx-auto text-red">$25</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 day
-                                </li>
-                                <li className="flex items-center">
-                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
-                                    Simple projects or tasks (e.g., bug fixes)
-                                </li>
-                                <li className="flex items-center">
-                                    <FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
-                                    Response via Email or Discord
-                                </li>
-                            </ul>
-                        </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>
+  return (
+    <div>
+      <Background />
+      <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">
+          <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="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}
+              />
+              <h1 className="w-max mx-auto text-red-400">Standard</h1>
+              <h2 className="text-2xl w-max mx-auto text-red">$25</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 day
+                </li>
+                <li className="flex items-center">
+                  <FontAwesomeIcon
+                    className="text-green-500 mr-2"
+                    icon={faCheck}
+                    width={14}
+                  />
+                  Simple projects or tasks (e.g., bug fixes)
+                </li>
+                <li className="flex items-center">
+                  <FontAwesomeIcon
+                    className="text-green-500 mr-2"
+                    icon={faCheck}
+                    width={14}
+                  />
+                  Response via Email or Discord
+                </li>
+              </ul>
            </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>
+  );
+}
@@ -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%;
@@ -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>
  );
 };

@@ -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>
  );
-};
+}
@@ -1,14 +1,21 @@
 type PinnedRepo = {
-  author: string,
-  name: string,
-  description: string,
-  language: string,
-  stars: number,
-  forks: number,
-  href?: string,
+  author: string;
+  name: string;
+  description: string;
+  language: string;
+  stars: number;
+  forks: number;
+  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>
-  )
-}
+  );
+}
@@ -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">
-        {skill}
-      </span>
+      <span className="tooltip absolute bg-transparent-ish">{skill}</span>
    </div>
  );
-}
+}
@@ -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)" },
+        },
      },
    },
  },