React Templates & Themes Logo React Templates & Themes
Abdulrahman.id screenshot

Abdulrahman.id

Author Avatar Theme by Abdulrcs
Updated: 12 Feb 2025
253 Stars

Dynamic Portfolio Website built with Next.js, Chakra UI and Contentful!

Github Live Preview

Categories

Nextjs Contentful Firebase Chakra ui Blog Personal Portfolio

Overview

Abdulrahman.id is an open-source portfolio website that comes with dynamic content management features. It allows users to add projects and posts using Contentful CMS. The website is built using Next.js and Chakra UI. For more information on Next.js and Chakra UI, you can refer to their respective documentation. The repository for this portfolio website is available for forking, and if you find it useful, you can support it by giving it a star.

Features

  • Dynamic content management using Contentful CMS
  • Built with Next.js and Chakra UI
  • Multiple content types, including Blog Posts, Featured Projects, Projects, Introduction, and Contact Me
  • Integration with Firebase for fetching blog post views
  • Integration with Google Analytics for tracking website analytics
  • Support for MDX (next-mdx-remote) for blog post formatting

Installation

To install the portfolio website, follow these steps:

  1. Create an .env.local file and set the environment variables based on the .env.example file.
  2. Obtain the API keys by going to the Content Delivery / Preview tokens section in Contentful CMS settings. Copy the Space ID and Content Delivery API access token.
  3. Put the obtained API keys into the respective environment variables in the .env.local file.
  4. Install the dependencies by running npm i or yarn in the project directory.
  5. Start the project by running npm run dev or yarn dev.
  6. To deploy the website, you can use Vercel.

Summary

Abdulrahman.id is an open-source portfolio website that offers dynamic content management capabilities through Contentful CMS. It is built using Next.js and Chakra UI and supports multiple content types such as blog posts and projects. The website integrates with Firebase for blog post views and Google Analytics for website analytics. The installation process involves setting up the required API keys and running the project locally or deploying it using Vercel.