Skip to content

Commit 70dfb79

Browse files
smalex-zsmalex-z
authored
Acm dev cards (#717)
* projects changed to cards, styling needed though * Description updated, need to get color span working * Added color dots to language, as well as images and some formatting changes * Style Updates * scss updates * Update Projects database + Advisor profile picture, as well as minor CSS changes * general formatting, scss and import fixes * lint formatting fixes * disable style linter for dynamically created content * nomenclature update * image updates & link updates * CSS & Image updates to clean up PR. * removed a project + no proj/repo link for ??? proj * misspellings & removing extra spaces * fixed var-name
1 parent 7d58f47 commit 70dfb79

File tree

12 files changed

+6823
-6385
lines changed

12 files changed

+6823
-6385
lines changed

‎components/DevProjectCards.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import Image from 'next/image';
2+
import React from 'react';
3+
4+
import styles from '../styles/components/DevProjCard.module.scss';
5+
6+
function Project({
7+
name,
8+
prim_lang,
9+
proj_link,
10+
repo_link,
11+
description,
12+
img,
13+
alt,
14+
size,
15+
style,
16+
}) {
17+
if (style && style.toLowerCase() === 'jedi') {
18+
return (
19+
<div className={styles['mb-2']}>
20+
<div className={styles['jedi-profile-img']}>
21+
<Image src={img} alt={alt} width={250} height={250}/>
22+
</div>
23+
<div className={styles['jedi-card-body']}>
24+
<h2 className={styles['jedi-title']}>
25+
{name}
26+
</h2>
27+
</div>
28+
</div>
29+
);
30+
} else if (size && size.toLowerCase() === 'compact') {
31+
return (
32+
<div className={styles['project-card']}>
33+
<div className={styles['project-grid-row']}>
34+
<div className={styles['project-grid-col']}>
35+
<Image
36+
className={styles['project-image']}
37+
src={img}
38+
alt={alt}
39+
width={70}
40+
height={70}
41+
/>
42+
</div>
43+
<div className={`${styles['project-grid-col']} ${styles['project-info']}`}>
44+
<h3 className={styles['project-title']}>{name}</h3>
45+
</div>
46+
</div>
47+
<div className={styles['card-hover-content']}>
48+
<div>
49+
<p dangerouslySetInnerHTML={{ __html: description }}/>
50+
<p>{prim_lang}</p>
51+
{ name !== '???' && (
52+
<>
53+
<a href={repo_link} target="_blank" rel="noopener noreferrer">View Repository<br></br></a>
54+
<a href={proj_link} target="_blank" rel="noopener noreferrer">View Project</a>
55+
</>
56+
)}
57+
</div>
58+
</div>
59+
</div>
60+
);
61+
} else {
62+
return (
63+
<div
64+
className={`${styles['project-card']} ${styles['grid-tablet-only-2']}`}
65+
>
66+
<div className={styles['project-image-container']}>
67+
<img src={img} alt={alt} style={{ maxWidth: '100%' }}/>
68+
</div>
69+
<div>
70+
<h3 className={styles.name}>{name}</h3>
71+
</div>
72+
<div className={styles['card-hover-content']}>
73+
<div className={styles['description-header']}>
74+
<p className={`${styles['mobile-header']}`}>&nbsp;</p>
75+
{ name !== '???' && (
76+
<>
77+
<span className={`${styles['dev-badge']} ${styles[prim_lang]}`}></span>
78+
&nbsp;
79+
{/* TODO: Try dev-badge lang-{prim_lang} */}
80+
</>
81+
)}
82+
{prim_lang}
83+
{ name !== '???' && (
84+
<>
85+
&nbsp;•&nbsp;
86+
<a href={proj_link} target="_blank" rel="noopener noreferrer"><u>Proj</u></a>
87+
&nbsp;•&nbsp;
88+
<a href={repo_link} target="_blank" rel="noopener noreferrer"><u>Repo</u></a>
89+
</>
90+
)}
91+
</div>
92+
<div className={styles['description-box']}>
93+
<p dangerouslySetInnerHTML={{ __html: description }}/>
94+
</div>
95+
</div>
96+
</div>
97+
);
98+
}
99+
}
100+
101+
function projects(props) {
102+
return (
103+
// TODO: more flexible mobile views
104+
<>
105+
{props.projects.map((project) => (
106+
<Project {...project} size={props.size} style={props.style} key={project.name} />
107+
))}
108+
</>
109+
);
110+
}
111+
112+
export default projects;

‎data/dev.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// Note: people array is now depreciated, board members is parsed from ggl sheets using officerparser.mjs
12
export const people = [
23
{
34
name: 'Arsh Malik',
@@ -135,3 +136,64 @@ export const people = [
135136
alt: 'acm logo',
136137
},
137138
];
139+
140+
export const projects = [
141+
{
142+
name: 'ACM at UCLA Website',
143+
prim_lang: 'JS',
144+
proj_link: 'https://www.uclaacm.com',
145+
repo_link: 'https://github.com/uclaacm/website',
146+
description: `The ACM at UCLA Website is the one-stop shop for all things ACM! We develop
147+
and maintain this website, keeping it up-to-date with all the latest news and events. `,
148+
img: '/images/dev-projects/acmwebsite.png',
149+
alt: 'ACM Website!',
150+
},{
151+
name: 'Membership Portal',
152+
prim_lang: 'JS',
153+
proj_link: 'https://members.uclaacm.com/login',
154+
repo_link: 'https://github.com/uclaacm/membership-portal',
155+
description: `The Membership Portal is where ACM members can check in to events to earn
156+
points! We built the Membership Portal with Node.js, Express.js, PostgreSQL, Redux and React.js.`,
157+
img: '/images/dev-projects/membership.png',
158+
alt: 'Membership Portal!',
159+
},{
160+
name: 'Open Source',
161+
prim_lang: 'JS',
162+
proj_link: 'https://opensource.uclaacm.com/',
163+
repo_link: 'https://github.com/uclaacm/opensource',
164+
description: `Open Source highlights all open source projects managed by
165+
<a href="https://github.com/uclaacm">ACM at UCLA</a>, and an activity feed showing
166+
recent contributions. Anyone is welcome to contribute - an open invitation to get
167+
involved and make an impact!`,
168+
img: '/images/dev-projects/opensource.png',
169+
alt: 'Open Source!',
170+
},{
171+
name: 'CMS Template',
172+
prim_lang: 'JS',
173+
proj_link: 'https://github.com/uclaacm/committee-website-template-cms',
174+
repo_link: 'https://github.com/uclaacm/committee-website-template-cms',
175+
description: `This Committee Website template is a no-code solution that empowers any ACM
176+
committee to build and deploy their website in minutes! It's actively in use by multiple
177+
committees as it saves time and ensures consistency across sites.`,
178+
img: '/images/dev-projects/cmsproject.png',
179+
alt: 'Committee Website Template!',
180+
},{
181+
name: 'Discord Bot',
182+
prim_lang: 'JS',
183+
proj_link: 'https://discord.gg/eWmzKsY',
184+
repo_link: 'https://github.com/uclaacm/ACM-at-UCLA-Discord-Bot',
185+
description: `The Discord bot is our in-house email verification bot for the ACM at UCLA
186+
Discord server! It's written in JavaScript using the Discord API and Amazon SES.`,
187+
img: '/images/dev-projects/acmdiscord.png',
188+
alt: 'Discord Bot!',
189+
},{
190+
name: '???',
191+
prim_lang: '???',
192+
proj_link: 'mailto:[email protected]',
193+
repo_link: 'mailto:[email protected]',
194+
description: `Have an idea for a project or any questions?<br><br>Feel free to contact Snigdha
195+
Kansal (<a href="mailto:[email protected]">Email</a>), our Dev Team Director.`,
196+
img: '/images/dev-projects/acmlogocopy.jpg',
197+
alt: 'ACM Logo!',
198+
},
199+
];

‎pages/dev.js‎

Lines changed: 14 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,25 @@ import Link from 'next/link';
33
import React from 'react';
44

55
import Banner from '../components/Banner';
6+
import Projects from '../components/DevProjectCards';
67
import Layout from '../components/Layout';
78
import Officers from '../components/OfficerCard';
89

10+
import {projects} from '../data/dev';
911
import data from '../offoutput.json';
10-
1112
import styles from '../styles/pages/Dev.module.scss';
1213

13-
const devTeamDirector = {
14+
/*const devTeamDirector = {
1415
name: 'Snigdha Kansal',
1516
email: 'snigdha0206@g.ucla.edu',
16-
};
17+
};*/
1718

1819
const devTeamAdvisor = {
1920
role: 'Dev Team Advisor',
2021
name: 'Arsh Malik',
2122
pronouns: 'he/him/his',
2223
year: '2025', major: 'Computer Science',
23-
photo: 'https://drive.google.com/thumbnail?id=1LWWf0NdOuVjWsxPkXG7e7ki135KfCAq7',
24+
photo: 'https://drive.google.com/thumbnail?id=1d1wYxOHHS5hGzC4xOU9_39sUFb1xxSv7',
2425
};
2526

2627
function DevTeam() {
@@ -29,12 +30,12 @@ function DevTeam() {
2930
return (
3031
<Layout>
3132
<NextSeo
32-
title="ACM Dev Team | ACM at UCLA"
33-
description="The ACM Dev Team handles general internal development needs for ACM at UCLA. We maintain and create organization-wide projects such as the website, Discord bot, Membership Portal, and link shortener."
33+
title='ACM Dev Team | ACM at UCLA'
34+
description='The ACM Dev Team handles general internal development needs for ACM at UCLA. We maintain and create organization-wide projects such as the website, Discord bot, Membership Portal, and link shortener.'
3435
/>
3536
<Banner decorative />
3637
<div className={'content-section text-center'}>
37-
<h1 className="text-center">Dev Team</h1>
38+
<h1 className='text-center'>Dev Team</h1>
3839
<p className={styles['dev-team-info']}>
3940
{/* eslint-disable-next-line max-len */}
4041
The ACM Dev Team handles general internal development needs for all of ACM at UCLA. We maintain and create organization-wide projects such as the website, Discord bot, Membership Portal, and link shortener.
@@ -45,47 +46,11 @@ function DevTeam() {
4546
<a>apply to intern</a>
4647
</Link>&nbsp;with the Dev Team!
4748
</p>
48-
<h2 className="text-center">Our Projects</h2>
49-
<div className='text-left'>
50-
<h3 id={styles['first-project']}>ACM at UCLA Website</h3>
51-
<p className={styles['project-info']}>The&nbsp;
52-
<Link href='https://www.uclaacm.com'>
53-
<a target='_blank' rel='noopener noreferrer'>ACM at UCLA Website</a>
54-
</Link>
55-
{/* eslint-disable-next-line max-len */}
56-
&nbsp;is the one-stop shop for all things ACM! We develop and maintain this website, keeping it up-to-date with all the latest news and events. In fact, we made the page you&apos;re looking at right now! This website is built with React.js and Next.js and deployed with Netlify - if you&apos;re curious, feel free to check out the&nbsp;
57-
<Link href='https://www.github.com/uclaacm/website'>
58-
<a target='_blank' rel='noopener noreferrer'>source code</a>
59-
</Link>
60-
!
61-
</p>
62-
<h3>Membership Portal</h3>
63-
<p className={styles['project-info']}>The&nbsp;
64-
<Link href='https://members.uclaacm.com/'>
65-
<a target='_blank' rel='noopener noreferrer'>Membership Portal</a>
66-
</Link>
67-
{/* eslint-disable-next-line max-len */}
68-
&nbsp;is where ACM members can check in to events to earn points! We built the Membership Portal with Node.js, Express.js, PostgreSQL, Redux and React.js.
69-
</p>
70-
<h3>Discord Bot</h3>
71-
<p className={styles['project-info']}>The Discord bot is our in-house email verification bot for the ACM at UCLA&nbsp;
72-
<Link href='https://discord.gg/eWmzKsY'>
73-
<a target='_blank' rel='noopener noreferrer'>Discord</a>
74-
</Link>
75-
&nbsp;server! It&apos;s written in JavaScript using the Discord API and Amazon SES.
76-
</p>
77-
<h3>Link Shortener</h3>
78-
<p className={styles['project-info']}>The&nbsp;
79-
<Link href='http://links.uclaacm.com/'>
80-
<a target='_blank' rel='noopener noreferrer'>link shortener</a>
81-
</Link>
82-
{/* eslint-disable-next-line max-len */}
83-
&nbsp;is an ongoing project aimed at generating shortened links for use by our committees. The link shortener is built with Flask.</p>
84-
<h3>???</h3>
85-
<p className={styles['project-info']}>Have an idea for a project or any questions? Feel free to contact <a href={`mailto:${devTeamDirector.email}`}>{`${devTeamDirector.name} (${devTeamDirector.email})`}</a>, our Dev Team Director.</p>
86-
49+
<h2 className='text-center'>Our Projects</h2>
50+
<div className='grid-desktop-3 text-center-mobile'>
51+
<Projects projects={projects} />
8752
</div>
88-
<h2 className="text-center">Our Commitment to Open Source</h2>
53+
<h2 className='text-center'>Our Commitment to Open Source</h2>
8954
<p className={styles['project-info']}>
9055
Everything we build is&nbsp;
9156
<Link href='https://opensource.uclaacm.com/'>
@@ -96,8 +61,8 @@ function DevTeam() {
9661
<a target='_blank' rel='noopener noreferrer'>Github</a>
9762
</Link>.
9863
</p>
99-
<h2 className="text-center">People</h2>
100-
<div className="grid-desktop-3 text-center-mobile">
64+
<h2 className='text-center'>People</h2>
65+
<div className='grid-desktop-3 text-center-mobile'>
10166
<Officers officers={devTeamOfficers} />
10267
</div>
10368
</div>

‎public/images/dev-projects/acmdiscord.png‎

369 KB
Loading

‎public/images/dev-projects/acmlogocopy.jpg‎

71.6 KB
Loading

‎public/images/dev-projects/acmwebsite.png‎

1.01 MB
Loading

‎public/images/dev-projects/cmsproject.png‎

270 KB
Loading

‎public/images/dev-projects/membership.png‎

1.29 MB
Loading

‎public/images/dev-projects/opensource.png‎

130 KB
Loading

0 commit comments

Comments
 (0)