weareinit/upe-site

The redesign of the UPE website made with <3 by the Technology Committee.

Gatsby minimal starter

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the minimal starter.

   # create a new Gatsby site using the minimal starter
   npm init gatsby

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-gatsby-site/
   npm run develop

3. Open the code and start customizing!

   Your site is now running at http://localhost:8000!

   Edit src/pages/index.js to see your site update in real-time!

4. Learn more

   • Documentation

   • Tutorials

   • Guides

   • API Reference

   • Plugin Library

   • Cheat Sheet

🚀 Quick start (Gatsby Cloud)

Deploy this starter with one click on Gatsby Cloud:

upe-site's Issues

[Sanity] Create executiveBoard Schema

Description

Create a schema that holds a references from the person schema with the following fields:

• Person (String) referenced from person schema
• Title, list of titles in executive board to assigned to people in the person schema

[Home Page] Create Programs section

Description

Create a section that contains program logos and descriptions. Until the general button component is ready, use placeholder buttons or omit them entirely for now.

Mockup/Screenshots

Example from mockup. For the logos, use the black horizontal versions from the shortcut folder called "Horizontal" inside the Logos folder.

[Sanity] Create program Schema

Description

Create a schema that holds a program object with the following fields:

• Name (Program Name)
• Flyer (image) referenced from image schema
• Links (for RSVP) referenced from link schema

[Executive Board] Create Executive Board sections

Description

Create the executive boards sections in the Executive Board page (see Gatsby documentation on routing to learn how to create a new page for the website). For now, omit data taken from back-end. This will be a separate task.

Mockup/Screenshots

Refer to how it is currently set up on the live website for this task. The section titles should follow the style from the mockup (yellow titles, black section descriptors)
https://upe.cs.fiu.edu/executive-board/

Subtasks

Any subtasks that you would like to outline that will lead to the completion of this task

• Create sections
• Create a component to display information for people

[Event] Create general event component

Description

Create a general event component to be used on the Events page and for upcoming events sections. Event components should display an image, have a title, a description, a date and a link.

Mockup/Screenshots

[Home Page] Create Page Hero section component

Description

Create a section to contain our page hero (the top of the home page). For now, omit the buttons until the general button component is ready. The background gradient will be in branding guidelines in the google drive.

Mockup/Screenshots

Image to be used for the section (asset is in the google drive)

Page Hero from mockup (curve svg in google drive)

[Sanity] Create event Schema

Description

Create a schema that holds an event object with the following fields:

• Name (event name)
• Program linked from Program schema
• Flyer (image) referenced from image schema
• Links referenced from link schema

[Sanity] Create person Schema

Description

Create a schema that holds a person object with the following fields:

• Position (their position in e-board) linked from executiveBoard schema
• Portrait (image) referenced from image schema
• Links (for social media/LinkedIn/GitHub)

Schema should be linkable to "exectuveBoard" schema

[Home Page] Create About Us section

Description

Create a section to contain the about us section. For now, omit the buttons until the general button component is ready. The colors to use are in the UPE branding guidelines in the google drive.

Mockup/Screenshots

Placeholder image to use for now (in the google drive)

About Us section from mockup

[Button] Create a general text button component

Description

Create a general text button component that can be used across the site and with different styles/backgrounds. The purpose of making a general use button component is to not rewrite code for styles that our buttons should always have such as the same border radius, font, font size, etc.

Suggestion: try making the text transparent so we do not have to worry about the font color i.e. the font color will be whatever the background color of the section is. View the screenshots/mockup to see more. If this suggestion is not possible or doesn't look good, send screenshots so we can scrap the idea or table it until later.

Mockup/Screenshots

[Navigation Bar] Create desktop navigation bar

Description

Create a navigation bar for the website. At the moment, it should have options for Home, Events, Executive Board and a program drop down list containing every program UPE offers. The buttons to go to different pages should be simple text and does not need to have a link implemented at the moment.

Mockup/Screenshots

There is no mockup for the component. The layout should have the Upsilon Pi Eplison logo found in the google drive left aligned and the page buttons to click on towards the right. Send picutres of progress so we can plan this accordingly. At the moment, do not worry about mobile.

Subtasks

• UPE logo
• Home page
• Events page
• Program Dropdown
• Executive Board

[Sanity] Create link Schema

Description

Create a schema that holds a link object with the following fields:

• Name (what is this link?)
• Link (actual link)

Schema should be linkable to various schemas

[Home Page] Create footer section

Description

Create the footer section for the home page. The icons for the social media should be in the google drive along with the svg for the curve. Do not include the email and phone icons at the bottom right. Instead, add a Contact Us section below the social media buttons that contains our email ([email protected]).

Social Media Links:

• Discord: https://discordapp.com/invite/upefiu
• Facebook: https://www.facebook.com/upefiu
• Instagram: https://www.instagram.com/upefiu
• Twitter: https://twitter.com/upefiu
• LinkedIn: https://www.linkedin.com/company/upe-fiu

Mockup/Screenshots

Footer section from mockup

[Sanity] Create a schema plan

Description

Please research Sanity and how their schema system works. A good place to get started is here. For this issue, please collaborate with the other back-end members of the team to devise a plan for the schema.

Some objects the website will need (feel free to add more and discuss which are necessary)

• Images (containing a title field, an image field, and an alt text field)
• Events (containing a title field, a program field (the program that is hosting the event), an image field (for flyers))
• Pages (this might be the trickiest since page needs will vary. refer to the mockup for what each type of page will need)

[Sanity] Create image Schema

Description

Create a schema that holds an image object with the following fields:

• Name (file name)
• Description
• Image (image)
• Category (list) to include programs, or general images (such as general UPE events)

Schema should be linkable to various schemas