83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
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 { faJava } from "@fortawesome/free-brands-svg-icons/faJava";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
export default function App() {
|
|
return (
|
|
<div>
|
|
<div className="content-center w-full lg:mx-auto pt-5 relative z-20 pb-10 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 Klesti! 👋🏻</h1>
|
|
<p className="font-semibold text-gray-300">
|
|
A 15 year old Software Engineer from Tirane, Albania, with 5 years
|
|
of experience, specializing in full-stack web development, desktop
|
|
applications, TUI apps, and hacking. I have a deep interest in
|
|
low-level programming.
|
|
</p>
|
|
|
|
{/* Socials and skill */}
|
|
<div className="pt-10 grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
|
|
{/* socials */}
|
|
<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>
|
|
<div>
|
|
<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="Go" icon={faGolang} />
|
|
<Skill skill="JavaScript" icon={faJs} />
|
|
<Skill skill="Java" icon={faJava} classInsert="p-1" />
|
|
<Skill skill="Python" icon={faPython} />
|
|
<Skill skill="React" icon={faReact} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 className="pt-5 text-red-400">Pinned Projects</h1>
|
|
<section className="">
|
|
<PinnedRepos />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|