added animations and formated the code
This commit is contained in:
+43
-9
@@ -1,22 +1,58 @@
|
||||
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">
|
||||
<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>
|
||||
<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="">
|
||||
@@ -43,9 +79,7 @@ export default function App() {
|
||||
<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>
|
||||
|
||||
+52
-12
@@ -1,54 +1,94 @@
|
||||
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="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}/>
|
||||
<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} />
|
||||
<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} />
|
||||
<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} />
|
||||
<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}/>
|
||||
<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} />
|
||||
<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} />
|
||||
<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} />
|
||||
<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} />
|
||||
<FontAwesomeIcon
|
||||
className="text-green-500 mr-2"
|
||||
icon={faCheck}
|
||||
width={14}
|
||||
/>
|
||||
Documenting
|
||||
</li>
|
||||
</ul>
|
||||
@@ -57,5 +97,5 @@ export default function Pricing() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+10
-1
@@ -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)" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user