The Feel Design is a business card site for an interior designer, representing his creative personality and professional skills. The site was created to impress and inspire visitors with his unique style and approach to interior design. See demo.
Developers:
Screenshot:
Create a cross-browser, adaptive website by design in Sketch. Key points for adaptability: 375px, 768px, 1100px, 1600px. There are no additional requirements.
Pages to create:
-262626?style=flat&logo=linux){kind=icon}
Also used: Macy.js, autosize.js
The site is a little underperforming on phones, while on desktops everything is fine. However, it is worth bearing in mind that this is after optimization.
On the service inner page, needed to make a column-based gallery that was very similar to the one used on Pinterest, while repeating the design with precision and detail.
Solution: I've been trying to get the grid effect through css for a long time. And there were even successful attempts with Grid Grid. But all these ways had problems (which I don't remember anymore). So it was decided to use Macy.js to create such a grid system.
On the main page there is a slider, which is divided into a picture and a block of information. It was necessary to make the block fixed, so that it does not move when you swipe.
Solution: I used Swiper.js for the slider, so I attached a listener to change the slide and every time the slide changed, I drew information from data-* attributes of the active slide.
As I am writing this text long after the end of the project, I have come to the following conclusions:
-
Lots of js. Libraries were used, which could have been changed to a self-written analogue or found a more suitable analogue. Such a script as bootstrap.min.js could not be used at all. jQuery was also obsolete and native js could have been used.
-
Splitting js. All the code is presented in one file, which is wrong. It turns out that the code for the cases page can be run on the main page, which in theory, will lead to errors. It would be more correct to split the js into strings.
-
Duplicate styles. If you look closely, the styles of each page are very similar and have some small differences. I think now, you could more intelligently split the design into components.
-
Spent time. The layout of this project took as much as 53 hours, which is just a terrible amount of time. There is an explanation for this - it was problematic to execute the design accurately. Especially the intro on the main page, there were problems with the text. Adding the paralax effect, non-standard look of the inside page of the case, pixel perfeсt in relation to the text on the pages of services. But all the same, a lot of time was spent and I would have made it much faster now.
If you only need a finished build, you can download it from the latest release.
This project is obsolete and uses an older version of Node.js - v16.20.0. There may be errors on newer versions. Make sure you are using this version of Node.js.
There may also be problems running on Windows or MacOs because the webpack config may not be ready due to different implementation paths.
Steps to manually build a project:
- Clone a repository:
git clone https://github.com/dmitrytavern/website-makeup-feel-design.git
- Install dependencies:
npm ci
- Run a command:
npm run dev
npm run build
npm run build:serve
- npm run dev - launches a live-reload webpack dev server for development.
- npm run build - builds the entire project in a production version.
- npm run build:serve - runs the production server to test the finished build.
MIT - check repo files
Copyright (c) 2020-present, Dmitry Tavern