My personal website/portfolio/blog. Built with dynamic content management through Contentful headless CMS to add projects and blog posts. Using Firebase to enable engagement on published content, such as views and likes.
- Framework: Next.js
- Styling: Tailwind CSS
- CMS: Contentful
- Database: Firebase
- Deployment: Vercel
- Install dependencies with
npm install - Create a
.env.localfile similar to.env.example - Start project with
npm run dev
Contentful
1. Setup a Contentful account.
2. Create content models.
This repository uses the following content models:
- blog
- featuredProject
- project
- galleryDestinations (for photography)
- Copy your Space ID and Content Delivery API access token
- Save your API keys to your
.env.local
Firebase
1. Setup a new Firebase project
2. Copy the API keys.
3. Go to Build and create a Firestore Database
4. Add a collection named
articles 5. Save your API keys to your
.env.localpages/index.js : Homepage
pages/about.js : About page
pages/gallery.js : Photography Gallery page
pages/projects.js : All projects
pages/blog.js : All blog posts
pages/blog/[slug].js : Individual blog post
pages/api/views : API to fetch blog post interactions from Firebase
pages/api/likes : API to write blog post likes to Firebase