Light mode
This commit is contained in:
+42
-41
@@ -107,7 +107,7 @@ export default async function CodePage() {
|
||||
]);
|
||||
|
||||
return (
|
||||
<main className="flex flex-col flex-1 relative min-h-dvh">
|
||||
<main className="flex flex-col flex-1 relative min-h-dvh bg-slate-50/50 dark:bg-transparent transition-colors duration-300">
|
||||
<MatrixRain />
|
||||
|
||||
<div className="h-25 shrink-0"></div>
|
||||
@@ -117,35 +117,35 @@ export default async function CodePage() {
|
||||
{/* 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">
|
||||
<div className="relative flex flex-col justify-center items-center bg-white/90 dark:bg-linear-to-b dark:from-[#333333]/90 dark:to-[#2a2a2a]/90 backdrop-blur-lg rounded-3xl text-center p-8 shadow-xl dark:shadow-[0_8px_32px_rgba(0,0,0,0.5)] w-full max-w-md border border-slate-200 dark:border-white/10 transition-colors duration-300">
|
||||
<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" />
|
||||
<FaGithub className="absolute text-slate-800 dark:text-white text-[28px] top-5 right-5 hover:text-[#84c0a0] dark:hover:text-[#84c0a0] transition-colors" />
|
||||
</a>
|
||||
<div className="w-full">
|
||||
<div className="relative h-37.5 w-37.5 mx-auto mb-5">
|
||||
<Image src={profile.avatar_url} alt="Avatar" width={150} height={150} className="h-full w-full rounded-full object-cover border-4 border-[#58806a] dark:border-[#84c0a0] shadow-[0_0_15px_rgba(88,128,106,0.3)] dark:shadow-[0_0_15px_rgba(132,192,160,0.5)]" />
|
||||
<Image src={profile.avatar_url} alt="Avatar" width={150} height={150} className="h-full w-full rounded-full object-cover border-4 border-[#84c0a0]/50 dark:border-[#84c0a0] shadow-[0_0_15px_rgba(132,192,160,0.3)] dark: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">
|
||||
<a className="text-slate-900 dark:text-white text-[26px] font-bold tracking-wide no-underline hover:text-[#84c0a0] dark: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">
|
||||
<a className="text-slate-500 dark:text-[#a0aab6] font-medium no-underline hover:text-slate-800 dark: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="mt-8 relative border-t border-slate-200 dark:border-white/10 pt-5 flex justify-around transition-colors duration-300">
|
||||
<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 className="text-slate-900 dark:text-white text-[22px] font-bold transition-colors">{profile.followers}</div>
|
||||
<div className="text-[11px] font-bold text-slate-500 dark:text-[#a0aab6] tracking-widest uppercase mt-1 transition-colors">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 className="text-slate-900 dark:text-white text-[22px] font-bold transition-colors">{profile.public_repos}</div>
|
||||
<div className="text-[11px] font-bold text-slate-500 dark:text-[#a0aab6] tracking-widest uppercase mt-1 transition-colors">Repositories</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -154,35 +154,34 @@ export default async function CodePage() {
|
||||
)}
|
||||
|
||||
{/* 3. GitLab Repositories Section */}
|
||||
<section className="bg-[#fc6d26]/10 backdrop-blur-lg rounded-3xl border border-[#fc6d26]/30 p-8 shadow-2xl">
|
||||
<section className="bg-[#fc6d26]/15 dark:bg-[#fc6d26]/10 backdrop-blur-lg rounded-3xl border border-[#fc6d26]/20 dark:border-[#fc6d26]/30 p-8 shadow-xl dark:shadow-2xl transition-colors duration-300">
|
||||
<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">
|
||||
<h2 className="text-slate-900 dark:text-white mt-3.75 text-[32px] md:text-[38px] uppercase font-bold text-center tracking-wider transition-colors">
|
||||
GitLab Projects
|
||||
</h2>
|
||||
<p className="text-gray-300 text-center max-w-2xl mt-3">Self-hosted infrastructure and private development.</p>
|
||||
<p className="text-slate-600 dark:text-gray-300 text-center max-w-2xl mt-3 transition-colors">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">
|
||||
<a key={repo.id} href={repo.web_url} target="_blank" rel="noopener noreferrer" className="group flex flex-col justify-between bg-white/90 dark:bg-linear-to-br dark:from-[#2a2a2a]/90 dark:to-[#222222]/90 border border-slate-200 dark:border-white/10 p-6 rounded-2xl hover:-translate-y-1 hover:border-[#fc6d26]/60 dark:hover:border-[#fc6d26]/60 hover:shadow-[0_8px_24px_rgba(252,109,38,0.15)] dark: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">
|
||||
<h3 className="text-[#fc6d26] text-[19px] font-bold group-hover:text-slate-900 dark: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">
|
||||
<p className="text-[14px] mb-4 mt-2.5 text-slate-500 dark:text-gray-400 text-left line-clamp-3 leading-relaxed transition-colors">
|
||||
{repo.description || 'No description provided.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center text-[13px] text-[#8b949e] mt-4 font-medium">
|
||||
{/* NEW: GitLab Language Badge */}
|
||||
<div className="flex items-center text-[13px] text-slate-500 dark:text-[#8b949e] mt-4 font-medium transition-colors">
|
||||
{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>
|
||||
<span className="text-slate-600 dark:text-gray-300">{repo.language}</span>
|
||||
</div>
|
||||
)}
|
||||
{repo.star_count > 0 && (
|
||||
@@ -200,35 +199,35 @@ export default async function CodePage() {
|
||||
))}
|
||||
</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>
|
||||
<div className="text-center text-slate-500 dark:text-gray-400 italic py-8 bg-black/5 dark:bg-black/20 rounded-xl transition-colors">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">
|
||||
<section className="bg-[#84c0a0]/15 dark:bg-[#84c0a0]/10 backdrop-blur-lg rounded-3xl border border-[#84c0a0]/20 dark:border-[#84c0a0]/30 p-8 shadow-xl dark:shadow-2xl transition-colors duration-300">
|
||||
<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">
|
||||
<FaGithub className="text-slate-900 dark:text-white text-[55px] drop-shadow-md dark:drop-shadow-[0_0_15px_rgba(255,255,255,0.2)] transition-colors" />
|
||||
<h2 className="text-slate-900 dark:text-white mt-3.75 text-[32px] md:text-[38px] uppercase font-bold text-center tracking-wider transition-colors">
|
||||
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">
|
||||
<a key={repo.id} href={repo.html_url} target="_blank" rel="noopener noreferrer" className="group flex flex-col justify-between bg-white/90 dark:bg-linear-to-br dark:from-[#2a2a2a]/90 dark:to-[#222222]/90 border border-slate-200 dark: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.15)] dark: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">
|
||||
<h3 className="text-[#4e9fff] text-[19px] font-bold group-hover:text-slate-900 dark: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">
|
||||
<p className="text-[14px] mb-4 mt-2.5 text-slate-500 dark:text-gray-400 text-left line-clamp-3 leading-relaxed transition-colors">
|
||||
{repo.description || 'No description provided.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center text-[13px] text-[#8b949e] mt-4 font-medium">
|
||||
<div className="flex items-center text-[13px] text-slate-500 dark:text-[#8b949e] mt-4 font-medium transition-colors">
|
||||
{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>
|
||||
<span className="text-slate-600 dark:text-gray-300">{repo.language}</span>
|
||||
</div>
|
||||
)}
|
||||
{repo.stargazers_count > 0 && (
|
||||
@@ -248,31 +247,33 @@ export default async function CodePage() {
|
||||
</section>
|
||||
|
||||
{/* 5. Hosted Websites Section */}
|
||||
<section className="bg-white/5 backdrop-blur-lg rounded-3xl border border-white/10 p-10 shadow-2xl">
|
||||
<section className="bg-white/80 dark:bg-white/5 backdrop-blur-lg rounded-3xl border border-slate-200 dark:border-white/10 p-10 shadow-xl dark:shadow-2xl transition-colors duration-300">
|
||||
<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">
|
||||
<FaGlobe className="text-slate-900 dark:text-white text-[55px] drop-shadow-md dark:drop-shadow-[0_0_15px_rgba(255,255,255,0.2)] transition-colors" />
|
||||
<h2 className="text-slate-900 dark:text-white mt-3.75 text-[32px] md:text-[38px] uppercase font-bold text-center tracking-wider transition-colors">
|
||||
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-gray-900 dark:text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://soderberg.tech">
|
||||
<Image src="/assets/logos/logo.svg" alt="Soderberg Tech" width={90} height={65} className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-[0_0_10px_rgba(0,0,0,0.2)] dark:group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all dark:invert-0 filter invert" />
|
||||
<div className="flex flex-wrap justify-center gap-12 max-w-5xl mx-auto py-6">
|
||||
<a className="w-full md:w-[calc(33.333%-32px)] no-underline text-slate-900 dark:text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://soderberg.tech">
|
||||
<Image src="/assets/logos/logo.svg" alt="Soderberg Tech" width={90} height={65} className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-lg dark:group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all dark:invert-0 filter invert" />
|
||||
<span className="font-bold tracking-wide text-center">Soderberg Tech</span>
|
||||
</a>
|
||||
<a className="no-underline text-gray-900 dark:text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://lirkab.se">
|
||||
<Image src="/assets/logos/lirkab.svg" alt="Lirkab" width={90} height={65} className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-[0_0_10px_rgba(0,0,0,0.2)] dark:group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all dark:invert-0 filter invert" />
|
||||
<a className="w-full md:w-[calc(33.333%-32px)] no-underline text-slate-900 dark:text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://lirkab.se">
|
||||
<Image src="/assets/logos/lirkab.svg" alt="Lirkab" width={90} height={65} className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-lg dark:group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all dark:invert-0 filter invert" />
|
||||
<span className="font-bold tracking-wide text-center">Lirkab</span>
|
||||
</a>
|
||||
<a className="no-underline text-gray-900 dark:text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://lerbergetsvolleyboll.se">
|
||||
<Image src="/assets/logos/lvs.svg" alt="Lerbergets Volleyboll" width={90} height={65} className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-[0_0_10px_rgba(0,0,0,0.2)] dark:group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all dark:invert-0 filter invert" />
|
||||
<a className="w-full md:w-[calc(33.333%-32px)] no-underline text-slate-900 dark:text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://lerbergetsvolleyboll.se">
|
||||
<Image src="/assets/logos/lvs.svg" alt="Lerbergets Volleyboll" width={90} height={65} className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-lg dark:group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all dark:invert-0 filter invert" />
|
||||
<span className="font-bold tracking-wide text-center">Lerbergets Volleyboll</span>
|
||||
</a>
|
||||
<a className="w-full md:w-[calc(33.333%-32px)] no-underline text-slate-900 dark:text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://naturvardarna.com">
|
||||
<Image src="/assets/logos/naturvardarna.svg" alt="Naturvärdarna Kullaberg" width={90} height={65} className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-lg dark:group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all dark:invert-0 filter invert" />
|
||||
<span className="font-bold tracking-wide text-center">Naturvärdarna Kullaberg</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -60,22 +60,30 @@ export default function DesignPage() {
|
||||
const showOverlay = isPending || !isSceneReady;
|
||||
|
||||
return (
|
||||
<main className="flex flex-col flex-1 relative bg-[#0d1117] overflow-hidden">
|
||||
<main className="flex flex-col flex-1 relative bg-slate-50 dark:bg-[#0d1117] overflow-hidden transition-colors duration-300">
|
||||
{/* Background Glow */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-200 h-200 bg-[#84c0a0]/10 blur-[150px] rounded-full pointer-events-none z-0"></div>
|
||||
<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-10">
|
||||
<div className="pt-5 flex justify-center items-center flex-col text-center">
|
||||
<TbCube3dSphere className="text-white text-[80px] drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]" />
|
||||
<h2 className="text-white text-[32px] md:text-[45px] uppercase mt-3.75 font-bold tracking-wider">CAD Library</h2>
|
||||
{/* Changed from flex-col to lg:flex-row for side-by-side layout on desktop */}
|
||||
<div className="relative z-10 w-full max-w-450 mx-auto px-4 lg:px-12 pb-20 flex flex-col lg:flex-row gap-10 lg:gap-16 items-center lg:items-start pt-10">
|
||||
|
||||
{/* 1. Title Section (Now on the left and sticky!) */}
|
||||
<div className="w-full lg:w-1/3 flex flex-col justify-center items-center lg:items-start text-center lg:text-left pt-5 lg:sticky lg:top-40">
|
||||
<TbCube3dSphere className="text-slate-900 dark:text-white text-[80px] drop-shadow-md dark:drop-shadow-[0_0_15px_rgba(255,255,255,0.2)] transition-colors" />
|
||||
<h2 className="text-slate-900 dark:text-white text-[32px] md:text-[45px] uppercase mt-4 font-bold tracking-wider transition-colors leading-tight">CAD Library</h2>
|
||||
<p className="text-slate-500 dark:text-gray-400 mt-4 text-base md:text-lg leading-relaxed transition-colors">
|
||||
Explore my 3D modeling and design work. Interact with the models using your mouse or touch screen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section className="w-full flex justify-center">
|
||||
<div className="w-full relative bg-white/5 backdrop-blur-xl rounded-4xl border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 md:p-8 flex flex-col">
|
||||
<div className="w-full h-[50vh] md:h-[65vh] rounded-[20px] overflow-hidden relative bg-linear-to-br from-[#1a1a1a] to-[#0f0f0f] shadow-inner border border-white/5 cursor-grab active:cursor-grabbing">
|
||||
{/* 2. Viewer Section (Now taking up the right side) */}
|
||||
<section className="w-full lg:w-2/3 flex justify-center">
|
||||
<div className="w-full relative bg-white/80 dark:bg-white/5 backdrop-blur-xl rounded-4xl border border-slate-200 dark:border-white/10 shadow-xl dark:shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 md:p-8 flex flex-col transition-colors duration-300">
|
||||
<div className="w-full h-[50vh] md:h-[60vh] rounded-[20px] overflow-hidden relative bg-slate-200 dark:bg-linear-to-br dark:from-[#1a1a1a] dark:to-[#0f0f0f] shadow-inner border border-slate-300 dark:border-white/5 cursor-grab active:cursor-grabbing transition-colors duration-300">
|
||||
|
||||
{showOverlay && (
|
||||
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-[#0d1117]/80 backdrop-blur-md transition-all duration-500">
|
||||
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-slate-100/80 dark:bg-[#0d1117]/80 backdrop-blur-md transition-all duration-500">
|
||||
<div className="w-12 h-12 border-4 border-[#84c0a0]/20 border-t-[#84c0a0] rounded-full animate-spin mb-4"></div>
|
||||
<p className="text-[#84c0a0] font-mono text-xs uppercase tracking-[0.2em] font-bold">
|
||||
{isPending ? "Fetching Data..." : "Compiling Materials..."}
|
||||
@@ -122,7 +130,7 @@ export default function DesignPage() {
|
||||
innerStyles={{ display: 'none' }}
|
||||
/>
|
||||
|
||||
<a href={`/models/${activeModel}.usdz`} rel="ar" className="absolute top-4 right-4 bg-black/50 backdrop-blur-md text-white text-sm px-4 py-2 rounded-full border border-white/10 hover:bg-white/20 transition-colors md:hidden z-10 flex items-center gap-2">
|
||||
<a href={`/models/${activeModel}.usdz`} rel="ar" className="absolute top-4 right-4 bg-white/80 dark:bg-black/50 text-slate-900 dark:text-white backdrop-blur-md text-sm px-4 py-2 rounded-full border border-slate-300 dark:border-white/10 hover:bg-slate-100 dark:hover:bg-white/20 transition-colors md:hidden z-10 flex items-center gap-2">
|
||||
<Image
|
||||
src={`/models/${activeModel}.png`}
|
||||
alt="AR Preview"
|
||||
@@ -140,15 +148,15 @@ export default function DesignPage() {
|
||||
<button
|
||||
key={model.name}
|
||||
className={`shrink-0 w-20 h-20 md:w-25 md:h-25 bg-contain bg-no-repeat bg-center rounded-2xl transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#84c0a0] relative group ${activeModel === model.src
|
||||
? 'bg-[#2a2a2a] border-2 border-[#84c0a0] scale-110 shadow-[0_0_20px_rgba(132,192,160,0.3)]'
|
||||
: 'bg-[#1a1a1a] border border-white/10 hover:bg-[#252525] hover:-translate-y-1'
|
||||
? 'bg-white dark:bg-[#2a2a2a] border-2 border-[#84c0a0] scale-110 shadow-[0_0_20px_rgba(132,192,160,0.3)]'
|
||||
: 'bg-slate-100 dark:bg-[#1a1a1a] border border-slate-200 dark:border-white/10 hover:bg-slate-200 dark:hover:bg-[#252525] hover:-translate-y-1'
|
||||
}`}
|
||||
style={{ backgroundImage: `url('/models/${model.src}.png')` }}
|
||||
onClick={() => handleModelChange(model.src)}
|
||||
onMouseEnter={() => useGLTF.preload(`/models/${model.src}.glb`)}
|
||||
aria-label={`View ${model.name} model`}
|
||||
>
|
||||
<span className="absolute -bottom-8 left-1/2 -translate-x-1/2 text-xs font-semibold text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black/80 px-2 py-1 rounded">
|
||||
<span className="absolute -bottom-8 left-1/2 -translate-x-1/2 text-xs font-semibold text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-slate-800/90 dark:bg-black/80 px-2 py-1 rounded">
|
||||
{model.name}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
+11
-11
@@ -7,17 +7,17 @@ import { FaCode } from 'react-icons/fa';
|
||||
|
||||
export default function ProjectsPage() {
|
||||
return (
|
||||
<main className="flex flex-col flex-1 relative bg-[#0d1117] overflow-x-hidden">
|
||||
<main className="flex flex-col flex-1 relative bg-slate-50 dark:bg-[#0d1117] overflow-x-hidden transition-colors duration-300">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-150 md:w-250 h-150 md:h-250 bg-[#84c0a0]/10 blur-[150px] rounded-full pointer-events-none z-0"></div>
|
||||
|
||||
<div className="h-25 shrink-0"></div>
|
||||
|
||||
<div className="relative z-10 flex-1 flex flex-col justify-center items-center py-10 md:py-20 px-6">
|
||||
<div className="mb-12 text-center">
|
||||
<h1 className="text-white text-[32px] md:text-[55px] uppercase font-extrabold tracking-wider drop-shadow-lg">
|
||||
<h1 className="text-slate-900 dark:text-white text-[32px] md:text-[55px] uppercase font-extrabold tracking-wider drop-shadow-lg transition-colors">
|
||||
My Portfolios
|
||||
</h1>
|
||||
<p className="text-[#a0aab6] mt-2 text-base md:text-xl max-w-md mx-auto">
|
||||
<p className="text-slate-600 dark:text-[#a0aab6] mt-2 text-base md:text-xl max-w-md mx-auto transition-colors">
|
||||
Choose a discipline to explore my work.
|
||||
</p>
|
||||
</div>
|
||||
@@ -26,12 +26,12 @@ export default function ProjectsPage() {
|
||||
|
||||
<Link
|
||||
href="/projects/code"
|
||||
className="relative flex-1 group min-h-75 md:h-125 rounded-4xl overflow-hidden border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.5)] transition-all duration-500 hover:-translate-y-2 hover:border-[#84c0a0]/60 no-underline"
|
||||
className="relative flex-1 group min-h-75 md:h-125 rounded-4xl overflow-hidden border border-slate-300 dark:border-white/10 shadow-xl dark:shadow-[0_8px_32px_rgba(0,0,0,0.5)] transition-all duration-500 hover:-translate-y-2 hover:border-[#84c0a0]/60 no-underline"
|
||||
>
|
||||
<BlurredCode />
|
||||
<div className="absolute inset-0 z-10 bg-[#0d1117]/60 backdrop-blur-[2px] group-hover:bg-[#0d1117]/20 group-hover:backdrop-blur-[1px] transition-all duration-500 flex flex-col justify-center items-center p-8">
|
||||
<FaCode className="text-white text-[50px] md:text-[80px] mb-4 md:mb-6 opacity-80 group-hover:opacity-100 group-hover:scale-110 group-hover:text-[#84c0a0] transition-all duration-500" />
|
||||
<h2 className="text-white text-[32px] md:text-[50px] font-bold text-center tracking-wide">
|
||||
<div className="absolute inset-0 z-10 bg-slate-50/10 dark:bg-[#0d1117]/60 backdrop-blur-[1px] group-hover:bg-slate-50/20 dark:group-hover:bg-[#0d1117]/20 group-hover:backdrop-blur-[2px] transition-all duration-500 flex flex-col justify-center items-center p-8">
|
||||
<FaCode className="text-slate-900 dark:text-white text-[50px] md:text-[80px] mb-4 md:mb-6 opacity-80 group-hover:opacity-100 group-hover:scale-110 group-hover:text-[#84c0a0] dark:group-hover:text-[#84c0a0] transition-all duration-500" />
|
||||
<h2 className="text-slate-900 dark:text-white text-[32px] md:text-[50px] font-bold text-center tracking-wide transition-colors">
|
||||
Coding
|
||||
</h2>
|
||||
</div>
|
||||
@@ -39,16 +39,16 @@ export default function ProjectsPage() {
|
||||
|
||||
<Link
|
||||
href="/projects/design"
|
||||
className="relative flex-1 group min-h-75 md:h-125 rounded-4xl overflow-hidden border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.5)] transition-all duration-500 hover:-translate-y-2 hover:border-[#84c0a0]/60 no-underline"
|
||||
className="relative flex-1 group min-h-75 md:h-125 rounded-4xl overflow-hidden border border-slate-300 dark:border-white/10 shadow-xl dark:shadow-[0_8px_32px_rgba(0,0,0,0.5)] transition-all duration-500 hover:-translate-y-2 hover:border-[#84c0a0]/60 no-underline"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 z-0 bg-center bg-cover bg-no-repeat opacity-40 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700"
|
||||
style={{ backgroundImage: `url('/assets/images/CAD.png')` }}
|
||||
></div>
|
||||
|
||||
<div className="absolute inset-0 z-10 bg-[#0d1117]/60 backdrop-blur-[2px] group-hover:bg-[#0d1117]/20 group-hover:backdrop-blur-[1px] transition-all duration-500 flex flex-col justify-center items-center p-8">
|
||||
<TbCube3dSphere className="text-white text-[50px] md:text-[80px] mb-4 md:mb-6 opacity-80 group-hover:opacity-100 group-hover:scale-110 group-hover:text-[#84c0a0] transition-all duration-500" />
|
||||
<h2 className="text-white text-[32px] md:text-[50px] font-bold text-center tracking-wide">
|
||||
<div className="absolute inset-0 z-10 bg-slate-50/10 dark:bg-[#0d1117]/60 backdrop-blur-[3px] group-hover:bg-slate-50/20 dark:group-hover:bg-[#0d1117]/20 group-hover:backdrop-blur-[2px] transition-all duration-500 flex flex-col justify-center items-center p-8">
|
||||
<TbCube3dSphere className="text-slate-900 dark:text-white text-[50px] md:text-[80px] mb-4 md:mb-6 opacity-80 group-hover:opacity-100 group-hover:scale-110 group-hover:text-[#84c0a0] dark:group-hover:text-[#84c0a0] transition-all duration-500" />
|
||||
<h2 className="text-slate-900 dark:text-white text-[32px] md:text-[50px] font-bold text-center tracking-wide transition-colors">
|
||||
CAD & Design
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user