Benjamincarlson.io screenshot

Benjamincarlson.io

Author Avatar Theme by Bjcarlson42
Updated: 19 Apr 2023
138 Stars

My personal website built with Next.js, Chakra UI, Firebase, and next-mdx-remeote.

Categories

Overview

This product is a personal portfolio website hosted at https://benjamincarlson.io. The website has undergone various changes over the years, transitioning from a static HTML/CSS/JS site to Wordpress, Jekyll, Gatsby, Django, and finally landing on Next.js/React. The website showcases the owner’s writing, projects, gear, tutorials, experience, and more. Users are also encouraged to fork the repository and create their own website based on it.

Features

  • Light/Dark mode: The website supports both light and dark modes, allowing users to choose the appearance that suits them.
  • Realtime Statistics via SWR and Next.js API routes: The website provides real-time statistics by leveraging the SWR library and Next.js API routes.
  • Responsive Design: The website is designed to be responsive, ensuring a seamless user experience across different devices.
  • Blog: The website includes a blog section where the owner shares their thoughts, ideas, and experiences.
  • Google Analytics: The website integrates with Google Analytics to provide insights into website traffic and user behavior.
  • Google AdSense: Google AdSense is utilized on the website to monetize through advertising.
  • Tech Stack: The website is built using Next.js as the JavaScript framework, Chakra UI as the CSS framework, and Prism.js for code syntax highlighting. Firebase is used for the database to store blog post view and like counts. The deployment is done through Vercel.

Installation

To run the website locally, follow these steps:

  1. Clone this repository.
  2. Create a .env file and enter your secret keys. If you skip this step, the site will still run but some data may not be fetched.
  3. Inside the .env file, make sure to include any necessary secret keys or configuration variables.
  4. Move into the project root directory and remove git tracking if you’re not planning to submit a PR to this repository.
  5. Install the project dependencies.
  6. Run the website locally.
  7. Open your web browser and navigate to http://localhost:3000 to access the website.

Summary

This product is a personal portfolio website built using Next.js/React. It offers features such as light/dark mode, real-time statistics, responsive design, a blog section, integration with Google Analytics and Google AdSense, and a tech stack consisting of Next.js, Chakra UI, Prism.js, Firebase, and Vercel. The website can be run locally by following the provided installation guide. Contributions to the project are also welcomed via submitting pull requests.