Skip to content
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

Jump to bottom

Enhance UI of Website and Mobile View #282

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

Enhance UI of Website and Mobile View #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
36ab5c9
icon updated
SanskrutiMhatre Oct 10, 2024
e6fa403
Social Media link Updated
SanskrutiMhatre Oct 10, 2024
9eff6ab
border updated in project and idea page
SanskrutiMhatre Oct 10, 2024
223ed83
links updated
SanskrutiMhatre Oct 10, 2024
79a3e22
Updated Mobile View
SanskrutiMhatre Oct 10, 2024
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
31 changes: 15 additions & 16 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from 'next/link'
import { Container } from '@/components/Container'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { faDiscord, faGithub, faGitlab, faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faDiscord, faGithub, faGitlab,faXTwitter } from '@fortawesome/free-brands-svg-icons'

function NavLink({ href, children }) {
return (
Expand Down Expand Up @@ -33,21 +33,20 @@ export function Footer() {
© 2016-2023 AOSSIE. All rights reserved.
</p>
<div className="flex gap-6">
<Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:[email protected]'>
<FontAwesomeIcon icon={faEnvelope} size='xl' />
</Link>
<Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
<FontAwesomeIcon icon={faGitlab} size='xl' />
</Link>
<Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
<FontAwesomeIcon icon={faGithub} size='xl' />
</Link>
<Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.com/invite/6mFZ2S846n'>
<FontAwesomeIcon icon={faDiscord} size='xl' />
</Link>
<Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faTwitter} size='xl' />
</Link>
<Link aria-label="Contact by Mail" className='text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:[email protected]' target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faEnvelope} size='xl' />
</Link>
<Link aria-label="Follow on GitLab" className='text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faGitlab} size='xl' />
</Link>
<Link aria-label="Follow on GitHub" className='text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faGithub} size='xl' />
</Link>
<Link aria-label="Join on Discord" className='text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.com/invite/6mFZ2S846n' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faDiscord} size='xl' />
</Link>
<Link aria-label="Follow on X" className='text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faXTwitter} size='xl' />
</Link>
</div>
</div>
</Container.Inner>
Expand Down
159 changes: 103 additions & 56 deletions src/pages/apply.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,129 @@
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'

import { Container } from '@/components/Container'
import { TimelineElement } from '@/components/TimelineElement'
import GSoC from '@/images/logo.svg'
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';

import { Container } from '@/components/Container';
import { TimelineElement } from '@/components/TimelineElement';
import GSoC from '@/images/logo.svg';

