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

Updated portfolio

Browse Source
This commit is contained in:
selimaj-dev
2025-01-03 16:39:52 +01:00
parent 49288242b2
commit b56c19207f
23 changed files with 2002 additions and 4184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Background.css
+291
View File
@@ -0,0 +1,291 @@
@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}
.background {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: #000000;
overflow: hidden;
z-index: -1;
}
.background span {
width: 24vmin;
height: 24vmin;
border-radius: 24vmin;
backface-visibility: hidden;
position: absolute;
animation: move;
animation-duration: 6;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.background span:nth-child(0) {
color: #f5304c;
top: 24%;
left: 18%;
animation-duration: 220s;
animation-delay: -272s;
transform-origin: -5vw -4vh;
box-shadow: 48vmin 0 6.421535280295322vmin currentColor;
}
.background span:nth-child(1) {
color: #f5304c;
top: 86%;
left: 77%;
animation-duration: 91s;
animation-delay: -322s;
transform-origin: 14vw 0vh;
box-shadow: -48vmin 0 6.323515398437237vmin currentColor;
}
.background span:nth-child(2) {
color: #f5304c;
top: 17%;
left: 44%;
animation-duration: 248s;
animation-delay: -181s;
transform-origin: 0vw -7vh;
box-shadow: -48vmin 0 6.116084464270985vmin currentColor;
}
.background span:nth-child(3) {
color: #f5304c;
top: 43%;
left: 15%;
animation-duration: 98s;
animation-delay: -211s;
transform-origin: -21vw 8vh;
box-shadow: 48vmin 0 6.907246782805462vmin currentColor;
}
.background span:nth-child(4) {
color: #f5304c;
top: 66%;
left: 60%;
animation-duration: 241s;
animation-delay: -75s;
transform-origin: 15vw -9vh;
box-shadow: -48vmin 0 6.832728853871303vmin currentColor;
}
.background span:nth-child(5) {
color: #f5304c;
top: 79%;
left: 87%;
animation-duration: 207s;
animation-delay: -234s;
transform-origin: -19vw 4vh;
box-shadow: -48vmin 0 6.062609002101319vmin currentColor;
}
.background span:nth-child(6) {
color: #f5304c;
top: 45%;
left: 79%;
animation-duration: 243s;
animation-delay: -285s;
transform-origin: 11vw 25vh;
box-shadow: -48vmin 0 6.42616777258573vmin currentColor;
}
.background span:nth-child(7) {
color: #f5304c;
top: 43%;
left: 51%;
animation-duration: 227s;
animation-delay: -181s;
transform-origin: -23vw 1vh;
box-shadow: 48vmin 0 6.831515741167314vmin currentColor;
}
.background span:nth-child(8) {
color: #f5304c;
top: 21%;
left: 59%;
animation-duration: 228s;
animation-delay: -196s;
transform-origin: -23vw 23vh;
box-shadow: 48vmin 0 6.824335114512845vmin currentColor;
}
.background span:nth-child(9) {
color: #f5304c;
top: 95%;
left: 81%;
animation-duration: 202s;
animation-delay: -141s;
transform-origin: 17vw 24vh;
box-shadow: 48vmin 0 6.5732268320821685vmin currentColor;
}
.background span:nth-child(10) {
color: #f5304c;
top: 23%;
left: 90%;
animation-duration: 43s;
animation-delay: -406s;
transform-origin: -7vw -12vh;
box-shadow: 48vmin 0 6.1955583991481vmin currentColor;
}
.background span:nth-child(11) {
color: #f5304c;
top: 6%;
left: 94%;
animation-duration: 422s;
animation-delay: -38s;
transform-origin: -5vw 16vh;
box-shadow: 48vmin 0 6.212234588070589vmin currentColor;
}
.background span:nth-child(12) {
color: #f5304c;
top: 76%;
left: 22%;
animation-duration: 258s;
animation-delay: -58s;
transform-origin: -23vw -6vh;
box-shadow: 48vmin 0 6.165111619626152vmin currentColor;
}
.background span:nth-child(13) {
color: #f5304c;
top: 20%;
left: 80%;
animation-duration: 363s;
animation-delay: -411s;
transform-origin: 22vw 25vh;
box-shadow: -48vmin 0 6.179675889584371vmin currentColor;
}
.background span:nth-child(14) {
color: #f5304c;
top: 88%;
left: 36%;
animation-duration: 12s;
animation-delay: -69s;
transform-origin: -11vw -4vh;
box-shadow: -48vmin 0 6.07188338021629vmin currentColor;
}
.background span:nth-child(15) {
color: #f5304c;
top: 97%;
left: 11%;
animation-duration: 351s;
animation-delay: -130s;
transform-origin: -16vw -18vh;
box-shadow: 48vmin 0 6.558182158209241vmin currentColor;
}
.background span:nth-child(16) {
color: #f5304c;
top: 60%;
left: 99%;
animation-duration: 193s;
animation-delay: -67s;
transform-origin: 10vw 25vh;
box-shadow: 48vmin 0 6.570051729134467vmin currentColor;
}
.background span:nth-child(17) {
color: #f5304c;
top: 12%;
left: 8%;
animation-duration: 166s;
animation-delay: -69s;
transform-origin: 7vw -1vh;
box-shadow: -48vmin 0 6.742868690500271vmin currentColor;
}
.background span:nth-child(18) {
color: #f5304c;
top: 44%;
left: 38%;
animation-duration: 96s;
animation-delay: -279s;
transform-origin: 11vw 1vh;
box-shadow: -48vmin 0 6.261014277195781vmin currentColor;
}
.background span:nth-child(19) {
color: #f5304c;
top: 96%;
left: 77%;
animation-duration: 122s;
animation-delay: -355s;
transform-origin: 6vw 3vh;
box-shadow: -48vmin 0 6.438018625575824vmin currentColor;
}
.background span:nth-child(20) {
color: #f5304c;
top: 2%;
left: 81%;
animation-duration: 331s;
animation-delay: -355s;
transform-origin: 11vw -18vh;
box-shadow: -48vmin 0 6.555921470976377vmin currentColor;
}
.background span:nth-child(21) {
color: #f5304c;
top: 42%;
left: 9%;
animation-duration: 439s;
animation-delay: -233s;
transform-origin: -20vw -24vh;
box-shadow: -48vmin 0 6.570997236391078vmin currentColor;
}
.background span:nth-child(22) {
color: #f5304c;
top: 69%;
left: 23%;
animation-duration: 400s;
animation-delay: -390s;
transform-origin: -18vw -21vh;
box-shadow: 48vmin 0 6.279087258882428vmin currentColor;
}
.background span:nth-child(23) {
color: #f5304c;
top: 33%;
left: 95%;
animation-duration: 18s;
animation-delay: -98s;
transform-origin: 22vw 8vh;
box-shadow: -48vmin 0 6.088381708804739vmin currentColor;
}
.background span:nth-child(24) {
color: #f5304c;
top: 39%;
left: 69%;
animation-duration: 337s;
animation-delay: -83s;
transform-origin: 15vw -5vh;
box-shadow: -48vmin 0 6.515991392427649vmin currentColor;
}
.background span:nth-child(25) {
color: #f5304c;
top: 57%;
left: 17%;
animation-duration: 126s;
animation-delay: -93s;
transform-origin: -7vw 9vh;
box-shadow: 48vmin 0 6.431063119719202vmin currentColor;
}
.background span:nth-child(26) {
color: #f5304c;
top: 91%;
left: 76%;
animation-duration: 131s;
animation-delay: -256s;
transform-origin: -4vw 23vh;
box-shadow: 48vmin 0 6.370776053425152vmin currentColor;
}
.background span:nth-child(27) {
color: #f5304c;
top: 44%;
left: 65%;
animation-duration: 160s;
animation-delay: -235s;
transform-origin: -23vw 12vh;
box-shadow: 48vmin 0 6.34935032141241vmin currentColor;
}
.background span:nth-child(28) {
color: #f5304c;
top: 89%;
left: 36%;
animation-duration: 298s;
animation-delay: -400s;
transform-origin: -7vw 2vh;
box-shadow: -48vmin 0 6.935061205772426vmin currentColor;
}
src/components/Background.tsx
+39
View File
@@ -0,0 +1,39 @@
import './Background.css';
const Background = () => {
return (
<div className="background blur-2xl">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
);
};
export default Background;
src/components/Navbar.tsx
+26
View File
@@ -0,0 +1,26 @@
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"
>
<a href="/" className="hover:text-red transition-colors duration-300">
Home
</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">
Pricing
</a>
<a href="/blog" className="hover:text-red transition-colors duration-300">
Blog
</a>
</div>
</div>
</nav>
);
};
export default Navbar;
src/components/PinnedRepos.tsx
+135
View File
@@ -0,0 +1,135 @@
type PinnedRepo = {
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) {
return (
<div
className={`
group
relative
flex
size-full
overflow-hidden
rounded-xl
h-full border
border-red
hover:shadow-md
transition-shadow
duration-300
bg-transparent
backdrop-blur-xl
`}
>
<div className="w-full">
<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">
<h3 className="tracking-tight text-base sm:text-lg font-semibold text-red-400">
<a
href={href}
target="_blank"
rel="noreferrer"
className="hover:underline"
style={{ cursor: 'pointer' }}
>
{name}
</a>
</h3>
<p className="text-xs sm:text-sm text-gray-400 line-clamp-2 mt-1">
{desc}
</p>
</div>
<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">
<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-star text-yellow-500 h-3 w-3 sm:h-4 sm:w-4"
>
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
</svg>
<span className="text-gray-400">{stars}</span>
</div>
<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"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-git-fork text-gray-500 h-3 w-3 sm:h-4 sm:w-4"
>
<circle cx="12" cy="18" r="3" />
<circle cx="6" cy="6" r="3" />
<circle cx="18" cy="6" r="3" />
<path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" />
<path d="M12 12v3" />
</svg>
<span className="text-gray-400">{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">
<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" />
<path d="m6 8-4 4 4 4" />
<path d="m14.5 4-5 16" />
</svg>
{lang}
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default async function PinnedRepos() {
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">
{pinned.map((repo, i) => (
<Repo
key={i}
author={repo.author}
name={repo.name}
description={repo.description}
language={repo.language}
stars={repo.stars}
forks={repo.forks}
href={`https://github.com/${repo.author}/${repo.name}`}/>
))}
</div>
)
}