utmist / utmist2 Goto Github PK

Recreate the individual project page as per the Figma design. (use an incrementing ID for the url path so project/1 displays all-yaml/projects/1.yaml)

No hard-coded elements will be in the Projects Page; instead, a template component will be created as per YAML dependencies for easy customization in the future.

All YAML content should be rendered out as desired (H1, embedded images, etc)

Create it as a page that a user can enter through the projects page.

Keep in mind the mobile implementation of the page.

The program page description is hard-coded. This description will eventually be changed and might never be changed again, but it should still be easily accessible w/out touching the .tsx file.

Originally posted by @awesominat in #55 (review)

Recreate the deMISTify page as per the Figma design.

• Create a deMISTify schema (include picture location, year, href, and description)
• Reuse the year filter from the projects page
• Store the Medium link in YAML
• The 'subscribe to deMISTify' needn't do anything

Keep in mind the mobile implementation of the page.

create YAML that returns a loopable over schemas such as:

1. "what we do"
2. impact metrics
3. brief mission statement
4. alumni spotlight
5. home-page banner
6. projects

currently, the only solution to pass in the YAML data is through a reactState, however, since fs is used, the directory can't be accessed from the client side. as such a /pages directory where the parser and static data will stay.

Recreate the Footer component as per the Figma design.

Inject it at the end of the home page.

There is no need for any YAML dependency.

If you don't know what URL a button should open, please contact me.

Keep in mind the mobile implementation of the footer.

Recreate the individual department page as per the Figma design.

Please make everything on the page a 'component' from the YAML file that's later parsed and rendered from markdown into HTML with a custom component (an example could include stylizing the H1 into the website's style).

See the individual project page for an existing implementation.

Note that everything, including the team list, description, and other miscellaneous information, can not be hardcoded and must come directly from the YAML.

Reference the team member yamls to grab necessary information, as a previous issue aims to centralize it #50

This allows the website to have multiple, easily configurable team member lists, video embeddings, descriptions, and slides/external documents.

Keep in mind the mobile implementation of the page.

Recreate the Impact page to the home page as per the Figma design.

Rely on YAML in the project directory to grab the 3 metrics, the bars could either stay the same or allow for change depending on the metric.

Create it as a component that's injected into the page.tsx file after the alumni spotlight component.

Keep in mind the mobile implementation of the page.

The README for this repository should describe the goals of the project, and maybe include screenshots of the website.

The current development setup info in README.md should be moved into a DEVELOPMENT.md file.

Using the Figma reference (in discord), convert the design into a Navbar component.

• Regardless of the route, render the Navbar component
• Keep mobile/desktop sizes in mind when creating this, so keep the component responsive and optimized
• Only use the tech stack currently used

The deadline for this is Tuesday, October 31, 2023.

Recreate the Events page as per the Figma design.

• Create an Events schema (event name, picture location, and description)
• List it using similar methods shown in pages like the projects page

Keep in mind the mobile implementation of the page.

allow for team (image str and socials table), description, title, image, YT vid(s) (allow flexibility of multiple vids), and rendered content (H1, embedded images, etc)

Recreate the Projects page as per the Figma design.

No hard-coded elements will be in the Projects Page; instead, a template component will be created as per YAML dependencies for easy customization in the future.

For now, clicking the project does nothing, but in the future, it should link to another template page that loads more info straight from the YAML dependency.

Display a project status on the top left of its card. This will require changing the ProjectsMetaData to include a string status and changing all project yaml files. for example:

---
title: "project 1"
status: "Hiring"
publishDate: "2023-09-28"
---
project 1 content :O

and

export interface ProjectMetaData extends BaseMetaData {
    title: string;
    status: string;
    publishDate: string; // YYYY-MM-DD
}

Create it as a page that a user can enter through the home page / navbar.

Please keep in mind the filters at the top, use the publishDate in order to filter what the user can see, likely using some reactstate to selectively show some of the passed in data

Keep in mind the mobile implementation of the page.

Using the Figma reference (in discord), convert the "Banner" homepage design into a component to be used in the larger home component.

• When the route is '/' (the main homepage), use Next.js's built-in router to render the banner component inside the home component
• Keep mobile/desktop sizes in mind when creating this, so keep the component responsive and optimized
• Only use the tech stack currently used

The deadline for this is Tuesday, October 31, 2023.

@Cali0707 Could you please assign this to Azlan

Recreate the alumni spotlight section to the home page as per the Figma design.

Rely on YAML in the project directory to grab the name, information, image, and link.

Create it as a component that's injected into the page.tsx file after the What We Do component.

Keep in mind the mobile implementation of the page.

Recreate the What We Do page to the home page as per the Figma design.

Rely on YAML in the project directory to grab the 6 sub-sections' images and hrefs, and the "Find out more" href.

For now, the buttons don't lead anywhere, but it must be remembered that hovering and clicking will be accounted for in the future.

Create it as a component that's injected into the page.tsx file after the brief mission statement component.

Keep in mind the mobile implementation of the page.

• Use Image instead of img
• Name the page /events instead of /event

Originally posted by @awesominat in #56 (review)

Recreate the Newsletter Subscription component to the home page as per the Figma design.

There is no need for any YAML dependency for this component.

For now, the buttons don't do anything, but it is crucial to keep in mind that they will eventually sign users up for the newsletter.

Create it as a component that's injected into the page.tsx file after the metrics component.

Keep in mind the mobile implementation of the page.

Recreate the Academic and Career Programs page as per the Figma design.

• Grab the existing year filter implementation (from the projects page) and place it here
• Create a schema for a program and fill it with information present in the figma
• Use the same logic in the individual project section to create custom-rendered markdown to achieve the YAML to stylized HTML parsing
• • include information such as the program title, description (includes the location and instructor), and the timeline (including the tabular format and href)

Keep in mind the mobile implementation of the page.

Recreate the Brief Mission Statement page to the home page as per the Figma design.

Rely on YAML in the project directory to grab the text shown, the image shown, and the href of the button shown.

create it as a component that's injected into the page.tsx file after the banner component

keep in mind the mobile implementation of the page

When building the project on vercel there are the following build issues:

Failed to compile.
./pages/_app.tsx
13:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
./pages/whatWeDo/index.tsx
14:7  Error: Missing "key" prop for element in iterator  react/jsx-key
info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Error: Command "npm run build" exited with 1

These should be resolved so that the project can be run on vercel.

Recreate the Team page as per the Figma design.

1. Please create a global folder (in public/) for all team members that involves their names and pictures, making grabbing team members' pictures more efficient and consistent.
2. Create a department and team member schema.
3. Create another folder (in all-yaml) for all team members that contains yaml files (with the team member schema) with information such as name, positions, info, profile picture location, etc.
4. Create a yaml file for each department, including info like their picture location, title, and desc.
5. Use the same year filter logic present in the projects page
6. Upon clicking any of the department pages, redirect the user to /departments/DEPT_NAME where DEPT_NAME is the lower case version of the department's name

Keep in mind the mobile implementation of the page.

@Cali0707 Could you please assign this to Karen.

Recreate the What We Do page as per the Figma design.

No hard-coded elements will be in the What We Do Page; instead, a template component will be created as per YAML dependencies for easy customization in the future.

For now, "Find out more" does nothing, but in the future, it should link to another template page that loads more info straight from the YAML dependency

Create it as a page that a user can enter through the home page / navbar.

Keep in mind the mobile implementation of the page.