export default function About() {
// State to manage expanded sections
const [expandedSections, setExpandedSections] = useState({});

const toggleSection = (title) => {
setExpandedSections((prev) => ({
...prev,
[title]: !prev[title], // Toggle the selected section
}));
};

return (
<>
<Head>
<title>
Application Timeline
</title>
<meta
name="description"
content="How to apply for GSOC"
/>
<title>Application Timeline</title>
<meta name="description" content="How to apply 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'>Learn how to apply for an opportunity to work on open-source projects and gain real-world experience through Google Summer of Code. <br></br> Our application timeline is your step-by-step guide to becoming a part of our open-source community and contributing to projects that are shaping the future of technology. From submitting your proposal to final evaluations, we&apos;ll walk you through the process every step of the way. Don&apos;t miss this opportunity to be a part of something great and apply now!</p>
<p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7'>
Learn how to apply for an opportunity to work on open-source projects and gain real-world experience through Google Summer of Code.
<br />
Our application timeline is your step-by-step guide to becoming a part of our open-source community and contributing to projects that are shaping the future of technology.
From submitting your proposal to final evaluations, we&apos;ll walk you through the process every step of the way. Don&apos;t miss this opportunity to be a part of something great and apply now!
</p>
</div>
<Container.Inner className='mt-16'>
<ol className="relative border-l-2 border-gray-200 dark:border-gray-700">
<TimelineElement
title="Join us on Discord"
description="Join the AOSSIE community on Discord and connect with other developers, mentors, and organizers. Our Discord server is a great place to ask questions, share ideas, and get support throughout the Google Summer of Code application process. From proposal writing tips to coding advice, our community is here to help you succeed. Don't go through the process alone, join us on Discord now!"
button="Join Discord"
link='https://discord.com/invite/6mFZ2S846n'
/>
<TimelineElement
title="Start Contributing"
description="Contribute to the project and make your mark on open-source development with AOSSIE. By making a Pull Request (PR) to one of our existing projects, you'll have the opportunity to showcase your skills and demonstrate your understanding of the project. This will also give you an opportunity to work with the mentors and get familiar with the project before the official GSoC coding period starts. This is a great way to get started and increase your chances of being selected for the program."
button="Contribute"
link='https://gitlab.com/aossie'
/>
<TimelineElement
title="Write a Draft Application"
description="Select an Idea and write a draft application that expands this ideas with your own proposals and showcases how you will execute and complete your project . This is your chance to demonstrate your understanding of the project, your skills, and your passion for open-source development. Our mentors will provide feedback and help you refine your proposal, increasing your chances of being selected for the program."
button="Choose an Idea"
link='/ideas'
/>
<TimelineElement
title="Discuss with Mentors"
description="By having a discussion with our mentors, you'll have the opportunity to ask questions, get feedback, and fine-tune your proposal. This will ensure that your proposal is well-aligned with the project goals and that you fully understand the expectations for the project. Our mentors will provide guidance and support to help you craft the best possible proposal, increasing your chances of being selected for the program."
classCondition='hidden'
/>
<TimelineElement
title="Submit Final Application"
description="By submitting your final application for GSoC, you'll be taking the last step in your journey to becoming a part of our community and contributing to projects that are shaping the future of technology. Make sure to submit your application before the deadline and include all the details correctly that are asked by Google. Wait for the selection process to take place and cross your fingers!"
classCondition='hidden'
/>
{["Join us on Discord", "Start Contributing", "Write a Draft Application", "Discuss with Mentors", "Submit Final Application"].map((title, index) => (
<li key={index} className="mb-6">
<div className="flex items-center justify-between">
<h3 className="text-lg font-bold">{title}</h3>
{/* Button only visible on mobile */}
{title !== "Submit Final Application" && (
<button
onClick={() => toggleSection(title)}
className="text-blue-600 md:hidden px-4 py-2 rounded-lg border border-blue-600 bg-white dark:bg-zinc-800 hover:bg-blue-600 hover:text-white focus:outline-none transition duration-300">
{expandedSections[title] ? "See Less" : "See More"}
</button>
)}
</div>
{/* Show detailed information on desktop and expanded section on mobile */}
<div className={`mt-2 ${expandedSections[title] || title === "Submit Final Application" ? 'block' : 'hidden md:block'}`}>
<TimelineElement
title={title}
description={getDescription(title)} // Function to get descriptions based on the title
button={getButton(title)} // Function to get buttons based on the title
link={getLink(title)} // Function to get links based on the title
/>
</div>
</li>
))}
</ol>

<div className="mt-20 relative block rounded-3xl dark:bg-white/70 bg-zinc-400/20 p-8 pb-16 shadow-xl">
<Image src={GSoC} width={700} className='mx-auto' />
{/* <h3 className="text-4xl font-bold">100+</h3> */}
{/* <h1 className="mt-4 text-4xl font-mono font-black text-gray-500">
2024 Program Timeline
</h1> */}
<div className='mt-10 flex justify-center gap-6 flex-col sm:flex-row'>
<Link className=" order-1 group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-zinc-800 px-8 py-3 text-black dark:text-white focus:outline-none" href="https://summerofcode.withgoogle.com/">
<span className="font-mono font-semibold text-center">
View 2024 Program Announcements
</span>
<Link className="order-1 group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-zinc-800 px-8 py-3 text-black dark:text-white focus:outline-none" href="https://summerofcode.withgoogle.com/">
<span className="font-mono font-semibold text-center">View 2024 Program Announcements</span>
</Link>
<Link className="order-2 group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-zinc-800 px-8 py-3 text-black dark:text-white focus:outline-none" href="https://summerofcode.withgoogle.com/programs/2024">
<span className="font-mono font-semibold text-center">
View 2024 Program Timeline
</span>
<span className="font-mono font-semibold text-center">View 2024 Program Timeline</span>
</Link>
</div>
</div>

</Container.Inner>
</Container>
</>
)
);
}

