https://github.com/chaseottofy/vercel-nav
Recreation of Navbar featured on vercel.com/design
https://github.com/chaseottofy/vercel-nav
design javascript nav navbar typescript typescript-component vercel-design vercel-navbar web-design
Last synced: 11 months ago
JSON representation
Recreation of Navbar featured on vercel.com/design
- Host: GitHub
- URL: https://github.com/chaseottofy/vercel-nav
- Owner: chaseottofy
- License: mit
- Created: 2023-07-27T22:55:08.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-27T23:46:02.000Z (almost 3 years ago)
- Last Synced: 2024-12-16T19:41:44.825Z (over 1 year ago)
- Topics: design, javascript, nav, navbar, typescript, typescript-component, vercel-design, vercel-navbar, web-design
- Language: CSS
- Homepage: https://chaseottofy.github.io/vercel-nav/
- Size: 188 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vercel Navbar Recreation
**vercel.com/design**
*For educational and showcase purposes only*
## Compare to original
### [View Original](https://vercel.com/)
#### [View Recreation Codepen](https://codepen.io/chaseottofy/pen/jOQevOV)
#### [View Recreation Github Pages](https://chaseottofy.github.io/vercel-nav/)
---
## All Features Implemented
- Pixel perfect representation
- Navbar toggles between fixed and relative positioning depending on scroll position.
- Navbar links are functional.
- Responsive design.
- Animations implemented.
- Toggles between switch elements on scroll over relavent sections.
- Zero dependencies.
- **SVGs on Home screen from Vercel.**
## Optimized
## Built With
- TypeScript
- JavaScript
- HTML & CSS
---
## Installation and Usage
This project utilizes a bare-bones tsup configuration.
**install**
```bash
git clone https://github.com/username/reponame.git
cd reponame
npm install
```
**use**
```bash
npm run predeploy
```
- Predeploy will bundle typescript, and copy minified html/css/ect to /dist/ folder
- Open /dist/index.html
---
## License
This project is open-source and available to everyone under the [MIT License](LICENSE).