Introduction

Creating a portfolio website is an exciting project, particularly when trying for showing your professionalism in IT industry. This blog article details the creation of my portfolio utilizing Next.js for the frontend and Strapi as the backend CMS. I will discuss the challenges I encountered and the lessons I learnt throughout the process. A significant difficulties was getting that images from my backend were shown correctly on the frontend, a common difficulty for many newbie developers.

Project Overview

This Portfolio is a responsive web app that displays my cybersecurity projects, blog posts, skills, certifications, and experiences. Here's the main tech stack I used:

Frontend:

• Next.js 14.2.10

• React 18 (dependencies)

• Tailwind CSS 3.4.1

Backend:

• Strapi CMS

• Node.js

Database:

• Postgres

Media Storage:

• Amazon S3 (for image and file upload)

Additional libraries:

• Axios (for API requests),

• DOMPurify (for sanitizing HTML),

• Lucide React (for icons),

• React Syntax Highlighter (for code blocks)

Deployment:

• Vercel (Frontend)

• Heroku (Backend)

The website has a dynamic project showcase, a blog system with pagination, a skills section, and a responsive design with dark mode. I used Strapi as a headless CMS to manage content, which made it easy to add new projects or blog posts whenever I wanted.

Key Features of this Portfolio

• Dynamic project showcase with detailed pages

• Blog posts with search, and sorting options

• Responsive design for any device

• Syntax highlighting for code snippets

• Image optimization using the Next.js Image component

Project Structure and Technologies

The project is organized into two main directories:

• Frontend (Next.js)

  : This includes all the app components, pages, and utilities.

• Backend (Strapi)

  : This contains the API endpoints, configuration, and database setup.

Deployment Workflow Diagram

Below is a diagram that shows the deployment workflow of this website, explaining how the backend, frontend, and media storage connect.