snystrom.com Tailwind Templates

Snystrom.com

Personal portfolio website built with Next.js, Tailwind and Contentful.

#contentful #mdx #nextjs #personal-website #portfolio #react #tailwindcss #vercel
Demo Download

snystrom.com

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.

Stack

  • Framework: Next.js
  • Styling: Tailwind CSS
  • CMS: Contentful
  • Database: Firebase
  • Deployment: Vercel

Running Locally

  1. Install dependencies with npm install
  2. Create a .env.local file similar to .env.example
  3. Start project with npm run dev

Getting API Keys

Contentful
1. Setup a Contentful account.
2. Create content models.

This repository uses the following content models:

  1. blog
  2. featuredProject
  3. project
  4. galleryDestinations (for photography)
  1. Copy your Space ID and Content Delivery API access token
  2. 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.local

Sitemap Overview

pages/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

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes