Skip to content
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.

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

Navigation Bar and Footer #14

Merged
merged 15 commits into from
Sep 9, 2023
Merged

Conversation

waalbert
Copy link
Contributor

Created the navigation bar and footer.

@waalbert waalbert linked an issue Aug 31, 2023 that may be closed by this pull request
Copy link
Contributor

@samderanova samderanova left a comment

Choose a reason for hiding this comment

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

Great work on this so far! One thing that's also missing from the navigation bar is the ZotHacks logo, so please include that as well.

apps/site/src/components/Footer/Footer.module.scss Outdated Show resolved Hide resolved
apps/site/src/components/Footer/Footer.module.scss Outdated Show resolved Hide resolved
apps/site/src/components/Footer/Footer.module.scss Outdated Show resolved Hide resolved
apps/site/src/components/Footer/Footer.module.scss Outdated Show resolved Hide resolved
apps/site/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
apps/site/src/components/NavBar/NavBar.module.scss Outdated Show resolved Hide resolved
apps/site/src/components/NavBar/NavBar.module.scss Outdated Show resolved Hide resolved
apps/site/src/components/NavBar/NavBar.module.scss Outdated Show resolved Hide resolved
apps/site/src/components/NavBar/NavBar.tsx Outdated Show resolved Hide resolved
apps/site/src/components/NavBar/NavBar.tsx Outdated Show resolved Hide resolved
Copy link
Member

@taesungh taesungh left a comment

Choose a reason for hiding this comment

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

Good start so far, some additional smaller things to address.

apps/site/src/assets/icons/facebook.svg Outdated Show resolved Hide resolved
apps/site/src/components/Footer/Footer.module.scss Outdated Show resolved Hide resolved
apps/site/src/components/NavBar/NavBar.module.scss Outdated Show resolved Hide resolved
apps/site/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
apps/site/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
apps/site/src/app/layout.tsx Outdated Show resolved Hide resolved
apps/site/src/app/layout.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@samderanova samderanova left a comment

Choose a reason for hiding this comment

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

Thanks for continuing to work on this! Just a few more things to fix:

apps/site/src/components/NavBar/NavBar.tsx Outdated Show resolved Hide resolved
apps/site/src/components/NavBar/NavBar.tsx Outdated Show resolved Hide resolved
@github-actions
Copy link

github-actions bot commented Sep 6, 2023

Deploy preview for zothacks-site-2023 ready!

Name Hack at UCI Site
Preview Visit Preview
Commit 71570cc

@github-actions
Copy link

github-actions bot commented Sep 6, 2023

Deploy preview for zothacks-site-2023-sanity ready!

Name Sanity Studio
Preview Visit Preview
Commit 71570cc

apps/site/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
apps/site/src/components/Footer/Footer.module.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@samderanova samderanova left a comment

Choose a reason for hiding this comment

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

Everything else looks good for now. For the sake of time, this PR should be merged and closed so we can proceed with other tasks. Once SVGs without embedded rasters are available, we can switch to those.

apps/site/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@samderanova samderanova left a comment

Choose a reason for hiding this comment

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

Thanks for working on this!

Copy link
Member

@taesungh taesungh left a comment

Choose a reason for hiding this comment

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

Thanks for the continued efforts. As Sam said, in interest of time, let's merge.
Additional notes: lined paper could still be a vector. footer socials is more complicated than needed, but works for now, we can revisit it.

@samderanova samderanova merged commit e952f49 into main Sep 9, 2023
2 checks passed
@taesungh taesungh deleted the feature/navigation-bar-and-footer branch September 17, 2023 17:29
tyleryy pushed a commit that referenced this pull request Sep 18, 2023
* feat: create navigation bar

* feat: create footer

* refactor: font, dependencies, scss, footer

* fix: navbar on mobile

* refactor: added routes and other small changes

* feat: active page link has corresponding color

* feat: add ZotHacks logo

* fix: use responsive css and add bold weight

* chore: use absolute asset path for navbar background

* fix: logo moves upon navbar expansion and navbar is fixed to top of the screen

* refactor: clean up css and use bootstrap grid

* fix: remove horizontal scroll

* fix: switch Twitter to Hack and SVG to PNG

* fix: move Hack to front of footer

---------

Co-authored-by: Alexander Liu <a@alexanderliu.com>
tyleryy pushed a commit that referenced this pull request Sep 18, 2023
* feat: create navigation bar

* feat: create footer

* refactor: font, dependencies, scss, footer

* fix: navbar on mobile

* refactor: added routes and other small changes

* feat: active page link has corresponding color

* feat: add ZotHacks logo

* fix: use responsive css and add bold weight

* chore: use absolute asset path for navbar background

* fix: logo moves upon navbar expansion and navbar is fixed to top of the screen

* refactor: clean up css and use bootstrap grid

* fix: remove horizontal scroll

* fix: switch Twitter to Hack and SVG to PNG

* fix: move Hack to front of footer

---------

Co-authored-by: Alexander Liu <a@alexanderliu.com>
tyleryy pushed a commit that referenced this pull request Sep 19, 2023
author Albert Wang <56945244+waalbert@users.noreply.github.com> 1694217932 -0700
committer Tyler Yu <tyleryy@uci.edu> 1695095646 -0700

draft: sticker component + animations + layout

* feat: create navigation bar

* feat: create footer

* refactor: font, dependencies, scss, footer

* fix: navbar on mobile

* refactor: added routes and other small changes

* feat: active page link has corresponding color

* feat: add ZotHacks logo

* fix: use responsive css and add bold weight

* chore: use absolute asset path for navbar background

