This is the website for a Japanese sushi restaurant called Sushi Doshira (鮨どしら) that showcases my ability to design responsive layouts and implement them using component-based frameworks (React.js/Next.js) with internationalization (i18n), SEO optimization, animations, and accessibility features.
Live Demo: https://sushi-restaurant.rashidshamloo.com/
I designed a responsive layout for mobile and desktop using Figma (and Photoshop for the logo) and implemented the design using TypeScript, React.js/Next.js, and Tailwind CSS making sure it works properly on different screen sizes in both English and Japanese versions.
Design: Behance
I have divided every section into smaller components that can be easily modified and re-used in the future. I have kept all the data like menu items and prices in .json files and loaded them dynamically so they can be modified with ease.
I have implemented Internationalization with an English and a Japanese version. The translations are kept in separate .json files and can be modified easily. I have used a different font for each version and adjusted the layout to work for both versions.
I have added custom-made reveal animations using a custom component I made using Framer Motion.
I heavily customized the slider with color, size, and animations to match the design and the feel of the website.
I improved the website's accessibility by adding ARIA properties and testing how the website behaves for people with disabilities. I adjusted the heading/section structure of the website and added screen-reader-only titles to the sections that needed it.
This website is optimized for search engines using metadata like description, keywords, OpenGraph, Twitter card, and more.
All of the images used in this application have responsive sizes according to the device size to limit bandwidth usage and deliver a great end-user experience. All of the fonts are cached and served from the same server for faster load times.
91 SEO score is because of a bug with Next.js/Lighthouse (robots.txt) and will be fixed in the future.
I have made my own custom elements like a scroll-to-top component and a scroll-down element with animation instead of relying on external packages/assets.
A challenge I faced was that the font I was using (Sawarabi Mincho) didn't have the kanji for sushi (鮨) so I had to use another font which caused some layout changes due to the letter spacing/sizing differences and on top of it the fonts that I liked didn't have good English/Latin characters so I ended up using separate fonts for the English and Japanese versions.
- TypeScript
- React.js
- Next.js v14
- Tailwind CSS
- Swiper
- Framer Motion
Rashid Shamloo
- Portfolio - rashidshamloo.com
- Linkedin - rashid-shamloo
- Dev.to - @rashidshamloo
- Twitter - @rashidshamloo
- Email - rashidshamloo@gmail.com