The Domaine de Pipangaille is an establishment primarily offering bed and breakfast accommodations. It is located in Andancette, Drôme, France. In order to present the establishment to its customers and reduce the number of reservations through Online Tourism Agencies (OTAs), this website has been developed. The website's objective is to showcase the domain and its accommodations, as well as to suggest various nearby places to visit. A reservation page has also been set up, with a form on the main page allowing for a quick availability search.
Several key aspects were given extra attention in the development of the website:
- Responsive Design
- Website Speed
- Alternative Texts (ALT, Aria label)
- Meta Descriptions
- Image Quality
- Visual Comfort (Dark Mode)
The entire site has been designed to adapt perfectly to all screen sizes, to the extent possible (except for the Apple Watch).
The use of Nuxt allows us to preload the content of pages whose links appear on the screen. Nuxt also enables us to use Nuxt Image, which generates images of the requested size, avoiding the need to store our images in different sizes. Furthermore, all images are compressed to maximize their loading speed.
We have made every effort to make the site accessible to all. Each image has an alternative text that can be read by screen readers and similar devices. All buttons without visible text also have an Aria Label.
To enhance our search engine rankings and achieve an attractive appearance when sharing pages, we have implemented meta descriptions for each of our pages. This allows us to better position ourselves by choosing the texts we want to display and obtain an elegant appearance when sharing our pages on social networks or via messages.
All our images are stored in 4k resolution but are generated by the server in the size displayed on our visitors' screens. Lower-quality images have been enhanced with various upscale tools. All logos, pictograms, icons, etc., are in SVG format to be as lightweight as possible while maintaining good quality.
All colors on the site are chosen to ensure that text remains perfectly readable at all times. If text needs to be overlaid on an image, it has been given a shadow to make it more readable, and the image has been selected to maintain good contrast.
- Nuxt
- Nuxt Image
- Tailwind CSS
Design: Figma
Logo Creation: Figma
Development: VSCode
Image Quality Enhancement: Upscale Media
Domain Purchase: Hostinger
Hosting: Vercel
Check out the Nuxt 3 documentation for more information.
Please note that the project uses environment variables that are not included in this repository.
Make sure to install dependencies:
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install --shamefully-hoistLaunch the development server at http://localhost:3000:
npm run devBuild the application for production:
npm run buildLocally preview the production build:
npm run previewRefer to the deployment documentation for more information.