* fix: logo moves upon navbar expansion and navbar is fixed to top of the screen

* refactor: clean up css and use bootstrap grid

* fix: remove horizontal scroll

* fix: switch Twitter to Hack and SVG to PNG

* fix: move Hack to front of footer

---------

Co-authored-by: Alexander Liu <a@alexanderliu.com>

feat: draggable sticker component

fix: pull from main

* feat: bootstrap sass organization

* fix: installed bootstrap

* fix: import font from Next instead of Google Fonts

* fix: update red hex value correctly

* linting

* fix: custom CSS property for font

* fix: sass partials

* fix: new sass path, incorporated navbar and footer

* fix: removed comment

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

Set up Home page content including Landing (#21)

Set up Home page content including Landing

- Reorganize Landing into Home
  - To match common naming, rename primary page to Home
  - Landing is now the first view of the Home page
  - Wrap primary layout children in `<main>`
- Use container layout for Home page sections
  - Add `Container` elements for sections w/ responsive vertical padding
- Create yellow Apply button with bs-btn variant in Home page Landing
  - Use `bootstrap.button-variant` mixin for Apply button styles
  - Specify empty variant to React Bootstrap
  - Remove unnecessary sizing and layout styles
- Separate usage of theme variables and Bootstrap mixins

---------

Co-authored-by: Taesung Hwang <taesungh@uci.edu>

feat: draggable sticker enhancements

feat: sticker dragConstraints and elastic

added type

sticker spring transition

reduced spring stiffness

shadow adjustments

feat: base sticker component

individual sticker example

rename to Base Sticker

imports

feat: sticker layout, file structure, animations

hoisted transition object

hack sticker w/ light shake animation

heart sticker

quickshake animation

animation transition timing adjustments

positioning on stickerLayout

Navigation Bar and Footer (#14)

* feat: create navigation bar

* feat: create footer

* refactor: font, dependencies, scss, footer

* fix: navbar on mobile

* refactor: added routes and other small changes

* feat: active page link has corresponding color

* feat: add ZotHacks logo

* fix: use responsive css and add bold weight

* chore: use absolute asset path for navbar background

* fix: logo moves upon navbar expansion and navbar is fixed to top of the screen

* refactor: clean up css and use bootstrap grid

* fix: remove horizontal scroll

* fix: switch Twitter to Hack and SVG to PNG

* fix: move Hack to front of footer

---------

Co-authored-by: Alexander Liu <a@alexanderliu.com>

feat: sticker start + framer install

feat: draggable sticker component

Bootstrap Sass Organization (#17)

* feat: bootstrap sass organization

* fix: installed bootstrap

* fix: import font from Next instead of Google Fonts

* fix: update red hex value correctly

* linting

* fix: custom CSS property for font

* fix: sass partials

* fix: new sass path, incorporated navbar and footer

* fix: removed comment

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

Set up Home page content including Landing (#21)

Set up Home page content including Landing

- Reorganize Landing into Home
  - To match common naming, rename primary page to Home
  - Landing is now the first view of the Home page
  - Wrap primary layout children in `<main>`
- Use container layout for Home page sections
  - Add `Container` elements for sections w/ responsive vertical padding
- Create yellow Apply button with bs-btn variant in Home page Landing
  - Use `bootstrap.button-variant` mixin for Apply button styles
  - Specify empty variant to React Bootstrap
  - Remove unnecessary sizing and layout styles
- Separate usage of theme variables and Bootstrap mixins

---------

Co-authored-by: Taesung Hwang <taesungh@uci.edu>

feat: sticker start + framer install

feat: draggable sticker component

removed use state import

Bootstrap Sass Organization (#17)

* feat: bootstrap sass organization

* fix: installed bootstrap

* fix: import font from Next instead of Google Fonts

* fix: update red hex value correctly

* linting

* fix: custom CSS property for font

* fix: sass partials

* fix: new sass path, incorporated navbar and footer

* fix: removed comment

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

Set up Home page content including Landing (#21)

Set up Home page content including Landing

- Reorganize Landing into Home
  - To match common naming, rename primary page to Home
  - Landing is now the first view of the Home page
  - Wrap primary layout children in `<main>`
- Use container layout for Home page sections
  - Add `Container` elements for sections w/ responsive vertical padding
- Create yellow Apply button with bs-btn variant in Home page Landing
  - Use `bootstrap.button-variant` mixin for Apply button styles
  - Specify empty variant to React Bootstrap
  - Remove unnecessary sizing and layout styles
- Separate usage of theme variables and Bootstrap mixins

---------

Co-authored-by: Taesung Hwang <taesungh@uci.edu>

feat: draggable sticker component

feat: sticker dragConstraints and elastic

added type

sticker spring transition

reduced spring stiffness

shadow adjustments

feat: base sticker component

individual sticker example

rename to Base Sticker

imports

Navigation Bar and Footer (#14)

* feat: create navigation bar

* feat: create footer

* refactor: font, dependencies, scss, footer

* fix: navbar on mobile

* refactor: added routes and other small changes

* feat: active page link has corresponding color

* feat: add ZotHacks logo

* fix: use responsive css and add bold weight

* chore: use absolute asset path for navbar background

* fix: logo moves upon navbar expansion and navbar is fixed to top of the screen

* refactor: clean up css and use bootstrap grid

* fix: remove horizontal scroll

* fix: switch Twitter to Hack and SVG to PNG

* fix: move Hack to front of footer

---------

Co-authored-by: Alexander Liu <a@alexanderliu.com>

feat: sticker start + framer install

feat: draggable sticker component

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

linting

fix: removed unused import
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create navigation bar and footer
4 participants