This is project of website of polish branding agency - Brandwell made in Gatsby. It's focused on the best possible performance with the highest quality of presented images.
Website is focused on presenting images of realised projects. Images are art directed for best experience on every device thanks to gatsby-plugin-image. Image placeholders are trace-colored and when user enters viewport, webp images are loaded and fallback to jpg if not supported. Site is styled using styled-components
Sites other features are:
- Multilingual with urls translation by gatsby-plugin-react-i18next,
- SEO optimized with sitemap by gatsby-plugin-react-helmet gatsby-plugin-sitemap
All projects on website are fetched on build time from content/projects directory. Project page is made of blocks of text and images. Occurrence of it is defined in default.md
default.mdThis file is in every project's directory. It contains project's details for all language versions and description in default language (in this case polish).en.mdEnglish description of project.
- Requirements
- Node 14+
- Gatsby CLI
- Scripts
| Command | Description |
|---|---|
gatsby develop |
Run development server with live reloading |
gatsby build |
Creates optimized production-ready application files |
gatsby serve |
Serve built page |
gatsby clean |
Clears .cache and public directories |
Translations are stored in three places.
- md files for projects are processed in
gatsby-config. src/intl/routeTranslations.jsonfor urls. Keys of json must match with pages names insrc/pages- other in
src/intl/{langage_code}
Queries in src/templates/ProjectTemplate.jsx must only access fields available in all languages.
To get common details for all languages you must do it in gatsby-node.js