Main pages
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
// app/projects/code/page.tsx
|
||||
|
||||
import MatrixRain from '@/app/components/MatrixRain';
|
||||
import { FaCodeBranch, FaGithub, FaGitlab, FaGlobe, FaStar } from 'react-icons/fa';
|
||||
|
||||
interface GithubProfile {
|
||||
html_url: string;
|
||||
avatar_url: string;
|
||||
name: string;
|
||||
login: string;
|
||||
bio: string;
|
||||
followers: number;
|
||||
public_repos: number;
|
||||
}
|
||||
|
||||
interface GithubRepo {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
html_url: string;
|
||||
language: string;
|
||||
stargazers_count: number;
|
||||
forks: number;
|
||||
}
|
||||
|
||||
interface GitlabRepo {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
web_url: string;
|
||||
star_count: number;
|
||||
forks_count: number;
|
||||
language?: string;
|
||||
}
|
||||
|
||||
async function getProfile(): Promise<GithubProfile | null> {
|
||||
try {
|
||||
const res = await fetch('https://api.github.com/users/WilliamSoderberg', { next: { revalidate: 60 } });
|
||||
if (!res.ok) return null;
|
||||
return res.json();
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function getGithubRepos(): Promise<GithubRepo[]> {
|
||||
try {
|
||||
const res = await fetch('https://api.github.com/users/WilliamSoderberg/repos?sort=updated', { next: { revalidate: 60 } });
|
||||
if (!res.ok) return [];
|
||||
return res.json();
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function getGitlabRepos(): Promise<GitlabRepo[]> {
|
||||
try {
|
||||
const res = await fetch('https://gitlab.soderberg.tech/api/v4/groups/soderberg-tech/projects', {
|
||||
next: { revalidate: 60 }
|
||||
});
|
||||
|
||||
if (!res.ok) return [];
|
||||
const projects: GitlabRepo[] = await res.json();
|
||||
const projectsWithLanguages = await Promise.all(
|
||||
projects.map(async (repo) => {
|
||||
try {
|
||||
const langRes = await fetch(`https://gitlab.soderberg.tech/api/v4/projects/${repo.id}/languages`, {
|
||||
next: { revalidate: 60 }
|
||||
});
|
||||
|
||||
if (langRes.ok) {
|
||||
const languages = await langRes.json();
|
||||
const topLanguage = Object.keys(languages).sort((a, b) => languages[b] - languages[a])[0];
|
||||
return { ...repo, language: topLanguage };
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Failed to fetch language for GitLab repo: ${repo.id}`);
|
||||
}
|
||||
return repo;
|
||||
})
|
||||
);
|
||||
|
||||
return projectsWithLanguages;
|
||||
} catch (e) {
|
||||
console.error("GitLab fetch failed, returning empty array");
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
const langColors: Record<string, string> = {
|
||||
JavaScript: 'bg-[#f1e05a]',
|
||||
TypeScript: 'bg-[#2b7489]',
|
||||
Python: 'bg-[#3572A5]',
|
||||
PHP: 'bg-[#4F5D95]',
|
||||
CSS: 'bg-[#563d7c]',
|
||||
HTML: 'bg-[#e44b23]',
|
||||
Vue: 'bg-[#41b883]'
|
||||
};
|
||||
|
||||
export default async function CodePage() {
|
||||
const [profile, githubRepos, gitlabRepos] = await Promise.all([
|
||||
getProfile(),
|
||||
getGithubRepos(),
|
||||
getGitlabRepos()
|
||||
]);
|
||||
|
||||
return (
|
||||
<main className="flex flex-col flex-1 relative min-h-dvh">
|
||||
<MatrixRain />
|
||||
|
||||
<div className="h-25 shrink-0"></div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-350 mx-auto px-4 pb-20 flex flex-col gap-16">
|
||||
|
||||
{/* 2. Profile Card Section */}
|
||||
{profile && (
|
||||
<section className="flex justify-center mt-10">
|
||||
<div className="relative flex flex-col justify-center items-center bg-linear-to-b from-[#333333]/90 to-[#2a2a2a]/90 backdrop-blur-lg rounded-3xl text-center p-8 shadow-[0_8px_32px_rgba(0,0,0,0.5)] w-full max-w-md border border-white/10">
|
||||
<a href={profile.html_url} target="_blank" rel="noopener noreferrer">
|
||||
<FaGithub className="absolute text-white text-[28px] top-5 right-5 hover:text-[#84c0a0] transition-colors" />
|
||||
</a>
|
||||
<div className="w-full">
|
||||
<div className="relative h-37.5 w-37.5 mx-auto mb-5">
|
||||
<img src={profile.avatar_url} alt="Avatar" className="h-full w-full rounded-full object-cover border-4 border-[#84c0a0] shadow-[0_0_15px_rgba(132,192,160,0.5)]" />
|
||||
</div>
|
||||
<h1 className="mb-1">
|
||||
<a className="text-white text-[26px] font-bold tracking-wide no-underline hover:text-[#84c0a0] transition-colors" href={profile.html_url} target="_blank" rel="noopener noreferrer">
|
||||
{profile.name}
|
||||
</a>
|
||||
</h1>
|
||||
<div className="mb-5">
|
||||
<a className="text-[#a0aab6] font-medium no-underline hover:text-white transition-colors" href={profile.html_url} target="_blank" rel="noopener noreferrer">
|
||||
@{profile.login}
|
||||
</a>
|
||||
</div>
|
||||
<p className="font-medium mx-auto text-[#84c0a0] mt-2.5 text-[15px] leading-relaxed">
|
||||
{profile.bio}
|
||||
</p>
|
||||
<div className="mt-8 relative border-t border-white/10 pt-5 flex justify-around">
|
||||
<div className="relative">
|
||||
<div className="text-white text-[22px] font-bold">{profile.followers}</div>
|
||||
<div className="text-[11px] font-bold text-[#a0aab6] tracking-widest uppercase mt-1">Followers</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="text-white text-[22px] font-bold">{profile.public_repos}</div>
|
||||
<div className="text-[11px] font-bold text-[#a0aab6] tracking-widest uppercase mt-1">Repositories</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 3. GitLab Repositories Section */}
|
||||
<section className="bg-[#fc6d26]/10 backdrop-blur-lg rounded-3xl border border-[#fc6d26]/30 p-8 shadow-2xl">
|
||||
<div className="flex justify-center items-center flex-col mb-10">
|
||||
<a href="https://gitlab.soderberg.tech/WilliamSoderberg" target="_blank" rel="noopener noreferrer">
|
||||
<FaGitlab className="text-[#fc6d26] text-[55px] drop-shadow-[0_0_15px_rgba(252,109,38,0.4)] hover:scale-110 transition-transform cursor-pointer" />
|
||||
</a>
|
||||
<h2 className="text-white mt-3.75 text-[32px] md:text-[38px] uppercase font-bold text-center tracking-wider">
|
||||
GitLab Projects
|
||||
</h2>
|
||||
<p className="text-gray-300 text-center max-w-2xl mt-3">Self-hosted infrastructure and private development.</p>
|
||||
</div>
|
||||
|
||||
{gitlabRepos.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 justify-center">
|
||||
{gitlabRepos.map((repo) => (
|
||||
<a key={repo.id} href={repo.web_url} target="_blank" rel="noopener noreferrer" className="group flex flex-col justify-between bg-linear-to-br from-[#2a2a2a]/90 to-[#222222]/90 border border-white/10 p-6 rounded-2xl hover:-translate-y-1 hover:border-[#fc6d26]/60 hover:shadow-[0_8px_24px_rgba(252,109,38,0.2)] transition-all duration-300 no-underline">
|
||||
<div>
|
||||
<h3 className="text-[#fc6d26] text-[19px] font-bold group-hover:text-white transition-colors truncate">
|
||||
{repo.name}
|
||||
</h3>
|
||||
<p className="text-[14px] mb-4 mt-2.5 text-gray-400 text-left line-clamp-3 leading-relaxed">
|
||||
{repo.description || 'No description provided.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center text-[13px] text-[#8b949e] mt-4 font-medium">
|
||||
{/* NEW: GitLab Language Badge */}
|
||||
{repo.language && (
|
||||
<div className="flex items-center mr-5">
|
||||
<span className={`w-2.5 h-2.5 rounded-full mr-2 ${langColors[repo.language] || 'bg-gray-500'}`}></span>
|
||||
<span className="text-gray-300">{repo.language}</span>
|
||||
</div>
|
||||
)}
|
||||
{repo.star_count > 0 && (
|
||||
<span className="flex items-center mr-4">
|
||||
<FaStar className="mr-1.5" /> {repo.star_count}
|
||||
</span>
|
||||
)}
|
||||
{repo.forks_count > 0 && (
|
||||
<span className="flex items-center">
|
||||
<FaCodeBranch className="mr-1.5" /> {repo.forks_count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-400 italic py-8 bg-black/20 rounded-xl">No public GitLab repositories found or API is restricted.</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* 4. GitHub Repositories Section */}
|
||||
<section className="bg-[#84c0a0]/10 backdrop-blur-lg rounded-3xl border border-[#84c0a0]/30 p-8 shadow-2xl">
|
||||
<div className="flex justify-center items-center flex-col mb-10">
|
||||
<FaGithub className="text-white text-[55px] drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]" />
|
||||
<h2 className="text-white mt-3.75 text-[32px] md:text-[38px] uppercase font-bold text-center tracking-wider">
|
||||
Public Repositories
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 justify-center">
|
||||
{githubRepos.map((repo) => (
|
||||
<a key={repo.id} href={repo.html_url} target="_blank" rel="noopener noreferrer" className="group flex flex-col justify-between bg-linear-to-br from-[#2a2a2a]/90 to-[#222222]/90 border border-white/10 p-6 rounded-2xl hover:-translate-y-1 hover:border-[#84c0a0]/60 hover:shadow-[0_8px_24px_rgba(132,192,160,0.2)] transition-all duration-300 no-underline">
|
||||
<div>
|
||||
<h3 className="text-[#4e9fff] text-[19px] font-bold group-hover:text-white transition-colors truncate">
|
||||
{repo.name}
|
||||
</h3>
|
||||
<p className="text-[14px] mb-4 mt-2.5 text-gray-400 text-left line-clamp-3 leading-relaxed">
|
||||
{repo.description || 'No description provided.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center text-[13px] text-[#8b949e] mt-4 font-medium">
|
||||
{repo.language && (
|
||||
<div className="flex items-center mr-5">
|
||||
<span className={`w-2.5 h-2.5 rounded-full mr-2 ${langColors[repo.language] || 'bg-gray-500'}`}></span>
|
||||
<span className="text-gray-300">{repo.language}</span>
|
||||
</div>
|
||||
)}
|
||||
{repo.stargazers_count > 0 && (
|
||||
<span className="flex items-center mr-4">
|
||||
<FaStar className="mr-1.5" /> {repo.stargazers_count}
|
||||
</span>
|
||||
)}
|
||||
{repo.forks > 0 && (
|
||||
<span className="flex items-center">
|
||||
<FaCodeBranch className="mr-1.5" /> {repo.forks}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. Hosted Websites Section */}
|
||||
<section className="bg-white/5 backdrop-blur-lg rounded-3xl border border-white/10 p-10 shadow-2xl">
|
||||
<div className="flex justify-center items-center flex-col mb-10">
|
||||
<FaGlobe className="text-white text-[55px] drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]" />
|
||||
<h2 className="text-white mt-3.75 text-[32px] md:text-[38px] uppercase font-bold text-center tracking-wider">
|
||||
Hosted Websites
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Changed from Flex to Grid for perfect centering! */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 max-w-5xl mx-auto justify-items-center items-center py-6">
|
||||
<a className="no-underline text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://soderberg.tech">
|
||||
<img src="/assets/logos/logo.svg" alt="Soderberg Tech" className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all" />
|
||||
<span className="font-bold tracking-wide text-center">Soderberg Tech</span>
|
||||
</a>
|
||||
<a className="no-underline text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://lirkab.se">
|
||||
<img src="/assets/logos/lirkab.svg" alt="Lirkab" className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all" />
|
||||
<span className="font-bold tracking-wide text-center">Lirkab</span>
|
||||
</a>
|
||||
<a className="no-underline text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://lerbergetsvolleyboll.se">
|
||||
<img src="/assets/logos/lvs.svg" alt="Lerbergets Volleyboll" className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all" />
|
||||
<span className="font-bold tracking-wide text-center">Lerbergets Volleyboll</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user