Skip to content

Cw2 10 redesign resources cards to incorporate logos #17

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

Merged
andrew-l3 merged 12 commits into from
Jun 24, 2024
Merged

Cw2 10 redesign resources cards to incorporate logos #17

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1913c92
Update FYG link
Jun 13, 2024
3d3dc27
changing compclub to csesoc learn
Jun 13, 2024
257d602
structural changes
andrew-l3 Jun 18, 2024
6094fce
logo sizes and lint fixes
andrew-l3 Jun 18, 2024
bed8632
Merge pull request #18 from csesoc/additional-resources
derekxu04 Jun 22, 2024
796acd0
structural changes
andrew-l3 Jun 18, 2024
50f116a
logo sizes and lint fixes
andrew-l3 Jun 18, 2024
05530af
Merge branch 'CW2-10-redesign-resources-cards-to-incorporate-logos' o…
andrew-l3 Jun 23, 2024
4f21d74
fixes
andrew-l3 Jun 23, 2024
cb9da6a
logo fix
andrew-l3 Jun 23, 2024
d5a71d2
lint and type checks
andrew-l3 Jun 23, 2024
af27612
merge fixes
andrew-l3 Jun 24, 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
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"rules": {
"prettier/prettier": ["error", { "endOfLine": "auto" }]
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"react/jsx-key": [1, { "checkFragmentShorthand": true }]
}
}
148 changes: 54 additions & 94 deletions components/ResourcesAndContacts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// import DiscordLogo from "@/public/assets/discord_logo.svg"
import Image from 'next/image';
import { stage1, stage2, stage3 } from '../../public/data/resourceCards';

const boxStyling =
'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
Expand All @@ -20,101 +21,60 @@ const ResourcesAndContacts = () => {

<div className="py-8 bg-no-repeat bg-center">
<div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
<a
href="https://circles.csesoc.app/course-selector"
target="_blank"
className={`col-span-4 p-5 ${boxStyling}`}
>
<h2 className="mt-5 text-3xl font-extrabold">Circles</h2>
<p className="mt-7 text-lg mb-5">
A UNSW degree planner where you can explore and validate your degree structure.
</p>
</a>

<a
href="https://structs.sh/"
target="_blank"
className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
>
<h2 className="mt-1 text-3xl font-extrabold">Structs.sh</h2>
<p className="mt-7 text-lg mb-5">
An educational data structures and algorithms platform.
</p>
</a>

<a
href="https://jobsboard.csesoc.unsw.edu.au/"
target="_blank"
className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
>
<h2 className="mt-1 text-3xl font-extrabold">Jobs Board</h2>
<p className="mt-7 text-lg mb-5">
A place where CSESoc students can look for relevant job opportunities.
</p>
</a>

<a
href="https://notangles.csesoc.app/"
target="_blank"
className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
>
<h2 className="mt-1 text-3xl font-extrabold">Notangles</h2>

<p className="mt-7 text-lg mb-5">
Trimester timetabling tool - no more timetable tangles!
</p>
</a>

<a
href="https://unilectives.csesoc.app/"
target="_blank"
className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
>
<h2 className="mt-1 text-3xl font-extrabold">Uni-lectives</h2>

<p className="mt-7 text-lg mb-5">
Read course electives to help you pick your electives or even write your own!
</p>
</a>

<a
href="https://compclub.org/"
target="_blank"
className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}
>
<h2 className="mt-1 text-3xl font-extrabold">CompClub</h2>

<p className="mt-7 text-lg mb-5">Promoting computing to high school students</p>
</a>

<a
href="https://media.csesoc.org.au/"
target="_blank"
className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}
>
<h2 className="mt-1 text-3xl font-extrabold">CSESoc Media</h2>
<p className="mt-7 text-lg mb-5">All things content</p>
</a>

<a
href="https://media.csesoc.org.au/fyg-2023/"
target="_blank"
className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}
>
<h2 className="mt-1 text-3xl font-extrabold">First Year Guide</h2>
<p className="mt-7 text-lg mb-5">
The ultimate guide to conquering your first year at CSE
</p>
</a>

<a
href="https://media.csesoc.org.au/cse-enrol/"
target="_blank"
className={`md:col-span-2 col-span-4 p-5 ${boxStyling}`}
>
<h2 className="mt-1 text-3xl font-extrabold">Enrolment Guide</h2>
<p className="mt-7 text-lg mb-5">Learn how to get a headstart on uni</p>
</a>
{stage1.map((item, index) => {
Copy link
Contributor

@derekxu04 derekxu04 Jun 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: don't need index if not going to use it, can just do .map(item => {...})

return (
<a
Copy link
Contributor

@derekxu04 derekxu04 Jun 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

need a key for each element otherwise will complain

href={item.href}
target="_blank"
className={`col-span-4 p-5 ${boxStyling} flex`}
>
<div className="flex justify-center align-middle items-center pl-2 pr-10">
<Image src={item.svg} alt={item.alt} draggable="false" width={item.width} height={item.height}/>
</div>
<div>
<h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
<p className="mt-7 text-lg mb-5">{item.desc}</p>
</div>
</a>
);
})}

{stage2.map((item, index) => {
return (
<a
href={item.href}
target="_blank"
className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
>
<div className='flex align-middle items-center pt-2 pb-4'>
<Image src={item.svg} alt={item.alt} draggable="false" width={item.width} height={item.height}/>
</div>
<div>
<h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
<p className="mt-7 text-lg mb-5">{item.desc}</p>
</div>
</a>
);
})}

{stage3.map((item, index) => {
return (
<a
href={item.href}
target="_blank"
className={`md:col-span-2 col-span-4 p-5 ${boxStyling} flex`}
>
<div className='flex align-middle items-center pt-2 pb-4 pr-10'>
<Image src={item.svg} alt={item.alt} draggable="false" width={item.width} height={item.height} className='rounded-md'/>
</div>
<div>
<h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
<p className="mt-7 text-lg mb-5">{item.desc}</p>
</div>
</a>
);
})}
</div>
</div>
</div>
Expand Down
74 changes: 74 additions & 0 deletions public/assets/circles_logo.svg
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