added animations and formated the code
This commit is contained in:
+53
-19
@@ -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>
|
||||
|
||||
+95
-55
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user