icssc/icssc-website

Website for the ICS Student Council

icssc-website's Issues

Refactor CSS Stylings

Many of the same styles were used in multiple SCSS files. It would be better to move them all onto global. Example would be the "Headers" of each page.

Update Get Involved Page

Update to show people what they can do to get involved with ICSSC!

Rithvij & Aadi's Board Information is Incorrect

See title

Rewrite resource page

Rewrite the resource page to next.js

Update members of Events Committee

Details

• add Rithvij's name
• remove Kaitlyn's name

Preview

Redesign new committee page

Rewrite index page

Work on the next branch

Redesign the website to fit the new theme of the club

• Style the navigation bar

Pages Planned for Redesign

• affiliates
• awards
• board
• committees
• contacts
• events
• get-involved
• ics-podcast
• index
• mission
• newletter
• pastboard
• resources
• sponsors

Create projects.js page

Add a page showcasing ICSSC's projects

Update Board and Committee Members

Rewrite mission page

Use next.js to rewrite the html page.

fix SSRProvider warning

Probably will do towards the end, unless it's hard to fix

Use SASS

Use SASS for better management of the style!

Rewrite contacts page

Use next.js to rewrite the html page.

Update nav bar to reflect new routes

This will be towards the end once every page has been sorted out.

Incorrect Text on Get Involved Page

Update colors for accessibility

Current combinations (pink + white) don't meet the contrast criteria to be accessible.
Change the colors and color combinations so that it AA level of conformance.

Examples:
pink and white -> blue and white
pink + blue -> lighter pink and blue

Learn more about ADA here.
https://www.blueatlasmarketing.com/resources/the-ultimate-ada-compliant-website-guide/

Fix Website Warnings and Errors

ESLint Errors and React/Next Warnings.

fix: Handle events without Images

Currently, events are formatted like this:

        {
            "src":"/assets/img/events/internpanel.jpg",
            "title":"Internship Panel",
            "time":"Wednesday, October 18th, 2023",
            "location": "DBH 6011 7- 8 PM",
            "desc": "Looking for advice in applying for internships this application season ❓ Come meet our panelists and receive insight/listen to personal experiences about the application process at our ICSSC Internship Pane!"
        },

Every other field can be empty, but Next's Image element requires that an image, passed as src be given to it. We could handle this in a handful of ways, but a simple Image Not Found placeholder (possibly with a cute Anteater) would do.

Something like: src={src ? src : imgNotFound}

Rewrite awards page

Use next.js to rewrite the html page.

Project has both package-lock.json and yarn.lock files.

The icssc-website repo has both a package-lock.json and yarn.lock file.
This is suboptimal because it can create edge cases where two versions of dependencies are used to develop, test, and deploy the site.

We've been adopting pnpm throughout ICSSC Projects. Switching to pnpm, or removing either package-lock.json and yarn.lock would solve this issue.

Create events calendar component

This is for the index page. Link the calendar to the ICSSC External Google Calendar.

Rewrite committees page

Use next.js to rewrite the html page.

Create new committees page

The page will be linked on the navbar

Rewrite events page

Use next.js to rewrite the html page.

Create about page

Create an about page with elements from the About Dropdown (Vision, Mission, Committees, Board, Past Board. member clubs, etc)

Currently, our information about the club is scattered throughout multiple pages. Creating one About page will unify all information making UX easier and pleasant

Mockup of the About Page (subject to change)
https://www.figma.com/proto/evC6RlEez2VZDUpdXUb8Jz/ICSSC-Redesign?node-id=206%3A2&scaling=min-zoom&page-id=0%3A1

feat: Add support for multi-day events

I also noticed, while looking at events.json, that neither of our methods work for multi-day events like WebJam, so I’m thinking we could get around this by splitting up the time property in each event object into separate startTime and endTime properties, and figure out a good way to represent it in the front-end depending on whether it’s a single or multi-day event. Might be something for a future PR though, since it’s a bit more complex

Originally posted by @ryanmohta in #88 (comment)

This would include updating events.json and the UI for the events page for multi-day events.

Events Page Button Focus is incorrect color

Should be a color related to the theme.

Rewrite board page

Use next.js to rewrite the html page.

Rewrite past board page

Use next.js to rewrite the html page.

Rewrite get involved page

Use next.js to rewrite the html page.

Add ICSSC Discord to Footer and "Contact Us" Page

Link: https://discord.gg/c4t5dGcM9S

Replace Image tags

Throughout all the files, replace the Next.js Image component into img tags

Refactor Events Page

{
    "current": [
        {
            "src":"/assets/img/events/event_icsscfair.jpg",
            "title":"ICSSC at AIFs",
            "time":"Monday, September 25th, 2023",
            "location": "Aldrich Park 11AM -4 PM",
            "desc": "💻 Interested in Computer Science? Want to get involved in the ICS community here at UCI? 🧑‍💻Come talk to the Information and Computer Science Student Council at AIF this Monday, September 25th at AIF from 11 am to 4 pm! Meet our board members, learn about new opportunities 👀, and learn about upcoming events 📅!"
        }
    ],

    "past": [
        {
            "src":"/assets/img/events/event_microtalk.png",
            "title":"ICSSC's Micro Talks",
            "time":"Wednesday, May 10th, 2023",
            "location": "ICS 428 7-8 PM",
            "desc": "ICSSC Events Committee ran out of ideas! 🫵 So you’re the next event! Steal the stage (aka front of ICS 428) with a 1-2 minute microtalk on anything you want: your hopes, dreams, passions, among us victories, or a random topic from our wheel 🎡"
        }
    ],

Currently, events.json is split into current and past; it's accessed with EventsData.past.map() and EventsData["current"].map(), but this requires manual updating from current -> past. We can clean this up by filtering based on date.

Additionally, some TLC on events.js would be solid!

Humans of ICS Page

Bring back the Humans of ICS page as well as its archives. Archives are found here.
The page would be under the About dropdown in the nav,