Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdulrcs/abdulrahman.id
⚡ Dynamic Portfolio Website built with Next.js, Chakra UI and Contentful!
https://github.com/abdulrcs/abdulrahman.id
blog chakra-ui contentful github-blog nextjs personal-website portfolio react utterances
Last synced: 6 days ago
JSON representation
⚡ Dynamic Portfolio Website built with Next.js, Chakra UI and Contentful!
- Host: GitHub
- URL: https://github.com/abdulrcs/abdulrahman.id
- Owner: abdulrcs
- License: mit
- Created: 2021-05-15T02:15:27.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-02-12T16:48:23.000Z (6 days ago)
- Last Synced: 2025-02-12T17:47:11.723Z (6 days ago)
- Topics: blog, chakra-ui, contentful, github-blog, nextjs, personal-website, portfolio, react, utterances
- Language: JavaScript
- Homepage: https://abdulrahman.id
- Size: 747 KB
- Stars: 247
- Watchers: 3
- Forks: 33
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
## ⚡ abdulrahman.id
I've decided to open-source my latest portfolio website! it has dynamic content management to add projects and posts using Contentful CMS, and was built using Next.js and Chakra UI.
Refer to [Next.js](https://nextjs.org/docs/) and [Chakra UI](https://chakra-ui.com/docs) documentation to learn more.
Feel free to fork this repository to make your own portfolio, and if you liked the repo, kindly support it by giving it a star ⭐!
## 🛠 Get started
### Getting the API Keys
Create an `.env.local` and follow the variable name based on `.env.example` and get the API Keys based on the steps below
Contentful API Keys
1. Create a Contentful account
2. Add a Community Space (It's free!)
3. Choose "I create content"
4. Go to content model and start to add content type
> 📌 In this portfolio website, it has 5 Content type which is:
> > ~~1. BlogPosts~~
> > After the [⚡2.0.0 update](https://github.com/abdulrcs/abdulrahman.id/pull/17), I use Github Issues as blog content!
> > More details about this on: https://abdulrahman.id/blog/unleash-your-dev-blog-write-more-with-github-issues-as-your-cms
> 2. FeaturedProjects
> 3. Projects
> 4. Introduction
> 5. ContactMe
>
> You must add this exact name since it's the ID that's used in the code.
5. Add the content type according to these fields:
6. Go to settings -> API Keys -> Content Delivery / Preview tokens -> "Your space name"
copy the Space ID and Content Delivery API access token
7. Put it into the environment variables according to `.env.example` and you're all set!
Firebase API Keys
1. Create a Firebase project
2. After setting things up you'll get the API keys, save those.
3. Go to Firestore Database
4. Add a collection named views
5. Then, put those API Keys before according to the .env.example and that's it!
Google Analytics API Keys
1. Create a Google Analytics account, in the property settings part, don't forget to turn on Universal Analytics
2. After that, you'll see a code starting with UA-
3. Copy those code and put it into environment variables according to env.example and done!
### Starting the Project
Install the dependencies with `npm i` or `yarn`
Start the project by `npm run dev` or `yarn dev`
### Deployment
You can deploy easily by using [Vercel](https://vercel.com/) 🎉
[](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fabdulrcs%2Fabdulrahman.id)
## 📌 Overview
`pages/index.js` = Homepage
`pages/projects/index.js` = Projects archive page
`pages/blog/index.js` = Blog listings page
`pages/blog/[slug].js` = Blog post page
`pages/api/views` = API to fetch blog post views from Firebase
## ⚙ Tech Stack
- Next.js
- Chakra UI
- Contentful CMS
- MDX (next-mdx-remote)
- Firebase
- Google Analytics (react-ga)