Skip to content

Added the scrolling effect to fix #372 #389

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Added the scrolling effect to fix #372 #389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9dd44c7
Added the scrolling effect
Feb 14, 2025
d5a9ff5
Added Hover effert
Feb 20, 2025
7625312
Merge branch 'AOSSIE-Org:main' into main
myselfsatyam Feb 20, 2025
0666c77
Merge branch 'main' into main
myselfsatyam Mar 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/pages/ideas/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,9 @@ export default function Ideas({ articles }) {
</div>
<p className="font-mono text-lg leading-7 text-zinc-600 dark:text-zinc-400">
Explore the world of open-source possibilities with AOSSIE&apos;s{' '}
<b>Idea List</b>. As part of {' '}
<b>Idea List</b>. As part of{' '}

<b>Google Summer of Code 2025</b>, we offer
a unique opportunity for developers to explore new ideas, a wide
variety of projects for developers to choose from and contribute to.
Expand All @@ -123,7 +125,7 @@ export default function Ideas({ articles }) {
className="group order-2 mx-auto items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white focus:outline-none dark:bg-white dark:text-black"
href="/ideas/2024"
>
<span className="text-center font-mono font-semibold">
<span className="text-center font-mono font-semibold transition-colors duration-300 group-hover:text-yellow-400 dark:group-hover:text-yellow-300">
View 2024 Idea List
</span>
</Link>
Expand All @@ -139,5 +141,7 @@ export async function getStaticProps() {
props: {
articles: (await getAllIdeas()).map(({ component, ...meta }) => meta),
},
}
}
};
}
54 changes: 52 additions & 2 deletions src/pages/projects.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@

import Image from 'next/image'
import Head from 'next/head'
import { useRef } from 'react'; // Import useRef for referencing the section
import { Container } from '@/components/Container'
import { SectionHeading } from '@/components/SectionHeading'
import { Card } from '@/components/Card'
import Head from 'next/head';
import Grid from '@mui/material/Grid';
import MuiCard from '@mui/material/Card';
Expand Down Expand Up @@ -128,28 +135,71 @@ const styles = {
};

export default function Projects() {
const activeProjectsRef = useRef(null); // Create a ref for the active projects section

const scrollToActiveProjects = () => {
if (activeProjectsRef.current) {
activeProjectsRef.current.scrollIntoView({ behavior: 'smooth' }); // Scroll to the section smoothly
}
};

return (
<>
<Head>
<title>PROJECTS</title>
<meta name="description" content="PROJECT List for GSOC" />
</Head>
<Container className="mt-20 mb-28">
<div className="mt-5">
<p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7'>Our Projects, where we showcase our tech wizardry and code-slinging skills! <br></br> Our portfolio is a treasure trove of open-source gems, featuring projects in a variety of languages and areas. Take a peek and see how we&apos;re making a difference with our technical spells.</p>
</div>

<div className='mt-16'>
<SectionHeading onClick={scrollToActiveProjects} className="cursor-pointer"> {/* Add onClick to SectionHeading */}
Active Projects
</SectionHeading>
<p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7 mt-3'>The following projects are currently actively maintained and mentors are available!</p>
<ul role="list" className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 mt-12 mb-16" ref={activeProjectsRef}> {/* Attach the ref here */}
{projects.map((project) => (
<Card as="li" key={project.name}>
<div className="relative z-10 flex h-20 w-20 items-center justify-center rounded-lg bg-white shadow-md shadow-zinc-800/20 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-white/10 dark:shadow-white/10">
<Image
src={project.logo}
alt="Project Logo"
className='p-2'
unoptimized
/>
</div>
<h2 className="mt-6 text-2xl font-semibold font-mono text-zinc-800 dark:text-zinc-100">
<Card.Link href={project.link.href}>{project.name}</Card.Link>
</h2>
<Card.Description>{project.description}</Card.Description>
<p className="relative z-10 mt-6 flex text-md font-semibold font-mono text-zinc-600 transition group-hover:text-[#00843D] dark:group-hover:text-yellow-400 dark:text-zinc-200">
<LinkIcon className="h-6 w-6 flex-none scale-110" />
<span className="ml-2">{project.link.label}</span>
</p>
</Card>
))}
</ul>
</div>
<Container.Inner>
<ProjectSection />
<p className="text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7 text-center mb-8">
Our Projects, where we showcase our tech wizardry and code-slinging skills! Our portfolio is a treasure trove of open-source gems,
featuring projects in a variety of languages and areas. Take a peek and see how we&apos;re making a difference with our technical spells.
</p>
<Cards />
</Container.Inner>
</Container>
</Container.Inner>
</Container>

<div style={styles.bannerWrapper}>
<Container.Outer className="mt-28">
<Banner />
</Container.Outer>
</div>
</>
)
}
);
}