Case: Creating a personal portfolio on Tilda
Primary information
Introduction
Every website development project tells a unique story. For me, creating my own portfolio was a challenge to build a functional website using only Tilda's default blocks and a bit of CSS. I aimed to make the site look modern and sleek while relying solely on these resources.
While Tilda offers extensive capabilities for creating aesthetically pleasing and functional portfolios using Zero blocks, the default blocks may lack variability. However, in almost every Tilda project, it's challenging to avoid the functionality of Feeds or Online store default blocks.
I believe that using default blocks with their functional components combined with code to transform them into the desired design is a convenient format for any project on Tilda.
While Tilda offers extensive capabilities for creating aesthetically pleasing and functional portfolios using Zero blocks, the default blocks may lack variability. However, in almost every Tilda project, it's challenging to avoid the functionality of Feeds or Online store default blocks.
I believe that using default blocks with their functional components combined with code to transform them into the desired design is a convenient format for any project on Tilda.
Stage I: Figma
The initial design was created without the intention of being implemented on default blocks. I have developed the main page along with its responsiveness, as well as the blog page.
The file can be viewed via the link.
This is the second version of the layout, without significant tuning. The first one was not preserved. Also, the layout is in Russian.
During the creation process, I drew inspiration from websites with dark themes and minimalist structures. I also planned to implement a sidebar menu in the future, but for now, I decided to use a universal one. Otherwise, almost everything was transferred to the Tilda website.
Also, using Dalle, I created my logo and manually vectorized it, removing unnecessary elements.
Stage II: Implementation on Tilda
First, I selected suitable default blocks structurally aligned with the design through several revisions, choosing the best ones. I transferred content from the layout and added what was missing.
Then came the most interesting part of the story - attempting to tame the standard blocks in the right direction. The process took several days. There were challenges here and there, but overall, I'm satisfied with the result, although I definitely won't stop there, striving to improve.
In the editor itself, the main page looks like this:
Then came the most interesting part of the story - attempting to tame the standard blocks in the right direction. The process took several days. There were challenges here and there, but overall, I'm satisfied with the result, although I definitely won't stop there, striving to improve.
In the editor itself, the main page looks like this:
Final result
In the end, I managed to create a portfolio with convenient project filling via "Feeds", allowing for quick content changes without redoing adaptivity numerous times. Overall, the project turned out to be close to the layout and initial idea. And except for the preloader, it's entirely based on standard block.
It took 4 days for the design and an additional 11 days for the markup and CSS adjustments.
It took 4 days for the design and an additional 11 days for the markup and CSS adjustments.
Thank you for attention!
If you have any questions, suggestions, or would like to collaborate, feel free to reach out to me on Telegram.
