From c085964c85973335fa82e6c4c7cf81ac507aebfb Mon Sep 17 00:00:00 2001 From: Leo dev Date: Sat, 4 Jan 2025 21:19:52 +0100 Subject: [PATCH] added animations and formated the code --- src/app/page.tsx | 72 +++++++++++----- src/app/pricing/page.tsx | 150 +++++++++++++++++++++------------ src/components/Background.css | 3 +- src/components/Background.tsx | 4 +- src/components/Navbar.tsx | 30 +++++-- src/components/PinnedRepos.tsx | 54 ++++++++---- src/components/Skill.tsx | 16 ++-- tailwind.config.ts | 11 ++- 8 files changed, 233 insertions(+), 107 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 2ad9f0b..0c88b06 100644 --- a/src/app/page.tsx +++ b/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 (
- -
+ +

Hey, I'm Leo 👋🏻

-

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.

+

+ 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. +

- - - -
+ + + + + + + + + +

Pinned Projects

- + {/* Experience and skill */}
{/* skill */} @@ -30,22 +66,20 @@ export default function App() {

My Skills

- - - - - + + + + +
- {/* Experience */} -
+ {/* Experience */} +

My Experience

-
- Soon -
+
Soon
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx index 3cd7da7..6a2fb86 100644 --- a/src/app/pricing/page.tsx +++ b/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 ( -
- -
-
-

Choose a plan

-
-
- -

Standard

-

$25

-
    -
  • - - Up to a day -
    • -
  • - - Simple projects or tasks (e.g., bug fixes) -
    • -
  • - - Response via Email or Discord -
    • -
-
- -
- -

Premium

-

$50

-
    -
  • - - Up to a week -
    • -
  • - - Complex projects -
    • -
  • - - Large tasks (e.g., refractoring, bug hunting) -
    • -
  • - - Documenting -
    • -
-
-
-
+ return ( +
+ +
+
+

Choose a plan

+
+
+ +

Standard

+

$25

+
    +
  • + + Up to a day +
    • +
  • + + Simple projects or tasks (e.g., bug fixes) +
    • +
  • + + Response via Email or Discord +
    • +
+ +
+ +

Premium

+

$50

+
    +
  • + + Up to a week +
    • +
  • + + Complex projects +
    • +
  • + + Large tasks (e.g., refractoring, bug hunting) +
    • +
  • + + Documenting +
    • +
+
+
- ) -} \ No newline at end of file +
+
+ ); +} diff --git a/src/components/Background.css b/src/components/Background.css index 3b81c4b..405e000 100644 --- a/src/components/Background.css +++ b/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%; diff --git a/src/components/Background.tsx b/src/components/Background.tsx index 2407574..d27006d 100644 --- a/src/components/Background.tsx +++ b/src/components/Background.tsx @@ -1,4 +1,4 @@ -import './Background.css'; +import "./Background.css"; const Background = () => { return ( @@ -32,7 +32,7 @@ const Background = () => { -
+
); }; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 49ecc45..8b5692e 100644 --- a/src/components/Navbar.tsx +++ b/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() { ); -}; +} diff --git a/src/components/PinnedRepos.tsx b/src/components/PinnedRepos.tsx index a4bf4a8..142ebb1 100644 --- a/src/components/PinnedRepos.tsx +++ b/src/components/PinnedRepos.tsx @@ -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 (
{name} @@ -49,7 +56,10 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
-
+
{stars}
-
+
{forks}
-
+
- ) + ); } 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 (
@@ -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}`} + /> ))}
- ) -} \ No newline at end of file + ); +} diff --git a/src/components/Skill.tsx b/src/components/Skill.tsx index 12842cb..5aa9ff7 100644 --- a/src/components/Skill.tsx +++ b/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 (
- - {skill} - + {skill}
); -} \ No newline at end of file +} diff --git a/tailwind.config.ts b/tailwind.config.ts index c5bc5cd..241e5f8 100644 --- a/tailwind.config.ts +++ b/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)" }, + }, }, }, },