Portfolio Page (this)

Demonstrate frontend engineering skills in a format that recruiters can evaluate quickly.

Built a Next.js frontend optimized for fast rendering using Static Site Generation (SSG). Project data is managed through a headless WordPress CMS and delivered via REST API.

The project follows a layered architecture to separate UI logic from data modeling and data access.

• UI Layer: Responsible for rendering React components and handling user interaction.
• Domain Layer: Defines the domain models used within the application, independent from the WordPress data structure.
• Repository Layer: Acts as an abstraction between the application and the external API. It delivers data in the domain model expected by the UI.
• API Layer: Handles communication with the WordPress REST API and maps raw WordPress responses to the domain models used in the application.

Problem:
Combine static rendering performance with flexible CMS-driven page structures for project detail pages.
Solution:
Each section of the project detail page is rendered conditionally based on the available data returned by the CMS. The structure and formatting of the section content are defined directly in the WordPress custom post type using HTML markup.
On the frontend the content is rendered using `dangerouslySetInnerHTML`. Since the data originates from a controlled CMS environment and is retrieved server-side, the risk surface is limited while allowing flexible content formatting.

• Layout and spacing: I realized that it is better to handle section spacing at the page layout level rather than inside individual sections. This helps maintain a consistent vertical rhythm across the page and avoids duplicated spacing logic.
• Repository file structure: Separating the data layer into distinct folders such as domain, repository and database helped me keep a clear overview of each responsibility. This structure made debugging and later modifications easier.
• Design tokens: Introducing spacing tokens early helped maintain a consistent visual rhythm across the interface and made later layout adjustments much easier.
• Focus on component structure: While implementing the UI components I focused first on the data that was actually required for rendering, instead of worrying about how the data would be delivered by an API.
  After the component structure was clear, I defined a simple TypeScript interface and mapped the data accordingly. This approach reduced unnecessary concerns early in development and allowed me to focus on the component architecture first.
• Static rendering: Working with Next.js routing showed me how static generation can simplify data handling for content-driven pages like portfolio projects while also improving performance.