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

Acm dev cards #717

Merged
merged 16 commits into from
Nov 2, 2024
Merged

Acm dev cards #717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
0776adf
projects changed to cards, styling needed though
smalex-z May 6, 2024
2066cbb
Description updated, need to get color span working
smalex-z May 6, 2024
7813f5e
Added color dots to language, as well as images
smalex-z May 7, 2024
727aa2e
Style Updates
smalex-z Oct 8, 2024
6540821
Merge branch 'main' of https://github.com/uclaacm/website into acm-de…
smalex-z Oct 8, 2024
53610ab
scss updates
smalex-z Oct 8, 2024
5787824
Update Projects database + Advisor profile picture, as well as minor …
smalex-z Oct 9, 2024
e599143
general formatting, scss and import fixes
smalex-z Oct 15, 2024
cf39223
lint formatting fixes
smalex-z Oct 15, 2024
bc106a6
disable style linter for dynamically created content
smalex-z Oct 15, 2024
b706780
nomenclature update
smalex-z Oct 16, 2024
fab8b6a
image updates & link updates
smalex-z Oct 16, 2024
1ab91a8
CSS & Image updates to clean up PR.
smalex-z Oct 22, 2024
74b24b6
removed a project + no proj/repo link for ??? proj
smalex-z Oct 30, 2024
d94c857
misspellings & removing extra spaces
smalex-z Oct 31, 2024
ef90287
fixed var-name
smalex-z Oct 31, 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
112 changes: 112 additions & 0 deletions components/DevProjectCards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import Image from 'next/image';
import React from 'react';

import styles from '../styles/components/DevProjCard.module.scss';

function Project({
name,
prim_lang,
proj_link,
repo_link,
description,
img,
alt,
size,
style,
}) {
if (style && style.toLowerCase() === 'jedi') {
return (
<div className={styles['mb-2']}>
<div className={styles['jedi-profile-img']}>
<Image src={img} alt={alt} width={250} height={250}/>
</div>
<div className={styles['jedi-card-body']}>
<h2 className={styles['jedi-title']}>
{name}
</h2>
</div>
</div>
);
} else if (size && size.toLowerCase() === 'compact') {
return (
<div className={styles['project-card']}>
<div className={styles['project-grid-row']}>
<div className={styles['project-grid-col']}>
<Image
className={styles['project-image']}
src={img}
alt={alt}
width={70}
height={70}
/>
</div>
<div className={`${styles['project-grid-col']} ${styles['project-info']}`}>
<h3 className={styles['project-title']}>{name}</h3>
</div>
</div>
<div className={styles['card-hover-content']}>
<div>
<p dangerouslySetInnerHTML={{ __html: description }}/>
<p>{prim_lang}</p>
{ name !== '???' && (
<>
<a href={repo_link} target="_blank" rel="noopener noreferrer">View Repository<br></br></a>
<a href={proj_link} target="_blank" rel="noopener noreferrer">View Project</a>
</>
)}
</div>
</div>
</div>
);
} else {
return (
<div
className={`${styles['project-card']} ${styles['grid-tablet-only-2']}`}
>
<div className={styles['project-image-container']}>
<img src={img} alt={alt} style={{ maxWidth: '100%' }}/>

Check warning on line 67 in components/DevProjectCards.js

View workflow job for this annotation

GitHub Actions / lint (16.x) 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
</div>
<div>
<h3 className={styles.name}>{name}</h3>
</div>
<div className={styles['card-hover-content']}>
<div className={styles['description-header']}>
<p className={`${styles['mobile-header']}`}>&nbsp;</p>
{ name !== '???' && (
<>
<span className={`${styles['dev-badge']} ${styles[prim_lang]}`}></span>
&nbsp;
{/* TODO: Try dev-badge lang-{prim_lang} */}
</>
)}
{prim_lang}
{ name !== '???' && (
<>
&nbsp;•&nbsp;
<a href={proj_link} target="_blank" rel="noopener noreferrer"><u>Proj</u></a>
&nbsp;•&nbsp;
<a href={repo_link} target="_blank" rel="noopener noreferrer"><u>Repo</u></a>
</>
)}
</div>
<div className={styles['description-box']}>
<p dangerouslySetInnerHTML={{ __html: description }}/>
</div>
</div>
</div>
);
}
}

