Table of Contents
Roteiro Cidade is a rewarding milestone in my portfolio, representing a complete lifecycle project—from the initial Figma to WordPress Conversion to the final deployment. It is a fully featured blog architecture containing essential pages like Home, Blog, Category, Tag, Search, and 404, with plans for future scalability.
Development Process: Component-Based Architecture
To ensure a pixel-perfect Figma to WordPress Conversion, I started by defining a Design System. I identified reusable elements and developed standard styling for typography (paragraphs, headers, spans). This “Atomic Design” approach ensures that every new post created automatically inherits the correct styling, maintaining visual consistency without manual effort.
The development workflow prioritized high-impact pages (Home and Blog), followed by dynamic templates for Archives (Categories/Tags) and a custom 404 page, ensuring a seamless user journey.
Tech Stack & Dynamic Logic
As a content-driven platform, WordPress was the obvious choice. However, to elevate the Figma to WordPress Conversion beyond a basic theme, I utilized a robust modern stack:
- Sass (SCSS): For modular, maintainable, and nested CSS styling.
- ACF (Advanced Custom Fields): To create a flexible backend. I built custom fields that allow the admin to manually select which posts appear in specific sections of the Home page, giving full editorial control.
- Swiper JS: Integrated for the homepage slider. Unlike heavy plugins, this lightweight JavaScript library allows for touch-responsive carousels, fully managed via ACF inputs.
Key Results & Evolution
Developing Roteiro Cidade significantly sharpened my skills in Figma to WordPress Conversion. I improved my command over Technical SEO, responsiveness, and content dynamization. It is a project that reflects weekends of dedication to achieving a professional, scalable theme structure.