Personal Portfolio Website

My personal portfolio started as a website designed in Figma and developed in Webflow to showcase my work, services, and experience as a Webflow developer.

As the portfolio evolved, I wanted greater control over the codebase, hosting, content management, and future development while preserving the existing design and responsive experience. The Webflow site was therefore exported and migrated to Hostinger, where it became the foundation for a progressively more customized development setup.

The website was later extended with Eleventy as a static site generator, reusable Nunjucks templates, Markdown-based project content, and Pages CMS for managing case studies without manually editing HTML. Git and GitHub were introduced for version control, while GitHub Actions now automatically builds the Eleventy site and deploys the production files to Hostinger after content or code changes are committed.

The result is an evolving, self-hosted portfolio platform that combines the visual foundation created in Figma and Webflow with a lightweight CMS, structured content, version control, and an automated deployment workflow.

I approached the project as a gradual evolution rather than a complete rebuild. The existing Webflow portfolio already had an established visual identity, responsive structure, and working interactions, so the priority was to preserve that foundation while progressively gaining more control over the website and its development workflow.

The first step was to export the Webflow website and establish a clean local development structure. Instead of replacing the existing frontend, I retained the generated HTML, CSS, JavaScript, assets, and interactions, then adapted and extended them where necessary for independent hosting.

The next stage focused on making the portfolio easier to maintain and expand. Eleventy was introduced as a lightweight static site generator, with reusable Nunjucks templates and Markdown-based content separating project information from presentation. Pages CMS was then added as an editing layer, allowing case studies to be created and updated through a visual interface while keeping the content stored directly in the GitHub repository.

Finally, I automated the publishing workflow. Changes committed to the main GitHub branch trigger GitHub Actions, which installs the project dependencies, builds the Eleventy site, and deploys the generated production files to Hostinger through a dedicated FTP account restricted to the portfolio’s public directory.

This incremental approach allowed the portfolio to evolve from a hosted Webflow website into an independently managed platform without sacrificing the original design or introducing unnecessary infrastructure.

Development began with the original Webflow implementation, where the approved Figma design was translated into a responsive website using Webflow’s layout system together with custom HTML, CSS, and JavaScript where additional control was required.

As the project evolved, the Webflow website was exported and moved into a local development environment. The existing frontend structure, styles, JavaScript, images, animations, and other assets were preserved while the project was reorganized for independent development and deployment. The website was then migrated to Hostinger, removing the dependency on Webflow hosting while retaining the established frontend experience.

The self-hosted version was further extended with custom functionality. The contact form uses a PHP endpoint for server-side processing and Cloudflare Turnstile for bot protection, while existing interactive components and responsive behavior were maintained and refined where necessary.

The next major development stage introduced Eleventy as the static site generator for portfolio case studies. Project content was separated from presentation and stored as structured Markdown, while reusable Nunjucks templates generate consistent case study pages. Pages CMS was connected to the GitHub repository to provide a visual interface for creating and editing project content without manually modifying Markdown or HTML files.

Git and GitHub provide version control for both the website code and CMS-managed content. The publishing process was then automated with GitHub Actions: every relevant change pushed to the main branch triggers dependency installation and an Eleventy production build, after which the generated _dist files are deployed automatically to the portfolio’s public_html directory on Hostinger through a dedicated FTP account.

This development workflow allows future case studies and website improvements to move from content or code changes to the live production website through a consistent, version-controlled, and largely automated process.

This project reinforced the value of evolving an existing website incrementally instead of rebuilding it simply because the underlying architecture needs to change. The original Webflow frontend provided a strong visual foundation, and preserving it allowed the technical architecture to evolve without unnecessarily recreating work that was already successful.

Migrating away from Webflow hosting also demonstrated the importance of separating design, content, and deployment concerns. Once the website was self-hosted, the frontend could remain largely intact while Eleventy, Nunjucks, and Markdown were introduced specifically where they provided value — reusable templates and structured case study content.

Building the CMS workflow highlighted another important lesson: a content management system does not necessarily require a traditional database or backend. For a portfolio with relatively structured and infrequently changing content, Markdown stored in GitHub combined with Pages CMS provides a lightweight solution with built-in version history and full ownership of the content.

Automating deployment was equally important. Manual uploads are manageable at the beginning, but they quickly become inefficient once content is updated through a CMS. Connecting Pages CMS, GitHub, GitHub Actions, Eleventy, and Hostinger created a much cleaner publishing workflow and reduced the number of manual steps required to move a change into production.

The project also reinforced the importance of choosing technology according to the actual problem rather than adding complexity for its own sake. The current architecture remains intentionally lightweight while still providing content management, reusable templates, version control, automated deployment, security, analytics, and room for future expansion.

Because the portfolio remains an ongoing project, the architecture can continue evolving as new requirements appear without requiring another complete rebuild.