Monochrome bby
This commit is contained in:
+4
-4
@@ -16,11 +16,11 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className="antialiased bg-black">
|
<body className="antialiased bg-black">
|
||||||
<Background>
|
{/* <Background> */}
|
||||||
<div className="relative h-screen overflow-y-scroll">
|
{/* <div className="relative h-screen overflow-y-scroll"> */}
|
||||||
{children}
|
{children}
|
||||||
</div>
|
{/* </div> */}
|
||||||
</Background>
|
{/* </Background> */}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
+26
-11
@@ -24,8 +24,8 @@ export default function App() {
|
|||||||
<p className="font-semibold text-gray-300">
|
<p className="font-semibold text-gray-300">
|
||||||
A 15 year old Software Engineer from Tirane, Albania, with 6 years
|
A 15 year old Software Engineer from Tirane, Albania, with 6 years
|
||||||
of experience, specializing in full-stack web development, desktop
|
of experience, specializing in full-stack web development, desktop
|
||||||
applications, TUI apps, and hacking. I also have a deep interest in
|
applications, TUI apps, and hacking. I also have a deep interest
|
||||||
low-level programming.
|
in low-level programming.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Socials and skill */}
|
{/* Socials and skill */}
|
||||||
@@ -36,7 +36,7 @@ export default function App() {
|
|||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faGithub}
|
icon={faGithub}
|
||||||
width={36}
|
width={36}
|
||||||
className="text-red"
|
className="text-slate-300"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
@@ -46,14 +46,14 @@ export default function App() {
|
|||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faLinkedin}
|
icon={faLinkedin}
|
||||||
width={36}
|
width={36}
|
||||||
className="text-red"
|
className="text-slate-300"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/kleo.dev/" target="blank_">
|
<a href="https://www.instagram.com/kleo.dev/" target="blank_">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faInstagram}
|
icon={faInstagram}
|
||||||
width={36}
|
width={36}
|
||||||
className="text-red"
|
className="text-slate-300"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -70,16 +70,31 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-red-400">Pinned Projects</h1>
|
<h1 className="text-slate-300">Pinned Projects</h1>
|
||||||
<section className="">
|
<section className="">
|
||||||
<PinnedRepos />
|
<PinnedRepos />
|
||||||
</section>
|
</section>
|
||||||
<section className="mt-8">
|
<section className="mt-8">
|
||||||
<GitHubCalendar username="kleo-dev" theme={{
|
<GitHubCalendar
|
||||||
light: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
|
username="kleo-dev"
|
||||||
dark: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
|
theme={{
|
||||||
}} />
|
light: [
|
||||||
|
"rgba(255, 255, 255, 0.1)",
|
||||||
|
"rgba(255, 255, 255, 0.3)",
|
||||||
|
"rgba(255, 255, 255, 0.5)",
|
||||||
|
"rgba(255, 255, 255, 0.7)",
|
||||||
|
"rgba(255, 255, 255, 1)",
|
||||||
|
],
|
||||||
|
dark: [
|
||||||
|
"rgba(255, 255, 255, 0.1)",
|
||||||
|
"rgba(255, 255, 255, 0.3)",
|
||||||
|
"rgba(255, 255, 255, 0.5)",
|
||||||
|
"rgba(255, 255, 255, 0.7)",
|
||||||
|
"rgba(255, 255, 255, 1)",
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -13,8 +13,8 @@ export default function Navbar() {
|
|||||||
<Link
|
<Link
|
||||||
href="/"
|
href="/"
|
||||||
className={
|
className={
|
||||||
"hover:text-red transition-colors duration-300" +
|
"hover:slate-200 transition-colors duration-300" +
|
||||||
(pathname === "/" ? " text-red" : "")
|
(pathname === "/" ? " slate-200" : "")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Home
|
Home
|
||||||
@@ -22,8 +22,8 @@ export default function Navbar() {
|
|||||||
<Link
|
<Link
|
||||||
href="/pricing"
|
href="/pricing"
|
||||||
className={
|
className={
|
||||||
"hover:text-red transition-colors duration-300" +
|
"hover:slate-200 transition-colors duration-300" +
|
||||||
(pathname === "/pricing" ? " text-red" : "")
|
(pathname === "/pricing" ? " slate-200" : "")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Pricing
|
Pricing
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
'use client';
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
@@ -31,7 +31,7 @@ export function Repo({
|
|||||||
rounded-xl
|
rounded-xl
|
||||||
h-full
|
h-full
|
||||||
border
|
border
|
||||||
border-red
|
border-slate-300
|
||||||
hover:shadow-md
|
hover:shadow-md
|
||||||
transition-shadow
|
transition-shadow
|
||||||
duration-300
|
duration-300
|
||||||
@@ -41,7 +41,7 @@ export function Repo({
|
|||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="rounded-xl border text-card-foreground shadow h-full bg-transparent border-none flex flex-col">
|
<div className="rounded-xl border text-card-foreground shadow h-full bg-transparent border-none flex flex-col">
|
||||||
<div className="flex flex-col space-y-1.5 p-6 flex-grow">
|
<div className="flex flex-col space-y-1.5 p-6 flex-grow">
|
||||||
<h3 className="tracking-tight text-base sm:text-lg font-semibold text-red-400">
|
<h3 className="tracking-tight text-base sm:text-lg font-semibold text-slate-300">
|
||||||
<a
|
<a
|
||||||
href={href}
|
href={href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@@ -106,28 +106,28 @@ export function Repo({
|
|||||||
</div>
|
</div>
|
||||||
{lang && (
|
{lang && (
|
||||||
<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"
|
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-slate-400/10 border-slate-400"
|
||||||
data-sentry-component="Badge"
|
data-sentry-component="Badge"
|
||||||
data-sentry-source-file="badge.tsx"
|
data-sentry-source-file="badge.tsx"
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
className="lucide lucide-code-xml h-3 w-3 mr-1"
|
|
||||||
>
|
>
|
||||||
<path d="m18 16 4-4-4-4" />
|
<svg
|
||||||
<path d="m6 8-4 4 4 4" />
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<path d="m14.5 4-5 16" />
|
width="24"
|
||||||
</svg>
|
height="24"
|
||||||
{lang}
|
viewBox="0 0 24 24"
|
||||||
</div>
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="lucide lucide-code-xml h-3 w-3 mr-1"
|
||||||
|
>
|
||||||
|
<path d="m18 16 4-4-4-4" />
|
||||||
|
<path d="m6 8-4 4 4 4" />
|
||||||
|
<path d="m14.5 4-5 16" />
|
||||||
|
</svg>
|
||||||
|
{lang}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -142,15 +142,19 @@ export default function PinnedRepos() {
|
|||||||
const [pinned, setPinned] = useState<PinnedRepo[]>([]);
|
const [pinned, setPinned] = useState<PinnedRepo[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch("https://pinned.berrysauce.dev/get/kleo-dev").then(r => {
|
fetch("https://pinned.berrysauce.dev/get/kleo-dev")
|
||||||
r.json().then(p => {
|
.then((r) => {
|
||||||
setPinned(p);
|
r.json()
|
||||||
}).catch(e => {
|
.then((p) => {
|
||||||
console.error(e)
|
setPinned(p);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.error(e);
|
||||||
|
});
|
||||||
})
|
})
|
||||||
}).catch(e => {
|
.catch((e) => {
|
||||||
console.error(e)
|
console.error(e);
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -170,8 +174,6 @@ export default function PinnedRepos() {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
return (
|
return <p>{e.toString()}</p>;
|
||||||
<p>{e.toString()}</p>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,13 +17,13 @@ export default function Skill({
|
|||||||
bg-black text-white text-sm px-2 py-1 rounded
|
bg-black text-white text-sm px-2 py-1 rounded
|
||||||
opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"
|
opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"
|
||||||
>
|
>
|
||||||
Skilled in {" "} {skill}
|
Skilled in {skill}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={icon}
|
icon={icon}
|
||||||
width={40}
|
width={40}
|
||||||
className={`text-red ${classInsert} cursor-pointer`}
|
className={`text-slate-300 ${classInsert} cursor-pointer`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user