// Helper functions to get description, button text, and links
const getDescription = (title) => {
switch (title) {
case "Join us on Discord":
return "Join the AOSSIE community on Discord and connect with other developers, mentors, and organizers...";
case "Start Contributing":
return "Contribute to the project and make your mark on open-source development with AOSSIE...";
case "Write a Draft Application":
return "Select an Idea and write a draft application that expands this idea...";
case "Discuss with Mentors":
return "By having a discussion with our mentors, you'll have the opportunity to ask questions...";
case "Submit Final Application":
return "By submitting your final application for GSoC, you'll be taking the last step in your journey...";
default:
return "";
}
};

const getButton = (title) => {
switch (title) {
case "Join us on Discord":
return "Join Discord";
case "Start Contributing":
return "Contribute";
case "Write a Draft Application":
return "Choose an Idea";
case "Discuss with Mentors":
case "Submit Final Application":
return ""; // No button for these sections
default:
return "";
}
};

const getLink = (title) => {
switch (title) {
case "Join us on Discord":
return 'https://discord.com/invite/6mFZ2S846n';
case "Start Contributing":
return 'https://gitlab.com/aossie';
case "Write a Draft Application":
return '/ideas';
case "Discuss with Mentors":
case "Submit Final Application":
return '#'; // No link for these sections
default:
return '#';
}
};
32 changes: 17 additions & 15 deletions src/pages/ideas/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import Head from 'next/head'
import Link from 'next/link'
import Head from 'next/head';
import Link from 'next/link';

import { Card } from '@/components/Card'
import { Container } from '@/components/Container'
import { getAllIdeas } from '@/helper/getAllIdeas'
import { Card } from '@/components/Card';
import { Container } from '@/components/Container';
import { getAllIdeas } from '@/helper/getAllIdeas';

function Article({ article }) {
return (
<article className="mt-5 sm:mt-0 md:grid md:grid-flow-col md:grid-cols-4 md:items-baseline">
<Card className="md:col-span-3">
<Card.Title href={`/ideas/2024/${article.slug}`}>
{article.title}
</Card.Title>
<Card className="md:col-span-3 border border-gray-300 rounded-lg p-4 shadow-md">
<Link href={`/ideas/2024/${article.slug}`}>
<Card.Title>{article.title}</Card.Title>
</Link>
<Card.Description>{article.description}</Card.Description>
<Card.Cta>Know More</Card.Cta>
<Link href={`/ideas/2024/${article.slug}`}>
<Card.Cta>Know More</Card.Cta>
</Link>
</Card>
</article>
)
);
}

export default function Ideas({ articles }) {
Expand All @@ -27,11 +29,11 @@ export default function Ideas({ articles }) {
<meta name="description" content="Idea List for GSOC" />
</Head>
<Container className="mt-20 mb-28">
<div className="">
<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 Google Summer of Code, we offer
a unique opportunity for developers to explore new ideas,  a wide
a unique opportunity for developers to explore new ideas, a wide
variety of projects for developers to choose from and contribute to.
From developing new features to fixing critical bugs, our idea list
is your go-to destination for finding your next big project and
Expand Down Expand Up @@ -59,13 +61,13 @@ export default function Ideas({ articles }) {
</Container.Inner>
</Container>
</>
)
);
}

export async function getStaticProps() {
return {
props: {
articles: (await getAllIdeas()).map(({ component, ...meta }) => meta),
},
}
};
}
Loading