GithubHelp home page GithubHelp logo

acmutd / hackutd-site Goto Github PK

View Code? Open in Web Editor NEW
5.0 5.0 7.0 207.63 MB

700 students & 24 hours of ideas, projects, design, and more at UT Dallas.

Home Page: http://hackutd.co

JavaScript 16.99% HTML 1.67% Vue 81.34%

hackutd-site's People

Contributors

abdullah50053 avatar bharatari avatar caitlin-tibbetts avatar chillm avatar darichey avatar dependabot[bot] avatar gabriel-flynn avatar gzu2018 avatar harshasrikara avatar huecute avatar izuchukwu avatar matthewle20 avatar mdunn09045 avatar mzx102208 avatar nam-t24 avatar neeljaay avatar shounak avatar tahiraziz avatar williecubed avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

hackutd-site's Issues

Add a custom scroll bar

This one is very minor, but having the website use a custom-themed scroll bar would aid in theme cohesion for the website. This scroll bar would fit the existing color theme and be a 2-4 pixel-wide, rounded scroll bar (something like the scroll bar for macOS).

Main site

We want a site dedicated to HackUTD as whole rather than one specific event. This can link to the next event-specific site.

This issue should be updated as we discuss specifics.

Add Google Analytics support

Adding Google Analytics support would allow the HackUTD team to attain a better understanding of its audience and participants. Ideally, we'd be logging data like:

  • Page visits
  • Clicks to all call-to-action buttons
  • Navigation throughout the website

Gridsome has a Google Analytics plugin, but additional work would be needed to determine if it supports the newer gtag.js API.

Add site-wide toggle for dark mode

Right now, some components respond to the prefers-color-scheme CSS media query based on the browser/system selected theme, but many users would prefer to willingly opt into a dark theme on a site-specific basis. Implementing a toggle for dark theme would require storing some minimal data on the client (a key-value pair indicating theme preference) using Local Storage, but it certainly won't harm functionality.

Load officer images using GraphQL data layer

Due to time constraints in deploying the fall 2020 redesign, officer images had to be placed in the assets directory to be loaded into the website. However, because of the nature of this data, it should use Gridsome's built-in GraphQL data layer as opposed to having indirect references to photos in the site assets.

Spring 2020 site

Tracking issue for the spring 2020 hackathon site, developed in spring20.

The new site will be built with Jekyll. It will be a single page* site with the following information (in no particular order):

  • Big HackUTD, logo, date
  • Button to apply
  • Short description
  • FAQ
  • Sponsors
  • Social media links
  • Schedule

* Don't forget a 404 page

AWS Issue

Hopefully someone knows about this, Otherwise Im going to become a master of this!

help setting up DNS RECORD for the aws s3 and Route 53

Home screen call to action goes nowhere

The "Sign up for our newsletter" button doesn't go anywhere. We should contact the marketing team to find a suitable destination for this button.

In the future, the button should use some data source that isn't embedded in code, like a markdown/YAML file that the site uses to generate button text and link. Also, the home page should support the functionality to support multiple buttons (in the event that, for example, officer applications and a fall event are happening concurrently).

Update favicon

The current site favicon is horizontally stretched out. It needs to be swapped out with a square (32x32) one.

  • Ideally, it would be an SVG image, but this depends on browser support.
  • Given HackUTD's branding, it should be updated when the user changes theme (dark to light/vice versa)

Overhaul team page

Overview

Right now, the team page is merely passable in its purpose of displaying the current officers. However, it is nowhere near a final product.

Some information is needed ASAP to make the page more appealing to sponsors and potential passersby:

  • Cropping officer images to squares to display a non-squished image of each officer
  • Ensure all officers have a non-default biography
  • Asking officers to provide social links (like LinkedIn, Instagram, personal websites)

