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

added animations and formated the code

Browse Source
This commit is contained in:
selimaj-dev
2025-01-04 21:19:52 +01:00
parent c8d7b6b17c
commit c085964c85
8 changed files with 233 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Background.css
+1 -2
View File
@@ -1,6 +1,6 @@
@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}
@@ -27,7 +27,6 @@
animation-iteration-count: infinite;
}
.background span:nth-child(0) {
color: #f5304c;
top: 24%;
src/components/Background.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import './Background.css';
import "./Background.css";
const Background = () => {
return (
@@ -32,7 +32,7 @@ const Background = () => {
<span></span>
<span></span>
<span></span>
</div>
</div>
);
};
src/components/Navbar.tsx
+24 -6
View File
@@ -1,6 +1,6 @@
'use client'
"use client";
import { usePathname } from 'next/navigation';
import { usePathname } from "next/navigation";
export default function Navbar() {
const pathname = usePathname();
@@ -9,17 +9,35 @@ export default function Navbar() {
<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" + (pathname === '/' ? ' text-red' : '')}>
<a
href="/"
className={
"hover:text-red transition-colors duration-300" +
(pathname === "/" ? " text-red" : "")
}
>
Home
</a>
<a href="/pricing" className={"hover:text-red transition-colors duration-300" + (pathname === '/pricing' ? ' text-red' : '')}>
<a
href="/pricing"
className={
"hover:text-red transition-colors duration-300" +
(pathname === "/pricing" ? " text-red" : "")
}
>
Pricing
</a>
<a href="/blog" className={"hover:text-red transition-colors duration-300" + (pathname === '/blog' ? ' text-red' : '')}>
<a
href="/blog"
className={
"hover:text-red transition-colors duration-300" +
(pathname === "/blog" ? " text-red" : "")
}
>
Blog
</a>
</div>
</div>
</nav>
);
};
}
src/components/PinnedRepos.tsx
+37 -17
View File
@@ -1,14 +1,21 @@
type PinnedRepo = {
author: string,
name: string,
description: string,
language: string,
stars: number,
forks: number,
href?: string,
author: string;
name: string;
description: string;
language: string;
stars: number;
forks: number;
href?: string;
};
export function Repo({name, description: desc, language: lang, stars, forks, href}: PinnedRepo) {
export function Repo({
name,
description: desc,
language: lang,
stars,
forks,
href,
}: PinnedRepo) {
return (
<div
className={`
@@ -37,7 +44,7 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
target="_blank"
rel="noreferrer"
className="hover:underline"
style={{ cursor: 'pointer' }}
style={{ cursor: "pointer" }}
>
{name}
</a>
@@ -49,7 +56,10 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
<div className="p-6 pt-0 mt-auto">
<div className="flex flex-wrap justify-between items-center gap-2">
<div className="flex items-center gap-2 sm:gap-4">
<div className="flex items-center gap-1 text-xs sm:text-sm" data-state="closed">
<div
className="flex items-center gap-1 text-xs sm:text-sm"
data-state="closed"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -66,7 +76,10 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
</svg>
<span className="text-gray-300">{stars}</span>
</div>
<div className="flex items-center gap-1 text-xs sm:text-sm" data-state="closed">
<div
className="flex items-center gap-1 text-xs sm:text-sm"
data-state="closed"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -88,7 +101,11 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
<span className="text-gray-300">{forks}</span>
</div>
</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" data-sentry-component="Badge" data-sentry-source-file="badge.tsx">
<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"
data-sentry-component="Badge"
data-sentry-source-file="badge.tsx"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -112,11 +129,13 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
</div>
</div>
</div>
)
);
}
export default async function PinnedRepos() {
const pinned: PinnedRepo[] = await (await fetch('https://pinned.berrysauce.dev/get/kleo-dev')).json();
const pinned: PinnedRepo[] = await (
await fetch("https://pinned.berrysauce.dev/get/kleo-dev")
).json();
return (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
@@ -129,8 +148,9 @@ export default async function PinnedRepos() {
language={repo.language}
stars={repo.stars}
forks={repo.forks}
href={`https://github.com/${repo.author}/${repo.name}`}/>
href={`https://github.com/${repo.author}/${repo.name}`}
/>
))}
</div>
)
}
);
}
src/components/Skill.tsx
+11 -5
View File
@@ -1,13 +1,19 @@
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}) {
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>
<span className="tooltip absolute bg-transparent-ish">{skill}</span>
</div>
);
}
}