A practice project to teach myself responsive web design with Vue. The concept here is a tourism page for a fictional region inspired by Patagonia and Iceland, using this project as a springboard.
Suggestions on how to improve this are welcome!
This uses pnpm instead of npm. However, most of the commands should work roughly the same.
pnpm install installs dependencies. Unlike npm, it adds dependencies into a global store instead of a per-project node_modules folder.pnpm run dev runs a development build.pnpm run build runs a production build. This is also used during the automated deployment.pnpm run preview deploys a local preview of the production build.pnpm update updates all outdated dependencies.The build includes an imagemin task.
The build uses a GitHub Action (view build file) to build the app and then deploys the contents of the dist/ folder as a static page.
I manually run this through the WAVE extension for Firefox. It hasn't reported anything yet, but improvements are welcome (especially ways to automate this).
The targeted screen widths for this are:
Some pages use different line lengths.
All images are from pexels.com, except for the logo, which was generated using Canva.
The navbar is derived from this W3Schools example, with some modifications to fix menus hanging open.