chaseottofy / vercel-nav

Recreation of Navbar featured on vercel.com/design

Vercel Navbar Recreation

vercel.com/design For educational and showcase purposes only

Compare to original

View Original

View Recreation Codepen

View Recreation Github Pages

---

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

git clone https://github.com/username/reponame.git
cd reponame
npm install

use

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.