Abubakar Portfolio

Published on June 6, 2026

Abubakar Portfolio is a responsive full-stack portfolio website built to showcase my projects, skills, learning journey, blogs, and contact information. The website also includes an AI-powered chatbot, a backend-powered contact form, automated testing, and a CI/CD pipeline.

Tech Stack

• HTML
• CSS
• JavaScript
• Node.js
• Express.js
• Google Gemini API
• Resend
• Jest
• Supertest
• GitHub Actions
• Cloudflare Pages
• Render

Portfolio Chatbot

One of the main features of this portfolio is an AI-powered chatbot. Visitors can ask questions about my skills, education, projects, experience, and contact information in a natural way.

The frontend sends the user's message to my Express.js backend hosted on Render. The backend then sends the request to the Google Gemini API along with information about me. Gemini generates a response and sends it back to the user through the chatbot interface.

To prevent misuse, I implemented rate limiting using express-rate-limit. Each visitor can send up to 20 messages per hour.

The chatbot also includes a fallback system. If the AI service becomes unavailable or the rate limit is reached, it automatically switches to keyword-based responses. This allows visitors to continue getting answers without relying on the AI service.

Chat history is stored using sessionStorage, allowing conversations to remain available while navigating between pages. The rate-limit counter is stored separately using localStorage.

Contact Form

The contact form is powered by a Node.js and Express.js backend. When a visitor submits the form, the frontend sends a POST request to the backend API.

The backend validates the submitted data, applies rate limiting to prevent spam, and sends the message to my email address using Resend. A JSON response is then returned to indicate whether the request was successful or not.

Testing

Automated testing is implemented using Jest and Supertest.

• Frontend tests verify important website functionality.
• Backend tests verify API endpoints and contact form behavior.
• Tests help identify issues before deployment.

CI/CD

GitHub Actions is used to automate testing and deployment.

Whenever code is pushed to GitHub, frontend and backend tests run automatically. The website is deployed only if all tests pass successfully.

I also configured a scheduled workflow that runs automated tests once every day to ensure the project remains stable over time.

Design & Planning

Before starting development, I planned the project structure and designed the user interface in Figma.

• Designed both dark and light themes.
• Used the Poppins font throughout the website.
• Focused on a simple black, grey, and white color palette.
• Created layouts before development to simplify implementation.

Pages

• Home Page: Introduction, skills, and technologies I use.
• Projects Page: Displays featured projects and smaller projects.
• Journey Page: Shows my learning journey and important milestones.
• Blog Page: Contains articles and updates related to my work and learning.
• Contact Page: Allows visitors to send messages directly to my email through the backend.