Petene is a modest blog, serving as a recipe journal for its readers as well as for the author herself. While building this, I had to overcome a few interesting challenges:
- Scalable CMS while ensuring a consistent look throughout the website.
- Tri-lingual sorted by categories and tags
- Advanced animations for layout continuity
Custom designs are usually hard to scale. To ensure the blog will be easily expandable in the future, I made sure that most of the content is editable from CMS.
I used Prismic.io for content management. The editing experience is exceptional. Just like with most of the headlights CMS, I had to set up data models of the editable content. It had to be generic enough so my client can use it in new ways in the future.
The author writes recipes in three languages: Czech, German and English. Additionally, recipes can be sorted by categories and tags. This required a programmatic solution, as the number of categories and tags will grow in the future.
The website follows the modern JAMStack architecture, designed for fast and secure websites. I first pull down the data from Prismic. Using React and GatsbyJS, I programmatically create a static page for categories, posts and tags in every available language.
Upon deployment, the website pre-builds itself to the user is server static html pages that are immediately available. Everytime the content is edited, a webhook automatically triggers a deploy build, and the website is updated.
Competing with printed cookbooks is a difficult task. How beautiful is the user's experience of flipping though pages? Well, let's try to bring it to digital.
Layout continuity enhances user experience. I created custom transitions between pages, to help the user navigate through the website and understand the content they are looking at.
Are you interested?
I am currently looking for a student job, starting August 2019. Let me know how can I help you.Let's talk