function projects(props) {
return (
// TODO: more flexible mobile views
<>
{props.projects.map((project) => (
<Project {...project} size={props.size} style={props.style} key={project.name} />
))}
</>
);
}

export default projects;
62 changes: 62 additions & 0 deletions data/dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// Note: people array is now depreciated, board members is parsed from ggl sheets using officerparser.mjs
export const people = [
{
name: 'Arsh Malik',
Expand Down Expand Up @@ -135,3 +136,64 @@ export const people = [
alt: 'acm logo',
},
];

export const projects = [
{
name: 'ACM at UCLA Website',
prim_lang: 'JS',
proj_link: 'https://www.uclaacm.com',
repo_link: 'https://github.com/uclaacm/website',
description: `The ACM at UCLA Website 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. `,
img: '/images/dev-projects/acmwebsite.png',
alt: 'ACM Website!',
},{
name: 'Membership Portal',
prim_lang: 'JS',
proj_link: 'https://members.uclaacm.com/login',
repo_link: 'https://github.com/uclaacm/membership-portal',
description: `The Membership Portal 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.`,
img: '/images/dev-projects/membership.png',
alt: 'Membership Portal!',
},{
name: 'Open Source',
prim_lang: 'JS',
proj_link: 'https://opensource.uclaacm.com/',
repo_link: 'https://github.com/uclaacm/opensource',
description: `Open Source highlights all open source projects managed by
<a href="https://github.com/uclaacm">ACM at UCLA</a>, and an activity feed showing
recent contributions. Anyone is welcome to contribute - an open invitation to get
involved and make an impact!`,
img: '/images/dev-projects/opensource.png',
alt: 'Open Source!',
},{
name: 'CMS Template',
prim_lang: 'JS',
proj_link: 'https://github.com/uclaacm/committee-website-template-cms',
repo_link: 'https://github.com/uclaacm/committee-website-template-cms',
description: `This Committee Website template is a no-code solution that empowers any ACM
committee to build and deploy their website in minutes! It's actively in use by multiple
committees as it saves time and ensures consistency across sites.`,
img: '/images/dev-projects/cmsproject.png',
alt: 'Committee Website Template!',
},{
name: 'Discord Bot',
prim_lang: 'JS',
proj_link: 'https://discord.gg/eWmzKsY',
repo_link: 'https://github.com/uclaacm/ACM-at-UCLA-Discord-Bot',
description: `The Discord bot is our in-house email verification bot for the ACM at UCLA
Discord server! It's written in JavaScript using the Discord API and Amazon SES.`,
img: '/images/dev-projects/acmdiscord.png',
alt: 'Discord Bot!',
},{
name: '???',
prim_lang: '???',
proj_link: 'mailto:[email protected]',
repo_link: 'mailto:[email protected]',
description: `Have an idea for a project or any questions?<br><br>Feel free to contact Snigdha
Kansal (<a href="mailto:[email protected]">Email</a>), our Dev Team Director.`,
img: '/images/dev-projects/acmlogocopy.jpg',
alt: 'ACM Logo!',
},
];
63 changes: 14 additions & 49 deletions pages/dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,25 @@ import Link from 'next/link';
import React from 'react';

import Banner from '../components/Banner';
import Projects from '../components/DevProjectCards';
import Layout from '../components/Layout';
import Officers from '../components/OfficerCard';

import {projects} from '../data/dev';
import data from '../offoutput.json';

import styles from '../styles/pages/Dev.module.scss';

const devTeamDirector = {
/*const devTeamDirector = {
name: 'Snigdha Kansal',
email: '[email protected]',
};
};*/

const devTeamAdvisor = {
role: 'Dev Team Advisor',
name: 'Arsh Malik',
pronouns: 'he/him/his',
year: '2025', major: 'Computer Science',
photo: 'https://drive.google.com/thumbnail?id=1LWWf0NdOuVjWsxPkXG7e7ki135KfCAq7',
photo: 'https://drive.google.com/thumbnail?id=1d1wYxOHHS5hGzC4xOU9_39sUFb1xxSv7',
};

function DevTeam() {
Expand All @@ -29,12 +30,12 @@ function DevTeam() {
return (
<Layout>
<NextSeo
title="ACM Dev Team | ACM at UCLA"
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."
title='ACM Dev Team | ACM at UCLA'
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.'
/>
<Banner decorative />
<div className={'content-section text-center'}>
<h1 className="text-center">Dev Team</h1>
<h1 className='text-center'>Dev Team</h1>
<p className={styles['dev-team-info']}>
{/* eslint-disable-next-line max-len */}
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.
Expand All @@ -45,47 +46,11 @@ function DevTeam() {
<a>apply to intern</a>
</Link>&nbsp;with the Dev Team!
</p>
<h2 className="text-center">Our Projects</h2>
<div className='text-left'>
<h3 id={styles['first-project']}>ACM at UCLA Website</h3>
<p className={styles['project-info']}>The&nbsp;
<Link href='https://www.uclaacm.com'>
<a target='_blank' rel='noopener noreferrer'>ACM at UCLA Website</a>
</Link>
{/* eslint-disable-next-line max-len */}
&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;
<Link href='https://www.github.com/uclaacm/website'>
<a target='_blank' rel='noopener noreferrer'>source code</a>
</Link>
!
</p>
<h3>Membership Portal</h3>
<p className={styles['project-info']}>The&nbsp;
<Link href='https://members.uclaacm.com/'>
<a target='_blank' rel='noopener noreferrer'>Membership Portal</a>
</Link>
{/* eslint-disable-next-line max-len */}
&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.
</p>
<h3>Discord Bot</h3>
<p className={styles['project-info']}>The Discord bot is our in-house email verification bot for the ACM at UCLA&nbsp;
<Link href='https://discord.gg/eWmzKsY'>
<a target='_blank' rel='noopener noreferrer'>Discord</a>
</Link>
&nbsp;server! It&apos;s written in JavaScript using the Discord API and Amazon SES.
</p>
<h3>Link Shortener</h3>
<p className={styles['project-info']}>The&nbsp;
<Link href='http://links.uclaacm.com/'>
<a target='_blank' rel='noopener noreferrer'>link shortener</a>
</Link>
{/* eslint-disable-next-line max-len */}
&nbsp;is an ongoing project aimed at generating shortened links for use by our committees. The link shortener is built with Flask.</p>
<h3>???</h3>
<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>

<h2 className='text-center'>Our Projects</h2>
<div className='grid-desktop-3 text-center-mobile'>
<Projects projects={projects} />
</div>
<h2 className="text-center">Our Commitment to Open Source</h2>
<h2 className='text-center'>Our Commitment to Open Source</h2>
<p className={styles['project-info']}>
Everything we build is&nbsp;
<Link href='https://opensource.uclaacm.com/'>
Expand All @@ -96,8 +61,8 @@ function DevTeam() {
<a target='_blank' rel='noopener noreferrer'>Github</a>
</Link>.
</p>
<h2 className="text-center">People</h2>
<div className="grid-desktop-3 text-center-mobile">
<h2 className='text-center'>People</h2>
<div className='grid-desktop-3 text-center-mobile'>
<Officers officers={devTeamOfficers} />
</div>
</div>
Expand Down
Binary file added public/images/dev-projects/acmdiscord.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/dev-projects/acmlogocopy.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/dev-projects/acmwebsite.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/dev-projects/cmsproject.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/dev-projects/membership.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/dev-projects/opensource.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading