Project: My Porfolio

Introduction

I decided to build my portfolio with these technologies (Headless WordPress and Next.js) because I have been working with WordPress for several years and I have a lot of knowledge about Next.js. I wanted to combine them to test my capabilities, and the result is impressive.

What is Headless WordPress?

Traditional WordPress setups tightly couple the content management system (CMS) with the frontend. However, with Headless WordPress, we separate the CMS from the presentation layer. Developers can use WordPress as a content repository (like a backend) and fetch content via its API on the frontend. Next.js becomes our frontend technology of choice.

The steps I followed to build my portfolio:

1. Next.js Setup:
   • I start by type on my vs npx create-next-app@latest and follow all the instruction from the next.js installation guide here.
2. Setting Up WordPress on a subdomain:
   • I install WordPress and configure it on my subdomain.
3. Plugins and Custom Fields:
   • I install and configure plugins like Advanced Custom Fields (ACF). ACF allows me to create custom fields, custom post types(CPT) and custom taxonomies that my application’s needs.
4. Connecting WordPress and Building Your Blog:
   • I fetched content from WordPress using its API (REST API).
   • I create custom post types (e.g., projects, Studies and Careers, Portfolio posts and pages) and custom taxonomies (e.g., categories, tags).
   • Design my portfolio pages using Next.js components.
5. Deployment and SEO Optimization:
   • I deploy my portfolio on Vercel
   • I optimize my blog for SEO by providing meta tags, structured data, and a sitemap.
   • I Ensure me live URL is accessible for search engines.