updated portfolio
This commit is contained in:
@@ -1,38 +0,0 @@
|
||||
import Background from "@/components/Background";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div>
|
||||
<Background/>
|
||||
<div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 lg:pl-[6%] relative z-20 pb-16 md:pb">
|
||||
<div className="p-10">
|
||||
<div className="pb-10 pt-5 w-full max-w-screen-lg mx-auto backdrop-blur-3xl border-red border rounded-xl">
|
||||
<div className="px-8 md:px-10 lg:px-15 xl:px-24">
|
||||
<h1 className="py-2 text-red">Klesti Selimaj</h1>
|
||||
<p className="font-semibold text-gray-300">A passionate software enginner in Albania. I build full stack web apps but mainly desktop apps and TUI apps.</p>
|
||||
<div className="grid w-full grid-cols-2 gap-8 pt-10">
|
||||
<div className="border-red border rounded-xl p-4 bg-transparent-ish">
|
||||
<h2 className="text-xl text-red">Skills</h2>
|
||||
<ul className="list-disc list-inside text-gray-300">
|
||||
<li>Rust, OSUI</li>
|
||||
<li>TypeScript, React, Next.js, Tailwind</li>
|
||||
<li>Go, Python</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="border-red border rounded-xl p-4 bg-transparent-ish">
|
||||
<h2 className="text-xl text-red">Experience</h2>
|
||||
<ul className="list-disc list-inside text-gray-300">
|
||||
<li>OSUI</li>
|
||||
<li>Orus</li>
|
||||
<li>Personal projects</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer className="px-8 md:px-10 lg:px-15 xl:px-24 text-red-400 prose absolute bottom-0 py-4"><p className="m-0 text-sm"><a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://opensource.org/license/apache-2-0">Apache-2.0</a> © <a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://github.com/kleo-dev">Kleo</a></p></footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -39,3 +39,12 @@ h1 {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.skill .tooltip {
|
||||
opacity: 0;
|
||||
transition: opacity .3s linear;
|
||||
}
|
||||
|
||||
.skill:hover .tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
+39
-5
@@ -1,20 +1,54 @@
|
||||
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 { 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 lg:pl-[6%] 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">
|
||||
<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 enginner in Albania. I build full stack web apps but mainly desktop apps and TUI apps.</p>
|
||||
<h1 className="pt-20 py-3 text-red-400">Pinned Projects</h1>
|
||||
<section className="mb-10">
|
||||
<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>
|
||||
<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 */}
|
||||
<div>
|
||||
<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}/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import Background from "@/components/Background";
|
||||
import { faCheck, faCode, faDatabase } 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">
|
||||
<div className="px-8 md:px-10 lg:px-15 xl:px-24"></div>
|
||||
<h1 className="pt-10 w-max mx-auto text-red-400">Choose a plan</h1>
|
||||
<div className="px-24 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 4 hours
|
||||
</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={faCode} width={35}/>
|
||||
<h1 className="w-max mx-auto text-red-400">Premium</h1>
|
||||
<h2 className="text-2xl w-max mx-auto text-red">$60</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 to medium projects
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FontAwesomeIcon className="text-green-500 mr-2" icon={faCheck} width={14} />
|
||||
Larger tasks (e.g., refractoring, bug hunting)
|
||||
</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={faDatabase} width={35}/>
|
||||
<h1 className="w-max mx-auto text-red-400">Enterprise</h1>
|
||||
<h2 className="text-2xl w-max mx-auto text-red">$150</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>
|
||||
<footer className="px-8 md:px-10 lg:px-15 xl:px-24 text-red-400 prose absolute bottom-0 py-4"><p className="m-0 text-sm"><a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://opensource.org/license/apache-2-0">Apache-2.0</a> © <a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://github.com/kleo-dev">Kleo</a></p></footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,20 +1,12 @@
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<nav className="p-4 flex items-center justify-center">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div
|
||||
className="space-x-4 text-white block font-bold"
|
||||
>
|
||||
<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">
|
||||
Home
|
||||
</a>
|
||||
<a href="/about" className="hover:text-red transition-colors duration-300">
|
||||
About
|
||||
</a>
|
||||
<a href="/contact" className="hover:text-red transition-colors duration-300">
|
||||
Contact
|
||||
</a>
|
||||
<a href="/services" className="hover:text-red transition-colors duration-300">
|
||||
<a href="/pricing" className="hover:text-red transition-colors duration-300">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="/blog" className="hover:text-red transition-colors duration-300">
|
||||
|
||||
@@ -18,7 +18,8 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
|
||||
size-full
|
||||
overflow-hidden
|
||||
rounded-xl
|
||||
h-full border
|
||||
h-full
|
||||
border
|
||||
border-red
|
||||
hover:shadow-md
|
||||
transition-shadow
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
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}) {
|
||||
return (
|
||||
<div className="skill">
|
||||
<FontAwesomeIcon icon={icon} width={40} className={`text-red ${mt}`} />
|
||||
<span className="tooltip absolute bg-transparent-ish">
|
||||
{skill}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user