selimaj-dev/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Monochrome bby

Browse Source
This commit is contained in:
selimaj-dev
2025-10-21 21:49:24 +02:00
parent 2d0eec48e2
commit ae19a1767a
5 changed files with 73 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+4 -4
View File
@@ -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>
); );
src/app/page.tsx
+25 -10
View File
@@ -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>
@@ -71,15 +71,30 @@ export default function App() {
</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>
src/components/Navbar.tsx
+4 -4
View File
@@ -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
src/components/PinnedRepos.tsx
+37 -35
View File
@@ -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>
);
} }
} }
src/components/Skill.tsx
+2 -2
View File
@@ -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>
); );