In addition, some structural changes would be ideal for aesthetic and functional purposes:

  • Separating officers into their respective committees. Right now, officer titles are displayed, but officer cards themselves aren't sorted.
  • As a corollary, having some other internal mechanism for sorting officers. Right now, they're loaded purely based on spreadsheet order, which isn't ideal from a maintainability perspective.
  • Perhaps having a list of past officers on the page, albeit in a de-emphasized form (perhaps as a simple list as opposed to being prominent cards
  • Tweaking the column spacing/padding to look visually pleasing across larger screen sizes

Bigger Ideas

Ideally, clicking/tapping an officer card would open something akin to a "team member page" where someone could have more than just a sentence to describe who they are as an individual. In addition, we could possibly adopt as an idea on the larger acmutd.co website for individual division pages, having a list of officers for each, something like an ACM Officer Profile built into the organization-wide portal. @jafrilli, what do you think about this?

In line with the culture of HackUTD and ACM at large (as of the fall 2020 marketing ad), this team page would reaffirm ACM's brand as being people-focused - not just treating officers as a bunch of faces who happen to organize events and build projects, but allowing them some amount of expression as to why they're a HackUTD officer and who they are as people. This could give allow officers to establish some sort of legacy during their time in the organization that persists well after they graduate.

cc @harshasrikara @darichey @jafrilli @acmutd/dev-officers

Titles & Body text

All titles should be our shark teal #5fc6c1 including largest university in north texas title.

All body text should be our purple #293247 if on light backgrounds, and white if on dark backgrounds

All subheaders should be our light purple #8da1cd @bharatari

For now, the entire website should be in the Muli font as well until we find an appropriate complimentary font

Event/organization history and milestones page

HackUTD as an organization has existed for a few years, but suffering from the same curse many other student orgs have, HackUTD's history hasn't been very well-documented. In the original incarnation of the redesign-2020 set of changes, history was going to be featured prominently. However, the need to prioritize site MVP completion left organization history shelved for another build sprint.

The event/organization history and milestones page should support the following:

  • A timeline-based view of all major HackUTD events (such as the first HackUTD, passing N attendees, etc.)
  • Supporting data loading from markdown files/other local data sources using Gridsome's data APIs
  • (Optionally) event information that expands to show a carousel of images when selecting an event

Some minor aesthetic additions include:

  • A timeline with a year/date indicator that scrolls and snaps near the top of the screen when scrolling, also increasing in size and prominence when reaching the top, reminiscent of a rocket ship
  • Having carousels with images that snap to the left/right sizes and with buttons that allow one to manually advance the images
  • Hovering/focusing on events expands them into self-contained cards that float above the page

Sections - this is v long issue :)

We should alternate background sections between white and our dark purple #293247. right now there is a lot of inconsistency like having black, light gray, white, purple etc as backgrounds.

First 2 sections:

  • I would also say consolidate the first 2 sections - largest univ hackathon and the numbers into one section.
  • I would also say add 6 tracks or some other relevant statistic cause 2 seems a bit empty.
  • Also remember to make any text that is dark our dark purple not black

Tracks header: overall really like this one

  • I would say make the header much bigger as well as everything else in the section accordingly. Especially on mobile everything is way too small
  • Put in relevant icons
  • Get the hackutd team to make copy for each track
  • I'd say make the icons the light purple and the titles for each track the teal, and make the bg of the whole section #293247 if it isnt already

FAQ: overall really nice too

  • I'd say once again make everything bigger and so font sizes for different hiearchies matches everything else like the tracks and section above that.
  • I think FAQ should be white bg so its easier to read, so make title green, subtitle light purple, body text dark purple, and each faq thing dark purple as well (since too much green will be bad)
  • overall the FAQ question sizes are good but the responses are really really small and should be larger
  • Anywhere in the FAQ responses there are needs for links like Apply here or email us or checkout fb etc, those should be hyperlinked and either underlined or a different color text so ppl can just click on them directly.
  • In the college student question, i'd remove the "highschool student?" that just sounds weird.

After FAQ I'd reccommend a sponsor section that is dark purple bg so that way the next section for the venue is still white

  • couple of sentences thanking our sponsors and indirectly showing what benefits sponsors get
  • have sponsors logos obvs - rn just SF lol
  • also add a button linking to the sponsorship packet at the bottom of this

Venue section

  • Super dope love the pic. In the text, I'd link the UTD map or a map of the buildings we will be using highlighted and circled etc.

Final CTA

  • I'd say 24 hours of awesomeness or something other cooler word.
  • suggestion - the size of the 24 hours of projects could be the size of all titles/headers, its bigger than the current section titles

Footer

  • add in proper social media links, icons, etc
  • on mobile need some upper and lower margin.padding between the copy right and the logo that is above and social media logos that are below it
  • footer should be dark purple bg maybe add the dot bg there

Archive fall 2019 site

Archive the fall 2019 site in a similar style to the previous year sites in a /19 directory.

Add better 404 page

It's ugly right now. Even a tiny bit of styling with some text/joke would be good.

Add some animations

This isn't strictly necessary for site functionality, but it would aid in building HackUTD's brand. Some possible ideas for animations include:

  • Reinforcing HackUTD's space theme (coming from its connection to UT Dallas and its mascot Temoc) by having comets streak across the sky on the home page.
  • Having the dot stars on the home screen sparkle
  • Fading transitions between pages/dialogs
  • Raising cards (increasing drop shadow) when hovering/focusing on cards
  • Page items in toolbar having their orange color slide in from the left/right when focused/hovered
  • The tail of the HackUTD comet streaking when being hovered/focused.

Most if not all of these animations can be implemented in pure CSS and won't require JavaScript. These are all subtle but will add to the appeal of the website and the organization.

Fix background stretching

Right now, the background of the HackUTD site doesn't scale properly when the size of the page contents changes. To fix this, the background may need to be redesigned in a way that makes it infinitely tileable in addition to modifying site-wide styles to not stretch the SVG background.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.