Skip to content

Commit c194e39

Browse files
ZahnentfernerZahnentferner
authored
Merge pull request #641 from Muneerali199/feat/add-missing-projects
feat: add missing AOSSIE, StabilityNexus, and DjedAlliance projects
2 parents 8c97742 + 9d59a41 commit c194e39

4 files changed

Lines changed: 507 additions & 51 deletions

File tree

‎src/app/projects/page.jsx‎

Lines changed: 75 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
'use client'
22

3-
import Link from 'next/link';
4-
import Grid from '@mui/material/Grid';
5-
import MuiCard from '@mui/material/Card';
6-
import CardContent from '@mui/material/CardContent';
7-
import CardActions from '@mui/material/CardActions';
8-
import Typography from '@mui/material/Typography';
9-
import Button from '@mui/material/Button';
10-
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
11-
import { Container } from '@/components/shared/Container';
12-
import { Banner } from '@/components/shared/Banner';
13-
import Image from 'next/image';
3+
import Link from 'next/link'
4+
import Grid from '@mui/material/Grid'
5+
import MuiCard from '@mui/material/Card'
6+
import CardContent from '@mui/material/CardContent'
7+
import CardActions from '@mui/material/CardActions'
8+
import Typography from '@mui/material/Typography'
9+
import Button from '@mui/material/Button'
10+
import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
11+
import { Container } from '@/components/shared/Container'
12+
import { Banner } from '@/components/shared/Banner'
13+
import Image from 'next/image'
1414
import projects from '@/helper/projects'
1515
import { CardProduct } from '@/components/products/CardProduct'
1616
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
1717
import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
1818
import { motion } from 'framer-motion'
1919

