Skip to content

Commit b3ec87e

Browse files
codeaashucodeaashu
committed
feat: add animated background pattern to GSoC page for enhanced visual appeal
1 parent 9094273 commit b3ec87e

1 file changed

Lines changed: 164 additions & 63 deletions

File tree

  • src/Page/OpportunitiesHub/opensource

‎src/Page/OpportunitiesHub/opensource/gsoc.jsx‎

Lines changed: 164 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23
import GsocLoader from '../../../components/GsocLoader';
34

45
const proposals = [
@@ -347,6 +348,101 @@ const proposals = [
347348
},
348349
];
349350

351+
const Pattern = () => {
352+
return (
353+
<StyledWrapper>
354+
<div className="matrix-container">
355+
<div className="matrix-grid" />
356+
</div>
357+
</StyledWrapper>
358+
);
359+
};
360+
361+
const StyledWrapper = styled.div`
362+
width: 100%;
363+
height: 100%;
364+
.matrix-container {
365+
width: 100%;
366+
height: 100%;
367+
perspective: 1500px;
368+
position: relative;
369+
background-color: #0d0d1a;
370+
overflow: hidden;
371+
}
372+
373+
.matrix-grid {
374+
width: 100%;
375+
height: 100%;
376+
background:
377+
linear-gradient(#262645 1px, transparent 1px), linear-gradient(90deg, #262645 1px, transparent 1px),
378+
repeating-linear-gradient(45deg, rgba(0, 255, 170, 0.05) 0px 1px, transparent 1px 12px),
379+
repeating-linear-gradient(-45deg, rgba(0, 255, 170, 0.05) 0px 1px, transparent 1px 12px),
380+
radial-gradient(circle at center, #0a0a1a 0%, #000 100%);
381+
background-size:
382+
28px 28px,
383+
28px 28px,
384+
50px 50px,
385+
50px 50px,
386+
cover;
387+
border: 1px solid rgba(0, 255, 170, 0.1);
388+
box-shadow:
389+
inset 0 0 40px rgba(0, 255, 170, 0.1),
390+
0 0 60px rgba(0, 255, 170, 0.15);
391+
transform-style: preserve-3d;
392+
transition: all 0.6s ease-in-out;
393+
position: relative;
394+
}
395+
396+
.matrix-grid::before {
397+
content: '';
398+
position: absolute;
399+
top: 0;
400+
left: 0;
401+
right: 0;
402+
bottom: 0;
403+
background: linear-gradient(90deg, transparent, rgba(0, 255, 170, 0.4), transparent);
404+
animation: borderFlow 6s linear infinite;
405+
pointer-events: none;
406+
mask:
407+
linear-gradient(#fff 0 0) padding-box,
408+
linear-gradient(#fff 0 0);
409+
mask-composite: exclude;
410+
}
411+
412+
.matrix-grid::after {
413+
content: '';
414+
position: absolute;
415+
top: 50%;
416+
left: 50%;
417+
width: 160px;
418+
height: 160px;
419+
background: radial-gradient(circle, rgba(0, 255, 170, 0.15) 0%, transparent 70%);
420+
transform: translate(-50%, -50%);
421+
animation: pulse 3.5s ease-in-out infinite alternate;
422+
z-index: 1;
423+
}
424+
425+
@keyframes borderFlow {
426+
0% {
427+
background-position: 0% 50%;
428+
}
429+
100% {
430+
background-position: 200% 50%;
431+
}
432+
}
433+
434+
@keyframes pulse {
435+
0% {
436+
transform: translate(-50%, -50%) scale(0.85);
437+
opacity: 0.2;
438+
}
439+
100% {
440+
transform: translate(-50%, -50%) scale(1.1);
441+
opacity: 0.5;
442+
}
443+
}
444+
`;
445+
350446
const ProposalCard = ({ name, organization, project, proposal }) => {
351447
return (
352448
<div className="flex flex-col gap-4 rounded-2xl border border-slate-800 bg-slate-900/70 p-5 shadow-xl transition hover:-translate-y-1 hover:shadow-2xl">
@@ -380,77 +476,82 @@ const ProposalCard = ({ name, organization, project, proposal }) => {
380476

381477
export default function GsocPage() {
382478
return (
383-
<main className="min-h-screen bg-slate-950 text-white">
384-
<section className="relative overflow-hidden bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950">
385-
<div className="absolute inset-0 opacity-10">
386-
<div className="absolute right-10 top-10 h-96 w-96 rounded-full bg-cyan-500 blur-3xl" />
387-
<div className="absolute bottom-10 left-10 h-96 w-96 rounded-full bg-blue-500 blur-3xl" />
388-
</div>
389-
</section>
479+
<div className="relative min-h-screen w-full">
480+
<div className="fixed inset-0 z-0">
481+
<Pattern />
482+
</div>
483+
<main className="relative z-10 min-h-screen text-white">
484+
<section className="relative overflow-hidden">
485+
<div className="absolute inset-0 opacity-10">
486+
<div className="absolute right-10 top-10 h-96 w-96 rounded-full bg-cyan-500 blur-3xl" />
487+
<div className="absolute bottom-10 left-10 h-96 w-96 rounded-full bg-blue-500 blur-3xl" />
488+
</div>
489+
</section>
390490

391-
<section className="relative overflow-hidden bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 px-4 py-12 sm:px-6 sm:py-16 md:py-20 lg:py-24">
392-
<div className="absolute inset-0 opacity-10">
393-
<div className="absolute right-2 top-2 h-40 w-40 rounded-full bg-cyan-500 blur-2xl sm:right-4 sm:top-4 sm:h-48 sm:w-48 sm:blur-3xl md:right-10 md:top-10 md:h-96 md:w-96" />
394-
<div className="absolute bottom-2 left-2 h-40 w-40 rounded-full bg-blue-500 blur-2xl sm:bottom-4 sm:left-4 sm:h-48 sm:w-48 sm:blur-3xl md:bottom-10 md:left-10 md:h-96 md:w-96" />
395-
</div>
396-
<div className="relative z-10 mx-auto grid max-w-7xl items-center gap-8 sm:gap-10 md:grid-cols-2 md:gap-32">
397-
<div className="space-y-4 text-center md:text-left">
398-
<p className="animate-text-gradient bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 bg-[length:200%_auto] bg-clip-text pb-2 text-xl font-semibold tracking-wide text-transparent sm:text-5xl">
399-
Everything
400-
</p>
401-
<p className="animate-text-gradient bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 bg-[length:200%_auto] bg-clip-text pb-2 text-xl font-semibold tracking-wide text-transparent sm:text-5xl">
402-
You Need to Decode:
403-
</p>
404-
<div className="flex justify-center md:justify-start">
405-
<div className="relative max-w-md overflow-hidden rounded-3xl border border-slate-800 bg-slate-900 shadow-2xl">
406-
<img
407-
src="/assets/opensourceProgram/GSOC.png"
408-
alt="Google Summer of Code 2026"
409-
className="h-auto w-full object-cover"
410-
/>
491+
<section className="relative overflow-hidden px-4 py-12 sm:px-6 sm:py-16 md:py-20 lg:py-24">
492+
<div className="absolute inset-0 opacity-10">
493+
<div className="absolute right-2 top-2 h-40 w-40 rounded-full bg-cyan-500 blur-2xl sm:right-4 sm:top-4 sm:h-48 sm:w-48 sm:blur-3xl md:right-10 md:top-10 md:h-96 md:w-96" />
494+
<div className="absolute bottom-2 left-2 h-40 w-40 rounded-full bg-blue-500 blur-2xl sm:bottom-4 sm:left-4 sm:h-48 sm:w-48 sm:blur-3xl md:bottom-10 md:left-10 md:h-96 md:w-96" />
495+
</div>
496+
<div className="relative z-10 mx-auto grid max-w-7xl items-center gap-8 sm:gap-10 md:grid-cols-2 md:gap-32">
497+
<div className="space-y-4 text-center md:text-left">
498+
<p className="animate-text-gradient bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 bg-[length:200%_auto] bg-clip-text pb-2 text-xl font-semibold tracking-wide text-transparent sm:text-5xl">
499+
Everything
500+
</p>
501+
<p className="animate-text-gradient bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 bg-[length:200%_auto] bg-clip-text pb-2 text-xl font-semibold tracking-wide text-transparent sm:text-5xl">
502+
You Need to Decode:
503+
</p>
504+
<div className="flex justify-center md:justify-start">
505+
<div className="relative max-w-md overflow-hidden rounded-3xl border border-slate-800 bg-slate-900 shadow-2xl">
506+
<img
507+
src="/assets/opensourceProgram/GSOC.png"
508+
alt="Google Summer of Code 2026"
509+
className="h-auto w-full object-cover"
510+
/>
511+
</div>
411512
</div>
412513
</div>
514+
<GsocLoader />
413515
</div>
414-
<GsocLoader />
415-
</div>
416-
</section>
516+
</section>
417517

418-
<section className="bg-slate-900 px-4 py-8 sm:px-6 sm:py-10 md:py-12">
419-
<div className="mx-auto flex max-w-5xl flex-col gap-4 sm:gap-6">
420-
<div className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/80 shadow-xl">
421-
<div className="px-6 py-5 text-center">
422-
<a
423-
href="https://www.gsocorganizations.dev/"
424-
target="_blank"
425-
rel="noreferrer"
426-
className="inline-flex items-center justify-center rounded-full bg-cyan-500/20 px-4 py-2 text-base font-semibold text-cyan-100 transition hover:bg-cyan-500/30"
427-
>
428-
List of GSoC Organizations
429-
</a>
518+
<section className="px-4 py-8 sm:px-6 sm:py-10 md:py-12">
519+
<div className="mx-auto flex max-w-5xl flex-col gap-4 sm:gap-6">
520+
<div className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/80 shadow-xl">
521+
<div className="px-6 py-5 text-center">
522+
<a
523+
href="https://www.gsocorganizations.dev/"
524+
target="_blank"
525+
rel="noreferrer"
526+
className="inline-flex items-center justify-center rounded-full bg-cyan-500/20 px-4 py-2 text-base font-semibold text-cyan-100 transition hover:bg-cyan-500/30"
527+
>
528+
List of GSoC Organizations
529+
</a>
530+
</div>
430531
</div>
431-
</div>
432532

433-
<div className="space-y-2 sm:space-y-3">
434-
<h2 className="text-xl font-bold sm:text-2xl">Participant Proposals</h2>
435-
<p className="text-sm text-slate-300 sm:text-base">
436-
Explore the mentors, orgs, and proposals alumni have worked on. Tap any card to view their project and
437-
proposal.
438-
</p>
439-
</div>
533+
<div className="space-y-2 sm:space-y-3">
534+
<h2 className="text-xl font-bold sm:text-2xl">Participant Proposals</h2>
535+
<p className="text-sm text-slate-300 sm:text-base">
536+
Explore the mentors, orgs, and proposals alumni have worked on. Tap any card to view their project and
537+
proposal.
538+
</p>
539+
</div>
440540

441-
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
442-
{proposals.map((entry) => (
443-
<ProposalCard
444-
key={`${entry.name}-${entry.organization}`}
445-
name={entry.name}
446-
organization={entry.organization}
447-
project={entry.project}
448-
proposal={entry.proposal}
449-
/>
450-
))}
541+
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
542+
{proposals.map((entry) => (
543+
<ProposalCard
544+
key={`${entry.name}-${entry.organization}`}
545+
name={entry.name}
546+
organization={entry.organization}
547+
project={entry.project}
548+
proposal={entry.proposal}
549+
/>
550+
))}
551+
</div>
451552
</div>
452-
</div>
453-
</section>
454-
</main>
553+
</section>
554+
</main>
555+
</div>
455556
);
456557
}

0 commit comments

Comments
 (0)