I decided to make a portfolio website for myself using a free Figma layout. First, I needed to do the markup.

The markup is made on HTML, CSS, JS. When making the markup, I used Flexbox and Grid grid for high-quality adaptability and reliable structure of the site. For some icons, I created an icon font, the rest, suitable for the layout, were added using the Fontawesome library. I made several Swiper sliders. In the slider with the portfolio, I made a filter by categories on JS. Adapts to mobile devices up to 320px.

✅ First, I opened the layout and generated a duplicate layout in Figma.

✅ Then I opened my starter template to begin working on the project.

✅ I also downloaded all the icons from the layout in SVG and generated an icon font from them using the icomoon.io service. Unfortunately, not all the icons could be converted into an icon font, so I also connected the Fontawesome library.

✅ I then marked out the layout with guide lines to define the bounding container, as well as the Header and Footer.

✅ The next step was to determine which fonts were used in the layout and include them.

✅ Finally, I started developing Header and Footer.

✅ Then I started developing the site pages.

The result is a reliable, cross-browser, adaptive markup of the portfolio site ready for integration into CMS Word Press.

I did the work in 5 days. Approximate cost is $250.