20-
2120
function LinkIcon(props) {
2221
return (
2322
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
@@ -32,16 +31,26 @@ function LinkIcon(props) {
3231
// Define the Cards component here
3332
const Cards = ({ projectList }) => {
3433
return (
35-
<Grid container spacing={{ xs: 2, md: 4 }} sx={{ paddingTop: '40px', justifyContent: 'center' }}>
34+
<Grid
35+
container
36+
spacing={{ xs: 2, md: 4 }}
37+
sx={{ paddingTop: '40px', justifyContent: 'center' }}
38+
>
3639
{projectList.map((project, index) => (
37-
<Grid item xs={12} sm={6} md={4} key={index} component={motion.div}
40+
<Grid
41+
item
42+
xs={12}
43+
sm={6}
44+
md={4}
45+
key={index}
46+
component={motion.div}
3847
initial={{ opacity: 0, y: 20 }}
3948
whileInView={{ opacity: 1, y: 0 }}
4049
viewport={{ once: true }}
4150
transition={{ duration: 0.5, delay: index * 0.1 }}
4251
>
4352
<MuiCard
44-
className='dark:bg-[#2A2A2A] dark:border-white transition-transform hover:scale-[1.02] duration-300'
53+
className="transition-transform duration-300 hover:scale-[1.02] dark:border-white dark:bg-[#2A2A2A]"
4554
sx={{
4655
height: 400,
4756
borderRadius: 2,
@@ -75,7 +84,7 @@ const Cards = ({ projectList }) => {
7584

7685
<Typography
7786
variant="body1"
78-
className="text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7 text-center"
87+
className="text-center font-mono text-lg leading-7 text-zinc-600 dark:text-zinc-400"
7988
sx={{
8089
fontFamily: 'Nunito-Light',
8190
color: 'black',
@@ -90,76 +99,94 @@ const Cards = ({ projectList }) => {
9099
{project.description}
91100
</Typography>
92101
</CardContent>
93-
<CardActions sx={{ justifyContent: 'center', flexDirection: 'column', pb: 3 }}>
94-
<Link href={project.link.href} className="relative z-10 mt-2 flex items-center text-md font-semibold font-mono text-zinc-600 transition hover:text-[#00843D] dark:hover:text-yellow-400 dark:text-zinc-200">
102+
<CardActions
103+
sx={{ justifyContent: 'center', flexDirection: 'column', pb: 3 }}
104+
>
105+
<Link
106+
href={project.link.href}
107+
className="text-md relative z-10 mt-2 flex items-center font-mono font-semibold text-zinc-600 transition hover:text-[#00843D] dark:text-zinc-200 dark:hover:text-yellow-400"
108+
>
95109
<LinkIcon className="h-6 w-6 flex-none scale-110" />
96110
<span className="ml-2">{project.link.label}</span>
97111
</Link>
98-
<div className="flex gap-6 mt-4">
99-
<Link href={project.link.href} aria-label="GitHub" className="text-zinc-500 hover:text-black dark:text-zinc-400 dark:hover:text-white transition">
100-
<FontAwesomeIcon icon={faGithub} className="w-6 h-6" />
101-
</Link>
102-
<Link href="https://discord.gg/hjUhu33uAn" aria-label="Discord" className="text-zinc-500 hover:text-[#5865F2] dark:text-zinc-400 dark:hover:text-[#5865F2] transition">
103-
<FontAwesomeIcon icon={faDiscord} className="w-6 h-6" />
104-
</Link>
105-
</div>
112+
<div className="mt-4 flex gap-6">
113+
<Link
114+
href={project.link.href}
115+
aria-label="GitHub"
116+
className="text-zinc-500 transition hover:text-black dark:text-zinc-400 dark:hover:text-white"
117+
>
118+
<FontAwesomeIcon icon={faGithub} className="h-6 w-6" />
119+
</Link>
120+
<Link
121+
href="https://discord.gg/hjUhu33uAn"
122+
aria-label="Discord"
123+
className="text-zinc-500 transition hover:text-[#5865F2] dark:text-zinc-400 dark:hover:text-[#5865F2]"
124+
>
125+
<FontAwesomeIcon icon={faDiscord} className="h-6 w-6" />
126+
</Link>
127+
</div>
106128
</CardActions>
107129
</MuiCard>
108130
</Grid>
109-
))
110-
}
111-
</Grid >
112-
);
113-
};
131+
))}
132+
</Grid>
133+
)
134+
}
114135

115136
const ProjectSection = () => {
116137
return (
117-
<motion.div
138+
<motion.div
118139
initial={{ opacity: 0, scale: 0.9 }}
119140
animate={{ opacity: 1, scale: 1 }}
120141
transition={{ duration: 0.8 }}
121-
className="ideas-text flex items-center justify-center mb-8 relative"
142+
className="ideas-text relative mb-8 flex items-center justify-center"
122143
>
123144
<div
124-
className="hidden md:block w-[75px] h-[75px] m-2 bg-cover bg-center dark:bg-[url('/logo.png')] bg-[url('/logo.png')] absolute left-10"
145+
className="absolute left-10 m-2 hidden h-[75px] w-[75px] bg-[url('/logo.png')] bg-cover bg-center dark:bg-[url('/logo.png')] md:block"
125146
alt="GSOC Logo"
126147
></div>
127148

128-
<h1 className="font-mono text-6xl font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 sm:text-6xl md:text-5xl lg:text-6xl text-center">
149+
<h1 className="text-center font-mono text-6xl font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 sm:text-6xl md:text-5xl lg:text-6xl">
129150
PROJECTS
130151
</h1>
131152

132153
<div
133-
className="hidden md:block w-[75px] h-[75px] m-2 bg-cover bg-center absolute right-10"
154+
className="absolute right-10 m-2 hidden h-[75px] w-[75px] bg-cover bg-center md:block"
134155
style={{ backgroundImage: "url('/logo.png')" }}
135156
aria-label="Logo"
136157
></div>
137-
138158
</motion.div>
139-
);
140-
};
159+
)
160+
}
141161

142162
const styles = {
143163
bannerWrapper: {
144164
width: '100%',
145165
position: 'relative',
146166
overflow: 'hidden',
147167
},
148-
};
168+
}
149169

150170
export default function Projects() {
151-
const readyToDownload = projects.filter(p => p.category === 'Ready to download');
152-
const productionReady = projects.filter(p => p.category === 'Production ready');
153-
const ongoing = projects.filter(p => p.category === 'Ongoing');
171+
const readyToDownload = projects.filter(
172+
(p) => p.category === 'Ready to download'
173+
)
174+
const productionReady = projects.filter(
175+
(p) => p.category === 'Production ready'
176+
)
177+
const ongoing = projects.filter((p) => p.category === 'Ongoing')
154178

155179
return (
156180
<>
157181
<Container className="mt-20 mb-28">
158182
<Container.Inner>
159-
<div className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3 mb-16">
160-
{projects.sort(() => 0.5 - Math.random()).map((product) => (
161-
<CardProduct key={product.slug} product={product} />
162-
))}
183+
<div className="mb-16 grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
184+
{projects
185+
.slice()
186+
.sort((a, b) => a.name.localeCompare(b.name))
187+
.map((product) => (
188+
<CardProduct key={product.slug} product={product} />
189+
))}
163190
</div>
164191

165192
{/*
@@ -180,7 +207,6 @@ export default function Projects() {
180207
</div>
181208
</div>
182209
*/}
183-
184210
</Container.Inner>
185211
</Container>
186212

@@ -190,5 +216,5 @@ export default function Projects() {
190216
</Container.Outer>
191217
</div>
192218
</>
193-
);
219+
)
194220
}

0 commit comments

Comments
 (0)